:root { --bg:#0d1322; --felt1:#16203a; --felt2:#0e1626; --panel:#182134; --panel2:#1f2c44; --line:#2d3d5c;
  --ink:#edf2fa; --dim:#93a3bd; --gold:#f0c674; --accent:#4f8ce8; --green:#58c081; --red:#e05a4f; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; }
body { background:var(--bg); color:var(--ink); font-family:'Kanit',-apple-system,sans-serif; user-select:none; -webkit-user-select:none; overflow:hidden; }
#app { height:100dvh; }
button { font-family:inherit; cursor:pointer; }

/* ---------- landing ---------- */
.landing { max-width:520px; margin:0 auto; padding:34px 22px 22px; display:flex; flex-direction:column; gap:12px; height:100dvh; overflow-y:auto; }
.logo { font-size:42px; margin:0; } .logo em { color:var(--gold); font-style:normal; }
.tagline { color:var(--dim); margin:-6px 0 8px; font-weight:300; }
.pick h3 { margin:4px 0 6px; font-size:15px; color:var(--dim); font-weight:400; }
.deckopt { display:block; width:100%; text-align:left; margin:4px 0; padding:10px 14px; border-radius:12px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font-size:15px; }
.deckopt.on { border-color:var(--gold); background:var(--panel2); }
.btn { border:none; border-radius:13px; padding:13px 22px; font-size:16px; font-weight:500; background:var(--accent); color:#fff; }
.btn.go { font-size:19px; padding:15px; margin-top:6px; }
.btn.alt { background:var(--panel2); color:var(--dim); border:1px solid var(--line); }
.btn:disabled { opacity:.35; } .btn:active { transform:scale(.97); }
.devnotice { background:linear-gradient(160deg, rgba(240,198,116,.08), rgba(240,198,116,.02)); border:1px solid rgba(240,198,116,.35); border-radius:14px; padding:14px 16px; font-size:13px; line-height:1.7; font-weight:300; color:var(--ink); max-width:560px; }
.devnotice p { margin:8px 0 0; }
.devnotice .dn-head { font-weight:700; font-size:14.5px; color:var(--gold); }
.devnotice .dn-v { font-weight:300; color:var(--dim); font-size:12px; margin-left:6px; }
.devnotice .dn-focus { background:rgba(255,255,255,.04); border-radius:10px; padding:8px 12px; }
.devnotice .dn-dim { color:var(--dim); font-size:12px; }
.devnotice a { color:var(--gold); }
.howto { color:var(--dim); font-size:13.5px; font-weight:300; line-height:1.7; }
.howto summary { color:var(--ink); cursor:pointer; }
.disclaimer { margin-top:auto; padding-top:20px; color:#54658a; font-size:11px; line-height:1.6; font-weight:300; }

/* ---------- game: full-viewport board ---------- */
.game { position:fixed; inset:0; overflow:hidden;
  /* playmat (Bell 2026-09-11, after the Duels.ink comparison): a flat, slightly lighter table — the zones are drawn as
     framed panels (.half / .basestrip) on top of it, like a two-sided playmat, instead of the old red/green side gradients */
  background:#161e31;
  /* Blender-rendered playmat (assets/blender/playmat.py → public/playmat.webp, 48 KB): bevelled honeycomb tiles under a soft
     key light — a static render, not runtime 3D (phones). The flat colour above stays as the fallback while it loads. */
  background:#121a2c url('playmat.webp') center/cover no-repeat;
}
.game::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0,0,0,.35) 100%); }

