/* 兩版共用（單機版、連線版）。深色桌布主題（2026-10-11 換官方卡圖）。日文字型排前面，避免日文漢字被中文字型渲染；中文介面見 :lang(zh-Hant)。 */
:root{--magic:#1f8f8a;--machine:#7d8590;--law:#b39a2a;--accent:#d8b45a;--accent2:#b8862b;--red:#c8463a;--bg:#0f241c;--panel:rgba(0,0,0,.32);
  --line:rgba(255,255,255,.12);--text:#eee8d8;--muted:#b9b29f;--cw:4.4em;
  /* 一屏高度：--availh＝100dvh 扣掉內建瀏覽器提示條（--banh，viewport.js 量提示條本身的高度）。所有「一屏」的版面都用 --availh。
     2026-10-18 起不再用量到的可見高度改寫它：App 內建瀏覽器一律改用流式版面（html.flow，見本檔最後「App 內建瀏覽器」）。 */
  --vh100:100dvh;--banh:0px;--availh:calc(var(--vh100) - var(--banh))}
@supports not (height:100dvh){:root{--vh100:100vh}}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP","Yu Gothic","YuGothic","Meiryo",system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 30%,#1d4434 0%,#12301f 45%,#0b1a13 100%) fixed;color:var(--text);line-height:1.5;font-size:15px;min-height:100vh}
a{color:var(--accent)}
header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:.5em;padding:.4em .7em;background:rgba(8,16,12,.92);border-bottom:1px solid #6b5420;color:var(--accent);backdrop-filter:blur(4px)}
header b{letter-spacing:.08em}header .sub{font-size:.8em;opacity:.8;color:var(--text)}header .grow{flex:1}header a{color:var(--text);font-size:.9em}
header button{background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:.2em .6em;font-size:.85em}
/* 頁首導覽（2026-10-14，nav.js）：logo＝回首頁；寬 ≥ 900px 橫排連結，窄螢幕收成 ≡ 下拉 */
header a.logo{color:var(--accent);text-decoration:none;font-size:1em}
#gnav{display:flex;gap:.1em;align-items:center;margin-left:.4em}
header #gnav a{padding:.2em .5em;border-radius:5px;text-decoration:none;white-space:nowrap;font-size:.88em}
header #gnav a:hover{background:rgba(216,180,90,.15)}
header #gnav a[aria-current=page]{background:var(--accent);color:#1d1406;font-weight:bold}
header #gnav a.ext::after{content:' ↗';font-size:.8em;opacity:.8}
header #navbtn{display:none;font-size:1.1em;line-height:1;padding:.15em .45em}
@media (max-width:899px){
  header #navbtn{display:inline-block}
  #gnav{display:none;position:absolute;top:100%;right:.4em;margin:0;flex-direction:column;align-items:stretch;background:rgba(8,16,12,.97);border:1px solid #6b5420;border-radius:8px;padding:.35em;z-index:40;min-width:10em;box-shadow:0 6px 18px rgba(0,0,0,.5)}
  header.navopen #gnav{display:flex}
  header #gnav a{padding:.6em .9em;font-size:1em}
  header #gnav .inmenu{display:block;border-top:1px solid var(--line);margin-top:.3em;padding:.6em .9em .3em;font-size:.95em}
}
main{max-width:46em;margin:0 auto;padding:.6em .6em 4em;position:relative}
/* 介面語言（2026-10-11）：中文時 <html lang="zh-Hant">，字型改繁中優先；日文照上面 body 的設定 */
html:lang(zh-Hant) body{font-family:"Noto Sans CJK TC","Noto Sans TC","Microsoft JhengHei","PingFang TC","Heiti TC",system-ui,sans-serif}
/* 頁首「日本語｜中文」切換鈕：當前語言實心 */
.langsw{display:inline-flex;align-items:center;gap:.1em;white-space:nowrap}
.skipsw{display:inline-flex;align-items:center;gap:.25em;font-size:.78em;white-space:nowrap;cursor:pointer;opacity:.85}.skipsw input{margin:0;width:1em;height:1em;accent-color:#d8b45a}
.langsw i{font-style:normal;opacity:.5;font-size:.8em}
header .langsw button{border:1px solid rgba(216,180,90,.5);padding:.1em .45em;font-size:.78em;color:var(--text);background:transparent}
header .langsw button.on{background:var(--accent);color:#1d1406;border-color:var(--accent);font-weight:bold}
button{font:inherit;cursor:pointer}
.btn{display:inline-block;background:linear-gradient(#e2c26a,#b8862b);color:#1d1406;border:0;border-radius:6px;padding:.55em 1.1em;font-size:1em;margin:.25em .25em .25em 0;font-weight:bold;text-decoration:none;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.btn.sec{background:rgba(0,0,0,.25);color:var(--accent);border:1px solid var(--accent);box-shadow:none}
.btn:disabled{background:#4a4a44;color:#999;border-color:#555;cursor:not-allowed;box-shadow:none}
.status{background:var(--panel);border-left:5px solid var(--accent);padding:.5em .7em;margin:.4em 0;border-radius:4px}
.status .phase{font-size:.85em;color:var(--muted)}.status .todo{font-weight:bold;font-size:1.05em}
.status.mine{border-left-color:#4cd07d;background:rgba(40,120,70,.35)}
.players{display:grid;grid-template-columns:repeat(auto-fit,minmax(11em,1fr));gap:.4em}
.pl{background:var(--panel);border-radius:8px;padding:.4em .5em;border:2px solid var(--line)}
.pl.active{border-color:var(--accent);box-shadow:0 0 10px rgba(216,180,90,.35)}
.plhead{display:flex;gap:.45em;align-items:flex-start}
.pl .name{font-weight:bold}.tags span{display:inline-block;font-size:.72em;border-radius:3px;padding:0 .35em;margin:.1em .2em 0 0;color:#fff;background:#555}
.tags .dealer{background:#a0441c}.tags .tail{background:#6a4a9a}.tags .awk{background:#d4570b}
.chip{display:inline-block;border-radius:3px;padding:0 .35em;color:#fff;font-size:.85em;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.6)}
.chip small{font-size:.75em;margin-left:.15em;opacity:.9}
.chip.magic{background:var(--magic)}.chip.machine{background:var(--machine)}.chip.law{background:var(--law)}
section.box,details.box{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:.5em .7em;margin:.5em 0}
section.box h3{margin:.1em 0 .4em;font-size:1em;color:var(--accent)}
hr{border:0;border-top:1px solid var(--line)}
/* カード（官方卡圖 320:447） */
.cards{display:flex;flex-wrap:wrap;gap:.35em;align-items:flex-start}
.card{position:relative;width:var(--cw);aspect-ratio:320/447;border-radius:6px;flex:none;user-select:none;-webkit-user-select:none;
  box-shadow:0 2px 5px rgba(0,0,0,.55);background:#222;transition:transform .12s}
.card>img{display:block;width:100%;height:100%;border-radius:6px;object-fit:cover;pointer-events:none}
.card.small{--cw:3.4em}
.card .own{position:absolute;top:-.3em;left:-.25em;font-size:.8em;color:#ffe066;text-shadow:0 0 3px #000,0 0 2px #000}
.card .ord{position:absolute;top:-.55em;right:-.45em;z-index:3;background:#1d1406;color:var(--accent);border:2px solid var(--accent);border-radius:50%;width:1.6em;height:1.6em;
  display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:.85em}
.card.click{cursor:pointer}
.card.sel{outline:3px solid #ffd84d;outline-offset:1px;transform:translateY(-6px);box-shadow:0 6px 14px rgba(0,0,0,.6),0 0 12px rgba(255,216,77,.6)}
.card.empty{background:transparent;border:2px dashed rgba(255,255,255,.25);box-shadow:none;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.8em}
/* 點一下放大的只有角色徽章、角色卡、執剣／彌勒（2026-10-13：卡牌不放大） */
[data-zoom]{cursor:zoom-in}
.seecard{margin-top:.2em;padding:.1em .5em;font-size:.8em;border:1px solid var(--accent);border-radius:4px;background:transparent;color:var(--accent)}
.charcard{flex:none;width:4.4em;aspect-ratio:447/320;border-radius:4px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.6)}
.charcard img{width:100%;height:100%;object-fit:cover;display:block}
.charcard:not(.small){width:8em} /* 角色卡是橫式卡（2026-10-11），桌上橫放 */
/* 角色徽章（桌上，2026-10-11）：流派色底＋拳型＋上身縮圖；對手的不倒放 */
.charbadge{flex:none;display:flex;align-items:stretch;height:2.7em;border-radius:6px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.6);background:#555;cursor:pointer}
.charbadge.magic{background:var(--magic)}.charbadge.machine{background:var(--machine)}.charbadge.law{background:var(--law)}
.charbadge .cbfist{width:1.45em;display:flex;align-items:center;justify-content:center;font-size:1.05em;text-shadow:0 0 3px rgba(0,0,0,.6)}
.charbadge img{height:100%;aspect-ratio:1;object-fit:cover;display:block}
.crow .charbadge{height:2.3em}
.charinfo{display:flex;gap:.6em;align-items:center;margin:.3em 0}
.hpcard{position:relative;width:8.5em;aspect-ratio:447/320;margin:.3em 0;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.6)}
.hpcard img{width:100%;height:100%;display:block}
.hpcard .marker{position:absolute;width:15%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe0a0,#d98b2b 55%,#7a4410);box-shadow:0 1px 4px rgba(0,0,0,.8)}
.hpcard .hpnum{position:absolute;right:.25em;bottom:.1em;font-size:.75em;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000}
.hpcard.lo .hpnum{color:#ffb070}
.rescard{position:relative;width:calc(var(--cw) * 1.4);aspect-ratio:447/320;border-radius:6px;overflow:hidden;align-self:center;box-shadow:0 2px 5px rgba(0,0,0,.55)}
.rescard img{width:100%;height:100%;display:block}
.rescard .restxt{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);font-size:.7em;text-align:center;color:#ffe9b0}
.decl{margin-top:.5em}
.declopts{display:flex;gap:.5em;flex-wrap:wrap;margin:.3em 0}
/* 決着卡：兩選一的按鈕，一段式（2026-10-12）：點＝選（金框）、再點＝取消；不放大（2026-10-13 拿掉 🔍） */
.resbtn{position:relative;flex:0 0 auto;width:8.4em;font-size:.85em;display:flex;flex-direction:column;align-items:center;gap:.15em;padding:.3em;background:rgba(0,0,0,.3);border:2px solid var(--line);border-radius:8px;color:var(--text);text-align:center;user-select:none;-webkit-user-select:none}
.resbtn[data-act]{cursor:pointer}
.resimg{position:relative;line-height:0}
.resbtn img{width:7em;border-radius:5px;display:block}
.resbtn.on{border-color:#ffd84d;box-shadow:0 0 0 2px #ffd84d,0 0 12px rgba(255,216,77,.6);background:rgba(90,70,10,.45)}
.resbtn.wait{cursor:not-allowed}.resbtn.wait>.rcap,.resbtn.wait img{opacity:.5}
.resbtn small{font-size:.8em;margin-left:.2em}
.note{font-size:.85em;color:var(--muted)}
.mask{position:fixed;inset:0;background:radial-gradient(ellipse at center,#24402f,#07110c);color:#fff;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1em}
.mask .big{font-size:1.5em;margin:.5em 0}
table.res{border-collapse:collapse;width:100%;font-size:.9em;margin:.3em 0}
table.res td,table.res th{border-bottom:1px solid var(--line);padding:.25em .2em;text-align:left;vertical-align:middle}
.win{color:#5fd68a;font-weight:bold}.lose{color:#ff7a6a;font-weight:bold}.tie{color:#c8c2b0;font-weight:bold}
.outcome{font-weight:bold;font-size:1.05em;margin:.3em 0}
.formula{background:rgba(216,180,90,.12);border:1px solid rgba(216,180,90,.3);border-radius:4px;padding:.3em .5em;margin:.3em 0}
.log{font-size:.82em;max-height:18em;overflow:auto}.log div{border-bottom:1px dotted var(--line);padding:.1em 0}
.log .turn{font-weight:bold;color:var(--accent)}
.grid3{display:grid;grid-template-columns:auto repeat(3,1fr);gap:.3em;align-items:center;margin:.3em 0}
.grid3 .gh{text-align:center;font-size:.85em;color:var(--muted)}
.grid3 button.pick{position:relative;padding:.15em;border-radius:6px;border:2px solid transparent;color:#fff;font-size:.8em;display:flex;flex-direction:column;align-items:center;gap:.1em}
.grid3 button.pick img{width:100%;max-width:5.5em;aspect-ratio:1;object-fit:cover;border-radius:4px;display:block}
.grid3 button.magic{background:var(--magic)}.grid3 button.machine{background:var(--machine)}.grid3 button.law{background:var(--law)}
.grid3 button.on{border-color:#ffd84d;box-shadow:0 0 0 2px #ffd84d,0 0 12px rgba(255,216,77,.6);font-weight:bold}
.grid3 .cn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-shadow:0 0 2px #000}
label.row{display:block;margin:.4em 0}
input[type=text],input[type=number]{font:inherit;padding:.3em;border:1px solid #6b6450;border-radius:4px;width:10em;background:#0b1712;color:var(--text)}
.err{background:rgba(200,70,58,.25);border:1px solid var(--red);color:#ffb4a8;padding:.4em .6em;border-radius:4px;margin:.4em 0}
details>summary{cursor:pointer;color:var(--accent);font-weight:bold}
/* 放大看 */
.zoomov{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.85);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1em}
.zoomov img{max-width:100%;max-height:85vh;border-radius:10px;box-shadow:0 0 30px rgba(0,0,0,.8);
  transform:scale(.55);opacity:.4;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.zoomov.in img{transform:scale(1);opacity:1}
@media (prefers-reduced-motion:reduce){.zoomov img{transition:none}}
.zoomov p{color:#ccc;font-size:.85em}
/* 看得到但不能選（全站一致）：內容照樣看得清楚，蓋白色斜紋＋壓暗、虛線框、角落「🔒選べない」、不給點 */
.card.locked{cursor:not-allowed;box-shadow:none;outline:2px dashed rgba(255,255,255,.7);outline-offset:-2px}
.card.locked::after,.resbtn.locked::after,.grid3 button.locked::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(-45deg,rgba(0,0,0,.35) 0 7px,rgba(255,255,255,.38) 7px 10px)}
.card .lock{position:absolute;top:.2em;left:50%;transform:translateX(-50%);z-index:2;background:rgba(0,0,0,.85);color:#fff;font-size:.6em;line-height:1.5;padding:0 .3em;border-radius:3px;white-space:nowrap}
.cards.mixed .card.click{outline:3px solid #ffd84d;outline-offset:1px;box-shadow:0 0 10px rgba(255,216,77,.6)}
.lockwhy{display:flex;gap:.4em;align-items:flex-start;background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.35);border-radius:4px;padding:.3em .5em;margin:.2em 0 .5em;font-size:.88em;color:#ddd5c0}
.lockwhy .lockicon{flex:none}
.resbtn.locked{cursor:not-allowed;border-style:dashed;border-color:rgba(255,255,255,.6)}
.grid3 button.locked{cursor:not-allowed;border:2px dashed rgba(255,255,255,.7)}
@media (min-width:700px){:root{--cw:5.2em}.hpcard{width:10em}}
/* ===== 階段 B：桌面式對戰畫面（上＝對手、中＝山札・捨て札・場地＋対決、下＝自分） ===== */
.table{display:flex;flex-direction:column;gap:.45em;margin:.3em 0}
.zone{position:relative;background:rgba(0,0,0,.22);border:1px solid rgba(216,180,90,.22);border-radius:10px;padding:.4em .5em}
.zone.active{border-color:var(--accent);box-shadow:0 0 0 1px rgba(216,180,90,.4),0 0 14px rgba(216,180,90,.25)}
.zhead{display:flex;align-items:center;gap:.45em}
.zhead .who{flex:1;min-width:0}
.zhead .name{font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zhead .cname{font-size:.75em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zhead .hpcard{margin:0;width:7.4em;flex:none}
.zone.bottom .zhead{margin-top:.35em}
.token{flex:none;width:1.9em;aspect-ratio:320/447;border-radius:3px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.6);align-self:flex-start}
.token img{width:100%;height:100%;object-fit:cover;display:block}
.tags .child{background:#2f5f8a}
.zrow{display:flex;gap:.5em;flex-wrap:wrap;margin-top:.3em}
.area{min-width:0}
.area.shown{flex:1}
.alab{font-size:.72em;color:var(--muted);margin-bottom:.15em;letter-spacing:.03em}
.none{color:rgba(255,255,255,.3);font-size:.85em}
.backs{display:flex;padding-left:.9em}
.backs .card{margin-left:-.9em}
.area.handarea{margin-top:.3em}
.cards.hand{min-height:calc(var(--cw) * 447 / 320 + .4em);padding-top:.4em;align-items:flex-end}
.btn.small{font-size:.8em;padding:.35em .7em}
.lvsel{margin:.7em 0}.lvsel>span{margin-right:.3em}.lvsel .btn.small{font-size:.9em;padding:.35em 1em;margin:.1em .15em}.lvsel .note{margin:.3em 0 0} /* 電腦強度（ふつう／つよい，2026-10-14） */
.card.back{background:#111}
/* 中央 */
.mid{display:flex;gap:.45em;background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:.4em}
.piles{display:flex;flex-direction:column;gap:.25em;flex:none}
.pile{display:flex;flex-direction:column;align-items:center}
.pile .card,.pile .card.small{--cw:3em}
.plab{font-size:.68em;color:var(--accent)}
.psub{font-size:.66em;color:var(--muted)}
.stack{position:relative}
.stack::before{content:"";position:absolute;inset:0;transform:translate(3px,3px);background:#0a0a0a;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.6)}
.stack .card{position:relative}
.stack.dim{opacity:.6}
.arena{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.2em}
.arena .card{--cw:3.3em}
.arena .pool .card{--cw:4.2em}
.crow{display:flex;align-items:center;gap:.3em;flex-wrap:wrap;position:relative;padding-top:.85em}
.crowlab{position:absolute;top:0;left:0;font-size:.68em;color:var(--muted);white-space:nowrap}
.crow .charcard{width:3.8em}
.three{display:flex;gap:.25em}
.crow .rescard{--cw:3.2em}.crow .rescard .restxt{font-size:.55em;line-height:1.3}
.vs{text-align:center;font-weight:bold;color:var(--accent);letter-spacing:.3em;font-size:.85em;text-shadow:0 0 6px rgba(216,180,90,.5)}
.slot{position:relative}
.slot.ghost .card{opacity:.3;filter:grayscale(.8)}
.slab{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:.6em;background:rgba(0,0,0,.75);padding:0 .3em;border-radius:3px;white-space:nowrap}
.badge{position:absolute;top:-.45em;right:-.4em;z-index:4;width:1.7em;height:1.7em;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:bold;font-size:.8em;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.7)}
.badge.win{background:#c8352b;color:#fff}.badge.tie{background:#6b7078;color:#fff}
.arena.mixed .card.click{outline:3px solid #ffd84d;outline-offset:1px;box-shadow:0 0 10px rgba(255,216,77,.6)}
/* 結果面板 */
.panel{background:rgba(10,8,4,.55);border:1px solid rgba(216,180,90,.55);border-radius:10px;padding:.5em .7em;margin:.5em 0}
.panel>summary{cursor:pointer;color:var(--accent);font-weight:bold}
.panel.reveal{animation:pop .35s ease-out}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
.rcard+.rcard{border-top:1px solid var(--line);margin-top:.5em;padding-top:.5em}
.otitle{font-size:1.5em;font-weight:900;text-align:center;letter-spacing:.1em;color:#fff}
.otitle.bad{color:#ff8a70}.otitle.good{color:#7fe0a0}.otitle.even{color:#d8d2bf}.otitle.obs{color:var(--accent)} /* 顏色依看畫面的人有利／不利（view.js resultTitle） */
.score{text-align:center;color:var(--muted);font-size:.9em}
.pairs{margin:.3em 0;padding-left:.2em;list-style:none;font-size:.88em}
table.calc{border-collapse:collapse;width:100%;margin:.3em 0;font-size:.95em}
table.calc th{text-align:left;color:var(--accent);font-weight:normal;width:4em;padding:.1em .2em}
table.calc td{padding:.1em .2em;border-bottom:1px dotted var(--line)}
table.calc .pt{text-align:right;font-weight:bold;width:3em}
table.calc tr.sum td,table.calc tr.sum th{border-top:2px solid var(--accent);font-size:1.1em;color:#fff}
.hpline{font-size:.92em}.awkx{color:#ff9a4a;font-weight:bold}
/* 下方固定操作列 */
.actionbar{position:sticky;bottom:0;z-index:6;margin:.5em -.6em 0;padding:.35em .6em calc(.35em + env(safe-area-inset-bottom));
  background:rgba(6,14,10,.94);border-top:1px solid #6b5420;backdrop-filter:blur(4px)}
.actionbar .status{margin:0;padding:.25em .5em;background:transparent}
.actionbar .status.mine{background:rgba(40,120,70,.35)}
.actionbar{display:flex;align-items:center;gap:.4em}
.actionbar .status{flex:1;min-width:0}
.actionbar .status .todo{font-size:.95em;line-height:1.35}
.actionbar .wait{font-size:.8em;color:var(--muted)}
.abtn{flex:none}.abtn .btn{margin:0;white-space:nowrap}
.controls{background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:8px;padding:.4em .6em;margin:.4em 0}
.controls .hint{font-size:.88em;color:var(--muted)}
.controls .decl{margin:.3em 0 0}
.controls .resbtn img{width:5.6em}.controls .resbtn{width:7em}
.dock,.ydock{display:none} /* 桌機版才有（view.js 只在桌機版產生，這行是保險） */
/* 回合過場 */
.splash{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);animation:splash 1.8s ease forwards;cursor:pointer}
.splash .sbox{display:flex;align-items:center;gap:1em;padding:1em 1.6em;border-radius:12px;background:linear-gradient(135deg,rgba(40,20,8,.95),rgba(20,12,6,.95));
  border:2px solid var(--accent);box-shadow:0 0 30px rgba(216,180,90,.4)}
.splash .stoken{width:3.6em;border-radius:5px}
.splash .st{font-size:2em;font-weight:900;color:var(--accent);letter-spacing:.1em}
.splash .sd{font-size:1.05em}
@keyframes splash{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0;visibility:hidden}}
@media (min-width:700px){
  main{max-width:52em}
  .arena .card{--cw:4.4em}.arena .pool .card{--cw:5.2em}.pile .card,.pile .card.small{--cw:4em}.crow .charbadge{height:2.8em}
  .zhead .hpcard{width:9em}.token{width:2.6em}
}
/* ===== 階段 C：弧形手牌（參考 Blade 小遊戲）；純 CSS transform ===== */
.fan{position:relative;--cw:5em;--ay:.2em;--ar:4deg;--step:min(calc(var(--cw) * 1.05), calc((100% - var(--cw)) / var(--n1))); /* 疏鬆：空間夠時每張幾乎完整露出，不夠再縮（2026-10-12 使用者） */
  height:calc(var(--cw) * 447 / 320 + 1.9em);margin:.1em auto 0;max-width:30em}
.fan .fi{position:absolute;bottom:.15em;left:calc(50% - var(--cw) / 2 + var(--off) * var(--step));
  transform-origin:50% 180%;transform:translateY(calc(var(--off2) * var(--ay))) rotate(calc(var(--off) * var(--ar)));transition:transform .15s ease-out}
.fan .card{transition:none}
.fan .card.sel{transform:none;outline:3px solid #ffd84d}
.fan .fi.sel{transform:translateY(calc(var(--off2) * var(--ay) - 1.4em)) rotate(calc(var(--off) * var(--ar)))} /* 選中只抬高、不改疊層：維持左到右覆蓋（使用者 2026-10-11）；抬高只有一種高度（1.4em）：桌機滑過、已選都一樣。2026-10-13 起沒有「點一下浮起」（一段式） */
@media (hover:hover){.fan .fi:has(.card.click):hover{transform:translateY(calc(var(--off2) * var(--ay) - 1.4em)) rotate(calc(var(--off) * var(--ar)))}
  .fan .fi.sel:hover{transform:translateY(calc(var(--off2) * var(--ay) - 1.4em)) rotate(calc(var(--off) * var(--ar)))}}
.fan .card .own{left:auto;right:-.2em;top:auto;bottom:.2em}
.ofan{position:relative;--cw:2.5em;--step:min(calc(var(--cw) * .55), calc((100% - var(--cw)) / var(--n1)));
  height:calc(var(--cw) * 447 / 320 + .7em);min-width:7em}
.ofan .fi{position:absolute;top:.1em;left:calc(50% - var(--cw) / 2 + var(--off) * var(--step));
  transform-origin:50% -120%;transform:translateY(calc(var(--off2) * -.12em + .5em)) rotate(calc(var(--off) * -5deg))}
.area.hidden{flex:1;min-width:7em}
/* 自己那區：HP 紀錄卡在名字下面（2026-10-12） */
.zone.bottom .who .hpcard{margin:.25em 0 0}
.zone.bottom .zhead{align-items:flex-start}
@media (min-width:700px){.fan{--cw:6.2em}.ofan{--cw:3.2em}}
header b,header a,header button{white-space:nowrap}
@media (max-width:440px){header .sub{display:none}header{gap:.4em;font-size:.92em}}
table.calc th{white-space:nowrap;width:auto;padding-right:.6em}
@media (min-width:900px){
  body{font-size:17px}
  .arena .card{--cw:5.4em}.pile .card,.pile .card.small{--cw:4.6em}.crow .charbadge{height:3.2em}.crow .rescard{--cw:4.6em}
  .fan{--cw:7em;max-width:36em}.ofan{--cw:3.6em}
}

/* ===== 大招提示（2026-10-11）：親選滿 3 張時，三色／一色／純華／無双 讓選中的牌發光（等級越高越亮），雑色寫原因與建議 ===== */
.yakuban{margin:.4em 0 0;padding:.45em .6em;border-radius:8px;border:1px solid var(--line);background:rgba(0,0,0,.3);font-size:.92em}
.yakuban .ybname{font-size:1.35em;letter-spacing:.1em}
.yakuban .ywhy{color:#e9c6a0;font-size:.9em;margin-top:.2em}.yakuban .ytip{color:#bfe6c8;font-size:.9em;margin-top:.15em}
.yb-tricolor{border-color:#e8d9a0;box-shadow:0 0 10px rgba(232,217,160,.35)}.yb-tricolor .ybname{color:#f3e7b8}
.yb-monocolor{border-color:#e2b84a;box-shadow:0 0 14px rgba(226,184,74,.5)}.yb-monocolor .ybname{color:#ffd45e}
.yb-pure{border-color:#ff7a45;box-shadow:0 0 18px rgba(255,122,69,.55)}.yb-pure .ybname{color:#ff9a6a}
.yb-peerless{border-color:#fff;box-shadow:0 0 22px rgba(255,255,255,.7),0 0 40px rgba(226,200,120,.5)}.yb-peerless .ybname{color:#fff;text-shadow:0 0 8px #ffe9a8}
.glow .fan .card.sel,.glow .crow .card.click{transition:box-shadow .3s}
.glow-tricolor .fan .card.sel,.glow-tricolor .crow .card.click{box-shadow:0 0 0 3px #f3e7b8,0 0 14px 3px rgba(243,231,184,.6)}
.glow-monocolor .fan .card.sel,.glow-monocolor .crow .card.click{box-shadow:0 0 0 3px #ffd45e,0 0 18px 5px rgba(255,212,94,.75)}
.glow-pure .fan .card.sel,.glow-pure .crow .card.click{box-shadow:0 0 0 3px #ff8a55,0 0 22px 7px rgba(255,122,69,.8)}
.glow-peerless .fan .card.sel,.glow-peerless .crow .card.click{box-shadow:0 0 0 3px #fff,0 0 26px 9px rgba(255,236,170,.9);animation:peerless 1.2s ease-in-out infinite alternate}
@keyframes peerless{from{box-shadow:0 0 0 3px #fff,0 0 16px 4px rgba(255,236,170,.6)}to{box-shadow:0 0 0 3px #fff,0 0 34px 14px rgba(255,255,255,.95)}}
@media (prefers-reduced-motion:reduce){.glow-peerless .fan .card.sel,.glow-peerless .crow .card.click{animation:none}}

/* ===== 階段 D：桌機版面（2026-10-11 使用者：「現在這個是手機版，在 PC 上不好看」）=====
   只在 寬 ≥ 960px 且橫向 時生效；手機版不動。.side 手機時 display:contents（跟原本一樣由上往下排）。
   左欄 .table＝桌面（上緣對手：頭像＋HP｜卡背扇形｜公開的牌；中帶：山札・捨て札・場地｜対決區或輪抽池；下緣自己：頭像＋HP｜手牌扇形｜公開的牌），
   高度貼齊視窗（一屏看完）；右欄 .side＝狀態／該做什麼＋按鈕、提示、対決詳細、ログ（可捲）。結果面板與遊戲結束浮在中央（覆蓋層）。
   卡片大小用 vh 算，1280×720 到 1920×1080 都塞得下。 */
.side{display:contents}
@media (min-width:960px) and (orientation:landscape){
  header{height:2.7em;box-sizing:border-box}
  main{max-width:1320px;padding:.4em .8em 0}
  main:not(:has(.game)){max-width:52em}
  main:has(.game){height:calc(var(--availh) - 2.7em);display:flex;flex-direction:column;padding-bottom:.4em}
  main:has(.game)>.note{margin:0 0 .2em}
  main:has(.game)>details.box{display:none} /* 連線版「換裝置」放在側欄看不到也沒關係：大廳有；桌面上不佔高度 */
  .game{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(250px,22vw,340px);gap:.6em}
  .side{display:flex;flex-direction:column;gap:.5em;min-height:0;overflow:auto;padding-right:.2em}
  .side>.actionbar{order:-1;position:static;margin:0;flex-direction:column;align-items:stretch;border:1px solid #6b5420;border-radius:10px;padding:.5em}
  .side>.actionbar .abtn .btn{width:100%;margin-top:.3em}
  .side>.controls,.side>details.box{margin:0}
  .table{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:.4em;margin:0;min-height:0;position:relative}
  .table>*{grid-column:1} /* 全部在同一欄；收起來的結果摘要（details.panel）跟 .mid 疊在同一格 */
  .table>.zone.top{grid-row:1}.table>.mid{grid-row:2;min-height:0}.table>.zone.bottom{grid-row:3}
  /* 上下兩緣：頭像＋HP｜手牌｜公開的牌 */
  .zone.top,.zone.bottom{display:grid;grid-template-columns:auto minmax(0,1.4fr) minmax(0,.7fr);grid-template-areas:"head hand shown";align-items:center;gap:.6em;padding:.3em .6em}
  .zone>.zrow{display:contents}
  .zone .zhead{grid-area:head;margin:0}
  .zone .area.hidden,.zone .area.handarea{grid-area:hand;margin:0}
  .zone .area.shown{grid-area:shown;align-self:stretch}
  .zhead .hpcard{width:6.6em}.token{width:2.3em}
  .zhead .who{min-width:6em;max-width:10em}
  .zone.top .shown .card{--cw:6vh}.zone.bottom .shown .card{--cw:7vh}
  .ofan{--cw:6vh;height:calc(var(--cw) * 447 / 320 + .5em)}
  .fan{--cw:clamp(90px,14vh,130px);max-width:none;margin-top:0}
  .zone.top .fan{--cw:7vh} /* 遊戲結束攤牌：對手的手牌在上緣，小一點 */
  .zone .area.handarea .fan{width:calc(100% - 5em);margin-left:auto;margin-right:auto} /* 外側的牌轉開時會往兩邊撐出去，留邊不壓到 HP 卡 */
  .cards.hand{min-height:0}
  /* 中帶 */
  .mid{min-height:0}
  .piles{justify-content:center}
  .pile .card,.pile .card.small{--cw:6vh}
  .arena{overflow:visible}
  .arena .card{--cw:10vh}.arena .pool .card{--cw:14vh}
  .crow .charbadge{height:6.5vh}.crow .rescard{--cw:9vh}
  .arena .cards.pool{justify-content:center}
  /* 結果：浮在桌面中央 */
  .table>.panel.reveal,.table>.overbox{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;width:min(36em,92vw);max-height:84vh;overflow:auto;margin:0;
    background:rgba(12,10,6,.96);box-shadow:0 10px 40px rgba(0,0,0,.8),0 0 0 1px rgba(216,180,90,.5);animation:popc .35s ease-out}
  /* 揭曉的結果面板（2026-10-13）：「次へ」在自己手牌右邊（dock），面板改成浮在桌面左側那塊的中央（不含右邊 6.5em），不蓋到按鈕 */
  .table>.panel.reveal{position:absolute;left:calc((100% - 4em) / 2);width:min(36em,calc(100% - 9em));max-height:min(84vh,calc(100% - .4em))}
  @keyframes popc{from{transform:translate(-50%,-50%) scale(.94);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
  /* 揭曉後收起來的「このターンの対決結果」：疊在中帶右下角，打開時往上展開 */
  .table>details.panel{grid-row:2;grid-column:1;align-self:end;justify-self:end;z-index:8;margin:0 .4em .4em 0;max-width:min(30em,60%);max-height:100%;overflow:auto;background:rgba(12,10,6,.94)}
  /* 自己那區（2026-10-13 使用者重排；2026-10-12 版是「扇形｜右邊一欄〔出す 3 枚小圖／決着卡＋按鈕〕」）：
     【名牌縱向一欄（徽章＋執剣／彌勒、名字、角色名、標籤、HP 卡；寬≈HP 卡）】→【手牌扇形（延伸到原本小圖的空間）】→（輪抽／開門揭示時：公開牌）→
     【dock：決着卡兩張上下疊 ＋ 直式按鈕（最右邊）】。點按都集中在畫面中下方；揭曉後的「次へ」也在同一位置，右側欄沒有按鈕。
     「出す 3 枚」小圖桌機版不產生（view.js），已選只靠手牌上的序號 1・2・3＋金框，取消＝再點那張手牌。對手那區（上）不動。 */
  .zone.bottom{--hw:6.2em;--fh:calc(clamp(90px,14vh,130px) * 447 / 320);grid-template-columns:var(--hw) minmax(0,1fr) auto;grid-template-rows:auto;grid-template-areas:"head hand act";
    column-gap:.7em;align-items:center;padding:.3em .6em}
  .zone.bottom.withshown{grid-template-columns:var(--hw) minmax(0,1fr) auto auto;grid-template-areas:"head hand shown act"}
  .zone.bottom .zhead{width:var(--hw);flex-wrap:wrap;align-items:center;align-content:center;align-self:center;gap:.2em .25em}
  .zone.bottom .zhead .charbadge{height:2.3em}
  .zone.bottom .zhead .token{width:calc(2.3em * 320 / 447);align-self:center}
  .zone.bottom .zhead .who{flex:0 0 100%;min-width:0;max-width:none}
  .zone.bottom .zhead .name{font-size:.88em;line-height:1.25}
  .zone.bottom .zhead .cname{line-height:1.25}
  .zone.bottom .zhead .tags{line-height:1.15}
  .zone.bottom .zhead .tags span{font-size:.66em;margin-top:.15em}
  .zone.bottom .who .hpcard{width:100%;margin:.2em 0 0}
  .zone.bottom .area.handarea{align-self:center}
  .zone.bottom .area.handarea .fan{width:calc(100% - 1.5em);--ay:.06em;--ar:1.6deg} /* 疏鬆時弧度小一點，外側的牌才不會掉出區塊；--step 上限 1.05 倍卡寬＝4 張不重疊 */
  .zone.bottom .area.shown{align-self:center}
  .zone.bottom .area.shown .alab{margin-bottom:0}
  .dock{display:flex;grid-area:act;flex-direction:row;align-items:stretch;gap:.4em;align-self:stretch;padding:.15em 0}
  .dock .decl{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15em}
  .dock .declhead{font-size:.66em;color:var(--accent);font-weight:bold;line-height:1.2;white-space:nowrap;cursor:help}
  .dock .declopts{flex-direction:column;flex-wrap:nowrap;gap:.25em;margin:0}
  .dock .resbtn{width:auto;min-width:calc(8.5vh + .6em);font-size:.58em;padding:.15em .2em;gap:0;line-height:1.25;border-radius:6px}
  .dock .resbtn .rcap{white-space:nowrap}
  .dock .resbtn small{display:block;margin:0;color:#ffcf9a;font-size:.95em;white-space:nowrap}
  .dock .resbtn img{width:8.5vh;border-radius:4px}
  .dock .resbtn.locked::after{display:none} /* 假的那張：斜紋只蓋圖，下面的字（「X」ではない／🔒 原因）照樣看得清楚 */
  .dock .resbtn.locked .resimg::after{content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;background:repeating-linear-gradient(-45deg,rgba(0,0,0,.35) 0 6px,rgba(255,255,255,.38) 6px 8px)}
  /* 直式按鈕：窄而高、字直排（裏向きで出す／取らない／捨てる／確認／次へ），放在最右邊；高度不超過手牌扇形（字太多就折成兩行） */
  .dock .dockbtn{display:flex;align-items:stretch}
  .dock .dockbtn .btn{writing-mode:vertical-rl;text-orientation:upright;display:flex;align-items:center;justify-content:center;margin:0;
    min-width:2.5em;min-height:7.5em;max-height:calc(var(--fh) + 2.6rem);padding:.5em .5em;font-size:1.05em;letter-spacing:.1em;line-height:1.2;white-space:normal}
  /* 大螢幕（≥1700px，例 1920×1080）：整體放寬，手牌扇形才放得下 6 張不重疊（2026-10-13；之前 1320px 時 6 張只露 7 成） */
  @media (min-width:1700px){main{max-width:1600px}}
  .ydock{display:block;position:absolute;right:.5em;bottom:calc(100% + .45em);z-index:7;max-width:min(32em,62%);pointer-events:none}
  .ydock .yakuban{margin:0;background:rgba(12,10,6,.94);box-shadow:0 4px 14px rgba(0,0,0,.6)}
}

/* ===== 手機版面（2026-10-13 使用者：「要上下捲動才能同時看到自己與對手的手牌」→ 一屏同時看到雙方的牌與桌面）=====
   只在「不是桌機版」時生效（寬 < 960px 或直式；桌機版上面那段不動）。view.js 手機時 .game 多一個 class mob，
   .table＝四列 grid：對手（一列：徽章｜名字・標籤｜迷你 HP｜卡背小扇形｜公開牌）→ 中央（上＝山札・捨て札・場地一列小格，下＝輪抽池或対決區，彈性高度）
   → 自己（名牌一列＋手牌扇形貼底＋右邊決着卡）→ 狀態列＋主要按鈕。直式時 .table 高度＝100dvh − 頁首，一屏看完；
   說明、対決の詳細、ログ、「端末やブラウザを変えて続ける」在下面，捲下去才看。橫式手機（寬 < 960）不固定高度、照順序往下排。 */
@media not all and (min-width:960px) and (orientation:landscape){
  :root{--hh:2.5rem}
  header{height:var(--hh);padding-top:0;padding-bottom:0}
  @media (max-width:400px){header{gap:.3em;padding-left:.45em;padding-right:.45em}header b{letter-spacing:0}header .langsw button{padding:.1em .3em}header a,header button{font-size:.82em}} /* 360px 寬時「最初から」不被擠出畫面 */
  main:has(.game){display:flex;flex-direction:column;padding:0 .4em 1.5em;overflow-x:clip}
  main:has(.game)>*{order:1}
  main:has(.game)>.game{order:0}
  main:has(.game)>.note{margin:.6em 0 .2em}
  main:has(.game)>.err{position:fixed;top:calc(var(--hh) + .3em);left:.5em;right:.5em;z-index:12;margin:0}
  .game.mob .table{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;gap:.3em;margin:0;position:relative;padding-top:.3em}
  .game.mob .table>*{grid-column:1;min-width:0}
  .game.mob .table>.zone.top{grid-row:1}.game.mob .table>.mid{grid-row:2}.game.mob .table>.zone.bottom{grid-row:3}.game.mob .table>.actionbar{grid-row:4}
  /* 玩家區共用：名牌一列 */
  .game.mob .zone{padding:.25em .4em;border-radius:8px}
  .game.mob .zhead{display:flex;align-items:center;gap:.3em;min-width:0;margin:0}
  .game.mob .zhead .charbadge{height:2.3em}
  .game.mob .zhead .charbadge .cbfist{width:1.2em;font-size:.95em}
  .game.mob .zhead .token{width:1.5em;align-self:center}
  .game.mob .zhead .who{flex:1 1 4em;min-width:2.5em}
  .game.mob .zhead .name{font-size:.9em;line-height:1.25}
  .game.mob .zhead .name .cname{font-size:.78em;font-weight:normal;color:var(--muted);margin-left:.35em}
  .game.mob .zhead .tags{line-height:1.15;white-space:nowrap;overflow:hidden}
  .game.mob .zhead .tags span{font-size:.66em;margin:0 .15em 0 0}
  .game.mob .zhead .hpcard{width:4.4em;margin:0;flex:none}
  .game.mob .zhead .hpcard .hpnum{font-size:.6em;right:.2em;bottom:0}
  .game.mob .alab{font-size:.6em;margin:0;line-height:1.25;white-space:nowrap}
  .game.mob .area.shown{flex:0 1 auto;min-width:0}
  .game.mob .area.shown .cards{flex-wrap:nowrap;gap:.2em}
  .game.mob .gatedraw .cards{padding-top:.55em}
  .game.mob .gtag{font-size:.6em}
  .game.mob .gdealer{font-size:.72em;white-space:normal}
  /* 對手（上）：一列，放不下時公開牌折到第二列 */
  .game.mob .zone.top{display:flex;flex-wrap:wrap;align-items:center;gap:.2em .45em}
  .game.mob .zone.top .zhead{flex:1 1 12em}
  .game.mob .zone.top .area.hidden{flex:none;width:6.8em;min-width:0}
  .game.mob .ofan{--cw:1.75em;min-width:0;height:calc(var(--cw) * 447 / 320 + .45em)}
  .game.mob .ofan .card{--cw:1.75em} /* 卡背是 .card.small（3.4em），手機版跟扇形同寬 */
  .game.mob .ofan .fi{top:0}
  .game.mob .zone.top .shown .card{--cw:1.95em}
  .game.mob .zone.top .gatedraw .cards{padding-top:.5em;gap:.3em}
  .game.mob .zone.top .area.handarea{flex:1 1 100%;margin:0} /* 遊戲結束攤牌 */
  .game.mob .zone.top .fan{--cw:2.6em;max-width:none;width:calc(100% - 2em);margin:0 auto;height:calc(var(--cw) * 447 / 320 + .9em)}
  /* 自己（下）：名牌一列 → 手牌扇形（貼底）＋右邊決着卡（親選牌時） */
  .game.mob .zone.bottom{--fcw:clamp(3.6em, min(18.5vw, calc(var(--availh) * .096)), 8em);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head head" "hand dock";
    align-items:end;column-gap:.3em;row-gap:0}
  .game.mob .zone.bottom .zhead{grid-area:head}
  .game.mob .zone.bottom .zhead .shown .card{--cw:2.2em}
  .game.mob .zone.bottom>.area.handarea,.game.mob .zone.bottom>.area.shown{grid-area:hand;margin:0;min-width:0;position:relative}
  .game.mob .zone.bottom .fan{--cw:var(--fcw);--ay:.12em;--ar:2deg;max-width:none;width:calc(100% - 1.6em);margin:0 auto;height:calc(var(--cw) * 447 / 320 + 1.75em)}
  .game.mob .zone.bottom .cards.hand{min-height:calc(var(--fcw) * 447 / 320 + 1.75em);align-items:center;justify-content:center;padding:0}
  .game.mob .zone.bottom>.gatedraw{display:flex;flex-direction:column;align-items:center;min-height:calc(var(--fcw) * 447 / 320 + 1.75em)}
  .game.mob .zone.bottom>.gatedraw .card{--cw:calc(var(--fcw) * .85)}
  .game.mob .zone.bottom>.gatedraw .cards{gap:.6em;padding-top:.7em}
  .game.mob .handarea>.btn.small{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;margin:0;min-height:40px} /* hotseat：手札を見る／隠す */
  /* 決着卡（親選牌時，手牌右邊上下兩張；鎖定原因寫在那張下面） */
  .game.mob .dock{grid-area:dock;display:flex;align-self:center;padding-bottom:.2em}
  .game.mob .dock .decl{margin:0;display:flex;flex-direction:column;align-items:center;gap:.15em}
  .game.mob .dock .declhead{font-size:.6em;color:var(--accent);font-weight:bold;line-height:1.2;white-space:nowrap}
  .game.mob .dock .declopts{flex-direction:column;flex-wrap:nowrap;gap:.3em;margin:0}
  .game.mob .dock .resbtn{width:auto;min-width:4.4em;min-height:40px;font-size:.6em;padding:.2em .25em;gap:.05em;line-height:1.2;border-radius:6px;justify-content:center}
  .game.mob .dock .resbtn .rcap{white-space:nowrap}
  .game.mob .dock .resbtn small{display:block;margin:0;color:#ffcf9a;font-size:.95em;white-space:nowrap}
  .game.mob .dock .resbtn img{width:calc(var(--fcw) * 1.12);border-radius:4px}
  .game.mob .dock .resbtn.locked::after{display:none}
  .game.mob .dock .resbtn.locked .resimg::after{content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;background:repeating-linear-gradient(-45deg,rgba(0,0,0,.35) 0 6px,rgba(255,255,255,.38) 6px 8px)}
  /* 大招提示：名牌那列右邊一行，點開看算式（浮在自己那區上面） */
  .game.mob .ychip{flex:0 1 auto;min-width:0;font-size:.74em;border:1px solid var(--line);border-radius:6px;background:rgba(0,0,0,.35)}
  .game.mob .ychip>summary{list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.35em .55em;color:var(--text);font-weight:bold;min-height:2.6em;display:flex;align-items:center}
  .game.mob .ychip>summary::-webkit-details-marker{display:none}
  .game.mob .ychip:not(.yb-mixed)>summary{color:#ffd45e}
  .game.mob .ychip>.yakuban{position:absolute;left:.2em;right:.2em;bottom:calc(100% + .3em);z-index:9;margin:0;background:rgba(12,10,6,.96);font-size:1.15em;box-shadow:0 4px 14px rgba(0,0,0,.6)}
  /* 中央：上＝山札・捨て札・場地一列小格；下＝輪抽池／対決區（卡片大小跟著剩下的空間，container query） */
  .game.mob .mid{display:grid;grid-template-rows:auto minmax(0,1fr);gap:.2em;padding:.25em .4em;min-height:0}
  .game.mob .piles{flex-direction:row;justify-content:flex-start;gap:.9em;padding-right:9.5em}
  .game.mob .pile{display:grid;grid-template-columns:auto auto;grid-template-areas:"c l" "c s";align-items:center;column-gap:.3em;justify-content:start}
  .game.mob .pile>.plab{grid-area:l;align-self:end;font-size:.66em}
  .game.mob .pile>.psub{grid-area:s;align-self:start;font-size:.62em}
  .game.mob .pile>:not(.plab):not(.psub){grid-area:c}
  .game.mob .pile .card,.game.mob .pile .card.small{--cw:2.3em}
  .game.mob .arena{--acw:min(8em, calc((100cqw - 1.6em) / 4.4), calc((100cqh - 7.6em) / 2.8));min-height:0;overflow:visible;justify-content:center;gap:.15em}
  .game.mob .arena .card,.game.mob .crow .rescard{--cw:var(--acw)}
  /* 対決區一列：上＝小徽章＋「名字（親／子）」，下＝3 張＋決着卡（右邊那格兩列都留著，兩列的牌才對齊）；寬度全給牌（--acw） */
  .game.mob .crow{display:grid;grid-template-columns:auto auto calc(var(--acw) * 1.4);grid-template-areas:"b l l" "t t r";justify-content:center;align-items:center;column-gap:.35em;row-gap:.15em;padding-top:0}
  .game.mob .crow>.charbadge{grid-area:b;height:1.8em}
  .game.mob .crow>.crowlab{grid-area:l;position:static;font-size:.72em}
  .game.mob .crow>.three{grid-area:t}
  .game.mob .crow>.rescard{grid-area:r}
  .game.mob .crow .rescard .restxt{font-size:.55em;line-height:1.3}
  .game.mob .arena .vs{font-size:.75em;line-height:1.2}
  .game.mob .arena .lockwhy{margin:0;padding:.15em .4em;font-size:.72em}
  .game.mob .arena.draft{justify-content:center}
  .game.mob .arena .pool .card{--cw:min(8.5em, calc((100cqw - 1.2em) / 4), calc((100cqh - 5em) / 1.4))}
  .game.mob .arena .cards.pool{justify-content:center;flex-wrap:nowrap}
  .game.mob .arena.draft .note{font-size:.68em;line-height:1.35;margin:.15em 0 0}
  .game.mob .arena.gate{font-size:.85em;padding:.3em}
  /* 揭曉的結果面板：浮在中央下半＋自己那區上面（覆蓋層，不推動版面；「次へ」在下方狀態列） */
  .game.mob .table>.panel.reveal{grid-row:2 / 4;align-self:end;z-index:8;margin:0;max-height:100%;overflow:auto;font-size:.86em;padding:.35em .6em;
    background:#0e0c08;box-shadow:0 -4px 24px rgba(0,0,0,.7),0 0 0 1px rgba(216,180,90,.5)}
  .game.mob .panel .otitle{font-size:1.3em}
  .game.mob .panel .pairs{margin:.15em 0;font-size:.85em}
  .game.mob .panel table.calc{margin:.15em 0;font-size:.88em}
  /* 揭曉後收起來的「このターンの対決結果」：中央右上角一行，點開往下展開 */
  .game.mob .table>details.panel{grid-row:2;align-self:start;justify-self:end;z-index:8;margin:.25em .3em 0 0;max-width:min(9.5em,40%);max-height:100%;overflow:auto;
    padding:.25em .45em;font-size:.72em;background:rgba(12,10,6,.94)}
  .game.mob .table>details.panel>summary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .game.mob .table>details.panel[open]{max-width:calc(100% - .6em);font-size:.8em}
  .game.mob .table>details.panel[open]>summary{white-space:normal}
  /* 遊戲結束：浮在畫面中央 */
  .game.mob .table>.overbox{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;width:min(30em,94vw);max-height:calc(var(--availh) * .84);overflow:auto;margin:0;
    background:rgba(12,10,6,.96);box-shadow:0 10px 40px rgba(0,0,0,.8),0 0 0 1px rgba(216,180,90,.5)}
  /* 狀態列＋主要按鈕（.table 最後一列） */
  .game.mob .table>.actionbar{margin:0 -.4em;padding:.25em .45em calc(.25em + env(safe-area-inset-bottom));gap:.35em}
  .game.mob .actionbar .status{padding:.15em .4em;font-size:.86em;line-height:1.3}
  .game.mob .actionbar .status .phase{display:inline;font-size:.85em;margin-right:.45em}
  .game.mob .actionbar .status .todo{display:inline;font-size:1em}
  .game.mob .actionbar .wait{display:inline;margin-left:.45em}
  .game.mob .abtn .btn{min-height:42px;padding:.4em .85em}
  /* 直式：一屏看完（高度＝畫面 − 頁首；字級跟著畫面縮） */
  @media (orientation:portrait){
    .game.mob .table{height:calc(var(--availh) - var(--hh));font-size:clamp(11px, min(3.5vw, calc(var(--availh) * .0185)), 15px)}
    .game.mob .arena{container-type:size}
  }
}

/* ===== 卡牌移動動畫（2026-10-11，app/anim.js）：替身（.ag）在 body 上的一層飛行；翻面＝CSS 3D rotateY（正反兩面 backface-visibility）。
   真的牌在動畫期間 visibility:hidden，結束一起換回來。時間參數在 anim.js 的 T。 ===== */
.animlayer{position:absolute;left:0;top:0;width:0;height:0;overflow:visible;z-index:4;pointer-events:none} /* 在頁首（5）、下方操作列（6）底下，跟真的牌一樣 */
.ag{position:absolute;left:0;top:0;perspective:900px;will-change:transform}
.ag .agi{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.ag .agf{position:absolute;inset:0;border-radius:6px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#222;box-shadow:0 4px 12px rgba(0,0,0,.6)}
.ag .agf img{display:block;width:100%;height:100%;object-fit:cover}
.ag .agf.bk{transform:rotateY(180deg);background:#111}
.ag.mk{border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe0a0,#d98b2b 55%,#7a4410);box-shadow:0 1px 6px rgba(0,0,0,.9),0 0 8px rgba(255,200,110,.6)}
.panchor{position:relative}
/* 開門揭示（2026-10-13 作者）：抽到的牌正面朝上放在各自面前，標「門牌」與「→ 最初の親」；全員確認後才進手牌 */
.gatedraw .cards{align-items:center;padding-top:.5em}
.gtag{position:absolute;top:-.6em;left:50%;transform:translateX(-50%);z-index:4;background:linear-gradient(#e2c26a,#b8862b);color:#1d1406;font-weight:bold;font-size:.72em;padding:0 .45em;border-radius:4px;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.6)}
.gdealer{align-self:center;font-weight:bold;color:#ffcf9a;font-size:.85em;white-space:nowrap}
.arena.gate{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:.6em;font-size:.9em;min-height:6em}
.arena.gate p{margin:.2em 0}

/* ===== 奥義名の演出（2026-10-14，app/ougi.js）：交手揭曉、翻牌之前把親的奥義名（7 字）一字一字打在畫面上。
   等級 .og-t1／.og-t2／.og-t3（門檻見 ougi.js 的 ougiTier）；時間由 ougi.js 用 CSS 變數給（--og-ch 每字間隔、--og-chdur 一字浮現、--og-out 開始淡出）。
   .og-rm＝prefers-reduced-motion：只整體淡入淡出。 ===== */
.ougi{position:fixed;inset:0;z-index:35;pointer-events:none;display:flex;align-items:center;justify-content:center;overflow:hidden;
  animation:og-out var(--og-fade) ease-in var(--og-out) forwards}
.ougi .og-bg{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,0) 72%);animation:og-fadein 220ms ease-out both}
.ougi .og-box{position:relative;display:flex;flex-direction:column;align-items:center;max-width:96vw}
.ougi .og-who{font-size:clamp(12px,2.6vw,20px);letter-spacing:.3em;color:#e8d9a8;text-shadow:0 1px 3px #000;opacity:0;animation:og-fadein 260ms ease-out both;margin-bottom:.2em}
.ougi .og-name{display:flex;align-items:baseline;white-space:nowrap;line-height:1.15;font-weight:900;letter-spacing:.02em;
  font-family:"Noto Serif CJK JP","Noto Serif CJK TC","Source Han Serif","Yu Mincho","YuMincho","Hiragino Mincho ProN","MS PMincho",serif;
  font-size:clamp(28px,min(10.4vw,15vh),112px)}
.ougi .og-ch,.ougi .og-dot{display:inline-block;opacity:0;animation:og-ch1 var(--og-chdur) ease-out calc(var(--i) * var(--og-ch)) forwards}
.ougi .og-dot{font-size:.55em;margin:0 .05em;align-self:center}
.ougi .og-yaku{align-self:flex-end;margin:.15em .4em 0 0;font-size:clamp(14px,3.6vw,30px);font-weight:900;letter-spacing:.25em;padding:.05em .5em .05em .75em;
  border:2px solid currentColor;border-radius:4px;opacity:0;animation:og-yaku 360ms ease-out var(--og-appear) forwards}
/* 1 級：淡金字、輕微光暈 */
.og-t1 .og-name,.og-t1 .og-yaku{color:#f1e3ab;text-shadow:0 0 8px rgba(240,205,110,.55),0 2px 4px rgba(0,0,0,.9)}
/* 2 級：金字＋強光暈＋衝擊縮放 */
.og-t2 .og-bg{background:radial-gradient(ellipse at center,rgba(0,0,0,.7) 0%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.1) 80%)}
.og-t2 .og-ch,.og-t2 .og-dot{background:linear-gradient(180deg,#fff7cf 0%,#ffd75e 42%,#d8901e 78%,#ffe8a0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 6px rgba(255,200,70,.95)) drop-shadow(0 0 18px rgba(255,160,40,.7)) drop-shadow(0 3px 2px rgba(0,0,0,.8));animation-name:og-ch2}
.og-t2 .og-yaku{color:#ffd75e;text-shadow:0 0 10px rgba(255,190,60,.9)}
/* 3 級：白金字、閃光、背景暗化、震動、粒子 */
.og-t3 .og-bg{background:rgba(4,4,10,.72);animation:og-fadein 120ms ease-out both}
.og-t3 .og-flash{position:absolute;inset:0;background:radial-gradient(circle at center,#fff 0%,#fff6dc 40%,rgba(255,240,200,.85) 100%);opacity:0;animation:og-flash 520ms ease-out both}
.og-t3 .og-name{animation:og-shake 110ms linear var(--og-appear) 9 alternate}
.og-t3 .og-ch,.og-t3 .og-dot{background:linear-gradient(180deg,#ffffff 0%,#eef3ff 35%,#b9c6e0 60%,#ffffff 80%,#d8e2f8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 16px rgba(170,205,255,.95)) drop-shadow(0 0 34px rgba(120,160,255,.7));animation-name:og-ch3}
.og-t3 .og-yaku{color:#fff;text-shadow:0 0 8px #fff,0 0 22px rgba(150,190,255,.95);box-shadow:0 0 16px rgba(170,205,255,.7)}
.og-t3 .og-who{color:#fff}
.ougi .og-parts{position:absolute;left:50%;top:55%;width:0;height:0}
.ougi .og-parts i{position:absolute;left:var(--x);top:0;width:.5vmin;height:.5vmin;min-width:4px;min-height:4px;border-radius:50%;background:#fff;
  box-shadow:0 0 6px 2px rgba(255,236,170,.95),0 0 14px 4px rgba(150,190,255,.6);opacity:0;
  animation:og-part 1100ms cubic-bezier(.15,.7,.3,1) calc(var(--og-appear) * .6 + var(--pd)) forwards}
/* reduced-motion：只淡入淡出（沒有逐字、縮放、閃光、震動、粒子） */
.ougi.og-rm{animation:og-rmout var(--og-fade) ease-in var(--og-out) forwards}
.ougi.og-rm .og-ch,.ougi.og-rm .og-dot,.ougi.og-rm .og-yaku,.ougi.og-rm .og-who,.ougi.og-rm .og-name,.ougi.og-rm .og-bg{animation:none;opacity:1;transform:none}
.ougi.og-rm .og-box{opacity:0;animation:og-fadein var(--og-rmin) ease-out forwards}
@keyframes og-fadein{from{opacity:0}to{opacity:1}}
@keyframes og-out{to{opacity:0}}
@keyframes og-rmout{to{opacity:0}}
@keyframes og-ch1{0%{opacity:0;transform:translateY(.12em);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
@keyframes og-ch2{0%{opacity:0;transform:scale(2.3)}55%{opacity:1;transform:scale(.9)}78%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes og-ch3{0%{opacity:0;transform:scale(3) rotate(-6deg)}50%{opacity:1;transform:scale(.86) rotate(1deg)}75%{transform:scale(1.08)}100%{opacity:1;transform:none}}
@keyframes og-yaku{0%{opacity:0;transform:translateX(.6em) scale(1.4)}100%{opacity:1;transform:none}}
@keyframes og-flash{0%{opacity:0}12%{opacity:.92}100%{opacity:0}}
@keyframes og-shake{0%{transform:translate(0,0)}25%{transform:translate(-3px,2px)}50%{transform:translate(3px,-2px)}75%{transform:translate(-2px,-3px)}100%{transform:translate(2px,3px)}}
@keyframes og-part{0%{opacity:1;transform:translate(0,0) scale(1.4)}70%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
/* 覚醒終結の演出（2026-10-14，app/finish.js）：4 張牌飛到中央上方一列、翻正、發光；下面打出「覚醒終結」（奥義名 3 級效果，.og-fin 把字往下移） */
.overbox[data-hold]{visibility:hidden!important}
.finfx{position:fixed;inset:0;z-index:34;pointer-events:none;overflow:hidden}
.finfx::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 33%,rgba(60,40,0,.55) 0%,rgba(0,0,0,.6) 70%);animation:og-fadein 300ms ease-out both}
.finfx .fincard{position:absolute;left:0;top:0;perspective:900px;z-index:37}
.finfx .fci{position:absolute;inset:0;transform-style:preserve-3d}
.finfx .fcf{position:absolute;inset:0;border-radius:7px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#222;box-shadow:0 6px 18px rgba(0,0,0,.7)}
.finfx .fcf.bk{transform:rotateY(180deg)}
.finfx .fcf img{width:100%;height:100%;display:block;object-fit:cover}
.finfx.fin-glow .fcf.fr{animation:fin-glow 900ms ease-in-out infinite alternate}
.finfx.fin-out .fincard{animation:og-out 400ms ease-in forwards}
.finfx.fin-out::before{animation:og-out 400ms ease-in forwards}
.finfx .ougi.og-fin{z-index:36}
.finfx .ougi.og-fin .og-box{margin-top:34vh}
.finfx .ougi.og-fin .og-bg{background:radial-gradient(ellipse at 50% 72%,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 60%)}
.finfx.fin-rm .fincard{opacity:1}
@keyframes fin-glow{from{box-shadow:0 0 10px 2px rgba(255,220,120,.75),0 0 30px 6px rgba(255,190,60,.45)}to{box-shadow:0 0 18px 6px rgba(255,245,200,.95),0 0 50px 14px rgba(255,200,80,.7)}}
@media (prefers-reduced-motion:reduce){.finfx.fin-glow .fcf.fr{animation:none;box-shadow:0 0 14px 4px rgba(255,230,150,.85)}}
/* 結束面板的對局紀錄按鈕（2026-10-14） */
.recbtns{display:flex;flex-wrap:wrap;gap:.35em;justify-content:center;margin:.4em 0 .6em}
.recbtns .btn{margin:0}
.recnone{text-align:center}

/* ===== 回放頁（2026-10-14，app/replay.html／replay.js）：上方操作列＋全知視角的桌面；側欄（手機在下面）＝資訊、選項、全手順 ===== */
.replay .actionbar,.replay .controls{display:none}
#rpboard:has(.game){display:contents} /* .game 要是 main 的直接 flex 子項（桌機高度貼齊視窗、手機一屏） */
.rplist .rpt{flex:1;min-width:0}
.rpctl,#rpctl:not(:empty){background:rgba(8,16,12,.94);border-bottom:1px solid #6b5420;padding:.3em .45em;z-index:7}
.rpnav{display:flex;align-items:center;gap:.3em;flex-wrap:nowrap}
.rpnav .btn{margin:0;white-space:nowrap;display:inline-flex;gap:.25em;align-items:center}
.rpnav input[type=range]{flex:1;min-width:3em;width:auto;accent-color:var(--accent);margin:0 .2em}
.rpcount{font-size:.8em;white-space:nowrap;color:var(--muted);min-width:4.5em;text-align:right}
.rpdesc{font-size:.88em;line-height:1.4;margin-top:.25em;max-height:4.3em;overflow:auto}
.rpdesc>div:first-child{font-weight:bold;color:#ffe9b0}
.rpougi{font-weight:bold;color:#f1e3ab}.rpougi.og-t2{color:#ffd45e}.rpougi.og-t3{color:#fff;text-shadow:0 0 6px rgba(170,205,255,.9)}
.rpinfo>div{margin:.1em 0}
.rpopts{display:flex;flex-wrap:wrap;gap:.3em .9em;align-items:center;margin:.35em 0}
.rpopts .row{margin:0}.rpopts .btn{margin:0}
.rplist{max-height:40vh;overflow:auto;margin:0;padding:0;list-style:none;font-size:.8em;position:relative}
.rpsteps{overflow:hidden;flex:none} /* 清單只在自己的框裡捲，任何版面都不溢出到下一個區塊 */
.rplist li{padding:.18em .3em;border-bottom:1px solid var(--line);cursor:pointer;display:flex;gap:.45em;align-items:baseline}
.rplist li.cur{background:rgba(216,180,90,.28)}
.rplist .rpn{color:var(--muted);min-width:2.2em;text-align:right;flex:none}.rplist .rpw{color:var(--muted);white-space:nowrap;font-size:.9em;flex:none}
.rpload textarea{width:100%;box-sizing:border-box;font-family:ui-monospace,Consolas,monospace;font-size:.8em}
.rpfile{cursor:pointer}
.rp-hideover .table>.overbox{display:none}
/* 自動播放列（2026-10-14）：▶ 自動再生／⏸ 停止、間隔、ループ再生 */
.rpauto{display:flex;align-items:center;gap:.3em .7em;flex-wrap:wrap;margin-top:.3em;font-size:.88em}
.rpauto .btn{margin:0;display:inline-flex;gap:.25em;align-items:center;white-space:nowrap}
.rpauto .row{margin:0;white-space:nowrap;display:inline-flex;align-items:center;gap:.2em}
.rpgap{display:inline-flex;gap:.3em;align-items:center;white-space:nowrap;color:var(--muted)}
.rpgap select{width:auto;padding:.1em .2em;font-size:1em}
/* 展示模式（#kiosk）：只留桌面；Esc 或點一下恢復 */
.rp-kiosk header,.rp-kiosk #rpctl,.rp-kiosk .side,.rp-kiosk .inappbar{display:none!important}
.rp-kiosk .game{grid-template-columns:minmax(0,1fr)!important}
.rp-kiosk{cursor:none}
@media (min-width:960px) and (orientation:landscape){
  /* 桌機：操作列放在右側欄最上面（蓋在側欄的上方留白上），桌面高度跟對局時一樣 */
  .replay main:has(.game){position:relative}
  .replay main>#rpctl:not(:empty){position:absolute;top:.4em;right:.8em;width:clamp(250px,22vw,340px);height:15rem;box-sizing:border-box;margin:0;
    border:1px solid #6b5420;border-radius:10px;display:flex;flex-direction:column;z-index:9}
  .replay .side{padding-top:15.5rem}
  .replay.rp-kiosk .side{padding-top:0}
  .replay.rp-kiosk main:has(.game){height:var(--availh)}
  .replay .rpnav{flex-wrap:wrap;row-gap:.35em}
  .replay .rpnav .btn{flex:1 1 0;justify-content:center;padding:.35em .3em}
  .replay .rpnav input[type=range]{order:5;flex:1 1 70%;margin:0}
  .replay .rpcount{order:6;min-width:0}
  .replay .rpdesc{flex:1;max-height:none;min-height:0;font-size:.84em;border-top:1px solid var(--line);padding-top:.25em}
  /* 全手順填滿側欄剩下的高度（2026-10-14 修：原本 details 設 flex、清單 max-height:none，但 details 的內容包在 ::details-content 裡，
     清單不是 flex 子項 → 清單整條（幾千 px）長出框外、疊到「対決の詳細」「ログ」上。現在讓 ::details-content 也是 flex 欄；
     不支援 ::details-content 的瀏覽器維持清單 max-height:40vh 在框內捲。） */
  @supports selector(::details-content){
    .replay .side>.rpsteps[open]{flex:1 1 auto;min-height:10em;display:flex;flex-direction:column}
    .replay .side>.rpsteps[open]::details-content{flex:1;min-height:0;display:flex;flex-direction:column}
    .replay .side>.rpsteps[open] .rplist{max-height:none;flex:1;min-height:0}
  }
}
@media not all and (min-width:960px) and (orientation:landscape){
  .replay{--rph:7.4rem}
  .replay.rp-kiosk{--rph:0px;--hh:0px}
  .replay .rpauto{font-size:.8em;margin-top:.2em}
  .replay .rpauto .btn{padding:.25em .6em;min-height:30px}
  .replay main>#rpctl{order:-1;position:sticky;top:var(--hh);margin:0 -.4em}
  .replay .rpnav .btn{padding:.35em .5em;font-size:.75em;min-height:34px}
  .replay .rpnav .rpend .tx{display:none}
  .replay .rpcount{font-size:.7em;min-width:0}
  .replay .rpdesc{font-size:.76em;line-height:1.35}
  @media (orientation:portrait){
    .replay main>#rpctl:not(:empty){height:var(--rph);box-sizing:border-box;overflow:hidden}
    .replay .rpdesc{max-height:calc(var(--rph) - 4.9rem)}
    .replay .game.mob .table{height:calc(var(--availh) - var(--hh) - var(--rph))}
  }
}

/* ===== App 內建瀏覽器與流式版面（app/viewport.js；2026-10-14 建、10-18 改成流式、10-18 第二次改成純文件流）=====
   html.inapp：UA 是 X、LINE…的內建瀏覽器；頁首下面一條提示（外部ブラウザで開く），在正常流裡、捲動時鑽到 sticky 頁首底下（不蓋住頁首）。
   html.flow：流式版面（內建瀏覽器、量到 100dvh 跟看得到的高度差很多、或玩家在 ≡ 選單選了「スクロール」）。
     手機版（回放頁除外）不固定一屏高，整個桌面是**純文件流**：對手 → 中央（山札・捨て札・場地＋輪抽池／対決區）→ 結果面板（揭曉時）
     → 自己（名牌、手牌、決着卡）→ 狀態列＋主要按鈕（緊接在自己那區下面）→ 說明 → ログ／詳細 → 頁尾留白 160px。
     沒有 sticky／fixed（只有回合過場、奥義名這類短暫演出與放大圖仍是浮層）、沒有撐高或固定高度，桌面高＝內容高；卡片大小只看寬度。
     為什麼：X 的 Android 內建瀏覽器回報的視窗高度跟實際看得到的不一樣，sticky 的狀態列被貼在畫面中段、蓋住手牌，
     浮動的結果面板蓋住「次へ」（10-18 實機截圖 source/reference/inapp-x-android-v2-*）。純文件流不依賴任何高度，往下捲就一定看得到、點得到。
     頁尾 160px：X 工具列蓋住網頁最底下約 90px，留白保證最後一個可點的東西捲到底時在工具列上方。一般瀏覽器沒有這個 class，版面不變。 */
.inappbar{display:flex;align-items:center;flex-wrap:wrap;gap:.3em .5em;padding:.3em .5em;background:#2a2110;border-bottom:1px solid #6b5420;font-size:.82em;line-height:1.3;position:static}
.inappbar[hidden]{display:none}
.inappbar .iamsg{flex:1 1 9em;color:#ffe9b0}
.inappbar .btn{margin:0;min-height:32px;padding:.2em .7em;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center}
.inappbar .iaclose{background:transparent;border:0;color:var(--muted);font-size:1.4em;line-height:1;min-width:36px;min-height:32px;cursor:pointer}
.inapptoast{position:fixed;left:.6em;right:.6em;top:calc(var(--hh,2.5rem) + .5em);z-index:60;background:rgba(12,10,6,.97);border:1px solid var(--accent);border-radius:8px;padding:.6em .8em;font-size:.9em;word-break:break-all;box-shadow:0 6px 20px rgba(0,0,0,.6)}
.inapptoast[hidden]{display:none}
html.flow body{padding-bottom:calc(160px + env(safe-area-inset-bottom))}
@media not all and (min-width:960px) and (orientation:landscape){
  html.flow body:not(.replay) main:has(.game){padding-bottom:0}
  html.flow body:not(.replay) .game.mob .table{display:flex;flex-direction:column;height:auto;min-height:0;gap:.3em;font-size:clamp(11px, 3.5vw, 15px)}
  html.flow body:not(.replay) .game.mob .table>*{flex:none}
  html.flow body:not(.replay) .game.mob .table>:is(.actionbar,.panel,.overbox){position:static}
  html.flow body:not(.replay) .game.mob .zone.bottom{--fcw:clamp(3.6em, 18.5vw, 8em);padding-bottom:.8em} /* 扇形兩端斜放的牌角不超出自己那區、不壓到狀態列 */
  html.flow body:not(.replay) .game.mob .arena{container-type:inline-size;--acw:min(8em, calc((100cqw - 1.6em) / 4.4))}
  html.flow body:not(.replay) .game.mob .arena .pool .card{--cw:min(8.5em, calc((100cqw - 1.2em) / 4))}
  /* 結果面板（揭曉）：中央與自己那區之間的一般區塊；「次へ」在自己那區下面的狀態列，不被蓋 */
  html.flow body:not(.replay) .game.mob .table>.panel.reveal{align-self:stretch;max-height:none;overflow:visible;margin:0;box-shadow:0 0 0 1px rgba(216,180,90,.5)}
  /* 揭曉後收起來的摘要：中央下面靠右一行（不再浮在中央上） */
  html.flow body:not(.replay) .game.mob .table>details.panel{align-self:flex-end;margin:0 .3em 0 0;max-height:none}
  /* 遊戲結束：同樣在中央與自己那區之間（不浮在畫面中央） */
  html.flow body:not(.replay) .game.mob .table>.overbox{align-self:stretch;left:auto;top:auto;transform:none;width:auto;max-height:none;overflow:visible;margin:0;box-shadow:0 0 0 1px rgba(216,180,90,.5)}
  /* 狀態列＋主要按鈕：緊接在自己那區下面（不 sticky） */
  html.flow body:not(.replay) .game.mob .table>.actionbar{margin:0 -.4em}
}
/* ≡ 選單裡的「表示モード：自動／スクロール」：只在窄螢幕的下拉選單裡顯示（寬螢幕沒有下拉選單、也用不到） */
.layoutsw{display:none}
@media (max-width:899px){
  header #gnav .layoutsw{display:flex;flex-wrap:wrap;align-items:center;gap:.3em .5em;border-top:1px solid var(--line);margin-top:.3em;padding:.55em .9em .35em;font-size:.88em;color:var(--text)}
  header #gnav .layoutsw .lslab{white-space:nowrap}
  header #gnav .layoutsw .lsbtns{display:inline-flex;gap:.25em}
  header #gnav .layoutsw button{border:1px solid rgba(216,180,90,.5);color:var(--text);background:transparent;padding:.3em .7em;font-size:.95em;min-height:34px;border-radius:5px}
  header #gnav .layoutsw button.on{background:var(--accent);color:#1d1406;border-color:var(--accent);font-weight:bold}
  header #gnav .layoutsw .lshint{flex:1 1 100%;color:var(--muted);font-size:.8em;line-height:1.35;max-width:14em}
}

/* ===== 聲音（2026-10-14，app/sound.js）：頁首 🔊／🔇 按鈕＋下拉面板（BGM、效果音的開關與音量） ===== */
.sndsw{position:relative;display:inline-flex}
header .sndbtn{font-size:1em;line-height:1;padding:.15em .35em;min-width:2em}
header .sndbtn.pending{opacity:.55} /* 設定開著、但這一頁還沒點過畫面（瀏覽器未放行）：🔈 半透明 */
.sndpanel{position:absolute;top:calc(100% + .45em);right:0;z-index:45;min-width:14em;background:rgba(8,16,12,.97);border:1px solid #6b5420;border-radius:8px;padding:.5em .7em;
  box-shadow:0 6px 18px rgba(0,0,0,.5);color:var(--text);font-size:.9em}
.sndpanel[hidden]{display:none}
.sndpanel .sndhead{color:var(--accent);font-weight:bold;margin-bottom:.2em}
.sndpanel .sndrow{display:flex;align-items:center;gap:.4em;margin:.35em 0 .1em;min-height:32px}
.sndpanel .sndvol{display:flex;align-items:center;gap:.5em;margin:0 0 .3em 1.6em;font-size:.85em;color:var(--muted)}
.sndpanel .sndvol span{white-space:nowrap}
.sndpanel .sndvol input{flex:1;min-width:6em;accent-color:var(--accent)}
.sndpanel .sndnote{margin:.4em 0 0;font-size:.78em;line-height:1.4}
.rp-kiosk .sndsw{display:none}
@media (max-width:400px){header .sndbtn{padding:.1em .25em;min-width:1.8em}}