/* Layout: a tactical HUD — rival stack above a data rail, your stack below, hand docked at the bottom.
   Flat fills only: no gradients anywhere. Depth comes from 1px lines, chamfered corners and neon glow.
   Deliberately single-theme (a dark terminal), so every color is set once on :root. */
:root {
  --bg: #05070a;
  --panel: #0a0e14;
  --panel-2: #0e131b;
  --row: #080b10;
  --card: #0c1118;
  --line: #1b2430;
  --line-hi: #2c3a4b;
  --fg: #d8e4ef;
  --muted: #6c7b8d;
  --dim: #3a4757;

  --you: #22e4f2;      /* cyan */
  --opp: #ff3d8b;      /* magenta */
  --amber: #ffc53d;    /* hardened, selection, overclock */
  --up: #3dff9a;
  --down: #ff4d5e;

  --street: #ff7a45;   /* melee */
  --net: #3dff9a;      /* ranged */
  --orbital: #6f8dff;  /* siege */
  --agile: #ffc53d;
  --special: #b56bff;

  --font-display: 'Chakra Petch', 'Eurostile', 'Arial Narrow', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --cw: 40px; --ch: 56px;   /* board card */
  --hw: 66px; --hh: 94px;   /* hand card */
  --row-h: 62px;
  --coin: 30px;
  --cut: 7px;
  --chamfer: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));

  color-scheme: dark;
}

html, body { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.35;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d='M32 0H0V32' fill='none' stroke='%23ffffff' stroke-opacity='.035'/><rect x='0' y='0' width='1' height='1' fill='%2322e4f2' fill-opacity='.25'/></svg>");
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
button:focus-visible { outline: 1px solid var(--you); outline-offset: 2px; }

.app {
  max-width: 980px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* =============== player plates =============== */
.bar {
  --side: var(--you);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.bar[data-side="ai"] { --side: var(--opp); }
.bar.active { border-color: var(--side); box-shadow: 0 0 18px -8px var(--side); }
.bar.active::after {
  content: ""; position: absolute; left: -30%; bottom: 0; width: 30%; height: 2px;
  background: var(--side); box-shadow: 0 0 8px var(--side);
  animation: scanbar 1.8s linear infinite;
}
@keyframes scanbar { to { left: 100%; } }

.crest {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--side);
  background: color-mix(in srgb, var(--side) 12%, var(--bg));
  box-shadow: inset 0 0 0 1px var(--side);
  clip-path: var(--chamfer);
}
.crest svg { width: 24px; height: 24px; }
.who { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.who .top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.name {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--side);
}
.meta { display: flex; gap: 12px; color: var(--muted); font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.meta .m { display: inline-flex; align-items: center; gap: 5px; }
.meta .m i { display: inline-block; width: 7px; height: 10px; border: 1px solid var(--muted); }
.meta .m.deck i { background: var(--muted); }
.meta button { background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font: inherit; }
.meta button i { display: inline-block; width: 7px; height: 10px; border: 1px dashed var(--muted); }

.gems { display: inline-flex; gap: 5px; }
.gem { width: 9px; height: 9px; border: 1px solid var(--dim); }
.gem.on { background: var(--side); border-color: var(--side); box-shadow: 0 0 6px var(--side); }
.pill {
  font-family: var(--font-mono); font-weight: 600; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 1px 6px; color: var(--side); border: 1px solid var(--side);
}

.total {
  position: relative;
  min-width: 54px; height: 44px; padding-inline: 6px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 24px; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line-hi);
  clip-path: var(--chamfer);
  transition: color .2s, box-shadow .2s;
}
.total.lead { color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); text-shadow: 0 0 10px color-mix(in srgb, var(--amber) 60%, transparent); }

/* =============== the board =============== */
.side {
  --sc: var(--you);
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 5px 5px;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--sc) 30%, var(--line));
}
.side.opp { --sc: var(--opp); }
.side::before {
  position: absolute; top: -7px; left: 10px; padding-inline: 6px;
  font-family: var(--font-mono); font-size: 10px; line-height: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sc); background: var(--bg);
}
.side.opp::before { content: "// Rival stack"; }
.side.you::before { content: "// Your stack"; }

.row {
  --rc: var(--street);
  position: relative;
  display: grid;
  grid-template-columns: var(--coin) var(--coin) minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: var(--row-h);
  padding: 4px 5px 4px 7px;
  background: var(--row);
  border-left: 2px solid var(--rc);
  overflow: hidden;
}
.row[data-row="ranged"] { --rc: var(--net); }
.row[data-row="siege"]  { --rc: var(--orbital); }
.row .mark {
  position: absolute; right: 8px; top: 50%; translate: 0 -50%;
  height: 80%; aspect-ratio: 1; color: var(--rc); opacity: .1; pointer-events: none;
}
.row .mark svg { width: 100%; height: 100%; }
.row.target { cursor: pointer; background: color-mix(in srgb, var(--amber) 6%, var(--row)); animation: armed 1s steps(2, end) infinite; }
@keyframes armed {
  0%   { box-shadow: inset 0 0 0 1px var(--amber); }
  50%  { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 35%, transparent); }
}

