/* 赤雀麻将馆 —— 样式（墨黑 × 赤红 × 鎏金）
 * 色板 / 字号 / 层级 token 对齐 design/art/art-bible.md §2 / §3 / §6 / 附A
 */
:root {
  /* 底色 / 明度层 */
  --ink: #0d0a08;
  --ink-deep: #060403;
  --ink-raised: #1a130c;
  --ink-panel-top: rgba(26,19,12,.96);
  --ink-panel-bot: rgba(14,10,7,.96);
  /* 鎏金 */
  --gold: #d8b45a;
  --gold-hi: #f3d98b;
  --gold-deep: #b98f38;
  --gold-shadow: #8a6435;
  --gold2: var(--gold-hi);   /* 兼容旧引用 */
  /* 赤红 */
  --red: #c0272d;
  --red-hi: #e0454a;
  --red-text: #E85A5F;   /* 赤红·文字安全变体；on --ink-raised = 5.30:1 (AA) */
  --red-deep: #7a1a1e;
  --red2: var(--red-hi);     /* 兼容旧引用 */
  /* 中性 */
  --ivory: #f5efdf;
  --ivory-dim: rgba(245,239,223,.72);
  --ivory-faint: rgba(245,239,223,.55);
  --line: rgba(216,180,90,.28);
  /* 场景（按关卡注入） */
  --felt: #2a4d3a;
  --felt-deep: #122e23;
  --accent: #c0272d;
  --table-wood: #6b4a2b;
  /* 布局 */
  --gutter: 16px;
  --radius-card: 16px;
  --radius-panel: 18px;
  --touch-min: 48px;
  /* 字体族 */
  --font-cn-display: "Noto Sans SC", "Microsoft YaHei UI", sans-serif;
  --font-en-logo: "Archivo Black", "Arial Black", "Noto Sans SC", sans-serif;
  --font-body: "Microsoft YaHei UI", "Noto Sans SC", "PingFang SC", sans-serif;
  --font-jp: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
}
@media (min-width: 900px) { :root { --gutter: 24px; } }

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--ink);
  font-family: var(--font-body);
  color: var(--ivory);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

#stage { position: fixed; inset: 0; overflow: hidden; }

/* ---------- 场景通用 ---------- */
.scene {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .6s ease, transform .6s ease;
  transform: scale(1.03);
}
.scene.active { opacity: 1; pointer-events: auto; transform: scale(1); }
/* Inactive scenes may contain descendants with explicit pointer-events:auto. */
.scene:not(.active) #topBar .btns { pointer-events: none; }

.scene-bg {
  position: absolute; inset: -3%;
  background-size: cover; background-position: center 38%;
  background-repeat: no-repeat;
  background-color: #120c07; /* 图缺失时的 CSS 渐变兜底（art-bible §9.2） */
  background-image:
    radial-gradient(120% 90% at 50% 30%, rgba(58,26,14,.55), rgba(6,4,3,.9)),
    linear-gradient(180deg, #1b120a, #0b0705);
  will-change: transform;
}
/* 规范路径 assets/scenes/{sceneId}-bg.webp 优先；旧图 bg-parlor.png 保留作回退。
   两层独立加载：规范图缺失时旧图照常显示，不会裂图、不会白屏。 */
#scene-home .scene-bg,
#scene-table .scene-bg {
  background-image:
    url("../assets/scenes/parlor-bg.webp"),
    url("../assets/bg-parlor.png"),
    radial-gradient(120% 90% at 50% 30%, rgba(58,26,14,.55), rgba(6,4,3,.9)),
    linear-gradient(180deg, #1b120a, #0b0705);
}
#scene-home .scene-bg {
  background-position: center 38%;
  background-image:
    url("../assets/scenes/lobby-night-bg.webp"),
    url("../assets/scenes/parlor-bg.webp"),
    url("../assets/bg-parlor.png"),
    radial-gradient(120% 90% at 50% 30%, rgba(58,26,14,.55), rgba(6,4,3,.9)),
    linear-gradient(180deg, #1b120a, #0b0705);
}
#scene-lobby .scene-bg {
  background-image:
    url("../assets/scenes/parlor-bg.webp"),
    url("../assets/bg-parlor.png"),
    radial-gradient(120% 90% at 50% 30%, rgba(58,26,14,.55), rgba(6,4,3,.9)),
    linear-gradient(180deg, #1b120a, #0b0705);
}

.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(0,0,0,0) 46%, rgba(6,4,3,.6) 100%),
    linear-gradient(rgba(20,10,4,.22), rgba(8,5,3,.1) 30%, rgba(8,5,3,.34));
}

/* ---------- 大厅 ---------- */
.lobby-title { position: absolute; top: 7%; width: 100%; text-align: center; z-index: 5; }
.lobby-title h1 {
  font-family: var(--font-cn-display); font-size: clamp(34px, 11vmin, 64px);
  font-weight: 800; letter-spacing: .16em;
  color: #f0d58e;
  text-shadow: 0 3px 0 rgba(0,0,0,.48), 0 6px 22px rgba(0,0,0,.56);
}
.lobby-title .sub {
  margin-top: 6px; font-size: clamp(10px, 2.6vmin, 14px);
  letter-spacing: .5em; color: rgba(216,180,90,.75);
}
@keyframes neonFlicker {
  0%, 100% { opacity: 1; } 91% { opacity: 1; } 92% { opacity: .55; }
  93% { opacity: 1; } 95% { opacity: .7; } 96% { opacity: 1; }
}

.char-row {
  position: absolute; left: 0; right: 0; top: 24%;
  display: flex; justify-content: center; gap: 3vmin; z-index: 5;
  padding: 0 4vmin;
}
.char-card { width: 20vmin; cursor: pointer; transition: transform .25s ease; }
.char-card:hover { transform: translateY(-4px); }
.cc-frame {
  position: relative; width: 100%; aspect-ratio: 5 / 7;
  border-radius: 10px; overflow: hidden;
  border: 2px solid rgba(216,180,90,.4);
  box-shadow: 0 6px 18px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.4);
  background: #14100c;
  /* L7 CSS3D 承载层：透视倾斜（无指针/无陀螺仪时静态中性角度，art-bible §10.5） */
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* 七层 z-index 定稿：纹理1 / 图片2 / 光效3 / 高光4 / 边框5 / 文字6（frame 外）/ CSS3D 7（父） */
.cc-frame > .layer-texture { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 2px, rgba(0,0,0,.03) 2px 4px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.014) 0 3px, rgba(0,0,0,.02) 3px 6px);
  mix-blend-mode: overlay;
}
.cc-frame > .layer-img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; display: block; pointer-events: none;
  filter: brightness(1.14) saturate(1.05);
  animation: breathe 3.6s ease-in-out infinite;
}
.cc-frame > .layer-glow { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(70% 58% at 50% 90%, var(--ac), rgba(0,0,0,0) 72%);
  box-shadow: inset 0 0 34px rgba(0,0,0,.45);
  mix-blend-mode: screen; opacity: .22;
}
.cc-frame > .layer-initial { display: none; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  align-items: center; justify-content: center;
  font-family: var(--font-cn-display); font-size: 9vmin; line-height: 1;
  color: rgba(245,239,223,.30); }
/* L2 边框层：由 .cc-frame 自身 border/box-shadow + ::after 提供（z:5） */
.cc-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border-radius: inherit;
  border: 1px solid rgba(216,180,90,.34);
  box-shadow: inset 0 0 0 1px rgba(6,4,3,.5);
}
.cc-frame img { /* 兼容：旧结构直接放 img */
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; pointer-events: none;
  animation: breathe 3.6s ease-in-out infinite;
}
.char-card:nth-child(2) .cc-frame img { animation-delay: .9s; }
.char-card:nth-child(3) .cc-frame img { animation-delay: 1.7s; }
.char-card:nth-child(4) .cc-frame img { animation-delay: 2.5s; }

/* ---------- 统一风格占位（art-bible §6.4）：与正式图同一 DOM，仅换 L1 填充 ---------- */
.cc-frame.char-placeholder > .layer-img,
.pt-frame.char-placeholder > .layer-img { display: none; }
.cc-frame.char-placeholder, .pt-frame.char-placeholder {
  background:
    linear-gradient(180deg, rgba(6,4,3,.58), rgba(6,4,3,.92)),
    linear-gradient(160deg, var(--ac, #7a2a2c), #0d0a08 78%);
}
.cc-frame.char-placeholder > .layer-initial,
.pt-frame.char-placeholder > .layer-initial { display: flex; }
/* L1 剪影：单一内联 SVG 中性人形（占位专用，不引入位图） */
.cc-frame > .layer-silhouette, .pt-frame > .layer-silhouette {
  display: none; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'><g fill='rgba(245,239,223,0.42)'><circle cx='50' cy='34' r='18'/><path d='M50 56c-17 0-31 12-33 29l-2 55h70l-2-55c-2-17-16-29-33-29z'/></g></svg>");
  background-repeat: no-repeat;
  background-position: center 36%;
  background-size: 62% auto;
}
.cc-frame.char-placeholder > .layer-silhouette,
.pt-frame.char-placeholder > .layer-silhouette { display: block; }
/* L4 光效层在占位态加强阵营色外发光，保证占位卡 "像这个游戏的卡" */
.char-card.picked .cc-frame.char-placeholder,
.cc-frame.char-placeholder.has-glow {
  box-shadow: 0 6px 18px rgba(0,0,0,.6), 0 0 30px var(--ac), inset 0 0 30px rgba(0,0,0,.4);
}

.cc-info { margin-top: 8px; text-align: center; }
.cc-name { font-family: var(--font-cn-display); font-size: 4.2vmin; font-weight: 800; letter-spacing: .08em; text-shadow: 0 2px 10px rgba(0,0,0,.72); }
.cc-title { font-size: 2.05vmin; font-weight: 600; letter-spacing: .035em; color: rgba(245,239,223,.82); margin-top: 3px; }
.cc-quote { font-size: 1.9vmin; line-height: 1.55; color: rgba(236,213,164,.82); margin-top: 5px; min-height: 3em; }
.char-card.picked .cc-frame {
  border-color: var(--gold2);
  box-shadow: 0 0 22px var(--ac), 0 0 46px rgba(216,180,90,.35), 0 6px 18px rgba(0,0,0,.6);
}
.char-card.picked { transform: translateY(-6px); }
.char-card.picked .cc-frame::before {
  content: "✓ 入座"; position: absolute; right: 6px; top: 6px; z-index: 6;
  font-size: clamp(9px, 2.2vmin, 13px); background: rgba(192,39,45,.92); color: #fff;
  padding: 3px 8px; border-radius: 20px; letter-spacing: .1em;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

.lobby-bottom {
  position: absolute; bottom: 6%; width: 100%;
  display: flex; justify-content: center; z-index: 5;
}

/* 按钮 */
.btn-gold {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(16px, 4.2vmin, 24px);
  letter-spacing: .12em;
  padding: 1.6vmin 5vmin;
  min-height: var(--touch-min);  /* 触控目标 ≥48px */
  color: #2b1c07;
  background: linear-gradient(180deg, #f3d98b, #d8b45a 55%, #b98f38);
  border: 1px solid #f7e6b0;
  border-radius: 40px;
  box-shadow: 0 4px 16px rgba(216,180,90,.35), inset 0 1px 0 rgba(255,255,255,.6);
  cursor: pointer; transition: transform .15s ease, filter .15s ease;
}
.btn-gold:disabled { filter: grayscale(.7) brightness(.6); cursor: default; }
.btn-gold:not(:disabled):active { transform: scale(.96); }
.btn-plain {
  font-size: clamp(13px, 3.2vmin, 18px); letter-spacing: .14em;
  padding: 1.2vmin 4vmin; min-height: var(--touch-min);  /* 触控目标 ≥48px */ color: var(--gold2);
  background: rgba(20,14,8,.6); border: 1px solid rgba(216,180,90,.45);
  border-radius: 40px; cursor: pointer;
}
.btn-plain:active { transform: scale(.96); }

/* ---------- 牌桌场景 ---------- */
#tableFelt {
  position: absolute; left: 50%; bottom: 10%;
  width: 72%; height: 58%;
  transform: translateX(-50%);
  border-radius: clamp(30px, 4.2vmin, 56px);
  background:
    repeating-linear-gradient(96deg, rgba(255,239,198,.035) 0 1px, rgba(35,19,9,.06) 1px 3px),
    linear-gradient(180deg, #947044 0%, #674522 12%, #392514 72%, #29190f 100%);
  border: 1px solid rgba(238,207,143,.82);
  box-shadow:
    0 28px 62px rgba(0,0,0,.68),
    0 9px 20px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,247,221,.32),
    inset 0 0 0 3px rgba(39,24,12,.82),
    inset 0 0 0 5px rgba(226,190,119,.42),
    inset 0 -12px 20px rgba(0,0,0,.52);
  z-index: 2;
}
#tableFelt::before {
  content: ""; position: absolute; inset: 4.4%;
  border-radius: clamp(22px, 3.3vmin, 42px);
  background:
    radial-gradient(ellipse at 50% 28%, rgba(255,255,255,.075), transparent 56%),
    repeating-linear-gradient(2deg, rgba(230,241,221,.022) 0 1px, rgba(1,18,12,.035) 1px 3px),
    radial-gradient(ellipse at 50% 42%, #2b6048 0%, var(--felt, #234b39) 48%, var(--felt-deep, #153629) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 12px 24px rgba(0,0,0,.25),
    inset 0 -18px 24px rgba(0,0,0,.38),
    0 0 0 4px rgba(37,23,12,.94),
    0 0 0 6px rgba(218,182,110,.76),
    0 0 0 9px rgba(43,27,15,.88);
}
#tableFelt::after {
  content: "雀";
  position: absolute; left: 50%; top: 50%;
  width: clamp(88px, 11vmin, 142px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  border: 1px solid rgba(231,198,129,.12);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px rgba(231,198,129,.035), 0 0 0 1px rgba(231,198,129,.04);
  background: radial-gradient(circle, rgba(231,198,129,.04), transparent 72%);
  font-family: var(--font-cn-display); font-size: clamp(42px, 6.4vmin, 76px); font-weight: 800;
  color: rgba(231,198,129,.13);
  text-shadow: 0 2px 5px rgba(0,0,0,.18);
  letter-spacing: 0;
}

/* 角色立绘 */
#seatLayer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.portrait { position: absolute; width: 19vmin; }
.p-top    { left: 50%; top: 2.5%; transform: translateX(-50%); }
.p-right  { right: 1.8%; top: 30%; }
.p-left   { left: 1.8%; top: 30%; }
.p-bottom { left: 1.6%; bottom: 3%; width: 14vmin; }

.pt-frame {
  position: relative; width: 100%; aspect-ratio: 5 / 7;
  border-radius: 12px; overflow: hidden;
  border: 2px solid rgba(216,180,90,.5);
  background: linear-gradient(180deg, #191310, #0e0a08);
  box-shadow: 0 8px 22px rgba(0,0,0,.65);
  transition: box-shadow .3s ease;
}
.pt-frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block;
  animation: breathe 3.8s ease-in-out infinite;
}
/* 座位立绘同样走七层（§6.1） */
.pt-frame > .layer-img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; display: block;
  animation: breathe 3.8s ease-in-out infinite; }
.pt-frame > .layer-texture { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, rgba(0,0,0,.028) 2px 4px);
  mix-blend-mode: overlay; }
.pt-frame > .layer-glow { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(70% 58% at 50% 92%, var(--ac), rgba(0,0,0,0) 72%);
  mix-blend-mode: screen; opacity: .22; }   /* art-bible §6.4：L4 光效 opacity ≤ .22 */
.pt-frame > .layer-initial { display: none; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  align-items: center; justify-content: center;
  font-family: var(--font-cn-display); font-size: 7vmin; line-height: 1;
  color: rgba(245,239,223,.18); }
.pt-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  border: 1px solid rgba(216,180,90,.3);
}
.p-right .pt-frame img { animation-delay: 1.1s; }
.p-top .pt-frame img { animation-delay: 2s; }
.p-left .pt-frame img { animation-delay: 2.9s; }
.p-bottom .pt-frame img { animation-delay: .5s; }

@keyframes breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.016) translateY(-1.2px); }
}

/* 动态高光扫过 */
.pt-sheen, .cc-frame .pt-sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,240,200,.16) 46%, rgba(255,240,200,.05) 52%, transparent 66%);
  background-size: 240% 240%;
  animation: sheen 6.5s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes sheen {
  0%, 60% { background-position: 130% 130%; }
  85%, 100% { background-position: -30% -30%; }
}

