/* 卡牌版：手機直式遊戲畫面（375×812 優先）。共用 token 在 /static/shared/tokens.css。 */
:root {
  --blue: #5b9dff;
  --blue-deep: #3d7fe6;
  --pink-deep: #e2527f;
  --lav-deep: #7c5fd6;
  --ink: #3b3150;
  --card-radius: 14px;
  --dock-h: 96px;
  --hand-h: clamp(176px, 27dvh, 250px);
  --table-h: 112px;
  --num-font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
}

html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background:
    radial-gradient(70% 45% at 10% 0%, #ffe1ec 0%, transparent 70%),
    radial-gradient(60% 40% at 100% 20%, #e6e0ff 0%, transparent 70%),
    radial-gradient(80% 50% at 50% 110%, #fff1c9 0%, transparent 70%),
    var(--page);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
button { touch-action: manipulation; }
b, strong { font-weight: 900; }

.app {
  position: relative; height: 100dvh; max-width: 520px; margin: 0 auto;
  display: grid; grid-template-rows: minmax(250px, 1fr) auto var(--table-h) var(--hand-h);   /* 第二列：三拍進度條（沒有題目時高度 0） */
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 560px) {
  .app { box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.12), 0 30px 80px rgba(167, 139, 250, 0.25); border-radius: 0 0 32px 32px; background: rgba(255, 255, 255, 0.35); }
}

/* ── 舞台 ─────────────────────────────── */
.stage { position: relative; overflow: hidden; border-radius: 0 0 34px 34px; box-shadow: 0 10px 30px rgba(167, 139, 250, 0.25); isolation: isolate; }
.stage-bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center 62%;
  background-image: radial-gradient(70% 55% at 50% 30%, #fffaf0 0%, transparent 70%), linear-gradient(180deg, #ffe6f0 0%, #f4ecff 55%, #fff6ea 100%);
  transition: filter 0.4s ease;
}
body[data-stage="theater"] .stage-bg:not(.has-img) { background-image: radial-gradient(70% 55% at 50% 30%, #fffbe6 0%, transparent 70%), linear-gradient(180deg, #f3e6ff 0%, #ffe6f2 55%, #fff4e0 100%); }
body[data-stage="judges"] .stage-bg:not(.has-img) { background-image: radial-gradient(70% 55% at 50% 30%, #fff6d6 0%, transparent 70%), linear-gradient(180deg, #ffeccc 0%, #ffe1ee 55%, #efe6ff 100%); }
body.is-busy .stage-bg { filter: saturate(1.15) brightness(1.03); }
#stageCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; z-index: -1; cursor: grab; }
#stageCanvas:active { cursor: grabbing; }
.stage-vignette { position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(167, 120, 200, 0.22) 100%); }

/* ── HUD 頂部 ─────────────────────────── */
.hud-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 10px) 12px 0; pointer-events: none;
}
.hud-top > * { pointer-events: auto; }
.hud-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stage-nodes {
  display: inline-flex; align-items: center; gap: 0; padding: 4px 12px 4px 5px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(167, 139, 250, 0.22);
}
.stage-node { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #f1eaf6; font-size: 14px; flex: none; position: relative; }
.stage-node.locked .node-icon { filter: grayscale(1); opacity: 0.45; }
.stage-node.current { background: linear-gradient(135deg, #ffd36b, #ff9ebc); box-shadow: 0 0 0 3px #fff, 0 0 14px 4px rgba(255, 158, 188, 0.8); animation: node-glow 1.6s ease-in-out infinite; }
.stage-node.cleared { background: var(--mint); color: #fff; font-weight: 900; }
.stage-node.failed { background: var(--critical); color: #fff; font-weight: 900; }
.node-link { width: 10px; height: 4px; border-radius: 2px; background: #eadff0; flex: none; }
.node-link.on { background: linear-gradient(90deg, var(--mint), #ffd36b); }
.stage-name { margin-left: 8px; font-size: 13px; font-weight: 900; white-space: nowrap; }
@keyframes node-glow { 50% { box-shadow: 0 0 0 3px #fff, 0 0 22px 8px rgba(255, 211, 107, 0.85); } }
.traits { display: flex; gap: 6px; }
.traits:empty { display: none; }
.trait-chip { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; background: linear-gradient(135deg, #fff4d1, #ffe3ec); box-shadow: 0 3px 10px rgba(255, 158, 188, 0.35); font-size: 17px; padding: 0; }
.hud-right { display: flex; align-items: center; gap: 8px; }
.total-pill {
  display: flex; align-items: center; gap: 4px; height: 38px; padding: 0 14px 0 10px; border-radius: 999px;
  background: linear-gradient(135deg, #fff2c2, #ffd36b); box-shadow: 0 3px 0 #f0b93f, 0 6px 16px rgba(240, 185, 63, 0.35);
  font-size: 15px;
}
.total-pill strong { font-family: var(--num-font); font-size: 21px; font-variant-numeric: tabular-nums; color: #7a4a00; }
.round-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.92); box-shadow: 0 3px 0 #eadff0, 0 6px 14px rgba(167, 139, 250, 0.25); font-size: 18px; padding: 0; color: var(--ink); }

/* ── 評審 ─────────────────────────────── */
.judge { position: absolute; right: 10px; top: calc(env(safe-area-inset-top) + 60px); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.judge-avatar {
  width: 66px; height: 66px; border-radius: 50%; padding: 0; border: 3px solid #fff; overflow: hidden; position: relative;
  background: radial-gradient(circle at 50% 35%, #fff 0%, #fff4d1 70%); box-shadow: 0 6px 18px rgba(167, 139, 250, 0.35);
  display: grid; place-items: center;
}
.judge-avatar .art-emoji { font-size: 34px; }
.judge-avatar .art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12) translateY(4%); }
.judge-avatar.has-img .art-emoji, .has-img > .art-emoji { visibility: hidden; }
.judge-name { font-size: 10px; font-weight: 800; color: var(--text-secondary); background: rgba(255, 255, 255, 0.85); padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.judge-bubble {
  position: absolute; right: 74px; top: 4px; width: max-content; max-width: min(200px, 52vw);
  background: #fff; border-radius: 18px 18px 4px 18px; padding: 8px 13px;
  font-size: 14px; font-weight: 800; line-height: 1.35; box-shadow: 0 6px 18px rgba(167, 139, 250, 0.3);
  transform-origin: 100% 80%;
}
.judge-bubble::after { content: ""; position: absolute; right: -7px; bottom: 6px; border: 7px solid transparent; border-left-color: #fff; border-right: 0; }
.boss-rule {
  position: absolute; right: 10px; top: calc(env(safe-area-inset-top) + 156px); z-index: 3; max-width: min(64%, 260px);
  display: flex; gap: 5px; align-items: flex-start; text-align: left;
  border: 2px solid #ffd36b; border-radius: 14px; padding: 5px 9px; background: rgba(255, 248, 225, 0.95);
  font-size: 11.5px; font-weight: 800; line-height: 1.35; color: #6b4a10; box-shadow: 0 4px 12px rgba(240, 185, 63, 0.3);
}

/* ── 舞台工具 ─────────────────────────── */
.stage-tools { position: absolute; left: 12px; right: 10px; bottom: calc(var(--dock-h) + 6px); z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.stage-tools > * { pointer-events: auto; }
.posture-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px 4px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 3px 10px rgba(167, 139, 250, 0.22); font-size: 12px; font-weight: 800; }
.posture-icon { font-size: 18px; }
.posture-chip.low { background: rgba(232, 240, 255, 0.92); color: var(--blue-deep); }
.tool-col { display: flex; flex-direction: column; gap: 7px; margin-left: auto; }
.tool-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, 0.9); box-shadow: 0 3px 0 #eadff0, 0 4px 10px rgba(167, 139, 250, 0.22); font-size: 15px; color: var(--ink); }
.tool-btn.fresh { box-shadow: 0 0 0 3px rgba(255, 211, 107, 0.7), 0 4px 10px rgba(167, 139, 250, 0.22); }
.prompt-pop {
  position: absolute; right: 54px; bottom: calc(var(--dock-h) + 50px); z-index: 4; max-width: min(250px, 68%);
  background: #fff; border-radius: 16px 16px 4px 16px; padding: 8px 12px; box-shadow: 0 8px 22px rgba(120, 80, 140, 0.25);
  display: flex; flex-direction: column; gap: 2px; animation: pop-in 0.2s ease; cursor: pointer;
}
.prompt-label { font-size: 10px; font-weight: 800; color: var(--pink); }
.prompt-en { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--ink); overflow-wrap: anywhere; user-select: text; }

/* ── 生成中 ───────────────────────────── */
.busy-fx { position: absolute; left: 0; right: 0; top: 34%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.busy-notes { display: flex; gap: 8px; height: 30px; }
.busy-notes i { font-style: normal; font-size: 22px; font-weight: 900; color: var(--pink); text-shadow: 0 2px 0 #fff; animation: hop-note 1.1s ease-in-out infinite; }
.busy-notes i:nth-child(2) { color: #ffb800; animation-delay: 0.12s; }
.busy-notes i:nth-child(3) { color: var(--lavender); animation-delay: 0.24s; }
.busy-notes i:nth-child(4) { color: var(--blue); animation-delay: 0.36s; }
.busy-notes i:nth-child(5) { color: var(--mint); animation-delay: 0.48s; }
@keyframes hop-note { 0%, 100% { transform: translateY(4px) rotate(-10deg) scale(0.9); opacity: 0.6; } 50% { transform: translateY(-10px) rotate(10deg) scale(1.15); opacity: 1; } }
.busy-pill { display: flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 6px 16px rgba(167, 139, 250, 0.3); font-size: 15px; font-weight: 900; }
.busy-dot { width: 12px; height: 12px; border-radius: 50%; background: conic-gradient(var(--pink), #ffd36b, var(--lavender), var(--blue), var(--pink)); animation: spin 0.8s linear infinite; }
.busy-time { font-family: var(--num-font); font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.busy-fx.failed .busy-pill { color: var(--critical); }
.busy-fx.failed .busy-notes { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.composing {
  position: absolute; left: 14px; right: 14px; top: 30%; z-index: 3;
  background: rgba(255, 255, 255, 0.95); border-radius: 22px; padding: 10px 14px 12px;
  box-shadow: 0 10px 26px rgba(167, 139, 250, 0.3); text-align: center;
}
.composing-notes { display: flex; justify-content: center; gap: 10px; height: 24px; }
.composing-notes i { font-style: normal; font-size: 19px; color: var(--lavender); animation: hop-note 1.4s ease-in-out infinite; }
.composing-notes i:nth-child(2) { color: var(--pink); animation-delay: 0.2s; }
.composing-notes i:nth-child(3) { color: #e0a800; animation-delay: 0.4s; }
.composing-notes i:nth-child(4) { animation-delay: 0.6s; }
.composing-title { font-weight: 900; font-size: 15px; }
.composing-text { font-size: 12px; color: var(--text-secondary); margin-top: 3px; min-height: 1.4em; max-height: 4.4em; overflow: hidden; overflow-wrap: anywhere; font-family: ui-monospace, "SF Mono", Menlo, monospace; }

.replay-caption {
  position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 56px); transform: translateX(-50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: calc(100% - 24px);
  padding: 8px 16px; border-radius: 18px; background: rgba(59, 49, 80, 0.82); color: #fff; text-align: center; font-size: 13px; pointer-events: none;
}
.replay-exit { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-h) + 10px); z-index: 4; }
body.replaying .score-dock, body.replaying .stage-tools .tool-col > :not(#playBtn) { visibility: hidden; }

/* ── 中央彈出（連招、特質、本段分） ───── */
.center-pop { position: absolute; left: 0; right: 0; top: 30%; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.pop-ribbon {
  display: flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 999px; white-space: nowrap;
  background: #fff; border: 3px solid var(--lavender); box-shadow: 0 6px 0 rgba(124, 95, 214, 0.25), 0 10px 22px rgba(167, 139, 250, 0.35);
  font-size: 16px; font-weight: 900;
}
.pop-ribbon.kind-combo { border-color: var(--mint); }
.pop-ribbon.kind-streak { border-color: #ffd36b; }
.pop-ribbon.kind-trait { border-color: var(--pink); }
.pop-ribbon.kind-boss { border-color: #ffb800; background: #fff8e1; }
.pop-ribbon.miss { border-color: #c9c0d6; color: var(--text-secondary); }
.pop-icon { font-size: 20px; }
.pop-delta { color: var(--pink-deep); font-family: var(--num-font); }
.pop-ribbon.total { border: 0; background: none; box-shadow: none; padding: 0; gap: 6px; }
.pop-eq { font-size: 34px; font-weight: 900; color: #fff; -webkit-text-stroke: 2px var(--lav-deep); paint-order: stroke; }
.pop-total {
  font-family: var(--num-font); font-size: 64px; line-height: 1; color: #fff;
  -webkit-text-stroke: 3px var(--pink-deep); paint-order: stroke; text-shadow: 0 6px 0 rgba(226, 82, 127, 0.35), 0 0 24px rgba(255, 211, 107, 0.8);
}
.pop-ribbon.total.big .pop-total { font-size: 84px; color: #fff6cc; }
.pop-ribbon.total.miss .pop-total { -webkit-text-stroke-color: #a69cb6; text-shadow: none; }
.pop-ribbon.big:not(.total) { font-size: 22px; border-color: #ffd36b; }

/* ── 即興輸入 ─────────────────────────── */
.improv-bubble {
  position: absolute; left: 12px; right: 56px; bottom: calc(var(--dock-h) + 8px); z-index: 5;
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px;
  background: #fff; box-shadow: 0 0 0 3px rgba(255, 211, 107, 0.8), 0 8px 20px rgba(167, 139, 250, 0.3);
  animation: pop-in 0.25s ease;
}
.improv-icon { font-size: 20px; }
.improv-bubble input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 16px; font-weight: 700; background: transparent; color: var(--ink); user-select: text; -webkit-user-select: text; }
.improv-count { font-family: var(--num-font); font-size: 11px; color: var(--text-muted); }

/* ── 計分板（動作分 × 倍率）與進度條 ─── */
.score-dock { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 3; display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.plate { display: flex; justify-content: center; align-items: center; gap: 8px; transition: opacity 0.2s ease; }
.plate-box {
  position: relative; min-width: 104px; height: 54px; padding: 4px 14px 0; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff;
  transition: transform 0.28s cubic-bezier(.34, 1.56, .64, 1);
}
.plate-box.chips { background: linear-gradient(180deg, #7fb6ff, var(--blue)); box-shadow: 0 5px 0 var(--blue-deep), 0 10px 20px rgba(91, 157, 255, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.5); }
.plate-box.mult { background: linear-gradient(180deg, #ff9ebc, var(--pink)); box-shadow: 0 5px 0 var(--pink-deep), 0 10px 20px rgba(255, 111, 156, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.5); }
.plate-box small { position: absolute; top: 3px; font-size: 9.5px; font-weight: 800; opacity: 0.88; letter-spacing: 0.05em; }
.plate-box strong { font-family: var(--num-font); font-size: 29px; line-height: 1; margin-top: 8px; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.12); display: inline-block; }
.plate-x { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--lav-deep); font-size: 20px; font-weight: 900; box-shadow: 0 3px 0 #e4d8f2; }
.plate.preview .plate-box { opacity: 0.78; }
.plate.preview .plate-box::after { content: "?"; position: absolute; right: -6px; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: var(--lav-deep); font-size: 12px; font-weight: 900; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); }
.plate.empty .plate-box { filter: saturate(0.55); opacity: 0.85; }
.plate.slam .plate-box.chips { transform: translateX(24px) scale(1.12) rotate(-4deg); }
.plate.slam .plate-box.mult { transform: translateX(-24px) scale(1.12) rotate(4deg); }
.plate.slam .plate-x { transform: scale(0); transition: transform 0.2s ease; }
.progress { display: flex; align-items: center; gap: 8px; }
.progress-track { position: relative; flex: 1; height: 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); box-shadow: inset 0 2px 3px rgba(167, 139, 250, 0.25), 0 2px 8px rgba(167, 139, 250, 0.18); overflow: hidden; }
.progress-fill, .progress-ghost { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width 0.9s cubic-bezier(.34, 1.3, .64, 1); }
.progress-fill { background: linear-gradient(90deg, var(--mint), #ffd36b 60%, var(--pink)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55); }
.progress-ghost { background: repeating-linear-gradient(-45deg, rgba(255, 211, 107, 0.45) 0 6px, rgba(255, 211, 107, 0.2) 6px 12px); }
.progress.reached .progress-fill { background: linear-gradient(90deg, #ffd36b, #ffb800); box-shadow: 0 0 12px rgba(255, 184, 0, 0.8); }
.progress-num { display: flex; align-items: baseline; gap: 2px; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); font-family: var(--num-font); font-size: 12px; color: var(--text-secondary); white-space: nowrap; box-shadow: 0 2px 6px rgba(167, 139, 250, 0.2); }
.progress-num strong { font-size: 15px; color: var(--ink); display: inline-block; }
.progress-sep { opacity: 0.5; }

/* ── 出牌區 ───────────────────────────── */
.table { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 12px 0; z-index: 2; }
.badges { display: flex; flex-direction: column; gap: 4px; }
.badge {
  position: relative; width: 34px; height: 30px; border-radius: 12px; border: 0; padding: 0;
  display: grid; place-items: center; font-size: 15px; background: #fff; box-shadow: 0 3px 0 #eadff0, 0 4px 10px rgba(167, 139, 250, 0.2);
}
.badge b { position: absolute; right: -7px; top: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--pink); color: #fff; font-family: var(--num-font); font-size: 11px; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; }
#playsBadge b { background: var(--blue); }
#reshootBtn b { background: var(--lavender); }
.badge.on { background: #fff4d1; box-shadow: 0 0 0 3px #ffd36b; }
.badge:disabled { opacity: 1; filter: grayscale(0.9); }
.badge:disabled b { background: #c9c0d6; }
.sockets { display: flex; align-items: flex-end; gap: 7px; }
.socket {
  position: relative; padding: 0; border: 0; border-radius: 13px; background: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 0 0 2.5px rgba(167, 139, 250, 0.55), inset 0 0 18px rgba(167, 139, 250, 0.25);
  display: grid; place-items: center; transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.socket-action { width: 70px; height: 98px; box-shadow: inset 0 0 0 2.5px rgba(91, 157, 255, 0.6), inset 0 0 18px rgba(91, 157, 255, 0.25); }
.socket-mod { width: 56px; height: 78px; box-shadow: inset 0 0 0 2.5px rgba(255, 111, 156, 0.55), inset 0 0 18px rgba(255, 111, 156, 0.22); }
.socket:not(.filled) { animation: socket-breathe 2.4s ease-in-out infinite; }
.socket.off { opacity: 0.35; animation: none; }
.socket-ph { font-size: 11px; font-weight: 900; color: var(--text-muted); }
.socket-action .socket-ph::before { content: "💃"; display: block; font-size: 20px; text-align: center; opacity: 0.6; }
.socket-mod .socket-ph::before { content: "✨"; display: block; font-size: 16px; text-align: center; opacity: 0.6; }
.table.drop-hot .socket:not(.filled) { box-shadow: inset 0 0 0 3px #ffd36b, 0 0 18px 4px rgba(255, 211, 107, 0.7); transform: scale(1.06); }
@keyframes socket-breathe { 50% { background: rgba(255, 255, 255, 0.8); } }
.socket .gcard { width: 100%; height: 100%; }
.socket.pending .gcard-body { filter: saturate(0.6) brightness(1.05); }
.socket.pending .gcard-body::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.8) 50%, transparent 70%); background-size: 250% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.socket.lit-hit { box-shadow: 0 0 0 3px #ffd36b, 0 0 22px 6px rgba(255, 211, 107, 0.85); transform: translateY(-4px) scale(1.05); }
.socket.lit-partial { box-shadow: 0 0 0 3px var(--lavender), 0 0 16px 3px rgba(167, 139, 250, 0.7); transform: translateY(-2px); }
.socket.lit-miss .gcard-body { filter: grayscale(1) brightness(0.92); opacity: 0.6; }
.socket.lit-hit::after, .socket.lit-partial::after, .socket.lit-miss::after {
  position: absolute; right: -6px; top: -8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 900; color: #fff; box-shadow: 0 0 0 2px #fff; z-index: 2;
}
.socket.lit-hit::after { content: "✓"; background: var(--good); }
.socket.lit-partial::after { content: "◐"; background: var(--warning); color: #3b2a00; }
.socket.lit-miss::after { content: "✕"; background: #b8b0c8; }
.socket.flash .gcard { animation: card-flip 0.5s cubic-bezier(.34, 1.4, .64, 1); }
@keyframes card-flip { 0% { transform: perspective(400px) rotateY(0) scale(1); } 45% { transform: perspective(400px) rotateY(90deg) scale(1.15); } 100% { transform: perspective(400px) rotateY(0) scale(1); } }

.go-btn {
  position: relative; width: 80px; height: 80px; flex: none; border-radius: 50%; border: 0; padding: 0; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #ffc0d4 0%, var(--pink) 55%, #f04f84 100%);
  box-shadow: 0 6px 0 var(--pink-deep), 0 12px 22px rgba(255, 111, 156, 0.45), inset 0 3px 0 rgba(255, 255, 255, 0.5);
  color: #fff; display: grid; place-items: center;
}
.go-label { position: relative; font-size: 19px; font-weight: 900; letter-spacing: 0.04em; text-shadow: 0 2px 0 rgba(170, 30, 80, 0.35); }
.go-btn:disabled { opacity: 1; background: radial-gradient(circle at 35% 30%, #f6f0fa 0%, #ddd2ea 100%); box-shadow: 0 6px 0 #c4b6d6, 0 8px 16px rgba(167, 139, 250, 0.2); color: #a69cb6; }
.go-btn:disabled .go-label { text-shadow: none; }
.go-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--pink-deep), 0 6px 12px rgba(255, 111, 156, 0.45); }
.go-btn.ready { animation: go-pulse 1.3s ease-in-out infinite; }
@keyframes go-pulse { 50% { box-shadow: 0 6px 0 var(--pink-deep), 0 0 0 8px rgba(255, 111, 156, 0.22), 0 12px 26px rgba(255, 111, 156, 0.6), inset 0 3px 0 rgba(255, 255, 255, 0.5); } }
.go-shine { position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 255, 255, 0.55) 80%, transparent 90%); opacity: 0; }
.go-btn.working .go-shine { opacity: 1; animation: spin 1.1s linear infinite; }
.go-btn.working .go-label { font-size: 14px; }
.go-btn.swap { background: radial-gradient(circle at 35% 30%, #fff2c2 0%, #ffd36b 60%, #f5b83d 100%); box-shadow: 0 6px 0 #d9a020, 0 12px 22px rgba(245, 184, 61, 0.45); color: #6b4a10; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.go-btn.swap .go-label { text-shadow: none; font-size: 20px; }
.go-btn.swap b { font-family: var(--num-font); font-size: 13px; }
.mini-x { position: absolute; right: 8px; top: 2px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); font-size: 13px; padding: 0; }
.table-hint { position: absolute; left: 50%; bottom: -6px; transform: translate(-50%, 50%); z-index: 6; pointer-events: none; padding: 3px 12px; border-radius: 999px; background: #fff4d1; font-size: 12px; font-weight: 800; white-space: nowrap; box-shadow: 0 3px 8px rgba(240, 185, 63, 0.3); }
.skip-pill { position: absolute; left: 50%; top: -4px; transform: translate(-50%, -100%); z-index: 4; }

/* ── 手牌 ─────────────────────────────── */
.hand { position: relative; z-index: 3; --card-w: 96px; --card-h: 134px; }
.hand-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--text-muted); font-weight: 800; }
.hand .gcard.size-hand { position: absolute; left: 50%; top: 18px; width: var(--card-w); height: var(--card-h); margin-left: calc(var(--card-w) / -2); touch-action: none; }
.hand.locked .gcard { cursor: default; }
.deck-pile { position: absolute; left: 10px; bottom: 10px; width: 40px; height: 56px; z-index: 1; }
.deck-back { position: absolute; inset: 0; border-radius: 8px; border: 2px solid #fff; background: repeating-linear-gradient(45deg, #c9b8f5 0 6px, #ffb3cb 6px 12px); box-shadow: 0 2px 6px rgba(124, 95, 214, 0.3); }
.deck-back:nth-child(2) { transform: translate(-3px, -3px) rotate(-4deg); }
.deck-back:nth-child(3) { transform: translate(-6px, -6px) rotate(-8deg); }
.deck-count { position: absolute; right: -8px; bottom: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--num-font); font-size: 12px; font-weight: 900; line-height: 22px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.deck-count:empty { display: none; }

/* ── 卡牌 ─────────────────────────────── */
.gcard { position: relative; display: block; padding: 0; border: 0; background: none; color: var(--ink); perspective: 520px; font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.gcard:active:not(:disabled) { transform: none; }
.gcard-body {
  --rx: 0deg; --ry: 0deg; --mx: 30%; --my: 15%;
  position: absolute; inset: 0; display: block; overflow: hidden; border-radius: var(--card-radius);
  background: #fff; border: 3px solid #f1e6f7;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.18s ease, filter 0.2s ease, opacity 0.2s ease;
  box-shadow: 0 1px 0 #efe5f6, 0 2px 0 #e6d9f0, 0 3px 0 #dccdea, 0 4px 0 #d2c1e4, 0 5px 0 #c8b5de, 0 10px 18px rgba(124, 95, 214, 0.28);
}
.gcard-art {
  position: absolute; left: 0; right: 0; top: 0; bottom: 25%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #fff 0%, #ffeaf2 55%, #e6e0ff 100%);
}
.kind-modifier .gcard-art { background: radial-gradient(circle at 50% 38%, #fff 0%, #fff4d1 55%, #d9f5ec 100%); }
.kind-improv .gcard-art { background: radial-gradient(circle at 50% 38%, #fff 0%, #ffe3ec 45%, #ffd36b 100%); }
.art-emoji { font-size: calc(var(--card-w, 96px) * 0.42); line-height: 1; filter: drop-shadow(0 3px 0 rgba(124, 95, 214, 0.18)); }
.gcard-art .art-img { position: absolute; inset: 2px 0 0; width: 100%; height: calc(100% - 2px); object-fit: contain; pointer-events: none; }
.gcard-name {
  position: absolute; left: 0; right: 0; bottom: 0; height: 25%; display: flex; align-items: center; justify-content: center; padding: 0 6px;
  font-size: calc(var(--card-w, 96px) * 0.15); font-weight: 900; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden;
  background: linear-gradient(180deg, #fff, #fff7fb); border-top: 2px solid #f6eef9;
}
.gcard-value {
  position: absolute; left: 4px; top: 4px; z-index: 1; min-width: calc(var(--card-w, 96px) * 0.3); height: calc(var(--card-w, 96px) * 0.3); padding: 0 5px;
  border-radius: 999px; display: flex; align-items: baseline; justify-content: center; gap: 1px;
  font-family: var(--num-font); font-size: calc(var(--card-w, 96px) * 0.16); line-height: calc(var(--card-w, 96px) * 0.3); font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #7fb6ff, var(--blue)); box-shadow: 0 2px 0 var(--blue-deep), 0 0 0 2px #fff;
}
.gcard-value small { font-size: 0.65em; font-weight: 900; }
.kind-modifier .gcard-value, .kind-improv .gcard-value { background: linear-gradient(180deg, #ff9ebc, var(--pink)); box-shadow: 0 2px 0 var(--pink-deep), 0 0 0 2px #fff; }
.gcard-icons { position: absolute; right: 4px; top: 4px; z-index: 1; padding: 1px 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); font-size: calc(var(--card-w, 96px) * 0.12); line-height: 1.3; box-shadow: 0 1px 4px rgba(124, 95, 214, 0.2); }
.gcard-sheen {
  position: absolute; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: soft-light;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.85), transparent 45%),
    linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.7) 48%, transparent 60%);
  background-size: 100% 100%, 300% 100%; background-position: 0 0, 120% 0;
  animation: sheen 5.5s ease-in-out infinite;
}
@keyframes sheen { 0%, 70% { background-position: 0 0, 130% 0; } 100% { background-position: 0 0, -60% 0; } }
.rarity-advanced .gcard-body { border-color: #c4b0ff; box-shadow: 0 1px 0 #e0d6ff, 0 2px 0 #d3c5ff, 0 3px 0 #c4b0ff, 0 4px 0 #b39cf7, 0 5px 0 #a78bfa, 0 0 14px rgba(167, 139, 250, 0.55), 0 10px 18px rgba(124, 95, 214, 0.28); }
.rarity-rare .gcard-body { border-color: #ffd36b; box-shadow: 0 1px 0 #ffe6a3, 0 2px 0 #ffdc85, 0 3px 0 #ffd36b, 0 4px 0 #f5c24f, 0 5px 0 #f0b93f, 0 0 18px rgba(255, 211, 107, 0.8), 0 10px 18px rgba(240, 185, 63, 0.35); }
.rarity-rare .gcard-name { background: linear-gradient(180deg, #fffbea, #fff1c7); }
.gcard-ribbon {
  position: absolute; left: 50%; top: -12px; transform: translateX(-50%); z-index: 3; max-width: 130%;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(90deg, var(--mint), #6fd6b5); color: #fff; font-size: 11px; font-weight: 900;
  box-shadow: 0 0 0 2px #fff, 0 0 12px 2px rgba(63, 191, 152, 0.7); animation: ribbon-glow 1.4s ease-in-out infinite;
}
.gcard-warn {
  position: absolute; left: 4px; bottom: 30%; transform: rotate(-4deg); z-index: 3; max-width: 64%;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: #fff4d1; color: #8a5a00; font-size: 10.5px; font-weight: 900;
  box-shadow: 0 0 0 2px #ffd36b, 0 4px 10px rgba(240, 185, 63, 0.35); pointer-events: none;
}
.gcard.posture-hard .gcard-art { filter: saturate(0.75); }
.tip-warn.posture { color: #8a5a00; background: #fff4d1; }
@keyframes ribbon-glow { 50% { box-shadow: 0 0 0 2px #fff, 0 0 20px 5px rgba(63, 191, 152, 0.9); } }
.gcard.blocked .gcard-body { filter: grayscale(0.95); opacity: 0.55; }
.gcard.blocked::after { content: "🚫"; position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); font-size: 28px; z-index: 4; pointer-events: none; }
.gcard.marked .gcard-body { border-color: var(--critical); }
.gcard.marked::after { content: "🔁"; position: absolute; right: -6px; top: -8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff4d1; box-shadow: 0 0 0 2px #ffd36b; font-size: 14px; z-index: 4; }
.hand.discarding .gcard:not(.marked) .gcard-body { filter: saturate(0.7); }
.gcard.dragging { z-index: 50 !important; }
.gcard.dragging .gcard-body { box-shadow: 0 2px 0 #e6d9f0, 0 4px 0 #d2c1e4, 0 22px 30px rgba(124, 95, 214, 0.4); }
@media (hover: hover) {
  .hand:not(.locked) .gcard.size-hand:hover .gcard-body { transform: translateY(-12px) rotateX(var(--rx)) rotateY(var(--ry)); }
}
.gcard:focus-visible { outline: none; }
.gcard:focus-visible .gcard-body { box-shadow: 0 0 0 3px var(--blue), 0 10px 18px rgba(124, 95, 214, 0.28); }

/* 尺寸 */
.gcard.size-mini { --card-w: 56px; --card-radius: 10px; }
.socket-action .gcard.size-mini { --card-w: 70px; }
.gcard.size-mini .gcard-body { border-width: 2px; box-shadow: 0 1px 0 #e6d9f0, 0 2px 0 #d2c1e4, 0 5px 10px rgba(124, 95, 214, 0.25); }
.gcard.size-mini .gcard-icons { display: none; }
.hand .gcard-name { justify-content: flex-start; padding-left: 9px; }
.gcard.size-mini .gcard-value { left: 2px; top: 2px; box-shadow: 0 0 0 1.5px #fff; }
.gcard.size-offer { --card-w: 104px; width: 104px; height: 146px; }

/* ── 長按說明 ─────────────────────────── */
.card-tip {
  position: fixed; z-index: 70; padding: 12px 14px; border-radius: 20px; background: #fff;
  box-shadow: 0 14px 34px rgba(90, 60, 130, 0.3); pointer-events: none; transform-origin: 50% 100%;
}
.tip-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tip-head strong { font-size: 18px; }
.tip-kind { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #e8f0ff; color: var(--blue-deep); }
.tip-kind.kind-modifier { background: var(--pink-soft); color: var(--pink-deep); }
.tip-kind.kind-improv { background: var(--sunny-soft); color: #8a5a00; }
.tip-text { margin: 4px 0 6px; font-size: 14px; color: var(--text-secondary); }
.tip-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { padding: 2px 8px; border-radius: 999px; background: var(--lavender-soft); color: var(--lav-deep); font-size: 11px; font-weight: 800; }
.chip.cat { background: var(--sunny-soft); color: #7a5600; }
.tip-value { margin-top: 6px; font-size: 13px; font-weight: 900; color: var(--pink-deep); }
.tip-warn { margin-top: 4px; font-size: 12px; font-weight: 800; color: var(--critical); }

/* ── 飛行層、粒子 ─────────────────────── */
.fly-layer { position: fixed; inset: 0; z-index: 65; pointer-events: none; overflow: hidden; }
.fly-ghost { position: absolute; margin: 0; z-index: 1; }
.fly-num {
  position: absolute; padding: 3px 11px; border-radius: 999px; font-family: var(--num-font); font-size: 20px; font-weight: 900; color: #fff;
  background: var(--blue); box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(0, 0, 0, 0.15); white-space: nowrap;
}
.fly-num.mult { background: var(--pink); }
.fly-num.neg { background: #9a8fb0; }
.fly-num.total { background: linear-gradient(90deg, #ffd36b, #ffb800); color: #6b4a10; }
.spark { position: absolute; font-weight: 900; pointer-events: none; text-shadow: 0 0 6px rgba(255, 255, 255, 0.9); }
.bump { animation: bump 0.6s ease; }

/* ── 全螢幕畫面 ───────────────────────── */
.screen {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; overflow-y: auto;
  padding: calc(env(safe-area-inset-top) + 20px) 16px calc(env(safe-area-inset-bottom) + 20px);
  background: radial-gradient(80% 60% at 50% 30%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 233, 243, 0.92) 60%, rgba(233, 226, 255, 0.95) 100%);
  backdrop-filter: blur(6px);
}
.screen-inner { width: 100%; max-width: 400px; margin: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.screen h2 { margin: 0; font-size: 28px; font-weight: 900; letter-spacing: 0.02em; }
.screen-kicker { font-size: 15px; font-weight: 900; color: var(--pink-deep); padding: 4px 14px; border-radius: 999px; background: #fff; box-shadow: 0 3px 10px rgba(255, 111, 156, 0.2); }
.screen-text { margin: 0; color: var(--text-secondary); font-size: 14px; font-weight: 700; }
.screen-hero { font-size: 64px; }
.screen-actions { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 6px; }
.big-btn {
  min-width: 220px; height: 58px; padding: 0 28px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #ff8fb1, var(--pink)); color: #fff; font-size: 19px; font-weight: 900; letter-spacing: 0.03em;
  box-shadow: 0 6px 0 var(--pink-deep), 0 12px 24px rgba(255, 111, 156, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.45);
}
.big-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--pink-deep), 0 6px 14px rgba(255, 111, 156, 0.4); }
.big-btn:disabled { background: linear-gradient(180deg, #efe7f6, #ddd2ea); box-shadow: 0 6px 0 #c4b6d6; color: #a69cb6; opacity: 1; }
.pill-btn { border: 0; border-radius: 999px; padding: 10px 18px; min-height: 44px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 800; box-shadow: 0 4px 0 #eadff0, 0 6px 14px rgba(167, 139, 250, 0.2); }
.pill-btn.emph { box-shadow: 0 0 0 3px #ffd36b, 0 4px 0 #eadff0; animation: go-pulse 1.4s ease-in-out infinite; }
.pill-btn.wide { width: 100%; margin-top: 12px; }
.ring {
  --pct: 0; position: relative; width: 190px; height: 190px; border-radius: 50%;
  background: conic-gradient(var(--pink) calc(var(--pct) * 360deg), #f3e8f8 0);
  display: grid; place-items: center; box-shadow: 0 12px 30px rgba(255, 111, 156, 0.25);
  transition: --pct 1s ease;
}
.ring::before { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 4px 10px rgba(167, 139, 250, 0.15); }
.ring.reached { background: conic-gradient(#ffd36b calc(var(--pct) * 360deg), #f3e8f8 0); box-shadow: 0 0 40px rgba(255, 211, 107, 0.7); }
.ring-num { position: relative; display: flex; flex-direction: column; align-items: center; font-family: var(--num-font); }
.ring-num strong { font-size: 52px; line-height: 1; }
.ring-num small { font-size: 16px; color: var(--text-muted); font-weight: 800; }

/* 評審登場 */
.boss-screen { background: radial-gradient(70% 55% at 50% 35%, #8f6fe0 0%, #5b3fa8 55%, #352466 100%); color: #fff; overflow: hidden; }
.boss-rays { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.07) 0 10deg, transparent 10deg 20deg); animation: spin 30s linear infinite; pointer-events: none; }
.boss-screen .screen-inner { position: relative; }
.boss-kicker { font-size: 14px; font-weight: 900; color: #ffd36b; letter-spacing: 0.1em; }
.boss-portrait {
  position: relative; width: 190px; height: 190px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #fff 0%, #fff4d1 70%); border: 6px solid #ffd36b;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.25), 0 0 60px rgba(255, 211, 107, 0.7);
}
.boss-portrait .art-emoji { font-size: 96px; }
.boss-portrait .art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08) translateY(4%); }
.boss-screen h2 { font-size: 30px; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.2); }
.boss-rule-card { padding: 10px 16px; border-radius: 18px; background: #fff8e1; color: #6b4a10; font-size: 15px; font-weight: 900; box-shadow: 0 6px 0 #d9a020; max-width: 320px; }
.boss-quote { position: relative; padding: 8px 16px; border-radius: 18px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 800; }
.boss-screen .big-btn { background: linear-gradient(180deg, #ffe08a, #ffc23d); color: #5b3a00; box-shadow: 0 6px 0 #c98f12, 0 12px 26px rgba(255, 194, 61, 0.5); margin-top: 6px; }

/* 獎勵 */
.reward-screen .screen-inner { gap: 10px; }
.boss-banner { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 360px; padding: 8px 12px; border: 0; border-radius: 18px; background: linear-gradient(90deg, #6f52c4, #8f6fe0); color: #fff; text-align: left; box-shadow: 0 5px 0 #4b3394; }
.bb-avatar { position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; overflow: hidden; background: #fff4d1; display: grid; place-items: center; border: 2px solid #ffd36b; }
.bb-avatar .art-emoji { font-size: 24px; }
.bb-avatar .art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bb-body { display: flex; flex-direction: column; min-width: 0; }
.bb-name { font-size: 14px; font-weight: 900; }
.bb-rule { font-size: 12px; font-weight: 700; opacity: 0.92; }
.offers { display: flex; justify-content: center; gap: 10px; margin: 10px 0 6px; min-height: 160px; perspective: 900px; }
.offer { position: relative; width: 104px; height: 146px; padding: 0; border: 0; background: none; transition: translate 0.25s cubic-bezier(.34, 1.56, .64, 1), scale 0.25s cubic-bezier(.34, 1.56, .64, 1), opacity 0.2s ease; }
.offer.picked { translate: 0 -14px; scale: 1.07; }
.offer.picked .offer-front { box-shadow: 0 0 0 4px #ffd36b, 0 0 26px 6px rgba(255, 211, 107, 0.8); border-radius: 16px; }
.offer.dim { opacity: 0.55; scale: 0.94; }
.flipper { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform 0.6s cubic-bezier(.34, 1.4, .64, 1); }
.offer.revealed .flipper { transform: rotateY(0); }
.offer-front, .offer-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.offer-back {
  transform: rotateY(180deg); border-radius: 16px; border: 4px solid #fff; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.5), transparent 60%), repeating-linear-gradient(45deg, #b8a2f5 0 10px, #ff9ebc 10px 20px);
  box-shadow: 0 5px 0 #a78bfa, 0 12px 22px rgba(124, 95, 214, 0.35);
}
.ob-mark { font-family: var(--num-font); font-size: 52px; font-weight: 900; color: #fff; text-shadow: 0 3px 0 rgba(124, 95, 214, 0.5); }
.offer-front .gcard { width: 100%; height: 100%; }
.trait-tile {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 6px;
  border-radius: 16px; border: 3px solid #ffd36b; background: radial-gradient(circle at 50% 30%, #fff 0%, #fff4d1 70%, #ffe3ec 100%);
  box-shadow: 0 5px 0 #f0b93f, 0 0 16px rgba(255, 211, 107, 0.6); color: var(--ink);
}
.tt-icon { font-size: 40px; }
.tt-kind { font-size: 9px; font-weight: 900; color: #a06d00; letter-spacing: 0.1em; }
.tt-name { font-size: 16px; font-weight: 900; }
.tt-text { font-size: 10.5px; font-weight: 700; color: var(--text-secondary); line-height: 1.3; }
.reward-alt { display: flex; gap: 10px; justify-content: center; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 12px 8px; width: 100%; max-height: 46dvh; overflow-y: auto; padding: 10px 4px; }
.picker-grid .gcard.size-mini { --card-w: 62px; width: 62px; height: 87px; justify-self: center; }
.picker-grid .gcard:disabled { opacity: 0.35; }
.picker-grid .gcard.picked .gcard-body { box-shadow: 0 0 0 3px var(--critical), 0 0 14px rgba(208, 59, 59, 0.5); }
.picker-grid .trait-tile { position: relative; min-height: 120px; }
.picker-grid .trait-tile.picked { box-shadow: 0 0 0 3px var(--critical); }

/* 局末 */
.end-art { position: relative; width: 210px; height: 210px; border-radius: 34px; overflow: hidden; display: grid; place-items: center; background: #fffaf0; box-shadow: 0 14px 34px rgba(255, 111, 156, 0.3), 0 0 0 5px #fff; }
.end-art .art-emoji { font-size: 110px; }
.end-art .art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.end-screen.won .end-art { box-shadow: 0 0 0 5px #ffd36b, 0 0 50px rgba(255, 211, 107, 0.8); }
.end-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.stat-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 18px; background: #fff; box-shadow: 0 4px 0 #eadff0, 0 8px 16px rgba(167, 139, 250, 0.18); min-width: 0; }
.st-icon { font-size: 24px; }
.st-value { font-family: var(--num-font); font-size: 22px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.end-combos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.combo-chip { padding: 4px 12px; border-radius: 999px; background: var(--mint-soft); color: #1f7a5d; font-size: 13px; font-weight: 900; }

/* 換幕 */
.curtain { position: fixed; inset: 0; z-index: 60; pointer-events: none; display: grid; place-items: center; }
.curtain-half {
  position: absolute; top: 0; bottom: 0; width: 51%;
  background: repeating-linear-gradient(90deg, #ff7fa6 0 18px, #ff9ebc 18px 30px, #f06792 30px 40px);
  box-shadow: inset 0 -30px 40px rgba(170, 30, 80, 0.25);
  transition: transform 0.55s cubic-bezier(.7, 0, .3, 1);
}
.curtain-half.left { left: 0; transform: translateX(-102%); border-radius: 0 0 40px 0; }
.curtain-half.right { right: 0; transform: translateX(102%); border-radius: 0 0 0 40px; }
.curtain.closed { pointer-events: auto; }
.curtain.closed .curtain-half { transform: translateX(0); }
.curtain-card {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 30px; border-radius: 28px;
  background: #fff; box-shadow: 0 16px 40px rgba(170, 30, 80, 0.35); opacity: 0; transition: opacity 0.25s ease;
}
.curtain.closed .curtain-card { opacity: 1; }
.curtain.open .curtain-card { opacity: 0 !important; }
.curtain-icon { font-size: 44px; }
.curtain-card strong { font-size: 24px; }
#curtainSub { font-family: var(--num-font); font-size: 18px; font-weight: 900; color: var(--pink-deep); }

/* ── 對話框 ───────────────────────────── */
dialog { border-radius: 30px; }
dialog.confirm { width: min(320px, calc(100% - 40px)); text-align: center; }
.confirm-icon { font-size: 44px; }
dialog.confirm p { color: var(--text-secondary); font-size: 14px; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; }
.confirm-actions .big-btn { min-width: 0; flex: 1; height: 48px; font-size: 16px; }
.confirm-actions .pill-btn { flex: 1; }
dialog.intro { width: min(400px, calc(100% - 28px)); max-height: 92dvh; overflow-y: auto; text-align: center; }
.intro-art { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #ffe3ec, #efe9ff); margin-bottom: 10px; }
.intro-art .art-emoji { font-size: 64px; }
.intro-art .art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-steps { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.intro-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 18px; background: var(--surface-2); font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.intro-steps b { color: var(--ink); }
.is-icon { font-size: 26px; flex: none; }
dialog.intro .big-btn { width: 100%; margin-top: 6px; }
dialog.menu { margin: calc(env(safe-area-inset-top) + 56px) max(12px, calc(50vw - 248px)) auto auto; }

/* 看數據抽屜 */
dialog.drawer {
  width: 100%; max-width: min(640px, 100%); max-height: 90dvh; margin: auto auto 0; overflow-y: auto;
  padding: 14px max(16px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 16px) max(16px, env(safe-area-inset-left));
  border-radius: 28px 28px 0 0; background: var(--page); animation: slide-up 0.3s cubic-bezier(.2, .8, .2, 1);
  user-select: text; -webkit-user-select: text;
}
@keyframes slide-up { from { transform: translateY(100%); } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer-head h2 { margin: 0; font-size: 20px; }
.drawer-top { display: flex; gap: 10px; margin: 10px 0; }
.mini-stage { flex: none; width: 112px; height: 150px; border-radius: 20px; border: 3px solid #fff; background: linear-gradient(180deg, #ffeef4 0%, #f3efff 100%); box-shadow: 0 10px 28px rgba(167, 139, 250, 0.3); }
.drawer-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.drawer-side .seg-toggle { align-self: flex-start; }
.drawer-side .seg-toggle button { min-height: 40px; }
.seg-strip { display: flex; flex-wrap: wrap; gap: 6px; max-height: 106px; overflow-y: auto; padding: 2px; }
.turn-chip { flex: none; display: flex; align-items: center; gap: 6px; min-height: 40px; max-width: 100%; border: 0; background: var(--surface-1); box-shadow: var(--shadow); border-radius: 999px; padding: 5px 12px; font-size: 12px; }
.turn-chip span.t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.turn-chip[aria-current="true"] { background: var(--pink); color: #fff; }
.turn-chip .n { opacity: 0.7; font-variant-numeric: tabular-nums; }
.seg-detail { background: var(--surface-1); border-radius: 18px; padding: 12px; box-shadow: var(--shadow); margin-bottom: 8px; }
.seg-detail:empty { display: none; }
.detail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.detail-head h3 { margin: 0; font-size: 15px; }
.detail-total { color: var(--pink); white-space: nowrap; }
.detail-prompt { margin: 0 0 8px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.detail-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.detail-list.steps { border-top: 1px dashed var(--border); padding-top: 8px; }
.detail-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 8px; align-items: center; font-size: 13px; }
.detail-badge { grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--surface-2); }
.detail-row.hit .detail-badge { background: var(--good); color: #fff; }
.detail-row.partial .detail-badge { background: var(--warning); color: #0b0b0b; }
.detail-row.miss .detail-badge { background: var(--critical); color: #fff; }
.detail-sub { grid-column: 2; font-size: 11px; color: var(--text-secondary); }
.detail-formula { margin: 0; text-align: right; font-weight: 800; color: var(--pink); }

/* ── 提示 ─────────────────────────────── */
.toast { z-index: 80; bottom: calc(var(--hand-h) + 20px + env(safe-area-inset-bottom)); text-align: center; font-weight: 700; }
body.screen-open .toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
.net-banner {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 8px); transform: translateX(-50%); z-index: 90; max-width: calc(100% - 32px);
  background: rgba(40, 40, 40, 0.88); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; pointer-events: none;
}
@keyframes pop-in { from { transform: scale(0.6); opacity: 0; } }
@keyframes bump { 35% { transform: scale(1.25) rotate(-4deg); } 70% { transform: scale(0.95) rotate(2deg); } }

/* 沒有 GSAP 時手牌位置用 CSS 過場 */
body.no-gsap .hand .gcard.size-hand { transition: transform 0.35s cubic-bezier(.34, 1.4, .64, 1), opacity 0.25s ease; }

/* ── 短螢幕 ───────────────────────────── */
@media (max-height: 700px) {
  :root { --dock-h: 88px; --table-h: 100px; --hand-h: clamp(160px, 25dvh, 200px); }
  .socket-action { width: 62px; height: 86px; }
  .socket-mod { width: 50px; height: 70px; }
  .socket-action .gcard.size-mini { --card-w: 62px; }
  .gcard.size-mini { --card-w: 50px; }
  .go-btn { width: 72px; height: 72px; }
  .judge-avatar { width: 56px; height: 56px; }
  .plate-box { height: 48px; min-width: 92px; }
  .plate-box strong { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-node.current, .socket:not(.filled), .go-btn.ready, .gcard-ribbon, .gcard-sheen, .busy-notes i, .composing-notes i, .boss-rays, .pill-btn.emph { animation: none; }
  .flipper, .offer, .plate-box, .progress-fill, .curtain-half { transition-duration: 0.01s; }
}
.plate.suspense .plate-box strong { animation: suspense 0.9s ease-in-out infinite; }
.plate.suspense .plate-box.mult strong { animation-delay: 0.45s; }
@keyframes suspense { 50% { transform: translateY(-4px) scale(1.15) rotate(-6deg); } }
body.replaying .table, body.replaying .hand { opacity: 0.35; pointer-events: none; filter: saturate(0.6); transition: opacity 0.3s ease; }
@media (min-width: 560px) {
  body::before { content: ""; position: fixed; inset: -60px; z-index: -1; background: var(--stage-art, none) center / cover no-repeat; filter: blur(28px) saturate(1.15); opacity: 0.5; pointer-events: none; }
}
.wiggle { animation: wiggle 0.4s ease; }
@keyframes wiggle { 20% { translate: -7px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 2px 0; } }
.gcard-name.long { font-size: calc(var(--card-w, 96px) * 0.125); letter-spacing: 0; }
body.improv-open .stage-tools { visibility: hidden; }

/* ── 導演出題：三拍進度條 ─────────────── */
.beat-tracker {
  position: relative; z-index: 2; display: flex; align-items: stretch; gap: 6px; padding: 8px 12px 0; min-width: 0;
}
.beat-tracker.empty { height: 0; padding: 0; overflow: hidden; visibility: hidden; }
.bt-pill {
  position: relative; flex: 1 1 0; min-width: 0; height: 44px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; gap: 2px 4px;
  padding: 3px 7px; border-radius: 16px; background: rgba(255, 255, 255, 0.78); border: 2px solid transparent;
  box-shadow: 0 3px 0 #eadff0; font-size: 11px; font-weight: 800; color: var(--text-secondary);
  transition: flex-grow 0.35s ease, background 0.3s ease;
}
.bt-num { flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: #f1eaf6; font-size: 10px; font-weight: 900; color: var(--lav-deep); }
.bt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-pill.todo { opacity: 0.8; }
.bt-pill.done.hit { border-color: var(--mint); background: var(--mint-soft); }
.bt-pill.done.partial { border-color: #ffd36b; background: var(--sunny-soft); }
.bt-pill.done.miss { border-color: #d9d2e6; }
.bt-pill.done.hit .bt-num { background: var(--mint); color: #fff; }
.bt-pill.done.partial .bt-num { background: #ffd36b; color: #7a4a00; }
.bt-pill.done.miss .bt-num { background: #c9c0d6; color: #fff; }
.bt-lights { flex-basis: 100%; display: flex; justify-content: center; gap: 4px; height: 9px; }
.bt-light { width: 9px; height: 9px; border-radius: 50%; background: #d9d2e6; }
.bt-light.hit { background: var(--mint); box-shadow: 0 0 6px 1px rgba(63, 191, 152, 0.7); }
.bt-light.partial { background: #ffc23d; box-shadow: 0 0 6px 1px rgba(255, 194, 61, 0.7); }
.bt-pill.current {
  flex-grow: 2.6; height: 52px; flex-wrap: nowrap; justify-content: flex-start; gap: 6px; padding: 4px 8px 4px 6px;
  background: linear-gradient(135deg, #fff4d1, #ffe3ec); border-color: #fff; color: var(--ink); font-size: 14px; font-weight: 900;
  box-shadow: 0 0 0 2px #ffd36b, 0 4px 14px rgba(255, 158, 188, 0.45); animation: bt-glow 2s ease-in-out infinite;
}
.bt-pill.current .bt-num { width: 20px; height: 20px; font-size: 12px; background: var(--pink); color: #fff; }
.bt-pill.current .bt-name { flex: 1 1 auto; }
.bt-icons { flex: none; display: flex; gap: 4px; margin-left: auto; }
.bt-icon {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid #eadff0;
  font-size: 17px; line-height: 1; user-select: none; -webkit-user-select: none; touch-action: manipulation; transition: filter 0.3s ease;
}
.bt-icon.big { width: 38px; height: 38px; font-size: 22px; }
.bt-icon.small { width: 22px; height: 22px; font-size: 12px; border-width: 1.5px; }
.bt-icon.hit { border-color: var(--mint); background: var(--mint-soft); box-shadow: 0 0 10px 2px rgba(63, 191, 152, 0.65); }
.bt-icon.partial { border-color: #ffc23d; background: var(--sunny-soft); box-shadow: 0 0 8px 1px rgba(255, 194, 61, 0.6); }
.bt-icon.miss { filter: grayscale(1) opacity(0.5); }
.bt-tag {
  position: absolute; top: -9px; right: 10px; padding: 1px 9px; border-radius: 999px; background: var(--pink); color: #fff;
  font-size: 11px; font-weight: 900; box-shadow: 0 2px 6px rgba(255, 111, 156, 0.5);
}
@keyframes bt-glow { 50% { box-shadow: 0 0 0 2px #ffd36b, 0 4px 20px rgba(255, 158, 188, 0.8); } }

/* ── 導演的題目卡 ─────────────────────── */
.theme-screen { z-index: 44; background: radial-gradient(80% 60% at 50% 25%, rgba(255, 250, 225, 0.96) 0%, rgba(255, 224, 238, 0.95) 60%, rgba(229, 222, 255, 0.97) 100%); }
.theme-kicker { font-size: 15px; font-weight: 900; color: #fff; padding: 5px 16px; border-radius: 999px; background: linear-gradient(135deg, var(--lavender), var(--pink)); box-shadow: 0 4px 12px rgba(167, 139, 250, 0.4); }
.theme-judge { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.theme-judge-avatar {
  position: relative; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; border: 4px solid #fff;
  background: radial-gradient(circle at 50% 35%, #fff 0%, #fff4d1 70%); box-shadow: 0 8px 22px rgba(167, 139, 250, 0.45);
}
.theme-judge-avatar .art-emoji { font-size: 44px; }
.theme-judge-avatar .art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12) translateY(4%); }
.theme-judge-name { font-size: 11px; font-weight: 800; color: var(--text-secondary); background: rgba(255, 255, 255, 0.9); padding: 1px 9px; border-radius: 999px; }
.screen h2.theme-title {
  font-size: clamp(34px, 11.5vw, 48px); line-height: 1.15; font-weight: 900; color: #fff; padding: 0 6px; overflow-wrap: anywhere;
  -webkit-text-stroke: 4px var(--lav-deep); paint-order: stroke; text-shadow: 0 6px 0 rgba(124, 95, 214, 0.3), 0 0 26px rgba(255, 211, 107, 0.9);
}
.theme-mood { margin: 0; max-width: 320px; padding: 8px 16px; border-radius: 18px; background: #fff; font-size: 15px; font-weight: 800; line-height: 1.4; color: var(--text-secondary); box-shadow: 0 4px 0 #eadff0, 0 8px 18px rgba(167, 139, 250, 0.2); }
.theme-beats { list-style: none; margin: 4px 0 6px; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.theme-beat { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 8px; border-radius: 20px; background: #fff; box-shadow: 0 4px 0 #eadff0, 0 8px 16px rgba(167, 139, 250, 0.18); text-align: left; }
.tb-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--lavender), var(--pink)); color: #fff; font-weight: 900; font-size: 15px; }
.tb-name { flex: 1; min-width: 0; font-size: 18px; font-weight: 900; overflow-wrap: anywhere; }
.tb-icons { flex: none; display: flex; gap: 6px; }

/* ── 你 vs 導演 ───────────────────────── */
.versus { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-width: 520px; margin: 0 auto; pointer-events: none; }
.vs-panel {
  position: relative; pointer-events: auto; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px calc(env(safe-area-inset-bottom) + 12px); border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, #fff 0%, #fff3f8 100%); box-shadow: 0 -10px 30px rgba(167, 139, 250, 0.35);
}
.vs-labels { position: absolute; left: 0; right: 0; top: -34px; height: 28px; pointer-events: none; }
.vs-tag { position: absolute; top: 0; transform: translateX(-50%); padding: 3px 14px; border-radius: 999px; font-size: 14px; font-weight: 900; box-shadow: 0 3px 10px rgba(167, 139, 250, 0.35); }
.vs-tag.you { left: 32%; background: var(--blue); color: #fff; }
.vs-tag.dir { left: 68%; background: rgba(214, 246, 236, 0.92); color: #1f7a5d; border: 2px dashed #7fd7bb; }
.versus.solo .vs-tag.you { left: 50%; }
.vs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vs-head h2 { font-size: 20px; font-weight: 900; }
.vs-score { display: flex; align-items: baseline; gap: 6px; font-family: var(--num-font); font-size: 24px; font-weight: 900; }
.vs-score span { color: var(--text-muted); font-size: 16px; }
.vs-score .you { color: var(--blue-deep); }
.vs-score .dir { color: #2b9a77; }
.vs-rows { display: flex; flex-direction: column; gap: 5px; }
.vs-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; align-items: center; padding: 5px 8px; border-radius: 14px; background: #faf5ff; border: 2px solid transparent; transition: background 0.25s ease, border-color 0.25s ease; }
.vs-row.active { background: var(--sunny-soft); border-color: #ffd36b; }
.vs-beat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vs-bname { font-size: 13px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-icons { display: flex; gap: 3px; }
.vs-bars { display: flex; flex-direction: column; gap: 4px; }
.vs-bar { position: relative; height: 14px; border-radius: 999px; background: #eee6f5; overflow: hidden; }
.vs-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; transition: width 0.9s cubic-bezier(.2, .9, .3, 1.15); }
.vs-bar.you i { background: linear-gradient(90deg, #9cc7ff, var(--blue)); }
.vs-bar.dir i { background: linear-gradient(90deg, #a6ebd3, #7fd7bb); }
.vs-bar b { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font-family: var(--num-font); font-size: 10px; font-weight: 900; color: var(--ink); }
.vs-bar.wait i { width: 100% !important; opacity: 0.55; background: repeating-linear-gradient(45deg, #cdeee2 0 8px, #f1fbf7 8px 16px); background-size: 22.6px 22.6px; animation: vs-stripes 0.9s linear infinite; }
@keyframes vs-stripes { to { background-position: 22.6px 0; } }
.versus.solo .vs-row { grid-template-columns: 112px minmax(0, 1fr); }
.vs-badges { display: flex; justify-content: center; gap: 10px; }
.vs-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; font-size: 14px; font-weight: 900; }
.vs-badge small { font-family: var(--num-font); font-size: 12px; }
.vs-badge.on { background: linear-gradient(135deg, #fff2c2, #ffd36b); color: #7a4a00; box-shadow: 0 3px 0 #f0b93f, 0 6px 14px rgba(240, 185, 63, 0.4); }
.vs-badge.off { background: #f3eef8; color: var(--text-muted); border: 2px dashed #ddd2ea; padding: 3px 10px; }
.vs-badge.off .vs-b-icon { filter: grayscale(1); opacity: 0.5; }
.vs-wait { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 900; color: #2b9a77; }
.vs-wait.fail { color: var(--text-secondary); font-size: 13px; }
.vs-notes { display: inline-flex; gap: 3px; }
.vs-notes i { font-style: normal; font-size: 16px; color: var(--lavender); animation: hop-note 1.2s ease-in-out infinite; }
.vs-notes i:nth-child(2) { color: var(--pink); animation-delay: 0.2s; }
.vs-notes i:nth-child(3) { color: #e0a800; animation-delay: 0.4s; }
.vs-panel .big-btn { align-self: center; height: 50px; font-size: 17px; }
body.versus-open .judge, body.versus-open .boss-rule, body.versus-open .stage-tools, body.versus-open .score-dock, body.versus-open .busy-fx, body.versus-open .center-pop { display: none; }
body.versus-open .table, body.versus-open .hand { visibility: hidden; }

/* ── 過關獎勵、局末的契合資訊 ─────────── */
.bonus-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.bonus-title { padding: 4px 12px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 900; color: var(--lav-deep); box-shadow: 0 3px 0 #eadff0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bonus-chip { padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 900; background: linear-gradient(135deg, #fff2c2, #ffd36b); color: #7a4a00; box-shadow: 0 3px 0 #f0b93f; }
.end-themes { width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.et-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; font-size: 14px; }
.et-beat { padding: 2px 10px; border-radius: 999px; background: linear-gradient(135deg, #fff2c2, #ffd36b); color: #7a4a00; font-size: 12px; font-weight: 900; }
.et-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 #eadff0; }
.et-row.won { box-shadow: 0 0 0 2px #ffd36b, 0 3px 0 #eadff0; }
.et-icon { font-size: 18px; }
.et-title { font-size: 14px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-scores { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--num-font); font-size: 11px; font-weight: 900; line-height: 1.3; }
.et-you { color: var(--blue-deep); }
.et-dir { color: #2b9a77; }
.et-marks { display: flex; gap: 2px; min-width: 18px; font-size: 16px; }

@media (max-height: 700px) {
  .bt-pill { height: 40px; } .bt-pill.current { height: 46px; }
  .vs-panel { gap: 6px; padding-top: 10px; }
  .vs-row { padding: 3px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .bt-pill.current, .vs-bar.wait i, .vs-notes i { animation: none; }
  .vs-bar i { transition-duration: 0.01s; }
}