:root {
  color-scheme: light;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: #17372e;
  background: #eef2ed;
  --portal-green: #07584a;
  --portal-deep: #06382f;
  --portal-gold: #c99632;
  --portal-ivory: #fffdf6;
  --portal-muted: #71847d;
  --portal-line: rgba(22, 83, 66, .13);
}

* { box-sizing: border-box; }

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -8%, rgba(26, 129, 96, .12), transparent 34%),
    #eef2ed;
}

body {
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(201, 150, 50, .35);
  outline-offset: 2px;
}

.mobile-portal-shell {
  width: min(100%, 520px);
  min-height: 100dvh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #f4f6f2;
  box-shadow: 0 0 45px rgba(4, 41, 32, .13);
}

.portal-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 64px;
  padding: calc(10px + env(safe-area-inset-top)) 18px 10px;
  color: #f8e9c6;
  background: rgba(6, 56, 47, .97);
  border-bottom: 1px solid rgba(222, 186, 110, .25);
  backdrop-filter: blur(14px);
}

.portal-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.portal-brand > img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .28));
}

.portal-brand-copy {
  display: grid;
  gap: 1px;
}

.portal-brand-copy strong {
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 21px;
  letter-spacing: .06em;
  white-space: nowrap;
}

.portal-brand-copy small {
  color: rgba(248, 233, 198, .64);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
  white-space: nowrap;
}

.portal-content {
  min-height: 0;
  padding: 24px 18px 32px;
}

.portal-loading {
  min-height: 62dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: var(--portal-muted);
}

.portal-loading > img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(5, 62, 47, .2));
  animation: portal-pulse 1.3s ease-in-out infinite alternate;
}

@keyframes portal-pulse {
  to { transform: scale(1.04); box-shadow: 0 0 0 9px rgba(201, 150, 50, .08); }
}

.portal-auth,
.portal-page {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.portal-auth-hero,
.portal-page-heading {
  text-align: center;
}

.portal-auth-hero {
  padding: 6px 0 5px;
}

.portal-auth.is-login {
  position: relative;
  isolation: isolate;
  min-height: auto;
}

.portal-auth.is-login::before {
  display: none;
}

.portal-auth.is-login > * {
  position: relative;
  z-index: 1;
}

.portal-auth.is-login .portal-auth-hero {
  padding: 6px 0 2px;
}

.portal-auth:is(.is-login, .is-register) .portal-auth-logo {
  display: grid;
  grid-template-columns: none;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  row-gap: 4px;
  margin-bottom: 12px;
  text-align: center;
}

.portal-auth:is(.is-login, .is-register) .portal-auth-logo > img {
  width: clamp(76px, 22vw, 88px);
  height: auto;
  filter: drop-shadow(0 8px 15px rgba(5, 58, 44, .16));
}

.portal-auth:is(.is-login, .is-register) .portal-auth-logo strong {
  font-size: clamp(25px, 6.8vw, 31px);
}

.portal-auth.is-login .portal-auth-hero h1 {
  display: none;
}

.portal-auth.is-login .portal-auth-tabs {
  margin-bottom: 15px;
}

.portal-auth.is-login .portal-auth-card {
  padding: 20px;
}

.portal-auth.is-login .portal-form {
  gap: 16px;
}

.portal-auth-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 7px;
}

.portal-auth-logo > img {
  width: clamp(88px, 27vw, 112px);
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 13px 24px rgba(5, 58, 44, .18));
}

.portal-auth-logo > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.portal-auth-logo strong {
  color: var(--portal-deep);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(27px, 8vw, 36px);
  letter-spacing: .08em;
  white-space: nowrap;
}

.portal-auth-logo small {
  color: var(--portal-gold);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  white-space: nowrap;
}

.portal-auth-hero > span,
.portal-page-heading > span,
.portal-hero-copy > span {
  color: var(--portal-gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
}

.portal-auth-hero h1,
.portal-page-heading h1,
.portal-hero-copy h1 {
  margin: 7px 0 8px;
  color: var(--portal-deep);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(30px, 9vw, 42px);
}

.portal-auth-hero p,
.portal-page-heading p,
.portal-hero-copy p {
  margin: 0;
  color: var(--portal-muted);
  line-height: 1.65;
}

.portal-auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 4px;
  margin-bottom: 14px;
  border-radius: 15px;
  background: #e5ebe6;
}

.portal-auth-tabs button {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  color: #6b7e77;
  background: transparent;
  font-weight: 800;
}

.portal-auth-tabs button.is-active {
  color: #173d31;
  background: #fff;
  box-shadow: 0 5px 16px rgba(15, 69, 53, .09);
}

.portal-card,
.portal-auth-card,
.portal-game-card,
.portal-action-card {
  border: 1px solid var(--portal-line);
  border-radius: 22px;
  background: rgba(255, 255, 252, .96);
  box-shadow: 0 15px 35px rgba(16, 61, 48, .08);
}

.portal-auth-card,
.portal-card {
  padding: 20px;
}

.portal-auth-card {
  border-color: rgba(201, 150, 50, .25);
  box-shadow: 0 18px 42px rgba(16, 61, 48, .11), inset 0 1px rgba(255, 255, 255, .85);
}

.portal-form {
  display: grid;
  gap: 13px;
}

.portal-field {
  display: grid;
  gap: 7px;
}

.portal-field > span {
  color: #556a62;
  font-size: 13px;
  font-weight: 800;
}

.portal-field input,
.portal-room-input input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid rgba(22, 83, 66, .15);
  border-radius: 13px;
  color: #17372e;
  background: #f7f9f6;
  font-size: 16px;
}

.portal-field input:focus,
.portal-room-input input:focus {
  border-color: rgba(201, 150, 50, .78);
  background: #fff;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(201, 150, 50, .12);
}

.portal-code-row,
.portal-room-input {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
  align-items: end;
}

.portal-code-row .portal-field { min-width: 0; }

.portal-code-button,
.portal-secondary-button,
.portal-text-button {
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  color: var(--portal-green);
  background: #e5efe9;
  font-weight: 800;
}

.portal-auth-assist {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--portal-muted);
  font-size: 12px;
}

.portal-auth-assist .portal-text-button { color: var(--portal-green); font-weight: 800; }
.portal-consent { display: flex; align-items: flex-start; gap: 8px; color: #526b62; font-size: 12px; line-height: 1.55; }
.portal-consent input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--portal-green); }
.portal-policy-note { color: var(--portal-muted); font-size: 12px; line-height: 1.6; }
.portal-policy-note summary { color: var(--portal-green); cursor: pointer; font-weight: 800; }
.portal-policy-note p { margin: 7px 0 0; }

.portal-code-button { padding: 0 13px; }