.rscore {
  position: relative; z-index: 3;
  width: var(--coin); height: var(--coin);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--fg);
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--rc);
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}
.horn {
  position: relative; z-index: 3;
  width: var(--coin); height: var(--coin);
  display: grid; place-items: center;
  color: var(--amber);
  border: 1px dashed var(--line-hi);
}
.horn svg { width: 55%; height: 55%; }
.horn.on { border: 1px solid var(--amber); background: color-mix(in srgb, var(--amber) 14%, var(--bg)); box-shadow: 0 0 10px -2px var(--amber); }
.row.horn-target .horn { border: 1px solid var(--amber); }
.cards {
  position: relative; z-index: 1;
  display: flex; gap: 4px; overflow-x: auto; min-width: 0;
  padding: 3px 1px; scrollbar-width: none;
}
.cards::-webkit-scrollbar { display: none; }

/* interference over a row */
.row::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s; }
.row.w-frost::after {
  opacity: 1;
  background-color: color-mix(in srgb, var(--street) 7%, transparent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><path d='M0 12L12 0' stroke='%23ff7a45' stroke-opacity='.45' stroke-width='1.2'/></svg>");
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--street) 60%, transparent);
  animation: hatch 4s linear infinite;
}
@keyframes hatch { to { background-position: 24px 0; } }
.row.w-fog::after {
  opacity: 1;
  background-color: color-mix(in srgb, var(--net) 5%, transparent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='%23d8e4ef' fill-opacity='.22'><rect x='3' y='5' width='2' height='1'/><rect x='17' y='2' width='1' height='1'/><rect x='29' y='9' width='3' height='1'/><rect x='9' y='17' width='1' height='1'/><rect x='22' y='21' width='2' height='1'/><rect x='35' y='25' width='1' height='1'/><rect x='5' y='31' width='3' height='1'/><rect x='19' y='35' width='1' height='1'/><rect x='31' y='37' width='2' height='1'/><rect x='13' y='26' width='1' height='1'/></g></svg>");
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--net) 45%, transparent);
  animation: staticnoise .35s steps(4, end) infinite;
}
@keyframes staticnoise { to { background-position: 17px 23px; } }
.row.w-rain::after {
  opacity: 1;
  background-color: color-mix(in srgb, var(--amber) 6%, transparent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6'><rect y='0' width='8' height='1' fill='%23ffc53d' fill-opacity='.28'/></svg>");
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 55%, transparent);
  animation: flare 1.2s steps(6, end) infinite;
}
@keyframes flare { to { background-position: 0 12px; } }

/* =============== data rail =============== */
.divide {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px;
  position: relative;
}
.divide::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px dashed var(--line-hi);
}
.plaque {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--line-hi);
}
.plaque .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }
.plaque .n { font-family: var(--font-mono); font-weight: 600; font-size: 18px; color: var(--you); line-height: 1; }
.pips { display: inline-flex; gap: 4px; }
.pip { width: 7px; height: 7px; border: 1px solid var(--dim); }
.pip.player { background: var(--you); border-color: var(--you); box-shadow: 0 0 5px var(--you); }
.pip.ai { background: var(--opp); border-color: var(--opp); box-shadow: 0 0 5px var(--opp); }
.pip.draw { background: var(--muted); border-color: var(--muted); }

.weather {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  min-height: calc(var(--ch) + 8px);
  padding: 4px 10px;
  background: var(--bg);
  border: 1px dashed var(--line-hi);
  color: var(--muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
}
.weather .cards { flex: 1; padding: 0; }
.weather .calm { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; }
.weather .calm svg { width: 16px; height: 16px; color: var(--dim); }

/* =============== cards ===============
   The card's own background is its edge color; ::before is the inner panel.
   That keeps a crisp 1px border around the chamfered corners. */
.card {
  --rc: var(--special);
  --edge: color-mix(in srgb, var(--rc) 55%, var(--line));
  --w: var(--cw); --h: var(--ch);
  appearance: none; border: 0; padding: 0; cursor: pointer;
  position: relative; flex: 0 0 auto;
  width: var(--w); height: var(--h);
  background: var(--edge);
  clip-path: var(--chamfer);
  transition: transform .15s cubic-bezier(.2,.8,.2,1), background-color .15s;
}
.card::before { content: ""; position: absolute; inset: 1px; background: var(--card); clip-path: var(--chamfer); }
.card.band-melee  { --rc: var(--street); }
.card.band-ranged { --rc: var(--net); }
.card.band-siege  { --rc: var(--orbital); }
.card.band-agile  { --rc: var(--agile); }
.card.md { --w: var(--hw); --h: var(--hh); --cut: 9px; }

.card .art {
  position: absolute; inset: 4px;
  display: grid; place-items: center;
  color: var(--rc);
  background-color: color-mix(in srgb, var(--rc) 9%, var(--card));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><rect width='1' height='1' fill='%23ffffff' fill-opacity='.07'/></svg>");
}
.card .art svg { width: 66%; height: auto; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--rc) 60%, transparent)); }
.card.md .art { inset: 5px 5px 20px; }
.card.md .art svg { width: 60%; }
.card .plate {
  position: absolute; left: 6px; right: 6px; bottom: 4px; height: 14px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 500; font-size: 7px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card .str {
  position: absolute; z-index: 1; top: 3px; left: 3px;
  min-width: 16px; height: 15px; padding-inline: 2px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 11px; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--rc);
}
.card.md .str { top: 4px; left: 4px; min-width: 22px; height: 20px; font-size: 14px; }
.card .str.up { color: var(--up); }
.card .str.down { color: var(--down); }
.card .badge {
  position: absolute; z-index: 1; right: 3px; bottom: 3px;
  width: 13px; height: 13px;
  display: grid; place-items: center;
  color: var(--rc); background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--rc);
}
.card .badge svg { width: 8px; height: 8px; }
.card.md .badge { right: 5px; bottom: 20px; width: 17px; height: 17px; }
.card.md .badge svg { width: 10px; height: 10px; }