.pt-glow {
  position: absolute; inset: 0; border-radius: 10px;
  box-shadow: inset 0 0 26px rgba(0,0,0,.35);
  transition: box-shadow .3s;
}
.portrait.active .pt-frame {
  box-shadow: 0 0 20px var(--ac), 0 0 44px rgba(216,180,90,.3), 0 8px 22px rgba(0,0,0,.65);
  border-color: var(--gold2);
}
.portrait.active .pt-glow { box-shadow: inset 0 0 30px rgba(243,217,139,.25); }

.pt-plate {
  margin-top: 5px; text-align: center;
  background: linear-gradient(180deg, rgba(16,11,7,.88), rgba(16,11,7,.66));
  border: 1px solid rgba(216,180,90,.28);
  border-radius: 8px; padding: 3px 2px;
}
.pt-name { font-family: var(--font-cn-display); font-size: 2.7vmin; color: var(--ac-text, var(--ac)); font-weight: 800; letter-spacing: .06em; }
/* 阿赤（#e0454a）压 .pt-plate 实测 4.473:1 < 4.5，局部换用文字安全变体；其余三家缺省回落 --ac，零改动 */
.portrait:has(.pt-frame img[alt="阿赤"]) .pt-name { --ac-text: #E85A5F; }
.pt-title { display: block; font-size: clamp(10px, 1.6vmin, 12px); line-height: 1.4; letter-spacing: .025em; color: rgba(245,239,223,.72); }

/* 弃牌河 */
.river {
  position: absolute; z-index: 3; pointer-events: none;
  display: flex; flex-wrap: wrap; gap: .7vmin;
  align-content: flex-start;
}
#river0 { left: 50%; transform: translateX(-50%); bottom: 24%; width: 34vmin; }
#river1 { right: 22%; top: 34%; width: 14vmin; }
#river2 { left: 50%; transform: translateX(-50%); top: 26%; width: 34vmin; }
#river3 { left: 22%; top: 34%; width: 14vmin; }

/* ---------- 麻将牌 ---------- */
.tile { display: inline-block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.24)) drop-shadow(0 3px 2px rgba(0,0,0,.22)); }
.tile svg { display: block; width: 100%; height: 100%; }

#handLayer {
  position: absolute; left: 50%; bottom: 3.2%;
  transform: translateX(-50%); z-index: 6;
  display: flex; align-items: flex-end;
  padding: 1vmin 1.2vmin;   /* 横向 1.6→1.2vmin：使摸牌态不溢出（美术裁决 §4-U4 口径） */
  background:
    repeating-linear-gradient(92deg, rgba(255,232,180,.025) 0 1px, rgba(25,13,6,.05) 1px 4px),
    linear-gradient(180deg, rgba(111,75,37,.92), rgba(48,31,17,.97) 25%, rgba(15,10,7,.98));
  border: 1px solid rgba(231,197,126,.46);
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,245,218,.12), inset 0 -5px 10px rgba(0,0,0,.45);
  transition: box-shadow .3s ease, border-color .3s ease;
}
#handLayer.my-turn { border-color: rgba(243,217,139,.65); box-shadow: 0 0 18px rgba(216,180,90,.28); }

.hand-tile {
  width: 8.6vmin; height: 12.4vmin;
  margin: 0 -0.9vmin;
  border-radius: 8px;
  transition: transform .16s ease, filter .16s ease;
  cursor: pointer;
}
.hand-tile.sel {
  transform: translateY(-2.4vmin);
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(243,217,139,.8));
}
.hand-tile.drawn { margin-left: 1.2vmin; animation: drawGlow 1s ease; }  /* 2.2→1.2vmin：摸牌态总宽 ≤390px */
@keyframes drawGlow {
  0% { filter: drop-shadow(0 0 12px rgba(243,217,139,.95)); }
  100% { filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
}
.hand-tile.dealt { animation: dealIn .5s both; }
@media (orientation: landscape) and (pointer: coarse) {
  #handLayer { bottom: calc(env(safe-area-inset-bottom, 0px) + 4px); }
  #handLayer .hand-tile {
    display: grid;
    place-items: end center;
    width: 48px;
      height: 68px;
  }
  #handLayer .hand-tile svg {
    width: auto;
    height: 100%;
    aspect-ratio: 60 / 84;
  }
}
@keyframes dealIn {
  from { transform: translateY(-5vmin) scale(.7); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.river-tile {
  width: 4.4vmin; height: 6.2vmin;
  border-radius: 4px;
  transform: rotate(var(--rot, 0deg));
  opacity: .96;
}
.river-tile.fresh { animation: popIn .28s ease both; }
@keyframes popIn {
  from { transform: scale(1.55) rotate(var(--rot)); opacity: 0; }
  to { transform: scale(1) rotate(var(--rot)); opacity: .96; }
}

/* ---------- 顶栏 / 提示 ---------- */
#topBar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 7;
  display: flex; justify-content: space-between; align-items: center;
  padding: .6vmin 2.4vmin; pointer-events: none;
}
#topBar .info {
  align-self: flex-start;
  font-size: 2.6vmin; color: rgba(243,217,139,.85);
  background: rgba(12,8,5,.55); border: 1px solid rgba(216,180,90,.25);
  border-radius: 20px; padding: .8vmin 2.4vmin;
}
#topBar .info b { color: var(--gold2); }
#topBar .btns { display: flex; gap: 1.4vmin; pointer-events: auto; }
.icon-btn {
  width: 5.6vmin; height: 5.6vmin; border-radius: 50%;
  min-width: var(--touch-min); min-height: var(--touch-min);  /* 触控目标 ≥48px（min-* 覆盖 width/height） */
  font-size: 3vmin; color: var(--gold2);
  background: rgba(12,8,5,.6); border: 1px solid rgba(216,180,90,.4);
  cursor: pointer;
}
.icon-btn.off { color: rgba(245,239,223,.4); }
.icon-btn.wide { width: auto; border-radius: 20px; padding: 0 2.2vmin; font-family: var(--font-cn-display); }

/* 台词气泡 */
.bubble {
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%);
  max-width: 46vmin; white-space: nowrap;
  background: rgba(12,8,5,.94);
  border: 1px solid rgba(216,180,90,.55);
  color: var(--ivory); font-size: 2.5vmin; letter-spacing: .05em;
  padding: 1vmin 2vmin; border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,.55);
  animation: bubbleIn .28s ease both;
  pointer-events: none; z-index: 6;
}
.bubble::after {
  content: ""; position: absolute; left: 50%; margin-left: -5px;
  bottom: -5px; width: 10px; height: 10px;
  background: rgba(12,8,5,.94);
  border-right: 1px solid rgba(216,180,90,.55);
  border-bottom: 1px solid rgba(216,180,90,.55);
  transform: rotate(45deg);
}
.p-top .bubble { bottom: auto; top: calc(100% + 8px); }
.p-top .bubble::after { bottom: auto; top: -5px; transform: rotate(225deg); }
.p-bottom .bubble { left: 60px; }
@keyframes bubbleIn {
  from { opacity: 0; transform: translateX(-50%) translateY(7px); }
}

#toast {
  position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%) translateY(8px);
  z-index: 8; pointer-events: none;
  font-size: 3.4vmin; letter-spacing: .1em; color: var(--gold2);
  background: rgba(10,7,4,.8); border: 1px solid rgba(216,180,90,.4);
  padding: 1.2vmin 3.4vmin; border-radius: 30px;
  opacity: 0; transition: opacity .3s ease, transform .3s ease;
  white-space: nowrap;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 结算 ---------- */
#overlay {
  position: absolute; inset: 0; z-index: 9;
  display: none; align-items: center; justify-content: center;
  background: rgba(5,3,2,.62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
#overlay.show { display: flex; }
.ov-inner {
  position: relative;
  /* art-bible §9.4「常规（单局）」：横屏 min(64vmin,720px)；竖屏见文件末 @media (orientation:portrait) */
  width: min(64vmin, 720px);
  max-height: min(88vh, 640px);
  /* 面板本体不裁剪：.stamp 骑在上沿须完整可见（§3.4 朱印）；
     滚动交给内层 .ov-scroll，底部按钮固定不动 */
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, rgba(26,19,12,.96), rgba(14,10,7,.96));
  border: 2px solid rgba(216,180,90,.55);
  border-radius: 18px;
  box-shadow: 0 0 40px rgba(216,180,90,.2), 0 24px 60px rgba(0,0,0,.7);
  padding: 3.4vmin 4vmin;
  text-align: center;
  animation: panelIn .38s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes panelIn { from { transform: scale(.86) translateY(12px); opacity: 0; } }

/* 面板内滚动层：正文超高时只滚这里，印章与底部按钮保持可见（art-bible §9.4） */
.ov-scroll { min-height: 0; overflow-y: auto; overflow-x: hidden; }
.ov-btns { flex: 0 0 auto; }

.stamp {
  position: absolute; right: 5%; top: -5vmin;
  font-family: var(--font-cn-display); font-size: 9vmin; line-height: 1.35;
  color: var(--red2);
  border: 3px solid var(--red2); border-radius: 12px;
  padding: 0 1.4vmin;
  transform: rotate(-9deg);
  text-shadow: 0 0 14px rgba(224,69,74,.6);
  box-shadow: 0 0 18px rgba(224,69,74,.35), inset 0 0 12px rgba(224,69,74,.25);
  background: rgba(20,4,4,.55);
  animation: stampIn .42s cubic-bezier(.1,1.6,.35,1) .12s both;
}
.stamp.ink { color: var(--ivory); border-color: var(--ivory); text-shadow: none; box-shadow: none; }
@keyframes stampIn { from { transform: rotate(-9deg) scale(2.1); opacity: 0; } }

.win-head { display: flex; align-items: center; gap: 2.4vmin; text-align: left; }
.win-head img {
  width: 13vmin; height: 17vmin; object-fit: cover; object-position: top;
  border-radius: 10px; border: 2px solid rgba(216,180,90,.5);
}
.win-head h2 { font-family: var(--font-cn-display); font-size: 4.6vmin; color: var(--gold2); }
.win-head p { font-size: 2.4vmin; color: rgba(245,239,223,.6); margin-top: 4px; }

.win-tiles { margin-top: 2.4vmin; display: flex; flex-wrap: wrap; gap: .8vmin; justify-content: center; }
.tile.mini { width: 5vmin; height: 7vmin; border-radius: 5px; }
.tile.mini.win-tile {
  outline: 2px solid var(--gold2);
  filter: drop-shadow(0 0 8px rgba(243,217,139,.9));
  transform: translateY(-1vmin);
}

.yaku-row { margin-top: 2.6vmin; display: flex; gap: 1.2vmin; justify-content: center; align-items: center; flex-wrap: wrap; }
.yaku {
  font-size: 2.6vmin; letter-spacing: .12em;
  color: var(--gold2); border: 1px solid rgba(216,180,90,.5);
  padding: .6vmin 2vmin; border-radius: 20px;
  background: rgba(216,180,90,.08);
}
.fan { font-size: clamp(28px, 4vmin, 40px); color: var(--red2); font-weight: 700; margin-left: 1vmin; text-shadow: 0 0 10px rgba(224,69,74,.5); }

.score-list { margin-top: 2.6vmin; }
.score-row {
  display: flex; justify-content: space-between;
  padding: 1vmin 2vmin; font-size: 2.8vmin;
  border-bottom: 1px dashed rgba(216,180,90,.2);
}
.score-row b { color: var(--red-text); }
.score-row.gain b { color: var(--gold2); }
.score-row .cum { font-style: normal; margin-left: 2vmin; font-size: 2.2vmin; color: rgba(245,239,223,.55); }

.draw-note { font-size: 3vmin; color: rgba(245,239,223,.75); margin: 2vmin 0; letter-spacing: .2em; }
.ov-btns { margin-top: 3vmin; display: flex; gap: 2.4vmin; justify-content: center; }

/* ---------- 特效层 / 横屏提示 ---------- */
#fx { position: absolute; inset: 0; z-index: 10; pointer-events: none; width: 100%; height: 100%; }

#btnMute { position: absolute; right: 2vmin; bottom: 2vmin; z-index: 11; min-width: var(--touch-min); min-height: var(--touch-min); }
/* 结算浮层(z9)弹出时静音钮(z11)浮在其上 → 清点易误触。仅在叠加态让位，不动全局 z-index（无浮层时常驻可点） */
#overlay.show ~ #btnMute { z-index: 8; pointer-events: none; }

#rotateHint {
  position: fixed; inset: 0; z-index: 99;
  display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: 12px;
  background: rgba(8,5,3,.96); color: var(--gold2);
  font-size: 18px; letter-spacing: .3em; text-align: center;
}
#rotateHint span { font-size: 42px; animation: rotateHint 1.6s ease-in-out infinite; }
@keyframes rotateHint { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(90deg); } }
/* 竖屏提示仅在牌桌生效：首页 / 世界观 / 牌馆 / 自由对战 均支持竖屏（art-bible §9.2 §9.3 / addendum D.8） */
@media (orientation: portrait) and (pointer: coarse) {
  body.on-table #rotateHint { display: flex; }
}

@media (max-height: 420px) {
  .char-card { width: 19vmin; }
  .cc-quote { display: none; }
}

/* ---------- 副露区（四向） ---------- */
.meld-area {
  position: absolute; z-index: 5; pointer-events: none;
  display: flex; flex-wrap: wrap; gap: .8vmin;
  max-width: 30vmin;
}
.m0 { right: 1.6%; bottom: 5%; justify-content: flex-end; }        /* 玩家：手牌右侧同排 */
.m1 { right: 2.2%; top: 56%; }                                      /* 右家：头像下方 */
.m2 { left: 4%; top: 6.5%; }                                        /* 对家：头像左侧 */
.m3 { left: 2.2%; top: 56%; }                                       /* 左家：头像下方 */
@media (max-height: 420px) and (orientation: landscape) {
  /* 短横屏头像卡占到下半区时，把左右副露移入头像与牌河之间，避免盖住立绘/名牌。 */
  .m1 { right: calc(1.8% + 33vmin); }
  .m3 { left: calc(1.8% + 33vmin); }
}

.meld-group {
  display: flex; gap: .35vmin;
  padding: .5vmin; border-radius: 6px;
  background: rgba(10,7,5,.45);
  border: 1px solid rgba(216,180,90,.18);
}
.meld-group.flash { animation: meldFlash .2s ease both; }
@keyframes meldFlash {
  0% { box-shadow: 0 0 0 rgba(243,217,139,0); }
  60% { box-shadow: 0 0 16px rgba(243,217,139,.95); border-color: rgba(243,217,139,.8); }
  100% { box-shadow: 0 0 0 rgba(243,217,139,0); }
}

.meld-tile { width: 3.6vmin; height: 5vmin; border-radius: 3px; opacity: .97; }
.meld-tile.called {
  transform: rotate(var(--call-rot, 90deg));
  outline: 1.5px solid var(--gold2);
  filter: drop-shadow(0 0 5px rgba(243,217,139,.55));
}
.meld-tile.blank { width: 3.6vmin; height: 5vmin; }

/* 飞牌动画（弃牌河 → 副露区，400ms） */
.fly-tile {
  position: fixed; z-index: 20; pointer-events: none;
  transition: transform .4s cubic-bezier(.5, 0, .3, 1), opacity .4s ease;
}

/* ---------- 鸣牌响应条 ---------- */
#callBar {
  position: absolute; left: 50%; bottom: 17.5%;
  transform: translateX(-50%);
  z-index: 8; display: flex; align-items: center; gap: 1.4vmin;
  padding: 1vmin 1.6vmin;
  background: rgba(12,8,5,.72);
  border: 1px solid rgba(216,180,90,.4);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
}
#callBar.hide { display: none; }

.call-ring {
  width: 5.4vmin; height: 5.4vmin; border-radius: 50%;
  border: 1px solid rgba(216,180,90,.35);
  flex: none;
}
.call-ring::after {
  content: "⏳"; position: absolute; width: 5.4vmin; height: 5.4vmin;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6vmin; pointer-events: none;
}

.call-btn {
  position: relative;
  font-family: var(--font-cn-display); font-size: 3.4vmin; letter-spacing: .15em;
  color: var(--ivory); cursor: pointer;
  min-width: 9.5vmin; padding: 1vmin 2.4vmin;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(60,44,26,.9), rgba(34,24,14,.9));
  border: 1px solid rgba(216,180,90,.5);
  transition: transform .12s ease, box-shadow .12s ease;
}
/* 命中区扩张：视觉盒不变（不抬高 #callBar，避开与 #river0 的互斥约束）。
   ⚠️ left/right/top/bottom 的解析基准是 **padding box**（已扣除 1px 边框），
   故实际命中盒 = (37.05−2+14) × (24.78−2+28) = 49.05 × 50.78（实测，两维 ≥48）。 */
