/* Planeswalk table — "A3 Felt". Green baize, one gold accent, Cormorant Garamond
   for names and life totals, Figtree for everything else. */

:root {
  --page: #0a1310;
  --board: #11241c;
  --board2: #0f1f18;
  --bar: #0d1a15;
  --pop: #14281f;
  --shelf: rgba(0, 0, 0, .16);
  --line: rgba(214, 176, 106, .18);
  --line2: rgba(214, 176, 106, .32);
  --ink: #eee7d4;
  --muted: #a5ae9f;
  --gold: #d4ad66;
  --gold-ink: #1c1408;
  --gold-soft: rgba(212, 173, 102, .14);
  --danger: #e58a6f;
  --danger-ink: #1a0703;
  --warn: #f0b04a;
  --ok: #8fd19e;
  --chip: #eee7d4;
  --chip-ink: #11241c;
  --shadow: 0 5px 14px rgba(0, 0, 0, .5);
  --grain: radial-gradient(rgba(255, 255, 255, .03) 1px, transparent 1.2px);
  --serif: "Cormorant Garamond", Georgia, serif;
  --ui: "Figtree", system-ui, -apple-system, sans-serif;
  --r: 8px;
  --hand-w: 110px;
  --card-ratio: 1.3953;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--page); color: var(--ink); font: 400 14px/1.4 var(--ui); }
body { overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grow { flex: 1 1 0; }
a { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- buttons --------------------------------------------------------------------------- */
.btn { height: 38px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--line2); background: transparent;
  color: var(--ink); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  text-decoration: none; white-space: nowrap; }
.btn:hover:not(:disabled) { background: rgba(255, 255, 255, .04); border-color: var(--gold); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--gold); }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.danger:hover:not(:disabled) { background: var(--danger); color: var(--danger-ink); }
.btn.sm { height: 32px; padding: 0 10px; font-size: 12.5px; }
.btn.big { height: 48px; padding: 0 20px; font-size: 15px; }
.btn.icon { width: 36px; padding: 0; font-size: 16px; }
.field { height: 38px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--page); color: var(--ink); font: 400 14px var(--ui); }
textarea.field { height: auto; padding: 10px 12px; resize: vertical; }
.field.sm { height: 32px; width: 70px; }
kbd { font: 600 10px var(--ui); padding: 1px 6px; border-radius: 4px; border: 1px solid currentColor; opacity: .7; }
kbd:empty { display: none; }
.cue { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(212, 173, 102, .45) !important; animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 50% { box-shadow: 0 0 0 2px var(--gold), 0 0 4px rgba(212, 173, 102, .2); } }

/* ---- layout ------------------------------------------------------------------------------- */
/* the seat strip is as tall as your hand cards (Settings → Hand size), so they're never cut off */
.tbl { --seat: max(156px, calc(var(--hand-w) * var(--card-ratio) + 20px)); position: fixed; inset: 0; display: grid;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: 48px minmax(0, 1fr) minmax(0, 1.2fr) var(--seat); }
.tbl[data-n="3"], .tbl[data-n="4"] { grid-template-rows: 48px clamp(230px, 36vh, 330px) minmax(0, 1fr) var(--seat); }