/* opponent strip */
.oppstrip { position:absolute; top:0; left:0; right:0; height:64px; display:flex; align-items:flex-start; justify-content:center; z-index:3; }
.oppfan { display:flex; margin-top:-26px; }
.cardback { width:46px; height:64px; border-radius:6px; margin-left:-18px;
  background:linear-gradient(135deg,#2b2350,#151a33 60%), #151a33; border:1.5px solid #3a3566;
  box-shadow:0 3px 8px rgba(0,0,0,.5); position:relative; }
.cardback::after { content:''; background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0c24b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'/></svg>") center/16px no-repeat; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:16px; opacity:.5; }
.deckbadge { position:absolute; right:10px; width:44px; height:60px; border-radius:6px;
  background:linear-gradient(135deg,#2b2350,#151a33 60%); border:1.5px solid #3a3566; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; color:#cfd8ea; box-shadow:0 3px 8px rgba(0,0,0,.5); z-index:4; }
.deckbadge.mine { bottom:190px; top:auto; }
.deckbadge.opp { top:8px; }

/* big rush point numerals */
.rpbig { position:absolute; left:12px; z-index:3; line-height:.9; pointer-events:none; }
.rpbig .n { font-size:48px; font-weight:700; color:#e8eefb; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.rpbig .l { font-size:11px; letter-spacing:2px; color:var(--dim); font-weight:400; }
.rpbig.opp { top:66px; } .rpbig.me { bottom:206px; }
.rpbig .sub { font-size:10.5px; color:#5f7194; font-weight:300; max-width:120px; line-height:1.35; }

/* board zones */
.board { position:absolute; inset:64px 0 178px; display:flex; flex-direction:column; justify-content:center; gap:6px; z-index:2; }
.rowz { display:flex; justify-content:center; gap:10px; }
.midline { display:flex; justify-content:center; padding:2px 0; }
.midline span { color:#6a7ea6; font-size:11px; font-weight:300; background:rgba(13,19,34,.55); border-radius:12px; padding:2px 12px; }
.slot { width:clamp(58px,min(17vw,17.9vh - 54px),76px); /* height term: 4 rows + midline + the playmat panel padding must fit .board on a 667px phone */ aspect-ratio:63/88; border-radius:8px;
  background:rgba(255,255,255,.025); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.13);
  display:flex; align-items:center; justify-content:center; }
.slot .zl { color:#516084; font-size:10px; font-weight:300; text-align:center; }
.ct { width:clamp(58px,min(17vw,17.9vh - 54px),76px); aspect-ratio:63/88; border:2px solid var(--line); border-radius:8px;
  background:var(--panel2) center/cover no-repeat; position:relative; box-shadow:0 4px 10px rgba(0,0,0,.45); }
.ct .pw { position:absolute; bottom:-7px; left:3px; font-size:10.5px; font-weight:700; background:#0d1526; border:1px solid var(--line); border-radius:8px; padding:0 5px; }
.ct .rgc { position:absolute; bottom:-7px; right:2px; font-size:9.5px; font-weight:600; color:var(--gold); background:#0d1526; border:1px solid var(--line); border-radius:8px; padding:0 4px; }
.ct .tag { position:absolute; top:-10px; left:50%; transform:translateX(-50%); font-size:15px; text-shadow:0 1px 3px #000; }
.ct.fdown { filter:saturate(.35) brightness(.5); }
.ct.fdown .fdmark { position:absolute; bottom:3px; left:50%; transform:translateX(-50%); font-size:9px; background:#0d1526cc; border-radius:6px; padding:0 5px; white-space:nowrap; }
.ct.can, .slot.can { box-shadow:0 0 0 2px rgba(88,192,129,.95), 0 0 18px rgba(88,192,129,.5); animation:pulse 1.5s infinite; cursor:pointer; }
.ct.pick { box-shadow:0 0 0 2.5px var(--gold), 0 0 16px rgba(240,198,116,.5); }
.ct.atk { box-shadow:0 0 0 2.5px var(--red), 0 0 16px rgba(224,90,79,.55); }
@keyframes pulse { 50% { box-shadow:0 0 0 4px rgba(88,192,129,.35), 0 0 22px rgba(88,192,129,.3); } }

/* coach pill */
.coach { position:absolute; top:137px; left:50%; transform:translateX(-50%); z-index:5; width:min(92vw,430px);
  background:rgba(13,19,34,.88); border:1px solid var(--line); border-radius:14px; padding:8px 14px;
  font-size:13.5px; line-height:1.5; text-align:center; box-shadow:0 6px 20px rgba(0,0,0,.4); }
.coach .tip { color:var(--dim); font-weight:300; font-size:12px; display:block; }
/* read-mode toggle: a small tab on the coach's top-right corner */
.coach .ichip { position:absolute; right:-6px; top:-13px; background:rgba(24,33,52,.97); color:var(--gold); border:1px solid rgba(240,198,116,.55); border-radius:12px; padding:4px 10px; font-size:11.5px; font-weight:600; font-family:inherit; box-shadow:0 3px 10px rgba(0,0,0,.4); cursor:pointer; display:flex; align-items:center; gap:4px; }
.coach .ichip:active { transform:scale(.95); }
.coach.peek { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; color:var(--gold); border-color:rgba(240,198,116,.55); font-size:12.5px; width:max-content; max-width:92vw; padding:7px 12px; }
.coach.peek .peekback { font-size:13px; padding:7px 12px; white-space:nowrap; margin:0; }
.defbar .peekbtn { background:none; border:1px dashed rgba(240,198,116,.5); color:var(--gold); font-size:13px; padding:8px 10px; }

/* my base strip */
.basestrip { position:absolute; left:14px; right:150px; bottom:150px; /* right edge stops short of the fab column (ไปช่วงโจมตี / End Turn) so base cards are never under a button */ display:flex; align-items:center; gap:6px; z-index:3;
  padding:0 8px; border-radius:12px; background:rgba(22,30,49,.93); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); } /* near-opaque over the playmat (Bell: ตาลาย) */
.basestrip .bl { color:#5f7194; font-size:10px; flex-shrink:0; }
.baserow { display:flex; gap:5px; overflow-x:auto; padding:8px 0 2px; }
/* tiles shrink to fit (down to 34px) before the row scrolls — a 6-card base must stay fully tappable, never hidden under the fabs */
.baserow .ct, .baserow .slot { width:44px; flex-shrink:1; min-width:34px; }
.baserow .ct .pw, .baserow .ct .rgc { display:none; }
/* opponent's base: mini tiles tucked into the bot header row (right of the RUSH counter, above the coach) — same strip, no extra row */
.basestrip.opp { top:70px; bottom:auto; left:150px; right:12px; justify-content:flex-end; pointer-events:none; background:none; box-shadow:none; padding:0; }
.basestrip.opp .bl { pointer-events:auto; }
.basestrip.opp .baserow { padding:2px 0; gap:4px; pointer-events:auto; }
.basestrip.opp .baserow .ct { width:32px; min-width:28px; border-width:1.5px; border-radius:5px; }
.basestrip.opp .baserow .ct.fdown .fdlogo { font-size:14px; }

/* hand fan */
.handfan { position:absolute; bottom:-34px; left:50%; transform:translateX(-50%); display:flex; z-index:6; padding:0 10px; max-width:100vw; }
.handfan .ct { width:clamp(86px,24vw,118px); margin-left:-30px; transition:transform .15s; box-shadow:0 -4px 16px rgba(0,0,0,.55); }
.handfan .ct:first-child { margin-left:0; }
.handfan .ct.can { transform:translateY(-16px); }
.handfan .ct.pick { transform:translateY(-26px); }
.handfan .ct .pw, .handfan .ct .rgc { display:none; }
/* hand cards: Power + Range pills under the printed level circle (the fan cuts off the card's own bottom print) */
.hstat { position:absolute; left:3px; top:27%; display:flex; flex-direction:column; align-items:flex-start; gap:2px; z-index:2; pointer-events:none; }
.hstat b, .hstat i { font-style:normal; background:#0d1526e6; border:1px solid var(--line); border-radius:8px; padding:0 5px; line-height:1.5; white-space:nowrap; }
.hstat b { font-size:11px; font-weight:700; }
.hstat i { font-size:9.5px; font-weight:600; color:var(--gold); }

/* fab column (end turn + undo) */
.fabcol { position:absolute; right:10px; bottom:96px; display:flex; flex-direction:column; gap:8px; z-index:7; align-items:flex-end; }
.fab { border:none; border-radius:14px; padding:13px 20px; font-size:15.5px; font-weight:600; background:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.45); }
.fab.alt { background:rgba(24,33,52,.92); color:var(--dim); border:1px solid var(--line); font-size:13px; padding:9px 14px; }
.fab.alt.peek { border-color:rgba(232,184,75,.6); color:var(--gold); }
.fab:disabled { opacity:.4; }
.fab:active { transform:scale(.96); }

/* defense / special action bar */
.defbar { position:absolute; bottom:170px; left:50%; transform:translateX(-50%); z-index:8; width:min(94vw,440px);
  display:flex; flex-direction:column; gap:7px; background:rgba(13,19,34,.92); border:1px solid var(--line);
  border-radius:16px; padding:12px; box-shadow:0 8px 28px rgba(0,0,0,.5); }
.defbar .btn { font-size:14px; padding:11px 12px; }
.defbar .defnote { font-size:12px; color:var(--muted, #9aa3b5); text-align:center; opacity:.85; }

/* log chip */
.logchip { position:absolute; top:44px; left:10px; z-index:6; background:rgba(13,19,34,.8); border:1px solid var(--line);
  color:var(--dim); border-radius:12px; padding:4px 11px; font-size:11.5px; font-weight:300; max-width:46vw;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }

/* ---------- overlays ---------- */
.overlay { position:fixed; inset:0; background:rgba(5,9,18,.85); display:flex; align-items:center; justify-content:center; z-index:85; padding:16px; }
.preview { text-align:center; max-width:340px; width:100%; max-height:94dvh; overflow-y:auto; }
.preview img { width:min(72vw,300px); border-radius:14px; box-shadow:0 0 40px rgba(240,198,116,.25), 0 14px 40px rgba(0,0,0,.6); }
.preview .info { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px 12px; margin-top:10px; text-align:left; }
.zn { font-size:16px; font-weight:600; } .zs { color:var(--dim); font-size:12.5px; font-weight:300; }
.kwline { background:rgba(240,198,116,.1); border:1px solid rgba(240,198,116,.3); border-radius:8px; padding:5px 9px; font-size:12px; margin:5px 0; text-align:left; }
.thbox { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:8px 12px; margin-top:10px; text-align:left; }
.thbox .kwline { margin:4px 0; }
.thline { font-size:13px; line-height:1.55; margin:4px 0; }
.thbox .efftext { margin-top:2px; }
.efftext { color:var(--dim); font-size:12px; font-weight:300; line-height:1.55; margin-top:6px; text-align:left; }
.preview .btns { display:flex; gap:8px; margin-top:10px; justify-content:center; flex-wrap:wrap; }
.preview .btn { font-size:15px; }
.warn { color:var(--red); font-size:13px; margin:6px 0; }

/* mulligan ceremony */
.mullscreen { position:fixed; inset:0; background:rgba(5,9,18,.86); z-index:40; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:16px; }
.mullscreen .bigtitle { font-size:clamp(26px,7vw,40px); font-weight:700; letter-spacing:4px; }
.mullscreen .pill { background:rgba(13,19,34,.9); border:1px solid var(--line); border-radius:14px; padding:9px 16px; font-size:13.5px; color:var(--dim); font-weight:300; text-align:center; max-width:430px; line-height:1.55; }
.mullfan { display:flex; justify-content:center; flex-wrap:wrap; gap:0; filter:drop-shadow(0 0 26px rgba(240,198,116,.28)); }
.mullfan .ct { width:clamp(84px,21vw,120px); margin:4px -16px 4px 0; box-shadow:0 8px 22px rgba(0,0,0,.55); }
.mullfan .ct .pw, .mullfan .ct .rgc { display:none; }
.mullfan .ct.pick { transform:translateY(-18px); filter:grayscale(.7) brightness(.6); }
.mullfan .ct.pick::before { content:'↩️'; position:absolute; top:4px; left:50%; transform:translateX(-50%); font-size:18px; z-index:2; }
.mullbtns { display:flex; gap:10px; }

/* first-player splash */
.splash { position:fixed; inset:0; background:rgba(5,9,18,.9); z-index:60; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; animation:fadein .3s; }
.splash .die { font-size:70px; animation:spin 1s ease; }
.splash .bigtitle { font-size:clamp(26px,7vw,42px); font-weight:700; letter-spacing:5px; }
.splash .sub { color:var(--dim); font-weight:300; }
@keyframes spin { from { transform:rotate(0) scale(.4); } to { transform:rotate(720deg) scale(1); } }
@keyframes fadein { from { opacity:0; } }

/* log sheet + endscreen */
.sheetwrap { position:fixed; inset:0; background:rgba(5,9,18,.8); display:flex; align-items:flex-end; justify-content:center; z-index:75; }
.sheet { background:var(--panel); border:1px solid var(--line); border-radius:18px 18px 0 0; padding:16px; width:100%; max-width:520px; max-height:78dvh; overflow-y:auto; }
.sheet .btns { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.logbox { max-height:52dvh; overflow-y:auto; }
.logline { font-size:12.5px; color:var(--dim); font-weight:300; padding:3px 0; border-bottom:1px solid #223; }
.endscreen { position:fixed; inset:0; background:rgba(5,9,18,.92); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:70; gap:8px; text-align:center; }
.endscreen h2 { font-size:44px; margin:0; }
.endscreen p { color:var(--dim); font-weight:300; }

/* ---------- desktop & large screens (Fold unfolded / laptop / monitor) ---------- */
@media (min-width: 800px) and (min-height: 700px) {
  /* card size follows the HEIGHT: 4 rows + midline must fit inside .board (inset 84/250) — bigger cards used to overflow
     under the hand fan and hide the rearguard's Power/Range (player report 2026-09-10) */
  .slot, .ct { width: clamp(84px, 17.9vh - 67px, 150px); border-radius: 10px; }
  .hstat { gap: 3px; left: 5px; }
  .hstat b { font-size: 14px; padding: 0 8px; }
  .hstat i { font-size: 12.5px; padding: 0 6px; }
  .coach .ichip { font-size: 13px; padding: 5px 12px; top: -15px; right: -8px; }
  .ct .pw { font-size: 14px; padding: 0 8px; bottom: -9px; }
  .ct .rgc { font-size: 12.5px; padding: 0 6px; bottom: -9px; }
  .ct .tag { font-size: 20px; top: -13px; }
  .slot .zl { font-size: 13px; }
  .board { inset: 84px 0 250px; gap: 12px; }
  .rowz { gap: 18px; }
  .midline span { font-size: 13px; padding: 3px 16px; }
  .oppstrip { height: 84px; }
  .cardback { width: 62px; height: 87px; margin-left: -24px; border-radius: 8px; }
  .cardback::after { font-size: 22px; }
  .deckbadge { width: 60px; height: 84px; font-size: 19px; border-radius: 8px; }
  .deckbadge.mine { bottom: 265px; }
  .rpbig .n { font-size: 80px; }
  .rpbig .l { font-size: 13px; }
  .rpbig .sub { font-size: 12.5px; }
  .rpbig.opp { top: 88px; } .rpbig.me { bottom: 290px; }
  .logchip { top: 60px; font-size: 13px; max-width: 30vw; }
  .coach { top: 150px; width: min(60vw, 520px); font-size: 15.5px; padding: 10px 18px; }
  .coach .tip { font-size: 13.5px; }
  .basestrip { bottom: 208px; left: 160px; right: 200px; } /* starts right of the RUSH numeral so the framed strip never crosses its caption */
  .baserow .ct, .baserow .slot { width: 62px; }
  .basestrip.opp { top: 70px; bottom: auto; left: 240px; right: 140px; } /* between the pile chip (ends 64) and the coach's read chip (starts 136) */
  .basestrip.opp .baserow .ct { width: 40px; }
  .handfan { bottom: -52px; }
  .handfan .ct { width: clamp(130px, 19vh, 185px); margin-left: -42px; }
  .handfan .ct.can { transform: translateY(-24px); }
  .handfan .ct.pick { transform: translateY(-38px); }
  .fabcol { right: 18px; bottom: 130px; }
  .fab { font-size: 17px; padding: 15px 26px; }
  .fab.alt { font-size: 14.5px; }
  .defbar { bottom: 230px; width: min(50vw, 520px); }
  .defbar.overbase, .defbar.compact.overbase { bottom: 312px; }
  .mullfan .ct { width: clamp(140px, 22vh, 210px); margin: 6px -22px 6px 0; }
  .mullscreen .pill { font-size: 15px; max-width: 520px; }
  .preview { max-width: 460px; }
  .preview img { width: min(34vh, 320px); }
  .zn { font-size: 19px; } .zs { font-size: 14px; }
  .kwline { font-size: 13.5px; } .efftext { font-size: 13.5px; } .thline { font-size: 14px; }
  .preview .btn { font-size: 16px; }
}

/* drag & drop */
[data-drop].dropglow { outline: 2.5px dashed rgba(88,192,129,.85); outline-offset: 5px; border-radius: 12px; }
[data-drop].dropglow .slot { background: rgba(88,192,129,.12); }

/* effects UI */
.ct .pw.up { color:#7be0a0; border-color:#2f6b48; }
.ct .pw.down { color:#ff9c94; border-color:#7a3733; }
.ct .attn { position:absolute; top:2px; right:2px; font-size:11px; background:#0d1526cc; border-radius:6px; padding:0 3px; }
/* attached cards: peek out behind the host tile (offset up-right per card) so a stack is visible at a glance */
.ct .art { position:absolute; inset:0; z-index:0; border-radius:6px; background:center/cover no-repeat; }
.ct .attl { position:absolute; inset:0; z-index:-1; border-radius:8px; border:1.5px solid rgba(255,255,255,.35); background:var(--panel2) center/cover no-repeat;
  transform:translate(calc(6px + var(--k) * 5px), calc(-8px - var(--k) * 5px)) rotate(calc(5deg + var(--k) * 3deg)); filter:brightness(.75); box-shadow:0 2px 6px rgba(0,0,0,.5); }
.attbox { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:8px 12px; margin-top:10px; text-align:left; }
.attbox .attlbl { font-size:12.5px; color:var(--gold); margin-bottom:6px; }
.attbox .attrow { display:flex; gap:8px; flex-wrap:wrap; }
.attbox .ct.attmini { width:58px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.5); }
.attbox .attname { position:absolute; left:0; right:0; bottom:0; font-size:9.5px; text-align:center; background:#0d1526dd; border-radius:0 0 6px 6px; padding:1px 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.attbox .attnow { font-size:12.5px; margin-top:8px; color:#e6ebf5; }
.attbox .attnow small { color:var(--dim); font-weight:300; }
.deftext { font-size:14px; text-align:center; line-height:1.5; }
.deftext.dim { color:var(--dim); font-size:12px; font-weight:300; }
.effstatus { border-radius:8px; padding:6px 10px; font-size:12.5px; margin-top:8px; text-align:left; }
.effstatus.on { background:rgba(88,192,129,.12); border:1px solid rgba(88,192,129,.4); }
.effstatus.off { background:rgba(224,179,60,.1); border:1px solid rgba(224,179,60,.35); color:#e6c987; }

/* top nav + lobby */
.topnav { display:flex; align-items:center; gap:18px; padding:12px 18px; background:rgba(13,19,34,.92); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.tn-logo { font-size:19px; font-weight:700; } .tn-logo em { color:var(--gold); font-style:normal; }
.topnav nav { display:flex; gap:4px; flex:1; }
.topnav nav a { color:var(--dim); text-decoration:none; font-size:14.5px; padding:7px 14px; border-radius:10px; }
.topnav nav a.on, .topnav nav a:hover { color:#fff; background:var(--panel2); }
.tn-lang { background:none; border:1px solid var(--line); border-radius:16px; color:var(--dim); font-family:inherit; font-size:12px; padding:6px 10px; cursor:pointer; margin-right:8px; }
.tn-lang:hover { color:var(--gold); border-color:var(--gold); }
.tn-pts { display:inline-flex; align-items:center; gap:5px; color:#7fb6ff; text-decoration:none; font-size:13.5px; font-weight:600; padding:7px 12px; border-radius:20px; border:1px solid rgba(127,182,255,.28); background:rgba(79,140,232,.10); white-space:nowrap; }
.tn-pts svg { width:15px; height:15px; }
.tn-pts:hover { background:rgba(79,140,232,.2); }
.tn-user { background:var(--panel2); border:1px solid var(--line); color:var(--ink); border-radius:20px; padding:7px 16px; font-size:13.5px; font-family:inherit; }
.landing.lobby { padding-top:20px; gap:16px; max-width:560px; }
.tablecard { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:14px; }
.tc-head { font-size:13px; letter-spacing:2px; color:var(--dim); display:flex; align-items:center; gap:10px; }
.tc-badge { background:rgba(88,192,129,.15); border:1px solid rgba(88,192,129,.4); color:#8fd6ab; border-radius:12px; padding:1px 10px; font-size:11px; letter-spacing:0; }
.tc-seats { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px) { .tc-seats { grid-template-columns:1fr; } }
.seat { background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:12px; }
.seat-name { font-size:14px; margin-bottom:8px; }
.deckselect { width:100%; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:10px; font-family:inherit; font-size:14px; }
.tc-foot { text-align:center; } .tc-foot a { color:var(--dim); font-size:13px; }
.loginbox { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:20px; width:min(92vw,360px); display:flex; flex-direction:column; gap:10px; }
.loginbox h3 { margin:0; } .loginbox .dim { color:var(--dim); font-size:12.5px; font-weight:300; margin:0; line-height:1.6; }
.loginbox input { background:var(--bg); border:1px solid var(--line); border-radius:10px; color:var(--ink); font-family:inherit; font-size:15px; padding:11px 12px; }
.loginbox .err { color:#ff9c94; font-size:12.5px; min-height:16px; }

/* arrows + piles + end turn */
#arrowlayer { position:fixed; inset:0; width:100vw; height:100dvh; pointer-events:none; z-index:60; }
.pilechip { position:absolute; left:12px; background:rgba(13,19,34,.85); border:1px solid var(--line); color:var(--dim); border-radius:12px; padding:4px 11px; font-size:12px; font-family:inherit; cursor:pointer; z-index:6; }
.pilechip { left:auto; right:60px; }
.pilechip.opp { top:24px; } .pilechip.me { bottom:210px; }
@media (min-width:800px) and (min-height:700px) { .pilechip { right:80px; } .pilechip.opp { top:34px; } .pilechip.me { bottom:290px; } .pilechip { font-size:13.5px; } }
.fab.endturn { background:#8e4fc9; }
.pilegrid { display:flex; flex-wrap:wrap; gap:8px; }
.pilegrid .pile-ct { width:72px; height:100px; cursor:pointer; }
@media (min-width:800px) { .pilegrid .pile-ct { width:96px; height:134px; } }
.pilegrid .pile-ct .pw, .pilegrid .pile-ct .rgc { display:none; }
.quitbtn { position:absolute; top:8px; left:10px; z-index:7; background:rgba(13,19,34,.85); border:1px solid var(--line); color:var(--dim); border-radius:12px; padding:5px 12px; font-size:12px; font-family:inherit; cursor:pointer; }
.logchip { top:42px; }
@media (min-width:800px) and (min-height:700px) { .quitbtn { font-size:13.5px; } .logchip { top:46px; } }

/* v4.4 — board formation, side tints, card back, side log */
.rowz { align-items:flex-start; }
/* formation: the vanguard sits forward of the wings. The WINGS step back (toward their own rear row) rather than the V
   stepping forward — a forward V pokes out over the panel's front edge, visible now the panels are opaque (Bell 2026-09-11:
   "แนวหน้าเส้นมันเลยขอบสีเขียว"). The wings land beside the rear-row's height, so nothing leaves the panel. */
#b_F1 > *, #b_F2 > * { transform: translateY(-18px); } #m_F1 > *, #m_F2 > * { transform: translateY(18px); }
@media (min-width:800px) and (min-height:700px) { #b_F1 > *, #b_F2 > * { transform: translateY(-26px); } #m_F1 > *, #m_F2 > * { transform: translateY(26px); } }
.board { margin:0 6px; gap:4px; }
/* playmat panels: each side's battle zone is a framed panel; the base strips are framed the same way (see .basestrip) */
.half { display:flex; flex-direction:column; gap:6px; padding:8px 8px; border-radius:14px;
  background:rgba(22,30,49,.93); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 4px 14px rgba(0,0,0,.35); position:relative; } /* near-opaque: the honeycomb only shows around the zones, never under the cards (Bell: ตาลาย) */
.half.opp { border-top:2px solid rgba(224,90,79,.45); }
.half.me { border-bottom:2px solid rgba(88,192,129,.45); }
.half .zl { color:#5d6d8f; }
/* waiting-for-you: our panel glows (replaces the old free-floating .turnglow frame) */
.half.me.await { box-shadow:inset 0 0 0 1.5px rgba(88,192,129,.6), 0 0 22px rgba(88,192,129,.22), inset 0 0 30px rgba(88,192,129,.07); animation:tgpulse 1.8s infinite; }
.basestrip.await { box-shadow:inset 0 0 0 1.5px rgba(88,192,129,.45), 0 0 14px rgba(88,192,129,.15); }
@media (max-height:740px) { .half { padding:4px 6px; gap:4px; } .board { gap:2px; } }
@keyframes tgpulse { 50% { box-shadow:inset 0 0 0 1.5px rgba(88,192,129,.28), 0 0 10px rgba(88,192,129,.1), inset 0 0 16px rgba(88,192,129,.03); } }
.midline span { border:1px solid var(--line); }
.ct.fdown { filter:none; background:linear-gradient(135deg,#31285e 0%,#1a1f3d 55%, #232a52 100%) !important; border-color:#4a4380 !important; display:flex; align-items:center; justify-content:center; }
.ct.fdown .fdlogo { font-size:22px; opacity:.55; }
.ct.fdown .fdmark { position:absolute; bottom:3px; left:50%; transform:translateX(-50%); font-size:9px; background:#0d1526cc; border-radius:6px; padding:0 5px; white-space:nowrap; }

.sidelog { display:none; }
@media (min-width:1150px) {
  .game { background-image:url('playmat-wide.webp'); } /* landscape render — the portrait one cover-crops into giant cells here */
  .sidelog { display:flex; flex-direction:column; position:absolute; left:0; top:0; bottom:0; width:230px;
    background:rgba(10,15,28,.94); border-right:1px solid var(--line); z-index:8; padding:14px; gap:10px; }
  .sl-head { font-size:19px; font-weight:700; } .sl-head em { color:var(--gold); font-style:normal; }
  .sl-players { display:flex; flex-direction:column; gap:5px; font-size:13.5px; color:var(--dim); }
  .sl-players .sl-rp { color:var(--gold); font-weight:600; }
  .sl-end { font-size:13px; padding:9px; }
  .sl-title { font-size:11px; letter-spacing:2px; color:#54658a; margin-top:4px; }
  .sl-log { flex:1; overflow-y:auto; border-top:1px solid #223; }
  .sl-line { font-size:11.5px; color:var(--dim); font-weight:300; padding:3px 0; border-bottom:1px solid #1b2438; line-height:1.45; }
  /* shift board content right of the sidebar (single offset each — no double shifting) */
  .board { inset:84px 0 280px 230px; }  /* 280 = strip bottom 208 + strip height 71 — the panel must never run under the base strip */
  /* desktop insets are taller (84/250) than the phone's (64/178): the slot height term must shrink with them or a short window
     (≤800px) overflows the board onto the base strip — invisible while the panels were translucent, obvious now they are opaque */
  .slot, .ct { width:clamp(58px,min(17vw,17.9vh - 82px),110px); } /* a big window gets bigger cards (76px was the phone cap — 'รูปเล็กไป') */
  .baserow .ct, .baserow .slot { width:44px; }
  .oppstrip { left:230px; }
  .coach { left:calc(50% + 115px); }
  .handfan { left:calc(50% + 115px); }
  .basestrip { left:400px; }
  .basestrip.opp { left:470px; }
  .rpbig { left:246px; }
  .logchip, .quitbtn { display:none; }
  .pilechip { right:80px; }
}
.tn-logo { color:var(--ink); text-decoration:none; }

/* threatened target */
.ct.threat, .slot.threat { box-shadow:0 0 0 3px rgba(224,87,79,.95), 0 0 22px rgba(224,87,79,.6); animation:threatpulse 0.9s infinite; }
@keyframes threatpulse { 50% { box-shadow:0 0 0 5px rgba(224,87,79,.4), 0 0 28px rgba(224,87,79,.35); } }

/* counter phase banner */
.phasebanner { position:fixed; top:38%; left:50%; transform:translateX(-50%); z-index:65;
  background:rgba(13,19,34,.94); border:1px solid var(--gold); color:var(--gold);
  border-radius:16px; padding:14px 30px; font-size:22px; font-weight:700; letter-spacing:3px; text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,.6); animation:fadein .25s; pointer-events:none; }
.phasebanner.out, .botreveal.out { animation:fadeout .25s forwards; }
@keyframes fadeout { to { opacity:0; transform:translateX(-50%) scale(.96); } }
/* turn banner (Bell 2026-09-11): the same plate as COUNTER PHASE, green for us / red for the bot */
.phasebanner.turn { animation:bannerin .3s; }
.phasebanner.turn.mine { border-color:rgba(88,192,129,.9); color:#8fd6ab; box-shadow:0 10px 40px rgba(0,0,0,.6), 0 0 30px rgba(88,192,129,.25); }
.phasebanner.turn.bots { border-color:rgba(224,90,79,.9); color:#f0a39b; box-shadow:0 10px 40px rgba(0,0,0,.6), 0 0 30px rgba(224,90,79,.2); }
@keyframes bannerin { from { opacity:0; transform:translateX(-50%) scale(.85); } }
/* bot action reveal: the card the bot just played, flipped in beside the bot's rows */
.botreveal { position:fixed; top:23.5%; left:50%; transform:translateX(-50%); z-index:64; pointer-events:none;
  display:flex; align-items:center; gap:12px; padding:8px 16px 8px 8px; border-radius:14px;
  background:rgba(13,19,34,.94); border:1px solid rgba(224,90,79,.7); box-shadow:0 10px 36px rgba(0,0,0,.6), 0 0 24px rgba(224,90,79,.18);
  animation:revealin .35s cubic-bezier(.2,.9,.3,1.2); }
.botreveal .rv-card { width:64px; aspect-ratio:63/88; border-radius:6px; background:var(--panel2) center/cover no-repeat; border:1.5px solid var(--line); box-shadow:0 4px 12px rgba(0,0,0,.5); animation:flipin .45s ease-out; display:flex; align-items:center; justify-content:center; }
.botreveal .rv-back { background:linear-gradient(135deg,#31285e 0%,#1a1f3d 55%, #232a52 100%); font-size:22px; opacity:.85; }
.botreveal .rv-text { display:flex; flex-direction:column; line-height:1.3; }
.botreveal .rv-text b { font-size:11px; letter-spacing:2px; color:#f0a39b; font-weight:600; }
.botreveal .rv-text em { font-style:normal; font-size:16px; font-weight:700; color:#e8eefb; white-space:nowrap; }
.botreveal .rv-text small { font-size:11.5px; color:var(--dim); font-weight:300; }
@keyframes revealin { from { opacity:0; transform:translateX(-50%) translateY(-14px); } }
@keyframes flipin { from { transform:rotateY(90deg); } 60% { transform:rotateY(-12deg); } to { transform:rotateY(0); } }
@media (min-width:800px) and (min-height:700px) { .botreveal { top:24.5%; gap:16px; padding:10px 22px 10px 10px; } .botreveal .rv-card { width:90px; } .botreveal .rv-text em { font-size:20px; } .botreveal .rv-text small { font-size:13.5px; } }
@media (min-width:1150px) { .botreveal { left:calc(50% + 115px); } }
/* fight scene: attacker vs target card-clash in the middle of the board, then the verdict (tap to skip) */
.fightscene { position:fixed; top:41%; left:50%; transform:translate(-50%,-50%); z-index:66; cursor:pointer;
  display:grid; grid-template-columns:auto auto auto; grid-template-rows:auto auto; align-items:center; column-gap:14px; row-gap:8px; padding:12px 18px 10px;
  border-radius:16px; background:rgba(13,19,34,.95); border:1px solid rgba(255,255,255,.14); box-shadow:0 14px 44px rgba(0,0,0,.65);
  animation:fsin .3s cubic-bezier(.2,.9,.3,1.2); }
.fightscene.out { animation:fsout .22s forwards; pointer-events:none; } /* a fading scene must not swallow the next tap */
.fightscene.bots { border-color:rgba(224,90,79,.6); box-shadow:0 14px 44px rgba(0,0,0,.65), 0 0 28px rgba(224,90,79,.2); }
.fightscene.mine { border-color:rgba(88,192,129,.6); box-shadow:0 14px 44px rgba(0,0,0,.65), 0 0 28px rgba(88,192,129,.2); }
.fs-side { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:84px; }
.fs-side small { font-size:10.5px; letter-spacing:2px; color:var(--dim); font-weight:600; }
.fs-side.a small { color:#f0a39b; } .fightscene.mine .fs-side.a small { color:#8fd6ab; } .fightscene.mine .fs-side.t small { color:#f0a39b; } .fightscene.bots .fs-side.t small { color:#8fd6ab; }
.fs-card { width:74px; aspect-ratio:63/88; border-radius:6px; background:var(--panel2) center/cover no-repeat; border:1.5px solid var(--line); box-shadow:0 6px 14px rgba(0,0,0,.5); }
.fs-side.a .fs-card { animation:fsclashA .6s cubic-bezier(.3,1.4,.5,1) .15s both; }
.fs-side.t .fs-card { animation:fsclashT .6s cubic-bezier(.3,1.4,.5,1) .15s both; }
.fs-card.fs-open { display:flex; align-items:center; justify-content:center; border-style:dashed; border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.04); font-size:12.5px; color:var(--dim); text-align:center; padding:4px; }
.fs-side b { font-size:17px; font-weight:800; color:#e8eefb; line-height:1; margin-top:2px; }
.fs-side em { font-style:normal; font-size:11.5px; color:var(--dim); white-space:nowrap; max-width:96px; overflow:hidden; text-overflow:ellipsis; }
.fightscene.awin .fs-side.t .fs-card, .fightscene.tie .fs-side.t .fs-card { animation:fsclashT .6s cubic-bezier(.3,1.4,.5,1) .15s both, fslose .5s ease-in 1.1s forwards; }
.fightscene.twin .fs-side.a .fs-card, .fightscene.tie .fs-side.a .fs-card, .fightscene.hold .fs-side.a .fs-card { animation:fsclashA .6s cubic-bezier(.3,1.4,.5,1) .15s both, fslose .5s ease-in 1.1s forwards; }
.fs-vs { font-size:26px; color:#f0c674; animation:fsvs .5s ease-out .35s both; }
.fs-verdict { grid-column:1 / -1; text-align:center; font-size:14.5px; font-weight:700; color:#e8eefb; padding-top:6px; border-top:1px solid rgba(255,255,255,.1); animation:fsverdict .3s ease-out .95s both; }
.fightscene.rush .fs-verdict { color:#f0c674; }
@keyframes fsin { from { opacity:0; transform:translate(-50%,-50%) scale(.85); } }
@keyframes fsout { to { opacity:0; transform:translate(-50%,-50%) scale(.94); } }
@keyframes fsclashA { from { transform:translateX(-70px) rotate(-8deg); opacity:0; } 55% { transform:translateX(10px) rotate(3deg); } to { transform:none; } }
@keyframes fsclashT { from { transform:translateX(70px) rotate(8deg); opacity:0; } 55% { transform:translateX(-10px) rotate(-3deg); } to { transform:none; } }
@keyframes fsvs { from { transform:scale(0); } 70% { transform:scale(1.35); } }
@keyframes fsverdict { from { opacity:0; transform:translateY(6px); } }
@keyframes fslose { to { filter:grayscale(1) brightness(.5); transform:translateY(10px) rotate(6deg); opacity:.35; } }
@media (min-width:800px) and (min-height:700px) { .fightscene { column-gap:22px; padding:16px 26px 12px; } .fs-card { width:104px; } .fs-side b { font-size:22px; } .fs-side em { font-size:13.5px; max-width:130px; } .fs-verdict { font-size:17px; } }
@media (min-width:1150px) { .fightscene { left:calc(50% + 115px); } }
/* floating power delta over a field tile */
.pwfloat { position:fixed; z-index:63; pointer-events:none; transform:translate(-50%,-50%); font-size:15px; font-weight:800; padding:2px 8px; border-radius:10px; background:rgba(13,19,34,.92); border:1px solid; animation:pwfloat 1.4s ease-out forwards; }
.pwfloat.down { color:#ff9c94; border-color:#7a3733; } .pwfloat.up { color:#7be0a0; border-color:#2f6b48; }
@keyframes pwfloat { 0% { opacity:0; transform:translate(-50%,-30%) scale(.7); } 15% { opacity:1; transform:translate(-50%,-50%) scale(1.15); } 30% { transform:translate(-50%,-55%) scale(1); } 100% { opacity:0; transform:translate(-50%,-140%); } }
@media (min-width:800px) and (min-height:700px) { .pwfloat { font-size:19px; } }
/* flying tile ghost (FLIP between renders) */
.flyghost { position:fixed; z-index:62; pointer-events:none; border-radius:6px; background:var(--panel2) center/cover no-repeat; border:1.5px solid rgba(255,255,255,.35); box-shadow:0 8px 20px rgba(0,0,0,.55); transform-origin:top left; transition:transform .38s cubic-bezier(.2,.8,.2,1); }
.flyghost.back { background:linear-gradient(135deg,#31285e 0%,#1a1f3d 55%, #232a52 100%); }
.flyghost.gone { animation:ghostgone .45s ease-in forwards; }
@keyframes ghostgone { to { opacity:0; transform:translateY(14px) scale(.85); filter:grayscale(1); } }
/* sound toggle: beside the quit button on phones, its own row in the desktop sidebar */
.sndbtn { left:78px; }
.sndbtn.off { color:#8a94a8; border-style:dashed; }
.sl-snd { display:none; }
@media (min-width:1150px) { .sl-snd { display:block; } .sndbtn { display:none; } }
.phasebanner span { display:block; font-size:12.5px; font-weight:300; letter-spacing:0; color:var(--dim); margin-top:4px; }

/* phase tracker on the midline */
.midline { gap:8px; align-items:center; }
.pt-owner { color:#8fa2bb; font-size:11px; background:rgba(13,19,34,.6); border-radius:10px; padding:2px 9px; }
.phasetrack { display:inline-flex; align-items:center; gap:3px; background:rgba(13,19,34,.65); border:1px solid var(--line); border-radius:12px; padding:3px 10px; }
.phasetrack em { font-style:normal; font-size:10px; color:#54658a; letter-spacing:.4px; }
.phasetrack em.done { color:#7d8daa; }
.phasetrack em.on { color:var(--gold); font-weight:700; font-size:11.5px; text-shadow:0 0 8px rgba(240,198,116,.5); }
.phasetrack b { color:#33415f; font-weight:400; font-size:9px; }
@media (min-width:800px) and (min-height:700px) {
  .phasetrack em { font-size:12.5px; } .phasetrack em.on { font-size:14px; }
  .phasetrack { padding:5px 14px; gap:6px; } .pt-owner { font-size:13px; }
}

.recap { position:fixed; top:22%; left:50%; transform:translateX(-50%); z-index:60; width:min(88vw,400px); background:rgba(13,19,34,.96); border:1px solid #2b3b5e; border-radius:14px; padding:10px 14px; box-shadow:0 10px 30px rgba(0,0,0,.55); font-size:12.5px; line-height:1.5; cursor:pointer; }
.recap .rc-t { font-weight:600; font-size:13.5px; margin-bottom:4px; }
.recap .rc-l { color:#c9d3e8; font-weight:300; border-top:1px solid #1b2438; padding:3px 0; }
.recap .rc-x { color:#5f7194; font-size:11px; text-align:center; margin-top:4px; }
.deckbadge.low { border-color:#ff6b6b; color:#ff9c94; box-shadow:0 0 0 2px rgba(255,107,107,.35); }
.gametoast { position:fixed; top:30%; left:50%; transform:translateX(-50%); z-index:70;
  background:rgba(13,19,34,.95); border:1px solid var(--line); color:var(--ink);
  border-radius:14px; padding:12px 22px; font-size:14.5px; box-shadow:0 8px 30px rgba(0,0,0,.5);
  animation:fadein .2s; pointer-events:none; }

/* moving-mode base target + compact effect bar */
.basestrip.movetarget { outline:3px dashed rgba(88,192,129,.9); outline-offset:6px; border-radius:14px; background:rgba(88,192,129,.10); min-height:64px; cursor:pointer; animation:pulse 1.4s infinite; }
.basestrip.movetarget .bl { color:#8fd6ab; font-size:12.5px; font-weight:500; }
.defbar.compact { padding:8px 12px; gap:4px; bottom:154px; width:auto; max-width:92vw; }
.defbar.overbase, .defbar.compact.overbase { bottom:238px; } /* base-strip targets must stay tappable under the panel */
.defbar.compact .deftext { font-size:12.5px; }

/* ---------- large PORTRAIT screens (Fold unfolded / iPad Pro portrait) ----------
   Bell 2026-09-11 (Fold 8 Ultra / foldable iPhone unfolded ≈ 900×1000): the old block (board inset 230/460, cards 13vh) was
   sized for nothing real — two 387px panels in a 310px board. Now the same shape as the landscape layout: top bar 84,
   base strip 200 up (52px base cards → strip ~86 tall → top at h−286), board bottom 290, slot from the height so
   4 rows + the midline always fit (content ≈ 5.6·w + 87 ≤ h − 364). Only top/bottom are set so the ≥1150 sidebar offset
   (left 230) survives on wide portrait tablets. */
.midline { justify-content:flex-start; padding-left:18px; }
@media (min-width:800px) and (orientation: portrait) {
  .slot, .ct { width:clamp(64px, 17.9vh - 84px, 150px); }
  .board { top:84px; bottom:290px; }
  .coach { top:150px; width:min(84vw,560px); font-size:16px; }  /* 150 (not 120): at 120 its read chip sat on the bot's base cards (strip 70–130) */
  .coach .tip { font-size:14px; }
  .rpbig.opp { top:110px; }
  .rpbig.me { bottom:310px; }
  .deckbadge.opp { top:56px; }
  .deckbadge.mine { bottom:310px; }
  .pilechip.opp { top:64px; }
  .pilechip.me { bottom:316px; }
  .basestrip { bottom:200px; }  /* left/right stay as the width block set them (≥1150 keeps the strip clear of the sidebar) */
  .baserow .ct, .baserow .slot { width:52px; }
  .handfan { bottom:-52px; } .handfan .ct { width:clamp(130px,18vh,185px); }  /* 18vh: the fan's top stays under the strip (≤7px) at every height */
  .fabcol { bottom:130px; right:14px; }
  .fab { font-size:16px; padding:14px 22px; }
  .logchip { top:56px; left:14px; max-width:44vw; }
  .quitbtn { top:14px; left:14px; }
  .sndbtn { left:92px; }
  .defbar { bottom:310px; width:min(88vw,520px); }
  .defbar.compact { bottom:310px; }
  .phasebanner { top:34%; }
}
.clv { border-bottom:1px solid #223; padding:8px 0; }
.clv b { color:var(--gold); } .clv small { color:#54658a; margin-left:6px; }
.clv ul { margin:6px 0 0 18px; padding:0; } .clv li { font-size:13px; color:var(--dim); font-weight:300; line-height:1.6; }


/* wide but short windows: compact numerals */
@media (min-width:800px) and (max-height:699px) {
  .rpbig .n { font-size:40px; }
  .rpbig.me { bottom:224px; }
  .basestrip { left:150px; bottom:152px; }
}

/* compact topnav for narrow screens */
.tn-logo { white-space:nowrap; }
@media (max-width: 640px) {
  .topnav { flex-wrap:wrap; gap:8px 10px; padding:10px 12px; }
  .tn-logo { font-size:17px; order:1; }
  .tn-pts { order:2; margin-left:auto; font-size:12.5px; padding:5px 10px; }
  .tn-pts + .tn-user { margin-left:0; }
  .tn-user { order:2; margin-left:auto; font-size:12.5px; padding:6px 12px; white-space:nowrap; }
  .topnav nav { order:3; width:100%; flex:none; justify-content:space-between; gap:2px; }
  .topnav nav a { font-size:13px; padding:6px 8px; white-space:nowrap; }
}

/* foil cards on the game board */
.ct.foil::after { content:''; position:absolute; inset:0; border-radius:8px; z-index:3;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.25) 45%, rgba(140,220,255,.28) 50%, transparent 66%);
  background-size:240% 240%; animation:foilsheen 3s linear infinite; pointer-events:none; mix-blend-mode:screen; }
@keyframes foilsheen { 0% { background-position:130% 0; } 100% { background-position:-40% 0; } }
.endscreen .earned { color:var(--gold); font-weight:600; margin:4px 0 10px; }

/* vector icons (inline SVG, inherit colour) */
.ic { width:1.05em; height:1.05em; display:inline-block; vertical-align:-0.18em; flex:none; }
.ic.gold { color:var(--gold); } .ic.good { color:#8fd6ab; } .ic.bad { color:#ff9c94; }
.ic.logo { color:var(--gold); width:.9em; height:.9em; }
.fdlogo .ic { width:22px; height:22px; opacity:.6; }
.die .ic { width:1em; height:1em; }
.ct .tag .ic { width:18px; height:18px; filter:drop-shadow(0 1px 2px #000); }
.attn .ic { width:.9em; height:.9em; }

/* revealed-card options inside the effect prompt (tutor effects: "look at top 3, pick 1") */
.optcards { display:flex; gap:8px; justify-content:center; }
.optcard { flex:1; max-width:120px; background:none; border:2px solid var(--gold); border-radius:10px; padding:4px; color:var(--ink); font-family:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; }
.optcard img { width:100%; border-radius:6px; display:block; }
.optcard .on { font-size:11px; font-weight:600; line-height:1.2; text-align:center; }
.optcard .os { font-size:10px; color:#8fd6ab; }
.optcard.off { border-color:var(--line); opacity:.55; cursor:not-allowed; }
.optcard.off img { filter:grayscale(.8) brightness(.6); }
.optcard.off .os { color:var(--dim); }

/* ---------- short & landscape screens (Bell 2026-09-11: "เว็ปเรา responsive ไหม" — LOOKED at 6 sizes, 3 were broken) ---------- */
/* short phones (iPhone SE / older 667px-tall): smaller base cards, base strip lower, board sized from the real height so the
   strip never covers the rearguard. board box = 100vh-276; content = 4 slots + 54px of padding/midline → slot h = (100vh-330)/4 */
@media (max-width:799px) and (max-height:720px) {
  .baserow .ct, .baserow .slot { width:36px; min-width:30px; }
  .basestrip { bottom:150px; }
  .board { inset:64px 0 212px; }
  .slot, .ct { width:clamp(58px,min(17vw,17.9vh - 59px),76px); }
  .rpbig .n { font-size:40px; } .rpbig.me { bottom:214px; }
}
/* tablets in landscape (iPad 1024×768 and similar, 700–820px tall): the 800/700 block assumes ≥820px — its 84px card minimum
   and 208px base strip overlapped. Smaller hand fan, strip lower, board bottom = strip top. */
@media (min-width:800px) and (max-width:1149px) and (min-height:700px) and (orientation:landscape) {  /* tablets + unfolded foldables held sideways, any height (Fold ≈ 1000×900) */
  .handfan .ct { width:clamp(110px,17vh,150px); }
  .handfan { bottom:-40px; }
  .baserow .ct, .baserow .slot { width:44px; }  /* small base cards → strip 71px tall, same as the wide layout */
  .basestrip { bottom:184px; }
  .board { inset:84px 0 255px; }  /* 255 = 184 + 71 */
  .slot, .ct { width:clamp(58px,17.9vh - 78px,150px); }  /* 4 rows + the row gap fit between 84 and the strip at any 700–820px height */
  .rpbig .n { font-size:64px; } .rpbig.me { bottom:262px; }
  .deckbadge.mine { bottom:265px; }
  .fabcol { bottom:110px; }
}
/* phones in landscape: too short for four rows — ask for portrait instead of drawing a broken board */
.rotatenote { display:none; }
@media (orientation:landscape) and (max-height:520px) and (max-width:1149px) {
  .game > *:not(.rotatenote), .phasebanner, .botreveal, .fightscene, .gametoast, .recap, .pf { display:none !important; }  /* the banner/fight/reveal mount on body, outside .game */
  /* fixed + own playmat + above every game overlay (banner 65 / fight 66 / reveal 64 / dialogs 85) — the phase banner mounts on body and poked through an absolute note */
  .rotatenote { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; position:fixed; inset:0; text-align:center; padding:24px; z-index:95; background:#121a2c url('playmat.webp') center/cover no-repeat; }
  .rotatenote b { font-size:20px; } .rotatenote span { color:var(--dim); font-size:13.5px; font-weight:300; max-width:420px; line-height:1.6; }
  .rotatenote svg { width:34px; height:34px; color:var(--gold); animation:rot 2.4s ease-in-out infinite; }
  @keyframes rot { 0%,20% { transform:rotate(0); } 50%,70% { transform:rotate(90deg); } 100% { transform:rotate(0); } }
}

/* Google sign-in (2026-09-13) */
.loginbox .orline { display:flex; align-items:center; gap:10px; color:var(--dim,#9aa); font-size:12px; margin:4px 0; }
.loginbox .orline::before, .loginbox .orline::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.15); }
.loginbox .gbtn { display:flex; justify-content:center; min-height:44px; }
.loginbox .gname { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.loginbox .gname[hidden] { display:none; }