.call-btn::after { content: ''; position: absolute; left: -7px; right: -7px; top: -14px; bottom: -14px; }
.call-btn:active { transform: scale(.94); }
.call-btn.ron {
  color: #ffe9e9;
  background: linear-gradient(180deg, rgba(150,36,36,.95), rgba(96,20,20,.95));
  border-color: rgba(224,69,74,.75);
  box-shadow: 0 0 14px rgba(224,69,74,.4);
}
.call-btn.pass { color: rgba(245,239,223,.7); }

/* 吃/杠候选展开 */
.cand-btn {
  position: relative;
  display: flex; gap: .4vmin; padding: .7vmin; cursor: pointer;
  background: rgba(34,24,14,.9); border: 1px solid rgba(216,180,90,.5);
  border-radius: 8px; transition: transform .12s ease;
}
/* 命中区扩张：宽 50.28px 已达标，仅补纵向 + 1px 横向余量。
   实际命中盒 = (50.28−2+2) × (25.77−2+26) = 50.28 × 49.77（实测，两维 ≥48）。 */
.cand-btn::after { content: ''; position: absolute; left: -1px; right: -1px; top: -13px; bottom: -13px; }
.cand-btn:active { transform: scale(.94); }
.cand-btn .meld-tile { width: 3.4vmin; height: 4.7vmin; }
.cand-btn .txt {
  align-self: center; font-family: var(--font-cn-display);
  font-size: 2.4vmin; color: var(--gold2); padding: 0 .6vmin;
}

/* ---------- 自己回合常驻杠按钮 ---------- */
#kanDock {
  position: absolute; right: 3%; bottom: 19%;
  z-index: 7; display: flex; gap: 1vmin; align-items: center;
}
#kanDock:empty { display: none; }

/* 振听提示（一次性气泡） */
.bubble.warn {
  border-color: rgba(224,69,74,.75);
  color: #ffd9d9;
  box-shadow: 0 6px 16px rgba(0,0,0,.55), 0 0 14px rgba(224,69,74,.35);
}
.bubble.warn::after { border-color: rgba(224,69,74,.75); }

/* 结算面板副露行 */
.win-melds {
  margin-top: 1.6vmin; display: flex; gap: 1vmin;
  justify-content: center; flex-wrap: wrap;
}
.win-melds .meld-group { background: rgba(10,7,5,.6); }
.win-melds .meld-tile { width: 3vmin; height: 4.2vmin; }

/* =====================================================================
   生涯外壳（art-bible §9）：游戏化首页 / 世界观总览页 / 牌馆选择 / 结算扩展
   ===================================================================== */

#stage .scene { overflow: hidden; }

/* ---------- 通用：区块小标题（金色小标题 + 左侧 2px 金竖线，§9.3） ---------- */
.sec-head {
  display: flex; align-items: center; gap: .8vmin;
  font-family: var(--font-cn-display);
  font-size: clamp(12px, 2.4vmin, 16px); font-weight: 700; letter-spacing: .14em;
  color: var(--gold); margin: 0 0 1vmin 2px;
}
.sec-head > i { display: block; width: 2px; height: 1.5em; background: var(--gold); border-radius: 2px; }
.sec-head > .en {
  font-family: var(--font-en-logo); font-weight: 900;
  font-size: clamp(8px, 1.5vmin, 10px); letter-spacing: .3em;
  color: var(--ivory-faint); margin-left: .4vmin;
}
.home-foot {
  font-size: 9px; letter-spacing: .3em; color: var(--ivory-faint);
  text-transform: uppercase; text-align: center;
}

/* ---------- 首页导航（右上角图标按钮，触控 ≥48px，§10.2） ---------- */
.home-nav { position: absolute; right: 1.6vmin; top: 1.6vmin; z-index: 6; display: flex; gap: 1.2vmin; }
.icon-btn.round {
  width: auto; min-width: var(--touch-min); height: var(--touch-min); padding: 0 1.4vmin;
  border-radius: 24px; display: inline-flex; align-items: center; justify-content: center;
  gap: .5vmin; font-size: 2.6vmin;
}
.icon-btn.round > b { font-family: var(--font-cn-display); font-weight: 700; font-size: 3vmin; }
.icon-btn.round > em {
  font-style: normal; font-family: var(--font-en-logo); font-weight: 900;
  font-size: 1.4vmin; letter-spacing: .22em; color: var(--ivory-faint);
}
.icon-btn.round:focus-visible, .btn-gold:focus-visible, .btn-plain:focus-visible,
.char-card:focus-visible, .pl-card:focus-visible, .pl-chip:focus-visible,
.map-node:focus-visible, .st-seg button:focus-visible {
  outline: 2px solid var(--gold-hi); outline-offset: 2px;
}

/* ---------- 首页网格（横屏基准：左 38% Logo/信息条/主按钮，右 62% 角色卡+牌馆，§9.2） ---------- */
.home-grid {
  position: absolute; inset: 0; z-index: 5;
  display: grid;
  grid-template-columns: 38% 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--gutter);
  padding: calc(1vmin + 56px) var(--gutter) 1vmin;
  align-content: stretch;
}
.hud { grid-column: 1; grid-row: 1; align-self: start; }
.home-left { grid-column: 1; grid-row: 2; }
.home-right { grid-column: 2; grid-row: 1 / 3; }
.home-foot { grid-column: 1 / -1; grid-row: 3; }
.home-left { display: flex; flex-direction: column; justify-content: center; gap: 1.4vmin; min-width: 0; min-height: 0; }
.home-right { display: flex; flex-direction: column; gap: .4vmin; min-width: 0; min-height: 0; }

.hero { position: relative; padding-left: 1vmin; }
.hero-title {
  font-family: var(--font-cn-display);
  font-size: clamp(26px, 8.4vmin, 54px); font-weight: 900; letter-spacing: .09em;
  color: #f2d990;
  -webkit-text-fill-color: #f2d990;
  text-shadow: 0 2px 0 rgba(34,22,9,.82), 0 5px 16px rgba(0,0,0,.58), 0 0 18px rgba(216,180,90,.2);
  line-height: 1.18;
}
.hero-en {
  margin-top: .55vmin;
  font-family: var(--font-en-logo); font-weight: 900; text-transform: uppercase;
  font-size: clamp(9px, 1.65vmin, 12px); letter-spacing: .22em;
  color: #e3c16d;
  background: linear-gradient(90deg, rgba(11,8,6,.84), rgba(11,8,6,.52));
  border: 1px solid rgba(216,180,90,.22); border-radius: 5px;
  padding: .48vmin .9vmin; display: inline-block;
}
.hero-jp {
  margin-top: .65vmin; font-family: var(--font-body);
  font-size: clamp(11px, 1.8vmin, 13px); font-weight: 500;
  letter-spacing: .14em; line-height: 1.5; color: rgba(245,239,223,.84);
}
.hero-stamp {
  position: absolute; left: -.6vmin; top: -1.2vmin; z-index: -1;
  font-family: var(--font-cn-display); font-size: 12vmin; line-height: 1;
  color: rgba(224,69,74,.16); transform: rotate(-9deg);
}

/* ---------- 生涯信息条（RPG HUD） ---------- */
.hud { display: flex; gap: 1vmin; flex-wrap: wrap; }
.hud-cell {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: .3vmin;
  padding: .8vmin 1.2vmin;
  background: linear-gradient(180deg, rgba(26,19,12,.9), rgba(14,10,7,.9));
  border: 1px solid var(--line); border-radius: 12px;
}
.hud-k {
  font-size: clamp(10px, 1.7vmin, 12px); font-weight: 600; letter-spacing: .1em;
  color: rgba(245,239,223,.72); text-transform: uppercase; white-space: nowrap;
}
.hud-v {
  font-family: var(--font-cn-display); font-size: clamp(13px, 2.7vmin, 18px);
  font-weight: 700; color: var(--gold-hi); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hud-v .u { font-size: .72em; color: var(--ivory-dim); margin-left: .3vmin; }
.hud-bar { height: 3px; border-radius: 2px; background: rgba(216,180,90,.18); overflow: hidden; margin-top: .2vmin; }
.hud-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-hi)); }
/* 赤红作大字数值须 ≥24px 粗体 + 深色描边（§2.3） */
.hud-cell.lvl .hud-v { color: var(--red-text); font-size: clamp(16px, 3.1vmin, 20px); text-shadow: 0 1px 2px rgba(0,0,0,.85); }

/* ---------- 主 CTA ---------- */
.home-cta { display: flex; align-items: center; gap: 1.6vmin; flex-wrap: wrap; }
.cta-main {
  font-size: clamp(17px, 4.4vmin, 26px);
  padding: 1.4vmin 5vmin;
  min-height: var(--touch-min);
  animation: ctaPulse 3.2s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(216,180,90,.35), inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 rgba(243,217,139,0); }
  50% { box-shadow: 0 4px 22px rgba(216,180,90,.5), inset 0 1px 0 rgba(255,255,255,.6), 0 0 26px rgba(243,217,139,.35); }
}
.cta-sub { display: block; font-size: .46em; letter-spacing: .2em; color: #5a4416; margin-top: .15em; }

/* ---------- 角色卡横滑区（首页 / 自由对战） ---------- */
.home-right .char-row,
#freeCharRow {
  display: flex; justify-content: flex-start; align-items: flex-start;
  gap: 16px; padding: 2px 2px 6px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.home-right .char-row { position: static; flex: 1 1 auto; min-height: 0; align-items: stretch; }
/* 卡面高度随容器伸缩：frame 占满，文字层固定（保证横滑区不溢出容器） */
.home-right .char-card { flex: 0 0 auto; display: flex; flex-direction: column; width: clamp(92px, 16.5vmin, 146px); height: 100%; min-height: 0; }
.home-right .char-card .cc-frame { flex: 1 1 auto; min-height: 0; }
.home-right .char-card .cc-info { flex: 0 0 auto; margin-top: 6px; }
.home-right .char-card .cc-quote { min-height: 0; }
.home-right .char-card .cc-name { font-size: clamp(15px, 2.4vmin, 18px); }
.home-right .char-card .cc-title { font-size: clamp(10px, 1.6vmin, 12px); }
.home-right .char-card .cc-quote { font-size: clamp(10px, 1.5vmin, 12px); line-height: 1.45; }

.char-card { position: relative; }
/* 入席态（生涯主角 / 自由对战当前选择） */
.char-card.seated .cc-frame {
  border-color: var(--gold-hi);
  box-shadow: 0 0 22px var(--ac), 0 0 46px rgba(216,180,90,.35), 0 6px 18px rgba(0,0,0,.6);
}
.char-card .cc-badge {
  position: absolute; left: 6px; top: 6px; z-index: 7;
  font-size: clamp(9px, 1.6vmin, 11px); letter-spacing: .12em;
  color: #2b1c07; background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  padding: 2px 7px; border-radius: 20px; white-space: nowrap;
}
.char-card.locked .cc-frame { filter: grayscale(.8) brightness(.7); }
.char-card .cc-lock {
  position: absolute; right: 6px; top: 6px; z-index: 7;
  font-size: clamp(9px, 1.6vmin, 11px);
  color: var(--ivory-dim); background: rgba(10,7,5,.86);
  border: 1px solid var(--line); padding: 2px 7px; border-radius: 20px;
}

/* ---------- 牌馆缩略条（首页入口，§9.2） ---------- */
.parlor-strip {
  display: flex; gap: 10px; padding: 2px 2px 6px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.pl-chip {
  flex: 0 0 auto; min-width: 96px; min-height: var(--touch-min);
  display: flex; align-items: center; gap: .8vmin;
  padding: .7vmin 1.2vmin; cursor: pointer; color: inherit; font-family: var(--font-body);
  background: linear-gradient(180deg, rgba(26,19,12,.92), rgba(14,10,7,.92));
  border: 1px solid var(--line); border-radius: 12px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pl-chip:hover { transform: translateY(-3px); }
.pl-chip.locked { filter: grayscale(.85); opacity: .62; cursor: not-allowed; }
.pl-chip.cur { border-color: var(--gold-hi); box-shadow: 0 0 18px rgba(216,180,90,.32); }
.pl-emblem {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-cn-display); font-size: 19px; font-weight: 700;
  color: var(--gold-hi); border: 1px solid var(--gold); background: rgba(12,8,5,.7);
}
.pl-chip.cur .pl-emblem { color: #2b1c07; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
.pl-meta { min-width: 0; }
.pl-name { font-family: var(--font-cn-display); font-size: clamp(12px, 2.1vmin, 15px); color: var(--ivory); white-space: nowrap; }
.pl-sub { font-size: clamp(8px, 1.5vmin, 10px); color: var(--ivory-faint); white-space: nowrap; }
.pl-chip.locked .pl-sub { color: rgba(245,239,223,.42); }

/* ---------- 通用页面壳（世界观 / 牌馆） ---------- */
.page-wrap { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--gutter); padding: calc(1.2vmin + 8px) var(--gutter) 1vmin; }
#scene-world, #scene-parlors { background: radial-gradient(120% 90% at 50% 0%, #14100b, var(--ink) 62%); }
#scene-world {
  background:
    linear-gradient(180deg, rgba(12,9,7,.68), rgba(8,7,6,.84)),
    url("../assets/characters/v2/roster-keyart.webp") center 42% / cover no-repeat;
}
.page-head { display: flex; align-items: center; gap: 1.6vmin; flex: 0 0 auto; }
.page-head-txt { flex: 1 1 auto; min-width: 0; }
.page-head h2 {
  font-family: var(--font-cn-display); font-weight: 700;
  font-size: clamp(22px, 5.2vmin, 34px); letter-spacing: .12em; color: var(--gold-hi);
  text-shadow: 0 1px 0 #000;
}
.page-head .w-en {
  font-family: var(--font-en-logo); font-weight: 900; text-transform: uppercase;
  font-size: clamp(8px, 1.6vmin, 11px); letter-spacing: .32em; color: var(--gold);
  margin-top: .3vmin;
}
.page-stamp {
  font-family: var(--font-cn-display); font-size: clamp(22px, 4.6vmin, 34px); line-height: 1.2;
  color: var(--red-hi); border: 2px solid var(--red-hi); border-radius: 8px;
  padding: 0 .6vmin; transform: rotate(-9deg);
  background: rgba(20,4,4,.55); text-shadow: 0 0 12px rgba(224,69,74,.5);
}

/* ---------- 世界观总览页（§9.3） ---------- */
.world-grid {
  flex: 1 1 auto; min-height: 0; display: grid; gap: var(--gutter);
  grid-template-columns: 1fr; grid-auto-rows: min-content;
  overflow-y: auto; overflow-x: hidden; min-height: 0;
}
.w-block { min-width: 0; }
.w-sec {
  display: flex; align-items: center; gap: .8vmin;
  font-family: var(--font-cn-display); font-size: clamp(12px, 2.3vmin, 16px); font-weight: 700;
  letter-spacing: .14em; color: var(--gold); margin-bottom: 1.2vmin;
}
.w-sec > i { display: block; width: 2px; height: 1.5em; background: var(--gold); border-radius: 2px; }
.w-sec > .en { font-family: var(--font-en-logo); font-weight: 900; font-size: clamp(8px, 1.4vmin, 10px); letter-spacing: .3em; color: var(--ivory-faint); }
.w-note { margin-top: 1vmin; font-size: clamp(9px, 1.6vmin, 11px); color: var(--ivory-faint); letter-spacing: .08em; }

/* 阵营卡列：首发四位雀手，横向浏览角色阵营与个性 */
.w-factions { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 8px; scrollbar-width: thin; }
.w-faction {
  flex: 0 0 auto; width: clamp(150px, 26vmin, 220px);
  padding: 1.4vmin;
  background: linear-gradient(165deg, rgba(26,19,12,.96), rgba(14,10,7,.96));
  border: 2px solid var(--ac, var(--gold)); border-radius: var(--radius-card);
  box-shadow: 0 6px 20px rgba(0,0,0,.5), 0 0 20px rgba(0,0,0,.4);
}
.w-faction .wf-head { display: flex; align-items: center; gap: 1vmin; }
.wf-emblem {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-cn-display); font-size: 22px; font-weight: 700;
  color: #150c06; background: var(--ac, var(--gold));
}
.wf-name { font-family: var(--font-cn-display); font-size: clamp(15px, 2.6vmin, 20px); font-weight: 700; color: var(--gold-hi); }
.wf-en { display: block; font-family: var(--font-en-logo); font-weight: 900; font-size: clamp(8px, 1.3vmin, 9px); letter-spacing: .3em; color: var(--ivory-faint); }
.wf-title { margin-top: .8vmin; font-size: clamp(10px, 1.8vmin, 12px); color: var(--ivory-dim); }
.wf-quote { margin-top: .5vmin; font-size: clamp(10px, 1.7vmin, 12px); color: var(--gold); line-height: 1.5; }
.wf-slogan { margin-top: .6vmin; font-size: clamp(9px, 1.5vmin, 11px); color: var(--ivory-faint); letter-spacing: .06em; }

