/* Rift Table — "Playmat, refined" (design/README.md §2.1, docs/design.md). Vanilla CSS, no third-party assets:
   the fonts are self-hosted (riftbound/web/fonts, OFL) and served by both servers from /fonts/.
   Sections: fonts · tokens · base · components · header · table · overlays · home · decks · builder · footer ·
   responsive (≤1180, ≤1000, phone ≤720 = body.phone, docs/mobile.md). Feature styles live in ranking.css,
   academy.css and admin.css and use the same tokens. */

/* ================================================================== fonts (latin subsets, font-display: swap) */
@font-face{font-family:"Cormorant Garamond";src:url("/fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-weight:500 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant SC";src:url("/fonts/cormorant-sc-700-latin.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/ibm-plex-sans-latin.woff2") format("woff2");
  font-weight:400 600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ================================================================== tokens */
:root{
  /* surfaces: felt (page) < mat (play surface) < panels */
  --felt:#0b0f14; --mat:#0f141a; --surface:#161d25; --surface-2:#1d2630; --surface-3:#243040;
  --well:rgba(0,0,0,.24);                       /* inputs, insets */
  /* hairlines: cream at low alpha; brackets only on key zones */
  --hair:rgba(233,223,198,.11); --hair-2:rgba(233,223,198,.2); --hair-3:rgba(233,223,198,.38); --bracket:rgba(233,223,198,.62);
  /* ink (AA on every surface: ink-3 is 4.8:1 on surface-3, 6.2:1 on surface) */
  --ink:#ece4cf; --ink-2:#b3b8bc; --ink-3:#959da5;
  /* accents: gold = you + the main action, coral = the opponent */
  --gold:#d4b26a; --gold-hi:#e8cd8f; --gold-deep:#3a301b; --on-gold:#1a1408;
  --coral:#e0907f; --coral-deep:#3a2420;
  --good:#8fcca0; --bad:#e8836f; --info:#8fb8e8; --info-deep:#18283a;
  /* domains (always with a label or an icon, never colour alone) */
  --fury:#e0533f; --calm:#3fb37a; --mind:#4a86e0; --body:#e58a2e; --chaos:#a065d6; --order:#e2c046;
  --colorless:#9aa0a8; --neutral:#9aa0a8; --rainbow:#c9c2b0;
  /* achievement rarity (emblems, achievements.css): light / deep of each tier, like the league crests */
  --ach-common:#c3c8ce; --ach-common-deep:#4a525c; --ach-rare:#8ab8ff; --ach-rare-deep:#24467e;
  --ach-epic:#c99af0; --ach-epic-deep:#4f2470; --ach-legendary:#f0d46a; --ach-legendary-deep:#7a5a12;
  /* the symbol drawn inside an emblem: a near-white tint of each rarity (>= 5.5:1 on its -deep fill) */
  --ach-common-ink:#f3f5f7; --ach-rare-ink:#e6f0ff; --ach-epic-ink:#f5eaff; --ach-legendary-ink:#fff6d6;
  /* type: 5 sizes (12/14/16/22/34) + 11 for in-board micro labels and badges only */
  --fs-0:11px; --fs-1:12px; --fs-2:14px; --fs-3:16px; --fs-4:22px; --fs-5:34px;
  --display:"Cormorant Garamond","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sc:"Cormorant SC","Cormorant Garamond","Palatino Linotype",Palatino,Georgia,serif;
  --ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* spacing, radii, elevation */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r:6px; --r-lg:10px; --r-xl:14px;
  --shadow:0 12px 32px rgba(0,0,0,.5); --shadow-lg:0 24px 64px rgba(0,0,0,.6);
  /* layout */
  --head:56px; --side:344px; --uw:62px; --bnav:62px;
  /* legacy names (feature files, inline styles in the scripts): aliases of the tokens above */
  --bg:var(--felt); --bg2:#0e1318; --panel:var(--surface); --panel2:var(--surface-2); --line:var(--hair); --line2:var(--hair-2);
  --muted:var(--ink-2); --faint:var(--ink-3); --me:var(--gold-hi); --opp:var(--coral); --radius:var(--r-lg);
  --serif:var(--display); --sans:var(--ui);
}

/* ================================================================== base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;min-height:100%}
body{background:var(--felt);color:var(--ink);font:400 var(--fs-2)/1.45 var(--ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  background-image:radial-gradient(1400px 700px at 50% -10%, rgba(233,223,198,.045), transparent 60%);background-repeat:no-repeat}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:not-allowed;opacity:.45}
a{color:var(--gold-hi);text-underline-offset:3px}
img{display:block}
h1,h2,h3,h4{font-weight:600}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px;border-radius:4px}
::selection{background:rgba(212,178,106,.35)}
select,input,textarea{font:inherit;font-size:var(--fs-2);color:var(--ink);background:var(--bg2);border:1px solid var(--hair-2);border-radius:var(--r);padding:7px 10px;min-width:0}
select{padding-right:6px}
input:hover,select:hover,textarea:hover{border-color:var(--hair-3)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold-hi);outline-offset:0;border-color:transparent}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input[type=checkbox],input[type=range]{accent-color:var(--gold)}
.dom-fury{--d:var(--fury)} .dom-calm{--d:var(--calm)} .dom-mind{--d:var(--mind)} .dom-body{--d:var(--body)}
.dom-chaos{--d:var(--chaos)} .dom-order{--d:var(--order)} .dom-neutral,.dom-colorless{--d:var(--colorless)}
/* text helpers */
.label{font:700 var(--fs-3)/1.1 var(--sc);letter-spacing:.09em;color:var(--ink-2)}
.micro{font:600 var(--fs-1)/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums lining-nums}
.sub{color:var(--ink-2)}
.bad{color:var(--bad)}
.grow{flex:1}
.clickable{cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ================================================================== components */
/* corner brackets: THE motif, only on key zones (battlefields, the Play panel, the welcome card, the lesson task,
   a deck's header, a profile card). --c colour, --l arm length, --t thickness. */
.brk,.bf,.lb-hero,.welcome-card,.ac-task,.dv-head,.pf-head{position:relative}
.brk::before,.bf::before,.lb-hero::before,.welcome-card::before,.ac-task::before,.dv-head::before,.pf-head::before{
  content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;z-index:1;
  --c:var(--bracket); --l:14px; --t:1.5px;
  background:linear-gradient(var(--c),var(--c)) 0 0/var(--l) var(--t),linear-gradient(var(--c),var(--c)) 0 0/var(--t) var(--l),
    linear-gradient(var(--c),var(--c)) 100% 0/var(--l) var(--t),linear-gradient(var(--c),var(--c)) 100% 0/var(--t) var(--l),
    linear-gradient(var(--c),var(--c)) 0 100%/var(--l) var(--t),linear-gradient(var(--c),var(--c)) 0 100%/var(--t) var(--l),
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) var(--t),linear-gradient(var(--c),var(--c)) 100% 100%/var(--t) var(--l);
  background-repeat:no-repeat}

/* buttons: .hbtn (outline), .hbtn.primary (gold: one per screen), .small, .danger; text buttons; links */
.hbtn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:36px;padding:0 var(--s4);border-radius:var(--r);
  font:500 var(--fs-2)/1.15 var(--ui);color:var(--ink);border:1px solid var(--hair-2);background:transparent;text-decoration:none;white-space:nowrap;
  transition:border-color .15s,background-color .15s,color .15s}
.hbtn:hover:not(:disabled){border-color:var(--hair-3);background:rgba(233,223,198,.05)}
.hbtn.primary{background:linear-gradient(180deg,#dcbd78,#c9a45a);border-color:#e3c582;color:var(--on-gold);font-weight:600}
.hbtn.primary:hover:not(:disabled){background:linear-gradient(180deg,#e6c987,#d2ae64);border-color:#f0d79c}
.hbtn.small{min-height:30px;padding:0 var(--s3);font-size:var(--fs-1)}
.hbtn.danger{border-color:rgba(232,131,111,.45);color:var(--bad)}
.hbtn.danger:hover:not(:disabled){border-color:var(--bad);background:rgba(232,131,111,.08)}
.hbtn.needs-signin{opacity:.7}
a.hbtn{color:var(--ink)} a.hbtn.primary{color:var(--on-gold)}
.linkbtn{color:var(--gold-hi);font-size:var(--fs-1);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--ink)}
.linkbtn.danger{color:var(--bad)}
.txtbtn{font-size:var(--fs-1);color:var(--ink-2);padding:var(--s2);border-radius:4px;min-height:30px}
.txtbtn:hover:not(:disabled){color:var(--ink);background:rgba(233,223,198,.05)}
.txtbtn.danger{color:var(--bad)}
.kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:4px;border:1px solid var(--hair-2);
  font:500 var(--fs-0)/1 var(--ui);color:var(--ink-2);background:rgba(0,0,0,.2);letter-spacing:0;text-transform:none}

/* segmented controls (mode tabs, builder tabs, admin tabs, Ranked / Casual, BO1 / BO3) */
.segctl,.lb-tabs,.bd-tabs,.bd-seg,.rk-mode,.fmt-seg{display:flex;gap:2px;padding:3px;border-radius:8px;background:rgba(0,0,0,.28);border:1px solid var(--hair)}
.segctl button,.lb-tabs button,.bd-tabs button,.bd-seg button,.rk-mode button,.fmt-seg button{min-height:34px;padding:0 var(--s4);border-radius:6px;color:var(--ink-2);font-weight:500;white-space:nowrap}
.segctl button:hover,.lb-tabs button:hover,.bd-tabs button:hover,.bd-seg button:hover,.rk-mode button:hover,.fmt-seg button:hover{color:var(--ink)}
.segctl button.on,.lb-tabs button.on,.bd-tabs button.on,.bd-seg button.on,.rk-mode button.on,.fmt-seg button.on{background:var(--surface-3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-2)}

/* panels and their titles */
.panel{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg)}
.ptitle{display:flex;align-items:baseline;gap:var(--s2);padding:var(--s3) var(--s4) var(--s2);font:700 var(--fs-3)/1.15 var(--sc);letter-spacing:.09em;color:var(--ink-2)}
.ptitle .grow{flex:1}
.ptitle .cnt{font:400 var(--fs-1)/1.3 var(--ui);letter-spacing:0;color:var(--ink-3)}
.sec-h{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--hair)}
.sec-h .cnt{font-size:var(--fs-1);color:var(--ink-3)}
.page-h{display:flex;align-items:flex-end;gap:var(--s3) var(--s5);flex-wrap:wrap}
.page-h h1{margin:var(--s2) 0 0;font:600 var(--fs-5)/1 var(--display);letter-spacing:.005em}
.page-h .sub{margin-top:var(--s2);font-size:var(--fs-2)}

/* small chips */
.badge{display:inline-flex;align-items:center;font:600 var(--fs-0)/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:999px;
  border:1px solid var(--hair-2);color:var(--ink-2);white-space:nowrap}
.badge.act{color:var(--on-gold);background:var(--side-c,var(--gold));border-color:transparent}
.pill{display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-0);padding:2px 7px;border-radius:999px;border:1px solid var(--hair-2);color:var(--ink-2);background:rgba(0,0,0,.25)}
.pill.good{color:var(--good);border-color:rgba(143,204,160,.5)} .pill.bad{color:var(--bad);border-color:rgba(232,131,111,.5)} .pill.gold{color:var(--gold-hi);border-color:rgba(212,178,106,.5)}
.domchips{display:inline-flex;gap:4px;flex-wrap:wrap;vertical-align:middle}
.domchip{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-0);font-weight:500;padding:1px 7px 1px 6px;border-radius:999px;
  background:color-mix(in srgb,var(--d) 16%, transparent);border:1px solid color-mix(in srgb,var(--d) 50%, transparent);color:var(--ink);text-transform:capitalize}
.domchip::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:var(--d);border-radius:1px}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--hair-2);border-top-color:var(--gold-hi);animation:sp .8s linear infinite;flex:none;display:inline-block}
.spin.big{width:28px;height:28px;border-width:2.5px}
@keyframes sp{to{transform:rotate(360deg)}}
.none,.empty{color:var(--ink-3);font-size:var(--fs-1)}
.lb-hint{color:var(--ink-2);font-size:var(--fs-1)}

