/* 外殼畫面（UIUX 第 6 節）：首頁、設定、大廳、說明、單元結果、淘汰、總結、調參。 */

/* 首頁 */
.home-hero { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s8) 0 var(--s4); text-align: center; }
.home-title { font: var(--t-display); letter-spacing: .02em; }
.home-tag { font: var(--t-small); color: var(--muted); }
.home-profile { display: flex; align-items: center; gap: var(--s3); background: var(--surface); border-radius: var(--r-md); padding: var(--s3); }
.home-av { border-radius: var(--r-full); }
.home-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s1); }
.home-name-row { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.home-name { font: var(--t-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-stats { font: var(--t-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.avatar-pick { width: 56px; height: 56px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; border: 2px solid transparent; }
.avatar-pick[data-on="true"] { border-color: var(--accent); }
.dialog-body .avatar-pick { margin: 2px; }

/* 接續卡 */
.resume-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.resume-title { font: var(--t-head); }
.resume-desc { font: var(--t-small); color: var(--muted); }
.resume-main { margin-top: var(--s1); }
.resume-abandon { align-self: center; }

/* 設定 */
.setup .sec-title:first-child { margin-top: 0; }
.game-list { display: flex; flex-direction: column; gap: var(--s2); }
.game-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s3); text-align: left; min-height: 64px; padding: var(--s3); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.game-row[data-on="true"] { border-color: var(--accent); background: var(--raised); }
.game-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.game-title { font: var(--t-head); }
.game-tag { font: var(--t-small); color: var(--muted); }
.game-min { font: var(--t-micro); color: var(--dim); }
.game-check { width: 24px; height: 24px; border-radius: var(--r-full); border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--accent-ink); }
.game-row[data-on="true"] .game-check { background: var(--accent); border-color: var(--accent); }
.game-check svg { width: 16px; height: 16px; }
.estimate { font: var(--t-small); color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.estimate-warn { color: var(--warn); }

/* 大廳 */
.lobby-title { font: var(--t-title); text-align: center; }
.lobby-count { font: var(--t-display); text-align: center; font-variant-numeric: tabular-nums; }
.lobby-hint { font: var(--t-small); color: var(--muted); text-align: center; }
.lobby-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.lobby-slot { aspect-ratio: 1 / 1.15; border-radius: var(--r-md); background: var(--surface); border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; }
.lobby-in { display: flex; flex-direction: column; align-items: center; gap: var(--s1); animation: pop var(--d-base) var(--ease) both; min-width: 0; max-width: 100%; }
.lobby-name { font: var(--t-micro); color: var(--muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.lobby-empty { color: var(--dim); }

/* 說明 */
.help-sec { display: flex; flex-direction: column; gap: var(--s2); background: var(--surface); border-radius: var(--r-md); padding: var(--s4); }
.help-game { font: var(--t-head); }
.help-blurb { font: var(--t-small); color: var(--muted); }
.help-rules { font: var(--t-small); display: flex; flex-direction: column; gap: var(--s1); }
.help-bots, .help-foot { font: var(--t-small); color: var(--muted); }
.hand-table { display: flex; flex-direction: column; gap: var(--s1); }
.hand-row { display: grid; grid-template-columns: 5.5em 1fr; align-items: center; gap: var(--s2); min-height: 44px; }
.hand-name { font: var(--t-small); }
.hand-cards { display: flex; gap: 3px; flex-wrap: wrap; }

/* 單元開場 */
.intro { align-items: center; text-align: center; justify-content: center; }
.intro-of { font: var(--t-micro); color: var(--muted); letter-spacing: .04em; }
.intro-title { font: var(--t-display); }
.intro-blurb { font: var(--t-body); color: var(--muted); }
.intro-rules { text-align: left; font: var(--t-small); display: flex; flex-direction: column; gap: var(--s1); background: var(--surface); border-radius: var(--r-md); padding: var(--s3) var(--s4); }
.intro-elim { font: var(--t-small); color: var(--warn); }
.intro-count { font: 800 64px/1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--accent); }

/* 對局中外殼 */
.game-host { flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: column; }
.bye { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); text-align: center; }
.bye-title { font: var(--t-title); }
.bye-feed { font: var(--t-small); color: var(--muted); }

/* 單元與輪次結果 */
.result, .round { gap: var(--s3); }
.result-mine, .round-me { display: flex; align-items: center; gap: var(--s3); background: var(--surface); border-radius: var(--r-md); padding: var(--s3) var(--s4); }
.big-score { font: var(--t-display); }
.round-feed { display: flex; flex-direction: column; gap: var(--s1); font: var(--t-small); color: var(--muted); }
.round-next { display: flex; align-items: center; gap: var(--s2); background: var(--surface); border-radius: var(--r-md); padding: var(--s3); }
.feedback { font: var(--t-small); color: var(--muted); }

/* 對戰矩陣 */
.matrix-box { display: flex; flex-direction: column; gap: var(--s2); }
.matrix-scroll { overflow-x: auto; max-width: 100%; }
.matrix { border-collapse: collapse; font: var(--t-micro); }
.matrix th, .matrix td { width: 34px; height: 34px; text-align: center; padding: 0; border: 1px solid var(--line); }
.matrix th .avatar { margin: 0 auto; }
.matrix [data-me="true"] { background: var(--raised); }
.matrix-name { text-align: left !important; padding: 0 var(--s2) !important; white-space: nowrap; width: auto !important; font: var(--t-micro); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-full); }
.dot--win { background: var(--ok); }
.dot--lose { background: var(--danger); opacity: .7; }

/* 淘汰 */
.elim { gap: var(--s3); position: relative; }
.elim-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,107,94,.12), transparent 40%); pointer-events: none; }
.elim-line { display: flex; align-items: center; gap: var(--s2); font: var(--t-micro); color: var(--danger); letter-spacing: .04em; }
.elim-line::before, .elim-line::after { content: ""; flex: 1; height: 1px; background: var(--danger); opacity: .6; }
.elim-line-text { white-space: nowrap; }
.elim-out { font: var(--t-title); color: var(--danger); text-align: center; }
.elim-safe { font: var(--t-title); color: var(--ok); text-align: center; }
.elim-actions { display: flex; flex-direction: column; gap: var(--s2); }