/* hardened units: amber frame and a running scan line */
.card.hero { --edge: var(--amber); }
.card.hero .str { background: var(--amber); color: var(--bg); box-shadow: none; }
.card.hero::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 4px; height: 1px; z-index: 0;
  background: var(--amber); box-shadow: 0 0 6px var(--amber); opacity: .8;
  animation: scan 2.8s linear infinite; pointer-events: none;
}
@keyframes scan { 0% { top: 4px; } 100% { top: calc(100% - 5px); } }

.card.special .art svg { width: 62%; }
.card.selected { --edge: var(--amber); transform: translateY(-12px); animation: lift .18s cubic-bezier(.2,.8,.2,1); }
.card.selected .art { background-color: color-mix(in srgb, var(--amber) 12%, var(--card)); }
@keyframes lift { from { transform: none; } }
.card.target { animation: cardarmed .8s steps(2, end) infinite; }
@keyframes cardarmed { 50% { background-color: var(--amber); } }

/* =============== dock =============== */
.dock {
  position: sticky; bottom: 0; z-index: 5;
  margin-inline: -16px; padding-inline: 16px;
  padding-block: 10px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--panel);
  border-top: 1px solid var(--line-hi);
  display: flex; flex-direction: column; gap: 4px;
}
.dock::before {
  content: ""; position: absolute; top: -1px; left: 16px; width: 56px; height: 1px;
  background: var(--you); box-shadow: 0 0 8px var(--you);
}
.panel { display: flex; align-items: center; gap: 12px; min-height: 58px; }
.panel .info { flex: 1; min-width: 0; }
.panel .title {
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--you);
}
.panel .title .num { color: var(--fg); }
.panel .sub { color: var(--muted); font-family: var(--font-mono); font-size: 12px; line-height: 1.45; }
.panel .sub p { margin: 0; }
.panel .sub p + p { opacity: .6; }
.panel .actions { display: flex; gap: 8px; flex-shrink: 0; }
.dots::after { content: "_"; margin-left: 4px; animation: caret .9s steps(2, end) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.hand {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 16px 2px 4px;
  min-height: calc(var(--hh) + 20px);
  scrollbar-width: none;
}
.hand::-webkit-scrollbar { display: none; }
.hand .empty { color: var(--muted); align-self: center; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }

.btn {
  font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .14em;
  padding: 10px 14px; border-radius: 0; cursor: pointer;
  color: var(--fg); background: transparent;
  border: 1px solid var(--line-hi);
  transition: color .12s, border-color .12s, background-color .12s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn.primary {
  color: var(--bg); background: var(--you); border-color: var(--you);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.btn.warn { color: var(--opp); border-color: var(--opp); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.primary:disabled { background: var(--dim); border-color: var(--dim); color: var(--bg); }
.btn.ghost { padding: 7px 12px; font-size: 11px; }

/* =============== modal =============== */
.modal {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center; padding: 16px;
  background: #000000c4;
  animation: fadein .2s ease-out;
}
.modal[hidden] { display: none; }
.sheet {
  position: relative;
  width: min(560px, 100%); max-height: calc(100% - 32px); overflow-y: auto;
  padding: 22px 20px 18px;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-top: 2px solid var(--you);
  display: flex; flex-direction: column; gap: 14px;
  animation: boot .3s steps(6, end);
}
@keyframes fadein { from { opacity: 0; } }
@keyframes boot { 0% { clip-path: inset(0 0 100% 0); } 100% { clip-path: inset(0 0 0 0); } }
.sheet h2 {
  margin: 0; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg); text-wrap: balance;
}
.sheet h2.win { color: var(--you); text-shadow: -2px 0 var(--opp), 0 0 18px color-mix(in srgb, var(--you) 50%, transparent); }
.sheet h2.lose { color: var(--opp); text-shadow: 2px 0 var(--you); }
.sheet p { margin: 0; color: var(--muted); text-align: center; font-family: var(--font-mono); font-size: 13px; }
.sheet .grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding-top: 6px; }
.sheet .actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.rule { position: relative; height: 7px; border-top: 1px solid var(--line-hi); margin-top: 3px; }
.rule::after {
  content: ""; position: absolute; left: 50%; top: -4px; width: 24px; height: 7px; translate: -50% 0;
  background: var(--you); box-shadow: 0 0 8px var(--you);
}
.wordmark {
  text-align: center; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 9vw, 46px); letter-spacing: .26em; line-height: 1; padding-left: .26em;
  color: var(--fg);
  text-shadow: -2px 0 var(--opp), 2px 0 var(--you);
  animation: glitch 5s steps(1, end) infinite;
}
@keyframes glitch {
  0%, 92%, 100% { text-shadow: -2px 0 var(--opp), 2px 0 var(--you); transform: none; }
  93% { text-shadow: -6px 0 var(--opp), 5px 0 var(--you); transform: translateX(2px) skewX(-6deg); }
  95% { text-shadow: 4px 0 var(--opp), -4px 0 var(--you); transform: translateX(-3px); }
  97% { text-shadow: -1px 0 var(--opp), 1px 0 var(--you); transform: none; }
}
.eyebrow { text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }

.versus { display: flex; align-items: center; justify-content: center; gap: 18px; }
.versus .side-score { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.versus .side-score .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--side); }
.versus .total { min-width: 76px; height: 58px; font-size: 32px; }
.versus .vs { font-family: var(--font-mono); color: var(--dim); font-size: 13px; letter-spacing: .2em; }
.versus [data-side="ai"] { --side: var(--opp); }
.versus [data-side="player"] { --side: var(--you); }