/* card faces (real art, or a generated frame for cards without art) */
.cf{position:relative;flex:none;width:var(--w,92px);aspect-ratio:744/1039;border-radius:calc(var(--w,92px) * .05);overflow:hidden;
  background:#0a0d11;container-type:inline-size;box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.6)}
.cf.land{aspect-ratio:1039/744;border-radius:calc(var(--w,92px) * .035)}
.cf img{width:100%;height:100%;object-fit:cover;display:block;user-select:none}
.cf.back{background:radial-gradient(circle at 50% 50%,rgba(212,178,106,.55) 0 7%,transparent 8%),
  repeating-linear-gradient(45deg,rgba(233,223,198,.05) 0 2px,transparent 2px 7px),linear-gradient(160deg,#25313d,#151c24);
  box-shadow:inset 0 0 0 1px rgba(212,178,106,.45),0 1px 4px rgba(0,0,0,.5)}
.cf.back::after{content:"";position:absolute;inset:22%;border:1px solid rgba(212,178,106,.35);transform:rotate(45deg) scale(.72);border-radius:6%}
.fr{position:absolute;inset:0;display:flex;flex-direction:column;gap:2.5cqw;padding:5cqw;border-radius:inherit;color:#f3eee2;
  background:linear-gradient(165deg, color-mix(in srgb,var(--d) 62%, #10141a) 0%, color-mix(in srgb,var(--d) 22%, #10141a) 45%, #0e1217 100%);
  border:max(1.5px,1.4cqw) solid color-mix(in srgb,var(--d) 75%, #000)}
.fr-top{display:flex;align-items:center;gap:3cqw;min-height:15cqw}
.fr-cost{flex:none;width:16cqw;height:16cqw;border-radius:50%;background:#0a0c10;border:max(1px,1cqw) solid #efe6cf;display:grid;place-items:center;font:700 10cqw/1 var(--display)}
.fr-pws{display:flex;flex-direction:column;gap:1.5cqw;margin-left:-1cqw}
.pwr{display:block;width:5.5cqw;height:5.5cqw;transform:rotate(45deg);background:var(--p,var(--rainbow));border-radius:1px;box-shadow:0 0 0 .6cqw rgba(0,0,0,.6)}
.fr-name{flex:1;min-width:0;font:600 9.5cqw/1.05 var(--display);text-shadow:0 1px 2px #000;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fr-art{flex:0 0 34%;border-radius:3cqw;position:relative;overflow:hidden;border:max(1px,.8cqw) solid rgba(0,0,0,.5);
  background:radial-gradient(circle at 28% 35%, color-mix(in srgb,var(--d) 65%, transparent) 0 14%, transparent 15%),
    radial-gradient(circle at 72% 62%, color-mix(in srgb,var(--d) 45%, transparent) 0 24%, transparent 25%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 3cqw, transparent 3cqw 6cqw),
    linear-gradient(135deg, color-mix(in srgb,var(--d) 35%, #0b0e12), #0b0e12)}
.fr-sigil{position:absolute;left:50%;top:50%;width:22cqw;height:22cqw;transform:translate(-50%,-50%) rotate(45deg);border:max(1px,1cqw) solid rgba(255,255,255,.35);border-radius:2cqw}
.fr-type{font-size:5.8cqw;text-transform:uppercase;letter-spacing:.08em;color:#d8c9a4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-text{flex:1;min-height:0;overflow:hidden;font-size:6.4cqw;line-height:1.28;color:#e2e5ea;background:rgba(0,0,0,.28);border-radius:2cqw;padding:2.5cqw 3cqw}
.fr-might{position:absolute;right:3.5cqw;bottom:3.5cqw;min-width:15cqw;height:15cqw;padding:0 2cqw;border-radius:3cqw;display:grid;place-items:center;
  background:#0a0c10;border:max(1px,1cqw) solid var(--d);font:700 10cqw/1 var(--display)}
.fr-land{flex-direction:row;flex-wrap:wrap;align-content:flex-start;gap:2cqw 3cqw;padding:4cqw}
.fr-land .fr-top{flex:1 1 100%;min-height:0}
.fr-land .fr-name{font-size:7.2cqw;-webkit-line-clamp:1}
.fr-land .fr-art{flex:0 0 30%;height:44cqw}
.fr-land .fr-type{display:none}
.fr-land .fr-text{flex:1 1 0;height:44cqw;font-size:4.6cqw}
@container (max-width:150px){
  .fr-text{display:none} .fr-art{flex:1} .fr-type{font-size:7cqw}
  .fr-land .fr-text{display:block} .fr-land .fr-art{display:none}
}
@container (max-width:60px){ .fr-type,.fr-pws{display:none} .fr-name{font-size:12cqw} }

/* glyphs in rules text */
.g{display:inline-grid;place-items:center;vertical-align:-.18em;width:1.15em;height:1.15em;margin:0 .06em}
.g svg{width:100%;height:100%;display:block}
.g-might{color:var(--gold-hi)}
.g-en{border-radius:50%;background:#0a0c10;border:1px solid #efe6cf;font:700 .78em/1 var(--ui);color:#fff}
.g-rune{width:.85em;height:.85em;transform:rotate(45deg);background:var(--d,var(--rainbow));border-radius:.15em;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.g-rainbow{background:conic-gradient(var(--fury),var(--order),var(--calm),var(--mind),var(--chaos),var(--body),var(--fury))}
.g-exh{color:#cfd6df}
.g-unk{width:auto;padding:0 .3em;border-radius:.3em;background:#333;font-size:.8em}
.kwc{display:inline-block;padding:0 .35em;margin:0 .05em;border-radius:.3em;background:rgba(212,178,106,.14);border:1px solid rgba(212,178,106,.35);color:var(--gold-hi);font-weight:600;font-size:.92em;line-height:1.3}
.rem{color:var(--ink-2);font-style:italic}
.cref{border-bottom:1px dotted currentColor;cursor:help}
.cref:hover{color:var(--ink)}

/* ================================================================== header */
.topbar{position:sticky;top:0;z-index:30;height:var(--head);display:flex;align-items:center;gap:var(--s5);padding:0 var(--s5);
  background:rgba(11,15,20,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.brand{display:flex;align-items:center;gap:10px;flex:none;font:600 var(--fs-4)/1 var(--display);letter-spacing:.02em;color:var(--ink);padding:4px 2px;border-radius:6px}
.brand-mark{flex:none}
.nav{display:flex;align-self:stretch;gap:var(--s1)}
.nav button{position:relative;display:flex;align-items:center;gap:8px;padding:0 var(--s3);color:var(--ink-2);font-weight:500}
.nav button:hover{color:var(--ink)}
.nav button.on{color:var(--ink)}
.nav button.on::after{content:"";position:absolute;left:var(--s3);right:var(--s3);bottom:-1px;height:2px;background:var(--gold);border-radius:2px}
.nav svg{display:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.head-r{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
.me-chip{display:flex;align-items:center;gap:var(--s2);min-height:36px;padding:2px var(--s3) 2px var(--s2);border-radius:999px;border:1px solid var(--hair);color:var(--ink);text-decoration:none;max-width:260px}
.me-chip:hover{border-color:var(--hair-2)}
.me-chip b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.me-chip .num{color:var(--gold-hi);font-weight:600}
body.online #btnNew{display:none}            /* online, Home is the lobby */
.status-line,.tb-icon,.dock,.dock-back,.sheet-back,.hinfo,.pts,.pv-x{display:none}
.netbanner{position:sticky;top:var(--head);z-index:29;display:flex;align-items:center;justify-content:center;gap:var(--s3);padding:6px var(--s4);
  font-size:var(--fs-2);background:var(--gold-deep);border-bottom:1px solid rgba(212,178,106,.4);color:var(--gold-hi)}

/* ================================================================== table: layout */
.table{display:grid;grid-template-columns:minmax(0,1fr) var(--side);gap:var(--s4);padding:var(--s4) var(--s5);
  height:calc(100vh - var(--head));min-height:620px;max-width:1800px;margin:0 auto}
.arena{position:relative;display:flex;flex-direction:column;gap:var(--s3);min-width:0;min-height:0}
.mat{position:relative;flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s3) var(--s4) var(--s3) 56px;border-radius:var(--r-xl);border:1px solid var(--hair);
  background:radial-gradient(900px 420px at 55% 50%,rgba(233,223,198,.035),transparent 70%),radial-gradient(130% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.35)),var(--mat);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.35);scrollbar-width:thin;scrollbar-color:var(--hair-2) transparent}
/* score rail: two vertical 1-8 tracks meeting at the centre line of the mat (both 8s at the middle) */
.mat::after{content:"";position:absolute;left:18px;top:50%;width:20px;height:1px;background:var(--hair-2)}
.mat-track{position:absolute;left:16px;width:24px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:2px}
.pstrip.opp .mat-track{top:var(--s3);bottom:calc(50% + 8px);flex-direction:column-reverse}
.pstrip.me .mat-track{top:calc(50% + 8px);bottom:var(--s3)}
.mt-c{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;font:600 var(--fs-0)/1 var(--ui);font-variant-numeric:tabular-nums;
  color:var(--ink-3);border:1px solid var(--hair-2);background:rgba(0,0,0,.25)}
.mt-c.on{border-color:color-mix(in srgb,var(--side-c) 60%, transparent);color:var(--side-c);background:color-mix(in srgb,var(--side-c) 12%, transparent)}
.mt-c.cur{background:var(--side-c);color:var(--on-gold);border-color:var(--side-c);box-shadow:0 0 12px -2px var(--side-c)}
.mt-c.goal{border:1.5px solid var(--gold);color:var(--gold-hi)}
.mt-c.goal.cur{background:var(--gold);color:var(--on-gold)}

/* ================================================================== table: player halves */
.pstrip{--side-c:var(--gold-hi);display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto;column-gap:var(--s3);row-gap:var(--s2);align-items:stretch;min-width:0}
.pstrip.opp{--side-c:var(--coral);grid-template-areas:"tag tag tag tag tag" "base info rdeck id deck" "base info rdeck id trash"}
.pstrip.opp:has(> .strip-hand){grid-template-areas:"hand hand hand hand hand" "tag tag tag tag tag" "base info rdeck id deck" "base info rdeck id trash"}
.pstrip.me{grid-template-areas:"base info rdeck id deck" "base info rdeck id trash" "tag tag tag tag tag"}
.strip-tag{grid-area:tag;display:flex;align-items:center;gap:var(--s2) var(--s3);min-height:28px;min-width:0}
.strip-info{grid-area:info} .strip-id{grid-area:id} .strip-base{grid-area:base} .strip-hand{grid-area:hand}
.mat-rdeck{grid-area:rdeck} .mat-deck{grid-area:deck} .mat-trash{grid-area:trash}
.seatline{display:flex;align-items:center;gap:var(--s2);min-width:0}
.seat{font-weight:600;font-size:var(--fs-3);color:var(--side-c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pstrip.deciding .seatline::before{content:"";flex:none;width:8px;height:8px;margin:0 2px 0 3px;border-radius:50%;background:var(--side-c);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--side-c) 22%, transparent);animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--side-c) 8%, transparent)}}
.seat-sub{color:var(--ink-3);font-size:var(--fs-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.ptsrow{display:none;align-items:center;gap:var(--s2)}
.counts{display:flex;align-items:center;gap:var(--s1) var(--s3);flex-wrap:wrap;margin-left:auto;color:var(--ink-2);font-size:var(--fs-1);justify-content:flex-end}
.counts b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.counts .c-deck,.counts .c-rdeck,.counts .pile[data-pile$=":trash"],.counts .pile:disabled{display:none}   /* desktop: in their own zones; empty piles hidden */
.pile{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0 8px;border-radius:999px;border:1px solid var(--hair-2);color:var(--ink-2);font-size:var(--fs-1)}
.pile:hover:not(:disabled){border-color:var(--gold);color:var(--ink)}
.pile:disabled{opacity:.6}
.c-runes{display:inline-flex;align-items:center;white-space:pre;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--side-c) 12%, transparent);color:var(--side-c);font-weight:600}
.c-runes b{color:inherit}
.c-runes i{width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--side-c)}
.backs{display:inline-flex;align-items:center;margin-left:4px}
.backs .cb{width:12px;height:17px;border-radius:2px;margin-left:-5px;background:linear-gradient(160deg,#25313d,#151c24);box-shadow:inset 0 0 0 1px rgba(212,178,106,.45),0 0 0 1px rgba(0,0,0,.6)}
.backs .cb:first-child{margin-left:0}
/* zones: hairline + bottom label on Base; the other zones are open (label only) */
.zone-label{display:none}
.mz-l{position:absolute;left:var(--s3);right:var(--s3);bottom:6px;display:flex;align-items:center;gap:var(--s2);pointer-events:none;
  font:600 var(--fs-0)/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.mz-l::after{content:"";flex:1;height:1px;background:var(--hair)}
.strip-base{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:var(--s2) var(--s2) 24px var(--s3);border:1px solid var(--hair);border-radius:var(--r);background:rgba(0,0,0,.14)}
.urow{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;min-height:calc(var(--uw) * 1.4)}
.urow > .empty{font-size:var(--fs-1);color:var(--ink-3)}
.strip-info{position:relative;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:var(--s2) 4px 24px;min-width:96px}
.strip-info .mz-l,.strip-id .zl,.mat-pile .mz-l{justify-content:center}
.strip-info .mz-l::after,.mat-pile .mz-l::after{display:none}
.strip-info .mz-l{left:0;right:0}
.runes{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.rgroup{display:flex;align-items:center;gap:3px;font-size:var(--fs-0);color:var(--ink-2);font-variant-numeric:tabular-nums}
.rune{width:12px;height:14px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--d);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.rune.exh{opacity:.28;filter:saturate(.3)}
.rgroup .rl{margin-left:4px}
.runes > .empty{font-size:var(--fs-0)}
.strip-id{display:flex;gap:var(--s3);align-items:stretch}
.zcard{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:var(--r);padding:var(--s1) 2px 0;transition:transform .15s}
.zcard .cf{--w:var(--uw)!important}
.zcard .zl{font:600 var(--fs-0)/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.zcard.exh .cf{transform:rotate(12deg) scale(.94);filter:brightness(.55) saturate(.6)}
.zcard.emp .cf{box-shadow:0 0 0 2px var(--gold),0 0 18px -2px var(--gold)}
.zslot{width:var(--uw);aspect-ratio:744/1039;border-radius:5px;border:1px dashed var(--hair-2);display:grid;place-items:center;color:var(--ink-3);font-size:var(--fs-0);text-align:center;line-height:1.3}
.mat-pile{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--s2);padding:4px 6px 20px;min-width:68px;border-radius:var(--r);color:var(--ink)}
.mat-pile .cf{--w:26px!important}
.mp-n{font:600 var(--fs-3)/1 var(--ui);font-variant-numeric:tabular-nums;min-width:18px}
.mp-empty{width:26px;aspect-ratio:744/1039;border-radius:3px;border:1px dashed var(--hair-2)}
.mat-pile .mz-l{left:0;right:0;bottom:4px}
.mat-rdeck{padding-bottom:24px}
.mat-rdeck .mz-l{bottom:6px}
button.mat-pile:hover:not(:disabled){background:rgba(233,223,198,.05)}
button.mat-pile:disabled{opacity:1;cursor:default}
.strip-hand{display:flex;flex-direction:column;gap:4px;min-width:0}
.strip-hand .zone-label{display:flex;gap:8px;align-items:center;font:600 var(--fs-0)/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.strip-hand .zone-label .ln{flex:1;height:1px;background:var(--hair)}
.minihand{display:flex;padding-left:18px}
.minihand > *{margin-left:-18px}
.minihand .cf{--w:46px!important}

/* ================================================================== table: units, gear, face-down cards */
.unit{position:relative;display:flex;flex-direction:column;align-items:center;border-radius:6px;transition:transform .15s;outline:none}
.unit[data-unit]:hover{transform:translateY(-2px)}
.unit:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.u-card{position:relative;z-index:2;border-radius:5px}
.unit .cf{--w:var(--uw)}
/* exhausted: turned sideways (landscape footprint), dimmed */
.unit.exh .u-card{width:calc(var(--uw) * 1.3965);height:var(--uw)}
.unit.exh .u-card > .cf{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg);filter:saturate(.5) brightness(.62)}
.unit.emp .cf{box-shadow:0 0 0 2px var(--gold),0 0 16px -2px var(--gold)}
.u-might{position:absolute;right:-6px;bottom:-6px;z-index:3;min-width:24px;height:24px;padding:0 5px;border-radius:12px;display:grid;place-items:center;
  font:600 var(--fs-1)/1 var(--ui);font-variant-numeric:tabular-nums;background:var(--felt);color:var(--ink);border:1px solid var(--hair-3);box-shadow:0 2px 6px rgba(0,0,0,.6)}
.u-might.up{border-color:var(--good);color:var(--good)} .u-might.down{border-color:var(--bad);color:var(--bad)}
.unit.exh .u-might{right:-4px;bottom:-4px}
.u-dmg{position:absolute;right:-6px;top:-6px;z-index:3;min-width:22px;height:22px;padding:0 4px;display:grid;place-items:center;font-size:var(--fs-1);font-weight:700;color:#fff;
  background:radial-gradient(circle at 35% 30%,#ff8a78,#b8281a);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 2px 5px rgba(0,0,0,.6)}
.u-dmg span{transform:rotate(45deg)}
.u-stun{position:absolute;left:-5px;top:-5px;z-index:3;width:22px;height:22px;border-radius:50%;background:#2a1840;border:1.5px solid #b98ae8;color:#e6d1ff;display:grid;place-items:center;box-shadow:0 0 10px -2px #b98ae8}
.u-stun svg{width:13px;height:13px}
.u-buff{position:absolute;left:-6px;bottom:-6px;z-index:3;min-width:24px;height:22px;padding:0 4px;border-radius:6px;background:#173222;border:1.5px solid var(--good);color:var(--good);font-size:var(--fs-0);font-weight:700;display:grid;place-items:center}
.u-tag{position:absolute;left:50%;top:4px;transform:translateX(-50%);z-index:3;font:700 9px/1.3 var(--ui);letter-spacing:.1em;text-transform:uppercase;padding:1px 5px;border-radius:4px;background:rgba(10,12,16,.88);border:1px solid var(--hair-2);color:var(--ink-2);white-space:nowrap}
.u-tag.copy{top:20px;color:#bcd7ff;border-color:var(--mind)}
.u-staged{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;font:700 9px/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase;padding:1px 6px;border-radius:4px;background:var(--gold-hi);color:var(--on-gold)}
.u-exh{position:absolute;right:3px;top:3px;z-index:3;width:18px;height:18px;border-radius:50%;background:rgba(10,12,16,.85);display:grid;place-items:center;color:#cfd6df}
.u-exh svg{width:12px;height:12px}
.u-gear{position:relative;z-index:1;display:flex;margin-top:-26px;padding-left:4px}
.u-gear .ug{margin-left:-14px;transition:transform .12s}
.u-gear .ug:first-child{margin-left:0}
.u-gear .ug:hover{transform:translateY(4px)}
.u-gear .ug .cf{--w:36px!important}
.u-gear .ug.exh .cf{filter:brightness(.55)}
.gearcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px}
.gearcard .cf{--w:calc(var(--uw) * .86)}
.gearcard.exh .cf{transform:rotate(12deg) scale(.94);filter:brightness(.55)}
.gearcard .zl{font:600 9px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.facedown{position:relative;border-radius:6px}
.facedown .cf{--w:var(--uw)}
.facedown .fd-peek{position:absolute;inset:auto 6px 6px 6px;z-index:2}
.facedown .fd-peek .cf{--w:34px!important}
.facedown .fd-label{position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:3;font:700 9px/1.3 var(--ui);letter-spacing:.1em;text-transform:uppercase;padding:1px 5px;border-radius:4px;background:rgba(10,12,16,.88);color:var(--ink-2)}
/* actionable (gold glow), selected (gold outline), targets of the selection (dashed blue) */
.can > .u-card > .cf,.zcard.can .cf,.gearcard.can .cf,.facedown.can .cf{box-shadow:0 0 0 2px var(--gold),0 0 18px -2px rgba(212,178,106,.75)!important}
.sel > .u-card,.zcard.sel,.gearcard.sel .cf,.facedown.sel .cf{outline:2.5px solid var(--gold-hi);outline-offset:3px}
.tgt > .u-card,.gearcard.tgt .cf{outline:2.5px dashed var(--info);outline-offset:3px;animation:pulse 1.4s ease-in-out infinite}
.tsel > .u-card{outline:2.5px solid var(--info)!important;outline-offset:3px}
@keyframes pulse{50%{outline-color:rgba(143,184,232,.35)}}

/* ================================================================== table: banners, chain, battlefields */
.mat > *{flex-shrink:0}     /* a crowded board scrolls inside the mat; zones never overlap */
.mid{display:flex;flex-direction:column;gap:var(--s2);flex:1 0 auto}
.banners{display:flex;flex-direction:column;gap:6px}
.banners:empty{display:none}
.banner{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;padding:7px var(--s3);border-radius:var(--r);font-size:var(--fs-2);border:1px solid var(--hair-2);background:var(--surface)}
.banner .tag{font:600 var(--fs-0)/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;padding:4px 7px;border-radius:4px;background:var(--surface-3);color:var(--ink)}
.banner .note{color:var(--ink-2)}
.banner.turn{border-color:rgba(212,178,106,.35);background:linear-gradient(90deg,rgba(212,178,106,.12),rgba(212,178,106,.02))}
.banner.turn .tag{background:var(--gold-deep);color:var(--gold-hi)}
.banner.showdown{border-color:rgba(212,178,106,.55);background:linear-gradient(90deg,rgba(212,178,106,.16),rgba(212,178,106,.03))}
.banner.showdown .tag{background:var(--gold);color:var(--on-gold)}
.banner.wait{border-color:rgba(143,184,232,.4);background:linear-gradient(90deg,rgba(143,184,232,.12),rgba(143,184,232,.02))}
.banner.wait .tag{background:var(--info-deep);color:var(--info)}
.chain{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s3) 8px;border-radius:var(--r);border:1px solid rgba(143,184,232,.45);
  background:linear-gradient(90deg,rgba(143,184,232,.14),rgba(143,184,232,.02));overflow-x:auto}
.chain .tag{font:600 var(--fs-0)/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--info);writing-mode:vertical-rl;transform:rotate(180deg)}
.ch-stack{display:flex;align-items:center;gap:var(--s3)}
.ch-item{position:relative;display:flex;align-items:center;gap:6px;max-width:220px}
.ch-item .ch-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.ch-item .cf{--w:44px;box-shadow:0 0 0 2px var(--oc),0 4px 10px rgba(0,0,0,.6)}
.ch-item.own-me{--oc:var(--gold)} .ch-item.own-opp{--oc:var(--coral)}
.ch-item.top .cf{--w:54px}
.ch-item .ch-top{position:absolute;top:-8px;left:27px;transform:translateX(-50%);z-index:2;font:700 9px/1.3 var(--ui);letter-spacing:.1em;background:var(--info);color:#0b1420;padding:1px 6px;border-radius:4px}
.ch-item .ch-t{font-size:var(--fs-1);color:var(--ink-2);line-height:1.25;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-item .ch-t.ch-name{color:var(--ink)}
.ch-arrow{color:var(--ink-3);font-size:var(--fs-3)}
.ch-item .ch-own{color:var(--oc);font-weight:600}
.ch-item.countered .cf{filter:grayscale(1) brightness(.6)}
.ch-hint{color:var(--ink-2);font-size:var(--fs-1);margin-left:auto;white-space:nowrap}

.bfs{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:var(--s3);flex:1 0 auto}
.bf{--uw:56px;display:grid;grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);isolation:isolate;min-width:0;min-height:208px;
  border-radius:var(--r);border:1px solid var(--hair-2);background:var(--surface)}
/* the battlefield's art is the backdrop: the whole field is its button (tap = choose it as a target) */
.bf-art{position:absolute;inset:0;z-index:-1;display:block;width:100%;border-radius:inherit;overflow:hidden;cursor:pointer}
.bf-art .cf{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;background:var(--surface);opacity:.34;filter:saturate(.85)}
.bf-art .cf img{object-position:50% 50%;object-view-box:inset(21% 4% 41% 4%)}   /* Chromium; elsewhere the whole card shows, dimmed */
.bf-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,20,26,.86),rgba(15,20,26,.32) 50%,rgba(15,20,26,.86))}
.bf-art:hover .cf{opacity:.46}
.bf-art:focus-visible{outline:2px solid var(--gold-hi);outline-offset:-3px}
.bf-side,.bf-core{pointer-events:none;min-width:0}
.bf-side > *,.bf-name,.bf-r .ctrl,.bf-r .scored{pointer-events:auto}
.bf-side{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:var(--s2) var(--s4);padding:var(--s3) var(--s3) var(--s2)}
.bf-side.me{align-items:flex-start;padding:var(--s2) var(--s3) var(--s3)}
.bf-side > .empty{align-self:center;font-size:var(--fs-1);color:var(--ink-3)}
.bf-core{display:flex;align-items:center;gap:var(--s3);padding:var(--s1) var(--s4)}
.bf-core::before,.bf-core::after{content:"";flex:1;height:1px;background:var(--hair-2)}
.bf-r{display:flex;align-items:center;gap:var(--s2) var(--s3);flex-wrap:wrap;justify-content:center;min-width:0}
.bf-name{font:600 var(--fs-4)/1.05 var(--display);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;cursor:help}
.ctrl{display:inline-flex;align-items:center;padding:3px var(--s2);border-radius:999px;font-size:var(--fs-1);font-weight:600;white-space:nowrap;color:var(--ink-3);border:1px dashed var(--hair-2)}
.ctrl.me{background:var(--gold-deep);color:var(--gold-hi);border:0} .ctrl.opp{background:var(--coral-deep);color:var(--coral);border:0}
.scored{font-size:var(--fs-0);padding:2px 7px;border-radius:999px;border:1px solid var(--hair-2);color:var(--ink-2);white-space:nowrap}
.scored.me{color:var(--gold-hi);border-color:rgba(212,178,106,.4)} .scored.opp{color:var(--coral);border-color:rgba(224,144,127,.4)}
.bf-l{position:absolute;inset:0;pointer-events:none}
.mt{position:absolute;right:var(--s3);display:flex;align-items:center;gap:4px;font-size:var(--fs-1);color:var(--ink-3);font-variant-numeric:tabular-nums}
.mt b{font-weight:600}
.mt .g{width:12px;height:12px}
.mt.opp{top:var(--s2)} .mt.me{bottom:var(--s2)}
.mt.opp b{color:var(--coral)} .mt.me b{color:var(--gold-hi)}
.bf-ribbon{position:absolute;left:50%;top:-10px;transform:translateX(-50%);z-index:2;white-space:nowrap;font:700 var(--fs-0)/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:var(--gold);color:var(--on-gold);box-shadow:0 4px 12px rgba(0,0,0,.5)}
.bf.ctrl-me{border-color:rgba(212,178,106,.45)} .bf.ctrl-me::before{--c:var(--gold)}
.bf.ctrl-opp{border-color:rgba(224,144,127,.42)} .bf.ctrl-opp::before{--c:rgba(224,144,127,.9)}
.bf.contested{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 30px -8px var(--gold);animation:glow 2.2s ease-in-out infinite}
.bf.contested::before{--c:var(--gold-hi);--l:20px;--t:2px}
@keyframes glow{50%{box-shadow:0 0 0 1px rgba(212,178,106,.6),0 0 18px -8px var(--gold)}}
.bf.tgt{border-color:var(--info)} .bf.tgt::before{--c:var(--info);--l:22px;--t:2px}
.bf.sel{outline:2px solid var(--gold-hi);outline-offset:2px}
.bf .mz-l{display:none}

/* ================================================================== table: the hand band (desktop) */
.handzone{flex:none;height:172px;display:grid;grid-template-columns:136px minmax(0,1fr);align-items:center;gap:var(--s4);padding:0 var(--s5) 0 var(--s4);
  border-radius:var(--r-xl);border:1px solid var(--hair);background:linear-gradient(180deg,rgba(22,29,37,.92),rgba(15,20,26,.92))}
.hand-head{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.hand-head #handTitle{font:600 var(--fs-4)/1.1 var(--display);color:var(--ink)}
.hand-head .hint{font-size:var(--fs-1);color:var(--ink-3);line-height:1.4}
.fan{display:flex;justify-content:center;align-items:flex-end;height:100%;padding:0 0 18px;min-width:0}
.hcard{position:relative;flex:none;margin-left:calc(var(--ov,0px) * -1);border-radius:6px;transition:transform .15s ease}
.hcard:first-child{margin-left:0}
.hcard .cf{--w:98px}
.hcard:hover,.hcard:focus-visible{transform:translateY(-8px);z-index:30!important}
.hcard.sel{transform:translateY(-10px);z-index:30!important}
.hcard.sel .cf{outline:2.5px solid var(--gold-hi);outline-offset:2px}
.hcard.can::after{content:"";position:absolute;left:20%;right:20%;bottom:-9px;height:2px;border-radius:2px;background:var(--gold)}
.hcard.can .cf{box-shadow:0 0 0 1px rgba(212,178,106,.6),0 8px 18px rgba(0,0,0,.45)}
.hcard.marked .cf{filter:saturate(.4) brightness(.55)}
.hcard.marked::before{content:"Mulligan";position:absolute;left:0;right:0;top:42%;z-index:3;text-align:center;font:700 var(--fs-0)/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--bad)}
.hand-hidden{padding:var(--s5) var(--s3);color:var(--ink-2);text-align:center}

/* ================================================================== table: side panel */
.side{display:flex;flex-direction:column;gap:var(--s3);min-width:0;min-height:0;overflow:auto;padding-right:2px;scrollbar-width:thin;scrollbar-color:var(--hair-2) transparent}
.side > *{flex-shrink:0}
/* game bar: who plays, the score, whose move, the phase */
.gamecard{padding:var(--s4)}
.gs-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s3)}
.gs-top .micro{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clock{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--gold-hi);font-variant-numeric:tabular-nums}
.clock svg{width:14px;height:14px;fill:none;stroke:var(--gold);stroke-width:2}
.clock b{font-weight:600}
.clock.low,.clock.low b{color:var(--bad)}
/* ranked chess clocks (one per player, under the names) and the match score of a best of 3 */
.mclock{display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:2px 8px;border-radius:999px;border:1px solid var(--hair);
  font:600 var(--fs-1)/1.4 var(--ui);font-variant-numeric:tabular-nums;color:var(--ink-2);background:rgba(0,0,0,.24);white-space:nowrap}
.mclock svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
.mclock.run{color:var(--gold-hi);border-color:var(--gold);background:var(--gold-deep)}
.mclock.run.them{color:var(--coral);border-color:var(--coral);background:var(--coral-deep)}
.mclock.low,.mclock.low.run{color:var(--bad);border-color:var(--bad)}
.gs-match{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font:600 var(--fs-1)/1.2 var(--ui);letter-spacing:.06em;color:var(--gold-hi)}
.duel{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--s3)}
.duel .p{display:flex;flex-direction:column;gap:2px;min-width:0}
.duel .p.r{text-align:right;align-items:flex-end}
.duel .p b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.duel .p small{font-size:var(--fs-1);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.duel .sc{font:600 var(--fs-5)/1 var(--display);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.02em;white-space:nowrap}
.duel .sc .sep{color:var(--ink-3);margin:0 6px}
.you{color:var(--gold-hi)} .them,.opp-c{color:var(--coral)}
.gs-turn{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3);padding:8px var(--s3);border-radius:var(--r);font-weight:600;background:rgba(0,0,0,.2);border:1px solid var(--hair)}
.gs-turn .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.gs-turn.you{color:var(--gold-hi);border-color:rgba(212,178,106,.4);background:linear-gradient(90deg,rgba(212,178,106,.14),rgba(212,178,106,.03))}
.gs-turn.them{color:var(--coral)}
.gs-turn.them .dot{animation:breathe2 1.4s ease-in-out infinite}
@keyframes breathe2{50%{opacity:.35}}
.gs-turn.over{color:var(--ink)}
.gs-turn small{margin-left:auto;font-weight:400;font-size:var(--fs-1);color:var(--ink-2);text-align:right}
.phase{display:flex;gap:2px;margin-top:var(--s3)}
.phase span{flex:1;padding:6px 0 0;text-align:center;font-size:var(--fs-1);color:var(--ink-3);border-top:2px solid var(--hair)}
.phase span.done{border-color:rgba(212,178,106,.3)}
.phase span.on{color:var(--gold-hi);border-color:var(--gold);font-weight:600}
.status > .none{color:var(--ink-2);font-size:var(--fs-2)}
/* actions: numbered rows with cost chips */
.actpanel{display:flex;flex-direction:column}
.acts{padding:0 var(--s2) var(--s2);display:flex;flex-direction:column;gap:2px;max-height:46vh;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--hair-2) transparent}
.agroup{display:flex;flex-direction:column;gap:2px}
.agroup + .agroup{margin-top:var(--s2)}
.agroup h4{margin:var(--s1) var(--s2) 2px;font:600 var(--fs-0)/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:flex;gap:6px}
.agroup h4 .n{color:var(--ink-3);opacity:.7}
.abtn{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:40px;text-align:left;padding:4px var(--s2);border-radius:var(--r);border:1px solid transparent;font-size:var(--fs-2);line-height:1.3;color:var(--ink)}
.abtn:hover:not(:disabled),.abtn:focus-visible{background:rgba(233,223,198,.06);border-color:var(--hair)}
.abtn .k{flex:none;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:4px;border:1px solid var(--hair-2);font:500 var(--fs-0)/1 var(--ui);color:var(--ink-2);background:rgba(0,0,0,.2)}
.abtn .k:empty{visibility:hidden}
.abtn .athumb{flex:none;display:block}
.abtn .athumb .cf{--w:28px;border-radius:3px}
.abtn .athumb .cf.land{--w:40px}
.abtn .aicon{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:4px;background:rgba(0,0,0,.25);color:var(--ink-2)}
.abtn .atext{flex:1;min-width:0;overflow-wrap:anywhere}
.abtn .atext small{display:block;color:var(--ink-3);font-size:var(--fs-1)}
.acost{flex:none;display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-1);font-weight:600;color:var(--ink-2);white-space:nowrap}
.acost .en{width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;background:var(--felt);border:1px solid var(--ink-2);color:var(--ink);font-size:var(--fs-0);font-weight:600}
.acost .pw{width:9px;height:9px;transform:rotate(45deg);border-radius:1px;display:inline-block;margin:0 2px;background:var(--d,var(--rainbow));box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.acost .pw.any{background:conic-gradient(var(--fury),var(--order),var(--calm),var(--mind),var(--chaos),var(--body),var(--fury))}
.abtn.choose{border-color:rgba(143,184,232,.35)}
.abtn.mull{border-color:rgba(212,178,106,.45);background:linear-gradient(90deg,rgba(212,178,106,.12),transparent);color:var(--gold-hi);font-weight:600}
.passbar{display:flex;flex-direction:column;gap:6px;padding:var(--s2) var(--s4) var(--s4)}
.passbar:empty{display:none}
.passbtn{display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;min-height:42px;padding:0 var(--s4);border-radius:var(--r);
  font-weight:600;color:var(--ink);border:1px solid var(--hair-3);background:rgba(233,223,198,.03)}
.passbtn:hover:not(:disabled){border-color:var(--gold);color:var(--gold-hi);background:rgba(212,178,106,.08)}
.cancelbtn{display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;min-height:36px;padding:0 var(--s4);border-radius:var(--r);
  font-weight:500;color:var(--coral);border:1px solid rgba(224,144,127,.45);background:transparent}
.cancelbtn:hover{background:rgba(224,144,127,.08)}
.filter{display:flex;align-items:center;gap:var(--s2);margin:0 var(--s3) var(--s2);padding:6px var(--s2) 6px var(--s3);border-radius:var(--r);font-size:var(--fs-1);
  background:rgba(212,178,106,.1);border:1px solid rgba(212,178,106,.35);color:var(--ink-2)}
.filter b{color:var(--gold-hi);font-weight:600}
.filter button{margin-left:auto;color:var(--gold-hi);font-size:var(--fs-1);padding:2px 6px;border-radius:4px;min-height:24px}
.filter button:hover{background:rgba(212,178,106,.12)}
.wait{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s3);color:var(--ink-2)}
.oppmoves{display:flex;flex-direction:column;gap:3px;padding:0 var(--s4) var(--s2);font-size:var(--fs-1)}
.oppmoves .om{color:var(--ink-2)}
.oppmoves .om.last{color:var(--ink);font-weight:500}
.oppmoves .om.last::before{content:"\25B8  ";color:var(--coral)}
.oppmoves .none{font-size:var(--fs-1);color:var(--ink-2)}
.tog{display:flex;align-items:center;gap:6px;cursor:pointer;font:400 var(--fs-1)/1 var(--ui);letter-spacing:0;color:var(--ink-2)}
.spect{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;padding:var(--s1) var(--s4) var(--s4)}
.spect-ctl{display:flex;gap:var(--s2)}
.spect label{display:flex;align-items:center;gap:6px;font-size:var(--fs-1);color:var(--ink-2)}
.spect input[type=range]{padding:0;width:110px;border:0;background:none}
.side .hbtn.primary{background:transparent;color:var(--gold-hi);border-color:rgba(212,178,106,.55);font-weight:600}   /* the side panel's gold stays quiet */
.side .hbtn.primary:hover:not(:disabled){background:rgba(212,178,106,.1);border-color:var(--gold)}
/* log */
.log-panel{flex:1 0 260px!important;min-height:200px;display:flex;flex-direction:column;overflow:hidden}
.log-panel .ptitle{cursor:pointer;user-select:none}
.log-panel .ptitle .kbd{font-size:10px;height:18px;letter-spacing:.02em}
.log-panel .caret{font-family:var(--ui);font-size:var(--fs-0);transition:transform .15s}
.log-panel.collapsed{flex:none!important;min-height:0}
.log-panel.collapsed .caret{transform:rotate(-90deg)}
.log-panel.collapsed .log,.log-panel.collapsed .known{display:none}
.log{flex:1 1 auto;min-height:120px;overflow:auto;padding:0 var(--s4) var(--s3);font-size:var(--fs-1);line-height:1.45;color:var(--ink-2);font-variant-numeric:tabular-nums;scrollbar-width:thin;scrollbar-color:var(--hair-2) transparent}
.log div{padding:3px 0;border-bottom:1px solid var(--hair);overflow-wrap:anywhere}
.log div:last-child{border-bottom:0;color:var(--ink)}
.log .turnline{color:var(--gold-hi);font-weight:600;padding-top:8px}
.log .score{color:var(--good)} .log .die{color:var(--bad)} .log .sd{color:var(--gold)}
.known{flex:none;max-height:45%;overflow:auto;padding:var(--s2) var(--s4) var(--s3);border-top:1px solid var(--hair)}
.known .kh-title{display:flex;gap:var(--s2);margin:2px 0 6px;font:600 var(--fs-0)/1.3 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.known .kh-n{margin-left:auto;font-variant-numeric:tabular-nums}
.known .kh-list{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.known .kh-card{font-size:var(--fs-1);padding:2px 8px;border-radius:999px;background:rgba(233,223,198,.06);border:1px solid var(--hair-2);cursor:help;white-space:nowrap}
.known .kh-card:hover{background:rgba(233,223,198,.12)}
.known .kh-none{font-size:var(--fs-1);color:var(--ink-2)}
.side-foot{display:flex;align-items:center;gap:var(--s1);padding:0 var(--s1);flex:none}
/* review of a finished game */
.review .rv-ctl{display:flex;gap:6px;padding:0 var(--s4) var(--s2)}
.review .rv-ctl .hbtn{flex:1;padding:0;font-size:var(--fs-2);min-height:36px}
#rvSlider{width:calc(100% - 32px);margin:var(--s1) var(--s4) var(--s2);padding:0;border:0;background:none}
.rv-next{padding:0 var(--s4) var(--s2);font-size:var(--fs-2);color:var(--ink-2);line-height:1.45}
.rv-next b{color:var(--ink);font-weight:600}
.rv-acts{display:flex;gap:6px;align-items:center;padding:0 var(--s4) var(--s3)}
.rv-answer{margin:0 var(--s4) var(--s4);padding:var(--s2) var(--s3);border-radius:var(--r);border:1px solid rgba(212,178,106,.35);background:rgba(212,178,106,.07);
  font-size:var(--fs-2);display:flex;flex-direction:column;gap:5px}
.rv-l{font:600 var(--fs-0)/1.2 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-right:4px}
.rv-verdict{font-weight:600} .rv-verdict.same{color:var(--good)} .rv-verdict.diff{color:var(--gold-hi)}

/* ================================================================== card preview (hover; full screen on phones) */
.preview{position:fixed;z-index:80;pointer-events:none;width:300px;display:none;flex-direction:column;gap:var(--s2);padding:var(--s3);
  background:rgba(22,29,37,.98);border:1px solid var(--hair-2);border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.preview.show{display:flex}
.preview.land{width:420px}
.preview .cf{--w:276px}
.preview.land .cf{--w:396px}
.pv-name{font:600 var(--fs-4)/1.1 var(--display)}
.pv-sub{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:2px;color:var(--ink-2);font-size:var(--fs-1)}
.pv-text{font-size:var(--fs-2);line-height:1.45;color:var(--ink)}
.pv-eng{font-size:var(--fs-1);color:var(--ink-2);border-top:1px dashed var(--hair-2);padding-top:6px}
.pv-state{display:flex;gap:5px;flex-wrap:wrap}

/* ================================================================== overlays, modals, sheets, toast */
.overlay{position:fixed;inset:0;z-index:50;display:none;place-items:center;padding:var(--s4);background:rgba(5,7,10,.72)}
.overlay.show{display:grid}
.overlay.soft{background:rgba(5,7,10,.45)}
.modal{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:var(--s5);background:var(--surface);border:1px solid var(--hair-2);border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.modal.wide{width:min(1000px,100%)}
.modal .label{display:block;margin-bottom:var(--s1)}
.modal h2{margin:0 0 var(--s2);font:600 var(--fs-4)/1.15 var(--display);letter-spacing:.005em}
.modal p.sub{margin:0 0 var(--s4);font-size:var(--fs-2);color:var(--ink-2);line-height:1.5}
.modal textarea{width:100%;font:var(--fs-2)/1.5 var(--ui);resize:vertical}
.mrow{display:flex;gap:var(--s2);justify-content:flex-end;align-items:center;margin-top:var(--s4);flex-wrap:wrap}
.mrow .grow{flex:1}
.mrow-center{justify-content:center}
.modal.textview{width:min(820px,100%)}
#textBody{white-space:pre-wrap;font:12px/1.5 var(--mono);color:var(--ink-2);background:var(--bg2);border:1px solid var(--hair);border-radius:var(--r);padding:var(--s3);max-height:60vh;overflow:auto;margin:0}
.modal.report{width:min(560px,100%)}
.modal.deckio{width:min(640px,100%)}
.win{text-align:center;padding:var(--s6) var(--s5) var(--s5);position:relative}
.win .win-mark{display:block;margin:0 auto var(--s2)}
.win h2{font-size:var(--fs-5);margin-bottom:var(--s2)}
.win p.sub{margin-bottom:var(--s2)}
.win .win-acts{justify-content:center;margin-top:var(--s5)}
.curtain .modal{text-align:center}
/* best of 3: match score (game bar, panels), between-game panel, the end panel's per-game review buttons */
.m-score{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--s3);margin:var(--s2) 0 var(--s3)}
.m-score .p{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:right;align-items:flex-end}
.m-score .p.r{text-align:left;align-items:flex-start}
.m-score .p b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.m-score .p small{font-size:var(--fs-1);color:var(--ink-3)}
.m-score .sc{font:600 var(--fs-5)/1 var(--display);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.m-score .sc .sep{color:var(--ink-3);margin:0 6px}
.m-score .you{color:var(--gold-hi)} .m-score .them{color:var(--coral)}
.m-score[hidden]{display:none}
.modal.match{width:min(640px,100%)}
.modal.match .m-kicker{margin:0 0 var(--s1)}
.modal.match h2{margin-bottom:var(--s1)}
.m-step{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s2)}
.m-step-t{font:700 var(--fs-3)/1.1 var(--sc);letter-spacing:.09em;color:var(--ink-2)}
.m-bfs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.m-bf{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:var(--s2);border-radius:var(--r-lg);text-align:center;
  background:rgba(0,0,0,.28);border:1px solid var(--hair);color:var(--ink);transition:border-color .15s,transform .15s;min-width:0}
.m-bf .cf{--w:100%;width:100%}
.m-bf b{font:600 var(--fs-3)/1.15 var(--display);overflow-wrap:anywhere}
.m-bf small{font-size:var(--fs-1);color:var(--ink-3)}
button.m-bf:hover:not(:disabled){border-color:var(--hair-3);transform:translateY(-1px)}
.m-bf.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:rgba(212,178,106,.06)}
.m-bf.opp{border-color:rgba(224,144,127,.55)}
.m-bf:disabled{cursor:not-allowed}
.m-bf.used{opacity:.42;filter:grayscale(.85)}
.m-bf.used small{color:var(--ink-2)}
.m-reveal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3)}
.m-reveal .m-bf small{text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.m-reveal .m-bf.on small{color:var(--gold-hi)} .m-reveal .m-bf.opp small{color:var(--coral)}
.m-hidden{display:grid;place-items:center;aspect-ratio:1039/744;border-radius:6px;border:1px dashed var(--hair-2);color:var(--ink-3);font-size:var(--fs-1)}
.m-wait{display:flex;align-items:center;justify-content:center;gap:var(--s2);color:var(--ink-2);font-size:var(--fs-2)}
.m-wait .dot{width:8px;height:8px;border-radius:50%;background:var(--coral);animation:mpulse 1.2s ease-in-out infinite}
@keyframes mpulse{50%{opacity:.25}}
.m-order{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap}
.m-order .hbtn{min-height:48px;min-width:160px;font-size:var(--fs-3)}
.m-deadline{margin:var(--s3) 0 0!important;font-variant-numeric:tabular-nums}
.m-deadline.low{color:var(--bad)}
.win-games{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s2);margin-top:var(--s3)}
.win-games[hidden]{display:none}
.win-games .wg{display:inline-flex;align-items:center;gap:6px}
.win-games .wg i{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.win-games .wg.win i{background:var(--good)} .win-games .wg.loss i{background:var(--bad)}
.toast{position:fixed;left:50%;bottom:var(--s5);transform:translateX(-50%);z-index:90;display:none;max-width:min(560px,calc(100% - 32px));padding:10px var(--s4);
  border-radius:var(--r);background:var(--surface-2);border:1px solid var(--hair-2);border-left:3px solid var(--bad);color:var(--ink);box-shadow:var(--shadow)}
.toast.show{display:block}
.toast.ok{border-left-color:var(--good)}
.pilegrid{display:flex;flex-wrap:wrap;gap:var(--s3);max-height:62vh;overflow:auto;padding:var(--s1)}
.pilegrid .cf{--w:110px}
.linkbox{display:flex;gap:var(--s2);justify-content:center;margin-top:var(--s4);max-width:100%}
.linkbox input{flex:1;min-width:0;max-width:440px;font:var(--fs-1) var(--mono);border-style:dashed}
/* pending decision */
.pend{width:min(660px,100%);display:flex;gap:var(--s5);align-items:flex-start}
.pend > .cf{--w:170px}
.pend-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s2)}
.pend-who{font:600 var(--fs-1)/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--info)}
.pend-prompt{font:600 var(--fs-4)/1.2 var(--display)}
.pend-from{color:var(--ink-2);font-size:var(--fs-1)}
.pend-opts{display:flex;flex-direction:column;gap:2px;margin-top:var(--s1)}
.pend-opts .abtn{min-height:44px;border-color:var(--hair)}
.pend-opts .abtn small{display:block;color:var(--ink-3);font-size:var(--fs-1)}
.pend .mrow{justify-content:flex-start;margin-top:var(--s2)}
.pill-btn{position:fixed;left:50%;bottom:var(--s5);transform:translateX(-50%);z-index:45;min-height:40px;padding:0 var(--s5);border-radius:999px;font-weight:600;
  background:var(--info-deep);border:1px solid var(--info);color:#d6e8fb;box-shadow:var(--shadow)}
/* sheets: bottom sheets on phones (see below), centred dialogs on wider screens (the deck picker) */
.sheet{display:none;position:fixed;z-index:60;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 32px));max-height:min(80vh,760px);
  flex-direction:column;background:var(--surface);border:1px solid var(--hair-2);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.sheet.show{display:flex}
.sheet-back{display:block;position:fixed;inset:0;z-index:59;background:rgba(5,7,10,.6)}
.sheet-back[hidden]{display:none}
.sheet-head{display:flex;align-items:center;gap:var(--s2);min-height:52px;padding:4px 4px 4px var(--s4);border-bottom:1px solid var(--hair);flex:none}
.sheet-title{flex:1;min-width:0;font:600 var(--fs-4)/1.1 var(--display);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-x{width:44px;height:44px;display:grid;place-items:center;font-size:var(--fs-3);color:var(--ink-2);border-radius:8px}
.sheet-x:hover{color:var(--ink);background:rgba(233,223,198,.05)}
.sheet-body{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.sheet-tools{padding:var(--s3) var(--s4);border-bottom:1px solid var(--hair);flex:none}
.sheet-tools input{width:100%;min-height:40px}
#sheetDeckList{display:flex;flex-direction:column;gap:4px;padding:var(--s2) var(--s3) var(--s3)}
.menu{padding:var(--s1) 0 var(--s3)}
.mitem{display:flex;align-items:center;width:100%;min-height:48px;padding:0 var(--s5);font-size:var(--fs-3);text-align:left;border-bottom:1px solid var(--hair)}
.mitem:hover{background:rgba(233,223,198,.04)}
.mitem.danger{color:var(--bad)}
.mfoot{padding:var(--s3) var(--s5) 0;color:var(--ink-3);font-size:var(--fs-1);line-height:1.6}

/* new game (local) and the deck tiles used by every picker */
.ng-seats{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--s3);align-items:start}
.ng-seat{display:flex;flex-direction:column;gap:var(--s2);min-width:0;padding:var(--s3);border-radius:var(--r-lg);background:var(--bg2);border:1px solid var(--hair)}
.ng-head{display:flex;align-items:center;gap:var(--s2)}
.ng-head b{flex:1;font:600 var(--fs-4)/1.1 var(--display)}
.ng-vs{align-self:center;font:italic 600 var(--fs-4)/1 var(--display);color:var(--ink-3)}
.ng-pick{display:flex;align-items:center;gap:var(--s3);min-height:76px;padding:var(--s2) var(--s3) var(--s2) var(--s2);border-radius:var(--r);background:rgba(0,0,0,.28);border:1px solid var(--hair);min-width:0}
.ng-pick > .cf{--w:46px}
.ng-pick > div:not(.domchips):not(.cf){flex:1;min-width:0}
.ng-pick .domchips{margin-top:4px}
.ng-pick b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ng-pick small{display:block;color:var(--ink-2);font-size:var(--fs-1)}
.ng-pick small.bad{color:var(--bad)}
.ng-pick > .empty{flex:1}
.dk-change{flex:none;margin-left:auto}
.lb-picker > .ng-search,.lb-picker > .ng-decks,.ng-seat > .ng-search,.ng-seat > .ng-decks{display:none}   /* the list lives in the deck sheet */
.ng-search{width:100%}
.ng-decks{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow:auto;padding-right:2px}
.ng-opts{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:flex-end;margin-top:var(--s4)}
.ng-opts label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-1);color:var(--ink-2)}
.ng-opts label.row{flex-direction:row;align-items:center;gap:var(--s2);min-height:36px}
.ng-opts input{width:130px}
.ng-mode{color:var(--ink-2);font-size:var(--fs-1)}
.dtile{display:flex;align-items:center;gap:var(--s3);min-height:52px;text-align:left;padding:4px var(--s2) 4px 4px;border-radius:var(--r);border:1px solid var(--hair);background:var(--surface);min-width:0}
.dtile:hover{border-color:var(--hair-2);background:var(--surface-2)}
.dtile.on{border-color:var(--gold);background:rgba(212,178,106,.09);box-shadow:inset 0 0 0 1px rgba(212,178,106,.3)}
.dtile .cf{--w:34px;border-radius:3px}
.dtile .dt-main{flex:1;min-width:0}
.dtile b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtile small{display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--ink-2);font-size:var(--fs-1)}
.dtile .place{flex:none;min-width:30px;text-align:center;font:600 var(--fs-3)/1 var(--display);color:var(--gold-hi)}
.dtile.na{opacity:.55}
.dtile.mine{border-color:rgba(212,178,106,.3)}
.dtile.mine.on{border-color:var(--gold)}
.dtile .bad{font-size:var(--fs-1);white-space:nowrap}
.dsep{padding:var(--s2) 4px 2px;font:600 var(--fs-0)/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* ================================================================== empty table: welcome + waiting */
.welcome{min-height:60vh;display:grid;place-items:center;padding:var(--s5) 0}
.welcome-card{display:flex;flex-direction:column;align-items:center;gap:var(--s3);max-width:560px;padding:var(--s6) var(--s6) var(--s5);text-align:center;
  border-radius:var(--r-lg);border:1px solid var(--hair-2);background:radial-gradient(420px 220px at 50% 0%,rgba(212,178,106,.08),transparent 70%),var(--mat)}
.welcome-card::before{inset:9px;border-radius:6px}
.welcome h1{margin:0;font:600 var(--fs-5)/1.05 var(--display);color:var(--ink)}
.welcome .sub{max-width:460px;color:var(--ink-2);font-size:var(--fs-2);line-height:1.5}
.welcome .row{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap;margin-top:var(--s2)}

/* ================================================================== home (the lobby, online) */
.lobby{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);grid-auto-flow:row dense;gap:var(--s5);align-items:start;
  max-width:1200px;margin:0 auto;padding:var(--s6) var(--s5) var(--s7);min-width:0}
.lobby > *{grid-column:1;min-width:0}
.lobby > .lb-join,.lobby > .adm-ban-notice{grid-column:1 / -1}
.lobby > .lb-side{grid-column:2;grid-row:span 4;display:flex;flex-direction:column;gap:var(--s5)}
.lb-hero{border-radius:var(--r-lg);border:1px solid var(--hair-2);background:var(--mat);min-height:340px}   /* no overflow clip: the phone Start button is sticky */
.lb-hero::before{inset:9px;border-radius:6px}
.lb-hero::after{content:"";position:absolute;inset:10px;border:1px solid var(--hair);border-radius:6px;pointer-events:none}
.lb-hero-art{position:absolute;right:0;top:0;height:420px;max-height:100%;width:52%;z-index:0;overflow:hidden;pointer-events:none;border-top-right-radius:var(--r-lg);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 55%),linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(90deg,transparent,#000 55%),linear-gradient(180deg,#000 55%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.lb-hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;object-view-box:inset(4% 4% 44% 4%);opacity:.36;filter:saturate(.9)}
.lb-hero-in{position:relative;z-index:2;display:flex;flex-direction:column;gap:var(--s4);padding:var(--s6)}
.lb-hello-box h1{margin:var(--s2) 0 0;font:600 var(--fs-5)/1.05 var(--display);letter-spacing:.005em}
.lb-hello-box .sub{margin-top:var(--s2);font-size:var(--fs-2)}
.lb-tabs{align-self:flex-start;flex-wrap:wrap}
.lb-pane{min-width:0}
.lb-body{display:flex;flex-direction:column;gap:var(--s4);min-width:0;max-width:620px}
.lb-body p.sub{margin:0;font-size:var(--fs-2)}
.lb-opts{display:flex;gap:var(--s3);flex-wrap:wrap}
.lb-opts label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-1);color:var(--ink-2)}
/* match format (BO1 / BO3) */
.lb-fmt{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s3);min-width:0}
.lb-fmt > .lb-label{flex:0 0 100%}
.lb-opts .lb-fmt{flex-direction:column;align-items:flex-start;gap:4px}
.lb-opts .lb-fmt > .lb-label{flex:none;font:400 var(--fs-1)/1.45 var(--ui);letter-spacing:0;text-transform:none;color:var(--ink-2)}
.fmt-seg button{min-width:64px;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.lb-fmt .fmt-hint{flex:1 1 200px;margin:0}
.fmt-fixed{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s3);border-radius:8px;border:1px dashed var(--hair-2);color:var(--gold-hi);font-weight:500}
.lb-fmt[hidden]{display:none}
.lobby:has(.lb-bot) .lb-botsel{display:none}          /* the tiles replace the select (kept for its state) */
.lb-bots{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--s2)}
.lb-bots:empty{display:none}
.lb-bot{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:var(--s3);border-radius:var(--r-lg);text-align:left;
  background:rgba(0,0,0,.28);border:1px solid var(--hair);transition:border-color .15s,transform .15s}
.lb-bot:hover{border-color:var(--hair-2);transform:translateY(-1px)}
.lb-bot[aria-pressed="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:rgba(212,178,106,.06)}
.lb-bot-h{display:flex;align-items:center;gap:var(--s2)}
.lb-bot-h b{font:600 var(--fs-4)/1 var(--display)}
.lb-bot-elo{display:block;color:var(--gold-hi);font:500 var(--fs-1)/1.2 var(--ui);font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-bot p{margin:0;color:var(--ink-2);font-size:var(--fs-1);line-height:1.4}
.lb-two{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3)}
.lb-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.lb-label{font:600 var(--fs-1)/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.lb-picker{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.lb-picker .ng-pick{background:rgba(0,0,0,.28)}
.lb-pane .mrow{justify-content:flex-start;margin-top:0}
.lb-pane .mrow .hbtn.primary{min-height:48px;min-width:220px;padding:0 var(--s5);font-size:var(--fs-3)}
.lb-me{display:flex;flex-direction:column;padding-bottom:var(--s2)}
.lb-me > :not(.ptitle){margin:0 var(--s4) var(--s3)}
.lb-signin{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s3);border-radius:var(--r);background:rgba(0,0,0,.2);border:1px solid var(--hair)}
.lb-signin.flash{animation:flashin 1.2s ease-out}
@keyframes flashin{0%{box-shadow:0 0 0 2px var(--gold-hi)}100%{box-shadow:0 0 0 2px transparent}}
.lb-signin-t{font-size:var(--fs-2);line-height:1.5}
.lb-signin-btns{display:flex;flex-direction:column;gap:var(--s2)}
.lb-nick{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.lb-nick input{flex:1 1 150px;min-width:0}
.lb-nick .lb-hint{flex:1 1 100%}
.lb-account{font-size:var(--fs-1);color:var(--ink-2);line-height:1.8}
.lb-acad{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5)}
.lb-sec .lb-list{padding:0}
.lb-list{display:flex;flex-direction:column;gap:0}
.lb-list .none{padding:var(--s2) 0}
.lb-game{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) 0;border-bottom:1px solid var(--hair);min-width:0}
.lb-vs{flex:1 1 260px;display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;min-width:0}
.lb-vs span{display:flex;flex-direction:column;min-width:0;font-weight:600}
.lb-vs span small{color:var(--ink-3);font-weight:400;font-size:var(--fs-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
.lb-vs i{font:italic 600 var(--fs-3)/1 var(--display);color:var(--ink-3);padding:0 var(--s1)}
.lb-meta{flex:1 1 160px;color:var(--ink-2);font-size:var(--fs-1)}
.lb-summary .lb-game{border:0;padding:0 0 var(--s2)}
.lb-join{border-color:rgba(212,178,106,.45);box-shadow:0 0 0 1px rgba(212,178,106,.12)}
.lb-join .lb-body{padding:0 var(--s4) var(--s4);max-width:none}
.lb-recent .cnt{color:var(--gold-hi)}
.lb-pane .lb-list .lb-game:first-child{border-top:1px solid var(--hair)}

/* ================================================================== decks browser */
.decks-view{display:grid;grid-template-columns:320px minmax(0,1fr);gap:var(--s5);padding:var(--s5);max-width:1800px;margin:0 auto}
.dv-list{display:flex;flex-direction:column;gap:4px;position:sticky;top:calc(var(--head) + var(--s4));align-self:start;max-height:calc(100vh - var(--head) - 32px);overflow:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--hair-2) transparent}
.dv-mine{margin-bottom:var(--s2)}
.dv-mine .ptitle{gap:6px;align-items:center}
.dv-mine-list{display:flex;flex-direction:column;gap:4px;padding:0 var(--s2) var(--s2)}
.dv-mine-list .none{padding:2px var(--s2) var(--s2);font-size:var(--fs-1)}
.dv-event{padding:var(--s3) var(--s4);margin-bottom:var(--s1)}
.dv-event b{display:block;font:600 var(--fs-4)/1.15 var(--display)}
.dv-event small{color:var(--ink-2);font-size:var(--fs-1)}
.dv-detail{min-width:0;display:flex;flex-direction:column;gap:var(--s5)}
.dv-head{display:flex;gap:var(--s5);align-items:flex-end;padding:var(--s5);border-radius:var(--r-lg);border:1px solid var(--hair-2);
  background:radial-gradient(640px 240px at 0% 100%, color-mix(in srgb,var(--d,var(--gold)) 18%, transparent), transparent 70%),var(--mat)}
.dv-head::before{inset:9px;border-radius:6px}
.dv-head .cf{--w:150px}
.dv-head .cf + .cf{--w:120px}
.dv-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s2)}
.dv-place{font:700 var(--fs-3)/1.1 var(--sc);letter-spacing:.09em;color:var(--gold-hi)}
.dv-title{font:600 var(--fs-5)/1.05 var(--display)}
.dv-meta{display:flex;gap:6px var(--s4);flex-wrap:wrap;align-items:center;color:var(--ink-2);font-size:var(--fs-2)}
.dv-actions{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-top:var(--s2)}
.dv-actions .hint{color:var(--ink-3);font-size:var(--fs-1)}
.dv-row{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s5);align-items:start}
.dv-side{display:flex;flex-direction:column;gap:var(--s3)}
.curve{padding:var(--s3) var(--s4)}
.curve .ptitle{padding:0}
.curve-bars{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;align-items:end;height:130px;margin-top:var(--s2)}
.cbar{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;height:100%}
.cbar .v{text-align:center;font-size:var(--fs-0);color:var(--ink-2);margin-bottom:2px}
.cbar .seg{border-radius:3px 3px 0 0;min-height:0}
.cbar .seg + .seg{border-radius:0}
.seg.unit{background:var(--gold)} .seg.spell{background:#6f9ad9} .seg.gear{background:#8c96a3}
.curve-x{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:4px;font-size:var(--fs-0);color:var(--ink-3);text-align:center}
.curve-key{display:flex;gap:var(--s3);font-size:var(--fs-1);color:var(--ink-2);margin-top:var(--s2)}
.curve-key i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.dv-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s3);padding:var(--s3) var(--s4);font-size:var(--fs-1);color:var(--ink-2)}
.dv-stats b{display:block;font:600 var(--fs-4)/1.1 var(--display);color:var(--ink)}
.dv-sec{display:flex;flex-direction:column;gap:var(--s3)}
.dv-secs{gap:var(--s5)}
.dv-sec h3{margin:0;display:flex;gap:var(--s2);align-items:baseline;padding-bottom:var(--s2);border-bottom:1px solid var(--hair);font:700 var(--fs-3)/1.1 var(--sc);letter-spacing:.09em;color:var(--ink-2)}
.dv-sec h3 small{font:400 var(--fs-1)/1 var(--ui);letter-spacing:0;color:var(--ink-3)}
.dgrid{display:flex;flex-wrap:wrap;gap:var(--s3)}
.dcard{position:relative}
.dcard .cf{--w:116px}
.dcard .cf.land{--w:166px}
.qty{position:absolute;right:-6px;top:-6px;z-index:2;min-width:26px;height:26px;padding:0 6px;border-radius:999px;display:grid;place-items:center;
  background:var(--felt);border:1px solid var(--gold);color:var(--gold-hi);font:600 var(--fs-1)/1 var(--ui);box-shadow:0 2px 6px rgba(0,0,0,.6)}

/* ================================================================== deck builder (#viewBuild, docs/mobile.md "Deck builder") */
.bd{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4) var(--s5) var(--s6);max-width:1800px;margin:0 auto;min-width:0}
.bd-top{display:flex;align-items:center;gap:var(--s2) var(--s3);flex-wrap:wrap;padding:var(--s3);position:sticky;top:calc(var(--head) + 8px);z-index:20;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.bd-top .grow{flex:1}
.bd-name{flex:0 1 320px;min-width:140px;font:600 var(--fs-4)/1.1 var(--display);padding:5px 10px}
.bd-status{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 var(--s3);border-radius:999px;font-size:var(--fs-1);font-weight:600;border:1px solid var(--hair-2);white-space:nowrap}
.bd-status.ok{color:var(--good);border-color:rgba(143,204,160,.5);background:rgba(143,204,160,.08)}
.bd-status.bad{color:var(--bad);border-color:rgba(232,131,111,.5);background:rgba(232,131,111,.08)}
.bd-status.wait{color:var(--ink-2)}
.bd-dirty{font-style:normal;color:var(--gold-hi);font-size:10px}
.bd-acts{display:flex;gap:6px;flex-wrap:wrap}
.bd-more{display:none}
.bd-seg{display:none}
.bd-body{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--s3);align-items:start}
.bd-browser{min-width:0;display:flex;flex-direction:column}
.bd-tabs{margin:var(--s3) var(--s3) 0;align-self:flex-start;flex-wrap:wrap}
.bd-filters{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3);border-bottom:1px solid var(--hair)}
.bd-frow{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.bd-frow .ng-search{flex:1 1 220px;width:auto;min-width:0}
.bd-frow select{flex:0 1 auto}
.bd-frow .grow{flex:1}
.bd-doms .domchip{cursor:pointer;min-height:28px;padding:2px 10px 2px 8px;font-size:var(--fs-1)}
.bd-doms .domchip.on{background:color-mix(in srgb,var(--d) 40%, transparent);box-shadow:0 0 0 1px var(--d)}
.bd-target{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-1);color:var(--ink-2)}
.bd-target button{min-height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--hair-2);font-size:var(--fs-1)}
.bd-target button.on{border-color:var(--gold);color:var(--gold-hi);background:rgba(212,178,106,.08)}
.bd-hint{color:var(--ink-2);font-size:var(--fs-1)}
.bd-grid{padding:var(--s3) var(--s3) var(--s4);min-width:0}
.bd-count{color:var(--ink-3);font-size:var(--fs-1);margin-bottom:var(--s2)}
.bd-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--s3)}
.bd-tiles.lands{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.bd-card{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0}
.bd-card .bd-face{display:block;width:100%;border-radius:6px}
.bd-card .cf{--w:100%}
.bd-card.in .bd-face .cf{box-shadow:0 0 0 2px var(--gold),0 6px 16px rgba(0,0,0,.45)}
.bd-card.full:not(.in) .bd-face{opacity:.5}
.bd-cap{font-size:var(--fs-1);color:var(--ink-2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-card.in .bd-cap{color:var(--gold-hi)}
.bd-n{position:absolute;top:6px;right:6px;z-index:3;min-width:30px;padding:2px 7px;border-radius:999px;background:rgba(11,15,20,.92);border:1px solid var(--gold);color:var(--gold-hi);font-size:var(--fs-1);font-weight:600;text-align:center}
.bd-tags{position:absolute;left:5px;top:6px;z-index:3;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.bd-tag{font:600 9px/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;padding:1px 5px;border-radius:4px;background:rgba(11,15,20,.9);color:var(--ink);border:1px solid var(--hair-2)}
.bd-tag.sig{color:var(--gold-hi);border-color:rgba(212,178,106,.6)}
.bd-tag.ban{color:var(--bad);border-color:var(--bad)}
.bd-pm{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bd-pm button,.bd-row button,.bd-rune button{min-height:30px;border-radius:var(--r);border:1px solid var(--hair-2);background:rgba(233,223,198,.03);font-size:var(--fs-3);line-height:1}
.bd-pm button:hover:not(:disabled),.bd-row button:hover:not(:disabled),.bd-rune button:hover:not(:disabled){border-color:var(--gold);color:var(--gold-hi)}
.bd-showmore{display:flex;margin:var(--s4) auto 0}
.bd-deck{min-width:0;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);position:sticky;top:calc(var(--head) + 84px);max-height:calc(100vh - var(--head) - 100px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--hair-2) transparent}
.bd-id{display:flex;gap:var(--s2);align-items:center}
.bd-idcard{flex:none;border-radius:6px}
.bd-idcard .cf{--w:64px}
.bd-idcard + .bd-idcard .cf{--w:54px}
.bd-slot{display:grid;place-items:center;width:62px;height:86px;border:1px dashed var(--hair-2);border-radius:6px;color:var(--ink-3);font-size:var(--fs-0)}
.bd-idtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.bd-idtext b{font:600 var(--fs-4)/1.1 var(--display)}
.bd-idtext small{color:var(--ink-2);font-size:var(--fs-1)}
.bd-counts{display:flex;gap:6px var(--s4);flex-wrap:wrap;font-size:var(--fs-1);color:var(--ink-2)}
.bd-counts b{font-size:var(--fs-3);color:var(--ink)}
.bd-counts b.good{color:var(--good)} .bd-counts b.bad{color:var(--bad)}
.bd-errs{border:1px solid rgba(232,131,111,.45);background:rgba(232,131,111,.07);border-radius:var(--r);padding:var(--s2) var(--s3);font-size:var(--fs-1)}
.bd-errs b{color:var(--bad)}
.bd-errs ul,.bd-warns{margin:4px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
.bd-warns{color:var(--gold-hi);font-size:var(--fs-1)}
.bd-ok{border:1px solid rgba(143,204,160,.45);background:rgba(143,204,160,.07);border-radius:var(--r);padding:var(--s2) var(--s3);font-size:var(--fs-1);color:var(--good)}
.bd-ok.wait{color:var(--ink-2);border-color:var(--hair-2);background:none}
.bd-sec{display:flex;flex-direction:column;gap:4px}
.bd-sec h4{margin:0 0 2px;display:flex;gap:var(--s2);align-items:baseline;font:700 var(--fs-3)/1.1 var(--sc);letter-spacing:.09em;color:var(--ink-2)}
.bd-sec h4 small{font:400 var(--fs-1)/1 var(--ui);letter-spacing:0;color:var(--ink-3)}
.bd-sec .none{font-size:var(--fs-1)}
.bd-row{display:flex;align-items:center;gap:6px;padding:2px 4px 2px 0;border-radius:var(--r);border-left:3px solid var(--d,var(--hair-2));background:rgba(0,0,0,.2);min-height:34px}
.bd-row.chosen{background:rgba(212,178,106,.08)}
.bd-cost{flex:none;width:24px;text-align:center;font-weight:600;color:var(--ink);font-size:var(--fs-1)}
.bd-rn{flex:1;min-width:0;font-size:var(--fs-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-rn small{color:var(--gold-hi);font-size:var(--fs-0)}
.bd-q{flex:none;width:18px;text-align:center;font-size:var(--fs-1)}
.bd-row button{flex:none;width:30px}
.bd-x{color:var(--ink-2)}
.bd-runes{display:flex;flex-wrap:wrap;gap:6px var(--s4)}
.bd-rune{display:flex;align-items:center;gap:6px}
.bd-rune b{min-width:18px;text-align:center}
.bd-rune button{width:30px}
.bd-rune.off .domchip{text-decoration:line-through}
.bd-bfs{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.bd-bf{position:relative;display:flex;flex-direction:column;gap:3px;width:92px;font-size:var(--fs-0);color:var(--ink-2)}
.bd-bf span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-bf .bd-x{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;background:var(--surface-2);border:1px solid var(--hair-2);font-size:var(--fs-0)}
.bd-deck .curve{padding:var(--s3) 0 0;border:0;background:none}
#bdText{width:100%;font:12.5px/1.5 var(--mono);color:var(--ink);resize:vertical}
.bd-share{justify-content:stretch;margin-top:var(--s3)}
.bd-share input{max-width:none}

/* ================================================================== footer */
.disclaimer{margin-top:var(--s2);padding:var(--s5) var(--s4);text-align:center;color:var(--ink-3);font-size:var(--fs-1);border-top:1px solid var(--hair);overflow-wrap:anywhere}
.disclaimer a{color:var(--ink-2)}

/* ================================================================== mid widths */
@media (max-width:1280px){
  .pstrip{grid-template-columns:minmax(0,1fr) auto auto auto}
  .pstrip.opp{grid-template-areas:"tag tag tag tag" "base info id deck" "base rdeck id trash"}
  .pstrip.opp:has(> .strip-hand){grid-template-areas:"hand hand hand hand" "tag tag tag tag" "base info id deck" "base rdeck id trash"}
  .pstrip.me{grid-template-areas:"base info id deck" "base rdeck id trash" "tag tag tag tag"}
  .strip-info{padding-bottom:22px}
}
@media (min-width:721px) and (max-height:860px){   /* shorter screens: smaller cards so the whole mat still fits */
  :root{--uw:52px}
  .bf{--uw:46px;min-height:0}
  .mat{gap:var(--s2);padding-top:var(--s2);padding-bottom:var(--s2)}
  .bf-side{padding-top:var(--s2)} .bf-side.me{padding-bottom:var(--s2)}
  .handzone{height:146px} .hcard .cf{--w:82px} .fan{padding-bottom:14px}
}
@media (max-width:1180px){
  :root{--side:310px}
  .dv-row{grid-template-columns:minmax(0,1fr)}
  .bd-body{grid-template-columns:minmax(0,1fr) 320px}
}
@media (max-width:1000px) and (min-width:721px){
  .table{height:auto;min-height:0;grid-template-columns:minmax(0,1fr)}
  .mat{overflow:visible;min-height:600px}
  .side{overflow:visible}
  .acts{max-height:none}
  .lobby{grid-template-columns:minmax(0,1fr)}
  .lobby > .lb-side{grid-column:1;grid-row:auto}
  .decks-view{grid-template-columns:260px minmax(0,1fr)}
}

/* ================================================================== phone (docs/mobile.md)
   Under 720 px: a game bar on top, one scrolling column (opponent strip, battlefields side by side, own strip) and a
   fixed bottom tray (prompt + hand strip + Actions / End turn). Other views: a compact top bar and a bottom tab bar.
   app.js mirrors the breakpoint with matchMedia -> body.phone and moves #passBar, #filterBar, #acts, #handZone and
   #log into the tray / log sheet; everything else here is pure CSS. */
@media (max-width:720px){
  :root{--head:48px;--uw:50px}
  body{font-size:var(--fs-2)}
  button,.cf,.hcard,.unit,.dtile,.zcard,.bf-art{touch-action:manipulation}
  .cf,.hcard{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .hbtn{min-height:44px;padding:0 var(--s4)}
  .hbtn.small{min-height:36px}
  body:not(.dock-on){padding-bottom:calc(var(--bnav) + env(safe-area-inset-bottom))}
  body.dock-on{padding-bottom:calc(var(--dock-h,200px) + 8px)}
  body.dock-on .toast{bottom:calc(var(--dock-h,200px) + 14px)}
  body:not(.dock-on) .toast{bottom:calc(var(--bnav) + 14px + env(safe-area-inset-bottom))}

  /* top bar: [‹ back] mark · title / game status · rank chip · ⋯ */
  .topbar{gap:var(--s2);padding:0 4px 0 var(--s3);backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(11,15,20,.97)}
  .brand-name,.head-r #btnNew{display:none}
  .brand-mark{width:24px;height:24px}
  .topbar:has(#btnBack:not([hidden])) .brand{display:none}
  .status-line{display:flex;flex:1;min-width:0;align-items:center;gap:var(--s2);font:600 var(--fs-4)/1.1 var(--display);color:var(--ink)}
  body:not([data-screen="table"]) .status-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .status-line .sl-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2;font-family:var(--ui)}
  .status-line .sl-text b{font-size:var(--fs-3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .status-line .sl-text small{font-size:var(--fs-1);font-weight:400;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .status-line .clock{flex:none;padding:6px var(--s3);border-radius:999px;background:var(--gold-deep);font:600 var(--fs-2)/1 var(--ui)}
  .status-line .clock.low{background:var(--coral-deep)}
  .status-line .sl-clocks{flex:none;display:flex;flex-direction:column;gap:2px;align-items:flex-end}
  .status-line .mclock{margin:0;padding:1px 7px;font-size:var(--fs-0)}
  .status-line .mclock svg{display:none}
  .status-line .mclock i{font-style:normal;font-weight:500;opacity:.75;margin-right:1px}
  .fmt-seg button{min-height:38px}
  .head-r{gap:4px}
  .me-chip{padding:3px;min-height:36px;border-color:transparent}
  .me-chip b,.me-chip .num{display:none}
  .tb-icon{display:grid;place-items:center;width:44px;height:44px;font-size:22px;line-height:1;color:var(--ink-2);border-radius:8px}
  .tb-back{width:auto;padding:0 10px 0 6px;font-size:var(--fs-3);color:var(--gold-hi)}
  .netbanner{top:var(--head)}
  /* bottom tab bar (not on the game table: the tray owns the bottom there) */
  .nav{position:fixed;left:0;right:0;bottom:0;z-index:45;justify-content:space-around;gap:0;padding:4px var(--s1) calc(4px + env(safe-area-inset-bottom));
    background:rgba(11,15,20,.97);border-top:1px solid var(--hair)}
  .nav button{flex:1;flex-direction:column;justify-content:center;gap:3px;min-height:52px;padding:4px 0;font-size:var(--fs-0);letter-spacing:.02em}
  .nav svg{display:block}
  .nav button.on{color:var(--gold-hi)}
  .nav button.on::after{left:32%;right:32%;top:-5px;bottom:auto}
  body.dock-on .nav,body.dock-on .me-chip{display:none}
  #chNext:disabled,#chSkip:disabled{display:none}  /* only while the opponent's moves wait */

  /* table: one column, no side panel */
  .table{display:block;height:auto;min-height:0;padding:var(--s2) var(--s2) 0}
  .side{display:none}
  .arena{gap:var(--s2)}
  .welcome{min-height:56vh;padding:var(--s3) 0}
  .welcome-card{padding:var(--s5) var(--s4)}
  .welcome h1{font-size:30px}
  .mat{overflow:visible;padding:var(--s2);gap:var(--s2);border-radius:var(--r-lg)}
  .mat::after,.mat-track,.mat-pile{display:none}

  /* player strips: a two-line tag (name · 8-segment score · big number / counts) over Base | Legend | Champion */
  .pstrip{grid-template-columns:minmax(0,1fr) auto;gap:6px var(--s2)}
  .pstrip.opp,.pstrip.opp:has(> .strip-hand){grid-template-areas:"tag tag" "base id" "hand hand"}
  .pstrip.me{grid-template-areas:"base id" "tag tag"}
  .pstrip.open.opp{grid-template-areas:"tag tag" "info info" "base id" "hand hand"}
  .pstrip.open.me{grid-template-areas:"base id" "tag tag" "info info"}
  .strip-tag{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"seat pts" "counts counts";gap:2px var(--s2);padding:2px 2px 0;cursor:pointer}
  .pstrip.open .strip-tag{grid-template-areas:"seat pts" "sub sub" "counts counts"}
  .seatline{grid-area:seat}
  .seatline::after{content:"\25BE";color:var(--ink-3);font-size:var(--fs-1);padding:0 2px}
  .pstrip.open .seatline::after{content:"\25B4"}
  .seat{font-size:var(--fs-3)}
  .seatline .badge{font-size:9px;padding:2px 6px}
  .seat-sub{grid-area:sub;display:none}
  .pstrip.open .seat-sub{display:block}
  .ptsrow{grid-area:pts;display:flex}
  .track{display:flex;gap:3px;align-items:center}
  .tcell{width:12px;height:6px;border-radius:2px;background:rgba(233,223,198,.1);font-size:0}
  .tcell.on{background:var(--side-c)}
  .tcell.goal{box-shadow:inset 0 0 0 1px var(--gold)}
  .tcell.goal.on{background:var(--gold)}
  .pts{display:inline;font:600 var(--fs-4)/1 var(--display);font-variant-numeric:lining-nums tabular-nums;color:var(--side-c);min-width:14px;text-align:right}
  .pts small{display:none}
  .counts{grid-area:counts;justify-content:flex-start;margin:0;gap:2px var(--s3);font-size:var(--fs-1)}
  .counts .c-deck{display:inline}
  .counts .pile[data-pile$=":trash"],.counts .pile[data-pile$=":banish"]{display:inline-flex}
  .pstrip:not(.open) .counts .pile:disabled,.pstrip:not(.open) .counts .c-rdeck,.pstrip:not(.open) .counts .c-xp{display:none}
  .pstrip.open .counts .c-rdeck{display:inline}
  .c-runes{padding:1px 7px}
  .backs{display:none}
  .pile{min-height:26px}
  .strip-info{display:none;min-width:0;padding:4px 2px}
  .pstrip.open .strip-info{display:flex}
  .strip-info .mz-l{display:none}
  .runes{flex-direction:row;flex-wrap:wrap;gap:4px var(--s3)}
  .strip-base{padding:6px 6px 6px var(--s2);min-height:calc(var(--uw) * 1.4 + 14px)}
  .strip-base .mz-l{display:none}
  .pstrip.open .strip-base{padding-bottom:20px}
  .pstrip.open .strip-base .mz-l{display:flex;font-size:9px;bottom:5px;left:var(--s2)}
  .urow{flex-wrap:nowrap;overflow-x:auto;gap:4px 6px;padding:2px 2px;min-height:0;scrollbar-width:none}
  .urow::-webkit-scrollbar{display:none}
  .urow > .empty{margin:auto}
  .strip-id{gap:6px}
  .zcard{padding:2px 0 0;gap:3px}
  .zcard .cf{--w:46px!important}
  .zcard .zl{display:none}
  .pstrip.open .zcard .zl{display:block;font-size:9px}
  .zslot{width:46px;font-size:9px}
  .strip-hand{max-width:none}
  .minihand{overflow-x:auto;padding:4px 0 2px 14px} .minihand .cf{--w:40px!important}

  /* units: 50 px cards (44 px at battlefields), transparent padding for 56+ px touch targets, smaller badges */
  .unit{padding:0 3px}
  .unit[data-unit]:hover{transform:none}
  .u-might{min-width:20px;height:20px;font-size:var(--fs-0);right:-2px;bottom:-4px}
  .u-dmg{min-width:18px;height:18px;font-size:10px;right:-2px;top:-4px}
  .u-stun{width:18px;height:18px;left:-1px;top:-3px} .u-stun svg{width:10px;height:10px}
  .u-buff{min-width:18px;height:16px;font-size:9px;left:-2px;bottom:-4px}
  .u-tag{font-size:7px;padding:0 3px;top:3px} .u-tag.copy{top:14px}
  .u-staged{font-size:7px;bottom:12px}
  .u-exh{width:14px;height:14px;right:2px;top:2px} .u-exh svg{width:9px;height:9px}
  .u-gear{margin-top:-18px;padding-left:6px} .u-gear .ug{margin-left:-10px} .u-gear .ug .cf{--w:26px!important}
  .u-gear .ug:hover{transform:none}
  .facedown .fd-peek .cf{--w:24px!important} .facedown .fd-label{font-size:7px}

  /* middle: banners on one or two lines, battlefields side by side */
  .mid{gap:6px}
  .banner{padding:5px var(--s2);font-size:var(--fs-1);gap:3px 6px;line-height:1.3}
  .banner .note{display:none}
  .chain{padding:6px var(--s2) 4px;gap:6px}
  .chain .tag{writing-mode:horizontal-tb;transform:none}
  .ch-item .cf{--w:34px} .ch-item.top .cf{--w:40px} .ch-item .ch-top{left:20px;font-size:8px}
  .ch-hint{display:none}
  .bfs{gap:6px}
  .bf{--uw:44px;min-height:0;grid-template-rows:auto auto auto}
  .bf-side{flex-wrap:nowrap;overflow-x:auto;justify-content:center;gap:4px;padding:6px 4px 2px;min-height:calc(var(--uw) * 1.4 + 12px);scrollbar-width:none}
  .bf-side::-webkit-scrollbar{display:none}
  .bf-side.me{padding:2px 4px 6px}
  .bf-side:has(> .empty:only-child){min-height:40px}
  .bf-core{flex-direction:column;gap:3px;padding:2px 6px}
  .bf-core::before,.bf-core::after{display:none}
  .bf-r{flex-direction:column;gap:3px}
  .bf-name{font-size:17px;max-width:100%}
  .ctrl{padding:2px 6px;font-size:var(--fs-0)}
  .scored{display:none}
  .bf-l{display:none}                       /* the totals stay on desktop; tap units for their might */
  .bf-ribbon{font-size:9px;top:-8px;padding:3px 8px}
  .bf.contested{box-shadow:0 0 0 1px var(--gold),0 0 18px -6px var(--gold)}

  /* the tray: prompt line · hand strip · [chips, Actions] [End turn]; the Actions sheet slides over the hand */
  .dock{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"acts acts" "prompt prompt" "hand hand" "chips pass";
    position:fixed;left:0;right:0;bottom:0;z-index:40;padding:0 0 calc(var(--s2) + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(15,20,26,.97),var(--felt));border-top:1px solid var(--hair-2);box-shadow:0 -12px 30px rgba(0,0,0,.45)}
  .dock-back{display:block;position:fixed;inset:0;z-index:39;background:rgba(5,7,10,.5)}
  .dock-ctx{display:contents}
  .dock-prompt{grid-area:prompt;display:block;min-width:0;min-height:30px;padding:6px var(--s4) 0;text-align:left;font-size:var(--fs-1);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dock-slot{grid-area:prompt;display:flex;min-width:0;padding:6px var(--s3) 0}
  .dock-slot:empty,.dock-slot:not(:has(.filter)){display:none}   /* holds #filterBar, empty without a selection */
  .dock-slot .filter{margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;padding:2px 2px 2px var(--s2)}
  .dock-slot .filter b{overflow:hidden;text-overflow:ellipsis;min-width:0}
  .dock-slot .filter button{min-width:40px;min-height:32px;flex:none;padding:0 4px;font-size:var(--fs-3)}
  .dock-chips{grid-area:chips;display:flex;gap:6px;align-items:center;min-width:0;overflow-x:auto;padding:var(--s2) 0 0 var(--s3);scrollbar-width:none}
  .dock-chips::-webkit-scrollbar{display:none}
  .chip{flex:none;min-height:44px;padding:0 var(--s3);border-radius:var(--r);border:1px solid var(--hair-2);background:transparent;font-size:var(--fs-2);font-weight:500;color:var(--ink);white-space:nowrap}
  .chip.gold{border-color:rgba(212,178,106,.55);color:var(--gold-hi)}
  .chip.on{border-color:var(--gold);color:var(--gold-hi);background:rgba(212,178,106,.08)}
  .chip.acts-chip{order:-1;min-width:132px;padding:0 var(--s4);background:linear-gradient(180deg,#dcbd78,#c9a45a);border-color:#e3c582;color:var(--on-gold);font-weight:600}
  .dock-pass{grid-area:pass;display:flex;align-items:center;padding:var(--s2) var(--s3) 0 6px}
  .dock-pass .passbar{padding:0;display:flex;flex-direction:row;gap:6px;align-items:center}
  .dock-pass .passbar:empty{display:none}
  .dock-pass .passbtn{width:auto;min-height:44px;padding:0 var(--s4);white-space:nowrap;max-width:46vw;overflow:hidden;text-overflow:ellipsis;display:block;line-height:42px}
  .dock-pass .cancelbtn{width:44px;min-height:44px;padding:0;font-size:20px}
  .dock-pass .kbd{display:none}
  /* hand strip: horizontal scroll with snap, 62 px cards, the selected one lifted with the gold outline */
  .dock .handzone{grid-area:hand;display:block;height:auto;padding:0;border:0;border-radius:0;background:none}
  .dock .hand-head{display:none}
  .dock .fan{display:flex;justify-content:flex-start;align-items:flex-end;height:auto;gap:6px;padding:12px var(--s4) 10px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .dock .fan::-webkit-scrollbar{display:none}
  .dock .fan::after{content:"";flex:none;width:6px}
  .dock .hcard{margin-left:0;transform:none;scroll-snap-align:center}
  .dock .hcard .cf{--w:62px}
  .dock .hcard:hover,.dock .hcard:focus-visible{transform:none}
  .dock .hcard.sel{transform:translateY(-8px)}
  .dock .hcard.can::after{bottom:-6px}
  .dock .hand-hidden{padding:var(--s4);font-size:var(--fs-2)}
  .hinfo{display:grid;place-items:center;position:absolute;left:2px;top:2px;z-index:3;width:20px;height:20px;border-radius:50%;background:rgba(10,12,16,.85);border:1px solid rgba(255,255,255,.55);
    font:italic 600 12px/1 var(--display);color:#fff}
  .hinfo::after{content:"";position:absolute;inset:-6px}  /* 32 px hit area */
  .dock-acts{grid-area:acts;display:flex;flex-direction:column;max-height:52vh;border-bottom:1px solid var(--hair);background:var(--surface);border-radius:16px 16px 0 0}
  .dock.acts-open .handzone{display:none}
  .dock-acts .sheet-head{min-height:48px}
  .dock-acts .acts{padding:var(--s2) var(--s2) var(--s1);max-height:none;gap:2px}
  .dock-acts .abtn{min-height:52px;padding:6px var(--s2)}
  .dock-acts .abtn .k{display:none}
  .dock-acts .abtn .athumb .cf{--w:32px} .dock-acts .abtn .athumb .cf.land{--w:44px}
  .dock-acts .wait{padding:var(--s4) var(--s3)}

  /* sheets: bottom sheets (log, menu, lesson, deck actions, deck picker) */
  .sheet{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;max-height:80vh;border-radius:16px 16px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom);animation:sheetUp .18s ease-out}
  .sheet.full{top:0;max-height:none;border-radius:0;border:0}
  @keyframes sheetUp{from{transform:translateY(32px);opacity:.5}to{transform:none;opacity:1}}
  .sheet-head{min-height:48px;touch-action:none}
  .sheet-head::before{content:"";position:absolute;left:50%;top:5px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--hair-2)}
  .sheet.full .sheet-head::before{display:none}
  .sheet-title{font-size:20px}
  #sheetLogBody{min-height:40vh}
  #sheetLogBody .log{max-height:none;padding:6px var(--s4) var(--s3);font-size:var(--fs-1)}
  #sheetDeckList .dtile{min-height:52px}

  /* preview: full-screen sheet, closes on tap */
  .preview{inset:0!important;width:auto;max-width:none;border-radius:0;border:0;pointer-events:auto;overflow:auto;padding:var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
    align-items:center;gap:10px;background:rgba(11,15,20,.98);box-shadow:none}
  .preview.land{width:auto}
  .preview .cf{--w:min(300px, calc(100vw - 32px))} .preview.land .cf{--w:min(400px, calc(100vw - 32px))}
  .preview > div{width:100%}
  .pv-x{display:grid;position:absolute;top:4px;right:4px;background:rgba(0,0,0,.4)}
  .pv-name{font-size:24px} .pv-text{font-size:var(--fs-2)}

  /* pending decision as a bottom sheet; the "show" pill sits above the tray */
  #pendingOverlay{padding:0;align-items:end;justify-items:stretch}
  .modal.pend{width:100%;max-width:none;max-height:70vh;border-radius:16px 16px 0 0;border-bottom:0;flex-wrap:wrap;gap:var(--s2) var(--s3);padding:var(--s4) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom))}
  .pend > .cf{--w:72px}
  .pend-body{flex:1 1 200px;min-height:0}
  .pend-prompt{font-size:20px}
  .pend-opts{max-height:42vh;overflow:auto;padding-right:2px}
  .pend-opts .abtn{min-height:48px;margin:0}
  .pend .mrow{flex-direction:row;justify-content:flex-start;margin-top:6px}
  .pill-btn{bottom:calc(var(--dock-h,0px) + 12px);min-height:44px}

  /* other modals: full width with a 16 px gutter, buttons stacked */
  .overlay{padding:var(--s4)}
  .modal{width:100%!important;padding:var(--s5) var(--s4) var(--s4);max-height:calc(100vh - 32px)}
  .modal h2{font-size:var(--fs-4)}
  .win h2{font-size:30px}
  .modal.match{padding:var(--s4) var(--s3) var(--s3)}
  .m-bfs{gap:var(--s2)}
  .m-bf{padding:6px}
  .m-bf b{font-size:var(--fs-2)}
  .m-score .sc{font-size:30px}
  .m-order .hbtn{min-width:0;flex:1 1 0}
  .modal.match .mrow{flex-direction:row;flex-wrap:wrap}
  .modal.match .mrow .hbtn{flex:1 1 140px;min-height:44px}
  .mrow{flex-direction:column;align-items:stretch;gap:var(--s2)}
  .mrow .grow{flex:none;text-align:center}
  .ng-seats{grid-template-columns:minmax(0,1fr)} .ng-vs{display:none}
  .ng-opts{flex-direction:column;align-items:stretch} .ng-opts input{width:100%;min-height:44px}
  .ng-seat{padding:var(--s2)}
  .ng-pick{min-height:68px;padding:6px var(--s2);gap:var(--s2)}
  .ng-pick > .cf{--w:42px}
  .pilegrid{gap:var(--s2)} .pilegrid .cf{--w:calc((100vw - 32px - 32px - 24px) / 3)}
  #textBody{font-size:11px}

  /* home */
  .lobby{grid-template-columns:minmax(0,1fr);gap:var(--s4);padding:var(--s3) var(--s3) var(--s5)}
  .lobby > *,.lobby > .lb-side{grid-column:1;grid-row:auto}
  .lb-hero{min-height:0}
  .lb-hero-art{width:80%;height:300px;-webkit-mask-image:radial-gradient(ellipse 90% 70% at 88% 12%,#000 22%,transparent 68%);mask-image:radial-gradient(ellipse 90% 70% at 88% 12%,#000 22%,transparent 68%)}
  .lb-hero-art img{opacity:.3}
  .lb-hero-in{padding:var(--s5) var(--s4) var(--s4);gap:var(--s3)}
  .lb-hello-box h1{font-size:30px}
  .lb-tabs{align-self:stretch;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .lb-tabs::-webkit-scrollbar{display:none}
  .lb-tabs button{flex:1 0 auto;min-height:40px;padding:0 var(--s3)}
  .lb-body{gap:var(--s3)}
  .lb-bots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lb-bot{padding:10px var(--s3)}
  .lb-two{grid-template-columns:minmax(0,1fr)}
  .lb-opts label{flex:1 1 140px} .lb-opts select{min-height:44px;width:100%}
  .lb-pane .mrow,.lb-join .mrow{position:sticky;bottom:calc(var(--bnav) + env(safe-area-inset-bottom));z-index:5;margin:0 calc(var(--s4) * -1) calc(var(--s4) * -1);
    padding:var(--s3) var(--s4);background:linear-gradient(180deg,transparent,var(--mat) 30%)}
  .lb-join .mrow{margin:0 calc(var(--s4) * -1) calc(var(--s4) * -1);background:linear-gradient(180deg,transparent,var(--surface) 30%)}
  .lb-pane .mrow .hbtn.primary,.lb-join .mrow .hbtn.primary{min-height:50px;min-width:0}
  .lb-pane .mrow .lb-hint:empty{display:none}
  .lb-game{flex-wrap:nowrap;gap:var(--s2);min-height:52px;padding:var(--s2) 0}
  .lb-vs{flex:1 1 auto;flex-wrap:nowrap;overflow:hidden;gap:6px}
  .lb-vs span{display:inline;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .lb-vs span small{display:none}
  .lb-meta{flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-0)}
  .lb-game .hbtn{min-height:40px;flex:none}
  .lb-summary .lb-game{flex-wrap:wrap}
  .lb-acad{padding:var(--s4)}

  /* decks: list first, the detail full screen with the "‹ Decks" back button */
  .decks-view{display:block;padding:var(--s2) var(--s2) var(--s5)}
  .dv-list{position:static;max-height:none;gap:4px;padding:0}
  .dv-list .dtile{min-height:56px;padding:4px var(--s3) 4px 6px} .dv-list .dtile .cf{--w:38px}
  .decks-view:not(.detail) .dv-detail{display:none}
  .decks-view.detail .dv-list{display:none}
  .dv-detail{gap:var(--s4)}
  .dv-head{flex-wrap:wrap;align-items:flex-start;padding:var(--s4);gap:var(--s3)} .dv-info{flex-basis:100%} .dv-head .cf{--w:104px} .dv-head .cf + .cf{--w:86px}
  .dv-title{font-size:28px} .dv-meta{font-size:var(--fs-1)}
  .dgrid{gap:var(--s2)}
  .dcard .cf{--w:calc((100vw - 16px - 16px) / 3)} .dcard .cf.land{--w:calc((100vw - 16px - 8px) / 2)}
  .dv-stats{grid-template-columns:repeat(3,1fr)}
}

/* deck builder, phone: one pane at a time (Cards | Deck), toolbar = name + status + Save + ⋯ sheet */
@media (max-width:720px){
  .bd{padding:var(--s2) var(--s2) var(--s5);gap:var(--s2)}
  .bd-top{position:static;padding:var(--s2);gap:6px;flex-wrap:nowrap;box-shadow:none}
  .bd-top .grow{display:none}
  .bd-name{flex:1 1 auto;min-width:0;min-height:44px;font-size:var(--fs-3)}
  .bd-status{min-height:36px;padding:0 10px}
  .bd-acts{flex-wrap:nowrap;gap:4px}
  .bd-acts .hbtn{padding:0 10px}
  .bd-wide,.bd-acts [data-bd=play]{display:none}
  .bd-more{display:inline-flex;min-width:44px;font-size:18px;line-height:1}
  .bd-seg{display:flex;position:sticky;top:var(--head);z-index:19;background:#0d1217;box-shadow:0 6px 14px rgba(0,0,0,.45)}
  .bd-seg button{flex:1;min-height:40px;font-size:var(--fs-2)}
  .bd-seg b{font-weight:600;color:var(--ink);margin-left:4px}
  .bd-seg i{font-style:normal;margin-left:6px;font-size:var(--fs-1)}
  .bd-seg i.ok{color:var(--good)} .bd-seg i.bad{color:var(--bad)}
  .bd-body{display:block}
  .bd[data-pane=cards] .bd-deck{display:none}
  .bd[data-pane=deck] .bd-browser{display:none}
  .bd-deck{position:static;max-height:none;overflow:visible;padding:var(--s3)}
  .bd-tabs{margin:var(--s2) var(--s2) 0;align-self:stretch;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .bd-tabs::-webkit-scrollbar{display:none}
  .bd-tabs button{flex:1 0 auto;min-height:40px;padding:0 var(--s3)}
  .bd-filters{padding:var(--s2)}
  .bd-frow .ng-search{flex:1 1 100%;min-height:44px}
  .bd-frow select{flex:1 1 30%;min-height:44px;min-width:0;font-size:var(--fs-1)}
  .bd-doms .domchip{min-height:32px}
  .bd-target button{min-height:32px}
  .bd-grid{padding:var(--s2)}
  .bd-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
  .bd-tiles.lands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bd-pm{gap:4px}
  .bd-pm button{min-height:40px;font-size:18px}
  .bd-n{top:4px;right:4px;font-size:var(--fs-0);min-width:26px;padding:1px 5px}
  .bd-tag{font-size:8px}
  .bd-row{min-height:44px}
  .bd-row button{width:40px;min-height:40px}
  .bd-rune button{width:40px;min-height:40px}
  .bd-bf .bd-x{width:32px;height:32px}
  .dv-mine .ptitle .hbtn{min-height:36px}
  .dv-mine-list .dtile{min-height:56px;padding:4px var(--s3) 4px 6px} .dv-mine-list .dtile .cf{--w:38px}
  #bdText{font-size:var(--fs-1)}
}

/* lobby: the player's open game (one at a time; app.js renderMe) */
.lb-current{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) var(--s4);border-color:rgba(212,178,106,.45);
  background:linear-gradient(90deg,rgba(212,178,106,.10),transparent 70%);font-size:var(--fs-2);grid-column:1 / -1}