/* 觀戰 */
.spectate { gap: var(--s3); }

/* 總結 */
.final { gap: var(--s3); position: relative; }
.final-rank { display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s6) 0 var(--s2); }
.final-crown svg { width: 40px; height: 40px; color: var(--warn); }
.final-rank-num { font: 800 56px/1 var(--font-num); font-variant-numeric: tabular-nums; }
.final-rank[data-tone="gold"] .final-rank-num { color: var(--accent); }
.final-rank[data-tone="warn"] .final-rank-num { color: var(--warn); }
.final-total { font: var(--t-head); color: var(--muted); font-variant-numeric: tabular-nums; }
.final-tier { font: var(--t-small); color: var(--muted); }
.final-game { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s3); align-items: center; background: var(--surface); border-radius: var(--r-md); padding: var(--s3) var(--s4); }
.final-game-title { font: var(--t-body); }
.final-game-rank, .final-game-score { font: 700 16px/1 var(--font-num); font-variant-numeric: tabular-nums; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: fall 1.6s var(--ease) both; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); opacity: .2; } }

/* 手動與調參 */
.manual { gap: var(--s3); }
.manual-text { font: var(--t-small); color: var(--muted); white-space: pre-wrap; }
.tune-fab { position: absolute; right: var(--s3); bottom: calc(var(--s3) + env(safe-area-inset-bottom)); z-index: 45; }
.tune-bar { display: flex; gap: var(--s2); }
.tune-list { display: flex; flex-direction: column; gap: var(--s1); }
.tune-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: var(--s2); align-items: center; min-height: 44px; background: var(--surface); border-radius: var(--r-sm); padding: 0 var(--s2); }
.tune-row[data-changed="true"] { border-left: 3px solid var(--accent); }
.tune-name { font: var(--t-micro); color: var(--muted); word-break: break-all; }
.tune-val { font: 700 14px/1 var(--font-num); font-variant-numeric: tabular-nums; min-width: 3.5em; text-align: right; }
.tune-step { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--raised); font: var(--t-head); }
.tune-reset { font: var(--t-micro); color: var(--muted); }

/* 點頭像設定頁（spec 六.5：音樂開關；Jim 11-13：點頭像就是設定頁） */
.home-av { position: relative; }
.home-av-gear { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: var(--r-full); background: var(--raised); border: 1px solid var(--line); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.home-av-gear svg { width: 14px; height: 14px; }
.set-list { display: flex; flex-direction: column; gap: var(--s3); margin: var(--s3) 0; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 48px; }
.set-row--btns { justify-content: flex-start; flex-wrap: wrap; }
.set-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-label { font: var(--t-head); color: var(--text); }
.set-note { font: var(--t-micro); color: var(--muted); }
.switch { flex: none; width: 52px; height: 30px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); position: relative; transition: background .15s; }
.switch-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: var(--r-full); background: var(--muted); transition: transform .15s, background .15s; }
.switch[aria-checked="true"] { background: color-mix(in srgb, var(--accent) 35%, var(--surface)); border-color: var(--accent); }
.switch[aria-checked="true"] .switch-knob { transform: translateX(22px); background: var(--accent); }

/* 遊戲練習（spec 六.1） */
.practice { display: flex; flex-direction: column; gap: var(--s3); }
.practice .seg { flex-wrap: wrap; }
.pr-note { font: var(--t-small, var(--t-micro)); color: var(--muted); }
.pr-board { position: relative; width: min(100%, 360px); margin: 0 auto; aspect-ratio: var(--cols) / var(--rows); display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); gap: 4px; touch-action: none; }
.pr-cell { display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--raised); font: var(--t-title); font-family: var(--font-num); color: var(--text); user-select: none; }
.pr-cell--blank { background: var(--surface); border: 1px dashed var(--line); }
.pr-cell--hole { background: transparent; }
.pr-marks { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); gap: 4px; pointer-events: none; }
.pr-mark { border: 2px solid var(--info); border-radius: var(--r-sm); background: color-mix(in srgb, var(--info) 14%, transparent); display: flex; align-items: flex-start; justify-content: flex-end; font: var(--t-micro); color: var(--info); padding: 2px 4px; }
.pr-mark--hit { border-color: var(--ok); color: var(--ok); }
.pr-mark--bad { border-color: var(--danger); color: var(--danger); border-style: dashed; }
.pr-mark--ans { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pr-target { text-align: center; font: var(--t-title); }
.pr-kind { text-align: center; font: var(--t-micro); color: var(--muted); }
.pr-answer-row { display: flex; gap: var(--s2); align-items: center; justify-content: center; }
.pr-answer-row .text-input { width: 96px; text-align: center; font: var(--t-title); }
.pr-msg { text-align: center; min-height: 1.5em; font: var(--t-head); }
.pr-msg[data-ok="true"] { color: var(--ok); }
.pr-msg[data-ok="false"] { color: var(--danger); }
.pr-stats { text-align: center; font: var(--t-micro); color: var(--muted); }