/* 牌馆地图：四站职业路线，金色节点 + 虚线连线 */
.w-map { position: relative; display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 1.4vmin 2px; }
.map-node {
  flex: 0 0 auto; width: clamp(84px, 15vmin, 120px); min-height: var(--touch-min);
  display: flex; flex-direction: column; align-items: center; gap: .5vmin;
  cursor: pointer; background: none; border: 0; color: inherit; padding: 0;
  font-family: var(--font-body);
}
.map-dot {
  width: clamp(40px, 7.4vmin, 58px); height: clamp(40px, 7.4vmin, 58px);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-cn-display); font-size: clamp(18px, 3.4vmin, 26px); font-weight: 700;
  color: var(--gold-hi); border: 2px solid var(--gold); background: rgba(12,8,5,.72);
  box-shadow: 0 0 16px rgba(216,180,90,.22);
}
.map-node.cur .map-dot { color: #2b1c07; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
.map-node.locked { cursor: not-allowed; }
.map-node.locked .map-dot { color: rgba(245,239,223,.5); border-color: rgba(245,239,223,.28); background: rgba(12,8,5,.72); box-shadow: none; }
.map-name { font-family: var(--font-cn-display); font-size: clamp(10px, 1.9vmin, 13px); color: var(--ivory); white-space: nowrap; }
.map-node.locked .map-name { color: rgba(245,239,223,.45); }
.map-city { font-size: clamp(8px, 1.4vmin, 10px); color: var(--ivory-faint); letter-spacing: .18em; white-space: nowrap; }
.map-link { flex: 0 0 3.4vmin; height: 0; border-top: 2px dashed rgba(216,180,90,.42); margin-top: calc(-1 * clamp(24px, 4.6vmin, 36px)); }


/* 玩法模块 */
.w-mods { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w-mod {
  padding: 1.2vmin; border-radius: 12px;
  background: linear-gradient(165deg, rgba(26,19,12,.96), rgba(14,10,7,.96));
  border: 1px solid var(--line);
}
.w-mod .wm-ico { font-family: var(--font-cn-display); font-size: clamp(16px, 2.8vmin, 22px); color: var(--gold-hi); }
.w-mod .wm-t { font-family: var(--font-cn-display); font-size: clamp(12px, 2.1vmin, 15px); color: var(--gold); margin-top: .3vmin; }
.w-mod .wm-d { font-size: clamp(9px, 1.6vmin, 12px); color: var(--ivory-dim); line-height: 1.5; margin-top: .3vmin; }

/* ---------- 牌馆选择页 ---------- */
.pl-grid {
  flex: 1 1 auto; min-height: 0; display: grid; gap: var(--gutter);
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: min-content;
  overflow-y: auto; overflow-x: hidden; min-height: 0; padding: 2px;
}
.pl-card {
  position: relative; min-width: 0; min-height: 104px;
  display: flex; flex-direction: column; gap: .7vmin; text-align: left;
  padding: 1.4vmin; cursor: pointer; color: inherit;
  background: linear-gradient(165deg, rgba(26,19,12,.96), rgba(14,10,7,.96));
  border: 2px solid var(--gold); border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  font-family: var(--font-body);
}
.pl-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.6), 0 0 24px rgba(216,180,90,.28); }
/* 锁定态：不能只靠灰显 —— 叠加锁标 + 解锁条件文字（§10.1） */
.pl-card.locked {
  cursor: not-allowed; border-color: rgba(245,239,223,.28);
  background: linear-gradient(165deg, rgba(20,18,16,.96), rgba(10,9,8,.96));
  box-shadow: none; filter: saturate(.15);
}
.pl-card.locked:hover { transform: none; box-shadow: none; }
.pl-card .pc-top { display: flex; align-items: center; gap: 1vmin; }
.pc-emblem {
  width: clamp(38px, 6.4vmin, 52px); height: clamp(38px, 6.4vmin, 52px); flex: 0 0 auto;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-cn-display); font-size: clamp(18px, 3vmin, 24px); font-weight: 700;
  color: #2b1c07; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border: 1px solid var(--gold-hi);
}
.pl-card.locked .pc-emblem { color: rgba(245,239,223,.6); background: rgba(245,239,223,.12); border-color: rgba(245,239,223,.28); }
.pc-title { min-width: 0; }
.pc-name { font-family: var(--font-cn-display); font-size: clamp(15px, 2.7vmin, 20px); font-weight: 700; color: var(--gold-hi); }
.pl-card.locked .pc-name { color: rgba(245,239,223,.6); }
.pc-sub { font-size: clamp(9px, 1.6vmin, 11px); color: var(--ivory-faint); margin-top: .2vmin; }
.pc-stats { display: flex; gap: 1.2vmin; flex-wrap: wrap; font-size: clamp(9px, 1.7vmin, 12px); color: var(--ivory-dim); font-variant-numeric: tabular-nums; }
.pc-stats b { color: var(--gold); font-weight: 700; }
.pc-lock {
  display: inline-flex; align-items: center; gap: .5vmin; align-self: flex-start;
  font-size: clamp(10px, 1.8vmin, 12px); color: rgba(245,239,223,.72);
  border: 1px dashed rgba(245,239,223,.3); border-radius: 8px; padding: .4vmin .9vmin;
}
.pc-clear { color: var(--gold-hi); }
.pc-go { margin-left: auto; font-family: var(--font-cn-display); font-size: clamp(11px, 2vmin, 14px); color: var(--gold-hi); }

/* ---------- 自由对战页（保留原选角流程） ---------- */
#btnLobbyBack { position: absolute; right: 1.6vmin; top: 1.6vmin; z-index: 6; }
#scene-lobby .lobby-title { top: 4%; }
#freeCharRow {
  position: absolute; left: 0; right: 0; top: 27%;
  justify-content: flex-start; padding: 0 4vmin; z-index: 5;
}
#freeCharRow .char-card { flex: 0 0 auto; width: clamp(92px, 18vmin, 146px); }

/* ---------- 设置面板 ---------- */
#panel-mask {
  position: absolute; inset: 0; z-index: 12; display: none;
  align-items: center; justify-content: center;
  background: rgba(5,3,2,.7); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
#panel-mask.show { display: flex; }
.st-panel {
  width: min(64vmin, 92%); max-height: 88%; overflow-y: auto;
  background: linear-gradient(165deg, var(--ink-panel-top), var(--ink-panel-bot));
  border: 2px solid rgba(216,180,90,.55); border-radius: var(--radius-panel);
  box-shadow: 0 0 40px rgba(216,180,90,.2), 0 24px 60px rgba(0,0,0,.7);
  padding: 2.4vmin 3vmin; animation: panelIn .3s cubic-bezier(.2,1.4,.4,1) both;
}
.st-title { font-family: var(--font-cn-display); font-size: clamp(16px, 3.2vmin, 22px); color: var(--gold-hi); letter-spacing: .14em; margin-bottom: 1.6vmin; }
.st-row {
  display: flex; align-items: center; justify-content: space-between; gap: 2vmin;
  padding: 1.2vmin 0; border-bottom: 1px dashed rgba(216,180,90,.22);
}
.st-row:last-of-type { border-bottom: 0; }
.st-label { flex: 1; min-width: 0; font-size: clamp(12px, 2.2vmin, 15px); color: var(--ivory); }
.st-label small { display: block; font-size: .74em; color: var(--ivory-faint); margin-top: .2em; letter-spacing: .06em; }
#stMotionStatus { max-width: 32em; line-height: 1.35; }
.st-seg { display: flex; gap: .6vmin; }
.st-seg button {
  min-width: var(--touch-min); min-height: var(--touch-min); padding: 0 1.4vmin;
  font-family: var(--font-cn-display); font-size: clamp(12px, 2.1vmin, 15px);
  color: var(--gold-hi); background: rgba(20,14,8,.6);
  border: 1px solid rgba(216,180,90,.45); border-radius: 20px; cursor: pointer;
}
.st-seg button.on { color: #2b1c07; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border-color: var(--gold-hi); }
#stMotionBtn[aria-pressed="true"] { color: #2b1c07; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border-color: var(--gold-hi); }
#stMotionBtn:disabled { opacity: .7; cursor: progress; }
body.motion-tilt .cc-frame { transition-duration: .1s; }
.st-danger { color: var(--red-hi) !important; border-color: rgba(224,69,74,.6) !important; background: rgba(20,4,4,.5) !important; }
.st-msg { min-height: 1.4em; margin-top: 1vmin; font-size: clamp(10px, 1.8vmin, 12px); color: var(--gold); letter-spacing: .08em; }
.st-btns { margin-top: 1.6vmin; display: flex; gap: 1.6vmin; justify-content: center; flex-wrap: wrap; }

.leave-panel {
  width: min(440px, calc(100% - 32px)); max-height: min(82vh, 460px);
  padding: clamp(20px, 3vmin, 30px);
}
.leave-panel .st-title { margin-bottom: 12px; }
.leave-copy { margin: 0; color: var(--ivory); font-size: clamp(14px, 2.2vmin, 16px); line-height: 1.75; }
.leave-panel .leave-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.leave-panel .leave-actions button { min-height: var(--touch-min); padding: 10px 14px; cursor: pointer; font: inherit; border-radius: 14px; }
.leave-panel .leave-danger { color: #ffd1d3; border: 1px solid rgba(224,69,74,.58); background: rgba(58,12,12,.58); }
.leave-panel .leave-danger:hover { background: rgba(100,18,18,.72); border-color: var(--red-hi); }
@media (max-width: 520px) {
  .leave-panel .leave-actions { grid-template-columns: 1fr; }
}

/* ---------- 结算面板扩展（§9.4） ---------- */
/* 生涯结算数据密度高（名次表 + 三列奖励格），按 §9.4 口径放宽宽度并保留面板内滚动 */
.ov-inner.wide { width: min(64vw, 600px); max-height: min(88vh, 640px); padding: 3vmin 3.2vmin; }
.ov-inner.wide .stamp { top: -4.4vmin; right: 3%; }
.ov-inner.wide .win-head { margin-top: 1.6vmin; }
.cs-block { margin-top: 2vmin; text-align: left; }
.cs-title {
  display: flex; align-items: center; gap: .8vmin;
  font-family: var(--font-cn-display); font-size: clamp(12px, 2.2vmin, 15px);
  font-weight: 700; letter-spacing: .14em; color: var(--gold); margin-bottom: .8vmin;
}
.cs-title > i { display: block; width: 2px; height: 1.4em; background: var(--gold); border-radius: 2px; }
.rank-row {
  display: flex; align-items: center; gap: 1.2vmin;
  padding: .8vmin 1.2vmin; border-bottom: 1px dashed rgba(216,180,90,.2);
  font-size: clamp(11px, 2.1vmin, 14px);
}
.rank-row:last-child { border-bottom: 0; }
.rank-row.me { background: rgba(216,180,90,.09); border-radius: 8px; }
.rank-no { width: 2.4em; flex: 0 0 auto; text-align: center; font-family: var(--font-cn-display); font-weight: 700; color: var(--gold-hi); }
.rank-row.me .rank-no { color: var(--red-text); font-size: 1.1em; }
.rank-name { flex: 1 1 auto; min-width: 0; color: var(--ivory); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-score { font-variant-numeric: tabular-nums; color: var(--gold-hi); font-weight: 700; }
.rank-flag { font-size: .8em; color: var(--ivory-faint); margin-left: .5vmin; }

.rw-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1vmin; }
.rw-cell { padding: 1vmin; border-radius: 12px; text-align: center; background: rgba(26,19,12,.9); border: 1px solid var(--line); }
.rw-k { font-size: clamp(9px, 1.6vmin, 11px); letter-spacing: .18em; color: var(--ivory-faint); }
.rw-v { font-family: var(--font-cn-display); font-size: clamp(16px, 3.2vmin, 24px); font-weight: 700; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.rw-b { font-size: clamp(9px, 1.5vmin, 11px); color: var(--red-text); letter-spacing: .06em; }
.rw-b.muted { color: var(--ivory-faint); }

.cs-progress { display: flex; align-items: center; gap: 1vmin; font-size: clamp(11px, 2vmin, 14px); color: var(--ivory-dim); }
.cs-progress .bar { flex: 1 1 auto; height: 6px; border-radius: 4px; background: rgba(216,180,90,.18); overflow: hidden; }
.cs-progress .bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-hi)); }
.cs-unlock {
  margin-top: 1.4vmin; padding: 1.2vmin; border-radius: 12px;
  border: 2px solid var(--gold-hi); background: rgba(216,180,90,.1);
  font-family: var(--font-cn-display); font-size: clamp(13px, 2.5vmin, 17px);
  color: var(--gold-hi); letter-spacing: .1em; text-align: center;
  animation: ctaPulse 2.4s ease-in-out infinite;
}
.cs-verdict { margin-top: 1.4vmin; text-align: center; font-family: var(--font-cn-display); font-size: clamp(15px, 3vmin, 21px); letter-spacing: .16em; }
.cs-verdict.win { color: var(--gold-hi); text-shadow: 0 0 14px rgba(243,217,139,.5); }
.cs-verdict.lose { color: var(--ivory-dim); }
.cs-note { margin-top: 1vmin; text-align: center; font-size: clamp(9px, 1.6vmin, 11px); color: var(--ivory-faint); letter-spacing: .08em; }