.portal-primary-button,
.portal-game-enter {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 15px;
  color: #273016;
  background: linear-gradient(180deg, #f5d681, #d5a63e);
  box-shadow: 0 5px 0 #9b6c20, 0 12px 24px rgba(154, 103, 27, .18);
  font-weight: 900;
  font-size: 17px;
}

.portal-primary-button:active,
.portal-game-enter:active { transform: translateY(2px); box-shadow: 0 3px 0 #9b6c20; }

.portal-primary-button:disabled,
.portal-code-button:disabled,
.portal-secondary-button:disabled {
  cursor: wait;
  opacity: .58;
}

.portal-text-button {
  min-height: auto;
  padding: 7px 3px;
  background: transparent;
}

.portal-hero-card {
  position: relative;
  overflow: hidden;
  min-height: 218px;
  display: grid;
  align-content: space-between;
  padding: 24px;
  border-radius: 25px;
  color: #f8e9c6;
  background:
    radial-gradient(circle at 90% 8%, rgba(227, 189, 101, .3), transparent 31%),
    linear-gradient(145deg, #06382f, #08705a);
  box-shadow: 0 19px 38px rgba(6, 59, 46, .19);
}

.portal-hero-copy h1,
.portal-hero-copy p { color: inherit; }
.portal-hero-copy p { color: rgba(242, 239, 218, .75); }

.portal-game-enter { max-width: 230px; }

.portal-section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 24px 2px 11px;
}

.portal-section-title h2 {
  margin: 0;
  color: #163d32;
  font-size: 18px;
}

.portal-section-title small { color: var(--portal-muted); }

.portal-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.portal-game-hall {
  --portal-game-entry-width: min(280px, calc(74vw - 26.64px));
  --portal-game-entry-ratio: 16 / 9;
  --portal-game-entry-gap: 14px;
  display: grid;
  gap: 15px;
}
.portal-game-hall:not(.is-battle-choice):not(.is-mode-choice) {
  position: relative;
  isolation: isolate;
  min-height: calc(100dvh - 192px);
  align-content: center;
}
.portal-game-hall:not(.is-battle-choice):not(.is-mode-choice)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(88vw, 430px);
  aspect-ratio: 1;
  border: 1px solid rgba(248, 213, 128, .08);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 203, 103, .08), transparent 61%);
  box-shadow:
    0 0 0 28px rgba(248, 213, 128, .025),
    0 0 0 62px rgba(248, 213, 128, .016);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.portal-game-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  column-gap: 0;
  row-gap: var(--portal-game-entry-gap);
}
.portal-game-grid .portal-game-cover,
.portal-duel-choices .portal-duel-card {
  width: var(--portal-game-entry-width);
  aspect-ratio: var(--portal-game-entry-ratio);
}
.portal-game-grid .portal-action-card { min-height: 138px; }
.portal-action-card.is-featured {
  border-color: rgba(205, 155, 55, .7);
  background: linear-gradient(145deg, #fffdf5 0%, #fff5d9 100%);
  box-shadow: 0 12px 24px rgba(128, 92, 24, .12);
}
.portal-action-card.is-coming { opacity: .68; filter: saturate(.72); }

/* 成都麻将二级入口 V4：智能竞技在上、好友牌局在下。两张主卡按手机
   可用高度均分，避免横排过小，也避免上下出现大片空白。 */
.portal-game-hall.is-battle-choice {
  --portal-game-entry-width: min(320px, calc(84vw - 26px));
  min-height: calc(100dvh - 192px);
  align-content: center;
  gap: clamp(12px, 2.2dvh, 20px);
}

.portal-duel-choices {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, auto);
  min-height: calc(100dvh - 192px);
  justify-items: center;
  align-content: space-evenly;
  gap: var(--portal-game-entry-gap);
}

.portal-ai-resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 auto 10px;
  padding: 10px 12px;
  border: 1px solid rgb(224 184 92 / 52%);
  border-radius: 14px;
  color: #fff3cf;
  background: linear-gradient(100deg, rgb(4 78 61 / 94%), rgb(17 104 75 / 90%));
  box-shadow: 0 8px 22px rgb(0 42 31 / 18%);
}

.portal-ai-resume span {
  display: grid;
  min-width: 0;
}

.portal-ai-resume small {
  color: rgb(255 255 255 / 68%);
  font-size: 11px;
}

.portal-ai-resume strong {
  font-size: 15px;
}

.portal-ai-resume button {
  flex: none;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgb(255 228 158 / 60%);
  border-radius: 999px;
  color: #2f230c;
  background: #f3cf75;
  font-weight: 900;
}

.portal-duel-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0;
  padding: 8px;
  border: 1px solid rgba(239, 202, 112, .76);
  border-radius: 27px;
  color: #fff9e7;
  text-align: left;
  background:
    radial-gradient(circle at 86% 15%, rgba(255, 220, 132, .17), transparent 28%),
    linear-gradient(145deg, #0a644e 0%, #064637 55%, #052d27 100%);
  box-shadow:
    0 20px 42px rgba(1, 31, 24, .3),
    inset 0 1px rgba(255, 250, 226, .24),
    inset 0 0 0 4px rgba(3, 54, 42, .22);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.portal-duel-card.is-friends {
  background:
    radial-gradient(circle at 87% 16%, rgba(255, 224, 151, .2), transparent 30%),
    linear-gradient(145deg, #137157 0%, #07503e 55%, #06332a 100%);
}

.portal-duel-card::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 4px;
  border: 1px solid rgba(255, 225, 153, .25);
  border-radius: 22px;
  pointer-events: none;
}

.portal-duel-card:hover,
.portal-duel-card:focus-visible {
  transform: translateY(-3px);
  border-color: #ffe09a;
  box-shadow:
    0 25px 48px rgba(1, 31, 24, .38),
    0 0 0 3px rgba(239, 195, 92, .16),
    inset 0 1px rgba(255, 250, 226, .28);
  outline: none;
}

.portal-duel-art {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 227, 158, .42);
  min-height: 0;
  border-radius: 20px 20px 13px 13px;
  background:
    radial-gradient(circle at 50% 46%, rgba(249, 205, 95, .24), transparent 44%),
    linear-gradient(145deg, #0b664f 0%, #064333 100%);
  box-shadow: inset 0 0 0 2px rgba(0, 41, 31, .24);
}

.portal-duel-scene {
  width: 100%;
  height: 100%;
  display: block;
  object-position: center;
  filter: saturate(1.05) contrast(1.02);
  transition: transform .25s ease;
}

.portal-duel-card.is-ai .portal-duel-scene {
  object-fit: contain;
  object-position: 50% 54%;
  padding: 2px 5px 0;
}

.portal-duel-card.is-friends .portal-duel-scene {
  object-fit: cover;
  object-position: 50% 52%;
}

.portal-duel-card:hover .portal-duel-scene,
.portal-duel-card:focus-visible .portal-duel-scene {
  transform: scale(1.025);
}

.portal-duel-art-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 45, 35, .12), transparent 34%, transparent 68%, rgba(3, 45, 35, .12)),
    linear-gradient(0deg, rgba(1, 32, 24, .22), transparent 42%);
  pointer-events: none;
}

.portal-duel-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 7px;
}

.portal-duel-copy strong {
  color: #fff2c6;
  font-family: 'STKaiti', 'KaiTi', serif;
  font-size: clamp(25px, 6.8vw, 30px);
  line-height: 1.08;
  letter-spacing: .055em;
  white-space: nowrap;
  text-shadow: 0 3px 10px rgba(0, 22, 16, .5);
}

.portal-duel-enter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f5d37e;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.portal-duel-enter i {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(247, 215, 133, .68);
  border-radius: 50%;
  background: rgba(2, 45, 34, .36);
  font-size: 15px;
  font-style: normal;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1);
}

/* 成都麻将玩法入口 V7：上下双入口按手机可用高度均分；牌面直接使用
   正式生产素材的一万、幺鸡和一筒，不附加箭头、空圈等装饰符号。 */