.topbar { display: flex; align-items: center; gap: 12px; padding: 0 14px; background: var(--bar); border-bottom: 1px solid var(--line); z-index: 20; min-width: 0; }
.topbar > * { flex-shrink: 0; }
.topbar > .pill { flex-shrink: 1; }
.brand { font: 700 19px var(--serif); color: var(--ink); text-decoration: none; letter-spacing: .01em; }
.code { font-size: 12px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.fmt { font-size: 11px; color: var(--gold); letter-spacing: .14em; text-transform: uppercase; }
.fmt:empty { display: none; }
.env { font: 700 11px var(--ui); color: var(--danger-ink); background: var(--danger); padding: 2px 7px; border-radius: 5px; }
.pill { height: 30px; display: inline-block; line-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--line);
  font-size: 13px; font-weight: 600; white-space: nowrap; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pill.mine { background: var(--gold); color: var(--gold-ink); }
.pill:empty { display: none; }
.clock { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.conn { font-size: 12px; color: var(--danger); }
.tb { height: 34px; min-width: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 11px;
  border-radius: var(--r); border: 1px solid var(--line); background: transparent; cursor: pointer; font-weight: 500; font-size: 13px; }
.tb.icon { padding: 0; }
.tb:hover { border-color: var(--line2); background: rgba(255, 255, 255, .03); }
.tb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.unread { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: var(--gold-ink); font: 700 11px/18px var(--ui); }

/* ---- rows of cards ----------------------------------------------------------------------- */
.row { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 6px 16px; position: relative; }
.row > * + * { margin-left: var(--ov, 12px); }
.row.empty { min-height: 0 !important; padding: 0; }
.shelf > * + * { margin-left: var(--ov, -10px); }

/* ---- cards ----------------------------------------------------------------------------------- */
.card { --w: var(--cw, 96px); --h: calc(var(--w) * var(--card-ratio)); position: relative; flex: 0 0 auto; width: var(--w); height: var(--h);
  padding: 0; border: 0; background: none; cursor: pointer; border-radius: calc(var(--w) * .055); transition: width .18s ease, transform .14s ease;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.card.tapped { width: var(--h); }
.card .face { position: absolute; left: 50%; top: 50%; width: var(--w); height: var(--h); transform: translate(-50%, -50%);
  transition: transform .18s ease, box-shadow .12s ease; border-radius: calc(var(--w) * .055); overflow: hidden; box-shadow: var(--shadow);
  background: #1a2a22; }
.card.tapped .face { transform: translate(-50%, -50%) rotate(90deg); }
.card .art { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.card .noart { display: none; }
.card.noart-on .noart { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8%; gap: 4%; text-align: left;
  background: linear-gradient(#22382d, #172a21); border: 1px solid var(--line2); border-radius: inherit; }
.noart .nm { font: 700 calc(var(--w) * .12)/1.1 var(--ui); }
.noart .tl { font: 400 calc(var(--w) * .085)/1.2 var(--ui); color: var(--muted); font-style: normal; }
.noart .ptx { margin-top: auto; align-self: flex-end; font: 700 calc(var(--w) * .13) var(--ui); }
.card.hidden .face, .card.fx-back .face, .pile .back { background:
  radial-gradient(circle at 50% 50%, rgba(212, 173, 102, .25) 0 9%, transparent 9.5%),
  repeating-linear-gradient(45deg, #183326 0 6px, #14291f 6px 12px); border: 2px solid #23402f; }
.card.hidden .art, .card.fx-back .art { visibility: hidden; }
.card.fx-face .art { visibility: visible; }                    /* fx3d.js: the side a card is turning from */
.card.fx-face .face::after, .card.fx-back .face::after { display: none; }
.card.facedown .face::after { content: "face down"; position: absolute; left: 6%; bottom: 6%; font: 700 10px var(--ui);
  background: rgba(0, 0, 0, .7); color: var(--ink); padding: 1px 5px; border-radius: 4px; }
@media (hover: hover) { .card:hover .face { box-shadow: 0 0 0 2px rgba(212, 173, 102, .55), var(--shadow); } }
.card.selected .face { box-shadow: 0 0 0 3px var(--gold), var(--shadow); }
.card.held .face { box-shadow: 0 0 0 3px var(--gold), 0 14px 26px rgba(0, 0, 0, .55); }
.card.held { transform: translateY(-14px); }
.card.dragging { opacity: .28; }
.card.dim { opacity: .45; }

.card > span[class^="b-"] { position: absolute; z-index: 2; pointer-events: none; font: 700 11px/17px var(--ui); white-space: nowrap; }
.b-count { right: -6px; bottom: -6px; padding: 0 6px; border-radius: 6px; background: var(--chip); color: var(--chip-ink); box-shadow: var(--shadow); }
.b-ctr { left: 50%; top: 8%; transform: translateX(-50%); display: flex; gap: 3px; }
.b-ctr span { padding: 0 5px; border-radius: 5px; background: #a9d99a; color: #0b1a0c; }
.b-pt { right: 4%; bottom: 4%; padding: 0 6px; border-radius: 6px; background: var(--chip); color: var(--chip-ink); font-size: 12px; }
.b-tag { left: 50%; top: -9px; transform: translateX(-50%); padding: 0 7px; border-radius: 6px; background: var(--gold); color: var(--gold-ink); font-size: 10.5px; }
.b-tag[data-kind="atk"], .b-tag[data-kind="die"] { background: var(--danger); color: var(--danger-ink); }
.b-tag[data-kind="warn"] { background: var(--warn); color: var(--danger-ink); }
.card.pulse .face { animation: pulse 1.5s ease-out; }
@keyframes pulse { 0%, 60% { box-shadow: 0 0 0 3px var(--gold), 0 0 22px rgba(212, 173, 102, .55); } 100% { box-shadow: var(--shadow); } }
.b-cmdr { left: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); padding: 4px; }
.b-trig { right: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, .65); color: var(--gold); padding: 3px; }
.trig-off .b-trig { display: none; }
.b-exiling { left: 3px; bottom: 3px; padding: 0 5px; border-radius: 5px; background: rgba(0, 0, 0, .7); color: var(--gold); }

/* ---- opponents ------------------------------------------------------------------------------- */
.opps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; padding: 12px 14px; min-height: 0; background: var(--page); }
.opps.solo { padding: 0; gap: 0; }
.opp { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; position: relative;
  background-color: var(--mat-color, var(--board2)); background-image: var(--grain); background-size: 3px 3px; border: 1px solid var(--line); }
.opp.has-mat-img { background-image: linear-gradient(rgba(10, 19, 16, .62), rgba(10, 19, 16, .62)), var(--mat); background-size: cover; background-position: center; }
.opp.active { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(212, 173, 102, .55), 0 0 26px rgba(212, 173, 102, .12); }
.opp.waiting .opp-head { box-shadow: inset 0 -2px 0 var(--gold); }
.opp.waiting .st::after { content: "deciding…"; color: var(--gold); }
.opp-head .rem { font: 700 12px var(--ui); color: var(--gold); }
.opp-head .rem:empty { display: none; }
.opp.dead { filter: grayscale(.7) brightness(.7); }
.opp { transition: filter .8s ease, box-shadow .3s ease; }
.opp-head { height: 48px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; background: var(--bar); border-bottom: 1px solid var(--line); }
.av { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 13px var(--ui); background: #2f5a3c; }
.who { display: flex; align-items: center; gap: 8px; min-width: 0; }
button.who { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
button.who:hover b, button.who:focus-visible b { text-decoration: underline dotted var(--gold); text-underline-offset: 3px; }
.opp-head .who, .opp-head .who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opp-head .nm { font-weight: 600; }
.opp-head .st { font-size: 12px; color: var(--muted); margin-left: 6px; }
.opp-head .life, .life { font: 700 28px/1 var(--serif); min-width: 38px; text-align: center; font-variant-numeric: lining-nums; }
.life.low { color: var(--danger); }
.life-btn { width: 28px; height: 28px; border-radius: var(--r); border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 16px; }
.life-btn:hover { border-color: var(--gold); }
.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip { height: 22px; padding: 0 7px; border-radius: 6px; border: 0; background: rgba(169, 217, 154, .16); color: #b8e3ab; font: 600 12px var(--ui); cursor: pointer; white-space: nowrap; }
.chip.cd { background: var(--gold-soft); color: var(--gold); }
.chip.warn { background: rgba(229, 138, 111, .18); color: #f0b49f; }
.chip.lethal { background: var(--danger); color: var(--danger-ink); }
.leaver { display: inline-flex; gap: 4px; align-items: center; }
.leaver:empty { display: none; }
.away { font-size: 11px; letter-spacing: .06em; color: var(--danger); border: 1px solid rgba(229, 138, 111, .5); border-radius: 999px; padding: 1px 8px; }
.mini { height: 26px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line2); background: var(--bar); cursor: pointer; font: 600 11.5px var(--ui); }
.mini:disabled { opacity: .5; cursor: default; }
.opp-sub { height: 28px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 11.5px; color: var(--muted); border-bottom: 1px solid var(--line); }
.opp-sub .cmdr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opp-piles { display: flex; gap: 10px; white-space: nowrap; }
.cnt { font-size: 11.5px; color: var(--muted); background: none; border: 0; padding: 0; }
.cnt.link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.cnt.link:hover { color: var(--ink); }
.opp-board { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.opp .row { --cw: 60px; padding: 5px 10px; }
.opp .o-creatures { flex-wrap: wrap; row-gap: 6px; }
.opp .o-lands { --cw: 32px; height: 56px; flex-shrink: 0; justify-content: flex-start; padding-left: 22px; background: var(--shelf); border-top: 1px solid var(--line); }

/* one opponent: a mirrored half of the table, their seat bar at the midline */
.opp.solo { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); flex-direction: column-reverse; }
.opp.solo.active { box-shadow: inset 0 0 0 1px rgba(212, 173, 102, .45); }
.opp.solo .opp-board { flex-direction: column-reverse; }
.opp.solo .row { --cw: 86px; }
.opp.solo .o-other { --cw: 64px; }
.opp.solo .o-lands { --cw: 50px; height: 80px; justify-content: center; border-top: 0; border-bottom: 1px solid var(--line); }
.opp.solo .opp-head { border-bottom: 0; border-top: 1px solid var(--line); height: 52px; }
.opp.solo .opp-sub { border-bottom: 0; border-top: 1px solid var(--line); background: var(--bar); }

/* ---- your battlefield ------------------------------------------------------------------------- */
.me { position: relative; min-height: 0; display: flex; flex-direction: column; background-color: var(--mat-color, var(--board));
  background-image: var(--grain); background-size: 3px 3px; border-top: 1px solid var(--line); }
.me.has-mat-img { background-image: linear-gradient(rgba(10, 19, 16, .6), rgba(10, 19, 16, .6)), var(--mat); background-size: cover; background-position: center; }
.me .creatures { --cw: 100px; flex: 1 1 0; min-height: 0; }
.tbl[data-n="3"] .me .creatures, .tbl[data-n="4"] .me .creatures { --cw: 88px; }
.me .other { --cw: 70px; min-height: 108px; flex-shrink: 0; }
.shelf-wrap { position: relative; flex-shrink: 0; background: var(--shelf); border-top: 1px solid var(--line); }
.shelf-label { position: absolute; left: 14px; top: 8px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); z-index: 1; }
.me .lands { --cw: 58px; height: 94px; }
.incoming { flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 18px 16px 8px; border-bottom: 1px dashed var(--danger); background: rgba(229, 138, 111, .06); }
.incoming .inc-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--danger); }
.incoming .inc-row { display: flex; gap: 26px; --cw: 62px; }

/* ---- your seat --------------------------------------------------------------------------------- */
.seat { display: grid; grid-template-columns: 236px minmax(0, 1fr) auto 300px; gap: 14px; padding: 0 14px 0 18px; background: var(--bar);
  border-top: 1px solid var(--line); position: relative; z-index: 10; min-width: 0; }
.seat-id { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.seat-id .who-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.seat-id .who-t b, .seat-id .who-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-id small { color: var(--muted); font-size: 12px; }
.life-box { display: flex; align-items: center; gap: 8px; }
.life-box .life { font-size: 40px; min-width: 60px; }
.life-box .life-btn { width: 44px; height: 44px; font-size: 20px; }
.hand { --cw: var(--hand-w); display: flex; justify-content: center; align-items: flex-start; padding-top: 10px; min-width: 0; }
.hand > .card + .card { margin-left: var(--fan, 14px); }
@media (hover: hover) { .hand > .card:hover { transform: translateY(-44%); z-index: 30; } .hand > .card.held { transform: translateY(-30%); } }
.piles { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; }
.pile { position: relative; width: 56px; height: 78px; padding: 0; border-radius: 6px; border: 1px solid var(--line); background: var(--board2);
  cursor: pointer; overflow: visible; }
.pile img, .pile .back { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; display: block; }
.pile .back { box-shadow: 2px 2px 0 var(--line), 4px 4px 0 var(--line); }
.pile .empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--muted); }
.pile .cap { position: absolute; left: -8px; right: -8px; bottom: -19px; text-align: center; font: 600 11px var(--ui); color: var(--muted); white-space: nowrap; }
.pile:hover { border-color: var(--gold); }
.pile .n { display: none; position: absolute; right: -5px; bottom: -5px; min-width: 18px; padding: 1px 4px; border-radius: 999px; background: var(--bar);
  border: 1px solid var(--line2); font: 700 10px var(--ui); color: var(--ink); text-align: center; }
.pile .tax { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); padding: 0 6px; border-radius: 5px; background: var(--gold);
  color: var(--gold-ink); font: 700 10px/16px var(--ui); white-space: nowrap; }

.dock { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding-left: 14px; border-left: 1px solid var(--line); min-width: 0; }
.steps { display: flex; gap: 2px; }
.step-pill { flex: 1 1 0; min-width: 0; height: 20px; padding: 0 2px; border-radius: 5px; border: 0; background: transparent; color: var(--ink);
  font: 600 9.5px var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.step-pill.done { color: var(--muted); }
.step-pill.cur { background: var(--gold); color: var(--gold-ink); }
.step-pill.cur.theirs { background: var(--line2); color: var(--ink); }
.step-pill.stop { box-shadow: inset 0 -2px 0 rgba(212, 173, 102, .5); }
.step-pill:disabled { cursor: default; }
.primary-btn { height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; border-radius: var(--r);
  border: 0; background: var(--gold); color: var(--gold-ink); font: 700 16px var(--ui); cursor: pointer; }
.primary-btn:disabled { background: var(--line); color: var(--muted); cursor: default; }
.primary-btn.glow { box-shadow: 0 0 0 4px var(--gold-soft), 0 0 22px rgba(212, 173, 102, .3); animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 6px rgba(212, 173, 102, .2), 0 0 30px rgba(212, 173, 102, .42); } }
.dock-row { display: flex; gap: 5px; }
.dock-row .btn:not(.icon) { flex: 1 1 0; }
.dock-row .btn .cap { display: none; }
.dock-row .btn svg { display: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.dock-sub { font-size: 11px; color: var(--muted); min-height: 15px; line-height: 1.3; }
.dock.hidden { visibility: hidden; }

/* ---- drop targets (holding / dragging a card) ------------------------------------------------- */
.holding [data-drop], .dragging [data-drop] { outline: 2px dashed rgba(212, 173, 102, .55); outline-offset: -5px; border-radius: 12px; cursor: copy; }
.holding .row[data-drop]::before, .dragging .row[data-drop]::before, .holding .hand::before, .dragging .hand::before {
  content: attr(data-label); position: absolute; left: 16px; top: 6px; font: 600 11px var(--ui); color: var(--gold); letter-spacing: .04em; pointer-events: none; }
.holding .hand, .dragging .hand { position: relative; }
.holding .row.empty, .dragging .row.empty { min-height: 80px !important; padding: 6px 16px; }
[data-drop].drop-hover { outline: 2px solid var(--gold) !important; background: var(--gold-soft) !important; }
.holding .pile[data-drop], .dragging .pile[data-drop] { outline-offset: 2px; border-radius: 6px; }
.drag-land #row-lands { outline: 2px solid var(--gold); }
.ghost { position: fixed; z-index: 1000; pointer-events: none; transform: rotate(-3deg) scale(1.05); filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .6)); }
.ghost .face { position: relative; width: 100%; height: 100%; border-radius: 6px; overflow: hidden; }
.ghost .art { width: 100%; height: 100%; object-fit: cover; display: block; }
.targeting .card { cursor: crosshair; }

/* ---- floating bars -------------------------------------------------------------------------------- */
.banner, .hint-bar { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 25; display: flex; align-items: center; gap: 12px;
  padding: 7px 8px 7px 16px; border-radius: 999px; background: var(--pop); border: 1px solid var(--danger); box-shadow: var(--shadow); white-space: nowrap; font-size: 13px; }
.banner i { width: 8px; height: 8px; border-radius: 4px; background: var(--danger); }
.banner.respond { border-color: var(--gold); }
.banner.respond i { background: var(--gold); }
.banner { padding-right: 16px; }
.tchips { display: flex; gap: 4px; }
.tchips:empty { display: none; }
.tchip { height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--ink);
  cursor: pointer; font: 600 12px var(--ui); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tchip:hover { border-color: var(--gold); }
.tchip.on { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.hint-bar { border-color: var(--gold); z-index: 26; }
.preview { position: absolute; right: 16px; top: 54px; width: 250px; z-index: 22; padding: 12px 14px; border-radius: 12px; background: var(--pop); border: 1px solid var(--line2); box-shadow: var(--shadow); font-size: 13px; }
.preview .pv-title { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.preview .pl.dies { color: var(--danger); }
.preview .pl.warn { color: var(--warn); font-size: 12.5px; margin-top: 4px; }
.actbar { position: fixed; z-index: 60; display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--pop); border: 1px solid var(--line2); box-shadow: var(--shadow); }
.ab { height: 32px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line); background: transparent; cursor: pointer; font: 600 12px var(--ui); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ab:first-child { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.ab:hover { border-color: var(--gold); }
.ab.more { width: 32px; padding: 0; justify-content: center; font-size: 15px; }
.zoom { --h: calc(var(--w) * var(--card-ratio)); position: fixed; z-index: 75; width: var(--w); height: var(--h); pointer-events: none;
  transform-origin: center; transition: transform .17s cubic-bezier(.2, .8, .3, 1), opacity .15s ease; }
.zoom .face { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: calc(var(--w) * .045); background: #1a2a22;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .65), 0 0 0 1px rgba(212, 173, 102, .3); }
.zoom .art { display: block; width: 100%; height: 100%; object-fit: cover; }
.zoom .noart { display: none; }
.zoom.noart-on .noart { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8%; gap: 4%; text-align: left;
  background: linear-gradient(#22382d, #172a21); border: 1px solid var(--line2); border-radius: inherit; }
.zoom.swap { animation: zoom-swap .12s ease; }
@keyframes zoom-swap { from { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .zoom { transition: none; } .zoom.swap { animation: none; } }
.latest { position: fixed; right: 14px; top: 58px; z-index: 40; max-width: 360px; display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-radius: 10px; background: var(--pop); border: 1px solid var(--line2); box-shadow: var(--shadow); cursor: pointer; text-align: left; font-size: 13px; }
.latest i { width: 6px; height: 6px; border-radius: 3px; background: var(--gold); flex-shrink: 0; }
.toasts { position: fixed; left: 50%; top: 58px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { padding: 8px 14px; border-radius: 10px; background: var(--pop); border: 1px solid var(--line2); box-shadow: var(--shadow); font-size: 13px; transition: opacity .3s; }
.toast.out { opacity: 0; }
.trig-stack { position: fixed; right: 14px; bottom: 164px; z-index: 45; display: flex; flex-direction: column; gap: 6px; width: 330px;
  max-height: calc(100dvh - 260px); overflow-y: auto; scrollbar-width: thin; }
.trig-stack[hidden] { display: none; }
.trig { display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 9px 12px; border-radius: 10px; background: var(--pop);
  border: 1px solid var(--gold); box-shadow: var(--shadow); font-size: 12.5px; flex-shrink: 0; }
.trig-head { display: flex; align-items: center; gap: 6px; }
.trig-head b { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trig-n { padding: 0 6px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font: 700 11px/18px var(--ui); }
.trig-head .x { width: 28px; height: 28px; font-size: 15px; color: var(--gold); border: 1px solid var(--line2); }
.trig-text { color: var(--muted); padding-right: 6px; }
.trig-acts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.trig-acts .btn { height: 30px; padding: 0 10px; font-size: 12.5px; }
.deaths { position: fixed; left: 50%; bottom: 164px; transform: translateX(-50%); z-index: 46; display: flex; flex-direction: column; gap: 6px; }
.death { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 10px; background: var(--pop); border: 1px solid var(--danger); box-shadow: var(--shadow); }
.death.info { border-color: var(--gold); }
.death .acts { display: flex; gap: 6px; flex-shrink: 0; }
.pop-sub { margin: 10px 0 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.turn-banner { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.96); z-index: 80; padding: 14px 34px; border-radius: 14px;
  background: rgba(13, 26, 21, .92); border: 1px solid var(--gold); font: 700 34px var(--serif); opacity: 0; pointer-events: none; }
.turn-banner.show { animation: banner 1.9s ease forwards; }
@keyframes banner { 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
.emote { position: absolute; left: 50%; top: 30%; z-index: 50; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; animation: emote 2.4s ease-out forwards; }
.emote .g { font-size: 40px; }
.emote small { font-size: 11px; background: rgba(0, 0, 0, .6); padding: 0 6px; border-radius: 5px; }
@keyframes emote { from { opacity: 0; transform: translate(-50%, 20px); } 15% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -70px); } }

/* ---- menus, popovers, modals ----------------------------------------------------------------------- */
.menu { position: fixed; z-index: 200; min-width: 200px; max-height: 70vh; overflow-y: auto; padding: 5px; border-radius: 10px; background: var(--pop);
  border: 1px solid var(--line2); box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }
.menu .mi { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px; border: 0; border-radius: 7px;
  background: none; cursor: pointer; text-align: left; font-size: 13.5px; }
.menu .mi:hover, .menu .mi:focus-visible { background: rgba(212, 173, 102, .12); outline: none; }
.menu .mi.danger { color: var(--danger); }
.menu .mi:disabled { opacity: .45; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }
.menu.emotes { display: grid; grid-template-columns: repeat(6, 44px); min-width: 0; }
.menu.emotes .mi { justify-content: center; font-size: 22px; padding: 6px; }
.popover { position: fixed; z-index: 210; padding: 10px; border-radius: 10px; background: var(--pop); border: 1px solid var(--line2); box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }
.ctr { display: flex; flex-direction: column; gap: 6px; min-width: 210px; }
.pop-title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ctr-row { display: grid; grid-template-columns: 1fr 32px 34px 32px; align-items: center; gap: 4px; }
.ctr-row b { text-align: center; }
.ctr-row b.lethal { color: var(--danger); }
.ctr-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctr .pop-sub { margin: 6px 0 0; }
.step { height: 32px; border-radius: 7px; border: 1px solid var(--line2); background: transparent; cursor: pointer; font-size: 16px; }
.ctr-add { display: flex; gap: 6px; }
.ctr-add .field { flex: 1 1 0; width: auto; height: 32px; }
.modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 9, 7, .62); }
.modal-card { width: 440px; max-width: 100%; max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border-radius: 16px; background: var(--pop);
  border: 1px solid var(--line2); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.modal-card.wide { width: 880px; }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px 20px; }
.modal-head h3 { margin: 0; flex: 1 1 0; font: 700 22px var(--serif); }
.x { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
.x:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.modal-body { padding: 0 20px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.confirm { margin: 0; line-height: 1.5; }
.lbl { font-size: 12px; color: var(--muted); }
.hint { margin: 0; font-size: 12.5px; color: var(--muted); }
.hint.small { font-size: 11.5px; max-width: 230px; }
.empty { color: var(--muted); font-style: italic; margin: 6px 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.grid.one { grid-template-columns: 220px; justify-content: center; }
.gcard { position: relative; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--board2); cursor: pointer; aspect-ratio: 488 / 680; overflow: hidden; }
.gcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcard .noart { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; font-weight: 600; }
.gcard:hover { border-color: var(--gold); }
.gcard.sel { outline: 3px solid var(--gold); }
.gcard.away { opacity: .55; outline: 2px dashed var(--danger); }
.gtag { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 5px; background: rgba(0, 0, 0, .75); font-size: 11px; text-align: center; }
.tabs { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--page); border: 1px solid var(--line); }
.tab { flex: 1 1 0; height: 34px; border-radius: 7px; border: 0; background: transparent; cursor: pointer; font-weight: 600; }
.tab.on { background: var(--gold); color: var(--gold-ink); }
.tpane { display: flex; flex-direction: column; gap: 10px; min-height: 240px; }
.grid.tokens { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.custom { display: flex; flex-direction: column; gap: 8px; }
.custom .row2 { display: flex; gap: 8px; }
.token-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings { display: flex; flex-direction: column; gap: 14px; }
.set-row { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: center; }
.set-row b { display: block; }
.set-row small { color: var(--muted); font-size: 12px; }
.seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 9px; background: var(--page); border: 1px solid var(--line); flex-wrap: wrap; }
.seg button { height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-weight: 600; font-size: 12.5px; }
.seg button.on { background: var(--gold); color: var(--gold-ink); }
.mats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mat { height: 30px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line2); background: var(--board2); cursor: pointer; font-size: 12px; }
.mat-url { display: flex; gap: 6px; }
.mat-url .field { flex: 1 1 0; }
.modal.as-sheet { align-items: flex-end; padding: 0; }
.modal.as-sheet .modal-card { width: 100%; max-width: 640px; border-radius: 18px 18px 0 0; }
.sheet-body { display: grid; grid-template-columns: minmax(96px, 150px) 1fr; gap: 12px 14px; align-items: start; }
.sheet-art { width: 100%; border-radius: 9px; box-shadow: var(--shadow); }
.sheet-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sheet-name { font: 700 22px var(--serif); }
.sheet-type { color: var(--muted); font-size: 12.5px; }
.sheet-text { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; white-space: pre-line; color: var(--ink); opacity: .85; }
.sheet-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.sheet-actions .btn { height: 44px; white-space: normal; line-height: 1.15; }

/* ---- drawer ------------------------------------------------------------------------------------------- */
.drawer { position: fixed; top: 48px; right: 0; bottom: 0; width: 360px; z-index: 50; display: flex; flex-direction: column; background: var(--pop);
  border-left: 1px solid var(--line2); box-shadow: -10px 0 30px rgba(0, 0, 0, .35); }
.drawer-tabs { display: flex; align-items: center; gap: 4px; padding: 8px 8px 0 10px; border-bottom: 1px solid var(--line); }
.drawer-tabs [data-tab] { height: 36px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; font-weight: 600; }
.drawer-tabs [data-tab].on { border-bottom-color: var(--gold); }
.pane { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.log { flex: 1 1 0; overflow-y: auto; margin: 0; padding: 10px 14px; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.le time { color: var(--muted); font-size: 11px; margin-right: 6px; font-variant-numeric: tabular-nums; }
.le.chat { background: rgba(212, 173, 102, .07); border-radius: 6px; padding: 3px 6px; }
.le.mine b { color: var(--gold); }
.chat, .judge-form { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line); }
.chat .field { flex: 1 1 0; }
.judge-form { flex-direction: column; }
.judge-feed { flex: 1 1 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.ruling { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); }
.ruling .rq { margin-bottom: 6px; color: var(--muted); }
.ruling .ra p { margin: 0 0 6px; }
.thinking { color: var(--muted); font-style: italic; }

/* ---- overlays (waiting, countdown, roll-off, game over) ----------------------------------------------- */
.overlay { position: fixed; inset: 48px 0 0 0; z-index: 150; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 9, 7, .55); }
.ov-card { width: 560px; max-width: 100%; padding: 24px 26px; border-radius: 18px; background: var(--pop); border: 1px solid var(--line2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6); display: flex; flex-direction: column; gap: 14px; }
.ov-card.center { align-items: center; text-align: center; }
.ov-card h1 { margin: 0; font: 700 30px var(--serif); }
.ov-card .sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.ov-head { display: flex; align-items: flex-end; gap: 16px; }
.ov-head > div:first-child { flex: 1 1 0; }
.w-code { text-align: right; }
.w-code small { display: block; font-size: 11px; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; }
.w-code b { font-size: 34px; letter-spacing: .18em; color: var(--gold); line-height: 1; }
.w-seats { display: flex; flex-direction: column; gap: 8px; }
.wseat { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bar); border: 1px solid var(--line); }
.wseat.mine { border-color: var(--line2); }
.wseat .wn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.wseat small { color: var(--muted); font-size: 12px; }
.badge { min-width: 86px; text-align: center; padding: 4px 10px; border-radius: 999px; font: 600 12px var(--ui); color: var(--muted); }
.badge.ok { background: var(--gold); color: var(--gold-ink); }
.badge.away { color: var(--danger); }
.ov-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ov-card:not(.center) .ov-actions .btn { flex: 1 1 0; }
.ov-foot { display: flex; justify-content: space-between; font-size: 12px; gap: 12px; flex-wrap: wrap; }
.eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cd-card { width: 360px; gap: 18px; padding: 28px 26px 26px; }
.cd-ring { position: relative; width: 148px; height: 148px; display: grid; place-items: center; }
.cd-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cd-track { fill: none; stroke: var(--line); stroke-width: 5; }
.cd-arc { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.cd-n { font: 700 76px/1 var(--serif); color: var(--gold); font-variant-numeric: lining-nums tabular-nums; }
.cd-n.tick { animation: tick .45s cubic-bezier(.2, .8, .3, 1); }
@keyframes tick { from { transform: scale(1.25); opacity: .4; } }
.ro-stage { width: 180px; height: 130px; display: flex; align-items: center; justify-content: center; font-size: 48px; }
.ro-rows { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.ro-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--bar); border: 1px solid var(--line); }
.ro-row b { flex: 1 1 0; text-align: left; }
.ro-row.win { border-color: var(--gold); }
.ro-row.out { opacity: .5; }
.ro-row .sum { width: 36px; text-align: right; font: 700 24px var(--serif); }
.ro-row.win .sum { color: var(--gold); }
.dice { display: flex; gap: 6px; }
.die { width: 32px; height: 32px; }
.die rect { fill: var(--ink); stroke: var(--line2); }
.die circle { fill: var(--gold-ink); }
.go-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.go-table th { font-size: 11px; color: var(--muted); font-weight: 600; text-align: right; padding: 4px 8px; }
.go-table td { padding: 6px 8px; text-align: right; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.go-table td:first-child, .go-table th:first-child { text-align: left; }
.go-table tr.win td { color: var(--gold); font-weight: 700; }

/* ---- spectators ------------------------------------------------------------------------------------------ */
.spectating .dock, .spectating .life-btn, .spectating .hand { visibility: hidden; }

/* ---- in between: half a big screen, small laptops, tablets -------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1279px) {
  .seat { grid-template-columns: 170px minmax(0, 1fr) auto 278px; gap: 10px; padding: 0 10px 0 12px; }
  .replay .seat { grid-template-columns: 176px minmax(0, 1fr) auto 330px; }
  .life-box { gap: 6px; }
  .life-box .life { font-size: 34px; min-width: 48px; }
  .life-box .life-btn { width: 36px; height: 36px; font-size: 18px; }
  .piles { display: grid; grid-template-columns: repeat(2, 38px); gap: 7px 8px; padding: 0; align-content: center; }
  .pile { width: 38px; height: 53px; }
  .pile .cap { display: none; }
  .pile .n { display: block; }
  .pile .empty { font-size: 8px; }
  .pile .tax { top: -8px; font-size: 9px; padding: 0 4px; }
  .dock { padding-left: 10px; }
  .dock-row .btn.sm:not(.icon) { padding: 0 6px; font-size: 12px; }
  .step-pill { font-size: 9px; padding: 0 1px; }
  .topbar .code { display: none; }
}

/* ---- phones ---------------------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .tbl, .tbl[data-n="3"], .tbl[data-n="4"] { grid-template-rows: 48px auto minmax(0, 1fr) auto; }
  .topbar { gap: 8px; padding: 0 8px; }
  .topbar .code, .topbar .fmt, .topbar .clock, .tb-l, .brand { display: none; }
  .pill { font-size: 12px; padding: 0 10px; }
  .opps, .opps.solo { grid-auto-flow: row; grid-auto-columns: auto; grid-auto-rows: max-content; gap: 6px; padding: 6px; max-height: 38vh; overflow-y: auto; }
  .opp, .opp.solo { flex-direction: column; border-radius: 10px; border: 1px solid var(--line); }
  .opp.solo .opp-board, .opp .opp-board { flex: 0 0 auto; flex-direction: row; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .latest, .shelf-label { display: none !important; }
  .turn-banner { font-size: 22px; white-space: nowrap; padding: 10px 22px; }
  .pile .empty { font-size: 8px; }
  .opp .row, .opp.solo .row { --cw: 44px; flex-wrap: nowrap; justify-content: flex-start; padding: 6px; }
  .opp .o-other, .opp.solo .o-other { --cw: 36px; }
  .opp .row.empty { display: none; }
  .opp .o-lands, .opp.solo .o-lands { --cw: 26px; height: 44px; padding-left: 16px; }
  .opp-head, .opp.solo .opp-head { height: 42px; border-top: 0; border-bottom: 1px solid var(--line); }
  .opp-sub, .opp.solo .opp-sub { display: none; }
  .opp-head .life { font-size: 22px; }
  .me .row { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .me .creatures { --cw: 86px; }
  .me .other { --cw: 58px; min-height: 0; }
  .me .lands { --cw: 44px; height: 72px; }
  .incoming { padding: 16px 12px 6px; }
  .incoming .inc-row { --cw: 50px; }
  .me:has(> .incoming:not([hidden])) .lands { --cw: 36px; height: 58px; }   /* room for your blockers */
  .opp-head .life-btn { width: 40px; height: 40px; }
  .opp-head .who { min-height: 40px; min-width: 44px; padding-right: 6px; }
  #me-who { min-width: 44px; min-height: 44px; }
  .wname .linkish, .wdeck .linkish, .coach .linkish { min-height: 36px; padding: 0 6px; }
  .ov-foot a { display: inline-flex; align-items: center; min-height: 40px; }
  .seg button { height: 40px; }
  .seat { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id piles" "hand hand" "dock dock"; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); gap: 6px; }
  .seat-id { grid-area: id; flex-direction: row; align-items: center; gap: 10px; }
  .seat-id .who-t { display: none; }
  .seat-id .chips { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; min-width: 0; }
  .seat-id .chip { height: 20px; padding: 0 5px; font-size: 11px; }
  .seat-id { min-width: 0; }
  .chip .cn { display: none; }
  .deaths { bottom: auto; top: 56px; width: calc(100% - 16px); }
  .death { flex-wrap: wrap; font-size: 13px; }
  .life-box { gap: 4px; }
  .life-box .life { font-size: 30px; min-width: 42px; }
  .life-box .life-btn { width: 38px; height: 40px; }
  .seat-id { gap: 6px; }
  .piles { grid-area: piles; padding: 0; gap: 6px; }
  .pile { width: 34px; height: 48px; }
  .pile .cap { display: none; }
  .pile .n { display: block; }
  .primary-btn kbd { display: none; }
  .hand { grid-area: hand; --cw: 64px; justify-content: flex-start; overflow-x: auto; padding: 4px 0 2px; scrollbar-width: none; }
  .dock { grid-area: dock; border-left: 0; padding-left: 0; }
  .steps, .dock-sub { display: none; }
  #untap, #redo { display: none; }                                   /* in the ⋯ menu on phones */
  .dock-row .btn { height: 52px; min-width: 52px; }
  .dock-row #combat-btn, .dock-row #undo, .dock-row #more { width: 54px; padding: 0; flex-direction: column; gap: 1px; font-size: 18px; line-height: 1; }
  .dock-row #combat-btn svg { display: block; }
  .dock-row .btn .cap, .dock-row #combat-btn .lbl { display: block; font: 600 10px var(--ui); letter-spacing: .02em; }   /* a word under each icon */
  .dock { flex-direction: row; align-items: center; }
  .primary-btn { flex: 1 1 0; height: 52px; }
  .drawer { width: 100%; }
  .trig-stack { left: 8px; right: 8px; width: auto; bottom: 230px; max-height: 40dvh; }
  .tchips { flex-wrap: wrap; }
  .preview { position: static; flex-shrink: 0; width: auto; margin: 0 8px 8px; padding: 7px 12px; box-shadow: none;   /* below the lands, not over them */
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
  .preview .pv-title { margin: 0; }
  .preview .pv-lines { display: flex; flex-wrap: wrap; gap: 0 12px; }
  .banner, .hint-bar { width: calc(100% - 16px); white-space: normal; border-radius: 12px; font-size: 12.5px; }
  .banner { position: static; order: -1; transform: none; flex-shrink: 0; margin: 8px 8px 0; }   /* takes its own line, covers nothing */
  .set-row { grid-template-columns: 1fr; gap: 6px; }
  .ov-head { flex-direction: column; align-items: flex-start; }
  .w-code { text-align: left; }
}

/* ---- replays ------------------------------------------------------------------------------------------------ */
.replay .dock, .replay #emote-btn, .replay #judge-btn, .replay #settings-btn, .replay .drawer-tabs [data-tab="judge"],
.replay #chat-form, .replay #deaths, .replay #trig-stack { display: none !important; }
.replay .seat { grid-template-columns: 236px minmax(0, 1fr) auto 400px; }
.replay .overlay { bottom: var(--seat-h, 150px); }        /* the roll-off / results never cover the replay controls */
.replay.revealed .hand { visibility: visible; }
.opp .o-hand { --cw: 40px; flex-shrink: 0; justify-content: flex-start; gap: 0; padding: 6px 12px; background: rgba(0, 0, 0, .18);
  border-bottom: 1px solid var(--line); position: relative; }
.opp .o-hand[hidden] { display: none; }
.opp .o-hand > * + * { margin-left: 4px; }
.opp .o-hand::before { content: "Hand"; align-self: center; margin-right: 10px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.opp.solo .o-hand { --cw: 54px; order: -1; }
.rp { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding-left: 14px; border-left: 1px solid var(--line); min-width: 0; }
.rp-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rp-sel { min-width: 0; flex: 1 1 0; height: 28px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--line2); background: var(--page);
  color: var(--ink); font: 500 12px var(--ui); }
.rp-sel[hidden] { display: none; }
.rp-reveal { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink); white-space: nowrap; cursor: pointer; }
.rp-reveal input { accent-color: var(--gold); margin: 0; }
.rp-reveal:has(input:disabled) { color: var(--muted); cursor: default; }
.rp-scrub { position: relative; height: 18px; }
.rp-scrub input { position: absolute; inset: 0; width: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.rp-scrub input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold) var(--p, 0%), var(--line2) var(--p, 0%)); }
.rp-scrub input::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--gold) var(--p, 0%), var(--line2) var(--p, 0%)); }
.rp-scrub input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: var(--ink);
  border: 2px solid var(--gold); }
.rp-scrub input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 2px solid var(--gold); }
.rp-ticks { position: absolute; left: 8px; right: 8px; top: 0; bottom: 0; pointer-events: none; }
.rp-ticks i { position: absolute; top: 2px; width: 1px; height: 14px; background: rgba(238, 231, 212, .35); }
.rp-ctl { display: flex; align-items: center; gap: 5px; }
.rp-ctl .btn.icon { width: 34px; padding: 0; }
.rp-ctl svg, .rp-sound svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
#rp-sound svg .wave { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#rp-sound.off svg .wave { display: none; }
#rp-sound.off { color: var(--muted); }
.rp-play { flex: 1 1 0; height: 40px; font-size: 15px; }
#rp-speed { min-width: 44px; padding: 0 8px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .replay .seat { grid-template-columns: minmax(0, 1fr) auto; }
  .rp { grid-area: dock; border-left: 0; padding-left: 0; gap: 6px; }
  .replay:not(.revealed) .hand { display: none; }
  .rp-play kbd, #rp-sub { display: none; }
  .rp-sel { height: 40px; }
  .rp-reveal { min-height: 40px; padding: 0 4px; gap: 8px; }
  .rp-reveal input { width: 20px; height: 20px; }
  .opp .o-hand, .opp.solo .o-hand { --cw: 30px; overflow-x: auto; flex-wrap: nowrap; }
}
.pill.link { cursor: pointer; }
.pill.link:hover { background: var(--line2); }

/* ---- choosing your deck at the table ------------------------------------------------------------------------- */
.linkish { border: 0; background: none; padding: 0; color: var(--gold); font: 500 12px var(--ui); cursor: pointer; }
.linkish:hover { text-decoration: underline; }
.wname { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.wname b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wdeck { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 3px; }
.wdeck img { width: 44px; height: 32px; object-fit: cover; border-radius: 5px; flex-shrink: 0; border: 1px solid var(--line); }
.wdeck small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wdeck .linkish { flex-shrink: 0; }
.wname .you { color: var(--muted); font-size: 12px; flex-shrink: 0; }
.wname .linkish { flex-shrink: 0; }
#waiting .ov-card { width: 600px; }
#gameover .ov-foot { justify-content: center; }
.dk-sec { display: flex; flex-direction: column; gap: 6px; }
.dk-list { display: flex; flex-direction: column; gap: 6px; max-height: 38dvh; overflow-y: auto; }
.dk-tile { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bar); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.dk-tile:hover:not(:disabled) { border-color: var(--gold); }
.dk-tile.on { border-color: var(--line2); box-shadow: inset 3px 0 0 var(--gold); }
.dk-tile:disabled { opacity: .6; cursor: progress; }
.dk-art { width: 64px; height: 46px; flex-shrink: 0; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.dk-art.blank { display: flex; align-items: center; justify-content: center; background: var(--board2); font: 700 20px var(--serif); color: var(--muted); }
.dk-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.dk-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-t small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-import { display: flex; gap: 8px; }
.dk-import .field { min-width: 0; }
.dk-status { margin: 0; font-size: 12.5px; color: var(--muted); min-height: 1em; }
.dk-status.err { color: var(--danger); }
@media (max-width: 760px) {
  .wseat { flex-wrap: wrap; }
  .wseat .wn { flex-basis: calc(100% - 60px); }
  .wseat.mine .btn.sm { margin-left: 48px; }
}

/* ---- motion ---------------------------------------------------------------------------------------------- */
/* cards gliding between places and life flashes are driven by motion.js; the rest is here */
.card.landing { opacity: 0; }
.card.flying { pointer-events: none; }
.card { transition: width .18s ease, transform .14s ease, translate .22s ease; }
.me .card.atk, .seat .card.atk { translate: 0 -12px; }
.opp .card.atk { translate: 0 8px; }
.opp.solo .card.atk { translate: 0 12px; }
.card.atk .face { box-shadow: 0 0 0 2px var(--danger), 0 10px 22px rgba(229, 138, 111, .32); }
.life { transition: color .25s ease; }
.life.hurt { animation: hurt .7s ease; }
.life.heal { animation: heal .7s ease; }
@keyframes hurt { 0% { color: var(--danger); transform: translateX(0); } 15% { transform: translateX(-3px); } 30% { transform: translateX(3px); }
  45% { transform: translateX(-2px); } 60% { color: var(--danger); transform: translateX(0); } 100% { color: inherit; } }
@keyframes heal { 0%, 55% { color: var(--ok); } 100% { color: inherit; } }
.fx3d { position: fixed; left: 0; top: 0; z-index: 64; pointer-events: none; }      /* fx3d.js: shuffles, cards turning, a win */
.card.turning .face { visibility: hidden; }
.lifefx { position: fixed; z-index: 66; pointer-events: none; font: 700 22px/1 var(--serif); font-variant-numeric: lining-nums; color: var(--danger);
  padding: 1px 7px 3px; border-radius: 8px; background: rgba(10, 19, 16, .88); border: 1px solid var(--line);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .7); white-space: nowrap; }
.lifefx.pos { color: var(--ok); }
/* things that open ease in */
.modal { animation: fade .16s ease; }
.modal-card { animation: rise .2s cubic-bezier(.2, .8, .3, 1); }
.menu, .popover, .actbar { animation: drop .14s ease-out; }
.overlay:not([hidden]) { animation: fade .22s ease; }
.overlay:not([hidden]) .ov-card { animation: rise .32s cubic-bezier(.2, .8, .3, 1); }
.toast { animation: drop .2s ease-out; }
.trig { animation: slide .24s cubic-bezier(.2, .8, .3, 1); }
.death { animation: drop .2s ease-out; }
.latest:not([hidden]) { animation: drop .18s ease-out; }
.drawer:not([hidden]) { animation: slide-in .22s cubic-bezier(.2, .8, .3, 1); }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes slide { from { opacity: 0; transform: translateX(18px); } }
@keyframes slide-in { from { transform: translateX(40px); opacity: .4; } }
/* the end of the game */
#gameover.won .ov-card { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 24px 70px rgba(212, 173, 102, .18), 0 24px 60px rgba(0, 0, 0, .6); }
#gameover.won #go-title { background: linear-gradient(100deg, var(--gold) 20%, #fff3d0 40%, var(--gold) 60%) 0 0 / 250% 100%; -webkit-background-clip: text;
  background-clip: text; color: transparent; animation: shimmer 2.6s ease-in-out .3s 2 both; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.no-motion *, .no-motion *::before, .no-motion *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important;
  transition-duration: 1ms !important; }
@media (prefers-reduced-motion: reduce) { .life.hurt, .life.heal { animation-duration: 1ms; } }

/* ---- the tutorial coach + the guide ------------------------------------------------------------------------ */
.coach { position: fixed; left: 16px; top: 62px; z-index: 90; width: 340px; padding: 14px 16px 12px; border-radius: 14px; background: var(--pop);
  border: 1px solid var(--gold); box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 0 4px var(--gold-soft); display: flex; flex-direction: column; gap: 8px;
  animation: rise .3s cubic-bezier(.2, .8, .3, 1); }
.coach[hidden] { display: none; }
.coach-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.coach-top small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.coach h3 { margin: 0; font: 700 22px/1.15 var(--serif); }
.coach p { margin: 0; line-height: 1.5; font-size: 13.5px; }
.coach-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.coach-wait { font-size: 12.5px; color: var(--muted); }
.coach-bar { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.coach-bar i { display: block; height: 100%; background: var(--gold); transition: width .35s ease; }
.tut-spot:not(.card) { outline: 2px solid var(--gold); outline-offset: 3px; box-shadow: 0 0 24px rgba(212, 173, 102, .45);
  animation: spot-ring 1.5s ease-in-out infinite; }
.row.tut-spot { outline-offset: -4px; border-radius: 10px; animation: none; }
@keyframes spot-ring { 50% { outline-offset: 6px; outline-color: rgba(212, 173, 102, .45); } }
.card.tut-spot .face { box-shadow: 0 0 0 3px var(--gold), 0 0 26px rgba(212, 173, 102, .6); animation: spot 1.5s ease-in-out infinite; }
@keyframes spot { 50% { box-shadow: 0 0 0 3px var(--gold), 0 0 8px rgba(212, 173, 102, .2); } }
.set-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.guide { line-height: 1.55; font-size: 14px; }
.guide > p:first-child { margin-top: 0; font-size: 15px; }
.guide h3 { font: 700 21px var(--serif); color: var(--gold); margin: 20px 0 6px; }
.guide ul { padding-left: 20px; margin: 4px 0; }
.guide li { margin: 6px 0; }
.guide code { font: 600 12px var(--ui); padding: 1px 6px; border-radius: 5px; background: var(--bar); border: 1px solid var(--line); }
@media (max-width: 760px) { .coach { left: 8px; right: 8px; width: auto; top: 54px; } }

/* ---- short landscape screens (a phone on its side) --------------------------------------------------------- */
@media (max-height: 540px) and (orientation: landscape) {
  .tbl, .tbl[data-n="3"], .tbl[data-n="4"] { --seat: 108px; grid-template-rows: 40px minmax(0, 1fr) minmax(0, 1.25fr) var(--seat); }
  .topbar { gap: 8px; padding: 0 10px; }
  .topbar .code, .tb-l { display: none; }
  .tb { height: 32px; }
  .pill { height: 26px; line-height: 26px; font-size: 12px; }
  .seat, .replay .seat { grid-template-columns: 150px minmax(0, 1fr) auto 236px; gap: 8px; padding: 0 8px 0 10px; }
  .replay .seat { grid-template-columns: 150px minmax(0, 1fr) auto 300px; }
  .seat-id { gap: 4px; }
  .seat-id small { display: none; }
  .life-box { gap: 4px; }
  .life-box .life { font-size: 26px; min-width: 36px; }
  .life-box .life-btn { width: 34px; height: 34px; font-size: 16px; }
  .hand { --cw: 54px; padding-top: 8px; }
  .piles { display: grid; grid-template-columns: repeat(2, 30px); gap: 4px 6px; padding: 0; align-content: center; }
  .pile { width: 30px; height: 42px; }
  .pile .cap { display: none; }
  .pile .n { display: block; }
  .pile .empty { font-size: 7px; }
  .dock { gap: 4px; padding-left: 8px; }
  .steps, .dock-sub { display: none; }
  .primary-btn { height: 40px; font-size: 14px; }
  .primary-btn kbd { display: none; }
  .dock-row .btn { height: 32px; }
  .opp-head, .opp.solo .opp-head { height: 34px; }
  .opp-sub, .opp.solo .opp-sub { display: none; }
  .opp-head .life { font-size: 22px; }
  .opp .row, .opp.solo .row { --cw: 38px; }
  .opp .o-lands, .opp.solo .o-lands { --cw: 24px; height: 40px; }
  .me .creatures { --cw: 58px; }
  .me .other { --cw: 44px; min-height: 0; }
  .me .lands { --cw: 34px; height: 52px; }
  .shelf-label { display: none; }
  .incoming { padding: 8px 12px 6px; }
  .incoming .inc-row { --cw: 44px; }
  .banner, .hint-bar { top: 4px; font-size: 12px; }
  .preview { top: auto; bottom: 6px; right: 8px; width: 220px; padding: 8px 10px; font-size: 12px; }
  .opp-head .life-btn { width: 36px; height: 32px; }
  .trig-stack { bottom: 116px; max-height: 60dvh; }
  .coach { width: 300px; top: 46px; padding: 10px 12px; gap: 6px; }
  .coach h3 { font-size: 18px; }
  .coach p { font-size: 12.5px; }
}