/* ══ 介面修正（2026-09-29） ══
   最後載入，只放覆寫。牌面換圖不在這裡。 */

/* 數字一律用等高數字：Cormorant 預設的舊式數字 0 像 o、1 像 I（檔案、結算、商店、選級別都會出現）。
   各處的 font: 簡寫會把 font-variant-numeric 與 font-feature-settings 都重設回 normal，所以不能只設在 #stage 靠繼承，要直接套到每個元件。
   用 font-feature-settings 而不是 font-variant-numeric：其他樣式都沒用到它，不會蓋掉既有的 tabular-nums。 */
#stage, #stage * { font-feature-settings: "lnum" 1; }

/* 公共牌只發了幾張時，空位之間會露出浮水印的殘字（翻牌後剩「A D」）。桌上一有公共牌就淡出浮水印。 */
.tv-felt-mark { transition: opacity .6s var(--ease-out, ease-out); }
#table:has(.tv-slot .card) .tv-felt-mark { opacity: 0; }

/* 建立牌手：「會／不會」是選項，不能和送出的「確認」長得一樣（原本選中時同為紅色主按鈕）。
   選中＝細框＋金字＋左側菱形；主按鈕維持紅色。菱形絕對定位，不佔文字寬度，文字仍在正中央。 */
.know-row .toggle.toggle { color: #a8987c; }
.know-row .toggle.toggle[aria-pressed='true'] { --frame: var(--btn-slim); --pl: var(--slim-l); --pm: var(--slim-m); --pr: var(--slim-r); --slice: 44; --cap: .256; color: #f3dca3; text-shadow: 0 0 10px #e0b86a66; }
.know-row .toggle.toggle { position: relative; }
.know-row .toggle[aria-pressed='true']::before { content: ''; position: absolute; left: 12px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: var(--gem) center / contain no-repeat; }
/* 橫式：確認鈕原本緊貼選項（間距 0）、離舞台下緣只剩 3px。收緊欄位標題與牌背縮圖，讓確認鈕與上下都留出空間。 */
body:not(.portrait) #create .field-label { margin: 10px 0 6px; }
body:not(.portrait) #create .back-grid .back-choice { padding: 6px; }
body:not(.portrait) #create .back-grid .back-choice .card { width: 40px; height: 58px; }
body:not(.portrait) #create .create-panel .btn-primary { margin-top: 18px; }

/* 結算：上方是雕花牌匾，下方原本是四個各自獨立的平面圓角框，風格接不起來。
   改成一張有金色細框的帳單：列與列之間用淡金分隔線，上緣中央一顆菱形飾件，和牌匾、彈窗同一套語彙。列與列之間仍留 6px，不貼齊。 */
.result-box .result-rows { position: relative; gap: 6px; padding: 6px 30px; border-radius: 3px;
  background: linear-gradient(180deg, #0e0b08f2, #17110cf2);
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 5px #0e0b08, inset 0 0 0 6px #5a4529, 0 0 0 1px #8a6c3e99, 0 14px 34px #000b; }
.result-box .result-rows::before { content: ''; position: absolute; left: 50%; top: -8px; width: 16px; height: 16px; transform: translateX(-50%); background: var(--gem) center / contain no-repeat; filter: drop-shadow(0 1px 2px #000); }
.result-box .result-rows > div { background: none; box-shadow: none; border-radius: 0; padding: 11px 4px; align-items: baseline;
  border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, #0000, #8a6c3e80 20%, #8a6c3e80 80%, #0000) 1; }
.result-box .result-rows > div:last-child { border-bottom: 0; }
body .result-box .result-rows > div { padding-block: 8px; }
.result-box .result-rows dt { color: #b3a384; }
/* 新紀錄合成一列（原本一條一列，冠軍加兩條紀錄時整個結算比 900 高出 124px，按鈕被擠出畫面）。 */
.result-box .result-rows > .record { align-items: center; gap: 16px; }
.result-box .result-rows .record dt { flex: none; }
.result-box .result-rows .record dd { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; font-size: 18px; }
.result-box .record-item { display: inline-flex; align-items: center; gap: 8px; }
.result-box .record-item img { width: 30px; }
/* 橫式：名次牌匾縮小，讓最長的情況（冠軍＋新紀錄）也留在畫面內。 */
body:not(.portrait) .result-place.victory { width: 520px; margin-bottom: 14px; }
body:not(.portrait) .result-place.defeat { width: 470px; margin-bottom: 14px; }
body:not(.portrait) .result-box .quote { margin-top: 14px; }

/* 出局字卡（BUSTED）：「最終名次 #6」正好落在自己的底牌上，三層疊在一起難讀。
   播放期間自己的底牌褪暗，名次那行墊一層柔和的暗底；攤牌牌匾仍在最上層，看得到是被什麼牌淘汰。 */
.tv-hero-cards { transition: filter .6s ease-out; }
#table:has(.wfx.bust:not([hidden])) .tv-hero-cards { filter: brightness(.32) saturate(0); }
.wfx.bust .wfx-amount { padding: 10px 40px; border-radius: 50%; background: radial-gradient(closest-side, #000e 30%, #000a 70%, #0000); }

/* 空狀態（排行榜、遇見紀錄、賽季冊）：置中的圖示＋說明＋前往牌桌，上下各一條淡金飾線。 */
.empty-state { display: grid; justify-items: center; gap: 14px; margin: 18px auto 8px; padding: 26px 40px 30px; max-width: 560px; text-align: center; }
.empty-state::before, .empty-state::after { content: ''; width: 260px; max-width: 80%; height: 12px; background: var(--divider) center / 100% 100% no-repeat; opacity: .8; }
.empty-state::before { order: -1; }
.empty-state img { width: 64px; height: 64px; object-fit: contain; opacity: .85; filter: drop-shadow(0 4px 10px #000c); }
.empty-state p { margin: 0; font: 18px/1.7 var(--tc); color: #bfae8e; text-wrap: balance; }
.empty-state .btn-primary { margin-top: 6px; min-width: 220px; }
.empty-state::after { order: 9; }
body.portrait .empty-state img { width: 84px; height: 84px; }
body.portrait .empty-state p { font-size: 24px; }
/* 大廳「今日檔案」沒有消息時：蠟封＋一句說明這裡會記什麼。 */
.feed-empty { display: flex; align-items: center; gap: 14px; }
.feed-empty img { width: 46px; height: 46px; flex: none; opacity: .7; filter: saturate(.7) drop-shadow(0 3px 6px #000c); }
.lobby-side .today .feed-empty .empty small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.6; color: #8f8069; }

/* 商店肖像框：原本只是頭像外一圈 2px 色線（outline），比免費介面還樸素，不像能收藏的東西。
   改用既有的方形雕花框素材疊在頭像上：赤紅＝原色＋紅光，鎏金＝同一張調成金色。拍立得樣式的檔案頭像維持原本的色線。 */
:is(.frame-gold, .frame-crimson) > .portrait:not(.polaroid, .level-framed) { position: relative; outline: 0; overflow: visible; }
:is(.frame-gold, .frame-crimson) > .portrait:not(.polaroid, .level-framed)::after { content: ''; position: absolute; inset: -16% -18%; pointer-events: none;
  background: url('../assets/ui/frame-basic.webp') center / 100% 100% no-repeat; }
.frame-gold > .portrait:not(.polaroid, .level-framed) { box-shadow: 0 0 22px #e0b04a40; }
.frame-gold > .portrait:not(.polaroid, .level-framed)::after { filter: sepia(1) saturate(2.4) hue-rotate(-6deg) brightness(1.45) contrast(1.05) drop-shadow(0 0 6px #f0c46e55); }
.frame-crimson > .portrait:not(.polaroid, .level-framed) { box-shadow: 0 0 24px #b0203a55; }
.frame-crimson > .portrait:not(.polaroid, .level-framed)::after { filter: saturate(1.5) brightness(1.1) drop-shadow(0 0 7px #d0284866); }

/* 橫式加注滑桿原本只剩約 80px 可拖：同一列還有一個金額框，但「加注至 N」按鈕上已顯示同一個數字。
   橫式拿掉重複的金額框、預設下注鈕略窄，滑桿約寬兩倍半；± 鈕與方向鍵微調照舊。 */
body:not(.portrait) .tv-slider output { display: none; }
body:not(.portrait) .tv-sizes > button { min-width: 80px; }

/* ══ 手機直式（body.phone：舞台縮放 < 0.6，由 main.js 的 fit() 判斷；?phone 強制開啟） ══
   900 寬的舞台在 390 寬的手機上只剩 0.43 倍：設計座標要 25px 以上，實際才有 11px。
   這裡只放大字級與觸控目標，不動座位座標；phone-tall（舞台下延 ≥ 240）另外把操作列改兩排。 */

/* 牌桌：HUD */
/* 一行放不下「第 1 手 盲注 25 / 50 Lv 1 · 8 手後升盲」（原本文字超出牌匾下緣 30px）：改成置中兩行、高度隨內容。 */
body.portrait.phone .tv-hud-left { --h: 60px; height: auto; min-height: 60px; font-size: 24px; max-width: 470px; flex-wrap: wrap; justify-content: center; align-content: center; gap: 2px 16px; padding-block: 8px; line-height: 1.3; }
body.portrait.phone .tv-hud-left b { font-size: 26px; }
body.portrait.phone .tv-hud-right { gap: 14px; }
body.portrait.phone .tv-hud-right .icon-btn { width: 66px; height: 66px; }
body.portrait.phone .tv-leave.ghost-btn { --h: 66px; font-size: 24px; min-width: 130px; }
/* 牌桌：座位。名牌、籌碼數字、動作標籤、下注、底池的方塊尺寸維持直式原值（頭像位置、彼此間距、與攤牌牌匾的距離都是照原尺寸調的），
   只放大裡面的字。方塊一變大就會擠到鄰居（頭像↔動作標籤 2.5px、頭像↔底牌 2.7px、籌碼數字壓到攤牌牌匾 -1px 等都是這樣來的）。 */
body.portrait.phone .tv-name.tv-name { font-size: 26px; }
body.portrait.phone .tv-seat.hero .tv-name.tv-name { font-size: 29px; }
body.portrait.phone .tv-stack.tv-stack { font-size: 27px; }
body.portrait.phone .tv-seat.hero .tv-stack.tv-stack { font-size: 30px; }
body.portrait.phone .tv-badge.tv-badge { font-size: 24px; }
body.portrait.phone .tv-ai { transform: scale(1.9); }
/* 牌桌：中央 */
body.portrait.phone .tv-bet span { font-size: 24px; line-height: 33px; padding-inline: 9px; }   /* 行高固定為原值 22px×1.5，方塊不變高；字變寬，左右內距 14→9px，整體比原版還窄一點——下注時整個框會彈大 12%，彈到頂點時原版就只留 6–7px，手機版不能更寬 */
body.portrait.phone .tv-pot-label { font-size: 25px; line-height: 33px; padding-inline: 18px; }   /* 字變寬，左右內距 26→18px，整體不比原版寬（旁邊的下注框彈大時只留 6px 左右） */
body.portrait.phone .tv-pot-label b { font-size: 31px; line-height: 1; }
body.portrait.phone .tv-rank { font-size: 28px; }
body.portrait.phone .tv-status { font-size: 26px; }
/* 操作列：一排時先放大觸控目標 */
body.portrait.phone .tv-sizes > button { --h: 64px; font-size: 25px; }
body.portrait.phone .tv-step { width: 60px; height: 60px; font-size: 30px; }
body.portrait.phone .tv-slider output { font-size: 28px; }
body.portrait.phone .tv-slider input { height: 60px; }
body.portrait.phone .tv-slider input::-webkit-slider-thumb { width: 52px; height: 52px; margin-top: -22px; }
body.portrait.phone .tv-buttons .act-btn { --h: 116px; font-size: 32px; }
body.portrait.phone .tv-buttons .act-btn b { font-size: 29px; }
body.portrait.phone .pre-act { --h: 100px; font-size: 30px; }
body.portrait.phone .tv-reveal .act-btn { --h: 100px; font-size: 30px; }
body.portrait.phone .tv-reveal-title { font-size: 28px; }
body.portrait.phone .tv-reveal-q { font-size: 24px; }
/* phone-tall：預設下注一排、滑桿獨立一排（滑桿從約 200 變成整列寬），狀態文字跟著上移。 */
body.portrait.phone-tall .tv-sizes { flex-wrap: wrap; row-gap: 14px; }
body.portrait.phone-tall .tv-sizes > button { flex: 1 1 0; --h: 78px; font-size: 27px; }
body.portrait.phone-tall .tv-slider { flex: 1 0 100%; }
body.portrait.phone-tall .tv-step { width: 76px; height: 76px; font-size: 36px; }
body.portrait.phone-tall .tv-slider output { min-width: 150px; font-size: 32px; }
body.portrait.phone-tall .tv-status { bottom: 318px; }

/* 手機大廳：原本字級 12–16px（實際 5–7px），下方還空了約 450px。放大字級與按鈕，右欄面板往下移。 */
body.portrait.phone .lobby-mode, body.portrait.phone .lang-switch button { font-size: 22px; }
body.portrait.phone .lang-switch button { padding: 10px 18px; }
/* 英文的模式說明較長，頂列放不下時整列換行，語言鈕被擠到第二排、壓住 THE ARCHIVE 標題（-31px）。
   改成頂列不換行，模式說明在自己的區塊內換行。 */
body.portrait.phone .lobby-top { flex-wrap: nowrap; }
body.portrait.phone .lobby-mode { flex: 0 1 auto; min-width: 0; line-height: 1.3; text-wrap: balance; }
body.portrait.phone .lang-switch { flex: none; }
body.portrait.phone .find-card span { font-size: 26px; }
body.portrait.phone .lobby-nav { gap: 12px; }
body.portrait.phone .lobby-nav button { --h: 92px; grid-template-columns: 64px 1fr auto; gap: 0 14px; }
body.portrait.phone .lobby-nav button span { font-size: 28px; }
html[lang='en'] body.portrait.phone .lobby-nav button span { font-size: 23px; letter-spacing: .04em; }
body.portrait.phone .lobby-nav .nav-icon { width: 60px; height: 60px; }
body.portrait.phone .lobby-nav { top: 480px; }
body.portrait.phone .lobby-side { top: 930px; }
body.portrait.phone .season-card span { font-size: 22px; }
body.portrait.phone .season-card b { font-size: 40px; line-height: 1.15; margin-bottom: 8px; }
/* ↑ 放大後「剩 56 天」和下一行小字的行框貼在一起（0px），中間補 8px。 */
body.portrait.phone .season-card small { font-size: 21px; }
body.portrait.phone .lobby-side .today h3 { font-size: 24px; }
body.portrait.phone .lobby-side .today .empty, body.portrait.phone .life-line, body.portrait.phone .life-plan span { font-size: 22px; }
body.portrait.phone .lobby-side .today .feed-empty .empty small { font-size: 19px; }
body.portrait.phone .feed-empty img { width: 60px; height: 60px; }
body.portrait.phone .life-plan b { font-size: 28px; }
body.portrait.phone .life-actions .panel-action { font-size: 22px; min-height: 64px; }
body.portrait.phone .lobby-me { transform: scale(1.4); transform-origin: left bottom; }

/* 大廳拿掉「打牌 · 記住 · 歸屬」副標後：標題與尋找牌桌之間補回呼吸，直式選單與右欄跟著上移。 */
.lobby-center > h1 + .find-card { margin-top: 64px; }
body.portrait .lobby-center > h1 + .find-card { margin-top: 36px; }
body.portrait:not(.phone) .lobby-nav { top: 490px; }
body.portrait:not(.phone) .lobby-side { top: 810px; }

/* 手機彈窗：內容字級多為 13–18px（實際 6–8px）。用 zoom 讓內容區整體放大並在較窄的寬度重新排版，
   而不是逐個元件改字級。3D 牌背檢視器（WebGL、拖曳旋轉）不放大，避免座標換算出錯；
   教學的牌型清單與羊皮紙是固定寬高，整窗放大會超框，改在下面個別放大字級。 */
body.portrait.phone .modal:not(.c3d-modal, .tutorial) > .m-scroll, body.portrait.phone .modal:not(.c3d-modal, .tutorial) > .m-head { zoom: 1.35; }
/* 放大後內容區變窄：設定裡 8 欄固定寬的外觀格子會超出面板，改成撐滿整列、8 欄均分；彈窗可用的高度也放寬到舞台的高度。 */
body.portrait.phone .look-grid.small { width: 100%; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
body.portrait.phone .look-grid.small .look-choice { width: auto; }
body.portrait.phone .modal { max-height: calc(100% - 180px); }
/* 手機結算：帳單、引言、按鈕整組放大（寬度先縮回 1/1.3，放大後剛好填滿原本的 820）。 */
body.portrait.phone .result-box .result-rows, body.portrait.phone .result-box .quote, body.portrait.phone .result-actions, body.portrait.phone .result-box > .eyebrow { zoom: 1.3; }
body.portrait.phone .result-box .result-rows { width: 77%; }
/* 手機建立牌手：欄位標題、選項、牌背名稱、確認鈕 */
body.portrait.phone #create .field-label { font-size: 22px; }
body.portrait.phone #create .sub { font-size: 26px; }
body.portrait.phone #create .back-name { font-size: 24px; }
body.portrait.phone .know-row .toggle.toggle { --h: 78px; font-size: 25px; }
/* 英文選項「Yes — take me to the table」在 25px 下左右貼齊按鈕、也會壓到左側菱形：英文改 20px，手機上的菱形往左移，和文字至少隔 6px。 */
html[lang='en'] body.portrait.phone .know-row .toggle.toggle { font-size: 20px; }
body.portrait.phone .know-row .toggle[aria-pressed='true']::before { left: 8px; }
body.portrait.phone #create .create-panel .btn-primary { --h: 96px; align-self: stretch; font-size: 30px; }
/* 手機教學：說明字級放大，羊皮紙固定高度跟著加大（各頁同高，下一步鈕不跳動）。 */
body.portrait.phone .tut p[data-tab] { height: 250px; font-size: 27px; padding: 64px 64px 30px; }
body.portrait.phone .tut p[data-tab]::before { font-size: 21px; }
/* 英文說明比中文長，27px 會多出第四行、超出羊皮紙 8px：英文改 24px、行高 1.55，最後一行離下緣也留空間。 */
html[lang='en'] body.portrait.phone .tut p[data-tab] { font-size: 24px; line-height: 1.55; }
/* 牌型清單的名稱原本 17px（實際 7px）；清單變高，示意區跟著加高 40px。 */
body.portrait.phone .tut-ranks li b { font-size: 22px; }
body.portrait.phone .tutorial .tut { grid-template-rows: auto 380px auto auto auto; }
body.portrait.phone .tutorial .modal-actions .btn-primary, body.portrait.phone .tutorial .modal-actions .ghost-btn { --h: 80px; font-size: 26px; }
/* 手機開桌介紹：名字、關係、說明 */
body.portrait.phone .intro-card b { font-size: 32px; }
body.portrait.phone .intro-card em { font-size: 21px; }
body.portrait.phone .intro-card small { font-size: 21px; }


/* ══ 原本就不足 6px 的間距（以沒有這個檔案的版本比對確認不是這次造成的） ══
   間距規則：任兩個獨立元件至少 6px。以下各補 1–3px。 */
/* 生活方案、選擇級別：列內標題與說明的列距 4px → 6px */
.life-row { row-gap: 6px; }
/* 大廳名牌：「生涯資金」與金額 4px（金額字身超出行框約 1px）→ 7px */
.me-bank small { margin-bottom: 8px; }
/* 季節卡：「剩 56 天」與下一行 4px → 6px（手機另設 8px） */
.season-card b { margin-bottom: 2px; }
/* 今天的生活：兩行說明 5px → 6px */
.life-line { margin-bottom: 5px; }
/* 資金不足的兩條建議：行高 1.8 的行框比字身高，兩條之間只剩 5.2px → 7px */
.life-broke li + li { margin-top: 2px; }
/* Release collection: long requirements sit outside the action button. */
.gallery-unlock{margin:8px 0 12px;padding:0 8px;color:var(--muted,#b7a58b);font-size:13px;line-height:1.65;overflow-wrap:anywhere;}
.back-grid.small{gap:8px;}
body.portrait .gallery-list{grid-template-columns:repeat(5,1fr);gap:16px;}
body.portrait .gallery-list .back-choice .card{width:86px;height:125px;}
body.portrait .gallery-unlock{font-size:28px;margin:12px 0 16px;padding:0 16px;}
body.portrait .gallery-name{font-size:38px!important;}
body.portrait .gallery-main .c3d-stage{height:490px;}
body.portrait .gallery-main .c3d-buttons{gap:16px;}
body.portrait .gallery-main .c3d-buttons .ghost-btn,
body.portrait .gallery-main .c3d-buttons .btn-primary{font-size:26px;min-height:70px;}
body.portrait .back-grid.small{grid-template-columns:repeat(5,1fr);gap:16px;}
body.portrait .back-grid.small .card{width:60px;height:87px;}
body.portrait .gallery-main .c3d-modes button{font-size:24px;min-height:54px;padding:8px 18px;}