.portal-game-hall.is-mode-choice {
  min-height: calc(100dvh - 192px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  padding-block: 0;
}

.portal-mahjong-mode-stage {
  position: relative;
  isolation: isolate;
  overflow: visible;
  width: 100%;
  height: auto;
  min-height: calc(100dvh - 192px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, auto);
  justify-items: center;
  align-content: space-evenly;
  justify-self: center;
  gap: var(--portal-game-entry-gap);
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #fff4d4;
  background: transparent;
  box-shadow: none;
}

.portal-mahjong-mode-stage::before,
.portal-mahjong-mode-stage::after {
  display: none;
}

.portal-mahjong-mode-card {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  justify-items: stretch;
  align-content: stretch;
  gap: 0;
  padding: 8px;
  border: 1px solid rgba(239, 202, 112, .76);
  border-radius: 27px;
  color: #fff9e7;
  text-align: left;
  background:
    radial-gradient(circle at 86% 15%, rgba(255, 220, 132, .17), transparent 28%),
    linear-gradient(145deg, #0a644e 0%, #064637 55%, #052d27 100%);
  box-shadow:
    0 20px 42px rgba(1, 31, 24, .3),
    inset 0 1px rgba(255, 250, 226, .24),
    inset 0 0 0 4px rgba(3, 54, 42, .22);
}

.portal-mahjong-mode-card.is-dingque {
  background:
    radial-gradient(circle at 84% 18%, rgba(255, 229, 165, .19), transparent 30%),
    linear-gradient(145deg, #147158 0%, #07503e 55%, #06332a 100%);
}

.portal-mahjong-mode-card::after {
  z-index: 3;
  inset: 4px;
  width: auto;
  height: auto;
  border: 1px solid rgba(255, 225, 153, .25);
  border-radius: 22px;
}

.portal-mahjong-mode-card:hover,
.portal-mahjong-mode-card:focus-visible {
  transform: translateY(-3px);
  border-color: #ffe09a;
  box-shadow:
    0 25px 48px rgba(1, 31, 24, .38),
    0 0 0 3px rgba(239, 195, 92, .16),
    inset 0 1px rgba(255, 250, 226, .28);
  outline: none;
}

.portal-mode-card-art {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 227, 158, .42);
  border-radius: 20px 20px 13px 13px;
  background:
    radial-gradient(ellipse at 50% 84%, rgba(244, 198, 88, .28), transparent 47%),
    radial-gradient(circle at 16% 8%, rgba(98, 211, 155, .24), transparent 27%),
    repeating-linear-gradient(112deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #0d7558 0%, #07513e 54%, #042f27 100%);
  box-shadow:
    inset 0 0 0 2px rgba(0, 41, 31, .24),
    inset 0 -30px 55px rgba(1, 29, 22, .22);
}

.portal-mahjong-mode-card.is-dingque .portal-mode-card-art {
  background:
    radial-gradient(ellipse at 52% 84%, rgba(251, 211, 112, .3), transparent 48%),
    radial-gradient(circle at 84% 8%, rgba(109, 220, 163, .23), transparent 28%),
    repeating-linear-gradient(112deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #147a5d 0%, #07533f 54%, #043229 100%);
}

.portal-mode-table-glow {
  position: absolute;
  left: 50%;
  bottom: -32%;
  width: 82%;
  height: 92%;
  border: 1px solid rgba(246, 207, 112, .34);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(16, 134, 91, .52), rgba(3, 60, 45, .08) 66%, transparent 68%);
  box-shadow:
    0 0 0 18px rgba(237, 197, 98, .035),
    0 0 0 42px rgba(237, 197, 98, .018);
  transform: translateX(-50%);
}

.portal-mode-real-tiles {
  position: absolute;
  z-index: 2;
  inset: 8px 34px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 2vw, 11px);
  perspective: 700px;
}

.portal-mode-real-tiles img {
  width: auto;
  height: min(86%, 164px);
  max-width: 29%;
  display: block;
  object-fit: contain;
  filter:
    drop-shadow(0 13px 11px rgba(0, 25, 18, .32))
    drop-shadow(0 2px 1px rgba(255, 233, 173, .22));
  transform-origin: 50% 88%;
  transition: transform .24s ease, filter .24s ease, opacity .24s ease;
}

.portal-mode-real-tiles img:nth-child(1) { transform: rotate(-9deg) translateY(8px); }
.portal-mode-real-tiles img:nth-child(2) { transform: translateY(-4px) scale(1.04); }
.portal-mode-real-tiles img:nth-child(3) { transform: rotate(9deg) translateY(8px); }

.portal-mahjong-mode-card:hover .portal-mode-real-tiles img,
.portal-mahjong-mode-card:focus-visible .portal-mode-real-tiles img {
  filter:
    drop-shadow(0 16px 13px rgba(0, 25, 18, .38))
    drop-shadow(0 2px 1px rgba(255, 233, 173, .3));
}

.portal-mode-card-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  padding: 9px 12px 8px;
  white-space: nowrap;
}

.portal-mode-card-copy strong {
  color: #ffe39a;
  font-family: 'STKaiti', 'KaiTi', serif;
  font-size: clamp(30px, 8.2vw, 38px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .09em;
  text-shadow:
    0 2px 0 rgba(92, 51, 5, .72),
    0 5px 13px rgba(0, 22, 16, .58);
}

.portal-mode-card-copy small {
  color: rgba(255, 242, 201, .78);
  font-size: clamp(10px, 2.8vw, 12px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .015em;
  text-shadow: 0 2px 6px rgba(0, 20, 14, .55);
}

/* Game lobby is a landscape-first game surface. Account pages retain the
   compact portrait shell; these overrides are deliberately scoped to the
   game-flow marker applied by mobile-portal.js. */
body.portal-game-flow {
  background: #062b22;
}

body.portal-game-flow .mobile-portal-shell {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 221, 137, .18), transparent 28%),
    radial-gradient(circle at 12% 48%, rgba(28, 151, 105, .28), transparent 38%),
    radial-gradient(circle at 88% 82%, rgba(171, 111, 22, .13), transparent 34%),
    linear-gradient(148deg, #031f19 0%, #07543d 53%, #03271e 100%);
}

/* 智能竞技／好友牌局手机页：竖图严格跟随页面可用宽高完整铺满，
   不为人物位置二次裁切或偏移；两张既有入口保持原居中位置直接叠放。 */
body.portal-game-flow.portal-battle-choice .portal-content {
  position: relative;
  isolation: isolate;
  background-color: #e8d49a;
  background-image: url("./assets/page-backgrounds/duel-choice-emerald-palace-v1.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

body.portal-game-flow.portal-battle-choice .portal-game-hall.is-battle-choice,
body.portal-game-flow.portal-battle-choice .portal-duel-choices {
  position: relative;
  z-index: 1;
}

/* 换三张／定缺手机页：红色旗袍荷官图铺满顶部品牌栏与底部导航之间的
   内容区，图片严格跟随页面宽高完整铺满，不裁切、不偏移；两张玩法
   入口保持原居中位置直接叠放，尺寸、点击区域和玩法逻辑均不改变。 */
body.portal-game-flow.portal-mode-choice .portal-content {
  position: relative;
  isolation: isolate;
  background-color: #d9bd7a;
  background-image: url("./assets/page-backgrounds/mode-choice-crimson-pavilion-v1.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

body.portal-game-flow.portal-mode-choice .portal-game-hall.is-mode-choice,
body.portal-game-flow.portal-mode-choice .portal-mahjong-mode-stage {
  position: relative;
  z-index: 1;
}

/* “我的”主页：保留会馆氛围，但用柔和遮罩收住背景，突出信息层级。 */
body.portal-account-flow.portal-account-home .portal-content {
  position: relative;
  isolation: isolate;
  background-color: #e8d4a6;
  background-image: url("./assets/page-backgrounds/account-home-crystal-salon-v1.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

body.portal-account-flow.portal-account-home .portal-content::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 252, 244, .16), rgba(244, 235, 211, .28));
  content: "";
  pointer-events: none;
}

body.portal-account-flow.portal-account-home .portal-my-page {
  position: relative;
  z-index: 1;
}

@media (orientation: landscape) {
  body.portal-game-flow .portal-content {
    padding: 14px max(22px, env(safe-area-inset-left)) 14px;
  }

  body.portal-game-flow .portal-page,
  body.portal-game-flow .portal-topbar,
  body.portal-game-flow .portal-nav {
    width: min(1120px, 100%);
    max-width: none;
  }

  body.portal-game-flow .portal-game-hall {
    width: min(1060px, 100%);
    min-height: calc(100dvh - 108px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: clamp(24px, 3dvh, 32px);
  }

  body.portal-game-flow .portal-game-hall .portal-game-grid {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-self: center;
  }

  body.portal-game-flow .portal-game-hall.is-battle-choice {
    width: min(620px, 100%);
    min-height: calc(100dvh - 108px);
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 16px;
  }

  body.portal-game-flow .portal-game-hall.is-battle-choice .portal-duel-choices {
    grid-column: 1;
    grid-row: 1;
    width: min(560px, 100%);
    min-height: clamp(420px, calc(100dvh - 128px), 560px);
    justify-self: center;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, auto);
    align-content: space-evenly;
    gap: var(--portal-game-entry-gap);
  }

  body.portal-game-flow .portal-game-hall.is-battle-choice .portal-duel-card {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0;
    padding: 9px;
  }

  body.portal-game-flow .portal-game-hall.is-battle-choice .portal-duel-art {
    min-height: 0;
  }

  body.portal-game-flow .portal-game-hall.is-battle-choice .portal-duel-copy strong { font-size: 30px; }

  body.portal-game-flow .portal-game-hall.is-mode-choice {
    width: min(620px, 100%);
    min-height: calc(100dvh - 108px);
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 16px;
  }

  body.portal-game-flow .portal-game-hall.is-mode-choice .portal-mahjong-mode-stage {
    width: min(560px, 100%);
    height: auto;
    min-height: clamp(420px, calc(100dvh - 128px), 560px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, auto);
    align-items: stretch;
    align-content: space-evenly;
    gap: var(--portal-game-entry-gap);
    padding: 0;
  }

  body.portal-game-flow .portal-game-hall.is-mode-choice .portal-mahjong-mode-card {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    justify-items: stretch;
    align-content: stretch;
    gap: 0;
    padding: 9px;
    text-align: left;
  }

  body.portal-game-flow .portal-game-hall.is-mode-choice .portal-mode-card-copy {
    justify-items: start;
  }

  body.portal-game-flow .portal-game-hall.is-mode-choice .portal-mode-card-art { min-height: 0; }

}

/* 常见手机横屏只有约 400—480px 高：压缩装饰留白，不缩小玩法辨识信息，
   保证麻将墙和两张玩法牌在同一首屏完整出现。 */
@media (orientation: landscape) and (max-height: 500px) {
  body.portal-game-flow .portal-content {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  body.portal-game-flow .portal-game-hall.is-battle-choice {
    min-height: calc(100dvh - 150px);
    gap: 6px;
  }

  body.portal-game-flow .portal-game-hall.is-battle-choice .portal-duel-choices {
    min-height: 380px;
    gap: var(--portal-game-entry-gap);
  }

  body.portal-game-flow .portal-game-hall.is-battle-choice .portal-duel-card {
    height: auto;
    min-height: 184px;
    padding: 7px;
  }

  body.portal-game-flow .portal-game-hall.is-battle-choice .portal-duel-art {
    height: auto;
    min-height: 0;
  }

  body.portal-game-flow .portal-game-hall.is-battle-choice .portal-duel-copy strong {
    font-size: 28px;
  }

  body.portal-game-flow .portal-game-hall.is-mode-choice {
    min-height: calc(100dvh - 76px);
    gap: 6px;
  }

  body.portal-game-flow .portal-game-hall.is-mode-choice .portal-mahjong-mode-stage {
    height: auto;
    min-height: 380px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: var(--portal-game-entry-gap);
    padding: 0;
  }

  body.portal-game-flow .portal-game-hall.is-mode-choice .portal-mahjong-mode-card {
    height: auto;
    min-height: 184px;
    gap: 0;
    padding: 7px;
  }

  body.portal-game-flow .portal-game-hall.is-mode-choice .portal-mode-card-art {
    height: auto;
    min-height: 0;
    transform: none;
  }
}

@media (orientation: portrait) and (max-height: 700px) {
  body.portal-game-flow .portal-content {
    padding-top: 12px;
    padding-bottom: 14px;
  }

  body.portal-game-flow .portal-game-hall.is-mode-choice {
    min-height: calc(100dvh - 162px);
    padding-block: 0;
  }

  body.portal-game-flow .portal-game-hall.is-mode-choice .portal-mahjong-mode-stage {
    width: min(500px, 100%);
    height: max(350px, calc(100dvh - 176px));
    min-height: 0;
    gap: var(--portal-game-entry-gap);
  }

  body.portal-game-flow .portal-game-hall.is-mode-choice .portal-mahjong-mode-card {
    padding: 6px;
    border-radius: 23px;
  }

  body.portal-game-flow .portal-game-hall.is-mode-choice .portal-mode-card-copy {
    min-height: 48px;
    padding-block: 7px 6px;
  }

  body.portal-game-flow .portal-game-hall.is-mode-choice .portal-mode-card-copy strong {
    font-size: clamp(26px, 7.6vw, 33px);
  }
}

.portal-action-card {
  min-height: 118px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 5px;
  padding: 17px;
  border-color: var(--portal-line);
  color: #17372e;
  text-align: left;
}

.portal-action-card > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: #a8751c;
  background: #fbefd3;
  font-weight: 900;
}

.portal-action-card strong { font-size: 16px; }
.portal-action-card small { color: var(--portal-muted); line-height: 1.45; }

/* 游戏大厅首屏只保留四张原创视觉封面；标题以金玉浮雕铭牌压在图内。 */
.portal-game-grid .portal-game-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(249, 215, 128, .92);
  border-radius: 22px;
  background: #073b31;
  color: #fffaf0;
  text-align: left;
  box-shadow:
    0 24px 44px rgba(0, 18, 13, .36),
    0 7px 14px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 250, 224, .52),
    inset 0 -2px 0 rgba(115, 68, 6, .42);
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.portal-game-grid .portal-game-cover::before,
.portal-game-grid .portal-game-cover::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.portal-game-grid .portal-game-cover::before {
  inset: 5px;
  border: 1px solid rgba(255, 233, 172, .46);
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 1px rgba(67, 39, 3, .18),
    0 0 18px rgba(255, 214, 112, .09);
}

.portal-game-grid .portal-game-cover::after {
  top: 0;
  right: 12%;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 250, 218, .95), transparent);
  filter: drop-shadow(0 2px 5px rgba(255, 214, 112, .52));
}

.portal-game-grid .portal-game-cover.is-featured {
  border-color: #ffe29a;
  background: #073b31;
  box-shadow:
    0 26px 50px rgba(0, 18, 13, .4),
    0 0 24px rgba(239, 190, 78, .12),
    inset 0 1px 0 rgba(255, 250, 224, .58),
    inset 0 -2px 0 rgba(115, 68, 6, .42);
}

.portal-game-grid .portal-game-cover.is-coming {
  opacity: 1;
  filter: none;
}

.portal-game-cover > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.002);
  transition: transform .38s cubic-bezier(.2, .7, .2, 1), filter .25s ease;
}