/* ---------- 雀手生涯：牌馆入场与胜利演出 ---------- */
.career-entry-ceremony {
  position: absolute; z-index: 8; left: 50%; top: 50%;
  display: grid; grid-template-columns: clamp(54px, 12vmin, 96px) minmax(0, 1fr) auto;
  align-items: center; gap: clamp(10px, 2vmin, 20px);
  width: min(82vw, 620px); min-height: clamp(90px, 19vmin, 138px);
  padding: clamp(10px, 2vmin, 18px) clamp(12px, 2.6vmin, 24px);
  transform: translate(-50%, -50%); overflow: hidden; pointer-events: none;
  border: 1px solid rgba(243,217,139,.72); border-radius: 16px;
  background: linear-gradient(110deg, rgba(12,9,7,.97), rgba(36,24,15,.94) 62%, rgba(19,13,10,.96));
  box-shadow: 0 20px 60px rgba(0,0,0,.56), inset 0 0 28px rgba(216,180,90,.12);
  animation: careerEntry 2.8s cubic-bezier(.18,.72,.24,1) both;
}
.career-entry-ceremony::after {
  content: ""; position: absolute; inset: auto 0 0; height: 2px;
  transform-origin: left; background: linear-gradient(90deg, var(--red-hi), var(--gold-hi), transparent);
  animation: careerEntryLine 2.8s linear both;
}
.career-entry-art, .career-victory-art {
  position: relative; display: grid; place-items: center; overflow: hidden;
  border: 1px solid rgba(243,217,139,.48); border-radius: 10px;
  background: radial-gradient(ellipse at 50% 40%, rgba(216,180,90,.25), rgba(13,10,8,.95));
}
.career-entry-art { width: clamp(54px, 12vmin, 96px); height: clamp(70px, 16vmin, 116px); }
.career-entry-art > img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.career-entry-art.char-placeholder > img { display: none; }
.career-entry-art.char-placeholder > span { color: var(--gold-hi); font: 700 clamp(28px, 6vmin, 48px)/1 var(--font-cn-display); }
.career-entry-copy, .career-victory-copy { display: grid; gap: 3px; min-width: 0; text-align: left; }
.career-entry-copy > span, .career-victory-copy > span {
  color: var(--gold); font-size: clamp(9px, 1.7vmin, 12px); letter-spacing: .17em;
}
.career-entry-copy > strong, .career-victory-copy > strong {
  overflow: hidden; color: var(--ivory); font: 700 clamp(17px, 3.4vmin, 27px)/1.3 var(--font-cn-display);
  text-overflow: ellipsis; white-space: nowrap;
}
.career-entry-copy > small, .career-victory-copy > small { color: var(--ivory-dim); font-size: clamp(9px, 1.7vmin, 12px); }
.career-entry-skip {
  pointer-events: auto; align-self: start; min-width: 52px; min-height: 52px; padding: 7px 10px; cursor: pointer;
  border: 1px solid rgba(245,239,223,.32); border-radius: 8px;
  color: var(--ivory-dim); background: rgba(5,3,2,.55); font: inherit; font-size: clamp(10px, 1.8vmin, 12px);
}
.career-entry-skip:hover, .career-entry-skip:focus-visible { color: var(--gold-hi); border-color: var(--gold-hi); outline: 2px solid rgba(243,217,139,.4); outline-offset: 2px; }
.career-victory-panel { animation: ceremonyPanelIn .55s cubic-bezier(.16,.84,.28,1) both; }
.career-victory-ceremony {
  display: flex; align-items: center; gap: clamp(10px, 2vmin, 18px);
  margin: 1.2vmin 0; padding: clamp(8px, 1.5vmin, 13px);
  overflow: hidden; border: 1px solid rgba(243,217,139,.54); border-radius: 12px;
  background: linear-gradient(105deg, rgba(216,180,90,.14), rgba(25,17,12,.92) 54%, rgba(192,39,45,.12));
  animation: victoryReveal .6s .12s cubic-bezier(.2,.8,.2,1) both;
}
.career-clear-ceremony { border-color: rgba(243,217,139,.82); box-shadow: inset 0 0 24px rgba(216,180,90,.13); }
.career-victory-art { flex: 0 0 clamp(42px, 8vmin, 64px); width: clamp(42px, 8vmin, 64px); height: clamp(52px, 10vmin, 78px); }
.career-victory-art > img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.career-victory-art.char-placeholder > img { display: none; }
.career-victory-copy { flex: 1 1 auto; }
.career-victory-copy > strong { color: var(--gold-hi); font-size: clamp(14px, 2.5vmin, 19px); }
.career-clear-panel .career-victory-ceremony { animation-delay: .2s; }
@keyframes careerEntry {
  0% { opacity: 0; transform: translate(-50%, -44%) scale(.94); }
  12%, 76% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -54%) scale(1.015); }
}
@keyframes careerEntryLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ceremonyPanelIn {
  from { box-shadow: 0 0 0 rgba(243,217,139,0); }
  to { box-shadow: 0 0 32px rgba(243,217,139,.2), 0 24px 80px rgba(0,0,0,.76); }
}
@keyframes victoryReveal {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (orientation: landscape) and (max-height: 430px) {
  .career-entry-ceremony { top: 53%; min-height: 82px; grid-template-columns: 48px minmax(0,1fr) auto; }
  .career-entry-art { width: 48px; height: 64px; }
  .career-victory-art { flex-basis: 38px; width: 38px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .career-entry-ceremony, .career-entry-ceremony::after,
  .career-victory-panel, .career-victory-ceremony {
    animation-duration: .01ms !important; animation-delay: 0ms !important;
  }
}

/* ---------- 适配：横屏 844×390（左 38% / 右 62%，§9.2） ---------- */
@media (orientation: landscape) and (max-height: 560px) {
  .home-grid { padding: calc(1vmin + 52px) var(--gutter) .8vmin; gap: 1.4vmin var(--gutter); }
  .sec-head { margin-bottom: .3vmin; }
  .hero-title { font-size: clamp(22px, 6.6vmin, 42px); }
  .hero-stamp { font-size: 9vmin; }
  .hero-jp { margin-top: .2vmin; }
  .cta-main { font-size: clamp(15px, 3.6vmin, 22px); padding: 1vmin 4vmin; }
  .hud { flex-wrap: nowrap; gap: .8vmin; }
  .hud-cell { padding: .5vmin .9vmin; }
  .w-mods { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .world-grid { grid-template-columns: 55% 1fr; grid-auto-rows: min-content; }
  .world-grid .w-block:nth-child(1) { grid-column: 1; grid-row: 1; }
  .world-grid .w-block:nth-child(2) { grid-column: 2; grid-row: 1; }
  .world-grid .w-block:nth-child(3) { grid-column: 2; grid-row: 2; }
  .pl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pl-card { min-height: 92px; padding: 1.1vmin; }
  .pc-sub { display: none; }
}
/* ---------- 适配：窄横屏 ---------- */
@media (orientation: landscape) and (max-height: 430px) {
  .cc-quote { display: none; }
  .home-right .char-card { width: clamp(78px, 13vmin, 116px); }
}
/* ---------- 适配：竖屏 390×844（单列：信息条吸顶 → 角色卡 → 牌馆 → 主按钮吸底，§9.2） ---------- */
@media (orientation: portrait) {
  .home-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr) auto; align-content: stretch;
    padding: calc(1.4vmin + 56px) var(--gutter) calc(1.2vmin + env(safe-area-inset-bottom, 0px));
  }
  .hud { grid-column: 1; grid-row: 1; }
  .home-right { grid-column: 1; grid-row: 2; height: 42vh; }
  .home-left { grid-column: 1; grid-row: 3; justify-content: flex-end; padding-bottom: .8vmin; }
  .home-foot { grid-column: 1; grid-row: 4; }
  .hero-title { font-size: clamp(30px, 10vmin, 46px); }
  .home-right .char-card { width: clamp(104px, 30vw, 150px); }
  .home-cta { width: 100%; }
  .cta-main { flex: 1 1 auto; }
  .w-factions { flex-direction: column; overflow-x: hidden; overflow-y: visible; }
  .w-faction { width: 100%; }
  /* 竖屏地图：竖排路线 */
  .w-map { flex-direction: column; align-items: flex-start; gap: 0; overflow-x: hidden; }
  .map-node { flex-direction: row; width: 100%; gap: 1.2vmin; }
  .map-link { flex: 0 0 2.2vmin; width: 2px; height: 2.2vmin; border-top: 0; border-left: 2px dashed rgba(216,180,90,.42); margin: 0 0 0 calc(clamp(20px, 3.7vmin, 29px)); }

  .pl-grid { grid-template-columns: 1fr; }
  .world-grid { grid-template-columns: 1fr; }
  /* art-bible §9.4 竖屏面板宽度分档：常规 min(92vw,480px) / 数据密集 min(94vw,520px) */
  .ov-inner { width: min(92vw, 480px); }
  .ov-inner.wide { width: min(94vw, 520px); }
  /* 竖屏字号 ×1.15 上浮（§3.2） */
  .cc-name { font-size: 4.6vmin; }
  .cc-title { font-size: 2.6vmin; }
}

/* ---------- 动效降级（§10.4） ---------- */
@media (prefers-reduced-motion: reduce) {
  .cc-frame > .layer-img, .pt-frame > .layer-img, .cc-frame img, .pt-frame img,
  .hero-title, .stamp, .cta-main, .cs-unlock { animation: none !important; }
  .scene { transition: opacity .2s ease; }
}

/* =====================================================================
   生涯外壳 · 补充（结算头像占位 / 按钮复位 / 场景点缀色）
   ===================================================================== */

/* button 元素复位（.pl-chip / .pl-card / .map-node 均为可点卡片） */
button.pl-chip, button.pl-card, button.map-node {
  -webkit-appearance: none; appearance: none; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
}
button.map-node { text-align: center; }

/* ---------- 结算面板头像（含 §6.4 占位，替换原 .win-head img 直出） ---------- */
.win-head .head-av {
  position: relative; flex: 0 0 auto;
  width: 13vmin; height: 17vmin; min-width: 62px; min-height: 82px;
  border-radius: 10px; overflow: hidden;
  border: 2px solid rgba(216,180,90,.5);
  background: linear-gradient(160deg, var(--ac, #7a2a2c), #0d0a08 78%);
}
.win-head .head-av > img.layer-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; display: block;
}
.win-head .head-av.char-placeholder > img.layer-img { display: none; }
.win-head .head-av .head-ini {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  font-family: var(--font-cn-display); font-size: 6vmin; color: rgba(245,239,223,.16);
}
.win-head .head-av.char-placeholder .head-ini { display: flex; }

/* ---------- 牌桌点缀：按关卡注入 --accent（B.1 scene.accent） ---------- */
#tableFelt::after { color: var(--accent, rgba(216,180,90,.09)); opacity: .12; }

/* ---------- 锁形图标（纯 CSS 绘制，替代 emoji，跨字体稳定） ---------- */
.lock-ico {
  display: inline-block; position: relative; vertical-align: -.04em;
  width: .78em; height: .62em; margin-right: .34em;
  border: 1.5px solid currentColor; border-radius: 2px;
}
.lock-ico::before {
  content: ""; position: absolute; left: 50%; top: -.5em;
  width: .46em; height: .5em; transform: translateX(-50%);
  border: 1.5px solid currentColor; border-bottom: 0;
  border-radius: .3em .3em 0 0;
}

/* =====================================================================
   立直（career-riichi-addendum A 节）—— [立直] 按钮 / 宣言牌选择态 / 横置金脉冲
   · A.2.1：[立直] 常驻动作区，与普通出牌并行；点选进入宣言牌选择态
   · A.2.1 步骤 2：可选宣言牌高亮金边（.riichi-ok），其余降灰不可点（.riichi-no）
   · A.2.1 步骤 3 + R9：宣言牌横置（--rot: 90deg，由 ui.js 内联注入）+ 金色脉冲、无指向
   · A.4.1：立直后摸切锁定，同一套 .riichi-ok/.riichi-no 标记复用
   ===================================================================== */
.call-btn.riichi {
  color: #2a1a08;
  background: linear-gradient(180deg, #f3d98b, #d8b45a);
  border-color: rgba(243,217,139,.9);
  box-shadow: 0 0 14px rgba(243,217,139,.45);
  font-weight: 700;
}
#handLayer.riichi-pick {
  border-color: rgba(243,217,139,.85);
  box-shadow: 0 0 22px rgba(216,180,90,.45);
}
#handLayer.riichi-lock { border-color: rgba(243,217,139,.45); }

/* 可选宣言牌 / 立直后唯一可打的摸牌：金边 */
.hand-tile.riichi-ok {
  filter: drop-shadow(0 0 8px rgba(243,217,139,.95)) drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
/* 其余降灰、不可点（cursor 仍为 pointer 以便给出"不可选"提示，点击由 ui.js 拦截） */
.hand-tile.riichi-no {
  opacity: .32;
  filter: grayscale(.75) brightness(.7);
  cursor: not-allowed;
}

/* 宣言牌横置 + 金色脉冲（保留入河 popIn，随后循环脉冲；无指向，区别于被鸣牌） */
@keyframes riichiPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(243,217,139,.55)); }
  50%      { filter: drop-shadow(0 0 13px rgba(243,217,139,1)); }
}
.river-tile.riichi-dtile {
  animation: popIn .28s ease both, riichiPulse 1.1s ease-in-out .28s infinite;
}