.score-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.score-table th, .score-table td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--line); }
.score-table th { color: var(--muted); font-weight: 500; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.score-table td.w-player { color: var(--you); }
.score-table td.w-ai { color: var(--opp); }

/* =============== effects layer =============== */
.fx { position: fixed; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; }
.fx-ghost { position: fixed; will-change: transform, opacity, filter; }
.fx-ghost > .card { --w: 100%; --h: 100%; width: 100%; height: 100%; }
.ripple {
  position: fixed; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border: 1px solid var(--you); box-shadow: 0 0 12px var(--you);
}
.flash { position: fixed; inset: 0; background: color-mix(in srgb, var(--opp) 22%, transparent); }

.banner {
  position: fixed; left: 0; right: 0; top: 40%; z-index: 18;
  display: grid; place-items: center;
  pointer-events: none; opacity: 0;
}
.banner .ribbon {
  width: 100%; text-align: center;
  padding: 14px 16px;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 6vw, 30px); letter-spacing: .24em; text-transform: uppercase;
  color: var(--fg);
  background: #05070ae8;
  border-top: 1px solid var(--you); border-bottom: 1px solid var(--you);
  text-shadow: -2px 0 var(--opp), 2px 0 var(--you);
}
.banner .ribbon small { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .3em; color: var(--muted); text-shadow: none; }
.banner.player .ribbon { color: var(--you); }
.banner.ai .ribbon { color: var(--opp); border-color: var(--opp); }
.banner.show { animation: banner 1.6s steps(1, end) forwards, bannerfade 1.6s linear forwards; }
@keyframes banner {
  0% { clip-path: inset(48% 0 48% 0); }
  6% { clip-path: inset(20% 0 20% 0); }
  12% { clip-path: inset(0 0 0 0); }
  86% { clip-path: inset(0 0 0 0); }
  92% { clip-path: inset(46% 0 46% 0); }
}
@keyframes bannerfade { 0% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }

.bump { animation: bump .4s steps(4, end); }
@keyframes bump { 25% { color: var(--amber); transform: translateY(-2px); } 50% { color: var(--fg); transform: none; } 75% { color: var(--amber); } }

/* =============== deck screen =============== */
.sheet.wide {
  width: min(860px, 100%); padding: 0; gap: 0; overflow: hidden;
  height: calc(100vh - 32px); height: calc(100dvh - 32px); max-height: 960px;
}
.sheet.wide > .dbody { flex: 1 1 auto; }
.sheet.wide > .builder-foot { flex: 0 0 auto; }
/* The deck list scrolls on its own; the footer is a separate, non-scrolling block below it,
   so nothing in the list can ever paint over it. */