.portal-game-cover.is-coming > img {
  filter: none;
}

.portal-action-card.portal-game-cover > .portal-game-cover-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(2, 20, 17, 0) 45%, rgba(2, 20, 17, .34) 77%, rgba(1, 14, 11, .7) 100%),
    linear-gradient(105deg, rgba(255, 231, 165, .12), transparent 31%),
    linear-gradient(90deg, rgba(2, 20, 17, .12), transparent 52%);
  pointer-events: none;
}

.portal-action-card.portal-game-cover > .portal-game-cover-title {
  position: absolute;
  bottom: 13px;
  left: 13px;
  z-index: 4;
  display: inline-grid;
  place-items: center;
  width: auto;
  height: auto;
  min-width: 42%;
  padding: 8px 15px 9px;
  border: 1px solid rgba(255, 224, 143, .82);
  border-radius: 13px 13px 13px 5px;
  color: #ffe9a6;
  background:
    linear-gradient(180deg, rgba(18, 105, 78, .97), rgba(3, 48, 37, .97)),
    #063c2f;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 247, 211, .32),
    inset 0 -3px 0 rgba(0, 20, 15, .45),
    0 0 0 1px rgba(67, 35, 0, .2);
  pointer-events: none;
}

.portal-game-cover-title strong {
  font-family: "STKaiti", "KaiTi", "FangSong", serif;
  font-size: clamp(23px, 3vw, 33px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: .1em;
  background: linear-gradient(180deg, #fffbdc 0%, #f4d77c 42%, #d39327 72%, #fff0ae 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(95, 50, 3, .9)) drop-shadow(0 3px 4px rgba(0, 0, 0, .62));
}

.portal-action-card.portal-game-cover > .portal-game-cover-status {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 4;
  display: inline-grid;
  place-items: center;
  width: auto;
  height: auto;
  padding: 5px 10px 6px;
  border: 1px solid rgba(255, 225, 155, .72);
  border-radius: 999px;
  color: #fff1bd;
  background: linear-gradient(180deg, rgba(15, 91, 67, .94), rgba(3, 43, 33, .94));
  box-shadow: 0 5px 12px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 247, 217, .28);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  backdrop-filter: blur(7px);
  pointer-events: none;
}

.portal-game-cover:hover,
.portal-game-cover:focus-visible {
  border-color: #fff0b2;
  transform: translateY(-4px) scale(1.006);
  box-shadow:
    0 30px 56px rgba(0, 14, 10, .5),
    0 0 28px rgba(246, 202, 94, .2),
    inset 0 1px 0 rgba(255, 250, 224, .62),
    inset 0 -2px 0 rgba(115, 68, 6, .42);
}

.portal-game-cover:hover > img,
.portal-game-cover:focus-visible > img {
  transform: scale(1.045);
}

.portal-game-cover:focus-visible {
  outline: 3px solid rgba(245, 201, 96, .72);
  outline-offset: 3px;
}

@media (max-width: 430px) {
  .portal-game-grid .portal-game-cover { border-radius: 17px; }
  .portal-duel-choices .portal-duel-card { border-radius: 17px; }
  .portal-duel-choices .portal-duel-card::after { border-radius: 12px; }
  .portal-game-grid .portal-game-cover::before { inset: 4px; border-radius: 12px; }
  .portal-action-card.portal-game-cover > .portal-game-cover-title {
    bottom: 8px;
    left: 8px;
    min-width: 48%;
    padding: 6px 8px 7px;
    border-radius: 10px 10px 10px 4px;
  }
  .portal-game-cover-title strong { font-size: clamp(17px, 5.1vw, 21px); }
  .portal-action-card.portal-game-cover > .portal-game-cover-status {
    top: 8px;
    right: 8px;
    padding: 4px 7px;
    font-size: 8px;
  }
}

.portal-page-heading { padding: 4px 0 18px; }

/* 正式好友房大厅：仅负责视觉与信息层级，真实建房/入房动作沿用既有接口。 */
.portal-room-hall {
  max-width: 460px;
}

.portal-room-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 13px;
  padding: 25px 22px 21px;
  border: 1px solid rgba(226, 188, 103, .48);
  border-radius: 27px;
  color: #fff1cc;
  background:
    radial-gradient(circle at 92% 10%, rgba(229, 191, 105, .25), transparent 29%),
    radial-gradient(circle at 5% 96%, rgba(19, 145, 111, .42), transparent 38%),
    linear-gradient(148deg, #052e28 0%, #075546 57%, #08745b 100%);
  box-shadow:
    0 22px 44px rgba(5, 53, 42, .2),
    inset 0 1px rgba(255, 247, 220, .18);
}

.portal-room-hero::before,
.portal-room-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.portal-room-hero::before {
  inset: 12px;
  border: 1px solid rgba(235, 204, 133, .13);
  border-radius: 20px;
}

.portal-room-hero::after {
  right: -42px;
  bottom: -56px;
  width: 160px;
  height: 160px;
  border: 22px double rgba(242, 207, 127, .07);
  border-radius: 50%;
}

.portal-room-hero-mark {
  position: relative;
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
}

.portal-room-hero-mark > span {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(239, 200, 111, .58);
  border-radius: 19px;
  transform: rotate(45deg);
  box-shadow: 0 0 0 7px rgba(239, 200, 111, .05);
}

.portal-room-hero-mark > img {
  position: relative;
  z-index: 1;
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 9px 16px rgba(0, 0, 0, .34));
}