/* A.7 流局面板：立直供托作废行 */
.draw-note.riichi-void { color: var(--gold2, #d8b45a); letter-spacing: .08em; }

/* Scenic pass: reuse approved art on the world route and venue selection. */
.w-faction { position: relative; overflow: hidden; min-height: 112px; }
.w-faction:nth-child(1) {
  background-image: linear-gradient(90deg, rgba(26,19,12,.98) 0%, rgba(26,19,12,.92) 48%, rgba(26,19,12,.4) 100%), url("../assets/characters/v2/achi-avatar.webp");
  background-position: center, right center; background-size: cover, auto 100%; background-repeat: no-repeat;
}
.w-faction:nth-child(2) {
  background-image: linear-gradient(90deg, rgba(26,19,12,.98) 0%, rgba(26,19,12,.92) 48%, rgba(26,19,12,.4) 100%), url("../assets/characters/v2/mao-avatar.webp");
  background-position: center, right center; background-size: cover, auto 100%; background-repeat: no-repeat;
}
.w-faction:nth-child(3) {
  background-image: linear-gradient(90deg, rgba(26,19,12,.98) 0%, rgba(26,19,12,.92) 48%, rgba(26,19,12,.4) 100%), url("../assets/characters/v2/xuan-avatar.webp");
  background-position: center, right center; background-size: cover, auto 100%; background-repeat: no-repeat;
}
.w-faction:nth-child(4) {
  background-image: linear-gradient(90deg, rgba(26,19,12,.98) 0%, rgba(26,19,12,.92) 48%, rgba(26,19,12,.4) 100%), url("../assets/characters/v2/lin-avatar.webp");
  background-position: center, right center; background-size: cover, auto 100%; background-repeat: no-repeat;
}

.map-node {
  position: relative; isolation: isolate; width: clamp(116px, 13vw, 164px);
  height: clamp(112px, 15vh, 136px); min-height: 0; padding: 9px 10px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: 3px; overflow: hidden; border: 1px solid rgba(216,180,90,.55);
  border-radius: 12px; background-position: center; background-size: cover; background-repeat: no-repeat;
  text-align: left; box-shadow: 0 8px 22px rgba(0,0,0,.4);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.map-node[data-level="parlor"] {
  background-image: linear-gradient(180deg, rgba(10,8,6,.05) 0%, rgba(10,8,6,.22) 38%, rgba(10,8,6,.94) 100%), url("../assets/scenes/parlor-bg.webp");
}
.map-node[data-level="teahouse"] {
  background-image: linear-gradient(180deg, rgba(10,8,6,.05) 0%, rgba(10,8,6,.22) 38%, rgba(10,8,6,.94) 100%), url("../assets/scenes/teahouse-bg.webp");
}
.map-node[data-level="wharf"] {
  background-image: linear-gradient(180deg, rgba(10,8,6,.05) 0%, rgba(10,8,6,.22) 38%, rgba(10,8,6,.94) 100%), url("../assets/scenes/wharf-bg.webp");
}
.map-node[data-level="league"] {
  background-image: linear-gradient(180deg, rgba(10,8,6,.05) 0%, rgba(10,8,6,.22) 38%, rgba(10,8,6,.94) 100%), url("../assets/scenes/league-bg.webp");
}
.map-node:hover:not(.locked) { transform: translateY(-2px); border-color: var(--gold-hi); box-shadow: 0 10px 26px rgba(0,0,0,.58), 0 0 18px rgba(216,180,90,.18); }
.map-node.cur { border: 2px solid var(--gold-hi); }
.map-node.locked { filter: saturate(.55); }
.map-dot { width: 34px; height: 34px; font-size: 18px; border-color: rgba(245,239,223,.82); }
.map-name { color: var(--ivory); font-size: clamp(12px, 1.8vmin, 15px); font-weight: 700; text-shadow: 0 2px 8px #000; }
.map-city { color: rgba(255,248,230,.82); font-size: clamp(8px, 1.3vmin, 10px); letter-spacing: .12em; text-shadow: 0 1px 5px #000; }
.map-node.locked .map-name { color: rgba(245,239,223,.74); }
.map-node.locked .map-city { color: rgba(245,239,223,.62); }
.map-link { flex-basis: clamp(10px, 1.5vw, 22px); margin-top: 0; }

.pl-card { min-height: clamp(148px, 21vh, 184px); justify-content: flex-end; padding: clamp(10px, 1.3vmin, 16px); }
.pl-card[data-level="parlor"] {
  background-image: linear-gradient(180deg, rgba(10,8,6,.06) 0%, rgba(10,8,6,.32) 40%, rgba(10,8,6,.96) 100%), url("../assets/scenes/parlor-bg.webp");
}
.pl-card[data-level="teahouse"] {
  background-image: linear-gradient(180deg, rgba(10,8,6,.06) 0%, rgba(10,8,6,.32) 40%, rgba(10,8,6,.96) 100%), url("../assets/scenes/teahouse-bg.webp");
}
.pl-card[data-level="wharf"] {
  background-image: linear-gradient(180deg, rgba(10,8,6,.06) 0%, rgba(10,8,6,.32) 40%, rgba(10,8,6,.96) 100%), url("../assets/scenes/wharf-bg.webp");
}
.pl-card[data-level="league"] {
  background-image: linear-gradient(180deg, rgba(10,8,6,.06) 0%, rgba(10,8,6,.32) 40%, rgba(10,8,6,.96) 100%), url("../assets/scenes/league-bg.webp");
}
.pl-card[data-level] { background-size: cover, cover; background-position: center, center; background-repeat: no-repeat; }
.pl-card.locked { filter: saturate(.45); }
.pl-card .pc-name, .pl-card .pc-sub, .pl-card .pc-stats, .pl-card .pc-lock { text-shadow: 0 1px 5px rgba(0,0,0,.9); }

@media (orientation: portrait) {
  .map-node {
    width: 100%; height: 88px; min-height: 88px; padding: 8px 12px;
    display: grid; grid-template-columns: 42px minmax(0,1fr); grid-template-rows: 1fr 1fr;
    align-items: end; gap: 0 10px; flex-direction: row;
  }
  .map-node .map-dot { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .map-node .map-name { grid-column: 2; grid-row: 1; align-self: end; white-space: normal; }
  .map-node .map-city { grid-column: 2; grid-row: 2; align-self: start; }
  .map-link { width: 2px; height: 16px; flex: 0 0 16px; border-top: 0; border-left: 2px dashed rgba(216,180,90,.42); margin: 0 0 0 18px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .map-node { height: 92px; min-height: 92px; }
  .pl-card { min-height: 104px; }
}
/* ---------- 生涯章节：像翻开一页牌馆夜记，不做后台式任务列表 ---------- */
#scene-story { background: #0a0807; }
.story-backdrop {
  position: absolute; inset: -2%; z-index: 0;
  background-color: #100b08; background-position: center; background-size: cover;
  filter: saturate(.78) brightness(.60); transform: scale(1.04);
}
.story-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 67% 36%, transparent 0%, rgba(7,5,4,.20) 54%, rgba(7,5,4,.82) 100%),
    linear-gradient(180deg, rgba(7,5,4,.28), rgba(7,5,4,.05) 38%, rgba(7,5,4,.58));
}
.story-shell {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) clamp(14px, 2.2vw, 30px) calc(12px + env(safe-area-inset-bottom));
}
.story-page-head { flex: 0 0 auto; min-height: 54px; }
.story-page-head h2 { color: var(--gold-hi); }
.story-chapters {
  display: flex; flex: 0 0 auto; gap: 10px; overflow-x: auto; overflow-y: hidden;
  padding: 2px 2px 5px; scrollbar-width: thin; scrollbar-color: rgba(216,180,90,.46) transparent;
}
.story-chapter {
  position: relative; isolation: isolate; overflow: hidden; flex: 1 0 150px; min-width: 136px; min-height: 62px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px;
  padding: 8px 12px; color: var(--ivory); text-align: left; font: inherit; cursor: pointer;
  background-color: rgba(16,12,9,.92); background-position: center; background-size: cover;
  border: 1px solid rgba(216,180,90,.32); border-radius: 8px;
  box-shadow: 0 5px 14px rgba(0,0,0,.28);
}
.story-chapter:hover:not(:disabled), .story-chapter.selected {
  border-color: var(--gold-hi); box-shadow: 0 0 17px rgba(216,180,90,.20);
}
.story-chapter.selected::after {
  position: absolute; content: ""; left: 0; top: 10px; bottom: 10px; width: 3px;
  background: var(--gold-hi); box-shadow: 0 0 10px rgba(243,217,139,.7);
}
.story-chapter:disabled { cursor: not-allowed; filter: saturate(.48); }
.story-chapter-index { color: var(--gold-hi); font-size: 10px; letter-spacing: .12em; }
.story-chapter-name { font-family: var(--font-cn-display); font-size: clamp(13px, 1.8vmin, 16px); font-weight: 700; }
.story-chapter-state { color: rgba(245,239,223,.72); font-size: 10px; }
.story-stage {
  position: relative; isolation: isolate; flex: 1 1 auto; min-height: 0; overflow: hidden;
  border: 1px solid rgba(216,180,90,.52); border-radius: 12px;
  background: linear-gradient(130deg, rgba(17,13,10,.65), rgba(9,7,6,.18) 58%, rgba(9,7,6,.4));
  box-shadow: inset 0 0 0 1px rgba(243,217,139,.08), 0 14px 36px rgba(0,0,0,.45);
}
.story-stage-wash {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(9,7,6,.30), transparent 52%, rgba(9,7,6,.12)),
    linear-gradient(0deg, rgba(7,5,4,.62), transparent 54%);
}
.story-stage-heading {
  position: absolute; z-index: 2; left: clamp(20px, 4vw, 58px); top: clamp(20px, 4vh, 42px);
  width: min(52%, 650px); text-shadow: 0 2px 14px rgba(0,0,0,.85);
}
.story-kicker { display: block; margin-bottom: 8px; color: var(--gold-hi); font-size: 12px; letter-spacing: .15em; }
.story-stage-heading h3 {
  font-family: var(--font-cn-display); font-size: clamp(24px, 4.2vmin, 40px); line-height: 1.25;
  color: var(--ivory); text-shadow: 0 2px 12px #000;
}
.story-stage-heading p {
  max-width: 52ch; margin-top: 10px; color: rgba(255,248,230,.88);
  font-size: clamp(13px, 1.9vmin, 16px); line-height: 1.75;
}
.story-figure {
  position: absolute; z-index: 1; right: 3%; top: 2%; bottom: 0; width: min(42%, 520px);
  display: flex; justify-content: center; align-items: flex-end; pointer-events: none;
}
.story-portrait {
  display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.72));
}
.story-figure.char-placeholder::before {
  content: attr(data-initial); position: absolute; z-index: 0; inset: auto 12% 3%;
  height: 76%; display: grid; place-items: center; border: 1px solid rgba(216,180,90,.40);
  border-radius: 48% 48% 8px 8px; color: var(--gold-hi); font: 700 clamp(48px, 10vmin, 120px) var(--font-cn-display);
  background: radial-gradient(ellipse at 50% 18%, rgba(216,180,90,.22), rgba(12,9,7,.78) 68%);
}
.story-figure.char-placeholder .story-portrait { visibility: hidden; }
.story-panel {
  position: absolute; z-index: 3; left: clamp(16px, 3.2vw, 48px); bottom: clamp(14px, 3vh, 30px);
  width: min(62%, 760px); padding: clamp(14px, 2vmin, 23px);
  border: 1px solid rgba(216,180,90,.68); border-left: 3px solid var(--gold);
  border-radius: 8px; background: linear-gradient(145deg, rgba(12,9,7,.96), rgba(12,9,7,.83));
  box-shadow: 0 12px 35px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
}
.story-phase-row { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.story-phase {
  min-width: 60px; min-height: var(--touch-min); padding: 0 12px; color: var(--ivory-dim); font: inherit;
  cursor: pointer; border: 1px solid rgba(216,180,90,.32); border-radius: 6px; background: rgba(255,255,255,.035);
}
.story-phase[aria-pressed="true"] { color: #211708; font-weight: 700; border-color: var(--gold-hi); background: linear-gradient(180deg,var(--gold-hi),var(--gold)); }
.story-phase:disabled { opacity: .42; cursor: not-allowed; }
.story-phase-label { margin-left: auto; color: rgba(245,239,223,.60); font-size: 11px; letter-spacing: .12em; }
.story-speaker { display: flex; align-items: baseline; gap: 10px; }
.story-speaker-name { color: var(--gold-hi); font-family: var(--font-cn-display); font-size: 18px; font-weight: 700; }
.story-speaker-role { color: rgba(245,239,223,.58); font-size: 11px; }
.story-line {
  min-height: 3.3em; margin-top: 6px; color: var(--ivory); font-size: clamp(15px, 2.1vmin, 19px);
  line-height: 1.75; letter-spacing: .035em;
}
.story-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.story-pagination { display: flex; align-items: center; gap: 10px; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.story-page-btn {
  width: var(--touch-min); height: var(--touch-min); color: var(--ivory); font: 26px/1 var(--font-body);
  cursor: pointer; border: 1px solid rgba(216,180,90,.38); border-radius: 50%; background: rgba(255,255,255,.04);
}
.story-page-btn:hover:not(:disabled) { color: var(--gold-hi); border-color: var(--gold-hi); }
.story-page-btn:disabled { opacity: .38; cursor: not-allowed; }
.story-challenge { min-height: var(--touch-min); padding: 0 20px; white-space: nowrap; }
.story-challenge:disabled { opacity: .55; cursor: not-allowed; }
.w-mod {
  display: flex; flex-direction: column; align-items: flex-start; min-height: 92px; width: 100%;
  color: inherit; text-align: left; font: inherit; cursor: pointer;
}
.w-mod:hover, .w-mod:focus-visible { border-color: var(--gold-hi); box-shadow: 0 0 18px rgba(216,180,90,.16); }
.w-mod .wm-ico { display: block; }
.w-mod .wm-t, .w-mod .wm-d { display: block; }

@media (orientation: portrait) {
  .story-shell { gap: 9px; padding: calc(10px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom)); }
  .story-page-head { min-height: 48px; }
  .story-chapters { gap: 7px; }
  .story-chapter { flex: 0 0 40vw; min-width: 138px; max-width: 164px; min-height: 58px; padding: 7px 10px; }
  .story-stage-heading { left: 16px; top: 14px; width: min(66%, 250px); }
  .story-stage-heading h3 { font-size: clamp(20px, 5.4vw, 23px); line-height: 1.24; }
  .story-stage-heading p { max-width: 30ch; margin-top: 6px; font-size: 12px; line-height: 1.48; }
  .story-figure { right: -2%; top: 4%; bottom: 32%; width: 60%; opacity: .72; }
  .story-panel { left: 8px; right: 8px; bottom: 8px; width: auto; padding: 11px; }
  .story-phase-row { margin-bottom: 6px; }
  .story-line { min-height: 0; margin-top: 3px; font-size: 14px; line-height: 1.5; }
  .story-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; margin-top: 8px; }
  .story-pagination { justify-content: center; }
  .story-challenge { width: 100%; box-sizing: border-box; padding: 0 10px; font-size: 13px; }
}
@media (max-width: 360px) and (orientation: portrait) {
  .story-shell { padding-left: 9px; padding-right: 9px; }
  .story-chapter { flex-basis: 44vw; min-width: 128px; }
  .story-stage-heading { width: 62%; }
  .story-panel { left: 7px; right: 7px; padding: 10px; }
}
/* 小屏页面优先保证内容/牌面可点：静音入口留在设置中；横屏牌桌把快捷静音移出手牌行。 */
@media (max-width: 760px) {
  #btnMute { display: none; }
}
@media (max-width: 760px) and (orientation: landscape) {
  body.on-table #btnMute {
    display: flex; position: fixed; top: calc(68px + env(safe-area-inset-top)); right: 12px; bottom: auto; z-index: 11;
  }
}
@media (min-width: 761px) and (max-width: 940px) and (orientation: landscape) {
  body.on-table #btnMute { top: .7vmin; right: calc(2vmin + 152px); bottom: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .story-chapter, .story-page-btn { transition: none !important; }
}

/* ---------- 雀手手册：可滚动、可键盘关闭，沿用墨底暗金而不烘焙文字 ---------- */
#btnGuideLobby {
  position: absolute;
  right: calc(1.6vmin + var(--touch-min) + 1vmin);
  top: 1.6vmin;
  z-index: 6;
}
#overlay .guide-panel {
  width: min(88vw, 900px);
  max-height: min(88vh, 760px);
  padding: clamp(16px, 2.5vmin, 28px);
  text-align: left;
  overflow: hidden;
}
.guide-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: var(--touch-min); height: var(--touch-min);
  border: 1px solid rgba(216,180,90,.45); border-radius: 50%;
  background: rgba(7,6,5,.82); color: var(--ivory); font-size: 28px; cursor: pointer;
}
.guide-overline {
  display: flex; align-items: center; gap: 12px; padding-right: 56px;
  color: var(--gold2); font-size: clamp(10px, 1.6vmin, 13px); letter-spacing: .16em;
}
.guide-overline span + span {
  color: rgba(216,180,90,.62); font-family: var(--font-en-logo); letter-spacing: .2em;
}
.guide-panel h2 {
  margin-top: 10px; color: var(--ivory); font-family: var(--font-cn-display);
  font-size: clamp(21px, 3.2vmin, 30px); letter-spacing: .08em;
}
.guide-lead {
  margin: 6px 0 14px; color: rgba(242,232,211,.72);
  font-size: clamp(12px, 1.9vmin, 15px); line-height: 1.65;
}
.guide-scroll { padding: 2px 3px 4px; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.guide-card {
  min-width: 0; padding: 14px 15px; border: 1px solid rgba(216,180,90,.22);
  border-radius: 12px; background: linear-gradient(145deg, rgba(45,34,22,.72), rgba(18,14,11,.9));
}
.guide-index { color: var(--gold2); font-family: var(--font-en-logo); font-size: 10px; letter-spacing: .17em; }
.guide-card h3 {
  margin: 5px 0; color: var(--ivory); font-family: var(--font-cn-display);
  font-size: clamp(15px, 2vmin, 18px); letter-spacing: .08em;
}
.guide-card p { color: rgba(242,232,211,.78); font-size: clamp(12px, 1.65vmin, 14px); line-height: 1.7; }
.guide-footnote {
  margin: 12px 2px 2px; padding: 10px 12px; border-left: 2px solid var(--red2);
  background: rgba(224,69,74,.08); color: rgba(242,232,211,.82);
  font-size: clamp(11px, 1.6vmin, 13px); line-height: 1.65;
}
.guide-footnote b { color: var(--gold2); }
.guide-actions { padding-top: 12px; }
.guide-actions button { min-height: var(--touch-min); }
.guide-close:focus-visible, .guide-actions button:focus-visible { outline: 2px solid var(--gold2); outline-offset: 3px; }
@media (orientation: portrait) {
  #overlay .guide-panel { width: min(94vw, 640px); max-height: 88vh; padding: 16px 14px 12px; }
  .guide-grid { grid-template-columns: 1fr; gap: 8px; }
  .guide-card { padding: 11px 12px; }
  .guide-panel h2 { padding-right: 34px; }
}
@media (orientation: landscape) and (max-height: 430px) {
  #overlay .guide-panel { width: min(90vw, 900px); max-height: 94vh; padding: 12px 16px; }
  .guide-lead { margin-bottom: 8px; }
  .guide-grid { gap: 8px; }
  .guide-card { padding: 9px 11px; }
}
@media (prefers-reduced-motion: reduce) { #overlay .guide-panel { animation: none; } }

/* ---------- 雀手手记：真实本地生涯汇总，不伪造逐局时间线 ---------- */
#scene-records {
  background:
    linear-gradient(180deg, rgba(9,11,14,.76), rgba(8,9,11,.9)),
    url("../assets/scenes/lobby-night-bg.webp") center 42% / cover no-repeat;
}
.records-wrap { gap: var(--gutter); }
.records-content {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  display: grid; grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr);
  grid-template-rows: minmax(0, 1fr) auto; gap: var(--gutter); padding: 2px;
}
.records-panel {
  min-width: 0; padding: clamp(14px, 2vmin, 22px);
  border: 1px solid rgba(216,180,90,.3); border-radius: 16px;
  background: linear-gradient(155deg, rgba(20,21,23,.94), rgba(11,12,14,.94));
  box-shadow: 0 12px 30px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(14px);
}
.records-panel h3 { font-family: var(--font-cn-display); font-size: clamp(15px, 2.4vmin, 20px); color: var(--gold-hi); letter-spacing: .12em; }
.records-overview { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 16px; }
.records-profile { display: flex; align-items: center; gap: 14px; min-width: 0; }
.records-profile .head-av { width: clamp(58px, 8vmin, 82px); height: clamp(72px, 10vmin, 104px); flex: 0 0 auto; overflow: hidden; border: 1px solid var(--gold); border-radius: 10px; box-shadow: 0 0 18px rgba(216,180,90,.16); }
.records-profile .head-av .layer-img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.records-identity { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.records-identity strong { color: var(--ivory); font: 700 clamp(17px, 2.5vmin, 23px)/1.2 var(--font-cn-display); }
.records-identity > span:last-child { color: var(--ivory-dim); font-size: 12px; }
.records-kicker { color: var(--gold); font: 900 9px/1.4 var(--font-en-logo); letter-spacing: .22em; }
.records-progress { display: grid; gap: 8px; }
.records-progress-label { display: flex; justify-content: space-between; align-items: baseline; color: var(--ivory-dim); font-size: 12px; }
.records-progress-label strong { color: var(--gold-hi); font: 700 16px var(--font-cn-display); }
.records-progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(216,180,90,.15); }
.records-progress-track > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #92713a, #f1d489); box-shadow: 0 0 14px rgba(241,212,137,.35); }
.records-progress-caption { color: var(--ivory-faint); font-size: 11px; line-height: 1.5; }
.records-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: auto; }
.record-stat { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 11px; border: 1px solid rgba(245,239,223,.09); border-radius: 10px; background: rgba(255,255,255,.025); }
.record-stat span { color: var(--ivory-dim); font-size: 11px; }
.record-stat strong { color: var(--gold-hi); font-size: 17px; font-variant-numeric: tabular-nums; }
.records-empty { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px dashed rgba(216,180,90,.38); border-radius: 11px; background: rgba(216,180,90,.045); }
.records-empty[hidden] { display: none; }
.records-empty-mark { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-hi); font-family: var(--font-cn-display); }
.records-empty strong { color: var(--gold-hi); font-size: 12px; white-space: nowrap; }
.records-empty p { margin: 0; color: var(--ivory-dim); font-size: 11px; line-height: 1.45; }
.records-career { grid-column: 2; grid-row: 1; }
.records-section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.records-section-head h3 { margin-top: 3px; }
.records-section-count { color: rgba(216,180,90,.56); font: 900 10px var(--font-en-logo); letter-spacing: .16em; white-space: nowrap; }
.record-level-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.record-level-card { min-width: 0; padding: 12px; border: 1px solid rgba(216,180,90,.2); border-radius: 12px; background: linear-gradient(145deg, rgba(31,27,21,.86), rgba(15,15,16,.92)); }
.record-level-card.cleared { border-color: rgba(231,196,111,.55); }
.record-level-card.locked { opacity: .58; }
.record-level-head { display: flex; align-items: center; gap: 9px; padding-bottom: 9px; border-bottom: 1px solid rgba(245,239,223,.08); }
.record-level-index { color: var(--gold); font: 900 12px var(--font-en-logo); letter-spacing: .08em; }
.record-level-head h4 { color: var(--ivory); font: 700 14px var(--font-cn-display); }
.record-level-status { display: block; margin-top: 3px; color: var(--gold); font-size: 10px; }
.record-level-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 9px; padding: 9px 0; }
.record-level-metrics span { display: flex; justify-content: space-between; gap: 4px; color: var(--ivory-faint); font-size: 10px; white-space: nowrap; }
.record-level-metrics b { color: var(--ivory); font-weight: 600; }
.record-level-metrics .record-best { color: var(--gold-hi); }
.record-level-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.record-level-actions button, .record-chapter-card button { min-height: 34px; padding: 0 10px; border: 1px solid rgba(216,180,90,.32); border-radius: 8px; color: var(--gold-hi); background: rgba(216,180,90,.07); font: 600 11px var(--font-body); cursor: pointer; }
.record-level-actions button:hover, .record-chapter-card button:hover { border-color: var(--gold-hi); background: rgba(216,180,90,.14); }
.record-action-locked { align-self: center; color: var(--ivory-faint); font-size: 10px; }
.records-chapters { grid-column: 1 / -1; grid-row: 2; }
.record-chapter-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.record-chapter-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 10px 12px; border: 1px solid rgba(245,239,223,.1); border-radius: 10px; background: rgba(255,255,255,.025); }
.record-chapter-card.available { border-color: rgba(216,180,90,.32); }
.record-chapter-card.locked { opacity: .56; }
.record-chapter-index { color: var(--gold); font: 900 8px var(--font-en-logo); letter-spacing: .16em; }
.record-chapter-card strong { color: var(--ivory); font: 600 12px var(--font-cn-display); }
.record-chapter-card > span:not(.record-chapter-index) { color: var(--gold-hi); font-size: 10px; }
.record-chapter-card small { color: var(--ivory-faint); font-size: 10px; line-height: 1.45; }
.records-note { flex: 0 0 auto; color: var(--ivory-faint); font-size: 10px; line-height: 1.4; text-align: center; letter-spacing: .04em; }
@media (orientation: portrait) {
  .records-content { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; overflow-y: auto; }
  .records-overview, .records-career, .records-chapters { grid-column: 1; grid-row: auto; }
  .records-stats { margin-top: 0; }
  .record-level-grid { grid-template-columns: 1fr; }
  .record-chapter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .records-panel { padding: 14px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .records-content { grid-template-columns: minmax(220px,.78fr) minmax(0,1.22fr); grid-template-rows: minmax(0,1fr) auto; }
  .records-overview { grid-column: 1; grid-row: 1; }
  .records-career { grid-column: 2; grid-row: 1; }
  .records-chapters { grid-column: 1 / -1; grid-row: 2; }
  .record-level-card { padding: 8px; }
  .record-level-metrics { padding: 6px 0; }
  .record-chapter-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

/* ---------- Mobile-safe career settlement and modal FX layering ---------- */
/* Keep celebration particles from painting over result text and buttons. */
#overlay.show ~ #fx { visibility: hidden; }

/* Three clear actions: primary venue progression, then replay and home. */
.ov-inner.wide #ovBtns {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(8px, 1.2vmin, 12px);
}
.ov-inner.wide #ovBtns > button {
  min-width: 0;
  min-height: var(--touch-min);
  padding: .65em .85em;
  font-size: clamp(13px, 2vmin, 17px);
  letter-spacing: .05em;
  white-space: nowrap;
}
@media (orientation: portrait) {
  .ov-inner.wide #ovBtns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .ov-inner.wide #ovBtns > button:first-child { grid-column: 1 / -1; }
  .ov-inner.wide #ovBtns > button {
    padding: .65em .8em;
    font-size: clamp(13px, 4vw, 16px);
    letter-spacing: .03em;
  }
}