.dbody {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 20px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.dbody > * { flex-shrink: 0; }
.sheet h2.sm { font-size: 18px; text-align: left; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sheet h2 .src { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .1em; color: var(--amber); }

.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.preset {
  --rc: var(--street);
  appearance: none; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  transition: border-color .12s, background-color .12s;
}
.preset[data-id="vanguard"] { --rc: var(--agile); }
.preset[data-id="longbow"] { --rc: var(--net); }
.preset[data-id="siegetrain"] { --rc: var(--orbital); }
.preset[data-id="spymaster"], .preset.random { --rc: var(--special); }
.preset.on { border-color: var(--you); background: color-mix(in srgb, var(--you) 6%, var(--panel-2)); box-shadow: inset 3px 0 0 var(--you); }
.preset .pe {
  width: 48px; height: 48px; display: grid; place-items: center;
  color: var(--rc);
  background: color-mix(in srgb, var(--rc) 10%, var(--bg));
  box-shadow: inset 0 0 0 1px var(--rc);
  clip-path: var(--chamfer);
}
.preset .pe svg { width: 28px; height: 28px; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--rc) 60%, transparent)); }
.preset .pt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.preset b { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg); }
.preset small { font-size: 13px; color: var(--muted); line-height: 1.3; }
.preset em { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--rc); font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.dhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 8px;
  padding: 8px 10px; background: var(--bg); border: 1px solid var(--line);
}
.stat b { font-family: var(--font-mono); font-weight: 600; font-size: 22px; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.stat span { font-family: var(--font-mono); font-size: 10px; line-height: 1.25; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.stat.ok b { color: var(--up); }
.stat.bad b { color: var(--opp); }
.stat .meter { grid-column: 1 / -1; height: 3px; background: var(--line); display: block; }
.stat .meter i { display: block; height: 100%; background: currentColor; }
.stat.ok .meter { color: var(--up); }
.stat.bad .meter { color: var(--opp); }

.dinfo {
  min-height: 3.6em; padding: 6px 10px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--muted);
  background: var(--bg);
  border-left: 2px solid var(--you);
}
.dinfo b { color: var(--you); font-family: var(--font-display); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-right: 6px; }
.dinfo .num { color: var(--fg); }
.dinfo .where { color: var(--fg); margin-right: 6px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.dinfo .hint { color: var(--muted); }

.entry .atag {
  display: block; width: 100%; min-height: 2.4em;
  font-family: var(--font-mono); font-size: 9px; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase;
  text-align: center; color: var(--you);
}
.entry .atag.none { color: var(--dim); }

.glossary { border: 1px solid var(--line); background: var(--bg); }
.glossary summary {
  cursor: pointer; list-style: none; padding: 9px 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--you);
}
.glossary summary::-webkit-details-marker { display: none; }
.glossary summary::before { content: "+ "; }
.glossary[open] summary::before { content: "\2212  "; }
.glossary ul { margin: 0; padding: 4px 12px 12px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.glossary li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-family: var(--font-mono); font-size: 12px; line-height: 1.45; color: var(--muted); }
.glossary .gb { width: 20px; height: 20px; display: grid; place-items: center; color: var(--you); box-shadow: inset 0 0 0 1px var(--line-hi); }
.glossary .gb svg { width: 12px; height: 12px; }

.pool-sec { display: flex; flex-direction: column; gap: 8px; }
.pool-sec h3 {
  margin: 0; display: flex; align-items: center; gap: 8px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--fg);
}
.pool-sec h3 .ri { width: 16px; height: 16px; color: var(--you); display: inline-grid; }
.pool-sec h3 .ri svg { width: 100%; height: 100%; }
.pool-sec h3 .n { margin-left: auto; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; color: var(--you); font-variant-numeric: tabular-nums; }
.pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 12px 8px; }
.entry { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.entry .card { transition: opacity .15s, filter .15s; }
.entry:not(.in) .card { opacity: .4; filter: grayscale(1); }
.entry.peek .card { --edge: var(--you); }
.count {
  display: flex; align-items: center;
  background: var(--bg); border: 1px solid var(--line-hi);
}
.count button {
  appearance: none; border: 0; background: none; cursor: pointer;
  width: 26px; height: 28px; font-family: var(--font-mono); font-size: 16px; line-height: 1; color: var(--you);
}
.count button:disabled { color: var(--dim); cursor: not-allowed; }
.count span {
  min-width: 30px; text-align: center; font-family: var(--font-mono); font-weight: 600; font-size: 13px;
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.count span i { font-style: normal; font-weight: 400; font-size: 10px; color: var(--muted); }
.entry:not(.in) .count span { color: var(--muted); }

.builder-foot {
  flex: 0 0 auto;
  padding: 10px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 10px;
  background: var(--panel);
  border-top: 1px solid var(--line-hi);
}
.oppsel { display: flex; flex-direction: column; gap: 6px; }
.oppsel .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 1px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  appearance: none; cursor: pointer; white-space: nowrap;
  padding: 6px 10px; font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  background: var(--bg); border: 1px solid var(--line-hi);
}
.chip.on { color: var(--bg); background: var(--opp); border-color: var(--opp); font-weight: 600; }
.go { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gs { font-family: var(--font-mono); font-size: 12px; color: var(--opp); text-transform: uppercase; letter-spacing: .06em; }
.gs.ok { color: var(--up); }

/* =============== larger screens =============== */
@media (min-width: 720px) {
  :root { --cw: 54px; --ch: 76px; --hw: 86px; --hh: 122px; --row-h: 86px; --coin: 40px; }
  .app { gap: 12px; padding-block: 18px 0; }
  .rscore { font-size: 16px; }
  .card .str { min-width: 20px; height: 18px; font-size: 13px; }
  .card .badge { width: 16px; height: 16px; }
  .card .badge svg { width: 10px; height: 10px; }
  .card.md .str { min-width: 26px; height: 24px; font-size: 16px; }
  .card.md .plate { font-size: 9px; height: 18px; bottom: 5px; }
  .card.md .art { bottom: 24px; }
  .card.md .badge { bottom: 24px; width: 20px; height: 20px; }
  .crest { width: 46px; height: 46px; }
  .name { font-size: 16px; }
  .total { min-width: 62px; height: 50px; font-size: 28px; }
  .hand { gap: 10px; }
  .panel .title { font-size: 14px; }
}

@media (max-width: 519px) {
  .panel { align-items: flex-start; }
  .panel .actions { flex-direction: column; }
  .panel .actions .btn { padding: 9px 12px; }
  .presets { grid-template-columns: 1fr; gap: 6px; }
  .preset { padding: 8px 10px; grid-template-columns: 42px minmax(0, 1fr); }
  .preset .pe { width: 42px; height: 42px; }
  .preset .pe svg { width: 24px; height: 24px; }
  .stat { grid-template-columns: 1fr; }
  .modal:has(.sheet.wide) { padding: 8px; }
  .sheet.wide { height: calc(100vh - 16px); height: calc(100dvh - 16px); max-height: none; }
  .dbody { padding: 18px 14px 14px; }
  .builder-foot { padding-inline: 14px; gap: 8px; }
  .builder-foot .oppsel .lbl { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .card.selected { transform: none; }
}
.sheet > * { flex-shrink: 0; }

/* =============== hover (mouse only) =============== */
@media (hover: hover) {
  .card:hover { --edge: color-mix(in srgb, var(--rc) 85%, var(--fg)); }
  .btn:hover { color: var(--you); border-color: var(--you); }
  .btn.primary:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
  .preset:hover { border-color: var(--line-hi); }
  .chip:hover { color: var(--fg); }
  .meta button:hover { color: var(--fg); }
  .count button:hover:not(:disabled) { background: color-mix(in srgb, var(--you) 14%, transparent); }
}

/* =============== touch & phones =============== */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
.app, .modal, .banner { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* rows that run out of space overlap their cards instead of hiding them */
.cards.tight { gap: 0; }
.cards.tight > .card + .card { margin-left: var(--ov, 0px); }

@media (max-width: 719px) {
  /* Size the board from the visible screen height so a whole turn fits without scrolling.
     Measured: ~320px of fixed chrome (plates, rail, panel, padding) + 6 rows + a hand 1.55 rows tall. */
  :root {
    --row-h: 54px;
    --row-h: clamp(40px, calc((100svh - 334px) / 7.55), 62px);
    --ch: calc(var(--row-h) - 6px);
    --cw: calc(var(--ch) * .72);
    --hh: clamp(76px, calc(var(--row-h) * 1.55), 96px);
    --hw: calc(var(--hh) * .7);
    --coin: clamp(26px, calc(var(--row-h) * .5), 30px);
  }
  .app { gap: 6px; padding-block: 8px 0; }
  .bar { padding: 4px 6px; gap: 8px; }
  .crest { width: 32px; height: 32px; }
  .crest svg { width: 20px; height: 20px; }
  .name { font-size: 13px; }
  .who { gap: 1px; }
  .meta { gap: 10px; font-size: 11px; }
  .total { min-width: 46px; height: 36px; font-size: 20px; }
  .side { padding: 8px 4px 4px; gap: 3px; }
  .row { padding: 2px 4px 2px 6px; gap: 5px; box-sizing: border-box; }
  .row .cards { padding-block: 1px; }
  .divide { gap: 6px; }
  .plaque { padding: 4px 8px; gap: 6px; }
  .plaque .n { font-size: 15px; }
  .weather { min-height: 34px; padding: 2px 8px; font-size: 11px; }
  .weather .card { --w: 24px; --h: 30px; --cut: 5px; }
  .weather .card .art { inset: 2px; }
  .weather .card .art svg { width: 80%; }
  .card .str { min-width: 14px; height: 13px; font-size: 10px; top: 2px; left: 2px; }
  .card .badge { width: 12px; height: 12px; right: 2px; bottom: 2px; }
  .card .badge svg { width: 7px; height: 7px; }
  .card .art { inset: 3px; }
  .card.md .art { inset: 4px 4px 18px; }
  .card.md .str { min-width: 20px; height: 18px; font-size: 13px; }
  .card.md .badge { width: 16px; height: 16px; bottom: 18px; right: 4px; }
  .card.md .plate { bottom: 3px; height: 13px; font-size: 6.5px; left: 4px; right: 4px; }
  .card.selected { transform: translateY(-9px); }
  .dock { padding-block: 6px calc(6px + env(safe-area-inset-bottom, 0px)); gap: 0; }
  .panel { min-height: 44px; gap: 10px; align-items: center; }
  .panel .title { font-size: 12px; letter-spacing: .1em; }
  .panel .sub { font-size: 11.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .panel .actions { flex-direction: column; gap: 6px; }
  .panel .actions .btn { padding: 8px 12px; min-height: 36px; }
  .hand { padding-top: 11px; padding-bottom: 2px; min-height: calc(var(--hh) + 14px); gap: 5px; }
  .banner .ribbon { padding: 10px 12px; }
}

/* very short screens (landscape phones): give the board priority */
@media (max-width: 960px) and (max-height: 500px) {
  :root { --row-h: 44px; --ch: 38px; --cw: 28px; --hh: 72px; --hw: 50px; --coin: 26px; }
  .row { min-height: var(--row-h); padding-block: 2px; }
  .card .str, .card.md .str { font-size: 10px; min-width: 14px; height: 13px; }
  .panel .sub { -webkit-line-clamp: 2; }
}

@media (pointer: coarse) {
  .count button { width: 36px; height: 34px; }
  .meta button { padding-block: 6px; margin-block: -6px; }
  .chip { padding: 9px 12px; }
}

/* deck builder counters always fit their column */
.pool { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
.entry { min-width: 0; }
.count { width: 100%; max-width: 110px; }
.count button { flex: 1 1 0; min-width: 0; width: auto; }
.count span { min-width: 26px; flex: 0 0 auto; }

/* =============== tutorial =============== */
.dtop { display: flex; justify-content: flex-end; margin-bottom: -6px; }
.meta .help { color: var(--you); }
.tour { position: fixed; inset: 0; z-index: 40; }
.tour[hidden], .tour .spot[hidden] { display: none; }
.tour.dim { background: #000000c4; }
.tour .spot {
  position: fixed; pointer-events: none;
  box-shadow: 0 0 0 1px var(--you), 0 0 18px var(--you), 0 0 0 200vmax #000000b8;
  transition: left .25s cubic-bezier(.2,.8,.2,1), top .25s cubic-bezier(.2,.8,.2,1), width .25s cubic-bezier(.2,.8,.2,1), height .25s cubic-bezier(.2,.8,.2,1);
}
.tour .tcard {
  position: fixed; left: 50%; translate: -50% 0;
  width: min(440px, calc(100% - 24px)); max-height: min(58vh, 540px); overflow-y: auto;
  padding: 0 16px 14px;
  background: var(--panel); border: 1px solid var(--line-hi);
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 16px 40px #000;
  -webkit-user-select: none; user-select: none;
}
.tour .tcard.top { top: calc(10px + env(safe-area-inset-top, 0px)); }
.tour .tcard.bottom { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.tour .tcard.center { top: 50%; translate: -50% -50%; }
.tprog { height: 2px; margin: 0 -16px 6px; background: var(--line); position: sticky; top: 0; }
.tprog i { display: block; height: 100%; background: var(--you); box-shadow: 0 0 8px var(--you); transition: width .25s; }
.tstep { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: var(--muted); }
.tcard h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .1em; text-transform: uppercase; color: var(--you); }
.tbody { font-family: var(--font-mono); font-size: 13px; line-height: 1.55; color: #b4c2d0; display: flex; flex-direction: column; gap: 8px; }
.tbody p { margin: 0; }
.tbody b { color: var(--fg); font-weight: 600; }
.tbody .c-street { color: var(--street); }
.tbody .c-net { color: var(--net); }
.tbody .c-orbital { color: var(--orbital); }
.tbody .c-amber { color: var(--amber); }
.tbody .c-up { color: var(--up); }
.tbody .c-down { color: var(--down); }
.tlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.tlist li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 12px; line-height: 1.45; }
.tlist .gb { width: 20px; height: 20px; display: grid; place-items: center; color: var(--you); box-shadow: inset 0 0 0 1px var(--line-hi); }
.tlist .gb svg { width: 12px; height: 12px; }
.tnav { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.tnav .tgrow { flex: 1; }
@media (max-width: 519px) {
  .tour .tcard { max-height: 52vh; padding-inline: 14px; }
  .tprog { margin-inline: -14px; }
  .tbody { font-size: 12.5px; }
  .tcard h3 { font-size: 16px; }
}

/* =============== opening hand =============== */
.sheet .grid .entry { width: var(--hw); }
.entry .atag em { font-style: normal; color: var(--amber); }
.entry.fresh .card { --edge: var(--amber); }
.rfoot {
  position: sticky; bottom: -18px; z-index: 2;
  margin: 0 -20px -18px; padding: 10px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 10px;
  background: var(--panel); border-top: 1px solid var(--line-hi);
}
.rfoot .actions { justify-content: flex-end; }
@media (max-width: 519px) {
  .rfoot .actions { justify-content: stretch; }
  .rfoot .actions .btn { flex: 1; }
}
.entry.fresh.peek .card { --edge: var(--you); }

/* card descriptions: show up to 6 lines, never a sliver of a 7th
   (vertical padding lives in the border so the clip edge sits on a line boundary) */
.dinfo { padding-block: 0; border-block: 6px solid var(--bg); -webkit-line-clamp: 6; }
.rfoot .dinfo { -webkit-line-clamp: unset; display: block; overflow: visible; }

/* =============== deck screen columns (all sizes) ===============
   On phones and tablets the two columns simply stack inside one scrolling body. */
.dcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dcol > * { flex-shrink: 0; }
.pool-title .src { color: var(--muted); }
.feed { display: none; }
.panel .hint-desk { display: none; }
.hand.tight { gap: 0; }
.hand.tight > .card + .card { margin-left: var(--ov, 0px); }

/* =============== desktop: the whole match fits on one screen ===============
   Sidebar on the left (rival plate, round, interference, move feed, your plate),
   the six rows fill the rest of the width, and the dock (panel + hand) runs along the bottom.
   Card sizes come from the viewport height so nothing ever falls below the fold. */
@media (min-width: 1024px) and (min-height: 600px) {
  :root {
    --side-w: clamp(268px, 21vw, 340px);
    --hh: clamp(104px, 15.5vh, 164px);
    --hw: calc(var(--hh) * .7);
    --row-h: clamp(56px, calc((100vh - var(--hh) - 150px) / 6), 132px);
    --row-h: clamp(56px, calc((100dvh - var(--hh) - 150px) / 6), 132px);
    --ch: calc(var(--row-h) - 12px);
    --cw: calc(var(--ch) * .72);
    --coin: clamp(34px, calc(var(--row-h) * .4), 46px);
  }
  html, body { height: 100%; overflow: hidden; }

  .app {
    box-sizing: border-box;
    max-width: 1960px;
    height: 100vh; height: 100dvh;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) auto auto;
    grid-template-areas:
      "ai   opp"
      "rail opp"
      "rail you"
      "me   you"
      "dock dock";
    gap: 10px;
  }
  #bar-ai { grid-area: ai; }
  #bar-player { grid-area: me; }
  .side.opp { grid-area: opp; }
  .side.you { grid-area: you; }
  .divide { grid-area: rail; }
  .dock { grid-area: dock; }

  /* rows share each side's height evenly */
  .side { min-height: 0; padding: 12px 6px 6px; }
  .row { flex: 1 1 0; min-height: 0; box-sizing: border-box; padding: 4px 8px 4px 10px; gap: 10px; }
  .row .mark { height: 70%; right: 14px; }
  .rscore { font-size: clamp(15px, calc(var(--row-h) * .17), 19px); }
  .cards { gap: 6px; padding-block: 2px; }
  .card .str { min-width: 22px; height: 20px; font-size: 14px; top: 4px; left: 4px; }
  .card .badge { width: 18px; height: 18px; right: 4px; bottom: 4px; }
  .card .badge svg { width: 11px; height: 11px; }
  .card .art { inset: 5px; }

  /* sidebar rail: round, interference, feed */
  .divide { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; }
  .divide::before { display: none; }
  .plaque { justify-content: space-between; padding: 10px 12px; }
  .plaque .n { font-size: 22px; }
  .pips { margin-left: auto; }
  .pip { width: 9px; height: 9px; }
  .weather { min-height: 70px; box-sizing: border-box; padding: 6px 12px; flex-wrap: wrap; }
  .weather .card { --w: 42px; --h: 58px; --cut: 6px; }
  .weather .card .art { inset: 3px; }
  .weather .card .art svg { width: 78%; }

  .feed {
    position: relative;
    display: flex; flex-direction: column; gap: 7px;
    flex: 1 1 auto; min-height: 0; overflow: hidden;
    margin: 0; padding: 10px 12px;
    list-style: none;
    background: var(--bg); border: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 12px; line-height: 1.4; color: var(--muted);
  }
  .feed::before {
    content: "// Feed"; flex: 0 0 auto; margin-bottom: 2px;
    font-size: 10px; line-height: 12px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--muted);
  }
  .feed li { padding-left: 9px; border-left: 2px solid var(--line-hi); }
  .feed li.you { border-left-color: color-mix(in srgb, var(--you) 55%, var(--line)); }
  .feed li.opp { border-left-color: color-mix(in srgb, var(--opp) 55%, var(--line)); }
  .feed li.new { color: var(--fg); }
  .feed li:nth-child(n+5) { opacity: .6; }
  .feed li:nth-child(n+8) { opacity: .35; }

  /* dock: action panel under the sidebar, hand under the board */
  .dock {
    position: relative; margin: 0;
    padding: 0 10px 0 0;
    display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); gap: 10px;
    border: 1px solid var(--line-hi);
  }
  .dock::before { left: 0; }
  .panel {
    flex-direction: column; align-items: stretch; gap: 8px;
    min-height: 0; padding: 12px;
    border-right: 1px solid var(--line);
  }
  .panel .info { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .panel .sub.recent { display: none; }
  .panel .hint-desk { display: block; margin-top: 4px; color: var(--muted); font-family: var(--font-mono); font-size: 12px; line-height: 1.45; }
  .panel .actions { flex-direction: row; }
  .panel .actions .btn { flex: 1; }
  .hand {
    align-items: flex-end; gap: 10px;
    min-height: 0; padding: 18px 4px 10px;
    overflow-x: auto; overflow-y: visible;
  }
  .card.md .plate { font-size: clamp(8px, calc(var(--hh) * .065), 10.5px); height: 18px; bottom: 5px; }
  .card.md .art { inset: 6px 6px 25px; }
  .card.md .badge { bottom: 25px; right: 6px; width: 20px; height: 20px; }
  .card.md .badge svg { width: 12px; height: 12px; }
  .card.md .str { min-width: 26px; height: 24px; font-size: 16px; }
  .hand .card.selected { z-index: 3; }

  /* plates fit the narrow sidebar */
  .bar { padding: 8px 10px; }
  .crest { width: 42px; height: 42px; }
  .total { min-width: 64px; height: 52px; font-size: 30px; }

  /* deck screen: presets and stats on the left, the card pool on the right, each scrolling on its own */
  .sheet.wide { width: min(1320px, 100%); height: calc(100vh - 32px); height: calc(100dvh - 32px); max-height: none; }
  .dbody {
    display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    padding: 0; gap: 0; overflow: hidden;
  }
  .dcol { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px; scrollbar-width: thin; scrollbar-color: var(--line-hi) transparent; }
  .dcol::-webkit-scrollbar { width: 8px; }
  .dcol::-webkit-scrollbar-thumb { background: var(--line-hi); }
  .dside { border-right: 1px solid var(--line-hi); gap: 12px; }
  .dside .wordmark { font-size: 34px; }
  .dside .presets { grid-template-columns: 1fr; gap: 6px; }
  .dside .preset { padding: 8px 10px; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  .dside .preset .pe { width: 40px; height: 40px; }
  .dside .preset .pe svg { width: 24px; height: 24px; }
  .dside .preset small { font-size: 12px; }
  .dside .stat { grid-template-columns: 1fr; padding: 8px; }
  .dside h2 { font-size: 20px; }
  .dpool { gap: 16px; }
  .dpool-rule { display: none; }
  .pool { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 14px 10px; }
  .pool-sec h3 { position: sticky; top: -20px; z-index: 2; padding-top: 8px; background: var(--panel); }
  .builder-foot {
    display: grid; align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    grid-template-areas: "info opp" "info go";
    gap: 10px 20px;
  }
  .builder-foot .dinfo { grid-area: info; align-self: stretch; }
  .builder-foot .oppsel { grid-area: opp; }
  .builder-foot .go { grid-area: go; }
  .chips { flex-wrap: wrap; overflow: visible; }
}

/* mouse users on desktop: lift a fanned hand card under the pointer so it can be read */
@media (min-width: 1024px) and (min-height: 600px) and (hover: hover) {
  .hand.tight .card:hover { z-index: 2; transform: translateY(-8px); }
  .hand.tight .card.selected:hover { transform: translateY(-12px); }
}