.portal-room-hero-copy {
  position: relative;
  z-index: 1;
  text-align: center;
}

.portal-room-hero-copy > span {
  color: #d7ad53;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .21em;
}

.portal-room-hero-copy h1 {
  margin: 6px 0 5px;
  color: #fff0c7;
  font: 900 clamp(29px, 8vw, 37px)/1.12 "STKaiti", "KaiTi", serif;
  letter-spacing: .05em;
  text-shadow: 0 3px 11px rgba(0, 0, 0, .24);
}

.portal-room-hero-copy p {
  margin: 0;
  color: rgba(246, 239, 213, .74);
  font-size: 13px;
  line-height: 1.55;
}

.portal-room-badges {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.portal-room-badges > span {
  padding: 6px 10px;
  border: 1px solid rgba(239, 205, 129, .2);
  border-radius: 999px;
  color: rgba(255, 241, 204, .84);
  background: rgba(0, 31, 25, .2);
  font-size: 10px;
  font-weight: 800;
  backdrop-filter: blur(5px);
}

.portal-room-badges b {
  margin-right: 2px;
  color: #efc762;
  font-size: 12px;
}

.portal-room-actions {
  display: grid;
  gap: 13px;
  margin-top: 0;
}

.portal-room-panel {
  position: relative;
  padding: 18px;
  border: 1px solid var(--portal-line);
  border-radius: 22px;
  background: rgba(255, 255, 252, .98);
  box-shadow: 0 13px 31px rgba(13, 61, 48, .08);
}

.portal-room-create-panel {
  border-color: rgba(201, 150, 50, .36);
  background:
    linear-gradient(135deg, rgba(255, 250, 232, .98), rgba(255, 255, 252, .98));
}

.portal-room-panel-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  align-items: start;
}

.portal-room-panel-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(201, 150, 50, .34);
  border-radius: 14px;
  color: #8c5c12;
  background: linear-gradient(145deg, #fff4d2, #ead49e);
  box-shadow: inset 0 1px rgba(255, 255, 255, .8);
  font: 900 20px/1 "STKaiti", "KaiTi", serif;
}

.portal-room-join-panel .portal-room-panel-icon {
  border-color: rgba(7, 88, 74, .18);
  color: var(--portal-green);
  background: #e8f1eb;
}

.portal-room-panel-head small {
  display: block;
  margin-bottom: 3px;
  color: #b27c1d;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .18em;
}

.portal-room-panel-head h2 {
  margin: 0;
  color: var(--portal-deep);
  font-size: 19px;
}

.portal-room-panel-head p {
  margin: 5px 0 0;
  color: var(--portal-muted);
  font-size: 12px;
  line-height: 1.5;
}

.portal-room-route {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin: 15px 2px 14px;
  color: #577169;
  font-size: 10px;
  font-weight: 800;
}

.portal-room-route i {
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 150, 50, .15), rgba(201, 150, 50, .68), rgba(201, 150, 50, .15));
}

.portal-room-create-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-inline: 19px;
}

.portal-room-create-button b {
  font-size: 23px;
  line-height: 1;
}

.portal-room-hall .portal-room-input {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 15px;
  padding: 6px;
  border: 1px solid rgba(7, 88, 74, .13);
  border-radius: 15px;
  background: #f0f5f1;
}

.portal-room-input-label {
  padding-left: 8px;
  color: #71847d;
  font-size: 11px;
  font-weight: 900;
}

.portal-room-hall .portal-room-input input {
  min-width: 0;
  min-height: 43px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .13em;
  box-shadow: none;
}

.portal-room-hall .portal-room-input input::placeholder {
  color: #9baaa5;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

.portal-room-hall .portal-room-input input:focus {
  background: rgba(255, 255, 255, .78);
  box-shadow: none;
}

.portal-room-hall .portal-code-button {
  min-width: 92px;
  min-height: 43px;
  padding-inline: 14px;
  color: #fff2cf;
  background: linear-gradient(180deg, #0a725d, #075244);
  box-shadow: 0 5px 12px rgba(4, 73, 58, .15);
}

.portal-room-footnote {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 15px 0 2px;
  color: #7a8c85;
  font-size: 11px;
}

.portal-room-footnote span {
  color: #c69736;
  font-size: 8px;
}

.portal-stack {
  display: grid;
  gap: 14px;
}

.portal-card h2,
.portal-card h3 { margin: 0 0 8px; }
.portal-card p { color: var(--portal-muted); line-height: 1.65; }

.portal-room-input { align-items: center; }
.portal-room-input button { min-width: 82px; padding-inline: 15px; }

.portal-rule-form,
.portal-rule-card { display: grid; gap: 14px; }

.portal-rule-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.portal-rule-section-title h2 { margin: 0; }
.portal-rule-section-title small { color: var(--portal-gold); font-weight: 800; }

.portal-preset-grid { display: grid; gap: 10px; }

.portal-preset-option {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  min-height: 74px;
  padding: 13px 14px;
  border: 1px solid var(--portal-line);
  border-radius: 15px;
  background: #f5f8f4;
}

.portal-preset-option.is-selected {
  border-color: rgba(201, 150, 50, .85);
  background: #fff9e9;
  box-shadow: inset 0 0 0 1px rgba(201, 150, 50, .2);
}

.portal-preset-option input { accent-color: var(--portal-gold); }
.portal-preset-option span,
.portal-preset-option strong,
.portal-preset-option small { display: block; }
.portal-preset-option small { margin-top: 4px; color: var(--portal-muted); line-height: 1.45; }

.portal-switch-row,
.portal-select-row,
.portal-stepper-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--portal-line);
}

.portal-switch-row:last-child,
.portal-select-row:last-child,
.portal-stepper-row:last-child { border-bottom: 0; }
.portal-switch-row span,
.portal-switch-row strong,
.portal-switch-row small,
.portal-select-row span,
.portal-select-row strong,
.portal-select-row small,
.portal-stepper-row > span,
.portal-stepper-row > span strong,
.portal-stepper-row > span small { display: block; }
.portal-switch-row small,
.portal-select-row small,
.portal-stepper-row > span small { margin-top: 3px; color: var(--portal-muted); line-height: 1.45; }

.portal-switch-row input {
  width: 46px;
  height: 26px;
  accent-color: var(--portal-green);
}