/* ---------- 2026-09-24 牌桌、瓷牌与中文排印视觉精修 ---------- */
:root {
  --font-cn-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "KaiTi", "SimSun", serif;
  --font-body: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
body { font-family: var(--font-body); text-rendering: optimizeLegibility; }
.hero-title {
  font-family: var(--font-cn-display);
  font-size: clamp(32px, 7.8vmin, 52px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: .075em;
  color: #f1d994;
  text-shadow: 0 2px 0 rgba(12, 8, 4, .94), 0 8px 22px rgba(0, 0, 0, .65), 0 0 14px rgba(216, 180, 90, .16);
}
.hero-en {
  font-size: clamp(9px, 1.65vmin, 12px);
  letter-spacing: .22em;
  padding: .38vmin .8vmin;
  color: rgba(243, 217, 139, .9);
}
.hero-jp { letter-spacing: .1em; line-height: 1.55; }
.hero-stamp { color: rgba(192, 39, 45, .11); text-shadow: none; }
.sec-head { letter-spacing: .08em; font-weight: 700; }
.sec-head > .en { letter-spacing: .18em; font-weight: 700; }
.home-foot { letter-spacing: .18em; }
.hud-k { letter-spacing: .08em; font-size: clamp(10px, 1.55vmin, 12px); }
.hud-v { letter-spacing: .025em; }
.cc-info { padding: 1px 4px 2px; }
.cc-name {
  font-family: var(--font-cn-display);
  font-size: clamp(15px, 2.55vmin, 20px);
  line-height: 1.25;
  letter-spacing: .045em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 8px rgba(0, 0, 0, .65);
}
.cc-title {
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: clamp(10px, 1.65vmin, 12px);
  line-height: 1.45;
  letter-spacing: .015em;
  color: rgba(245, 239, 223, .82);
}
.cc-quote {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: clamp(10px, 1.55vmin, 12px);
  line-height: 1.5;
  letter-spacing: .015em;
  color: rgba(245, 239, 223, .76);
}
.pl-name { letter-spacing: .025em; }
.pl-sub { letter-spacing: .01em; }
.btn-gold {
  font-family: var(--font-cn-display);
  font-weight: 700;
  letter-spacing: .1em;
  text-shadow: 0 1px 0 rgba(255, 245, 214, .38);
}
.btn-plain { font-family: var(--font-body); font-weight: 600; letter-spacing: .07em; }
.page-head h2, .sec-head, .pt-name { font-family: var(--font-cn-display); }
.pt-name {
  font-size: clamp(14px, 2.5vmin, 20px);
  line-height: 1.3;
  letter-spacing: .055em;
  text-shadow: 0 1px 0 rgba(8, 6, 4, .95), 0 2px 5px rgba(0, 0, 0, .86);
}
.pt-title { font-family: var(--font-body); font-size: clamp(10px, 1.45vmin, 12px); letter-spacing: .015em; }
#tableFelt {
  border: 1px solid rgba(239, 205, 126, .48);
  background:
    linear-gradient(180deg, rgba(244, 207, 133, .11), transparent 12% 82%, rgba(18, 9, 3, .32)),
    repeating-linear-gradient(2deg, rgba(255, 238, 196, .018) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #765535 0%, #51351f 42%, #382313 100%);
  box-shadow:
    0 2px 0 rgba(236, 196, 113, .34),
    0 10px 0 #4b301b,
    0 20px 30px rgba(0, 0, 0, .64),
    inset 0 2px 0 rgba(255, 235, 183, .38),
    inset 0 0 0 5px rgba(31, 19, 10, .66),
    inset 0 0 0 7px rgba(216, 180, 90, .34),
    inset 0 0 0 10px rgba(255, 242, 205, .07),
    inset 0 -18px 30px rgba(15, 8, 3, .52);
}
#tableFelt::before {
  inset: 4.5%;
  z-index: 0;
  border: 1px solid rgba(227, 200, 138, .27);
  background:
    repeating-linear-gradient(113deg, rgba(232, 224, 191, .018) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(23deg, rgba(4, 21, 14, .045) 0 2px, transparent 2px 7px),
    radial-gradient(ellipse 78% 72% at 50% 34%, var(--felt, #1d4a38) 0%, var(--felt-deep, #122e23) 76%, #0a1c14 100%);
  box-shadow:
    inset 0 1px 0 rgba(246, 233, 194, .18),
    inset 0 0 0 5px rgba(6, 24, 16, .48),
    inset 0 0 0 6px rgba(216, 180, 90, .18),
    inset 0 16px 28px rgba(0, 0, 0, .2),
    inset 0 -22px 38px rgba(0, 0, 0, .38);
}
#tableFelt::after {
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(72px, 11vmin, 124px);
  height: clamp(72px, 11vmin, 124px);
  border: 1px solid rgba(216, 180, 90, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(216, 180, 90, .025), inset 0 0 0 3px rgba(216, 180, 90, .035);
  transform: translate(-50%, -50%);
  font-family: var(--font-cn-display);
  font-size: clamp(38px, 6.2vmin, 70px);
  line-height: 1;
  color: rgba(239, 205, 126, .085);
  text-shadow: none;
  opacity: 1;
}
.tile { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .24)) drop-shadow(0 3px 2px rgba(0, 0, 0, .22)); }
.tile svg { overflow: visible; }
#handLayer {
  background: linear-gradient(180deg, rgba(79, 53, 32, .78), rgba(24, 16, 11, .92));
  border-color: rgba(228, 195, 124, .38);
  box-shadow: inset 0 1px 0 rgba(255, 239, 196, .12), 0 9px 20px rgba(0, 0, 0, .38);
}
@media (prefers-reduced-motion: reduce) {
  .hero-title, .cta-main { animation: none; }
}

/* ---------- 生涯主角选择：旧暗金牌馆 × 角色卡面 ---------- */
.lead-bg {
  background-image:
    linear-gradient(90deg, rgba(8,6,5,.76), rgba(8,6,5,.48)),
    url("../assets/scenes/lobby-night-bg.webp"),
    url("../assets/scenes/parlor-bg.webp");
  background-position: center, center 44%, center;
}
.lead-shell {
  position: relative; z-index: 2; width: min(1440px, 100%); height: 100%;
  margin: 0 auto; padding: clamp(14px, 2.6vh, 28px) clamp(18px, 4vw, 64px);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(10px, 1.7vh, 18px);
}
.lead-head { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 16px; }
.lead-head .icon-btn { position: static; }
.lead-kicker, .lead-roster-head span:last-child, .lead-profile-kicker {
  color: rgba(226,190,107,.78); font-size: 10px; letter-spacing: .24em; font-weight: 700;
}
.lead-head h1 { margin-top: 4px; color: #f3d98b; font: 800 clamp(23px, 3.2vw, 42px)/1.15 var(--font-cn-display); letter-spacing: .12em; }
.lead-subtitle { margin-top: 6px; color: rgba(245,239,223,.72); font-size: clamp(11px, 1.45vmin, 14px); letter-spacing: .04em; }
.lead-seal {
  width: 44px; height: 44px; display: grid; place-items: center; justify-self: end;
  border: 1px solid rgba(216,180,90,.5); border-radius: 50%; color: #f3d98b;
  box-shadow: inset 0 0 0 4px rgba(216,180,90,.08), 0 0 24px rgba(216,180,90,.12);
  font: 700 22px var(--font-cn-display);
}
.lead-main { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, .94fr); gap: clamp(18px, 4vw, 56px); align-items: stretch; }
.lead-preview {
  position: relative; min-width: 0; overflow: hidden; display: flex; align-items: end;
  border-bottom: 1px solid rgba(216,180,90,.32);
  background: linear-gradient(90deg, rgba(8,6,5,.06), rgba(8,6,5,.42) 56%, rgba(8,6,5,.82));
}
.lead-art { position: relative; align-self: stretch; width: min(52%, 370px); flex: 0 0 min(52%, 370px); overflow: hidden; }
.lead-art img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 12px 24px rgba(0,0,0,.52)); }
.lead-art.char-placeholder { background: radial-gradient(ellipse at 50% 72%, var(--ac, rgba(216,180,90,.18)), transparent 68%); }
.lead-art.char-placeholder img { display: none; }
.lead-art-glow { position: absolute; inset: auto 5% 0; height: 36%; background: radial-gradient(ellipse, rgba(216,180,90,.22), transparent 70%); pointer-events: none; }
.lead-profile { position: relative; z-index: 2; min-width: 0; align-self: end; padding: 0 clamp(12px, 2.4vw, 30px) clamp(24px, 5vh, 54px) 0; max-width: 470px; }
.lead-profile-kicker { color: var(--lead-accent, #d8b45a); }
.lead-profile h2 { margin-top: 8px; font: 800 clamp(34px, 5vw, 64px)/1.05 var(--font-cn-display); letter-spacing: .16em; text-shadow: 0 3px 18px #000; }
.lead-title { margin-top: 8px; color: #efd28a; font-size: clamp(14px, 1.7vw, 18px); letter-spacing: .12em; }
.lead-bio { margin-top: 16px; color: rgba(245,239,223,.82); font-size: clamp(12px, 1.4vw, 15px); line-height: 1.9; max-width: 34em; }
.lead-profile blockquote { margin-top: 15px; padding-left: 12px; border-left: 2px solid var(--lead-accent, #d8b45a); color: #f3d98b; font: 600 clamp(13px, 1.5vw, 17px)/1.6 var(--font-cn-display); }
.lead-roster { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.lead-roster-head { display: flex; justify-content: space-between; align-items: center; margin: 0 2px 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(216,180,90,.26); color: #f3d98b; font: 700 14px var(--font-cn-display); letter-spacing: .12em; }
.lead-options { min-width: 0; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.4vh, 14px); align-content: center; }
.lead-option {
  min-width: 0; height: clamp(112px, 20vh, 176px); padding: 8px; display: grid; grid-template-columns: minmax(58px, 38%) 1fr; gap: 10px; align-items: center;
  overflow: hidden; text-align: left; color: var(--ivory); cursor: pointer;
  border: 1px solid rgba(216,180,90,.26); border-radius: 8px;
  background: linear-gradient(135deg, rgba(28,21,15,.94), rgba(9,8,8,.96));
  box-shadow: inset 0 1px 0 rgba(255,240,198,.06), 0 8px 20px rgba(0,0,0,.28);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lead-option:hover { transform: translateY(-2px); border-color: rgba(243,217,139,.72); }
.lead-option[aria-pressed="true"] { border-color: var(--lead-accent, #d8b45a); box-shadow: 0 0 0 1px var(--lead-accent, #d8b45a), 0 0 24px color-mix(in srgb, var(--lead-accent, #d8b45a) 24%, transparent); }
.lead-option:focus-visible, .lead-confirm:focus-visible, .lead-change-link:focus-visible { outline: 2px solid #fff0be; outline-offset: 3px; }
.lead-option-art { position: relative; height: 100%; overflow: hidden; border-radius: 5px; background: linear-gradient(160deg, color-mix(in srgb, var(--lead-accent, #a67c36) 24%, #16100b), #080706); }
.lead-option-art img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.lead-option-copy { min-width: 0; }
.lead-option-copy strong { display: block; color: var(--lead-accent, #f3d98b); font: 700 clamp(15px, 1.9vw, 21px) var(--font-cn-display); letter-spacing: .12em; }
.lead-option-copy span { display: block; margin-top: 5px; color: rgba(245,239,223,.72); font-size: clamp(10px, 1.2vw, 12px); }
.lead-option-copy em { display: block; margin-top: 8px; color: rgba(245,239,223,.48); font-size: 9px; font-style: normal; letter-spacing: .12em; }
.lead-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 10px; border-top: 1px solid rgba(216,180,90,.22); }
.lead-footer p { color: rgba(245,239,223,.66); font-size: clamp(10px, 1.3vmin, 13px); line-height: 1.55; }
.lead-confirm { min-width: 200px; min-height: 48px; }
.lead-change-link { display: block; margin: -8px auto 10px; padding: 8px 12px; border: 1px solid rgba(216,180,90,.28); border-radius: 999px; background: rgba(12,9,7,.72); color: #f3d98b; font: 600 11px var(--font-body); letter-spacing: .08em; cursor: pointer; }
.lead-change-link span { margin-left: 8px; color: var(--gold); }

@media (max-width: 760px) {
  .lead-shell { padding: 10px 14px max(10px, env(safe-area-inset-bottom)); gap: 8px; }
  .lead-head { grid-template-columns: 42px 1fr 34px; gap: 10px; }
  .lead-head .icon-btn { width: 40px; height: 40px; }
  .lead-seal { width: 32px; height: 32px; font-size: 17px; }
  .lead-kicker { font-size: 8px; }
  .lead-head h1 { font-size: clamp(21px, 6vw, 30px); }
  .lead-subtitle { margin-top: 3px; font-size: 10px; }
  .lead-main { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 10px; }
  .lead-art { width: 46%; flex-basis: 46%; }
  .lead-profile { padding: 0 8px 14px 0; }
  .lead-profile h2 { font-size: clamp(26px, 7vw, 40px); }
  .lead-bio { margin-top: 7px; font-size: 10px; line-height: 1.55; }
  .lead-profile blockquote { margin-top: 7px; font-size: 11px; }
  .lead-roster-head { margin-bottom: 6px; padding-bottom: 6px; font-size: 11px; }
  .lead-roster-head span:last-child { font-size: 8px; }
  .lead-options { gap: 6px; }
  .lead-option { height: clamp(76px, 16vh, 112px); padding: 5px; grid-template-columns: 35% 1fr; gap: 6px; }
  .lead-option-copy strong { font-size: clamp(13px, 3.6vw, 18px); }
  .lead-option-copy span { margin-top: 2px; font-size: 9px; }
  .lead-option-copy em { display: none; }
  .lead-footer { gap: 8px; padding-top: 7px; }
  .lead-footer p { max-width: 55%; font-size: 9px; }
  .lead-confirm { min-width: 150px; min-height: 44px; padding: 0 12px; font-size: 12px; }
  .lead-change-link { margin-bottom: 6px; }
}
@media (max-width: 480px) and (orientation: portrait) {
  .lead-main { min-width: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, .95fr) minmax(0, 1.05fr); gap: 4px; }
  .lead-preview { min-height: 0; }
  .lead-art { width: 36%; flex-basis: 36%; }
  .lead-profile { padding-bottom: 12px; }
  .lead-options { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(64px, 1fr)); gap: 5px; overflow-x: hidden; overflow-y: auto; align-content: stretch; padding: 2px; scroll-snap-type: y proximity; }
  .lead-option { height: 100%; min-height: 64px; grid-template-columns: minmax(34px, 34%) minmax(0, 1fr); grid-template-rows: 1fr; gap: 5px; padding: 4px; scroll-snap-align: start; }
  .lead-option-art { min-height: 0; }
  .lead-option-copy strong { font-size: clamp(12px, 3.4vw, 15px); }
  .lead-option-copy span { font-size: 8px; line-height: 1.3; }
  .lead-option-copy { padding: 2px 1px; }
  .lead-footer p { display: none; }
  .lead-confirm { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lead-option { transition: none; }
  .lead-option:hover { transform: none; }
}
@media (orientation: landscape) and (max-height: 430px) {
  .lead-shell { padding: 7px 16px; gap: 6px; }
  .lead-head { grid-template-columns: 42px 1fr 34px; gap: 10px; }
  .lead-head .icon-btn { width: 40px; height: 40px; }
  .lead-head h1 { margin-top: 1px; font-size: 25px; }
  .lead-subtitle { margin-top: 2px; font-size: 9px; }
  .lead-seal { width: 32px; height: 32px; font-size: 17px; }
  .lead-main { grid-template-columns: minmax(0, 1fr) minmax(360px, .94fr); gap: 14px; }
  .lead-profile { padding-bottom: 12px; }
  .lead-profile h2 { font-size: clamp(30px, 5vw, 44px); }
  .lead-bio { margin-top: 7px; font-size: 11px; line-height: 1.5; }
  .lead-profile blockquote { margin-top: 7px; font-size: 12px; }
  .lead-roster-head { margin-bottom: 5px; padding-bottom: 5px; font-size: 11px; }
  .lead-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .lead-option { height: clamp(70px, 21vh, 88px); padding: 4px; grid-template-columns: 32% 1fr; gap: 5px; }
  .lead-option-copy strong { font-size: 14px; }
  .lead-option-copy span { margin-top: 2px; font-size: 9px; }
  .lead-option-copy em { display: none; }
  .lead-footer { padding-top: 5px; }
  .lead-footer p { font-size: 9px; }
  .lead-confirm { min-height: 42px; }
}

/* ---------------- 生涯外观：名号与牌框成长 ---------------- */
#scene-appearance { background: #090807; }
.appearance-bg {
  background:
    linear-gradient(90deg, rgba(8,7,7,.82), rgba(8,7,7,.72)),
    url("../assets/characters/v2/roster-keyart.webp") center 42% / cover no-repeat;
}
.appearance-wrap { gap: var(--gutter); }
.appearance-content {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: minmax(250px,.78fr) minmax(0,1.22fr); gap: var(--gutter);
}
.appearance-preview-panel, .appearance-section {
  min-width: 0; border: 1px solid rgba(216,180,90,.28); border-radius: 16px;
  background: linear-gradient(150deg, rgba(24,20,17,.95), rgba(10,10,11,.96));
  box-shadow: 0 14px 34px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(12px);
}
.appearance-preview-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: clamp(14px,2vmin,22px); }
.appearance-portrait-frame {
  position: relative; width: min(100%, 310px); max-height: 51vh; aspect-ratio: 2 / 3;
  overflow: hidden; border: 2px solid #8c7342; border-radius: 11px;
  background: linear-gradient(145deg,#21190f,#0b0a09);
  box-shadow: 0 18px 38px rgba(0,0,0,.48), inset 0 0 0 4px rgba(246,225,166,.05);
  transition: border-color .22s ease, box-shadow .22s ease;
}
.appearance-portrait-frame::before { content:""; position:absolute; z-index:2; inset:7px; border:1px solid rgba(241,214,145,.4); border-radius:6px; pointer-events:none; }
.appearance-portrait-frame > img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 12%; }
.appearance-frame-corner { position:absolute; z-index:3; right:12px; bottom:12px; display:grid; place-items:center; width:30px; height:30px; border:1px solid rgba(247,223,160,.8); border-radius:50%; color:#f5dfaa; background:rgba(12,9,7,.8); font:700 16px var(--font-cn-display); box-shadow:0 2px 12px rgba(0,0,0,.55); }
.appearance-portrait-frame[data-frame="aged-brass"] { border-color:#d1a45e; box-shadow:0 18px 38px rgba(0,0,0,.48),0 0 24px rgba(204,153,73,.19),inset 0 0 0 4px rgba(241,197,118,.12); }
.appearance-portrait-frame[data-frame="crane-ice"] { border-color:#c2d7df; box-shadow:0 18px 38px rgba(0,0,0,.48),0 0 24px rgba(153,207,229,.16),inset 0 0 0 4px rgba(222,241,247,.13); }
.appearance-portrait-frame[data-frame="storm-jade"] { border-color:#68a899; box-shadow:0 18px 38px rgba(0,0,0,.48),0 0 24px rgba(64,151,132,.18),inset 0 0 0 4px rgba(158,210,185,.1); }
.appearance-portrait-frame[data-frame="violet-holo"] { border-color:#d3b56e; box-shadow:0 18px 38px rgba(0,0,0,.48),0 0 25px rgba(159,113,205,.25),inset 0 0 0 4px rgba(173,128,218,.2); }
.appearance-portrait-frame[data-frame="violet-holo"]::before { border-color:rgba(191,161,229,.58); background:linear-gradient(120deg,transparent 18%,rgba(203,169,244,.1) 46%,transparent 71%); }
.appearance-player-copy { width:min(100%,390px); display:grid; gap:5px; text-align:center; }
.appearance-kicker { color:rgba(218,183,105,.78); font:900 10px/1.4 var(--font-en-logo); letter-spacing:.14em; white-space:nowrap; }
.appearance-player-copy h3 { color:var(--ivory); font:700 clamp(20px,3vmin,28px)/1.2 var(--font-cn-display); letter-spacing:.13em; }
.appearance-player-copy > p:not(.appearance-rule) { color:var(--ivory-dim); font-size:11px; }
.appearance-equipped { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px; }
.appearance-equipped > span { display:grid; gap:4px; padding:8px 9px; border:1px solid rgba(216,180,90,.18); border-radius:9px; background:rgba(0,0,0,.2); }
.appearance-equipped small { color:var(--ivory-faint); font-size:9px; }
.appearance-equipped strong { color:var(--gold-hi); font:600 12px var(--font-cn-display); }
.appearance-rule { margin:3px 0 0; color:rgba(245,239,223,.48); font-size:9px; line-height:1.5; }
.appearance-inventory { display:flex; flex-direction:column; gap:12px; min-height:0; overflow:auto; padding:2px 5px 3px 2px; scrollbar-width:thin; scrollbar-color:rgba(216,180,90,.36) transparent; }
.appearance-section { padding:clamp(12px,1.7vmin,18px); }
.appearance-section > header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.appearance-section > header h3 { margin-top:3px; color:var(--gold-hi); font:700 clamp(17px,2.6vmin,22px) var(--font-cn-display); letter-spacing:.12em; }
.appearance-section > header > span { color:var(--ivory-faint); font-size:10px; text-align:right; }
.appearance-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.appearance-option { position:relative; display:grid; grid-template-columns:40px minmax(0,1fr); align-items:center; gap:9px; min-width:0; min-height:70px; padding:9px 10px; border:1px solid rgba(245,239,223,.13); border-radius:10px; color:var(--ivory); text-align:left; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(0,0,0,.16)); cursor:pointer; transition:border-color .18s ease,background .18s ease,transform .18s ease; }
.appearance-option:hover:not(:disabled) { transform:translateY(-1px); border-color:rgba(231,203,136,.55); }
.appearance-option:focus-visible { outline:2px solid #fff0be; outline-offset:2px; }
.appearance-option.selected { border-color:rgba(229,192,112,.78); background:linear-gradient(145deg,rgba(124,88,39,.24),rgba(0,0,0,.18)); box-shadow:inset 0 0 0 1px rgba(229,192,112,.13); }
.appearance-option.locked { color:rgba(245,239,223,.55); cursor:not-allowed; background:rgba(0,0,0,.15); }
.appearance-seal { display:grid; place-items:center; width:36px; height:36px; border:1px solid rgba(216,180,90,.48); border-radius:50%; color:#efcf88; background:radial-gradient(circle at 35% 30%,rgba(248,227,174,.16),rgba(18,13,8,.92)); font:700 17px var(--font-cn-display); font-style:normal; }
.appearance-swatch { display:block; width:36px; height:42px; border:3px solid #9b8253; border-radius:7px; background:linear-gradient(145deg,#37291a,#100e0b); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 3px 9px rgba(0,0,0,.35); }
.appearance-swatch[data-frame="aged-brass"] { border-color:#d1a45e; background:linear-gradient(145deg,#5a3c1d,#18110a); }
.appearance-swatch[data-frame="crane-ice"] { border-color:#c2d7df; background:linear-gradient(145deg,#314451,#11171b); }
.appearance-swatch[data-frame="storm-jade"] { border-color:#68a899; background:linear-gradient(145deg,#244d42,#101613); }
.appearance-swatch[data-frame="violet-holo"] { border-color:#d3b56e; background:linear-gradient(135deg,#45325d,#17212d 55%,#6e4f87); box-shadow:inset 0 0 0 1px rgba(220,189,245,.35),0 0 10px rgba(159,113,205,.17); }
.appearance-outfit-thumb { display:block; width:36px; height:48px; border:1px solid rgba(216,180,90,.52); border-radius:6px; object-fit:cover; object-position:center 24%; box-shadow:0 3px 9px rgba(0,0,0,.4); }
.appearance-option-copy { display:grid; gap:3px; min-width:0; }
.appearance-option-copy strong { overflow:hidden; color:var(--ivory); font:600 12px var(--font-cn-display); letter-spacing:.045em; text-overflow:ellipsis; white-space:nowrap; }
.appearance-option-copy small { overflow:hidden; color:var(--ivory-faint); font-size:10px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.appearance-option-copy em { color:var(--gold); font-size:10px; font-style:normal; }
.appearance-option.locked .appearance-option-copy em { color:rgba(245,239,223,.4); }
.appearance-equipped-mark { position:absolute; top:5px; right:6px; color:#efd58f; font-size:8px; letter-spacing:.06em; }
.char-card[data-career-frame="aged-brass"] .cc-frame { box-shadow:0 0 18px rgba(204,153,73,.2); }
.char-card[data-career-frame="crane-ice"] .cc-frame { box-shadow:0 0 18px rgba(153,207,229,.19); }
.char-card[data-career-frame="storm-jade"] .cc-frame { box-shadow:0 0 18px rgba(64,151,132,.2); }
.char-card[data-career-frame="violet-holo"] .cc-frame { box-shadow:0 0 20px rgba(159,113,205,.26); }
.cc-career-title { max-width:100%; overflow:hidden; margin-top:3px; color:var(--gold-hi); font-size:9px; letter-spacing:.05em; text-overflow:ellipsis; white-space:nowrap; }
.home-player-actions { display:flex; justify-content:center; gap:7px; margin:-8px auto 10px; }
.home-player-actions .lead-change-link { flex:1 1 0; min-width:0; margin:0; padding:8px 9px; }
.home-player-actions .lead-change-link span { margin-left:4px; }
.records-appearance { color:var(--gold-hi)!important; font-size:10px!important; }
@media (orientation: portrait) {
  .appearance-content { display:flex; flex-direction:column; overflow:auto; padding:2px 3px 8px; }
  .appearance-preview-panel { display:grid; grid-template-columns:minmax(92px, .34fr) minmax(0, .66fr); gap:10px; padding:11px; }
  .appearance-portrait-frame { width:100%; max-height:none; }
  .appearance-player-copy { text-align:left; }
  .appearance-player-copy h3 { font-size:clamp(18px,5vw,24px); }
  .appearance-equipped { grid-template-columns:1fr; gap:5px; }
  .appearance-equipped > span { display:flex; justify-content:space-between; align-items:center; padding:6px 8px; }
  .appearance-rule { font-size:8px; }
  .appearance-section { padding:11px; }
  .appearance-options { gap:6px; }
  .appearance-option { grid-template-columns:34px minmax(0,1fr); min-height:64px; gap:6px; padding:7px; }
  .appearance-seal { width:30px; height:30px; font-size:14px; }
  .appearance-swatch { width:29px; height:35px; }
  .appearance-outfit-thumb { width:29px; height:38px; }
  .appearance-option-copy strong { font-size:11px; }
  .appearance-option-copy small { font-size:9px; }
  .appearance-option-copy em { font-size:9px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .appearance-content { grid-template-columns:minmax(190px,.72fr) minmax(0,1.28fr); gap:10px; }
  .appearance-preview-panel { flex-direction:row; gap:12px; padding:10px; }
  .appearance-portrait-frame { width:auto; height:min(52vh,285px); max-height:none; flex:0 0 auto; }
  .appearance-player-copy { text-align:left; }
  .appearance-equipped { grid-template-columns:1fr; }
  .appearance-option { min-height:58px; padding:6px 8px; }
}
@media (min-width: 1100px) and (min-height: 700px) {
  .appearance-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 380px) and (orientation: portrait) {
  .appearance-options { grid-template-columns:minmax(0,1fr); }
  .home-player-actions { gap:5px; }
  .home-player-actions .lead-change-link { padding:7px 5px; font-size:10px; }
}
@media (prefers-reduced-motion: reduce) {
  .appearance-option { transition:none; }
  .appearance-option:hover:not(:disabled) { transform:none; }
}