.portal-select-row select {
  min-width: 86px;
  padding: 9px 10px;
  border: 1px solid var(--portal-line);
  border-radius: 11px;
  color: var(--portal-deep);
  background: #fff;
  font-weight: 800;
}

.portal-fan-note.is-high { color: #9b5b13; }

.portal-fan-stepper {
  display: grid;
  grid-template-columns: 40px minmax(64px, auto) 40px;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--portal-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .8);
}

.portal-fan-stepper button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--portal-deep);
  background: #e9f0ec;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.portal-fan-stepper button:last-child {
  color: #fff6d9;
  background: var(--portal-green);
}

.portal-fan-stepper button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.portal-fan-stepper output {
  min-width: 64px;
  color: var(--portal-deep);
  text-align: center;
  font-size: 17px;
  font-weight: 900;
  white-space: nowrap;
}

.portal-rule-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.portal-rule-actions .portal-primary-button { grid-column: 1 / -1; }

/* 正式“我的”页面：沿用登录页的深翡翠、象牙白与克制金色。 */
.portal-my-page {
  max-width: 440px;
}

.portal-my-page svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}

.portal-my-profile {
  position: relative;
  overflow: hidden;
  padding: 17px;
  border: 1px solid rgba(201, 150, 50, .42);
  border-radius: 20px;
  background:
    radial-gradient(circle at 93% 9%, rgba(201, 150, 50, .13), transparent 29%),
    var(--portal-ivory);
  box-shadow: 0 9px 25px rgba(4, 41, 32, .08);
}

.portal-my-profile::after {
  position: absolute;
  right: -22px;
  bottom: -30px;
  width: 112px;
  height: 112px;
  border: 13px solid rgba(7, 88, 74, .045);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.portal-my-profile-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.portal-my-avatar {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  overflow: hidden;
  border: 2px solid var(--portal-gold);
  border-radius: 18px;
  background: linear-gradient(145deg, #fffef8, #e5f0e8);
  box-shadow: inset 0 0 0 3px #fff8df, 0 6px 14px rgba(4, 41, 32, .12);
}

.portal-my-avatar > img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(4, 41, 32, .17));
}

.portal-my-identity {
  min-width: 0;
}

.portal-my-identity h1 {
  margin: 0;
  overflow: hidden;
  color: var(--portal-deep);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 24px;
  font-weight: 700;
}

.portal-my-identity > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 7px;
  color: var(--portal-muted);
  font-size: 12px;
}

.portal-my-identity > div > button {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid rgba(7, 88, 74, .14);
  border-radius: 8px;
  color: var(--portal-green);
  background: #edf4ef;
  font-size: 11px;
}

.portal-my-identity > div > button svg {
  width: 13px;
  height: 13px;
}

.portal-my-identity > div > button b { font-weight: 700; }

.portal-my-section {
  margin-top: 17px;
}

/* “我的”首页只保留身份卡 + 一张连续服务卡，避免碎片化分组。 */
.portal-my-services {
  overflow: hidden;
  margin-top: 17px;
  border: 1px solid rgba(201, 150, 50, .44);
  border-radius: 21px;
  background: rgba(255, 253, 247, .94);
  box-shadow: 0 12px 28px rgba(4, 41, 32, .10);
  backdrop-filter: blur(8px);
}

.portal-my-services-heading {
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  border-bottom: 1px solid rgba(7, 88, 74, .11);
  color: var(--portal-deep);
  background: linear-gradient(90deg, rgba(7, 88, 74, .075), rgba(255, 253, 247, 0));
}

.portal-my-services-heading strong {
  font: 700 15px/1.1 "STKaiti", "KaiTi", serif;
  letter-spacing: .1em;
}

.portal-my-services-heading span {
  color: var(--portal-muted);
  font-size: 10px;
}

.portal-my-services .portal-my-menu {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.portal-my-services .portal-my-row {
  min-height: 70px;
  padding-right: 15px;
}

.portal-my-section > h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 4px 8px;
  color: var(--portal-deep);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
}

.portal-my-section > h2::before {
  width: 7px;
  height: 7px;
  border: 1px solid var(--portal-gold);
  background: #fff2c9;
  transform: rotate(45deg);
  content: "";
}

.portal-my-menu {
  overflow: hidden;
  border: 1px solid rgba(201, 150, 50, .42);
  border-radius: 18px;
  background: var(--portal-ivory);
  box-shadow: 0 7px 20px rgba(4, 41, 32, .06);
}

.portal-my-row {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 0;
  color: var(--portal-deep);
  background: transparent;
  text-align: left;
}

.portal-my-row + .portal-my-row,
.portal-setting-row + .portal-setting-row {
  border-top: 1px solid var(--portal-line);
}

.portal-my-row:active,
.portal-my-row:focus-visible,
.portal-setting-row:active,
.portal-setting-row:focus-visible {
  background: #edf4ef;
}

.portal-my-row-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(201, 150, 50, .45);
  border-radius: 13px;
  color: var(--portal-green);
  background: linear-gradient(145deg, #fffaf0, #e5f0e8);
}

.portal-my-row-copy {
  min-width: 0;
}

.portal-my-row-copy strong,
.portal-my-row-copy small {
  display: block;
}

.portal-my-row-copy strong {
  color: #17372e;
  font-size: 15px;
  font-weight: 700;
}

.portal-my-row-copy small {
  margin-top: 4px;
  overflow: hidden;
  color: var(--portal-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.portal-my-row-arrow {
  color: var(--portal-gold);
  font-size: 24px;
  line-height: 1;
}

.portal-my-subhead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: 58px;
  margin: -10px 0 14px;
}

.portal-my-subhead > div {
  min-width: 0;
  text-align: center;
}

.portal-my-subhead h1 {
  margin: 0;
  color: var(--portal-deep);
  font: 700 21px/1.2 "STKaiti", "KaiTi", serif;
  letter-spacing: .06em;
}

.portal-my-subhead p {
  margin: 3px 0 0;
  color: var(--portal-muted);
  font-size: 10px;
}

.portal-account-editor {
  border-color: rgba(201, 150, 50, .32);
}

.portal-avatar-picker {
  min-width: 0;
  padding: 0;
  margin: 2px 0 0;
  border: 0;
}

.portal-avatar-picker legend {
  padding: 0;
  margin-bottom: 8px;
  color: #556a62;
  font-size: 13px;
  font-weight: 800;
}

.portal-avatar-picker > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.portal-avatar-picker button {
  position: relative;
  min-width: 0;
  display: grid;
  min-height: 66px;
  place-items: center;
  padding: 7px;
  border: 1px solid var(--portal-line);
  border-radius: 12px;
  color: var(--portal-muted);
  background: #f7f9f6;
  font-size: 10px;
}

.portal-avatar-picker button.is-selected {
  border-color: var(--portal-gold);
  color: var(--portal-green);
  background: #fff9e9;
  box-shadow: inset 0 0 0 1px rgba(201, 150, 50, .24);
}

.portal-avatar-picker img {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  object-fit: cover;
}

.portal-avatar-upload-mark {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(201, 150, 50, .62);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #f1c75f, #b67b14);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.portal-avatar-upload.is-selected .portal-avatar-upload-mark {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 19px;
  height: 19px;
  font-size: 14px;
}

.portal-account-status {
  display: grid;
  gap: 11px;
}

.portal-account-status > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--portal-line);
}

.portal-account-status span { color: var(--portal-muted); font-size: 12px; }
.portal-account-status strong { overflow-wrap: anywhere; text-align: right; font-size: 13px; }

.portal-my-policy {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  color: var(--portal-muted);
}

.portal-my-policy svg { color: var(--portal-green); }
.portal-my-policy p { margin: 0; line-height: 1.7; font-size: 12px; }

.portal-logout-button {
  display: block;
  margin: 18px auto 0;
  color: #8b4b3c;
}

.portal-asset-hero {
  padding: 19px 17px 17px;
  border: 1px solid rgba(201, 150, 50, .42);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 12%, rgba(201, 150, 50, .14), transparent 28%),
    var(--portal-ivory);
  box-shadow: 0 9px 25px rgba(4, 41, 32, .08);
}

.portal-asset-hero > span,
.portal-asset-hero > p { color: var(--portal-muted); font-size: 12px; }

.portal-asset-hero > strong {
  display: block;
  margin-top: 4px;
  color: var(--portal-deep);
  font: 700 34px/1.15 Georgia, "Times New Roman", serif;
}

.portal-asset-hero > p { margin: 7px 0 0; font-size: 11px; }

.portal-asset-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--portal-line);
}

.portal-asset-stats > span { text-align: center; }
.portal-asset-stats > span + span { border-left: 1px solid var(--portal-line); }
.portal-asset-stats strong,
.portal-asset-stats small { display: block; }
.portal-asset-stats strong { color: var(--portal-deep); font-size: 14px; }
.portal-asset-stats small { margin-top: 4px; color: var(--portal-muted); font-size: 10px; }

.portal-my-privacy-note {
  margin: 10px 2px 14px;
  color: var(--portal-muted);
  font-size: 11px;
  line-height: 1.65;
  text-align: center;
}

.portal-ledger-list {
  display: grid;
  gap: 9px;
}

.portal-ledger-entry {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--portal-line);
  border-radius: 15px;
  background: var(--portal-ivory);
  box-shadow: 0 7px 19px rgba(4, 41, 32, .055);
}

.portal-ledger-entry > span {
  font: 700 17px/1 Georgia, serif;
  text-align: center;
}

.portal-ledger-entry > div { min-width: 0; }
.portal-ledger-entry strong,
.portal-ledger-entry small,
.portal-ledger-entry time { display: block; }
.portal-ledger-entry strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.portal-ledger-entry small { margin-top: 4px; overflow: hidden; color: var(--portal-muted); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.portal-ledger-entry time { margin-top: 4px; color: #9aa6a1; font-size: 9px; }

.portal-transfer-card { border-color: rgba(201, 150, 50, .32); }

.portal-transfer-balance {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 13px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--portal-line);
}

.portal-transfer-balance span { color: var(--portal-muted); font-size: 12px; }
.portal-transfer-balance strong { color: var(--portal-deep); font: 700 25px/1 Georgia, serif; }

.portal-recipient-preview {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  margin-top: 14px;
  border: 1px solid rgba(201, 150, 50, .34);
  border-radius: 14px;
  background: #fff9e9;
}

.portal-recipient-preview > img { width: 46px; height: 46px; object-fit: contain; }
.portal-recipient-preview:not(.is-ready) { grid-template-columns: 1fr; }
.portal-recipient-preview strong,
.portal-recipient-preview small { display: block; }
.portal-recipient-preview small { margin-top: 4px; color: var(--portal-muted); font-size: 10px; }
.portal-recipient-preview > button { min-height: 38px; padding: 0 10px; border: 0; border-radius: 10px; color: #fff5d6; background: var(--portal-green); font-size: 11px; font-weight: 800; }

.portal-transfer-locked {
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--portal-muted);
  text-align: center;
}
.portal-transfer-locked svg { color: var(--portal-green); }
.portal-transfer-locked p { margin: 0; line-height: 1.7; font-size: 12px; }

.portal-friend-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.portal-friend-actions p { grid-column: 1 / -1; margin: 0 0 3px; color: var(--portal-muted); font-size: 12px; line-height: 1.65; }
.portal-friend-actions .portal-primary-button { min-height: 46px; font-size: 13px; box-shadow: none; }

.portal-friend-section .portal-section-title { margin-top: 19px; }
.portal-friend-section:first-of-type .portal-section-title { margin-top: 0; }

.portal-friend-points {
  display: grid;
  gap: 13px;
  padding: 16px;
  border-color: rgba(201, 150, 50, .48);
  background: linear-gradient(135deg, rgba(255, 252, 242, .98), rgba(235, 245, 238, .92));
}

.portal-friend-points span,
.portal-friend-points strong,
.portal-friend-points p { display: block; }
.portal-friend-points span { color: var(--portal-green); font-size: 12px; font-weight: 700; }
.portal-friend-points strong { margin-top: 6px; color: var(--portal-deep); font-size: 17px; }
.portal-friend-points p { margin: 7px 0 0; color: var(--portal-muted); font-size: 12px; line-height: 1.65; }
.portal-friend-points .portal-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.portal-friend-points .portal-card-actions > button { min-height: 43px; }

.portal-account-assets .portal-asset-hero { margin-top: 8px; }
.portal-account-records { margin-top: 11px; }

.portal-account-points-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 15px;
}
.portal-account-points-actions > button { min-height: 42px; font-size: 12px; }

.portal-history-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(7, 88, 74, .08);
}
.portal-history-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  color: var(--portal-muted);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
}
.portal-history-tabs button.is-active {
  color: var(--portal-deep);
  background: var(--portal-ivory);
  box-shadow: 0 2px 7px rgba(4, 41, 32, .08);
}

.portal-support-contact {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 16px;
}
.portal-support-contact > svg {
  width: 40px;
  height: 40px;
  padding: 9px;
  border: 1px solid rgba(201, 150, 50, .48);
  border-radius: 13px;
  color: var(--portal-green);
  background: linear-gradient(145deg, #fffaf0, #e5f0e8);
}
.portal-support-contact strong { color: var(--portal-deep); font-size: 16px; }
.portal-support-contact p { margin: 5px 0 0; color: var(--portal-muted); font-size: 12px; line-height: 1.65; }

.portal-game-invite-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
}
.portal-game-invite-qr {
  width: 96px;
  height: 96px;
  padding: 5px;
  border: 1px solid rgba(201, 150, 50, .45);
  border-radius: 14px;
  background: #fff;
}
.portal-game-invite-card h2,
.portal-game-invite-card strong { color: var(--portal-deep); font-size: 16px; }
.portal-game-invite-card p { margin: 5px 0 0; color: var(--portal-muted); font-size: 12px; line-height: 1.6; }
.portal-game-invite-card .portal-invite-code,
.portal-game-invite-card .portal-card-actions { grid-column: 1 / -1; }
.portal-game-invite-card .portal-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.portal-game-invite-main { margin-top: 8px; }

.portal-setting-row {
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 0;
  color: var(--portal-deep);
  background: transparent;
  text-align: left;
}
.portal-setting-row > span:nth-child(2) strong,
.portal-setting-row > span:nth-child(2) small { display: block; }
.portal-setting-row > span:nth-child(2) strong { font-size: 14px; }
.portal-setting-row > span:nth-child(2) small { margin-top: 4px; color: var(--portal-muted); font-size: 10px; }
.portal-setting-row > b { color: var(--portal-green); font-size: 11px; }

.portal-help-card details + details { border-top: 1px solid var(--portal-line); }
.portal-help-card details { padding: 10px 0; }
.portal-help-card summary { color: var(--portal-deep); font-size: 13px; font-weight: 800; cursor: pointer; }
.portal-help-card details p { margin: 8px 0 0; color: var(--portal-muted); font-size: 11px; line-height: 1.7; }
.portal-help-card .portal-primary-button { margin-top: 13px; }

.portal-account-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 15px;
  align-items: center;
}

.portal-account-avatar {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 2px solid #d2a44b;
  border-radius: 50%;
  color: #f9e7bd;
  background: var(--portal-green);
  font: 800 24px/1 "STKaiti", "KaiTi", serif;
}

.portal-account-summary h2 { margin: 0; }
.portal-account-summary p { margin: 4px 0 0; }

.portal-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-top: 17px;
}

.portal-facts > span {
  min-width: 0;
  padding: 12px;
  border-radius: 13px;
  background: #f1f5f1;
}

.portal-facts small,
.portal-facts strong { display: block; }
.portal-facts small { color: var(--portal-muted); font-size: 11px; }
.portal-facts strong { margin-top: 4px; overflow-wrap: anywhere; font-size: 14px; }

.portal-card-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 15px;
}

.portal-card-actions .portal-primary-button { grid-column: 1 / -1; }

.portal-invite-code {
  display: block;
  padding: 13px;
  margin: 12px 0;
  overflow-wrap: anywhere;
  border: 1px dashed rgba(22, 83, 66, .25);
  border-radius: 12px;
  color: #34584d;
  background: #f5f8f4;
  font: 12px/1.55 ui-monospace, monospace;
}

.portal-recovery-code {
  display: block;
  padding: 14px;
  margin: 13px 0;
  border-radius: 13px;
  color: #fff2ce;
  background: #073d32;
  font: 800 18px/1.4 ui-monospace, monospace;
  text-align: center;
  letter-spacing: .06em;
}

.portal-history-loading,
.portal-empty-history {
  color: var(--portal-muted);
  text-align: center;
}

.portal-empty-history strong { color: var(--portal-deep); }

.portal-recent-players { margin-bottom: 14px; }

.portal-player-strip {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: none;
}

.portal-player-strip::-webkit-scrollbar { display: none; }

.portal-player-chip {
  flex: 0 0 auto;
  min-width: 88px;
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--portal-line);
  border-radius: 14px;
  background: #f5f8f4;
}

.portal-player-chip i {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  color: #f8e7b9;
  background: #edf4ef;
  font-style: normal;
  font-weight: 900;
}

.portal-player-chip i > img {
  width: 27px;
  height: 27px;
  object-fit: contain;
}

.portal-player-chip strong { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.portal-player-chip small { color: var(--portal-muted); font-size: 10px; }

.portal-match-list { display: grid; gap: 10px; }

.portal-match-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--portal-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(8, 57, 45, .07);
}

.portal-match-card > button {
  border: 0;
  background: transparent;
}

.portal-match-card > button:first-child {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  color: var(--portal-deep);
  text-align: left;
}

.portal-match-meta,
.portal-match-meta small,
.portal-match-meta strong,
.portal-match-meta em { display: block; min-width: 0; }
.portal-match-meta small { color: var(--portal-muted); font-size: 10px; }
.portal-match-meta strong { margin-top: 4px; font-size: 14px; }
.portal-match-meta em { margin-top: 4px; overflow: hidden; color: #71847d; font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.portal-match-card b,
.portal-match-score { font-variant-numeric: tabular-nums; }
.is-positive { color: #177652 !important; }
.is-negative { color: #b24c38 !important; }

.portal-match-reopen {
  width: 74px;
  padding: 8px;
  border-left: 1px solid var(--portal-line) !important;
  color: #9a6a17;
  font-size: 11px;
  font-weight: 900;
}

.portal-match-detail { margin-bottom: 14px; }
.portal-match-detail-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.portal-match-detail-head small { color: var(--portal-gold); font-weight: 800; }
.portal-match-detail-head h2 { margin-top: 4px; }
.portal-match-score { margin: 10px 0 3px; font-size: 34px; font-weight: 900; }
.portal-match-rules { margin-top: 0; font-size: 12px; }

.portal-seat-results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.portal-seat-results > span {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  padding: 10px;
  border-radius: 12px;
  background: #f1f5f1;
}

.portal-seat-results > span.is-self { box-shadow: inset 0 0 0 1px rgba(201, 150, 50, .65); background: #fff9e9; }
.portal-seat-results small { grid-column: 1 / -1; color: var(--portal-muted); font-size: 10px; }
.portal-seat-results strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.portal-seat-results b { font-size: 12px; }

.portal-settlement-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.portal-settlement-list span {
  padding: 5px 8px;
  border-radius: 999px;
  color: #5c6f68;
  background: #edf3ef;
  font-size: 10px;
}

.portal-nav {
  position: sticky;
  bottom: 0;
  z-index: 12;
  grid-template-columns: repeat(2, 1fr);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(17, 73, 57, .1);
  background: rgba(255, 255, 252, .96);
  backdrop-filter: blur(15px);
}

.portal-nav:not([hidden]) { display: grid; }

.portal-nav button {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 13px;
  color: #788982;
  background: transparent;
}

.portal-nav button > strong { font-size: 15px; font-weight: 700; }

.portal-nav button.is-active {
  color: var(--portal-green);
  background: #edf4ef;
  box-shadow: inset 0 -2px 0 rgba(201, 150, 50, .58);
}

.portal-toast {
  position: fixed;
  z-index: 99;
  left: 50%;
  bottom: calc(82px + env(safe-area-inset-bottom));
  width: max-content;
  max-width: calc(100vw - 36px);
  padding: 11px 15px;
  transform: translateX(-50%);
  border-radius: 999px;
  color: #fff8e8;
  background: rgba(5, 49, 39, .94);
  box-shadow: 0 9px 25px rgba(0, 0, 0, .2);
  font-size: 13px;
  text-align: center;
}

.portal-toast.is-error { background: rgba(128, 45, 32, .95); }

body.portal-busy button { pointer-events: none; }

.portal-game-launch {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  opacity: 0;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 229, 146, .28), transparent 30%),
    linear-gradient(155deg, #0a745f 0%, #075444 55%, #0d3f35 100%);
  transition: opacity 140ms ease-out;
}

.portal-game-launch[hidden] { display: none; }
.portal-game-launch.is-visible { opacity: 1; }

.portal-game-launch-card {
  width: min(310px, calc(100vw - 48px));
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 26px 24px 23px;
  border: 1px solid rgba(255, 229, 146, .72);
  border-radius: 24px;
  color: #fff8df;
  background: rgba(7, 74, 60, .78);
  box-shadow: 0 22px 52px rgba(3, 42, 34, .32), inset 0 0 0 1px rgba(255, 255, 255, .08);
  text-align: center;
  backdrop-filter: blur(10px);
}

.portal-game-launch-seal {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border: 3px double #f9d67b;
  border-radius: 50%;
  color: #9b251f;
  background: linear-gradient(145deg, #fff5c9, #e8b84e);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18), inset 0 0 0 3px rgba(255, 255, 255, .35);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 35px;
  font-weight: 900;
}

.portal-game-launch-card strong { font-size: 22px; letter-spacing: .06em; }
.portal-game-launch-card small { color: rgba(255, 248, 223, .78); font-size: 13px; }

.portal-game-launch-track {
  width: min(220px, 72vw);
  height: 6px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
}

.portal-game-launch-track > i {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e8b84e, #fff2a7, #e8b84e);
  animation: portal-game-launch-progress 1.05s ease-in-out infinite;
}

@keyframes portal-game-launch-progress {
  from { transform: translateX(-105%); }
  to { transform: translateX(245%); }
}

@media (prefers-reduced-motion: reduce) {
  .portal-game-launch-track > i { animation-duration: 2.2s; }
}

@media (max-width: 360px) {
  .portal-game-hall { --portal-game-entry-width: min(280px, calc(74vw - 19.24px)); }
  .portal-content { padding-inline: 13px; }
  .portal-auth-card,
  .portal-card { padding: 16px; }
  .portal-code-row { grid-template-columns: 1fr; }
  .portal-code-button { width: 100%; }
  .portal-brand-copy strong { font-size: 19px; }
  .portal-room-hero { padding: 21px 15px 18px; }
  .portal-room-hero-mark { width: 74px; height: 74px; }
  .portal-room-hero-mark > img { width: 67px; height: 67px; }
  .portal-room-panel { padding: 15px; }
  .portal-room-hall .portal-room-input { grid-template-columns: auto minmax(0, 1fr); }
  .portal-room-hall .portal-code-button { grid-column: 1 / -1; width: 100%; }
  .portal-my-profile { padding: 15px; }
  .portal-my-profile-grid { grid-template-columns: 59px minmax(0, 1fr); gap: 11px; }
  .portal-my-avatar { width: 59px; height: 59px; }
  .portal-my-avatar > img { width: 51px; height: 51px; }
  .portal-my-identity h1 { font-size: 24px; }
  .portal-avatar-picker > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portal-recipient-preview { grid-template-columns: 42px minmax(0, 1fr); }
  .portal-recipient-preview > img { width: 40px; height: 40px; }
  .portal-recipient-preview > button { grid-column: 1 / -1; width: 100%; }
  .portal-friend-actions { grid-template-columns: 1fr; }
  .portal-friend-actions p { grid-column: auto; }
}

@media (orientation: portrait) and (max-height: 700px) {
  .portal-auth.is-login {
    min-height: auto;
  }
  .portal-auth.is-login .portal-auth-hero { padding-bottom: 18px; }
  .portal-auth.is-login .portal-auth-logo { margin-bottom: 10px; }
  .portal-auth.is-login .portal-auth-logo > img { width: 118px; }
  .portal-auth.is-login .portal-auth-logo strong { font-size: 30px; }
  .portal-auth.is-login .portal-auth-hero h1 { margin-top: 8px; font-size: 34px; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .mobile-portal-shell {
    width: min(430px, 100%);
    min-height: 100dvh;
  }
  .portal-content { padding-top: 14px; }
  .portal-auth-hero { padding-top: 0; }
  .portal-auth-hero h1 { font-size: 30px; }
}

@media (min-width: 760px) and (min-height: 620px) {
  body { padding: 28px 0; }
  .mobile-portal-shell { min-height: calc(100dvh - 56px); border-radius: 28px; overflow: hidden; }
}