/* The play page: lobby, live table, dialogs. Tokens and the five rules are in
   theme.css; everything here should read from them. */

html, body { height: 100%; }
body { overflow: hidden; }
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.skip { position: absolute; left: -999px; top: 4px; z-index: 100; background: var(--turn); color: var(--on-accent);
  padding: 6px 10px; font-weight: 700; }
.skip:focus { left: 8px; }
.small { font-size: var(--fs-small); }
.spacer { flex: 1; }
:root { --scale: 1; --rail-w: 384px; }

/* ---- app bar ------------------------------------------------------------- */
.appbar .ico { display: none; font-weight: 700; }
/* Bar buttons stay on one line; the Match button's label is its own span so a phone can show ☰ instead. */
.appbar nav .btn { white-space: nowrap; }
#menuBtn .lbl { display: inline; }
@media (max-width: 900px) { #menuBtn .lbl { display: none; } }
.sheetbar { display: none; }
#radioBtn .station-ico { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; margin-right: 6px; }
#radioBtn .station-ico[hidden] { display: none; }
#radioBtn.has-icon .ico { display: none !important; }  /* the logo replaces the ♪ on a phone */
#radioBtn .lbl { display: inline-block; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
@media (max-width: 480px) { #radioBtn .lbl { max-width: 8ch; } }  /* the one label kept on a phone: it names the station */
.appbar { position: relative; z-index: 30; flex: 0 0 auto; }
.matchbar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.phasetext { color: var(--tx-2); font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); color: var(--tx-2);
  font-family: var(--font-display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.conn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tx-3); }
.conn.live::before { background: var(--ok); }
.conn.you::before { background: var(--turn); }
.conn.ai::before { background: var(--rival); animation: blink 1s steps(2, start) infinite; }
.conn.bad { color: var(--danger); }
.conn.bad::before { background: var(--danger); }
@keyframes blink { to { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .conn.ai::before { animation: none; } }
.menu { position: absolute; right: 12px; top: 46px; z-index: 40; display: flex; flex-direction: column; min-width: 280px;
  background: var(--s3); border: 1px solid var(--line-2); box-shadow: var(--elev-2); padding: 4px; }
.menu button { text-align: left; background: none; border: 0; color: var(--tx); padding: 10px 12px; font: inherit; cursor: pointer; }
.menu button:hover, .menu button:focus-visible { background: var(--s4); }
.menu button.danger { color: var(--danger); }
.banner { flex: 0 0 auto; padding: 8px 16px; background: var(--danger-dim); color: #ffb3b9;
  border-bottom: 1px solid rgba(255, 90, 103, .4); white-space: pre-wrap; font-size: var(--fs-small); }
.banner.info { background: var(--rival-dim); color: #ffd3a6; border-color: rgba(255, 160, 71, .4); }
.banner button { margin-left: 12px; }

/* ---- lobby -------------------------------------------------------------- */
.lobby { flex: 1; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-4);
  padding: var(--sp-5); max-width: 1480px; width: 100%; margin: 0 auto; align-content: start; }
.lobby .plate > header { min-height: 44px; }
.lobby > #continueBox { grid-column: 1 / -1; }  /* above New match, across both columns */
.compose-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.matchup { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--sp-3); align-items: stretch; }
.versus { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: 700 18px/1 var(--font-display); letter-spacing: .2em; color: var(--tx-3); }
.versus .btn { letter-spacing: .04em; }
.deckslot { background: var(--s1); border: 1px solid var(--line); padding: var(--sp-3); display: flex; flex-direction: column;
  gap: var(--sp-3); min-width: 0; position: relative; }
.deckslot::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.deckslot[data-side=you]::before { background: var(--you); }
.deckslot[data-side=rival]::before { background: var(--rival); }
.ds-head { display: flex; align-items: baseline; gap: 8px; }
.ds-side { font: 600 var(--fs-micro)/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.deckslot[data-side=you] .ds-side { color: var(--you); }
.deckslot[data-side=rival] .ds-side { color: var(--rival); }
.ds-name { font: 600 var(--fs-lead)/1.2 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.ds-legends { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ds-legends button { padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; }
.ds-legends img, .ds-legends .noart { width: 100%; aspect-ratio: 5/7; object-fit: cover; display: block;
  border-radius: var(--radius); background: var(--s3); }
.ds-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ram { display: inline-flex; gap: 4px; align-items: center; font: 600 var(--fs-micro)/1 var(--font-display);
  letter-spacing: .08em; padding: 3px 7px; border: 1px solid currentColor; border-radius: var(--radius); }
.ram.Red { color: var(--c-red); } .ram.Blue { color: var(--c-blue); } .ram.Green { color: var(--c-green); } .ram.Yellow { color: var(--c-yellow); }
.curve { display: flex; align-items: flex-end; gap: 3px; height: 44px; padding-top: 4px; }
.curve .bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 100%; }
.curve .bar i { display: block; width: 100%; background: var(--line-2); min-height: 2px; height: calc(var(--f, 0) * 30px); }
.curve .bar span { font-size: 10px; color: var(--tx-3); line-height: 1; }
.deckslot[data-side=you] .curve .bar i { background: rgba(53, 215, 232, .55); }
.deckslot[data-side=rival] .curve .bar i { background: rgba(255, 160, 71, .55); }
.ds-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.legal { font-size: var(--fs-micro); }
.legal.ok { color: var(--ok); } .legal.bad { color: var(--danger); }

.opp { border: 0; padding: 0; margin: 0; min-width: 0; }
.opp legend { margin-bottom: 8px; display: flex; align-items: center; gap: 12px; width: 100%; }
/* "Random" (2026-11-12): pressed, it stands for the opponent; the cards all read unchosen. */
.opp-random { margin-left: auto; letter-spacing: .12em; }
.opp-random[aria-pressed=true] { border-color: var(--rival); color: var(--rival); background: rgba(255, 160, 71, .12); }
.ds-legends .random-back { display: grid; place-items: center; font: 800 2.2em/1 var(--font-display); color: var(--tx-3);
  border: 1px dashed var(--line-2); background: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px), var(--s2); }
.res-drawn { margin: 6px 0 0; color: var(--tx-2); font-size: var(--fs-small); }
.res-drawn[hidden] { display: none; }
.opp-axes { display: grid; grid-template-columns: 3fr 2fr; gap: var(--sp-4); }
.axis-title { font-size: var(--fs-small); color: var(--tx-2); margin-bottom: 6px; }
.opp-list { display: flex; flex-direction: column; gap: 6px; }
.oppcard { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; text-align: left;
  background: var(--s1); border: 1px solid var(--line); color: var(--tx); padding: 8px 10px; cursor: pointer; font: inherit; }
.oppcard:hover { border-color: var(--line-2); background: var(--s3); }
.oppcard[aria-checked=true] { border-color: var(--rival); background: var(--rival-dim); }
.oppcard .rank { grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center;
  font: 700 12px/1 var(--font-display); border: 1px solid var(--line-2); color: var(--tx-2); }
.oppcard[aria-checked=true] .rank { border-color: var(--rival); color: var(--rival); }
.oppcard b { font: 700 var(--fs-body)/1.1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.oppcard span.tag { color: var(--tx-2); font-size: var(--fs-small); }
/* A named opponent's face: introduced while the game is dealt, beside their
   name at the table, and with their last word on the result card. */
.rival-intro { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-items: stretch;
  background: #05060a; cursor: pointer; animation: ri-in .35s ease-out both; }
.rival-intro[hidden] { display: none; }
.rival-intro.out { animation: ri-out .32s ease-in both; }
.rival-intro img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%;
  -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent); mask-image: linear-gradient(90deg, #000 62%, transparent);
  animation: ri-face .9s cubic-bezier(.2, .7, .2, 1) both; }
.ri-text { align-self: center; padding: 24px clamp(20px, 6vw, 80px) 24px 12px; min-width: 0; animation: ri-text .6s .25s ease-out both; }
.ri-kick { font: 700 var(--fs-micro)/1 var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: var(--rival); }
.ri-text h2 { margin: 10px 0 6px; font: 700 clamp(40px, 7vw, 92px)/.95 var(--font-display); letter-spacing: .08em; text-transform: uppercase; overflow-wrap: anywhere; }
.ri-tag { color: var(--tx-2, #9aa3b2); font-size: var(--fs-small); letter-spacing: .08em; text-transform: uppercase; }
.ri-text q { display: block; margin-top: 22px; padding-left: 14px; border-left: 3px solid var(--rival); font-size: clamp(18px, 2.2vw, 26px); line-height: 1.35; font-style: italic; quotes: "\201C" "\201D"; }
.ri-skip { margin-top: 28px; font: 700 var(--fs-micro)/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--tx-2, #9aa3b2); }
@keyframes ri-in { from { opacity: 0; } }
@keyframes ri-out { to { opacity: 0; } }
@keyframes ri-face { from { transform: scale(1.08); filter: brightness(.3); } }
@keyframes ri-text { from { opacity: 0; transform: translateX(24px); } }
@media (max-width: 900px) and (orientation: portrait) {
  .rival-intro { grid-template-columns: 1fr; grid-template-rows: minmax(0, 52%) auto; align-content: start; }
  .rival-intro img { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .ri-text { align-self: start; padding: 4px 20px 24px; }
}
@media (prefers-reduced-motion: reduce) { .rival-intro, .rival-intro img, .ri-text { animation: none; } }
.who .seatface { width: 26px; height: 26px; object-fit: cover; border: 1px solid var(--rival); flex: none; }
.res-rival { display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; padding: 10px 12px; border-left: 3px solid var(--rival); background: rgba(255, 255, 255, .03); }
.res-rival[hidden] { display: none; }
.res-rival img { width: 56px; height: 56px; object-fit: cover; flex: none; border: 1px solid var(--line-2); }
.res-rival b { display: block; font: 700 var(--fs-micro)/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--rival); margin-bottom: 5px; }
.res-rival q { font-style: italic; quotes: "\201C" "\201D"; }

/* Named opponents (cpsim.rivals): a third group under the two axes. */
.oppcard .face { grid-row: span 2; width: 44px; height: 44px; object-fit: cover; border: 1px solid var(--line-2); }
.oppcard.faced .rank { display: none; }
.oppcard.faced[aria-checked=true] .face { border-color: var(--rival); }
.camp-fight .face { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--line-2); }
.camp-fight:has(.face) { grid-template-columns: 56px minmax(0, 1fr) auto; }
.camp-fight.next .face { border-color: var(--rival); }
.camp-fight.beaten .face { border-color: var(--you); filter: saturate(.55); }
.opp-rivals { margin-top: var(--sp-4); }
#oppRivals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.opp-desc { margin: 10px 0 0; color: var(--tx-2); font-size: var(--fs-small); min-height: 2.9em; }

.compose-foot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-4); }
.seat { border: 0; padding: 0; margin: 0; }
.seat legend { margin-bottom: 6px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.seg span { display: block; padding: 8px 14px; font-size: var(--fs-small); color: var(--tx-2); border-right: 1px solid var(--line-2); }
.seg label:last-child span { border-right: 0; }
.seg input:checked + span { background: var(--s4); color: var(--tx); box-shadow: inset 0 -2px 0 var(--you); }
.seg input:focus-visible + span { box-shadow: var(--focus); }
.advanced { max-width: 420px; }
.advanced summary { cursor: pointer; padding: 8px 0; list-style: none; }
.advanced summary::before { content: "▸ "; }
.advanced[open] summary::before { content: "▾ "; }
.adv-body { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 8px; }
.adv-body p { margin: 0; }
.formfield { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-small); color: var(--tx-2); }
.formfield input { width: 160px; }
.formfield.grow textarea, .formfield.grow { width: 100%; }
.check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); }
.btn.big { min-height: 46px; padding: 10px 28px; font-size: var(--fs-lead); letter-spacing: .06em; text-transform: uppercase;
  font-family: var(--font-display); }
.note { margin: 0; font-size: var(--fs-small); }
.start-dock { display: flex; align-items: center; gap: 12px; }
.start-sum { display: none; }

.lobby-side { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.continue-list, .rec-list { display: flex; flex-direction: column; }
.gamerow { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 14px; border-bottom: 1px solid var(--line);
  align-items: center; }
.gamerow:last-child { border-bottom: 0; }
.gamerow .who { font-weight: 600; font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gamerow .when { font-size: var(--fs-micro); color: var(--tx-3); }
.gamerow .res { font-size: var(--fs-micro); grid-row: span 2; text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.empty-note { padding: 14px; color: var(--tx-3); font-size: var(--fs-small); }
.tourney-card p, .binder-card p { margin: 12px 14px; font-size: var(--fs-small); }
.tourney-card .btn, .binder-card .btn { margin: 0 14px 14px; }
.tablewrap { overflow: auto; max-height: 70vh; }

/* ---- the game layout ------------------------------------------------------ */
.game { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); }
.table {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  padding: 10px 14px 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .025), transparent 70%),
    var(--s1);
  /* Card width: fits five card rows in the height left over, within bounds. */
  --cw: calc(clamp(58px, min(7.4vw, (100dvh - 372px) / 4.5), 196px) * var(--scale));
  container-type: inline-size;
}
.rail { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--s2); border-left: 1px solid var(--line); }

/* one player's side: an info bar and a lane of Legends + field */
.side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.side.rival { flex-direction: column; }
.side.you { flex-direction: column-reverse; }
.sideinfo { display: flex; align-items: center; gap: 14px; min-height: 30px; flex-wrap: wrap; }
.sideinfo .who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.who .tag { font: 700 var(--fs-micro)/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; padding: 4px 7px; }
.rival .who .tag { background: var(--rival); color: var(--on-accent); }
.you .who .tag { background: var(--you); color: var(--on-accent); }
.who .name { font-weight: 600; font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32ch; }
.side.active .who .name::after { content: "  ● active"; color: var(--turn); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; }
.counters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.ctr { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 8px; border: 1px solid var(--line); background: var(--s2);
  font-size: var(--fs-micro); color: var(--tx-3); font-family: var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.ctr b { font: 700 var(--fs-body)/1 var(--font-ui); color: var(--tx); letter-spacing: 0; text-transform: none; }
.ctr.eddies b { color: var(--gig); }
.ctr.pile { cursor: pointer; }
.ctr.pile:hover { border-color: var(--line-2); }
.ctr.bump { animation: bump var(--t-slow) var(--ease); }
@keyframes bump { 30% { background: var(--s4); border-color: var(--tx-3); } }
.backs { display: inline-flex; align-items: center; }
.backs i { width: 14px; height: 20px; margin-left: -6px; background: var(--s3); border: 1px solid var(--line-2);
  background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgba(255,160,71,.18) 3px 4px); }
.backs i:first-child { margin-left: 0; }

.lane { display: flex; gap: 12px; align-items: center; min-height: calc(var(--cw) * 1.4 + 8px); min-width: 0; }
.zone { position: relative; display: flex; gap: 8px; align-items: center; min-width: 0; }
.zone > .zlabel { position: absolute; top: -2px; left: 0; transform: translateY(-100%); pointer-events: none; }
.zone.legends { flex: 0 0 auto; padding-right: 12px; border-right: 1px solid var(--line); }
.zone.field { flex: 1; overflow-x: auto; overflow-y: visible; padding: 4px 2px; min-height: calc(var(--cw) * 1.4 + 8px); }
.zone.field.fxopen { overflow: visible; }  /* a card moving out of its row (fx.js unclip) */
.zone.field:empty::after, .zone.field .emptyzone { color: var(--tx-3); font-size: var(--fs-small); font-style: italic; }
.zlabel { font: 600 10px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
.rival .zlabel { color: rgba(255, 160, 71, .75); }
.you .zlabel { color: rgba(53, 215, 232, .75); }
.lanewrap { position: relative; padding-top: 14px; }
.side.you .lanewrap { padding-top: 14px; }

/* ---- card slots ------------------------------------------------------------ */
.slot { position: relative; flex: 0 0 auto; width: var(--cw); height: calc(var(--cw) * 1.4); }
.slot.spent { width: calc(var(--cw) * 1.4); }
.slot.hasgear { margin-bottom: calc(var(--cw) * .5); }
.card {
  position: absolute; left: 0; top: 0; width: var(--cw); height: calc(var(--cw) * 1.4);
  padding: 0; border: 0; background: var(--s3); border-radius: 4px; cursor: pointer; color: var(--tx);
  box-shadow: var(--elev-1);
  transition: transform var(--t-std) var(--ease), box-shadow var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.card img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; }
/* A held card opens its reader (table.js); no image callout or text selection instead. */
.card, .card img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.slot.spent > .card { left: calc(var(--cw) * .2); top: 0; transform: rotate(90deg); }
.slot.spent > .badge.spentb { bottom: calc(var(--cw) * .2 + 4px); }
.slot.spent > .badge.lag { top: calc(var(--cw) * .2 + 4px); }
.slot.spent > .pw { bottom: calc(var(--cw) * .2 - 4px); }
.slot:not(.spent):hover > .card, .slot > .card:focus-visible { transform: translateY(-4px); }
.slot.spent:hover > .card { transform: rotate(90deg) translateX(-4px); }
.card:focus-visible { box-shadow: var(--focus), var(--elev-2); }
/* face-down: a card back, labels stay upright (they live on the slot, not the card) */
.card.back {
  background: #12151c;
  background-image:
    linear-gradient(135deg, transparent 0 46%, rgba(252, 238, 10, .06) 46% 54%, transparent 54%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px);
  border: 1px solid var(--line-2);
}
.card.back::after { content: ""; position: absolute; inset: 18% 22%; border: 1px solid rgba(255,255,255,.08);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%); }
.card.known img { filter: saturate(.55) brightness(.75); }
.card .noart { position: absolute; inset: 0; padding: 8% 8%; display: flex; flex-direction: column; gap: 4px; text-align: left;
  background: linear-gradient(180deg, var(--s4), var(--s3)); border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; }
.card .noart b { font: 700 calc(var(--cw) * .1)/1.1 var(--font-display); letter-spacing: .03em; }
.card .noart small { font-size: calc(var(--cw) * .075); color: var(--tx-2); line-height: 1.2; }

/* overlays on the slot (never rotated) */
.badge { position: absolute; z-index: 3; pointer-events: none; font: 700 10px/1 var(--font-display); letter-spacing: .08em;
  padding: 3px 5px; text-transform: uppercase; }
.badge.lag { left: -3px; top: 6px; background: var(--rival); color: var(--on-accent); }
.badge.lag.ok { background: var(--s0); color: var(--tx); border: 1px solid var(--rival); }
.badge.spentb { left: -3px; bottom: 6px; background: var(--s0); color: var(--tx-2); border: 1px solid var(--line-2); }
.badge.fd { left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(8,9,12,.85); color: var(--tx-2);
  border: 1px solid var(--line-2); white-space: nowrap; }
.badge.seen { right: -3px; top: 6px; background: var(--you); color: var(--on-accent); }
/* Changed by the Rival since your last move (table.js `noteSince`): a tag, not a
   ring, since the rings already say what can act and what can be targeted. */
.badge.since { right: -3px; top: 6px; background: var(--s0); color: var(--rival); border: 1px solid var(--rival); }
.slot.spent > .badge.since { top: calc(var(--cw) * .2 + 4px); }
.badge.seen ~ .badge.since { top: 26px; }
.pw { position: absolute; z-index: 3; right: -4px; bottom: -4px; min-width: calc(var(--cw) * .3); height: calc(var(--cw) * .3);
  max-height: 34px; max-width: 48px; padding: 0 5px; display: grid; place-items: center; pointer-events: none;
  background: var(--s0); border: 1px solid var(--line-2); color: var(--tx);
  font: 700 clamp(12px, calc(var(--cw) * .15), 18px)/1 var(--font-display);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
.pw.up { color: var(--ok); border-color: rgba(79, 217, 143, .6); }
.pw.down { color: var(--danger); border-color: rgba(255, 90, 103, .6); }
.pw.flash { animation: pwflash var(--t-slow) var(--ease); }
/* Power only in a fight this turn (Synapse Burnout) or only while attacking (an
   aura), stacked above the power badge; hover names the card it comes from. */
.pwx { position: absolute; z-index: 3; right: -4px; bottom: calc(min(var(--cw) * .3, 34px) - 3px);
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 2px; }
.pwx > span { height: calc(min(var(--cw) * .3, 34px) * .72); padding: 0 5px; display: grid; place-items: center;
  cursor: help; background: var(--s0); border: 1px solid; font: 700 clamp(10px, calc(var(--cw) * .11), 14px)/1 var(--font-display); }
.pwx > .fb { color: var(--ok); border-color: rgba(79, 217, 143, .6); }
.pwx > .ab { color: var(--gig); border-color: var(--gig); }
.slot.spent > .pwx { bottom: calc(var(--cw) * .2 - 4px + min(var(--cw) * .3, 34px) - 3px); }
.gearrow .pwx { display: none; }
@keyframes pwflash { 0% { transform: scale(1.5); } 100% { transform: none; } }
.cost { position: absolute; z-index: 3; left: -4px; top: -4px; min-width: 24px; height: 24px; padding: 0 6px; display: grid; place-items: center;
  background: var(--s0); border: 1px solid var(--gig); color: var(--gig); font: 700 13px/1 var(--font-display); pointer-events: none; }
.cost.cant { border-color: var(--line-2); color: var(--tx-3); }
.cost s { color: var(--tx-3); margin-right: 3px; font-weight: 500; }

/* gear: tucked under its holder, peeking out, each still its own card */
.gearrow { position: absolute; left: 0; right: 0; top: calc(100% - var(--cw) * .12); display: flex; gap: 3px; z-index: 2; }
.slot.spent .gearrow { top: calc(100% - var(--cw) * .12); left: calc(var(--cw) * .2); }
.gearrow .slot { width: calc(var(--cw) * .44); height: calc(var(--cw) * .44 * 1.4); }
.gearrow .card { width: calc(var(--cw) * .44); height: calc(var(--cw) * .44 * 1.4); }
.gearrow .pw, .gearrow .badge { display: none; }
/* Never wider than its holder: past two (three when the holder is spent) the
   pieces overlap, each still showing its left edge, instead of running under
   the next Unit (a Sketchy Ripper with four Gear covered its neighbour's,
   2026-11-06). --n is the count, set by table.js; hovering one lifts it. */
.gearrow { --gw: calc(var(--cw) * .44); --rw: var(--cw); gap: 0; }
.slot.spent .gearrow { --rw: calc(var(--cw) * 1.2); }
.gearrow > .slot + .slot { margin-left: min(3px, calc((var(--rw) - var(--n, 1) * var(--gw)) / (var(--n, 1) - 1))); }
.gearrow > .slot:hover, .gearrow > .slot:focus-within { z-index: 3; }
.gearrow > .slot { box-shadow: -3px 0 6px rgba(0, 0, 0, .45); border-radius: 3px; }

/* states driven by the decision */
.slot.actionable > .card { box-shadow: 0 0 0 2px var(--you), var(--elev-1); }
.slot.actionable::before { content: ""; position: absolute; inset: -6px; z-index: 0; pointer-events: none;
  background:
    linear-gradient(var(--you), var(--you)) left top / 10px 2px no-repeat,
    linear-gradient(var(--you), var(--you)) left top / 2px 10px no-repeat,
    linear-gradient(var(--you), var(--you)) right bottom / 10px 2px no-repeat,
    linear-gradient(var(--you), var(--you)) right bottom / 2px 10px no-repeat; }
.slot.selected > .card { box-shadow: 0 0 0 3px var(--turn), var(--elev-2); }
.slot.selected:not(.spent) > .card { transform: translateY(-8px); }
.slot.target > .card { box-shadow: 0 0 0 3px var(--rival), var(--elev-2); cursor: crosshair; }
.slot.target::after { content: "TARGET"; position: absolute; z-index: 4; left: 50%; top: 6px; transform: translateX(-50%);
  background: var(--rival); color: var(--on-accent); font: 700 10px/1 var(--font-display); letter-spacing: .12em; padding: 3px 6px; pointer-events: none; }
.slot.target.friendly > .card { box-shadow: 0 0 0 3px var(--you), var(--elev-2); }
.slot.target.friendly::after { background: var(--you); content: "CHOOSE"; }
.slot.picked > .card { box-shadow: 0 0 0 3px var(--turn), var(--elev-2); }
.slot.picked::after { content: "✓ PICKED"; position: absolute; z-index: 4; left: 50%; top: 6px; transform: translateX(-50%);
  background: var(--turn); color: var(--on-accent); font: 700 10px/1 var(--font-display); letter-spacing: .12em; padding: 3px 6px; }
.slot.hl > .card { box-shadow: 0 0 0 3px var(--tx), var(--elev-2); }
.slot.changed > .card { animation: changed 900ms var(--ease); }
@keyframes changed { 0% { box-shadow: 0 0 0 4px var(--tx), var(--elev-2); } 100% { box-shadow: var(--elev-1); } }
.dimmed > .card { filter: brightness(.55) saturate(.6); }

/* ---- the midline: two Gig areas meeting in the middle ---------------------- */
.midline { position: relative; display: grid; grid-template-rows: auto auto; gap: 0; padding: 4px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.midline::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 15%, var(--line-2) 85%, transparent); }
.gigrow { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 3px 0; }
.gigrow.rival { padding-bottom: 7px; }
.gigrow.you { padding-top: 7px; }
.gighead { flex: 0 0 auto; width: 150px; display: flex; flex-direction: column; gap: 3px; }
.gighead .ttl { font: 600 10px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.gigrow.rival .ttl { color: var(--rival); } .gigrow.you .ttl { color: var(--you); }
.gighead .score { display: flex; align-items: baseline; gap: 8px; }
.gighead .score b { font: 700 22px/1 var(--font-display); }
.gighead .score b small { font-size: 12px; color: var(--tx-3); font-weight: 600; }
.sc { font: 700 var(--fs-small)/1 var(--font-display); color: var(--gig); letter-spacing: .04em; }
.sc.null { color: var(--tx-3); }
.pips { display: flex; gap: 3px; }
.pips i { width: 12px; height: 4px; background: var(--line-2); }
.pips i.on { background: var(--gig); }
.pips i.over { background: var(--turn); }
.dice { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.die { position: relative; width: 40px; height: 40px; display: grid; place-items: center; color: var(--gig); flex: 0 0 auto; }
.die svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.die b { position: relative; font: 700 15px/1 var(--font-display); color: var(--tx); text-shadow: 0 1px 2px #000; }
.die.d4 b { top: 5px; } .die.d10 b { top: -4px; }
.die small { position: absolute; bottom: -9px; left: 0; right: 0; text-align: center; font: 600 9px/1 var(--font-display); color: var(--tx-3); }
.die.fresh { animation: diein var(--t-slow) var(--ease); }
.die.since::after { content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--rival); box-shadow: 0 0 0 2px var(--s1); }
@keyframes diein { 0% { transform: scale(.4) rotate(-90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.gigwin { align-self: flex-start; font: 700 9px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; padding: 3px 6px;
  background: var(--turn); color: var(--on-accent); white-space: nowrap; margin-top: 2px; }
.fixer { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding-left: 12px; border-left: 1px dashed var(--line-2);
  opacity: .7; }
.fixer .zlabel { writing-mode: horizontal-tb; margin-right: 4px; color: var(--tx-3) !important; }
.fixer .fd { width: 22px; height: 22px; position: relative; color: var(--tx-3); display: grid; place-items: center; font: 600 8px/1 var(--font-display); }
.fixer .fd svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fixer .fd.gone { opacity: .25; }
.fixer .fd .die-shape polygon, .fixer .fd .die-shape rect { fill: none; stroke-width: 7; }
.nogigs { color: var(--tx-3); font-size: var(--fs-small); font-style: italic; }

/* ---- hand ------------------------------------------------------------------ */
.handzone { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: 18px 8px 0;
  height: calc(var(--hw) * 1.4 * var(--peek, 1) + 22px); flex: 0 0 auto; --hw: calc(var(--cw) * 1.08); }
.handzone .zlabel { position: absolute; left: 4px; top: 2px; color: rgba(53, 215, 232, .75); }
.hand { display: flex; align-items: flex-end; justify-content: center; max-width: 100%; }
.hand .slot { width: var(--hw); height: calc(var(--hw) * 1.4); margin-left: calc(var(--overlap, 0px) * -1); transition: margin var(--t-std) var(--ease); }
.hand .slot:first-child { margin-left: 0; }
.hand .card { width: var(--hw); height: calc(var(--hw) * 1.4); }
.hand .slot:hover, .hand .slot:focus-within, .hand .slot.selected { z-index: 5; }
.hand .slot:hover > .card, .hand .slot > .card:focus-visible { transform: translateY(-14px); }
.hand .slot.selected > .card { transform: translateY(-22px); }
/* Short screens: the hand sits partly below the edge and rises on hover, focus or
 * selection. This block must come after the lifts above: it has the same
 * specificity, and while it sat before them their 14px won, so a hovered card
 * stayed 5-34px below the edge (24px at 1440x900; review and probe, 2026-09-26).
 * The opening hand shows in full, since the field is empty then; at a large card
 * scale on a short screen even that overflows, so it keeps the full lift too. */
@media (max-height: 900px) and (min-width: 901px) {
  .handzone { --peek: .74; }
  .handzone.opening { --peek: 1; }
  .hand .slot:hover > .card, .hand .slot > .card:focus-visible { transform: translateY(calc(var(--hw) * -.4)); }
  .hand .slot.selected > .card { transform: translateY(calc(var(--hw) * -.4 - 8px)); }
}
.hand .slot.unplayable > .card { filter: brightness(.72); }

/* ---- fx layer ------------------------------------------------------------- */
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; overflow: visible; }
/* Played-onto arrows sit above the popups they start from. */
.fx.links { z-index: 27; }
.fx.links .beam { filter: drop-shadow(0 0 2px rgba(0,0,0,.9)); }
.fx .beam { fill: none; stroke-width: 3; stroke-linecap: square; }
.fx .beam.rival { stroke: var(--rival); } .fx .beam.you { stroke: var(--you); }
.fx .beam.draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: beam var(--t-slow) var(--ease) forwards; }
@keyframes beam { to { stroke-dashoffset: 0; } }
.fx .reticle { fill: none; stroke-width: 2; }
.fx .reticle.rival { stroke: var(--rival); } .fx .reticle.you { stroke: var(--you); }
.fx .impact { fill: none; stroke: var(--danger); stroke-width: 3; animation: impact 520ms var(--ease) forwards; transform-box: fill-box; transform-origin: center; }
@keyframes impact { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.flyghost { position: fixed; z-index: 60; pointer-events: none; border-radius: 4px; overflow: hidden; box-shadow: var(--elev-2); }
.flyghost img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flyghost.back { background: #12151c; border: 1px solid var(--line-2); }
.flydie { position: fixed; z-index: 60; pointer-events: none; }
/* Game-feel overlays (fx.js): fixed to the viewport, never interactive, gone when done.
   Light is for game actions only, never for chrome (theme.css rule 1, relaxed 2026-11-06). */
.fxparticles { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 58; }
.fxo { position: fixed; pointer-events: none; z-index: 57; }
.fxring { border-radius: 50%; border: 2px solid var(--you); }
.fxflash { border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,240,200,.5) 25%, transparent 70%); }
.fxbracket { border: 3px solid var(--rival); }
.fxbracket.lt { border-right: 0; border-bottom: 0; } .fxbracket.rt { border-left: 0; border-bottom: 0; }
.fxbracket.lb { border-right: 0; border-top: 0; } .fxbracket.rb { border-left: 0; border-top: 0; }
.fxo.fxpw { width: auto !important; height: auto !important; z-index: 59; white-space: nowrap; transform: translate(-50%, -50%);
  padding: 4px 12px; background: var(--on-accent); border: 2px solid; font: 800 clamp(34px, 3.4vw, 64px)/1 var(--font-display);
  font-variant-numeric: tabular-nums; }
.fxpw.you { color: var(--you); border-color: var(--you); } .fxpw.rival { color: var(--rival); border-color: var(--rival); }
.fxburn { border-radius: 4px; overflow: hidden; }
.fxburn canvas { width: 100%; height: 100%; display: block; }
/* The turn banner (fx.js banner): a band across the table, the word in it. */
.fxband { position: absolute; left: 0; right: 0; top: 50%; height: clamp(84px, 11dvh, 128px); transform: translateY(-50%); z-index: 25;
  pointer-events: none; display: grid; place-items: center; }
.fxband::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(0,0,0,.84) 16%, rgba(0,0,0,.84) 84%, transparent); }
.fxband .bar { position: absolute; left: 0; right: 0; height: 2px; }
.fxband .bar.t { top: 0; } .fxband .bar.b { bottom: 0; }
.fxband .word { position: relative; font: 800 clamp(30px, 3.6vw, 60px)/1 var(--font-display); letter-spacing: .38em; padding-left: .38em; text-transform: uppercase; }
/* The wordmark art (fx.js turnBand): a little taller than the band, so it
   breaks past both bars (the user's ask, 2026-11-09: "pop", not drastically).
   The band's height plus 56px, centred and lifted 4px (its slanted tails hang
   low): the letters clear each bar by 15-20px. The grid row is centred too: left to itself, a row taller than the
   band grows down from the top edge and only the tails broke out. The Turn
   line moves under the band to leave it room. */
.fxband.art { overflow: visible; align-content: center; }
.fxband img.word { height: calc(clamp(84px, 11dvh, 128px) + 56px); margin-bottom: 8px; width: auto; max-width: min(88vw, 680px); object-fit: contain;
  padding: 0; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .7)); }
.fxband.art .sub { bottom: auto; top: calc(100% + 26px); text-shadow: 0 1px 4px #000, 0 0 10px #000; color: var(--tx-2); }
.fxband .sub { position: absolute; bottom: 12%; font: 600 var(--fs-small) var(--font-display); letter-spacing: .3em; color: var(--tx-3); text-transform: uppercase; }
.fxband.you .word { color: var(--turn); } .fxband.you .bar { background: var(--turn); box-shadow: 0 0 14px rgba(252, 238, 10, .6); }
.fxband.rival .word { color: var(--rival); } .fxband.rival .bar { background: var(--rival); box-shadow: 0 0 14px rgba(255, 160, 71, .6); }
/* The Legend moment (fx.js legendMoment): a call lifts the card out beside its
   name ("dossier"), Go Solo cuts a band of its art across the table ("slash").
   Sized to the table's visible part (container units), in the card's colour
   (--c, set by fx.js). Under the sparks and flash (57-58), over the table.
   Catches the pointer while it's up: a click dismisses it. */
@property --sheen { syntax: "<percentage>"; inherits: false; initial-value: -100%; }
/* The bundled Barlow Condensed (radio.css has it too, under its own name), fetched only once a moment uses it. */
@font-face { font-family: "Moment Condensed"; src: url("/static/barlow-condensed-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Moment Condensed"; src: url("/static/barlow-condensed-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }
.lmo { position: fixed; z-index: 56; overflow: hidden; container-type: size; cursor: pointer; --cut: "Moment Condensed", "Barlow Condensed", var(--font-display); }
.lmo .lm-dim { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.86)); }
.lm-kick { display: inline-flex; align-items: center; gap: .55em; font: 700 clamp(13px, 1.25cqw, 21px)/1 var(--cut); letter-spacing: .24em; text-transform: uppercase; }
.lm-kick .who { padding: .3em .5em .25em; color: var(--on-accent); background: var(--you); }
.lmo.rival .lm-kick .who { background: var(--rival); }
.lm-kick .what { color: var(--c); text-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); }
.lmo.solo .lm-kick .what { color: var(--turn); text-shadow: 0 0 14px rgba(252, 238, 10, .6); }
.lm-name { font: 700 min(8.4cqw, 13cqh)/.86 var(--cut); text-transform: uppercase; letter-spacing: .01em; color: #fff; white-space: nowrap;
  text-shadow: 0 0 1px #fff, 0 6px 24px rgba(0, 0, 0, .8); }
.lm-name .ch { display: inline-block; white-space: pre; }
.lm-sub { font: 600 clamp(14px, 1.9cqw, 30px)/1.1 var(--cut); letter-spacing: .32em; text-transform: uppercase; color: var(--c); margin-top: 4px; }
.lm-quote { margin-top: .7em; font: italic 500 clamp(14px, 1.4cqw, 22px)/1.25 var(--font-ui); color: var(--tx); text-shadow: 0 1px 6px #000; max-width: 40em; }
.lm-stamp { position: relative; display: grid; place-items: center; width: clamp(70px, 9cqw, 150px); aspect-ratio: 1; padding-top: .12em;
  font: 700 clamp(44px, 6cqw, 96px)/1 var(--cut); color: var(--on-accent); background: var(--turn);
  clip-path: polygon(18% 0, 100% 0, 100% 82%, 82% 100%, 0 100%, 0 18%); }
.lm-stamp small { position: absolute; top: 9%; font: 700 clamp(10px, .95cqw, 15px)/1 var(--cut); letter-spacing: .26em; text-transform: uppercase; }
/* the slash */
/* centred with `translate`: fx.js animates `transform` */
.lmo.slash .lm-band { position: absolute; left: -3%; right: -3%; top: 50%; height: min(44cqh, 30cqw); translate: 0 -50%; }
.lmo.slash.solo .lm-band { height: min(52cqh, 35cqw); }
.lm-clip { position: absolute; inset: 0; overflow: hidden; background: #06070a; transform: skewY(-2.2deg); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.lmo.rival .lm-clip { transform: skewY(2.2deg); }
.lm-art { position: absolute; top: -3%; bottom: -8%; width: 62%; overflow: hidden; }
/* the card's art window: x 140-685 and down from y 178 of 733x1024 (fx.js LM_ART) */
.lm-art img { position: absolute; top: 0; left: -25.69%; width: 134.5%; }
.lmo.you .lm-art { left: 0; -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent); }
.lmo.rival .lm-art { right: 0; -webkit-mask-image: linear-gradient(270deg, #000 55%, transparent); mask-image: linear-gradient(270deg, #000 55%, transparent); }
.lm-tint { position: absolute; inset: 0; mix-blend-mode: screen;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, transparent), transparent 40%, transparent 60%, color-mix(in srgb, var(--c) 10%, transparent)); }
.lm-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px); }
.lm-edge { position: absolute; left: 0; right: 0; height: 3px; background: var(--c); box-shadow: 0 0 18px var(--c), 0 0 4px var(--c); z-index: 2; }
.lm-edge.t { top: 0; } .lm-edge.b { bottom: 0; }
.lm-streak { position: absolute; height: 2px; width: 28%; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); }
.lmo.slash .lm-txt { position: absolute; top: 0; bottom: 0; width: 52%; display: flex; flex-direction: column; justify-content: center; gap: 6px; transform: skewY(2.2deg); }
.lmo.slash.rival .lm-txt { transform: skewY(-2.2deg); }
.lmo.slash.you .lm-txt { right: 6%; align-items: flex-start; }
.lmo.slash.rival .lm-txt { left: 6%; align-items: flex-end; text-align: right; }
.lmo.slash.solo .lm-txt { width: 46%; }
.lmo.slash.you.solo .lm-txt { right: 15%; } .lmo.slash.rival.solo .lm-txt { left: 15%; }
.lmo.slash .lm-stamp { position: absolute; top: 50%; translate: 0 -50%; }
.lmo.slash.you .lm-stamp { right: 3%; } .lmo.slash.rival .lm-stamp { left: 3%; }
/* the dossier */
.lmo.dossier .lm-row { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5cqw; padding: 0 4cqw; }
.lmo.dossier.rival .lm-row { flex-direction: row-reverse; }
.lm-cardwrap { position: relative; flex: none; height: min(66cqh, 54cqw); aspect-ratio: 733 / 1024; }
.lm-card { position: absolute; inset: 0; border-radius: 4.5%/3.2%; overflow: hidden;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 70%, transparent), 0 0 60px color-mix(in srgb, var(--c) 45%, transparent), 0 40px 80px rgba(0, 0, 0, .8); }
.lm-card img { width: 100%; height: 100%; display: block; }
.lm-card::after { content: ""; position: absolute; left: -60%; top: -20%; width: 40%; height: 140%; rotate: 18deg; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: translateX(var(--sheen)); }
.lm-halo { position: absolute; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: 0; filter: blur(8px);
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 42%, transparent), transparent 62%); }
.lm-rays { position: absolute; left: 50%; top: 50%; width: 340%; aspect-ratio: 1; translate: -50% -50%; opacity: 0;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 16%, transparent) 0 3deg, transparent 3deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 60%); mask-image: radial-gradient(circle, #000 15%, transparent 60%); }
.lmo.dossier .lm-txt { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 52cqw; align-items: flex-start; }
.lmo.dossier.rival .lm-txt { align-items: flex-end; text-align: right; }
.lm-rule { width: min(520px, 100%); height: 3px; background: var(--c); box-shadow: 0 0 14px var(--c); transform-origin: left; }
.lmo.rival .lm-rule { transform-origin: right; }
.lmo.dossier .lm-stamp { margin-top: 10px; width: clamp(64px, 7cqw, 120px); font-size: clamp(40px, 4.8cqw, 78px); }
/* reduced motion: a plate that fades in and out */
.lmo.still { display: grid; place-items: center; background: rgba(0, 0, 0, .5); }
.lm-plate { display: flex; gap: 22px; align-items: center; max-width: 92cqw; padding: 18px 28px 18px 18px; background: rgba(6, 7, 10, .95);
  border: 1px solid var(--line-2); border-left: 4px solid var(--c); }
.lm-thumb { width: clamp(70px, 9cqw, 120px); border-radius: 6px; flex: none; }
.lmo.still .lm-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lmo.still .lm-name { font-size: min(5cqw, 64px); }
/* a narrow table (a phone): the words under the art, centred */
@container (max-width: 640px) {
  .lmo.dossier .lm-row, .lmo.dossier.rival .lm-row { flex-direction: column; gap: 3cqh; padding: 4cqh 4cqw; }
  .lm-cardwrap { height: min(50cqh, 80cqw); }
  .lmo.dossier .lm-txt, .lmo.dossier.rival .lm-txt { align-items: center; text-align: center; max-width: 92cqw; }
  .lmo.slash .lm-band, .lmo.slash.solo .lm-band { height: min(60cqh, 110cqw); }
  .lmo.slash .lm-art { width: 100%; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 85%); mask-image: linear-gradient(180deg, #000 30%, transparent 85%); }
  .lmo.slash .lm-txt, .lmo.slash.solo .lm-txt { left: 5% !important; right: 5% !important; width: auto; top: auto; bottom: 8%; align-items: center !important; text-align: center !important; }
  .lmo.slash .lm-stamp { top: 10%; translate: none; }
  .lm-name { font-size: min(13cqw, 9cqh); }
}
/* A power change, rising off the badge (fx.js floater). */
.fxo.fxfloat { width: auto !important; height: auto !important; z-index: 59; white-space: nowrap;
  font: 800 clamp(26px, 2.4vw, 44px)/1 var(--font-display); font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 2px #0b0c0f; paint-order: stroke fill; text-shadow: 0 4px 14px rgba(0, 0, 0, .7); }
.fxfloat.up { color: var(--ok); } .fxfloat.down { color: var(--danger); }
/* The aim arrow (fx.js arrow): cyan while free, amber on a legal target, red on one that isn't. */
.fxaim { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 56; overflow: visible;
  --aim: var(--you); filter: drop-shadow(0 0 5px var(--aim)); }
.fxaim[data-kind="ok"] { --aim: var(--rival); } .fxaim[data-kind="bad"] { --aim: var(--danger); }
.fxaim path { fill: none; stroke: var(--aim); stroke-linecap: round; }
.fxaim .line { stroke-width: 4; stroke-dasharray: 14 10; animation: aimmarch .6s linear infinite; }
.fxaim .trail { stroke-width: 10; opacity: .18; }
.fxaim .head, .fxaim .dot { fill: var(--aim); }
.fxaim .ret circle:not(.dot) { fill: none; stroke: var(--aim); stroke-width: 2.5; }
.fxaim .ret path { stroke-width: 2.5; }
@keyframes aimmarch { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) { .fxaim .line { animation: none; } }
/* What you are aiming at, beside it (play.js). */
.aimtag { position: fixed; z-index: 59; pointer-events: none; padding: 6px 10px; background: var(--on-accent); border: 1px solid var(--line-2);
  font: 700 var(--fs-small)/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--tx); white-space: nowrap; }
.aimtag.ok { border-color: var(--rival); } .aimtag.bad { border-color: var(--danger); color: var(--danger); }
/* A card being dragged out of the hand (play.js): a copy follows the pointer. */
.dragcard { position: fixed; z-index: 60; pointer-events: none; transform-origin: 50% 30%; }
.dragcard .card { width: 100%; height: 100%; box-shadow: 0 30px 50px rgba(0,0,0,.6), 0 60px 90px rgba(0,0,0,.35); }
.slot.dragsrc > .card { visibility: hidden; }
.dropzone { outline: 2px dashed var(--you); outline-offset: -4px; background: rgba(53, 215, 232, .05) !important; }
.dropzone.over { background: rgba(53, 215, 232, .12) !important; }
.slot.droptarget > .card { outline: 2px solid var(--you); outline-offset: 2px; }
.slot.droptarget.over > .card { outline-width: 3px; box-shadow: 0 0 0 6px rgba(53, 215, 232, .25); }
.slot.aimtarget > .card { outline: 2px solid var(--rival); outline-offset: 2px; }
.slot.aimtarget.over > .card { box-shadow: 0 0 0 6px rgba(255, 160, 71, .28); }
.gigrow.aimtarget .die { filter: drop-shadow(0 0 6px rgba(255, 160, 71, .7)); }
.gigrow.aimtarget.over .die { filter: drop-shadow(0 0 10px rgba(255, 160, 71, 1)); }
.slot.noaim > .card { filter: brightness(.55) saturate(.6); }
.toast { position: fixed; z-index: 61; pointer-events: none; padding: 8px 14px; background: var(--on-accent); border: 1px solid var(--danger);
  color: var(--danger); font: 700 var(--fs-small)/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; transform: translate(-50%, -50%); }

/* ---- the card being played ------------------------------------------------ */
/* Positioned by positionStages(): right of the Gig band, just left of the fixer,
   the Rival's above the centre line and yours below it. */
.stage { position: absolute; z-index: 24; display: flex; flex-direction: row-reverse; gap: 10px; pointer-events: none; }
.stagecard { position: relative; width: calc(var(--cw) * .66); aspect-ratio: 5 / 7; padding: 0; border: 0; border-radius: 4px;
  background: var(--s3); cursor: zoom-in; pointer-events: auto; box-shadow: var(--elev-3); }
.stagecard.rival { box-shadow: 0 0 0 2px var(--rival), var(--elev-3); }
.stagecard.you { box-shadow: 0 0 0 2px var(--you), var(--elev-3); }
.stagecard img, .stagecard .noart { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; }
.stagecard .cap { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 2px 6px;
  font: 700 9px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--on-accent); }
.stage.rival .cap { top: -8px; background: var(--rival); }
.stage.you .cap { bottom: -8px; background: var(--you); }
.stagecard:focus-visible { box-shadow: var(--focus), var(--elev-3); }
/* The real Gear under its Unit waits while its played copy is on show. */
.slot.held { visibility: hidden; }

/* ---- action tray (popover on the selected card) -------------------------- */
.tray { position: absolute; z-index: 30; display: flex; flex-direction: column; gap: 4px; min-width: 220px; max-width: 320px;
  padding: 8px; background: var(--s3); border: 1px solid var(--line-2); box-shadow: var(--elev-3); }
.tray .tray-title { font: 600 var(--fs-micro)/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3);
  padding: 2px 4px 6px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.tray .hint { font-size: var(--fs-micro); color: var(--tx-3); padding: 4px; }

/* ---- rival feed ------------------------------------------------------------ */
/* Centred on the table while the Rival acts; folded to one button at the top
   centre while a decision of yours is open (collapseFeed). */
.feed { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 26; display: flex; flex-direction: column;
  align-items: stretch; gap: 8px; width: min(440px, calc(100% - 28px)); pointer-events: none; }
.feed.collapsed { top: 10px; transform: translateX(-50%); align-items: center; }
.feeditem { pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  background: rgba(21, 25, 32, .97); border: 1px solid rgba(255, 160, 71, .45); border-left: 3px solid var(--rival);
  padding: 8px 10px; box-shadow: var(--elev-2); animation: feedin var(--t-std) var(--ease); }
.feeditem.brief { grid-template-columns: auto 1fr; }
.feeditem img, .feeditem .noimg { width: 46px; aspect-ratio: 5/7; object-fit: cover; border-radius: 2px; background: var(--s3); display: block; }
.feeditem .what { font-size: var(--fs-body); line-height: 1.35; }
.feeditem .what b { font-weight: 600; }
.feeditem .what .more { display: block; color: var(--tx-2); font-size: var(--fs-micro); margin-top: 3px; }
/* A steal in a Rival popup: the stolen dice themselves, as drawn in the Gig band. */
.feeditem .stolen { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-bottom: 8px; flex-wrap: wrap; }
.feeditem .stolen-lbl { font: 700 10px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--danger); }
.feeditem .stolen .die { width: 34px; height: 34px; }
.feeditem .stolen .die b { font-size: 13px; }
.feeditem .kick { font: 700 10px/1 var(--font-display); letter-spacing: .14em; color: var(--rival); display: block; margin-bottom: 3px; }
.feeditem { box-shadow: var(--elev-3); }
/* Earlier popups you haven't OK'd, folded into one (table.js foldOlder) */
.feeditem.fold .fold-n { display: grid; place-items: center; font: 700 20px/1 var(--font-display); color: var(--rival);
  border: 1px solid rgba(255, 160, 71, .45); background: var(--s2); }
.feeditem.fold details { margin-top: 4px; font-size: var(--fs-micro); color: var(--tx-2); }
.feeditem.fold summary { cursor: pointer; color: var(--tx-3); }
.feeditem.fold ol { margin: 4px 0 0; padding: 0 0 0 2px; list-style: none; max-height: 30vh; overflow-y: auto; }
.feeditem.fold li { margin: 2px 0; }
.feeditem.fold li .t { display: inline-block; min-width: 2.6em; color: var(--rival); font-weight: 700; }
.feeditem.out { opacity: 0; transform: scale(.96); transition: opacity var(--t-std), transform var(--t-std); }
@keyframes feedin { from { opacity: 0; transform: scale(.96); } }
.feedall { pointer-events: auto; align-self: center; }
.feedpill { pointer-events: auto; align-self: center; border-color: rgba(255,160,71,.6); color: var(--rival); }
.feed.collapsed .feeditem, .feed.collapsed .feedall { display: none; }
.feedmore { align-self: center; padding: 3px 10px; background: var(--s3); border: 1px solid rgba(255,160,71,.45);
  color: var(--rival); font: 600 var(--fs-micro)/1.3 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }

/* ---- rail ------------------------------------------------------------------ */
.turnbar { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; min-height: 58px; }
.turnbar .big { font: 700 18px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.turnbar.you { background: linear-gradient(90deg, var(--turn-dim), transparent 70%); }
.turnbar.you .big { color: var(--turn); }
.turnbar.rival .big { color: var(--rival); }
.turnbar .sub { color: var(--tx-2); font-size: var(--fs-small); }
.turnbar .tn { margin-left: auto; text-align: right; font-size: var(--fs-micro); color: var(--tx-3); font-family: var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.turnbar .tn b { display: block; font-size: 18px; color: var(--tx); letter-spacing: 0; }
.turnbar .ot { color: var(--danger); font-weight: 700; }

.command { flex: 0 1 auto; display: flex; flex-direction: column; min-height: 0; max-height: 62%; border-bottom: 1px solid var(--line); }
.command.live { box-shadow: inset 3px 0 0 var(--turn); }
.command.react { box-shadow: inset 3px 0 0 var(--rival); background: linear-gradient(180deg, var(--rival-dim), transparent 40%); }
.cmd-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px 6px; }
.cmd-head h2 { margin: 0; font: 700 var(--fs-small)/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-2); }
.command.live .cmd-head h2 { color: var(--turn); }
.command.react .cmd-head h2 { color: var(--rival); }
.cmd-body { padding: 4px 16px 14px; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.prompt { font-size: var(--fs-lead); font-weight: 600; line-height: 1.35; }
.subprompt { color: var(--tx-2); font-size: var(--fs-small); }
.opt-group { display: flex; flex-direction: column; gap: 5px; }
.opt-group > .label { margin-top: 6px; }
.opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; min-height: 38px; padding: 7px 10px;
  background: var(--s3); color: var(--tx); border: 1px solid var(--line-2); font: inherit; font-size: var(--fs-body); cursor: pointer; }
.opt:hover:not(:disabled) { background: var(--s4); border-color: var(--tx-3); }
.opt .ot { flex: 1; min-width: 0; }
.opt .oc { flex: 0 0 auto; font: 700 12px/1 var(--font-display); color: var(--gig); border: 1px solid rgba(233,196,110,.5); padding: 3px 6px; }
.opt .ok { flex: 0 0 auto; }
.opt.armed { border-color: var(--danger); background: var(--danger-dim); color: #ffc2c7; }
.opt.armed .ot::after { content: " — press again to confirm"; color: var(--danger); font-weight: 700; }
.opt.on { border-color: var(--turn); background: var(--turn-dim); }
.opt.on::before { content: "✓"; color: var(--turn); font-weight: 700; }
.opt:disabled { opacity: .45; cursor: not-allowed; }
.opt .mini { width: 26px; aspect-ratio: 5/7; object-fit: cover; border-radius: 2px; flex: 0 0 auto; }
.opt .diebox { width: 28px; height: 28px; position: relative; flex: 0 0 auto; color: var(--gig); display: grid; place-items: center; font: 700 12px/1 var(--font-display); }
.opt .diebox svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.opt.pass { justify-content: center; font-family: var(--font-display); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.endturn { margin-top: 6px; }
.selbox { display: flex; gap: 10px; align-items: center; padding: 8px; background: var(--s1); border: 1px solid var(--line); }
.selbox img { width: 44px; aspect-ratio: 5/7; object-fit: cover; border-radius: 2px; }
.selbox .nm { font-weight: 600; }
.cmd-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.coach { margin: 0 16px 8px; padding: 10px 12px; background: var(--s1); border: 1px solid var(--line); border-left: 3px solid var(--you);
  font-size: var(--fs-small); color: var(--tx-2); position: relative; }
.coach b { color: var(--tx); }
.coach .x { display: inline-flex; margin: 6px 0 0; }
.thinking { display: flex; align-items: center; gap: 10px; color: var(--tx-2); }
.thinking .bars { display: inline-flex; gap: 3px; }
.thinking .bars i { width: 3px; height: 14px; background: var(--rival); animation: thbar 900ms var(--ease) infinite; }
.thinking .bars i:nth-child(2) { animation-delay: 150ms; } .thinking .bars i:nth-child(3) { animation-delay: 300ms; }
@keyframes thbar { 50% { transform: scaleY(.3); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .thinking .bars i { animation: none; } }
:root[data-motion="reduced"] .thinking .bars i { animation: none; }

.logbox { flex: 1; min-height: 120px; display: flex; flex-direction: column; }
.log-head { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.log-head h2 { margin: 0; font: 600 var(--fs-micro)/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
.log { list-style: none; margin: 0; padding: 6px 0 12px; overflow: auto; flex: 1; font-size: var(--fs-small); }
.log li { padding: 2px 16px; color: var(--tx-2); }
.log li.turn { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font: 700 var(--fs-micro)/1.3 var(--font-display);
  letter-spacing: .12em; text-transform: uppercase; }
.log li.turn.you { color: var(--you); } .log li.turn.rival { color: var(--rival); }
.log li.d1 { padding-left: 30px; color: var(--tx-3); }
.log li.d2 { padding-left: 44px; color: var(--tx-3); }
.log li.new { background: linear-gradient(90deg, rgba(255,255,255,.05), transparent); }
.log li.mine { color: var(--tx); }
/* Found from the timeline: the line lights for a moment. */
.log li.found { animation: logfound 1.6s var(--ease); }
@keyframes logfound { from { background: rgba(252, 238, 9, .16); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .log li.found { animation: none; outline: 1px solid var(--line-2); } }
/* The turn timeline (table.js timelineLine) shows on the desktop table only. */
.timeline { display: none; }
/* A card named in the log (table.js `cardRef`): reads as text, underlined dotted. */
.cardref { display: inline; font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; text-align: inherit; text-decoration: underline dotted; text-decoration-color: var(--tx-3);
  text-underline-offset: 2px; }
.cardref:hover, .cardref:focus-visible { color: var(--tx); text-decoration-style: solid; }
.cardpeek { position: fixed; z-index: 60; width: 220px; pointer-events: none; border-radius: 10px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55); background: var(--s2); border: 1px solid var(--line-2); }
.cardpeek img, .cardpeek .noart { display: block; width: 100%; height: auto; aspect-ratio: 733 / 1024; }  /* the scans; sized before load, so it places right */

/* ---- result ------------------------------------------------------------------ */
.result { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(4, 5, 8, .8); padding: 16px; }
.res-card { width: min(720px, 100%); background: var(--s2); border: 1px solid var(--line-2); box-shadow: var(--elev-3); padding: 28px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); max-height: calc(100vh - 32px); overflow: auto; }
.res-card h2 { margin: 6px 0 6px; font: 700 42px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.result.res-won h2 { color: var(--turn); } .result.res-lost h2 { color: var(--danger); } .result.res-other h2 { color: var(--tx); }
.res-stats { margin: 18px 0; }
.res-stats table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.res-stats th, .res-stats td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: right; }
.res-stats th:first-child, .res-stats td:first-child { text-align: left; color: var(--tx-2); }
.res-stats thead th { font: 600 var(--fs-micro)/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.res-stats thead th.you { color: var(--you); } .res-stats thead th.rival { color: var(--rival); }
.res-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.res-card { width: min(840px, 100%); }
/* the recap (ending.js): card of the match beside the race */
.res-recap { display: grid; grid-template-columns: 290px 1fr; gap: 16px; margin: 18px 0 12px; }
.res-recap[hidden] { display: none; }
.res-recap section { background: var(--s1); border: 1px solid var(--line); padding: 14px; position: relative; min-width: 0; }
.res-recap section[hidden] { display: none; }
.res-recap:has(.res-mvp[hidden]) { grid-template-columns: 1fr; }
.mvpbody { display: flex; gap: 14px; margin-top: 12px; }
.mvpbody .mvpart { width: 108px; aspect-ratio: 5/7; flex: none; border-radius: 5px; object-fit: cover; box-shadow: var(--elev-2); background: var(--s3); }
.mvpname { font: 700 19px/1.1 var(--font-display); letter-spacing: .04em; }
.mvpside { margin-top: 6px; display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--tx-2); }
.mvpside i, .racekey i, .racetip i { width: 12px; height: 2px; border-radius: 1px; display: inline-block; }
.mvpstat { margin-top: 12px; }
.mvpstat b { display: block; font: 800 40px/1 var(--font-display); color: var(--tx); }
.mvpstat span { font-size: var(--fs-small); color: var(--tx-2); }
.mvpbody .faint { margin-top: 8px; line-height: 1.4; }
.racehead { display: flex; align-items: center; gap: 14px; }
.racekey { display: flex; gap: 12px; font-size: var(--fs-small); color: var(--tx-2); }
.racekey span { display: flex; align-items: center; gap: 6px; }
.k-you { background: #1a9fae; } .k-rival { background: #d07a32; }
.racehead .btn { margin-left: auto; }
.racechart { margin-top: 8px; position: relative; }
.racechart[hidden] { display: none; }
.racechart svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-display); }
.racechart svg:focus-visible { outline: 2px solid var(--you); outline-offset: 4px; }
.racetip { position: absolute; top: 6px; pointer-events: none; background: var(--s3); border: 1px solid var(--line-2); padding: 7px 9px;
  font-size: 12px; color: var(--tx-2); white-space: nowrap; box-shadow: var(--elev-2); }
.racetip .t { font: 600 10px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 6px; }
.racetip .r { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.racetip .r b { color: var(--tx); font-size: 14px; min-width: 12px; }
.racetip .note { margin-top: 5px; color: var(--tx-3); }
.racerows { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.racerows th, .racerows td { padding: 3px 8px; border-bottom: 1px solid var(--line); text-align: right; color: var(--tx-2); }
.racerows th:first-child, .racerows td:first-child, .racerows th:last-child, .racerows td:last-child { text-align: left; }
.res-more { margin: 4px 0 14px; }
.res-more[hidden] { display: none; }
.res-more summary { cursor: pointer; color: var(--tx-2); font-size: var(--fs-small); padding: 4px 0; }
.res-more .res-stats { margin: 8px 0 0; }
@media (max-width: 700px) { .res-recap { grid-template-columns: 1fr; } }

/* the ending (ending.js): a layer over everything but the result */
.endlayer { position: fixed; inset: 0; z-index: 65; cursor: pointer; }
.endflash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.endbanner { position: fixed; left: 0; width: 100%; top: 50%; transform: translateY(-50%); text-align: center; pointer-events: none; display: none; }
.endbanner.on { display: block; }
.endbanner .band { --c: var(--turn); padding: 26px 0 22px; border-top: 1px solid var(--c); border-bottom: 1px solid var(--c);
  background: linear-gradient(90deg, transparent, rgba(6, 7, 10, .9) 18%, rgba(6, 7, 10, .9) 82%, transparent); }
.endbanner.lose .band { --c: var(--danger); } .endbanner.ot .band { --c: var(--rival); }
.endbanner h1 { margin: 0; padding-left: .3em; font: 800 min(96px, 11vw)/1 var(--font-display); letter-spacing: .3em; color: var(--c);
  text-shadow: 0 0 28px color-mix(in srgb, var(--c) 55%, transparent), 0 0 2px var(--c); }
.endbanner .sub { margin-top: 12px; padding: 0 12px; font: 600 15px/1.3 var(--font-display); letter-spacing: .24em; text-transform: uppercase; color: var(--tx-2); }
.endbanner svg.ecg { display: block; margin: 14px auto 0; width: min(640px, 86vw); height: 70px; overflow: visible; }
.endbanner svg.ecg path { fill: none; stroke: var(--danger); stroke-width: 2.4; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--danger)); }
.endskip { position: fixed; right: 16px; bottom: 14px; font: 600 11px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase;
  color: var(--tx-3); opacity: 0; transition: opacity .3s; pointer-events: none; }
.endskip.on { opacity: 1; }
.die.endcount { position: fixed; z-index: 2; margin: 0; }
.die.endcount small { display: none; }
.die.endcount.lit { color: var(--turn); }
.die.endcount.lit svg { filter: drop-shadow(0 0 10px var(--turn)) drop-shadow(0 0 22px rgba(252, 238, 10, .5)); }
body.end-count #table .slot, body.end-count #table .gigrow, body.end-count #handZone { filter: brightness(.45) saturate(.6); transition: filter .4s; }
body.end-won #sideRival .slot { filter: grayscale(1) brightness(.5); transition: filter 1.2s; }
body.end-lost #table .slot, body.end-lost #table .gigrow, body.end-lost #handZone { filter: grayscale(.9) brightness(.6); transition: filter 1.2s; }

/* ---- dialogs ------------------------------------------------------------------ */
.inspector { width: min(900px, calc(100vw - 24px)); }
.in-body { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 20px; }
.in-art img, .in-art .noart { width: 100%; aspect-ratio: 5/7; object-fit: cover; border-radius: 6px; display: block; box-shadow: var(--elev-2); background: var(--s3); }
.in-art .noart { display: grid; place-items: center; color: var(--tx-3); padding: 20px; text-align: center; }
.in-art.facedown .noart { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px); }
.in-sub { color: var(--tx-2); font-size: var(--fs-small); margin-bottom: 10px; }
.in-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.in-stats .st { background: var(--s1); border: 1px solid var(--line); padding: 6px 10px; min-width: 76px; }
.in-stats .st span { display: block; font: 600 10px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 4px; }
.in-stats .st b { font: 700 20px/1 var(--font-display); }
.in-stats .st b.up { color: var(--ok); } .in-stats .st b.down { color: var(--danger); }
.in-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.in-text { white-space: pre-wrap; background: var(--s1); border: 1px solid var(--line); padding: 12px 14px; font-size: 15px; line-height: 1.55; }
.in-mods { margin-top: 10px; font-size: var(--fs-small); color: var(--tx-2); }
.in-mods ul { margin: 4px 0 0; padding-left: 18px; }
.in-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.in-actions:empty { display: none; }
#deckDialog { width: min(820px, calc(100vw - 24px)); }
/* The deck picker (play.js "the deck picker"): search, filters, compact rows. */
.dp-bar { display: flex; gap: 8px; margin-bottom: 10px; }
.dp-bar .dp-search { flex: 1; min-width: 0; min-height: 36px; }
.dp-bar select { min-height: 36px; }
.dp-filters { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 8px; }
.dp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.dp-chip { min-height: 30px; padding: 3px 10px; border: 1px solid var(--line-2); background: var(--s1); color: var(--tx-2); cursor: pointer;
  font: 600 var(--fs-micro)/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.dp-chip:hover { background: var(--s3); color: var(--tx); }
.dp-chip[aria-pressed=true] { border-color: var(--you); color: var(--you); background: var(--you-dim); }
.dp-chip .n { color: var(--tx-3); margin-left: 6px; font-weight: 500; }
.dp-colour { display: inline-flex; align-items: center; gap: 6px; }
.dp-colour::before { content: ""; width: 9px; height: 9px; background: var(--cc); }
.dp-colour.Red { --cc: var(--c-red); } .dp-colour.Blue { --cc: var(--c-blue); }
.dp-colour.Green { --cc: var(--c-green); } .dp-colour.Yellow { --cc: var(--c-yellow); }
.dp-colour[aria-pressed=true] { border-color: var(--cc); color: var(--cc); background: transparent; box-shadow: inset 0 0 0 1px var(--cc); }
.dp-legal { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--tx-2); cursor: pointer; }
.dp-count { font-size: var(--fs-micro); color: var(--tx-3); margin: 2px 0 6px; }
.dp-list { display: flex; flex-direction: column; gap: 4px; }
.dp-section { margin: 10px 0 2px; }
.dp-section:first-child { margin-top: 0; }
.dp-row { display: flex; gap: 4px; align-items: stretch; }
.dp-pick { flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  min-height: 54px; padding: 6px 10px; text-align: left; background: var(--s1); border: 1px solid var(--line); color: var(--tx);
  font: inherit; cursor: pointer; }
.dp-pick:hover { background: var(--s3); border-color: var(--line-2); }
.dp-pick[aria-pressed=true] { border-color: var(--you); box-shadow: inset 3px 0 0 var(--you); }
.dp-leg { display: flex; gap: 2px; }
.dp-leg img, .dp-leg .noart { width: 30px; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 2px; font-size: 7px; }
.dp-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dp-main b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-meta { display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: center; font-size: var(--fs-micro); color: var(--tx-3); }
.dp-pips { display: inline-flex; gap: 2px; }
.dp-pips i { width: 9px; height: 9px; }
.dp-pips i.Red { background: var(--c-red); } .dp-pips i.Blue { background: var(--c-blue); }
.dp-pips i.Green { background: var(--c-green); } .dp-pips i.Yellow { background: var(--c-yellow); }
.dp-mine { color: var(--you); font-weight: 600; }
.dp-own { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.dp-del { align-self: stretch; }
.dp-own .dp-vis { border-color: var(--line-2); }
.dp-empty { padding: 24px; text-align: center; color: var(--tx-2); }
.import-names { display: flex; flex-wrap: wrap; gap: 12px; }
.import-names .formfield { flex: 1 1 220px; }
.deckgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.deckpick { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 10px; background: var(--s1); border: 1px solid var(--line);
  color: var(--tx); cursor: pointer; font: inherit; }
.deckpick:hover { border-color: var(--line-2); background: var(--s3); }
.deckpick[aria-pressed=true] { border-color: var(--you); }
.deckpick .lg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.deckpick .lg img { width: 100%; aspect-ratio: 5/7; object-fit: cover; border-radius: 2px; }
.decklist { columns: 2 260px; column-gap: 24px; margin-top: 12px; font-size: var(--fs-small); }
.decklist .dl-row { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 8px; padding: 3px 0; break-inside: avoid; border-bottom: 1px solid var(--line); align-items: center; }
.decklist .dl-row button { all: unset; cursor: zoom-in; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.decklist .dl-row button:focus-visible { box-shadow: var(--focus); }
.decklist .dl-row .n { color: var(--tx-3); }
.decklist .dl-row .c { color: var(--gig); font-weight: 700; }
.dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.dot.Red { background: var(--c-red); } .dot.Blue { background: var(--c-blue); } .dot.Green { background: var(--c-green); } .dot.Yellow { background: var(--c-yellow); }
#importDialog { width: min(760px, calc(100vw - 24px)); }
.import-form { display: flex; flex-direction: column; gap: 12px; }
.import-public { flex: 1 1 220px; align-self: end; min-height: 40px; }

/* The player: a callsign and passphrase (players.py). */
.me-btn.signed { color: var(--you); }
.me-sheet { width: min(460px, 94vw); }
.me-modes { display: flex; gap: 6px; margin-bottom: 12px; }
.me-modes [aria-selected=true] { border-color: var(--you); color: var(--you); }
.me-form { display: flex; flex-direction: column; gap: 12px; }
.me-form .formfield input { width: 100%; }
.me-more { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.me-more > summary { cursor: pointer; }
.me-more .me-form { margin-top: 10px; }
.import-form .formfield input { width: 100%; max-width: 360px; }
.import-form textarea { width: 100%; }
.import-msg { padding: 10px 12px; border: 1px solid var(--line-2); font-size: var(--fs-small); }
.import-msg.bad { border-color: rgba(255, 90, 103, .5); background: var(--danger-dim); color: #ffc2c7; }
.import-msg.good { border-color: rgba(79, 217, 143, .5); color: var(--ok); }
.import-msg ul { margin: 6px 0 0; padding-left: 18px; }
.form-foot { display: flex; gap: 8px; align-items: center; }
.imported-list { margin-top: 16px; }
#gamesDialog { width: min(1100px, calc(100vw - 24px)); }
#settingsDialog { width: min(620px, calc(100vw - 24px)); }
.settings { display: flex; flex-direction: column; gap: 16px; }
.setrow { display: grid; grid-template-columns: 200px 1fr; gap: 12px; align-items: start; }
.setrow .desc { grid-column: 2; font-size: var(--fs-micro); color: var(--tx-3); margin-top: -6px; }
.setrow .seg span { padding: 6px 10px; }
#helpDialog { width: min(860px, calc(100vw - 24px)); }
.help h3 { font: 700 var(--fs-small)/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-2); margin: 18px 0 8px; }
.help h3:first-child { margin-top: 0; }
.help p, .help li { font-size: var(--fs-body); color: var(--tx-2); }
.help dl { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; margin: 0; }
.help dt { font-weight: 600; color: var(--tx); }
.help dd { margin: 0; color: var(--tx-2); }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }

/* How an attack resolves (§9): a column of steps joined by arrows, the React Step
   drawn as the loop it is, then the Fight / Steal fork. */
#attackDialog { width: min(760px, calc(100vw - 24px)); }
.af-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.af-flow > li { position: relative; }
.af-flow > li:not(:last-child)::after {  /* the arrow down to the next step */
  content: "▼"; position: absolute; left: 50%; bottom: -19px; transform: translateX(-50%);
  font-size: 11px; line-height: 1; color: var(--tx-3); }
.af-step { background: var(--s1); border: 1px solid var(--line); padding: 10px 14px; }
.af-step p, .af-step li { margin: 6px 0 0; font-size: var(--fs-body); color: var(--tx-2); line-height: 1.45; }
.af-step ul { margin: 6px 0 0; padding-left: 18px; }
.af-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.af-head b { font: 700 var(--fs-lead)/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--tx); }
.af-n { font: 700 var(--fs-small)/1 var(--font-display); color: var(--turn); min-width: 1.6em; }
.af-rule { font: 500 var(--fs-micro)/1 var(--font-mono); color: var(--tx-3); }
.af-head .af-rule { margin-left: auto; }
.af-kw { font: 600 var(--fs-micro)/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 6px; border: 1px solid var(--line-2); color: var(--tx); white-space: nowrap; }
.af-exit { color: var(--tx-3) !important; font-size: var(--fs-small) !important; border-top: 1px dashed var(--line); padding-top: 6px; }
.af-exit::before { content: "↳ "; }
.af-loop { border: 1px dashed var(--you); box-shadow: inset 3px 0 0 var(--you); }
.af-reacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.af-reacts > div { background: var(--s2); border: 1px solid var(--line); padding: 8px 10px; font-size: var(--fs-small); color: var(--tx-2); line-height: 1.45; }
.af-reacts > div > b { color: var(--tx); }
.af-again { color: var(--you) !important; }
.af-again span { font-size: 18px; margin-right: 4px; vertical-align: -2px; }
.af-branch-head { background: none; border: none; padding: 0; text-align: center; }
.af-branch-head .af-head { justify-content: center; }
.af-branch-head .af-head .af-rule { margin-left: 0; }
.af-branch { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.af-table { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(4, auto); gap: 4px; }
.af-table li { margin: 0 !important; background: var(--s2); border: 1px solid var(--line); padding: 4px 6px; text-align: center; font-size: var(--fs-small) !important; }
.af-table li span { display: block; font: 700 var(--fs-body)/1.2 var(--font-display); color: var(--gig); }
.af-end { border-color: var(--line-2); }
.af-here { display: none; font: 700 var(--fs-micro)/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 6px; background: var(--you); color: var(--on-accent); }
.af-step.here .af-here { display: inline-block; }
.af-step.here { border-color: var(--you); }
.af-example { margin-top: 18px; font-size: var(--fs-body); color: var(--tx-2); }
.af-example summary { cursor: pointer; color: var(--tx); font-weight: 600; }
.af-example p { line-height: 1.5; }
@media (max-width: 600px) and (orientation: portrait), (max-width: 900px) and (min-height: 521px) {
  .af-reacts, .af-branch { grid-template-columns: 1fr; }
  .af-table { grid-template-columns: repeat(2, auto); }
}
.peek { position: fixed; z-index: 55; pointer-events: none; width: 280px; display: none; box-shadow: var(--elev-3); border-radius: 8px; }
.peek.on { display: block; }
.peek img { width: 100%; display: block; border-radius: 8px; }
@media (hover: none) { .peek { display: none !important; } }

/* ---- responsive -------------------------------------------------------------- */
@media (max-width: 1300px) {
  :root { --rail-w: 330px; }
  .lobby { grid-template-columns: minmax(0, 1fr) 300px; padding: var(--sp-4); }
  .opp-axes { grid-template-columns: 1fr; }
  .gighead { width: 128px; }
}
@media (max-width: 1100px) {
  .lobby { grid-template-columns: 1fr; }
  .fixer .zlabel { display: none; }
}
/* Narrow: the table on top, the command panel as a sheet at the bottom. The
   board's lanes scroll sideways on their own; the page never does. */
@media (max-width: 900px) {
  body { overflow: auto; }
  #app { height: auto; min-height: 100dvh; }
  .game { display: flex; flex-direction: column; }
  .table { overflow: visible; --cw: calc(clamp(50px, 13.5vw, 96px) * var(--scale)); padding: 8px 8px 0; }
  .rail { position: sticky; bottom: 0; z-index: 35; border-left: 0; border-top: 1px solid var(--line-2); max-height: 40dvh;
    box-shadow: 0 -12px 30px rgba(0,0,0,.6); }
  .rail.expanded { max-height: 86dvh; }
  .sheetbar { display: flex; justify-content: space-between; padding: 4px 8px 0; }
  .rail .coach { display: none; }
  .rail.expanded .coach { display: block; }
  .command { overflow: auto; }
  .rail .logbox { display: none; }
  .rail.showlog .logbox { display: flex; max-height: 40dvh; }
  .rail.showlog .command { display: none; }
  .command { max-height: none; flex: 1; border-bottom: 0; }
  .turnbar { min-height: 46px; padding: 8px 12px; }
  .turnbar .big { font-size: 15px; }
  .cmd-body { padding: 4px 12px 12px; }
  .lane { overflow-x: auto; overflow-y: visible; padding-bottom: 4px; }
  .zone.field { overflow: visible; }
  .zone.legends { padding-right: 8px; }
  .gighead { width: 96px; }
  .gigwin { white-space: normal; max-width: 96px; line-height: 1.2; }
  .gighead .score b { font-size: 18px; }
  .fixer { display: none; }
  .die { width: 34px; height: 34px; }
  .hand { overflow-x: auto; justify-content: flex-start; padding: 16px 4px 4px; }
  .hand .slot { margin-left: 4px !important; }
  .handzone { justify-content: flex-start; overflow: hidden; }
  .feed { top: 40%; }
  .in-body { grid-template-columns: 1fr; }
  .in-art { max-width: 300px; margin: 0 auto; }
  .matchup { grid-template-columns: 1fr; }
  .versus { justify-self: center; }
  .setrow { grid-template-columns: 1fr; }
  .setrow .desc { grid-column: 1; }
  .help dl { grid-template-columns: 1fr; }
  .res-card h2 { font-size: 32px; }
  .appbar { flex-wrap: wrap; row-gap: 4px; padding: 4px 10px; min-height: 0; }
  .matchbar { order: 5; width: 100%; }
  .brand small { display: none; }
  .appbar .ico { display: inline; }
  .appbar .lbl { display: none; }
  .appbar nav .btn { min-width: 34px; }
  .phasetext { font-size: var(--fs-micro); }
  .tray { position: fixed; left: 8px !important; right: 8px; bottom: 8px; top: auto !important; max-width: none; z-index: 80; }
}
@media (max-width: 480px) {
  .appbar nav .btn { padding: 3px 8px; }
  #tournamentLink { display: none; }
  .ctr { padding: 2px 6px; }
  .who .name { max-width: 16ch; }
  .lobby { padding: 10px; }
}
/* ---- phones (portrait, 600px and under), 2026-09-27 ----------------------------------------
 * The whole game on one screen, no page scroll: a one-row bar, the table, and the
 * command panel folded to an action bar (play.js "action bar") that opens by itself
 * for a choice that isn't on the table. Card width is worked out from the screen's
 * width *and* height. Legends sit on a half-size shelf of their own, on the far
 * side of their Units, so the field has the full width; a crowded field overlaps
 * to fit (table.js `fitRow`) rather than scrolling out of sight; the hand is a fan. Press and hold a
 * card to read it (table.js), since a phone has no hover and iOS no long-press
 * context menu. */
.actbar { display: none; }
.menu .phone-only { display: none; }
/* The compact bar: phones in portrait, and phones on their side (a short landscape). */
@media (max-width: 600px) and (orientation: portrait), (max-width: 900px) and (min-height: 521px), (orientation: landscape) and (max-height: 520px) {
  /* the bar: one row */
  .appbar { flex-wrap: nowrap; gap: 2px; min-height: 44px;
    padding: calc(3px + env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 3px max(8px, env(safe-area-inset-left)); }
  .ingame .brand { font-size: 0; gap: 0; }  /* the mark stays, the words go */
  .ingame .brand { padding: 8px 6px 8px 0; }
  .ingame .brand::before { width: 16px; height: 16px; }
  .ingame .matchbar { order: 0; width: auto; margin-left: 8px; }
  .ingame .phasetext { display: none; }
  #popupsBtn, #helpBtn, #tournamentLink { display: none !important; }
  .ingame #radioBtn .lbl { display: none; }
  .appbar nav { gap: 0; }
  .appbar nav .btn { min-width: 38px; min-height: 36px; padding: 3px 8px; }
  .menu .phone-only { display: block; }
  .menu a.phone-only { padding: 10px 12px; color: var(--tx); text-decoration: none; }
  .menu { right: 6px; left: auto; min-width: min(280px, calc(100vw - 12px)); }
}
@media (max-width: 600px) and (orientation: portrait), (max-width: 900px) and (min-height: 521px) {
  body { overflow: hidden; }
  #app { height: 100vh; height: 100dvh; min-height: 0; }
  :root { --actbar-h: 58px; }


  /* the table fills what's left */
  .game { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; }
  .table {
    flex: 1; min-height: 0; overflow: hidden; gap: 2px; justify-content: space-between;
    padding: 4px 8px calc(var(--actbar-h) + env(safe-area-inset-bottom) + 2px);
    /* Height: two sides of a half-size Legend shelf and a field (2 x 2.1 card widths)
     * and the hand (1.75) under ~285px of bars, info lines and the Gig band. */
    --cwb: calc(clamp(40px, min((100vw - 16px) / 5.2, (100dvh - 285px) / 6.1), 100px) * var(--scale));
    --cw: var(--cwb);
  }
  .sideinfo { min-height: 0; gap: 6px; flex-wrap: nowrap; }
  .who .name, .backs { display: none; }
  .side.active .who .tag { box-shadow: 0 0 0 2px var(--turn); }
  .who .tag { padding: 2px 5px; font-size: 9px; }
  .counters { gap: 3px; flex-wrap: nowrap; }
  .ctr { padding: 1px 5px; font-size: 9px; letter-spacing: .06em; gap: 3px; }
  .ctr b { font-size: 12px; }
  .lanewrap, .side.you .lanewrap { padding-top: 0; }
  .lanewrap .zlabel { display: none; }
  .lane { flex-direction: column; align-items: stretch; gap: 3px; min-height: 0; overflow: visible; padding-bottom: 0; }
  .zone.legends { --cw: calc(var(--cwb) * .5); gap: 4px; padding: 0; border-right: 0; justify-content: flex-start; }
  .side.you .zone.legends { order: 2; }  /* your shelf below your Units, the Rival's above theirs */
  .zone.legends .badge.fd { display: none; }  /* the back already says face-down */
  .zone.field { gap: 0; padding: 2px 0; min-height: calc(var(--cwb) * 1.4 + 4px); overflow: visible; }
  .zone.field > .slot + .slot { margin-left: calc(6px - var(--fov, 0px)); }
  .zone.field > .slot:hover, .zone.field > .slot.selected, .zone.field > .slot.target { z-index: 5; }
  .badge { font-size: 8px; padding: 2px 3px; }
  .slot.hasgear { margin-bottom: calc(var(--cw) * .28); }
  .gearrow { top: calc(100% - var(--cw) * .3); }

  /* the Gig band: one compact line a side */
  .midline { padding: 1px 0; }
  .gigrow { min-height: 32px; gap: 8px; padding: 2px 0; }
  .gigrow.rival { padding-bottom: 4px; } .gigrow.you { padding-top: 4px; }
  .gighead { width: 66px; gap: 1px; }
  .gighead .ttl { font-size: 8px; letter-spacing: .1em; }
  .gighead .score { gap: 5px; white-space: nowrap; }
  .gighead .score b { white-space: nowrap; }
  .gighead .score b { font-size: 16px; }
  .pips { display: none; }
  .gigwin { font-size: 8px; padding: 2px 3px; max-width: 66px; white-space: normal; line-height: 1.15; position: relative; z-index: 1; }
  .dice { gap: 4px; }
  .die { width: 28px; height: 28px; }
  .die b { font-size: 12px; }
  .die small { display: none; }  /* the shape says which die */
  .nogigs { font-size: var(--fs-micro); }

  /* the hand: a fan of larger cards */
  /* The hand takes the height a tall phone has spare, up to a third of the width a card. */
  .handzone { --hw: max(calc(var(--cwb) * 1.25), min((100vw - 16px) / 3.6, (100dvh - 295px - var(--cwb) * 4.35) / 1.45)); height: calc(var(--hw) * 1.4 + 10px); padding: 8px 0 0; justify-content: center; overflow: visible; }
  .handzone .zlabel { display: none; }
  .hand { overflow: visible; justify-content: center; padding: 0; }
  .hand .slot { margin-left: calc(var(--overlap, 0px) * -1) !important; }
  .hand .slot:first-child { margin-left: 0 !important; }
  .hand .slot.selected > .card { transform: translateY(-18px); }

  /* the command panel: an action bar, opening upward over the table */
  .rail { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40; max-height: none;
    padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line-2); box-shadow: 0 -10px 28px rgba(0, 0, 0, .55); }
  .rail:not(.expanded) > :not(.actbar) { display: none !important; }
  .rail.expanded { max-height: 78dvh; }
  .rail.expanded > .actbar { display: none; }
  .turnbar { display: none; }
  .actbar { display: flex; align-items: center; gap: 8px; min-height: var(--actbar-h); padding: 7px max(10px, env(safe-area-inset-right)) 7px max(12px, env(safe-area-inset-left)); }
  .actbar.live { box-shadow: inset 3px 0 0 var(--turn); }
  .actbar.react { box-shadow: inset 3px 0 0 var(--rival); background: linear-gradient(90deg, var(--rival-dim), transparent 60%); }
  .acttext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .acttext b { font: 700 13px/1.1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .actbar.live .acttext b { color: var(--turn); }
  .actbar.react .acttext b { color: var(--rival); }
  .acttext span { font-size: var(--fs-small); color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .actbar .btn { flex: 0 0 auto; min-height: 40px; }
  .actbar .actmore { min-width: 40px; font-size: 16px; }
  .actbar .thinking { flex: 1; min-width: 0; font-size: var(--fs-small); }
  .tray { bottom: calc(var(--actbar-h) + env(safe-area-inset-bottom) + 8px); }
  .feed { top: 34%; }

  /* touch: bigger targets in lists */
  .opt { min-height: 44px; }
  /* the deck picker takes the whole screen */
  #deckDialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  #deckDialog .sheet-body { max-height: calc(100dvh - 58px); padding: 10px; }
  .dp-pick { gap: 8px; padding: 6px 8px; }
  .dp-leg img, .dp-leg .noart { width: 24px; }
  .dp-chip { min-height: 34px; flex: 0 0 auto; }
  /* one row each, swiped sideways, so the decks start near the top */
  .dp-filters { flex-direction: column; align-items: stretch; gap: 6px; }
  .dp-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; padding: 0 10px; }
  .dp-chips::-webkit-scrollbar { display: none; }
}
@media (max-width: 360px) {
  .die { width: 24px; height: 24px; }
  .die b { font-size: 11px; }
  .dice { gap: 3px; }
}
/* ---- the lobby on a phone (portrait, or on its side), 2026-10-01 ----------------------------
 * Start match docks to the bottom edge with a line saying what it will start, so it
 * never sits a screen and a half below the choices. Each deck is a summary row: the
 * Legends as small portraits beside the name, RAM, legality and a sparkline of the
 * curve. Difficulty is one row of four, easiest to hardest; the styles a row of two.
 * Each card shows its title only, and the line under them says the rest.
 * Every control is at least 44px tall. */
@media (max-width: 600px) and (orientation: portrait), (max-width: 900px) and (min-height: 521px), (orientation: landscape) and (max-height: 520px) {
  .lobby { gap: 10px; padding: 10px max(10px, env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .lobby .btn { min-height: 44px; }
  .compose-body { padding: 10px; gap: 16px; }

  /* the matchup: two summary rows and the swap between them */
  .matchup { grid-template-columns: 1fr; gap: 6px; }
  .versus { flex-direction: row; justify-self: stretch; justify-content: center; gap: 12px; font-size: 13px; }
  .versus::before, .versus::after { content: ""; flex: 1; height: 1px; background: var(--line); }
  .deckslot { display: grid; grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "legs head" "legs meta" "legs curve" "acts acts"; gap: 6px 10px; padding: 10px 10px 10px 13px; }
  .ds-head { grid-area: head; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; }
  .ds-name { font-size: var(--fs-body); white-space: normal; line-height: 1.2;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .ds-legends { grid-area: legs; grid-template-columns: repeat(3, var(--leg-w, 34px)); gap: 3px; align-self: start; }
  .ds-meta { grid-area: meta; gap: 4px; }
  .ds-meta .ram, .ds-meta .chip { padding: 2px 5px; }
  .curve { grid-area: curve; height: 18px; gap: 2px; padding-top: 0; }
  .curve .bar span { display: none; }
  .curve .bar i { height: calc(var(--f, 0) * 18px); }
  .ds-actions { grid-area: acts; flex-wrap: nowrap; }
  .ds-actions .btn { flex: 1; }

  /* the opponent: a row of four rungs, a row of two styles */
  .opp-axes { gap: 12px; }
  #oppDifficulty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  #oppStyle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #oppStyle > .axis-title, #oppStyle .oppcard.legacy { grid-column: 1 / -1; margin-top: 4px !important; }
  .oppcard:not(.legacy) { grid-template-columns: 1fr; justify-items: center; text-align: center; min-height: 48px; padding: 6px 4px; }
  .oppcard:not(.legacy) .rank, .oppcard:not(.legacy) .tag { display: none; }
  .oppcard.legacy .rank { width: 22px; height: 22px; }
  .opp-rivals { margin-top: 12px; }
  #oppRivals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oppcard.faced { padding: 0 0 6px; overflow: hidden; }
  .oppcard.faced .face { display: block; width: 100%; height: auto; aspect-ratio: 1 / .7; object-position: 50% 30%; border: 0; margin-bottom: 4px; }
  @media (max-width: 600px) { .camp-fight:has(.face) { grid-template-columns: 56px minmax(0, 1fr); } }
  .opp-desc { min-height: 0; margin-top: 8px; }

  /* the seat, Advanced */
  .compose-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .compose-foot > .spacer { display: none; }
  .seat .seg { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .seg span { min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 6px 8px; }
  .advanced { max-width: none; }
  .advanced summary { min-height: 44px; display: flex; align-items: center; }
  .advanced summary::-webkit-details-marker { display: none; }

  /* Start, docked */
  .start-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; gap: 10px;
    padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: var(--s1); border-top: 1px solid var(--line-2); box-shadow: 0 -10px 28px rgba(0, 0, 0, .55); }
  .start-sum { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; margin: 0; font-size: var(--fs-small); color: var(--tx-2); }
  .start-sum span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .start-sum b { color: var(--tx); font-weight: 600; line-height: 1.25; overflow: hidden;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }  /* two long deck names fit */
  #startBtn { flex: 0 0 auto; min-height: 50px; padding: 10px 18px; }
}
@media (max-width: 360px) { .deckslot { --leg-w: 28px; } }
@media (orientation: landscape) and (max-height: 520px) {
  /* width to spare: the two decks side by side, as on a desktop */
  .matchup { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; }
  .versus { flex-direction: column; justify-self: center; }
  .versus::before, .versus::after { content: none; }
  .start-dock { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
}

/* ---- phones on their side (landscape, 520px tall and under), 2026-10-27 ------------------
 * Four columns, after a mobile mock-up of this game's table: the players (who, hand,
 * deck, trash, €$) on the left; the table, each side a shelf of Legends and Eddies
 * beside a row of Units, the turn line between them and the hand peeking up from the
 * bottom edge; the Gig band on the right (play.js placeMidline moves it there), the
 * Rival's Gigs above the action bar and yours below; and the app bar as an icon rail
 * on the far right, so the table has the full height. There is no command panel: the
 * actionable cards are outlined, and a choice that isn't on the table opens the panel
 * over the right-hand column by itself, as on a phone held upright. */
.tablemid, .zone.eddies, #logBtn { display: none; }
.gigrow.target { outline: 2px solid var(--turn); outline-offset: 2px; cursor: crosshair; }
@media (orientation: landscape) and (max-height: 520px) {
  body { overflow: hidden; }
  #app { height: 100vh; height: 100dvh; min-height: 0; }

  /* the app bar, turned into a rail down the right-hand edge */
  .ingame #app { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); }
  .ingame .appbar { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 2px;
    width: calc(46px + env(safe-area-inset-right)); min-height: 0; box-sizing: border-box; border-bottom: 0; border-left: 1px solid var(--line);
    padding: max(4px, env(safe-area-inset-top)) env(safe-area-inset-right) max(4px, env(safe-area-inset-bottom)) 0; background: var(--s0); }
  .ingame .brand { padding: 10px 0; }
  .ingame .brand small, .ingame .appbar .lbl, .ingame #menuBtn .lbl { display: none; }  /* a large phone is over 900px wide */
  .ingame .appbar .ico { display: inline; }
  .ingame .matchbar { display: none; }
  .ingame .conn { font-size: 0; gap: 0; padding: 8px 0; }
  .ingame .conn::before { width: 10px; height: 10px; }
  .ingame .appbar nav { flex-direction: column; gap: 2px; }
  .ingame .appbar nav .btn { width: 42px; min-width: 0; min-height: 42px; padding: 0; font-size: var(--fs-micro); justify-content: center; }
  .ingame #logBtn { display: inline-flex; }
  .ingame #logBtn[aria-pressed="true"] { color: var(--you); }
  .ingame #radioBtn .station-ico { margin-right: 0; }
  .ingame .menu { position: absolute; top: auto !important; bottom: 6px; right: calc(100% + 6px); left: auto; }
  .ingame .banner { grid-column: 1; grid-row: 1; }

  .game { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) var(--gigcol);
    min-height: 0; padding: 0; --gigcol: clamp(150px, 22vw, 196px); }

  /* the table: the players' column, and the two sides with the turn line between */
  .table {
    display: grid; overflow: visible; gap: 3px 10px; padding: 4px 8px 0 max(8px, env(safe-area-inset-left));
    --infow: clamp(92px, 14vw, 132px);
    grid-template-columns: var(--infow) minmax(0, 1fr);
    grid-template-rows: auto minmax(18px, 1fr) auto auto;
    grid-template-areas: "rinfo rlane" "mid mid" "yinfo ylane" "yinfo hand";
    /* Height: both sides' shelves (2 x .84) and fields (2 x 1.4), the peeking hand
     * (~.9) and room for Gear under a Unit (.28), under ~44px of turn line and gaps. */
    --cw: calc(clamp(34px, (100dvh - 44px) / 5.7, 110px) * var(--scale));
  }
  .side { display: contents; }
  #sideRival > .sideinfo { grid-area: rinfo; align-self: start; }
  #sideRival > .lanewrap { grid-area: rlane; }
  #sideYou > .sideinfo { grid-area: yinfo; align-self: end; padding-bottom: 6px; }
  #sideYou > .lanewrap { grid-area: ylane; }
  .tablemid { grid-area: mid; display: flex; align-items: center; gap: 8px; min-height: 18px; margin-left: calc(-1 * max(0px, env(safe-area-inset-left))); }
  .tablemid .tn { width: var(--infow); flex: none; display: flex; align-items: baseline; gap: 6px;
    font: 600 10px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); }
  .tablemid .tn b { font: 700 22px/1 var(--font-display); color: var(--tx); letter-spacing: 0; font-variant-numeric: tabular-nums; }
  .tablemid .rule { flex: 1; height: 1px; background: var(--line); }
  .tablemid .phase { flex: none; display: flex; align-items: baseline; gap: 6px; padding: 2px 10px; border: 1px solid var(--line-2);
    font: 700 11px/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-2); }
  .tablemid .phase small { font-size: 10px; font-weight: 600; color: var(--tx-3); }
  .tablemid.you .phase { border-color: var(--turn); color: var(--turn); background: var(--turn-dim); }
  .tablemid.rival .phase { border-color: var(--rival); color: var(--rival); background: var(--rival-dim); }

  /* a player: who, then the counters two to a row */
  .sideinfo { flex-direction: column; align-items: stretch; gap: 4px; min-height: 0; flex-wrap: nowrap; }
  .sideinfo .who { flex-direction: column; align-items: flex-start; gap: 3px; }
  .who .tag { padding: 2px 5px; font-size: 9px; }
  .side.active .who .tag { box-shadow: 0 0 0 2px var(--turn); }
  .who .name { max-width: 100%; font-size: var(--fs-micro); white-space: normal; line-height: 1.2;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .side.active .who .name::after { content: none; }
  .backs { display: none; }
  .counters { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-left: 0; }
  .ctr { justify-content: space-between; padding: 2px 5px; font-size: 9px; gap: 3px; }
  .ctr b { font-size: 12px; }
  .ctr.eddies { grid-column: 1 / -1; }

  /* a side: a shelf (Legends | Eddies) and the field, the shelves on the outside */
  .lanewrap, .side.you .lanewrap { padding-top: 0; }
  .lanewrap .zlabel { display: none; }
  .lane { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "legends eddies" "field field";
    gap: 3px 10px; align-items: center; min-height: 0; overflow: visible; padding-bottom: 0; }
  .side.you .lane { grid-template-areas: "field field" "legends eddies"; }
  .zone.legends { grid-area: legends; --cw0: var(--cw); gap: 4px; padding-right: 10px; }
  .zone.legends > .slot { --cw: calc(var(--cw0) * .6); }
  .zone.legends .badge.fd { display: none; }
  .zone.eddies { grid-area: eddies; display: flex; align-items: center; min-width: 0; }
  .ebacks { display: flex; align-items: center; }
  .ebacks i { flex: none; width: calc(var(--cw) * .42); height: calc(var(--cw) * .59); margin-left: calc(var(--cw) * -.14);
    background: var(--s3); border: 1px solid var(--line-2); border-radius: 2px;
    background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgba(233,196,110,.2) 3px 4px); }
  .ebacks i:first-child { margin-left: 0; }
  .ebacks i.spent { opacity: .35; }
  .zone.field { grid-area: field; justify-content: center; gap: 0; padding: 1px 0; overflow: visible; min-height: calc(var(--cw) * 1.4 + 2px); }
  .zone.field > .slot + .slot { margin-left: calc(8px - var(--fov, 0px)); }
  .zone.field > .slot:hover, .zone.field > .slot.selected, .zone.field > .slot.target { z-index: 5; }
  .badge { font-size: 8px; padding: 2px 3px; }
  .slot.hasgear { margin-bottom: calc(var(--cw) * .28); }
  .gearrow { top: calc(100% - var(--cw) * .3); }

  /* the hand: peeking from the bottom edge, lifting when touched */
  .handzone { grid-area: hand; --hw: calc(var(--cw) * 1.15); --peek: .55; height: calc(var(--hw) * 1.4 * var(--peek)); padding: 2px 0 0;
    justify-content: center; overflow: visible; }
  .handzone.opening { --peek: .8; }
  .handzone .zlabel { display: none; }
  .hand { overflow: visible; justify-content: center; padding: 0; }
  .hand .slot { margin-left: calc(var(--overlap, 0px) * -1) !important; }
  .hand .slot:first-child { margin-left: 0 !important; }
  .hand .slot.selected > .card { transform: translateY(calc(var(--hw) * -.45)); }
  .hand .slot > .card:focus-visible { transform: translateY(calc(var(--hw) * -.45)); }

  /* the right-hand column: Rival's Gigs, the action bar, your Gigs */
  .rail { position: relative; z-index: auto; display: flex; flex-direction: column; gap: 6px; max-height: none; min-height: 0; overflow: visible;
    padding: 6px 8px max(6px, env(safe-area-inset-bottom)); background: var(--s1); border-left: 1px solid var(--line); border-top: 0; box-shadow: none; }
  .rail.expanded { max-height: none; }  /* the narrow layout's 86dvh would cut the panel short */
  .rail > .midline { display: contents; }
  .rail > .midline::before { content: none; }
  .rail .gigrow { flex-direction: column; align-items: stretch; gap: 5px; min-height: 0; padding: 6px 7px; border: 1px solid var(--line-2); background: var(--s2); }
  .rail .gigrow.rival { order: 1; border-color: rgba(255, 160, 71, .5); }
  .rail .gigrow.you { order: 3; border-color: rgba(53, 215, 232, .5); }
  .gighead { width: auto; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 6px; }
  .gighead .ttl { font-size: 9px; letter-spacing: .12em; flex-basis: 100%; }
  .gighead .score { gap: 8px; white-space: nowrap; flex: 1; justify-content: space-between; }
  .gighead .score b { font-size: 18px; white-space: nowrap; }
  .pips { display: none; }
  .gigwin { font-size: 9px; padding: 2px 4px; flex-basis: 100%; white-space: normal; line-height: 1.15; }
  .rail .dice { gap: 4px; flex-wrap: wrap; }
  .rail .die { width: 26px; height: 26px; }
  .rail .die b { font-size: 11px; }
  .rail .die small { display: none; }
  .rail .fixer { display: flex; padding-left: 0; border-left: 0; gap: 3px; }
  .rail .fixer .zlabel { display: inline; font-size: 9px; }
  .rail .fixer .fd { width: 15px; height: 15px; }
  .rail .gigrow.rival .fixer { order: -1; }

  .rail .actbar { order: 2; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text more" "main main";
    align-content: center; gap: 6px; padding: 0; min-height: 0; }
  .acttext { grid-area: text; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .acttext b { font: 700 12px/1.1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .actbar.live .acttext b { color: var(--turn); }
  .actbar.react .acttext b { color: var(--rival); }
  .acttext span { font-size: var(--fs-micro); color: var(--tx-2); overflow: hidden;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .actbar .thinking { grid-area: text; font-size: var(--fs-micro); }
  .actbar .actmore { grid-area: more; align-self: start; min-width: 34px; min-height: 30px; }
  .actbar > .btn:not(.actmore) { grid-area: main; min-height: 52px; font-size: 16px; }
  .actbar > .btn.decide:not(.actmore) { clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%); }

  /* the command panel and the log open over that column, never beside it */
  .rail > .sheetbar, .rail > .turnbar, .rail > .command, .rail > .logbox { display: none; }
  .rail .coach { display: none; }
  .rail.expanded > .sheetbar, .rail.showlog > .sheetbar { display: flex; justify-content: space-between; gap: 6px;
    position: absolute; z-index: 46; top: 0; right: 0; width: min(380px, 50vw); box-sizing: border-box; padding: 6px 8px;
    background: var(--s2); border-left: 1px solid var(--turn); }
  .rail.expanded > .command, .rail.showlog > .logbox { display: flex; flex-direction: column;
    position: absolute; z-index: 45; top: 0; bottom: 0; right: 0; width: min(380px, 50vw); max-height: none; padding-top: 40px; overflow: auto;
    background: var(--s2); border-left: 1px solid var(--turn); border-bottom: 0; box-shadow: -14px 0 30px rgba(0, 0, 0, .5); }
  .rail.showlog > .logbox { z-index: 46; border-left-color: var(--line-2); }
  .rail.showlog > .sheetbar { z-index: 47; border-left-color: var(--line-2); }
  .rail.showlog.expanded > .command { display: none; }
  .cmd-head { padding: 6px 10px 2px; }
  .cmd-body { padding: 2px 10px 10px; gap: 6px; }
  .prompt { font-size: var(--fs-body); }
  .opt { min-height: 44px; }

  /* the tray: over the action bar and your Gigs, where the eye already is, so it
     covers neither the table nor the Rival's Gig area it may be pointing at */
  .tray { position: fixed; left: auto !important; top: auto !important; right: calc(52px + env(safe-area-inset-right));
    bottom: calc(6px + env(safe-area-inset-bottom)); width: calc(var(--gigcol, 170px) + 36px); max-width: none; max-height: 62dvh; overflow: auto; z-index: 80; }
  .tray > * { flex-shrink: 0; }
  .tray .opt { font-size: var(--fs-small); line-height: 1.25; }
  .feed { top: 42%; }
}
/* A small phone on its side (an iPhone SE is 667 wide): the columns give a little. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 760px) {
  .game { --gigcol: 146px; }
  .table { --infow: 88px; }
  .rail .die { width: 22px; height: 22px; }
  .rail .die b { font-size: 10px; }
}

.setrow .import-msg:empty { display: none; }  /* the radio key row, before any answer */

/* ---- the desktop table as a game table (2026-11-06) ---------------------------
 * After the motion mock-up the user approved: bigger cards and type, each side a
 * shelf (small Legends over the Eddies, drawn as card backs) beside a field with
 * a lane of its own, a larger Gig score and dice. The right-hand column keeps
 * the prompts, choices and the whole log. Desktop only: phones, the 900px sheet
 * layout and phones on their side are untouched.
 *
 * Card width: the height left after the chrome (app bar, two info bars, the Gig
 * band) holds two fields (2 x 1.4), the hand peeking (~1.12) and Gear under a
 * Unit (~.6); the width cap leaves the field room beside the shelf. Measured
 * against a turn-10 board at 1366x768, 1920x1080 and 2560x1440. */
.elbl { display: none; }
@media (min-width: 901px) and (min-height: 521px) {
  .table { --cw: calc(clamp(58px, min(8.6vw, (100dvh - 340px) / 4.5), 230px) * var(--scale)); padding: 8px 16px 0; }

  .lane { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "legends field" "eddies field";
    gap: 6px 0; align-items: start; }
  .zone.legends { grid-area: legends; --cw0: var(--cw); gap: 6px; padding-right: 16px; border-right: 0; }
  .zone.legends > .slot { --cw: calc(var(--cw0) * .66); }
  .zone.eddies { grid-area: eddies; display: flex; align-items: center; gap: 10px; padding-right: 16px; min-width: 0;
    min-height: calc(var(--cw) * .48); }
  .ebacks { display: flex; align-items: center; }
  /* each Eddie its own back: ready ones gold-edged, spent ones turned and dark */
  .ebacks { gap: calc(var(--cw) * .05); }
  .ebacks i { flex: none; width: calc(var(--cw) * .3); height: calc(var(--cw) * .42); border-radius: 2px; box-shadow: var(--elev-1);
    border: 1px solid rgba(233, 196, 110, .55);
    background: radial-gradient(circle at 50% 50%, rgba(233,196,110,.35) 0 18%, transparent 19%),
                repeating-linear-gradient(135deg, transparent 0 4px, rgba(233,196,110,.16) 4px 5px), #1a1d24;
    transition: opacity var(--t-std) var(--ease), transform var(--t-std) var(--ease); }
  .ebacks i.spent { opacity: .6; transform: rotate(90deg) scale(.8); border-color: var(--line-2);
    background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,.05) 4px 5px), #12151b; }
  .elbl { display: inline-flex; align-items: baseline; gap: 5px; font: 600 11px/1 var(--font-display); letter-spacing: .14em;
    text-transform: uppercase; color: var(--tx-3); white-space: nowrap; }
  .elbl b { font: 700 var(--fs-lead)/1 var(--font-display); color: var(--gig); letter-spacing: .02em; }
  .zone.field { grid-area: field; align-self: stretch; padding: 6px 12px; gap: 10px;
    border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, .014); }
  .side.active .zone.field { border-color: var(--line-2); }

  /* the hand always peeks up from the bottom edge, rising on hover, focus or selection */
  .handzone { --peek: .74; }
  .handzone.opening { --peek: 1; }
  .hand .slot:hover > .card, .hand .slot > .card:focus-visible { transform: translateY(calc(var(--hw) * -.4)); }
  .hand .slot.selected > .card { transform: translateY(calc(var(--hw) * -.4 - 8px)); }

  /* the Gig band: the score is the race, so it reads first */
  .gigrow { min-height: 54px; gap: 16px; padding: 2px 0; }
  .gigrow.rival { padding-bottom: 5px; } .gigrow.you { padding-top: 5px; }
  /* title and score on one line, the pips under them: two lines, not four */
  .gighead { width: 200px; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; }
  .gighead .pips { flex-basis: 100%; }
  .gighead .ttl { font-size: 11px; }
  .gighead .score b { font-size: 30px; }
  .gighead .score b small { font-size: 14px; }
  .sc { font-size: var(--fs-lead); }
  .pips i { width: 15px; height: 5px; }
  .dice { gap: 12px; }
  .die { width: 46px; height: 46px; }
  .die b { font-size: 18px; }
  .die small { font-size: 10px; bottom: -11px; }
  /* one row per side: a ninth Gig shrinks the dice instead of wrapping into the other lane */
  .dice { flex-wrap: nowrap; }
  .dice.many { gap: 7px; } .dice.many .die { width: 36px; height: 36px; } .dice.many .die b { font-size: 15px; }
  .dice.lots { gap: 4px; } .dice.lots .die { width: 28px; height: 28px; } .dice.lots .die b { font-size: 12px; }
  .dice.many .die small, .dice.lots .die small { font-size: 9px; bottom: -10px; }
  .fixer .fd { width: 26px; height: 26px; }

  /* type a size up across the table and the log */
  .zlabel { font-size: 11px; }
  .who .name { font-size: var(--fs-body); }
  .ctr { font-size: 11px; padding: 4px 9px; }
  .ctr b { font-size: var(--fs-lead); }
  .log { font-size: var(--fs-body); }

  /* the turn timeline: the last three turns as tiles, above the full log */
  .timeline { display: flex; flex-direction: column; gap: 6px; padding: 8px 16px 10px; border-bottom: 1px solid var(--line);
    max-height: min(34dvh, 300px); overflow: auto; flex: none; }
  .tl-empty { margin: 0; color: var(--tx-3); font-size: var(--fs-small); }
  .tl-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: start; }
  .tl-turn { display: flex; flex-direction: column; font: 600 var(--fs-micro)/1.2 var(--font-display); letter-spacing: .12em;
    text-transform: uppercase; color: var(--tx-3); padding-top: 4px; }
  .tl-turn b { font-size: var(--fs-lead); letter-spacing: 0; }
  .tl-row.you .tl-turn { color: var(--you); } .tl-row.rival .tl-turn { color: var(--rival); }
  .tl-items { display: flex; flex-wrap: wrap; gap: 5px; min-height: 30px; }
  .tl-row:last-child .tl-items:empty::after { content: "…"; color: var(--tx-3); align-self: center; }
  .tl-item { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px 3px 3px; font: inherit; color: var(--tx-2);
    background: var(--s2); border: 1px solid var(--line); border-left: 3px solid var(--rival); border-radius: var(--radius); cursor: pointer; }
  .tl-item.you { border-left-color: var(--you); }
  .tl-item:hover, .tl-item:focus-visible { border-color: var(--line-2); color: var(--tx); }
  .tl-card { position: relative; flex: none; width: 30px; height: 42px; border-radius: 2px; overflow: hidden; background: var(--s3); }
  .tl-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tl-card.target { width: 24px; height: 34px; }
  .tl-back { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 3px, rgba(255,255,255,.07) 3px 4px); }
  /* defeated: dark, struck through */
  .tl-card.dead img { filter: grayscale(1) brightness(.45); }
  .tl-card.dead::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--danger, #ff4d5e) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)); }
  .tl-verb { font: 600 var(--fs-micro)/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
  .tl-out { display: inline-flex; align-items: center; gap: 4px; }
  .tl-out:not(:empty)::before { content: "→"; color: var(--tx-3); }
  .tl-gigs, .tl-tag { font: 600 var(--fs-micro)/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--gig); }
  .tl-tag.block { color: var(--tx-2); }
  .tl-die { width: 26px; height: 26px; }
  .tl-die b { font-size: 11px; }
  /* a short screen keeps the log first: the timeline takes at most ~2 rows and scrolls */
  @media (max-height: 900px) {
    .timeline { max-height: 128px; padding: 6px 16px; gap: 4px; }
    .tl-card { width: 24px; height: 34px; } .tl-card.target { width: 20px; height: 28px; }
    .tl-row { grid-template-columns: 58px minmax(0, 1fr); }
    .tl-turn { flex-direction: row; gap: 4px; align-items: baseline; padding-top: 2px; } .tl-turn b { font-size: var(--fs-body); }
  }
  /* the hand as a fan (table.js fanHand): the cards turn about a point below
     them; .hover (from the pointer's place, not :hover) lifts one and straightens it */
  .hand.fan .slot > .card, .hand.fan .slot:hover > .card {
    transform: translate(var(--px, 0px), var(--fy, 0px)) rotate(var(--fr, 0deg)); transform-origin: 50% 140%;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
  .hand.fan .slot.hover > .card, .hand.fan .slot.selected > .card, .hand.fan .slot > .card:focus-visible {
    transform: translate(var(--px, 0px), calc(var(--hw) * -.42)) scale(1.1); }
  .hand.fan .slot:hover { z-index: auto; }
  .hand.fan .slot.hover, .hand.fan .slot.selected, .hand.fan .slot:focus-within { z-index: 6; }
  /* Gear tucks over its Unit's foot and takes no room in the row: a margin for
     it made the lane taller, and the hand sank 31-53px below the screen's edge
     whenever a Unit was equipped (user report, 2026-11-06). */
  .slot.hasgear { margin-bottom: 0; }
  .gearrow, .slot.spent .gearrow { top: calc(100% - var(--cw) * .44); }
  .gearrow > .slot { box-shadow: 0 -2px 8px rgba(0, 0, 0, .55), -3px 0 6px rgba(0, 0, 0, .45); }
  /* The playmat (mat.js): two canvases under everything on the table, which
     takes its own stacking context so they paint above its background and below
     every card. With the mat on, its frames and label tabs stand in for the
     zones' own borders and labels. */
  body.mat .table { isolation: isolate; }
  .matlayer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
  .matlayer.light { mix-blend-mode: screen; }
  body.mat .zone.field, body.mat .side.active .zone.field { border-color: transparent; background: transparent; }
  body.mat .midline { border-color: transparent; }
  body.mat .midline::before { display: none; }
  body.mat .lane .zlabel, body.mat #handZone > .zlabel { visibility: hidden; }
  #matGloom { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
    background: radial-gradient(ellipse at 50% 45%, rgba(60, 0, 8, .35), rgba(0, 0, 0, .75)); }
  /* the toys */
  .mattoy[hidden] { display: none; }
  .matdie { position: absolute; z-index: 4; width: 50px; height: 50px; cursor: grab; touch-action: none; }
  .matdie.held { cursor: grabbing; }
  .matdie svg { position: absolute; inset: 0; overflow: visible; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); }
  .matdie polygon { fill: #141820; stroke: var(--mat-toy, #fcee0a); stroke-width: 2.2; stroke-linejoin: round; }
  .matdie path { stroke: var(--mat-toy, #fcee0a); stroke-width: 1; opacity: .45; fill: none; }
  .matdie b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 16px/1 var(--font-display); color: var(--tx); pointer-events: none; }
  /* the other toys (mat.js KIT): a coin, a chip stack, a data shard */
  .mattoy.coin, .mattoy.chip, .mattoy.shard { position: absolute; z-index: 4; cursor: grab; touch-action: none; }
  .mattoy.held { cursor: grabbing; }
  .mattoy.coin { width: 48px; height: 48px; perspective: 300px; }
  .coin .disc { position: absolute; inset: 0; transform-style: preserve-3d; }
  .coin .cface { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; display: grid; place-items: center;
    background: radial-gradient(circle at 35% 30%, #fff6b0, #e2c043 40%, #8a6a12 100%); box-shadow: inset 0 0 0 3px #b8921f, inset 0 0 0 5px #f5dc6a, 0 6px 10px rgba(0,0,0,.55);
    font: 800 15px/1 var(--font-display); color: #4a3505; }
  .coin .cface.tails { transform: rotateX(180deg); background: radial-gradient(circle at 35% 30%, #e8f0ff, #9aa7bd 45%, #3d4656 100%);
    box-shadow: inset 0 0 0 3px #6c778a, inset 0 0 0 5px #c9d3e4, 0 6px 10px rgba(0,0,0,.55); color: #1b2230; }
  .coin .cface.tails svg { width: 24px; height: 24px; }
  .mattoy.chip { width: 44px; height: 44px; border-radius: 50%; }
  .chip .face { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(var(--c) 0 20deg, #f2f2f2 20deg 30deg), var(--c);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 55%, #000), 0 5px 8px rgba(0,0,0,.5); }
  .chip .face::after { content: "€$"; position: absolute; inset: 9px; border-radius: 50%; display: grid; place-items: center; background: var(--c);
    border: 1.5px dashed rgba(255,255,255,.6); font: 800 10px/1 var(--font-display); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.5); }
  .mattoy.shard { width: 62px; height: 62px; }
  .shard svg { position: absolute; inset: 0; overflow: visible; filter: drop-shadow(0 6px 8px rgba(0,0,0,.6)); }
  .shard .body { fill: #10141b; stroke: var(--mat-toy, #fcee0a); stroke-width: 2; }
  .shard .lobe { fill: #1b212c; stroke: var(--mat-toy, #fcee0a); stroke-width: 1.4; }
  .shard .core { fill: var(--mat-toy, #fcee0a); }
  .shard .glow { position: absolute; inset: -20px; border-radius: 50%; pointer-events: none; opacity: 0;
    background: radial-gradient(circle, color-mix(in srgb, var(--mat-toy, #fcee0a) 45%, transparent), transparent 65%); }
  .mattoyout, .mattag { position: absolute; z-index: 6; pointer-events: none; white-space: nowrap; background: rgba(8,9,12,.9); }
  .mattoyout { font: 700 11px var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--tx); padding: 3px 7px; border: 1px solid var(--line-2); }
  .mattag { padding: 6px 10px; border: 1px solid var(--mat-toy, #fcee0a); font: 600 11px/1.3 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-2); }
  .mattag b { display: block; color: var(--mat-toy, #fcee0a); font-weight: 700; font-size: 13px; }
  .matswitch { position: absolute; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; cursor: pointer;
    font: 700 10px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
  .matswitch:focus-visible { outline: 2px solid var(--you); outline-offset: 3px; }
  .matswitch .rocker { position: relative; width: 46px; height: 22px; border-radius: 3px; background: #0b0d11; border: 1px solid var(--line-2);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7); }
  .matswitch .rocker i { position: absolute; top: 2px; width: 12px; height: 16px; border-radius: 2px; background: linear-gradient(#3b4352, #232934);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 2px 3px rgba(0, 0, 0, .6); transition: left .14s cubic-bezier(.3, 1.6, .4, 1); }
  .matswitch .rocker i::after { content: ""; position: absolute; left: 4px; right: 4px; top: 3px; height: 2px; background: var(--mat-toy, #fcee0a);
    box-shadow: 0 0 6px var(--mat-toy, #fcee0a); }
  .matswitch .nm { min-width: 74px; text-align: left; }
}
/* off the desktop table, no mat and no toys */
@media not all and (min-width: 901px) and (min-height: 521px) { .mattoy, .matlayer, #matGloom, .mattag, .mattoyout { display: none !important; } }

/* ---- card tilt and foil (shine.js): only the picture tilts, never the card's box ---- */
body.tilting .card > img, body.tilting .card > .shine, body.tilting .in-art > img, body.tilting .in-art > .shine {
  transform: perspective(700px) rotateX(var(--tl-rx, 0deg)) rotateY(var(--tl-ry, 0deg)); }
.in-art { position: relative; }
.shine { display: none; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; }
body.tilting .shine { display: block; }
.card > .shine { border-radius: 4px; } .in-art > .shine { border-radius: 6px; }
.shine i { position: absolute; inset: 0; }
/* a soft band of light crossing with the pointer, and a hot spot under it */
.shine .sh { opacity: calc(var(--tl-on, 0) * .55); mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--tl-px, 50%) var(--tl-py, 50%), rgba(255,255,255,.55), rgba(255,255,255,0) 45%),
    linear-gradient(115deg, transparent 0%, transparent calc(var(--tl-px, 50%) - 26%), rgba(255,255,255,.85) var(--tl-px, 50%), transparent calc(var(--tl-px, 50%) + 26%), transparent 100%); }
/* the foil: a rainbow sliding the other way, strongest where the light falls */
.shine .fo, .shine .sp { display: none; }
.shine.foiled .fo { display: block; mix-blend-mode: color-dodge; opacity: calc(var(--tl-foil, 0) * .58 * var(--tl-on, 0));
  background: repeating-linear-gradient(115deg, rgba(255,0,140,.4) 0%, rgba(255,210,0,.4) 7%, rgba(0,255,170,.4) 14%, rgba(0,170,255,.4) 21%, rgba(190,0,255,.4) 28%, rgba(255,0,140,.4) 35%);
  background-size: 300% 300%; background-position: calc(100% - var(--tl-px, 50%)) calc(100% - var(--tl-py, 50%));
  -webkit-mask: radial-gradient(ellipse 70% 60% at var(--tl-px, 50%) var(--tl-py, 50%), #000 0%, rgba(0,0,0,.25) 70%, rgba(0,0,0,.1) 100%);
          mask: radial-gradient(ellipse 70% 60% at var(--tl-px, 50%) var(--tl-py, 50%), #000 0%, rgba(0,0,0,.25) 70%, rgba(0,0,0,.1) 100%); }
.shine.sparkly .sp { display: block; mix-blend-mode: color-dodge; opacity: calc(var(--tl-on, 0) * .9);
  background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px), radial-gradient(circle, #fff 0 .8px, transparent 1.3px);
  background-size: 37px 41px, 23px 29px; background-position: calc(var(--tl-px, 50%) * .6) calc(var(--tl-py, 50%) * .4), calc(var(--tl-px, 50%) * -.8) calc(var(--tl-py, 50%) * .9);
  -webkit-mask: radial-gradient(circle at var(--tl-px, 50%) var(--tl-py, 50%), #000, transparent 60%); mask: radial-gradient(circle at var(--tl-px, 50%) var(--tl-py, 50%), #000, transparent 60%); }

/* ---- the command deck: the lobby on a wide screen (2026-11-06) ------------------------
   From artifacts/lobby-mockup/. Two decks face off as fanned Legends over a slow
   circuit (lobby.js), the opponent as a threat ladder, your record and recordings
   in the side column. Only at LOBBY.DESK's size; every narrower layout above is
   untouched, which is why the new pieces carry .desk-only. */
.desk-only { display: none; }
@media (min-width: 1200px) and (min-height: 640px) {
  .desk-only { display: revert; }
  .netstat { display: flex; align-items: center; gap: 8px; font: 600 11px var(--font-display); letter-spacing: .16em; color: var(--tx-3); white-space: nowrap; }
  .netstat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: lb-blink 2.4s infinite; }
  .netstat.down::before { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
  body.ingame .netstat { display: none; }
  @keyframes lb-blink { 50% { opacity: .35; } }

  /* the room */
  .lobby-bg { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; }
  .lobby[hidden] .lobby-bg { display: none; }
  .lobby-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .lobby-bg::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0,0,0,.65) 100%); }
  .lobby-bg .ghost { position: absolute; top: 0; bottom: 0; width: 44vw; background-size: 190% auto; background-position: 50% 34%; opacity: .16;
    filter: grayscale(1) contrast(1.15) brightness(.55) blur(3px); mix-blend-mode: screen; transition: opacity .9s; }
  .lobby-bg .ghost.you { left: 0; -webkit-mask: linear-gradient(90deg, #000, transparent 92%); mask: linear-gradient(90deg, #000, transparent 92%); }
  .lobby-bg .ghost.rival { right: 0; -webkit-mask: linear-gradient(270deg, #000, transparent 92%); mask: linear-gradient(270deg, #000, transparent 92%); }
  .lobby-bg .ghost::after { content: ""; position: absolute; inset: 0; mix-blend-mode: multiply; }
  .lobby-bg .ghost.you::after { background: var(--you); } .lobby-bg .ghost.rival::after { background: var(--rival); }
  .lobby-bg.flat .ghost { opacity: 0; }

  .lobby { position: relative; max-width: 1760px; padding: 20px 28px 16px; gap: 0 22px; overflow: auto;
    grid-template-columns: minmax(0, 1fr) 430px; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "compose cont" "compose side"; align-content: stretch; }
  .lobby > :not(.lobby-bg) { position: relative; z-index: 1; }
  .lobby > #continueBox { grid-area: cont; margin-bottom: 14px; }
  .lobby > .compose { grid-area: compose; min-height: 600px; }
  .lobby > .lobby-side { grid-area: side; min-height: 0; }

  /* panels: graphite, a cut corner, an accent tick */
  .lobby .plate, .lobby .deckslot { position: relative; border: 1px solid var(--line); border-radius: 0;
    background: linear-gradient(180deg, rgba(21,25,32,.86), rgba(14,17,22,.86)); backdrop-filter: blur(3px);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
  .lobby .plate::before, .lobby .deckslot::before { content: ""; position: absolute; left: 0; top: 0; bottom: auto; width: 60px; height: 2px; background: var(--acc, var(--you)); }
  .lobby .plate > header { min-height: 0; border: 0; padding: 14px 16px 0; }
  .lobby .plate > header h2 { font: 700 12px/1 var(--font-display); letter-spacing: .28em; color: var(--tx-3); display: flex; align-items: center; gap: 10px; }
  .lobby .btn { border-radius: 0; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    font: 700 12px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; }

  /* the composer: no panel of its own, a title over the stage */
  .lobby > .compose { background: none; border: 0; clip-path: none; backdrop-filter: none; display: flex; flex-direction: column; }
  .lobby > .compose::before { display: none; }
  .compose > header { padding: 0 0 14px !important; align-items: flex-end !important; }
  .compose > header h2 { font: 800 34px/1 var(--font-display) !important; letter-spacing: .08em !important; color: var(--tx) !important; }
  .compose > header h2 span { color: var(--you); }
  .compose > header .btn { clip-path: none; color: var(--tx-2); }
  .compose-body { padding: 0; gap: 14px; flex: 1; min-height: 0; }
  .matchup { flex: 1 1 0; min-height: 300px; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr); gap: 0; }

  /* a dossier */
  .deckslot { --acc: var(--you); padding: 18px 22px 16px; gap: 8px 14px; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "head head" "sub sub" "legs legs" "meta curve" "act curve"; }
  .deckslot[data-side=rival] { --acc: var(--rival); }
  .deckslot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%); }
  .deckslot > * { position: relative; z-index: 1; }
  .ds-head { grid-area: head; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 10px; }
  .ds-side { padding: 4px 8px; background: var(--acc); color: var(--on-accent) !important; font: 700 12px/1 var(--font-display); letter-spacing: .22em;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
  .ds-rec { grid-column: 3; grid-row: 1; font: 700 12px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-2); white-space: nowrap; }
  .ds-rec em { font-style: normal; color: var(--tx); font-size: 15px; letter-spacing: .04em; }
  .ds-name { grid-column: 1 / -1; font: 800 30px/1.05 var(--font-display); letter-spacing: .02em; margin-top: 4px; }
  .ds-sub { grid-area: sub; font: 600 12px var(--font-display); letter-spacing: .18em; color: var(--tx-3); text-transform: uppercase; }
  /* the three Legends, fanned like a hand */
  .ds-legends { grid-area: legs; display: block; position: relative; min-height: 120px; container-type: size; }
  .ds-legends button { --w: min(30cqw, 86cqh * 63 / 88, 215px); position: absolute; top: 50%; width: var(--w); margin-top: calc(var(--w) * -88 / 63 / 2);
    border-radius: 7px; overflow: hidden; cursor: zoom-in; transform-origin: 50% 120%;
    box-shadow: 0 18px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); transition: transform .35s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s; }
  .ds-legends button img, .ds-legends button .noart { width: 100%; aspect-ratio: 63 / 88; border-radius: 0; }
  .ds-legends button:nth-child(1) { left: calc(50% - 1.32 * var(--w)); transform: rotate(-9deg) translateY(10px); }
  .ds-legends button:nth-child(2) { left: calc(50% - .5 * var(--w)); transform: translateY(-6px); z-index: 2; }
  .ds-legends button:nth-child(3) { left: calc(50% + .32 * var(--w)); transform: rotate(9deg) translateY(10px); }
  .ds-legends button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 60%);
    background-size: 250% 100%; background-position: 120% 0; transition: background-position .6s; }
  .ds-legends button:hover, .ds-legends button:focus-visible { z-index: 5; transform: translateY(-22px) scale(1.08);
    box-shadow: 0 30px 40px rgba(0,0,0,.7), 0 0 0 2px var(--acc), 0 0 28px color-mix(in srgb, var(--acc) 50%, transparent); }
  .ds-legends button:hover::after { background-position: -20% 0; }
  .ds-legends.deal button { animation: lb-deal .6s cubic-bezier(.2,.9,.3,1.1) backwards; }
  .ds-legends.deal button:nth-child(2) { animation-delay: .07s; } .ds-legends.deal button:nth-child(3) { animation-delay: .14s; }
  @keyframes lb-deal { from { opacity: 0; translate: 0 60px; filter: brightness(2.5); } }
  .ds-meta { grid-area: meta; align-self: end; gap: 6px 10px; }
  .ds-meta .ram { gap: 6px; padding: 4px 8px 4px 6px; border-radius: 0; font: 700 12px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
    border-color: color-mix(in srgb, currentColor 45%, transparent); background: color-mix(in srgb, currentColor 10%, transparent);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
  .ds-meta .ram::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); background: currentColor; box-shadow: 0 0 6px currentColor; }
  .ds-meta .chip { border: 0; padding: 0; font: 600 12px var(--font-display); letter-spacing: .14em; color: var(--tx-2); text-transform: uppercase; }
  .ds-meta .legal { font: 600 12px var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
  .deckslot .curve { grid-area: curve; align-self: end; height: 48px; gap: 3px; }
  .deckslot .curve .bar { flex: none; width: 12px; }
  .deckslot .curve .bar i { background: linear-gradient(180deg, var(--acc), color-mix(in srgb, var(--acc) 30%, transparent)) !important; height: calc(var(--f, 0) * 32px); }
  .ds-actions { grid-area: act; }
  .ds-actions .btn { min-height: 0; padding: 9px 14px; border: 1px solid var(--line-2); background: rgba(28,33,43,.7); }
  .ds-actions .btn:hover { border-color: var(--acc); color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, transparent); }
  .ds-actions .btn.ghost { border-color: transparent; background: none; color: var(--tx-2); }

  /* VS */
  .versus { align-self: stretch; justify-content: center; gap: 14px; position: relative; }
  .versus::before { content: ""; position: absolute; top: 6%; bottom: 6%; left: 50%; width: 2px; background: linear-gradient(180deg, transparent, var(--you) 30%, var(--rival) 70%, transparent);
    transform: rotate(12deg); opacity: .6; }
  #vsMark { position: relative; font: italic 900 64px/1 var(--font-display); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.5px var(--tx);
    text-shadow: -3px 0 0 rgba(53,215,232,.55), 3px 0 0 rgba(255,160,71,.55); }
  #vsMark.glitch { animation: lb-glitch .35s steps(2) 1; }
  @keyframes lb-glitch { 25% { transform: translate(-4px, 2px) skewX(10deg); } 50% { transform: translate(3px, -2px); clip-path: inset(20% 0 40% 0); } 75% { transform: translate(-2px, 0) skewX(-8deg); } }
  #swapBtn { position: relative; width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; clip-path: none; border: 1px solid var(--line-2); background: var(--s2);
    display: grid; place-items: center; font-size: 0; color: var(--tx-2); transition: transform .5s cubic-bezier(.3,1.4,.4,1), color .2s, border-color .2s; }
  #swapBtn span { font-size: 20px; letter-spacing: 0; }
  #swapBtn:hover { color: var(--turn); border-color: var(--turn); }
  #swapBtn.spun { transform: rotate(180deg); }
  #swapBtn::after { content: "SWAP"; position: absolute; top: calc(100% + 8px); font: 600 10px var(--font-display); letter-spacing: .2em; color: var(--tx-3); }

  /* the opponent: a threat ladder */
  .opp { --acc: var(--rival); position: relative; flex: none; padding: 16px 22px 14px; border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(21,25,32,.86), rgba(14,17,22,.86)); backdrop-filter: blur(3px);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
  .opp::before { content: ""; position: absolute; left: 0; top: 0; width: 60px; height: 2px; background: var(--rival); }
  .opp legend { float: left; width: 100%; margin-bottom: 10px; font: 700 12px/1 var(--font-display); letter-spacing: .28em; color: var(--tx-3); }
  .opp-axes { clear: both; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 10px 28px; }
  .opp-axis { min-width: 0; }
  .axis-title { font: 700 12px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--tx-2); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .axis-title .faint { font: 500 13px var(--font-ui); letter-spacing: .02em; text-transform: none; }
  #oppDifficulty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  #oppStyle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #oppStyle > .axis-title { display: none; }
  .opp-rivals { margin-top: 14px; }
  #oppRivals { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .oppcard.faced { padding: 0 0 10px; }
  .oppcard.faced .face { display: block; width: 100%; height: auto; aspect-ratio: 1 / .8; object-position: 50% 30%; border: 0; border-bottom: 1px solid var(--line); margin-bottom: 9px; }
  .oppcard.faced .pips, .oppcard.faced b, .oppcard.faced .tag { margin-left: 12px; margin-right: 12px; }
  .oppcard { display: block; position: relative; min-width: 0; padding: 10px 12px 11px; background: rgba(14,17,22,.6); border-color: var(--line);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); transition: border-color .15s, background .2s, transform .15s; }
  .oppcard:hover { transform: translateY(-1px); background: rgba(37,43,55,.6); }
  .oppcard .rank { display: none; }
  .oppcard .pips { display: flex; gap: 3px; margin-bottom: 8px; }
  .oppcard .pips i { width: 14px; height: 5px; background: var(--line-2); transform: skewX(-20deg); }
  .oppcard .pips i.on { background: var(--tx-3); }
  .oppcard.legacy::before { content: "LEGACY"; display: block; margin-bottom: 6px; font: 700 9px/1 var(--font-display); letter-spacing: .2em; color: var(--tx-3); }
  .oppcard b { display: block; font: 800 18px/1 var(--font-display); letter-spacing: .1em; }
  .oppcard span.tag { display: block; margin-top: 4px; font-size: 12px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .oppcard[aria-checked=true] { background: linear-gradient(180deg, var(--rival-dim), rgba(255,160,71,.03)); }
  .oppcard[aria-checked=true] b { color: var(--rival); }
  .oppcard[aria-checked=true] .pips i.on { background: var(--rival); box-shadow: 0 0 8px var(--rival); }
  .oppcard[aria-checked=true]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,160,71,.18), transparent);
    transform: translateX(-100%); animation: lb-sweep .7s ease-out 1; pointer-events: none; }
  @keyframes lb-sweep { to { transform: translateX(100%); } }
  .opp-desc { display: flex; align-items: baseline; gap: 12px; min-height: 0; margin-top: 10px; font-size: 13px; }
  .opp-desc .vsrec { margin-left: auto; font: 600 12px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); white-space: nowrap; }
  .opp-desc .vsrec em { font-style: normal; color: var(--tx); }

  /* the launch row */
  .compose-foot { align-items: center; gap: 18px; flex-wrap: nowrap; }
  .seat { display: flex; align-items: center; gap: 14px; }
  .seat legend { float: left; margin: 0; font: 700 11px var(--font-display); letter-spacing: .24em; color: var(--tx-3); }
  .seat .seg { border-color: var(--line); background: rgba(14,17,22,.7); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
  .seat .seg span { padding: 13px 16px; font: 700 12px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; border-color: var(--line); }
  .seat .seg input:checked + span { color: var(--you); background: var(--you-dim); box-shadow: inset 0 -2px 0 var(--you); }
  .advanced summary { font: 600 12px var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
  .advanced[open] { position: absolute; bottom: 74px; left: 0; z-index: 5; padding: 6px 16px 8px; background: var(--s2); border: 1px solid var(--line-2); max-width: 460px; }
  .start-dock { gap: 18px; }
  .start-sum { display: block; margin: 0; text-align: right; font: 600 12px/1.5 var(--font-display); letter-spacing: .12em; color: var(--tx-3); text-transform: uppercase; }
  .start-sum b { display: block; color: var(--tx); letter-spacing: .06em; }
  #startBtn { position: relative; overflow: hidden; height: 64px; padding: 0 64px 0 34px; border: 0; background: var(--you); color: var(--on-accent);
    font: 900 22px/1 var(--font-display); letter-spacing: .2em; white-space: nowrap;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); transition: filter .2s, transform .1s; }
  #startBtn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%);
    transform: translateX(-120%); animation: lb-charge 3.2s ease-in-out infinite; }
  #startBtn::after { content: "›››"; position: absolute; right: 26px; top: 50%; transform: translateY(-52%); font-size: 26px; letter-spacing: -.02em; opacity: .55; }
  @keyframes lb-charge { 60%, 100% { transform: translateX(120%); } }
  #startBtn:hover { filter: brightness(1.12) drop-shadow(0 0 18px rgba(53,215,232,.6)); }
  #startBtn:active { transform: translateY(1px) scale(.99); }
  #startBtn:disabled { filter: saturate(.4) brightness(.8); }
  .compose-body > .note { font-size: 12px; margin-top: -4px; }

  /* the side column */
  .lobby-side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 14px 10px; }
  .people-card, .record-card, .rec-card { grid-column: 1 / -1; }
  .record-card { display: block; padding-bottom: 14px; }
  .record-card header .small { font: 600 12px var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
  .rc-big { display: flex; align-items: baseline; gap: 12px; padding: 10px 16px 0; }
  .rc-wl { font: 800 44px/1 var(--font-display); }
  .rc-wl .w { color: var(--you); } .rc-wl .l { color: var(--tx-2); } .rc-wl small { font-size: 28px; color: var(--tx-3); margin: 0 3px; }
  .rc-pct { font: 700 15px var(--font-display); letter-spacing: .1em; color: var(--tx-2); }
  .rc-pct small { display: block; font: 600 11px var(--font-display); letter-spacing: .16em; color: var(--tx-3); text-transform: uppercase; }
  .rc-form { display: flex; gap: 3px; margin: 12px 16px 0; }
  .rc-form i { flex: 1; height: 16px; transition: transform .15s; }
  .rc-form i.w { background: var(--you); box-shadow: 0 0 6px rgba(53,215,232,.35); }
  .rc-form i.l { background: #4a2a31; box-shadow: inset 0 -3px 0 var(--danger); }
  .rc-form i:hover { transform: scaleY(1.4); }
  .rc-axis { display: flex; justify-content: space-between; margin: 5px 16px 0; font: 600 10px var(--font-display); letter-spacing: .18em; color: var(--tx-3); text-transform: uppercase; }
  .rec-card { display: flex; flex-direction: column; min-height: 0; }
  .rec-card header .btn { clip-path: none; color: var(--tx-2); }
  .rec-list { overflow: auto; min-height: 0; padding: 6px 8px 8px 16px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
  .recrow { display: grid; grid-template-columns: 4px 70px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 8px 8px 0;
    border-bottom: 1px solid rgba(39,45,57,.6); color: var(--tx); text-decoration: none; transition: background .15s; }
  .recrow:hover { background: rgba(37,43,55,.45); }
  .recrow .bar { align-self: stretch; background: var(--line-2); }
  .recrow.w .bar { background: var(--you); box-shadow: 0 0 8px var(--you); } .recrow.l .bar { background: var(--danger); }
  .recrow .res { font: 800 13px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); }
  .recrow.w .res { color: var(--you); } .recrow.l .res { color: var(--danger); }
  .recrow .res small { display: block; margin-top: 3px; font: 600 10px/1.4 var(--font-display); letter-spacing: .14em; color: var(--tx-3); }
  .recrow .m { min-width: 0; }
  .recrow .m b { display: block; font: 700 14px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .recrow .m b span { color: var(--tx-3); font-weight: 500; margin: 0 5px; }
  .recrow .m em { display: block; font-style: normal; font-size: 12px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .recrow .open { font: 700 11px var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
  .recrow:hover .open { color: var(--you); }
  /* continue: a live game of yours */
  #continueBox { --acc: var(--turn); }
  #continueBox header h2 { color: var(--turn); }
  #continueBox header h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 10px var(--danger); animation: lb-blink 1.2s infinite; }
  .continue-list { padding: 10px 16px 14px; gap: 8px; }
  .controw { display: flex; align-items: center; gap: 12px; color: var(--tx); text-decoration: none; }
  .controw .info { flex: 1; min-width: 0; }
  .controw .info b { display: block; font: 700 16px/1.15 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .controw .info span { font: 600 12px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
  .controw .btn { padding: 11px 16px; border: 1px solid var(--turn); color: var(--turn); }
  .controw:hover .btn { background: var(--turn-dim); }
  /* tournament and binder: art tiles */
  .tourney-card, .binder-card { height: 118px; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px 14px; overflow: hidden; }
  .tourney-card > header, .binder-card > header { padding: 0 !important; position: relative; z-index: 1; }
  .tourney-card > header h2, .binder-card > header h2 { font: 800 17px/1 var(--font-display) !important; letter-spacing: .14em !important; color: var(--tx) !important; }
  .tourney-card p, .binder-card p { position: relative; z-index: 1; margin: 4px 0 0; font-size: 12px; line-height: 1.3; color: var(--tx-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tile-art { display: block; position: absolute; inset: -10px; background-size: cover; background-position: center 25%; filter: grayscale(.6) brightness(.45); transition: transform .6s, filter .4s; }
  .tourney-card::after, .binder-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 15%, rgba(8,9,12,.92)); }
  .tourney-card:hover .tile-art, .binder-card:hover .tile-art { transform: scale(1.08); filter: grayscale(0) brightness(.55); }
  .tourney-card .btn, .binder-card .btn { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 10px 12px; clip-path: none; border: 0; background: none;
    display: flex; align-items: flex-start; justify-content: flex-end; font-size: 0; color: var(--tx-3); }
  .tourney-card .btn::after { content: "OPEN →"; font: 700 11px var(--font-display); letter-spacing: .16em; }
  .binder-card .btn::after { content: "OPEN ↗"; font: 700 11px var(--font-display); letter-spacing: .16em; }
  .tourney-card .btn:hover, .binder-card .btn:hover { color: var(--you); background: none; }
  .tourney-card::before { width: 7px !important; height: 7px !important; border-radius: 50%; top: 12px !important; left: 14px !important; z-index: 2; background: var(--turn) !important; box-shadow: 0 0 10px var(--turn); animation: lb-blink 2s infinite; }

  /* the deck picker, opened from a dossier: art tiles in a grid */
  #deckDialog.picking { width: min(1500px, 92vw); max-width: none; height: 86vh; max-height: none; }
  #deckDialog.picking[data-side=rival] { --pk: var(--rival); }
  #deckDialog.picking .sheet-body { display: flex; flex-direction: column; min-height: 0; height: calc(100% - 56px); }
  #deckDialog.picking .dp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; overflow: auto; min-height: 0; padding: 2px 6px 6px 2px; }
  #deckDialog.picking .dp-section { grid-column: 1 / -1; margin: 6px 0 -4px; }
  #deckDialog.picking .dp-row { position: relative; }
  #deckDialog.picking .dp-pick { position: relative; display: block; height: 150px; padding: 0; overflow: hidden; border: 1px solid var(--line); background: var(--s1);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); transition: border-color .15s, transform .15s; }
  #deckDialog.picking .dp-pick:hover { border-color: var(--pk, var(--you)); transform: translateY(-2px); }
  #deckDialog.picking .dp-pick[aria-pressed=true] { border-color: var(--pk, var(--you)); box-shadow: inset 0 0 0 1px var(--pk, var(--you)); }
  #deckDialog.picking .dp-leg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
  #deckDialog.picking .dp-leg img, #deckDialog.picking .dp-leg .noart { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; object-position: center 20%;
    filter: brightness(.6) saturate(.9); transition: filter .3s; }
  #deckDialog.picking .dp-pick:hover .dp-leg img { filter: brightness(.8) saturate(1.1); }
  #deckDialog.picking .dp-pick::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(8,9,12,.95) 85%); }
  #deckDialog.picking .dp-main { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 10px; }
  #deckDialog.picking .dp-main b { font: 800 17px/1.1 var(--font-display); letter-spacing: .03em; }
  #deckDialog.picking .dp-meta { color: var(--tx-2); }
  #deckDialog.picking .dp-pick > .legal { position: absolute; z-index: 1; top: 8px; left: 8px; padding: 2px 6px; background: rgba(8,9,12,.85); }
  #deckDialog.picking .dp-rec { position: absolute; z-index: 1; top: 8px; right: 8px; padding: 3px 6px; font: 700 10px var(--font-display); letter-spacing: .14em;
    background: rgba(8,9,12,.85); border: 1px solid rgba(53,215,232,.4); color: var(--you); }
  /* Your own deck's two buttons sit over the art, top right, clear of the name and meta. */
  #deckDialog.picking .dp-own { position: absolute; z-index: 2; top: 8px; right: 8px; flex-direction: row; }
  #deckDialog.picking .dp-own .btn { background: rgba(8,9,12,.85); }
  #deckDialog.picking .dp-own .dp-vis { color: var(--tx); }
  #deckDialog.picking .dp-row:has(.dp-own) .dp-rec { top: 44px; }

  /* Start: the shutters */
  .jack { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
  .jack .half { position: absolute; left: 0; right: 0; height: 50%; background: var(--s0); }
  .jack .half.t { top: 0; transform: translateY(-100%); border-bottom: 2px solid var(--you); box-shadow: 0 0 30px var(--you); }
  .jack .half.b { bottom: 0; transform: translateY(100%); border-top: 2px solid var(--rival); box-shadow: 0 0 30px var(--rival); }
  .jack .msg { position: absolute; z-index: 2; left: 0; right: 0; top: calc(50% - 92px); text-align: center; opacity: 0;
    font: 800 30px var(--font-display); letter-spacing: .4em; color: var(--tx); }
  .jack .msg small { display: block; margin-top: 8px; font: 600 13px var(--font-display); letter-spacing: .28em; color: var(--tx-3); white-space: pre; }

  @media (max-height: 820px) {
    .compose > header h2 { font-size: 28px !important; } .ds-name { font-size: 24px; } .deckslot { padding: 14px 18px 12px; gap: 6px 14px; }
    .opp { padding: 12px 18px 10px; } .oppcard { padding: 8px 10px 9px; } .oppcard b { font-size: 16px; } .oppcard .pips { margin-bottom: 6px; }
    #startBtn { height: 54px; font-size: 19px; } .compose-body > .note { display: none; } .lobby { padding: 14px 22px 10px; } .compose-body { gap: 10px; }
    .rc-wl { font-size: 36px; } .tourney-card, .binder-card { height: 96px; }
  }
  @media (max-width: 1500px) { .start-sum { display: none; } }
}
html[data-motion="reduced"] .lobby *, html[data-motion="reduced"] #jack * { animation: none !important; }

/* Games against people (play.js, renderPeople): invitations in, open games, yours out. */
.people-card > #peopleBody { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.people-card p { margin: 6px 0; font-size: var(--fs-small); }
.pp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pp-row .who { flex: 1 1 180px; min-width: 0; font-size: var(--fs-small); }
.pp-row .who small { color: var(--tx-3); font-size: var(--fs-micro); }
.pp-row .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-row.in .who b { color: var(--turn); }
.pp-form { display: flex; gap: 8px; margin-top: 4px; }
.pp-form input { flex: 1; min-width: 0; }
.controw .chip, .gamerow .chip { margin-left: 8px; vertical-align: middle; }
.turns-btn { white-space: nowrap; }
.rc-pvp { margin: 6px 14px 12px; }

/* Campaign (play.js, campaignDraw; cpsim.campaign). One sheet: the reward if
   one is waiting, the road, the deck. */
.campaign-open { border-color: var(--rival); color: var(--rival); }
.campaign-sheet { width: min(760px, 96vw); }
.campaign-sheet h3 { margin: 0 0 8px; font: 700 var(--fs-small)/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--tx-2); }
.campaign-sheet section { margin-bottom: 22px; }
.camp-lede { margin: 0 0 14px; font-size: var(--fs-lead); }
.camp-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.camp-path, .camp-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px; background: var(--s2);
  border: 1px solid var(--line); color: var(--tx); cursor: pointer; font: inherit; min-width: 0; }
.camp-path:hover, .camp-card:hover { border-color: var(--rival); background: var(--s3); }
.camp-path b, .camp-card b { font: 700 var(--fs-lead)/1.1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.camp-path .tag, .camp-card .txt { color: var(--tx-2); font-size: var(--fs-small); }
.camp-path .legs, .camp-card .meta { font: 600 11px/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); }
.camp-path q { margin-top: 4px; font-style: italic; color: var(--tx-2); font-size: var(--fs-small); }
.camp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.camp-card { border-top-width: 3px; }
.camp-card.c-red { border-top-color: #e5484d; } .camp-card.c-blue { border-top-color: #3e9bff; }
.camp-card.c-green { border-top-color: #3dd68c; } .camp-card.c-yellow { border-top-color: #f5d90a; }
.camp-offer { padding: 14px; border: 1px solid var(--rival); background: var(--rival-dim); }
.ash-says { margin: 8px 0 0; padding: 8px 12px; border-left: 2px solid var(--turn); color: var(--tx); font-size: var(--fs-small); }
.ash-says b { display: block; font: 700 10px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--turn); margin-bottom: 4px; }
.camp-road ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.camp-fight { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); background: var(--s2); }
.camp-fight .n { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line-2); font: 700 13px var(--font-display); color: var(--tx-3); }
.camp-fight .what b { display: block; font: 700 var(--fs-body)/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.camp-fight .tag, .camp-fight .after { display: block; color: var(--tx-3); font-size: var(--fs-small); }
.camp-fight .after { color: var(--tx-2); font-style: italic; margin-top: 4px; }
.camp-fight.next { border-color: var(--rival); }
.camp-fight.next .n { border-color: var(--rival); color: var(--rival); }
.camp-fight.beaten .n { color: var(--you); border-color: var(--you); }
.camp-fight.locked { opacity: .5; }
.camp-deck { border: 1px solid var(--line); background: var(--s2); padding: 10px 12px; }
.camp-deck summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.camp-deck summary b { font: 700 var(--fs-body)/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.camp-deck .tag { color: var(--tx-3); font-size: var(--fs-small); }
.camp-list { list-style: none; margin: 8px 0; padding: 0; columns: 2; column-gap: 20px; }
.camp-list li { display: grid; grid-template-columns: 18px 10px minmax(0, 1fr) 26px 30px 46px 30px; align-items: center; gap: 4px; padding: 2px 0; break-inside: avoid; font-size: var(--fs-small); }
.camp-list li.out .nm { color: var(--tx-3); }
.camp-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-list button.nm { all: unset; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 30px; line-height: 30px; }
.camp-list button.nm:hover, .camp-list button.nm:focus-visible { color: var(--you); text-decoration: underline; }
.camp-list button.nm:focus-visible { outline: 1px solid var(--you); outline-offset: 1px; }
.camp-list .ecost { text-align: center; font: 700 var(--fs-small)/1 var(--font-display); color: var(--tx-2); font-variant-numeric: tabular-nums; }
.camp-list .epow { text-align: right; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.camp-list .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.camp-group h4 { margin: 12px 0 0; padding-bottom: 4px; border-bottom: 1px solid var(--line); font: 700 var(--fs-micro)/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--tx-2); }
.camp-group h4 span { color: var(--tx-3); letter-spacing: 0; }
.camp-group .camp-list { margin-top: 4px; }
.camp-list .ct { text-align: center; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.camp-list .step { height: 30px; border: 1px solid var(--line-2); background: var(--s3); color: var(--tx); cursor: pointer; font: 700 15px/1 var(--font-ui); }
.camp-list .step:disabled { opacity: .3; cursor: default; }
.camp-save, .camp-foot { display: flex; gap: 10px; align-items: center; margin: 10px 0 0; flex-wrap: wrap; }
.camp-save .bad { color: var(--bad, #ff6b6b); font-weight: 700; }
.camp-save .good { color: var(--you); font-weight: 700; }
@media (max-width: 600px) {
  .camp-cards { grid-template-columns: 1fr; }
  .camp-list { columns: 1; }
  /* Two lines a card: the name gets the whole width, the counts sit under it. */
  .camp-list li { grid-template-columns: 18px 10px minmax(0, 1fr) 34px 46px 34px; row-gap: 0; padding: 4px 0; border-bottom: 1px solid var(--line); }
  .camp-list button.nm { grid-column: 3 / 7; white-space: normal; line-height: 1.25; min-height: 26px; display: flex; align-items: center; }
  .camp-list .epow { grid-row: 2; grid-column: 3; text-align: left; color: var(--tx-3); }
  .camp-list .epow:not(:empty)::before { content: "Power "; }
  .camp-list .step { grid-row: 2; height: 34px; }
  .camp-list .step.dn { grid-column: 4; }
  .camp-list .ct { grid-row: 2; grid-column: 5; }
  .camp-list .step.up { grid-column: 6; }
  .camp-fight { grid-template-columns: 26px minmax(0, 1fr); }
  .camp-fight > .btn { grid-column: 2; justify-self: start; }
}

/* Sim this matchup (play.js, renderSim). */
.sim-sheet { width: min(620px, 94vw); }
.sim-vs { margin: 0 0 12px; font-size: var(--fs-lead); }
.sim-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 14px; }
.sim-form select { max-width: 100%; }
.sim-form .formfield input { width: 80px; }
.sim-out { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.sim-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 2fr auto; gap: 10px; align-items: center; font-size: var(--fs-small); }
.sim-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-row .track { height: 10px; background: var(--line); position: relative; }
.sim-row .track i { position: absolute; inset: 0 auto 0 0; background: var(--you); }
.sim-row.b .track i { background: var(--rival, #f0883e); }
.sim-row .num { font-weight: 700; min-width: 56px; text-align: right; }
.sim-row .num small { color: var(--tx-3); font-weight: 500; }
.sim-progress { height: 3px; background: var(--line); } .sim-progress i { display: block; height: 100%; background: var(--turn); transition: width .3s; }
.sim-dots { display: flex; flex-wrap: wrap; gap: 3px; }
.sim-dots i { width: 14px; height: 14px; } .sim-dots i.a { background: var(--you); } .sim-dots i.b { background: var(--rival, #f0883e); } .sim-dots i.d { background: var(--tx-3); }

/* Signed out (play.js, renderMe): the lobby shows what's here, not the controls. */
body:not(.signed-out) .signin-only { display: none !important; }
body.signed-out .signin-only { display: inline-flex; }
body.signed-out #startBtn, body.signed-out #importOpen, body.signed-out #simOpen,
body.signed-out .ds-actions, body.signed-out #swapBtn, body.signed-out .advanced { display: none !important; }

/* Paying by hand (play.js, applyMarks): your Eddies area is a target, each picked Eddie lit. */
.zone.eddies.target { cursor: pointer; outline: 2px solid var(--you); outline-offset: 3px; border-radius: 4px; }
.zone.eddies.target::before { content: "CHOOSE"; position: absolute; transform: translateY(-140%); background: var(--you); color: #000;
  font: 700 10px var(--font-display); letter-spacing: .14em; padding: 1px 6px; }
.zone.eddies { position: relative; }
.ebacks i.picked { box-shadow: 0 0 0 2px var(--turn); opacity: 1; }

/* ---- the guided first game (play.js, LESSON) -------------------------------------
   Ash's panel floats bottom-left of the table. Narration dims the page and makes
   it inert except the panel; the ring marks what is being talked about. A move
   step leaves the page live, ringed, with the lesson's move the only one open. */
/* Ash on a call (2026-11-08, the "Ash on the Line" mock-up): a call window with
   her video feed on the left. data-state: talk (her line is playing; the clip
   runs, the ring and level meter light), idle (said, text on screen), wait (she
   is holding for your move or the Rival's turn), muted (voice off). */
.lesson { position: fixed; z-index: 60; left: 16px; bottom: 16px; width: min(540px, calc(100vw - 32px));
  display: grid; grid-template-columns: 168px 1fr; grid-template-rows: auto 1fr auto; column-gap: 14px;
  background: linear-gradient(180deg, rgba(18, 21, 28, .97), rgba(12, 14, 19, .97));
  border: 1px solid rgba(53, 215, 232, .45);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.lesson[hidden] { display: none; }
.call-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line);
  font: 700 11px/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--tx-3); }
.call-head .spacer, .lesson-head .spacer, .lesson-foot .spacer { flex: 1; }
.call-live { display: inline-flex; align-items: center; gap: 6px; color: var(--danger); }
.call-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); animation: call-blink 1.6s steps(2, start) infinite; }
.lesson[data-state="wait"] .call-live { color: var(--tx-3); }
.lesson[data-state="wait"] .call-live i { background: var(--tx-3); animation: none; }
.lesson-who { color: var(--turn); }
.call-timer { font: 500 11px/1 var(--font-mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.call-bars { display: inline-flex; align-items: end; gap: 2px; height: 11px; }
.call-bars b { width: 3px; background: var(--you); opacity: .9; }
.call-bars b:nth-child(1) { height: 4px; } .call-bars b:nth-child(2) { height: 7px; } .call-bars b:nth-child(3), .call-bars b:nth-child(4) { height: 11px; }
.call-bars b:nth-child(4) { opacity: .25; }
.lesson-feed { grid-row: 2 / span 2; position: relative; margin: 12px 0 12px 12px; width: 156px; height: 156px; overflow: hidden;
  background: #050608; border: 1px solid rgba(53, 215, 232, .35); }
.lesson-face, .lesson-feed video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lesson-feed video { opacity: 0; transition: opacity .35s; }
.lesson-feed video.on { opacity: 1; }
.lesson-feed::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--ok); opacity: 0; transition: opacity .25s; pointer-events: none; }
.lesson[data-state="talk"] .lesson-feed::after { opacity: 1; }
.lesson-feed .corner { position: absolute; z-index: 1; width: 10px; height: 10px; border-color: var(--you); border-style: solid; }
.lesson-feed .corner.tl { top: 3px; left: 3px; border-width: 2px 0 0 2px; }
.lesson-feed .corner.br { bottom: 3px; right: 3px; border-width: 0 2px 2px 0; }
.lesson-body { padding: 12px 16px 0 0; min-width: 0; }
.lesson-head { display: flex; align-items: baseline; gap: 10px; }
.lesson-title { font: 700 16px/1.1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--tx); }
.lesson-place { font: 600 11px var(--font-display); letter-spacing: .1em; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.lesson-say { margin: 8px 0 0; font-size: var(--fs-lead); line-height: 1.45; color: var(--tx); text-wrap: pretty; }
.lesson-say:empty { display: none; }
.call-wave { display: flex; align-items: center; gap: 3px; height: 16px; margin-top: 10px; visibility: hidden; }
.call-wave i { width: 3px; height: 4px; background: var(--ok); opacity: .9; animation: call-wave .9s ease-in-out infinite; }
.call-wave i:nth-child(2n) { animation-delay: -.3s; } .call-wave i:nth-child(3n) { animation-delay: -.55s; } .call-wave i:nth-child(5n) { animation-delay: -.15s; }
.lesson[data-state="talk"] .call-wave { visibility: visible; }
.lesson-foot { grid-column: 2; display: flex; align-items: center; gap: 8px; padding: 12px 16px 12px 0; flex-wrap: wrap; }
.call-ctl { width: 40px; height: 34px; display: grid; place-items: center; background: var(--s2); border: 1px solid var(--line); color: var(--tx); cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.call-ctl[hidden] { display: none; }
.call-ctl svg { width: 18px; height: 18px; }
.call-ctl:hover { border-color: var(--tx-3); }
.call-ctl:focus-visible { outline: 2px solid var(--turn); outline-offset: 2px; }
.call-ctl.mic .slash { visibility: hidden; }
.call-ctl.mic[aria-pressed="false"] { color: var(--danger); border-color: rgba(255, 90, 103, .5); }
.call-ctl.mic[aria-pressed="false"] .slash { visibility: visible; }
.call-ctl.end { background: rgba(255, 90, 103, .14); border-color: rgba(255, 90, 103, .55); color: var(--danger); }
.call-next { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
@keyframes call-blink { to { opacity: .2; } }
@keyframes call-wave { 0%, 100% { height: 4px; } 50% { height: 15px; } }
.lesson-dim { position: fixed; inset: 0; z-index: 55; background: transparent; }
.lesson-dim[hidden] { display: none; }
.lesson-dim.solid { background: rgba(4, 5, 8, .62); }
.lesson-ring { position: fixed; z-index: 56; pointer-events: none; border: 2px solid var(--turn); border-radius: 6px;
  box-shadow: 0 0 0 3px rgba(252, 238, 10, .18); transition: left .25s, top .25s, width .25s, height .25s; }
.lesson-ring[hidden] { display: none; }
.lesson-ring.dimming { box-shadow: 0 0 0 3px rgba(252, 238, 10, .18), 0 0 0 200vmax rgba(4, 5, 8, .62); }
.opt.locked { opacity: .32; cursor: not-allowed; }
.learn { border-color: var(--turn); color: var(--turn); }
@media (prefers-reduced-motion: reduce) {
  .lesson-ring, .lesson-feed video { transition: none; }
  .call-live i, .call-wave i { animation: none; }
}
@media (max-width: 600px) and (orientation: portrait), (max-width: 900px) and (min-height: 521px) {
  .lesson { left: 8px; right: 8px; width: auto; bottom: auto; top: 56px; grid-template-columns: 74px 1fr; column-gap: 10px; }
  .lesson-feed { grid-row: 2; width: 64px; height: 64px; margin: 10px 0 0 10px; }
  .lesson-body { padding: 10px 10px 0 0; }
  .lesson-say { font-size: var(--fs-body); }
  .call-wave { display: none; }
  .lesson-foot { grid-column: 1 / -1; padding: 10px; }
  .call-head .call-role, .call-bars { display: none; }
}
/* A card named in running text that opens it (the card details' power sources). */
.linkish { all: unset; cursor: pointer; color: var(--you); text-decoration: underline dotted; text-underline-offset: 2px; }
.linkish:hover, .linkish:focus-visible { color: var(--tx); text-decoration-style: solid; }
.linkish:focus-visible { outline: 1px solid var(--you); outline-offset: 2px; }
/* Settings: a volume slider with its level beside it */
.lvlrow { display: inline-flex; align-items: center; gap: 8px; }
.lvlrow .lvl { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--tx-2); font-size: var(--fs-small); }

/* ---- the phone table, dressed (2026-11-10) -------------------------------------------------
 * The desktop table got a mat, framed lanes, an Eddies area and a fanned hand on
 * 2026-11-06; a phone kept the bare layout of 2026-09-27. This is the same dress cut
 * for a phone, from the approved mock-up (artifacts/phone-mockup/): a printed mat
 * (drawn here, not by mat.js's canvases), a frame round each side's lane that lights
 * on its turn, the Eddies area as backs beside the Legends, the Gig band as the
 * score, and the hand turned into a fan (table.js fanHand). Portrait only: a phone on
 * its side keeps the four-column layout of 2026-10-27. */
@media (max-width: 600px) and (orientation: portrait), (max-width: 900px) and (min-height: 521px) {
  .table { isolation: isolate; gap: 3px;
    /* 346, not 285: each lane has a frame and padding now, and the band is taller. Measured (below). */
    --cwb: calc(clamp(34px, min((100vw - 34px) / 5.2, (100dvh - 346px) / 6.1), 100px) * var(--scale)); }
  .handzone { --hw: max(calc(var(--cwb) * 1.25), min((100vw - 16px) / 3.6, (100dvh - 356px - var(--cwb) * 4.35) / 1.45)); }
  body.pmat .table { background:
    radial-gradient(120% 60% at 50% 46%, transparent 55%, rgba(0, 0, 0, .55)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, #100f0e 0%, #0d0f14 44%, #0d0f14 56%, #0b1114 100%); }
  /* circuit traces, stretched to the table; the lit runs are the same file with its own animation */
  body.pmat .table::before, body.pmat-anim .table::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: center / 100% 100% no-repeat; }
  body.pmat .table::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 760' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='rgba(150,180,205,.11)' d='M0 90H46L70 114V260L96 286H390M390 150H330L306 174V220M0 470H60L84 446V380L110 354H390M390 580H320L296 604V670L270 696H0M196 0V40L220 64H300M0 640H40L64 664V760'/%3E%3Cg fill='rgba(150,180,205,.24)'%3E%3Ccircle cx='70' cy='114' r='2'/%3E%3Ccircle cx='306' cy='220' r='2'/%3E%3Ccircle cx='84' cy='380' r='2'/%3E%3Ccircle cx='296' cy='604' r='2'/%3E%3Ccircle cx='300' cy='64' r='2'/%3E%3C/g%3E%3C/svg%3E"); }
  body.pmat-anim .table::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 760' preserveAspectRatio='none'%3E%3Cstyle%3Epath%7Bfill:none;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:26 1200;animation:r 8s linear infinite%7D@keyframes r%7Bfrom%7Bstroke-dashoffset:26%7Dto%7Bstroke-dashoffset:-1200%7D%7D%3C/style%3E%3Cpath stroke='rgba(255,160,71,.55)' d='M0 90H46L70 114V260L96 286H390'/%3E%3Cpath stroke='rgba(53,215,232,.7)' style='animation-delay:-3s' d='M390 580H320L296 604V670L270 696H0'/%3E%3Cpath stroke='rgba(53,215,232,.7)' style='animation-delay:-6s' d='M0 470H60L84 446V380L110 354H390'/%3E%3C/svg%3E"); }

  /* who, and the counts: the name is back, the Eddies have their own area now */
  .sideinfo .who { flex: 1; min-width: 0; }
  .who .name { display: block; flex: 1; min-width: 0; max-width: none; font: 600 12.5px/1 var(--font-display); letter-spacing: .03em; color: var(--tx-2); }
  .side.active .who .name::after { content: none; }
  .counters { margin-left: 0; flex: none; }
  .ctr.eddies b { display: none; }  /* leaves "€$ · pay N", what you can spend now */

  /* a lane: the shelf (Legends, then the Eddies) and the field, in one frame */
  .lane { --c: 255, 160, 71; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "legends eddies" "field field";
    gap: 4px 8px; align-items: center; padding: 5px 7px; border: 1px solid rgba(var(--c), .22); background-origin: border-box;
    background:
      linear-gradient(rgb(var(--c)), rgb(var(--c))) left top / 11px 2px no-repeat, linear-gradient(rgb(var(--c)), rgb(var(--c))) left top / 2px 11px no-repeat,
      linear-gradient(rgb(var(--c)), rgb(var(--c))) right top / 11px 2px no-repeat, linear-gradient(rgb(var(--c)), rgb(var(--c))) right top / 2px 11px no-repeat,
      linear-gradient(rgb(var(--c)), rgb(var(--c))) left bottom / 11px 2px no-repeat, linear-gradient(rgb(var(--c)), rgb(var(--c))) left bottom / 2px 11px no-repeat,
      linear-gradient(rgb(var(--c)), rgb(var(--c))) right bottom / 11px 2px no-repeat, linear-gradient(rgb(var(--c)), rgb(var(--c))) right bottom / 2px 11px no-repeat,
      linear-gradient(180deg, rgba(var(--c), .035), rgba(var(--c), .012)); }
  .side.you .lane { --c: 53, 215, 232; grid-template-areas: "field field" "legends eddies"; }
  .side.active .lane { border-color: rgba(var(--c), .5);
    background:
      linear-gradient(rgb(var(--c)), rgb(var(--c))) left top / 11px 2px no-repeat, linear-gradient(rgb(var(--c)), rgb(var(--c))) left top / 2px 11px no-repeat,
      linear-gradient(rgb(var(--c)), rgb(var(--c))) right top / 11px 2px no-repeat, linear-gradient(rgb(var(--c)), rgb(var(--c))) right top / 2px 11px no-repeat,
      linear-gradient(rgb(var(--c)), rgb(var(--c))) left bottom / 11px 2px no-repeat, linear-gradient(rgb(var(--c)), rgb(var(--c))) left bottom / 2px 11px no-repeat,
      linear-gradient(rgb(var(--c)), rgb(var(--c))) right bottom / 11px 2px no-repeat, linear-gradient(rgb(var(--c)), rgb(var(--c))) right bottom / 2px 11px no-repeat,
      linear-gradient(180deg, rgba(var(--c), .03), rgba(var(--c), .08)); }
  .lanewrap { --c: 255, 160, 71; }
  .side.you .lanewrap { --c: 53, 215, 232; }
  .lanewrap::after { content: "Rival field"; position: absolute; z-index: 1; right: 16px; bottom: -6px; padding: 2px 8px; pointer-events: none;
    background: #0b0d11; font: 600 8px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: rgba(var(--c), .9);
    box-shadow: inset 0 0 0 1px rgba(var(--c), .45); }
  .side.you .lanewrap::after { content: "Your field"; bottom: auto; top: -6px; }
  .zone.legends { grid-area: legends; }
  .lanewrap .zone.legends > .zlabel { display: block; position: static; transform: rotate(180deg); writing-mode: vertical-rl;
    font-size: 7.5px; letter-spacing: .2em; color: rgba(var(--c), .7); }
  .zone.field { grid-area: field; justify-content: center; border-top: 1px solid rgba(var(--c), .2); padding: 6px 0 2px; }
  .side.you .zone.field { border-top: 0; border-bottom: 1px solid rgba(var(--c), .2); padding: 2px 0 6px; }
  /* the Eddies area: one back each, gold-edged while ready, turned and dark once spent */
  .zone.eddies { grid-area: eddies; display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; }
  .ebacks { display: flex; align-items: center; min-width: 0; --ew: calc(var(--cwb) * .32); }
  .ebacks i { position: relative; flex: 0 1 auto; width: calc(var(--ew) + 3px); min-width: 5px; height: calc(var(--ew) * 1.4); }
  .ebacks i:last-child { flex: none; width: var(--ew); }
  .ebacks i::before { content: ""; position: absolute; left: 0; top: 0; width: var(--ew); height: 100%; border-radius: 2px;
    border: 1px solid rgba(233, 196, 110, .55);
    background: radial-gradient(circle at 50% 50%, rgba(233, 196, 110, .6) 0 17%, transparent 19%),
                repeating-linear-gradient(135deg, transparent 0 4px, rgba(233, 196, 110, .14) 4px 5px), #1a1d24;
    transition: opacity var(--t-std) var(--ease), transform var(--t-std) var(--ease); }
  .ebacks i.spent::before { opacity: .5; transform: rotate(90deg) scale(.78); border-color: var(--line-2);
    background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255, 255, 255, .05) 4px 5px), #12151b; }
  .ebacks i.picked { box-shadow: none; }
  .ebacks i.picked::before { box-shadow: 0 0 0 2px var(--turn); opacity: 1; }
  .elbl { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font: 600 7.5px/1 var(--font-display); letter-spacing: .16em;
    text-transform: uppercase; color: var(--tx-3); white-space: nowrap; }
  .elbl b { font: 700 16px/1 var(--font-display); letter-spacing: 0; color: var(--gig); }

  /* the Gig band: the score, across the middle of the table */
  .midline { margin: 0 -8px; padding: 0 10px; border-color: rgba(233, 196, 110, .22);
    background: linear-gradient(90deg, rgba(233, 196, 110, .07), rgba(233, 196, 110, .015) 60%, transparent); }
  .midline::before { left: 10px; right: 10px; height: 0; background: none; border-top: 1px dashed rgba(233, 196, 110, .22); }
  .gigrow { min-height: 40px; gap: 9px; }
  .gighead { width: 64px; gap: 2px; }
  .gighead .score b { font-size: 22px; line-height: .9; }
  .gighead .score b small { font-size: 11px; }
  .sc { font-size: 11px; }
  .pips { display: flex; gap: 2px; }
  .pips i { flex: 1; width: auto; height: 3px; }
  .gigrow.rival .pips i.on { background: var(--rival); } .gigrow.you .pips i.on { background: var(--you); }
  .dice { flex-wrap: nowrap; }
  .dice.many { gap: 3px; } .dice.many .die { width: 25px; height: 25px; } .dice.many .die b { font-size: 11px; }
  .dice.lots { gap: 2px; } .dice.lots .die { width: 21px; height: 21px; } .dice.lots .die b { font-size: 10px; }
  .fixer { display: flex; gap: 2px; padding-left: 0; border-left: 0; opacity: .8; }
  .fixer .zlabel, .fixer .fd.gone { display: none; }
  .fixer .fd { width: 13px; height: 13px; font-size: 0; }

  /* the hand as a fan (table.js fanHand): each card turned about its own foot */
  .hand.fan .slot > .card { transform: translateY(var(--fy, 0px)) rotate(var(--fr, 0deg)); transform-origin: 50% 100%;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
  .hand.fan .slot.selected > .card { transform: translateY(-22px) scale(1.06); }
  .hand.fan .slot.selected { z-index: 6; }
  .hand.fan .slot.actionable::before { display: none; }  /* the slot's brackets don't turn with the card */
}
/* a short phone (an iPhone SE, a browser with both its bars showing): the frames and the band give height back */
@media (max-width: 600px) and (orientation: portrait) and (max-height: 650px), (max-width: 900px) and (min-height: 521px) and (max-height: 650px) {
  .table { gap: 1px; --cwb: calc(clamp(34px, min((100vw - 34px) / 5.2, (100dvh - 312px) / 6.1), 100px) * var(--scale)); }
  .handzone { --hw: max(calc(var(--cwb) * 1.25), min((100vw - 16px) / 3.6, (100dvh - 322px - var(--cwb) * 4.35) / 1.45)); }
  .lane { padding: 3px 6px; gap: 2px 8px; }
  .zone.field, .side.you .zone.field { padding: 3px 0 1px; }
  .side.you .zone.field { padding: 1px 0 3px; }
  .gigrow { min-height: 31px; }
  .gighead .score b { font-size: 17px; }
  .pips { display: none; }
  .elbl b { font-size: 13px; }
}

/* ---- a phone, choosing what to attack (play.js phoneAim, 2026-11-10) ---- */
.paim { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 36; pointer-events: none; overflow: visible; }
.paim path { fill: none; stroke: var(--turn); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; animation: paimmarch .7s linear infinite; }
.paim polygon { fill: var(--turn); }
.paim g.armed path { stroke-dasharray: none; stroke-width: 4; animation: none; }
@keyframes paimmarch { to { stroke-dashoffset: -11; } }
@media (prefers-reduced-motion: reduce) { .paim path { animation: none; } }
:root[data-motion="reduced"] .paim path { animation: none; }
@media (max-width: 600px) and (orientation: portrait), (max-width: 900px) and (min-height: 521px) {
  .handzone { transition: transform var(--t-std) var(--ease); }
  body.aiming .handzone { transform: translateY(58%); }
  body.aiming #sideRival .zone.field > .slot:not(.target) > .card { filter: brightness(.5) saturate(.6); }
  body.aiming .slot.target > .card { box-shadow: 0 0 0 2px var(--turn), var(--elev-2); }
  body.aiming .slot.target[data-aim]::after { content: attr(data-aim); top: -7px; background: var(--turn); white-space: nowrap; letter-spacing: .1em; text-transform: uppercase; }
  body.aiming .gigrow.target { position: relative; outline: 2px solid var(--turn); outline-offset: -1px; }
  body.aiming .gigrow.target[data-aim]::after { content: attr(data-aim); position: absolute; right: 8px; top: 5px; padding: 3px 6px; pointer-events: none;
    background: var(--turn); color: var(--on-accent); font: 700 10px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
  body.aiming .gigrow.target .fixer { visibility: hidden; }
  body.aiming .armed[data-aim]::after { background: var(--danger); color: #fff; }
}

/* ---- the ending on a phone (ending.js, full since 2026-11-10): the word fills the width ---- */
@media (max-width: 600px) and (orientation: portrait), (max-width: 900px) and (min-height: 521px) {
  .endbanner h1 { font-size: 16.5vw; letter-spacing: .05em; padding-left: .05em; }
  .endbanner .sub { font-size: 12px; letter-spacing: .18em; }
  .endbanner .band { padding: 20px 0 18px; }
  .endbanner.win::before { content: ""; position: absolute; left: 50%; top: 50%; width: 240vw; height: 240vw; margin: -120vw; z-index: -1; opacity: .5;
    background: repeating-conic-gradient(from 0deg, rgba(252, 238, 10, .14) 0 4deg, transparent 4deg 15deg);
    -webkit-mask: radial-gradient(circle, #000 8%, transparent 55%); mask: radial-gradient(circle, #000 8%, transparent 55%); }
  .endskip { left: 0; right: 0; text-align: center; bottom: calc(var(--actbar-h) + env(safe-area-inset-bottom) + 14px); }
}

/* ---- the card reader on a phone (2026-11-10): the card large, its text and moves on a sheet under it ----
 * Press and hold opens it (table.js). The art tilts and its foil runs with the
 * phone or a finger (shine.js); the sheet holds what the desktop reader's right
 * column does, with the moves the card has now at the bottom, under a thumb. */
@media (max-width: 600px) and (orientation: portrait), (max-width: 900px) and (min-height: 521px) {
  dialog.inspector { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0;
    background: rgba(4, 5, 8, .93); box-shadow: none; }
  dialog.inspector[open] { display: flex; flex-direction: column; }
  dialog.inspector > .sheet-head { border-bottom: 0; padding: calc(8px + env(safe-area-inset-top)) 12px 4px 16px; }
  dialog.inspector > .sheet-head h2 { font-size: var(--fs-body); color: var(--tx-2); letter-spacing: .14em; }
  dialog.inspector > .sheet-head .btn { min-height: 40px; min-width: 64px; }
  dialog.inspector > .sheet-head .kbd { display: none; }
  dialog.inspector > .in-body { flex: 1; min-height: 0; max-height: none; display: flex; flex-direction: column; gap: 0; padding: 0; overflow: auto; overscroll-behavior: contain; }
  .inspector .in-art { flex: none; width: min(76vw, (100dvh - 330px) * .714); min-width: 150px; max-width: none; margin: 6px auto 0; touch-action: none; }
  .inspector .in-art img { box-shadow: 0 30px 60px rgba(0, 0, 0, .8); }
  body.tilting[data-gyro] .inspector .in-art:not(.facedown)::after { content: "Tilt the phone — the light follows"; display: block; padding: 12px 0 4px; text-align: center;
    font: 600 10px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
  body.tilting[data-gyro="ask"] .inspector .in-art:not(.facedown)::after { content: "Tap the card, then tilt the phone"; }
  .inspector .in-meta { margin-top: auto; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--s2); border-top: 1px solid var(--line-2); }
  .inspector .in-art + .in-meta { margin-top: auto; }
  .inspector .in-body::after { content: none; }
  .inspector .in-stats .st { padding: 5px 9px; min-width: 64px; }
  .inspector .in-stats .st b { font-size: 18px; }
  .inspector .in-text { font-size: 14.5px; line-height: 1.5; padding: 10px 12px; }
  .inspector .in-actions .opt, .inspector .in-actions .btn { min-height: 46px; }
}

/* ---- the lobby on a phone, dressed (2026-11-10) ---------------------------------------------
 * The command deck (2026-11-06) folded for one hand, from artifacts/phone-mockup/:
 * each deck a dossier with its three Legends fanned, the ladder with its pips, the
 * record as one strip, Tournament and Binder as two art tiles. The structure is the
 * guided lobby of 2026-10-01 (Start docked, every control a 44px target); this is its
 * dress. Portrait only: a phone on its side keeps the two summary rows. */
@media (max-width: 600px) and (orientation: portrait), (max-width: 900px) and (min-height: 521px), (orientation: landscape) and (max-height: 520px) {
  .lobby { gap: 12px; background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 26px), var(--s0); }
  .lobby > .compose { background: none; border: 0; }
  .lobby .compose > header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 6px; min-height: 0; padding: 2px 2px 10px; border: 0; }
  .compose > header .spacer { display: none; }
  .lobby .compose > header h2 { grid-row: 1; font: 800 30px/.9 var(--font-display); letter-spacing: .05em; color: var(--tx); }
  .compose > header h2 span { color: var(--you); }
  .lobby .compose > header .btn { min-height: 44px; padding: 4px 9px; font: 600 11px/1.1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
    color: var(--tx-2); border: 1px solid var(--line-2); background: none; white-space: nowrap; }
  #learnBtn { grid-column: 2 / -1; justify-self: end; }
  #simOpen { grid-column: 1 / 2; justify-self: start; } #importOpen { grid-column: 2 / -1; }
  .compose-body { padding: 0; gap: 12px; }

  /* a dossier: what the deck is on the left, its Legends fanned on the right */
  .matchup { gap: 0; }
  .deckslot { --acc: var(--you); --c: 53, 215, 232; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 150px;
    grid-template-areas: "head legs" "meta legs" "curve legs"; grid-template-rows: auto auto 1fr; gap: 8px 8px; min-height: 164px; padding: 12px 10px 12px 12px;
    background: linear-gradient(100deg, #10141a 38%, rgba(var(--c), .1));
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
  .deckslot[data-side=rival] { --acc: var(--rival); --c: 255, 160, 71; }
  .deckslot::before { bottom: auto; width: 58px; height: 2px; background: var(--acc); }
  .ds-head { gap: 8px; align-items: flex-start; }
  .deckslot[data-side] .ds-side { padding: 3px 9px 3px 6px; background: var(--acc); color: var(--on-accent); font: 700 10px/1 var(--font-display); letter-spacing: .16em;
    clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
  .ds-name { flex: none; font: 700 22px/1.02 var(--font-display); letter-spacing: .01em; }
  .ds-meta { align-content: flex-start; gap: 5px; }
  .ds-meta .ram { border-radius: 0; padding: 2px 6px; font: 600 9.5px/1.3 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
  .ds-meta .chip { border: 0; padding: 0; font: 600 9.5px/1.3 var(--font-display); letter-spacing: .14em; color: var(--tx-3); }
  .ds-meta .legal { font: 600 9.5px/1.3 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
  .deckslot .curve { align-self: end; justify-self: start; height: 20px; }
  .deckslot .curve .bar { flex: none; width: 9px; }
  .deckslot .curve .bar i { height: calc(var(--f, 0) * 19px + 1px); background: rgba(var(--c), .7); }
  .ds-legends { display: block; position: relative; align-self: stretch; min-height: 132px; }
  .ds-legends button { position: absolute; left: 50%; top: 6px; width: 80px; margin-left: -40px; border-radius: 5px; overflow: hidden; transform-origin: 50% 130%;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); }
  .ds-legends button img, .ds-legends button .noart { width: 100%; aspect-ratio: 63 / 88; border-radius: 0; }
  .ds-legends button:nth-child(1) { transform: translateX(-30px) rotate(-9deg); }
  .ds-legends button:nth-child(2) { transform: translateY(-3px); z-index: 2; }
  .ds-legends button:nth-child(3) { transform: translateX(30px) rotate(9deg); }
  .ds-legends.deal button { animation: lbp-deal .5s cubic-bezier(.2, .9, .3, 1.1) backwards; }
  .ds-legends.deal button:nth-child(2) { animation-delay: .06s; } .ds-legends.deal button:nth-child(3) { animation-delay: .12s; }
  /* the two moves ride the panel's corner; each still takes a 44px press */
  .ds-actions { position: absolute; right: 8px; bottom: 8px; z-index: 3; gap: 6px; }
  .lobby .ds-actions .btn { position: relative; flex: none; min-height: 28px; padding: 4px 7px; font: 600 9.5px/1 var(--font-display); letter-spacing: .14em;
    text-transform: uppercase; color: var(--acc); background: rgba(8, 9, 12, .88); border: 1px solid rgba(var(--c), .4); }
  .ds-actions .btn::after { content: ""; position: absolute; inset: -8px -3px; }
  .versus { height: 30px; font-size: 0; }
  .versus::before { background: linear-gradient(90deg, var(--you), transparent); opacity: .6; }
  .versus::after { background: linear-gradient(90deg, transparent, var(--rival)); opacity: .6; }
  #vsMark { font: italic 800 24px/1 var(--font-display); letter-spacing: .02em; color: transparent;
    background: linear-gradient(90deg, var(--you), var(--rival)); -webkit-background-clip: text; background-clip: text; }
  .lobby #swapBtn { min-height: 44px; min-width: 52px; margin: -7px 0; font: 600 11px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }

  /* the opponent: the ladder with its pips, the styles and the legacy agent in one row */
  .opp { position: relative; margin: 0; padding: 11px 10px 10px; border: 1px solid var(--line); background: rgba(21, 25, 32, .75); }
  .opp::before { content: ""; position: absolute; left: -1px; top: -1px; width: 44px; height: 2px; background: var(--rival); }
  .opp legend { float: left; width: 100%; margin-bottom: 9px; padding: 0; font: 700 10px/1 var(--font-display); letter-spacing: .26em; color: var(--tx-3); }
  .opp-axes { clear: both; }
  .axis-title { margin-bottom: 7px; font: 600 10px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
  .axis-title .faint { font: 400 11px/1 var(--font-ui); letter-spacing: .02em; text-transform: none; }
  #oppStyle { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #oppStyle > .axis-title { display: none; }
  .oppcard, .oppcard:not(.legacy) { display: block; text-align: left; min-height: 50px; padding: 8px 8px 7px; background: var(--s1); border-color: var(--line-2); }
  #oppStyle .oppcard.legacy { grid-column: auto; margin-top: 0 !important; }
  .oppcard .rank, .oppcard .tag { display: none; }
  .oppcard .pips { display: flex; gap: 2px; margin-bottom: 7px; }
  .oppcard .pips i { width: 10px; height: 3px; background: var(--line-2); transform: skewX(-20deg); }
  .oppcard .pips i.on { background: var(--tx-2); }
  .oppcard.legacy::before { content: "LEGACY"; display: block; margin-bottom: 4px; font: 600 8px/1 var(--font-display); letter-spacing: .16em; color: var(--tx-3); }
  .oppcard b { display: block; font: 700 15px/1 var(--font-display); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .oppcard[aria-checked=true] { border-color: var(--rival); background: rgba(255, 160, 71, .12); }
  .oppcard[aria-checked=true] b { color: var(--rival); }
  .oppcard[aria-checked=true] .pips i.on { background: var(--rival); }

  /* the seat */
  .seat { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; }
  .seat legend { float: left; padding: 0; font: 700 10px/1 var(--font-display); letter-spacing: .24em; color: var(--tx-3); }
  .seat .seg { flex: 1; width: auto; }
  .seat .seg span { font: 700 12px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
  .seat .seg input:checked + span { color: var(--you); background: var(--you-dim); }

  /* under the form: the record as a strip, two art tiles, then the lists */
  .lobby-side { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .lobby-side > * { grid-column: 1 / -1; }
  .lobby .record-card { display: flex; align-items: center; gap: 14px; padding: 10px 12px; }
  .lobby .record-card:empty { display: none; }
  .record-card .rc-wl { margin-top: 4px; font: 800 30px/1 var(--font-display); }
  .record-card .rc-wl .w { color: var(--you); } .record-card .rc-wl .l { color: var(--tx-2); }
  .record-card .rc-wl small { font-size: 22px; color: var(--tx-3); margin: 0 2px; }
  .record-card .rc-bar { flex: 1; min-width: 0; }
  .record-card .rc-bar i { display: block; height: 4px; margin-top: 7px; background: linear-gradient(90deg, var(--you) var(--f), rgba(255, 90, 103, .6) var(--f)); }
  .lobby-side > .tourney-card, .lobby-side > .binder-card { grid-column: auto; position: relative; height: 86px; overflow: hidden; order: 0; }
  .tourney-card .tile-art, .binder-card .tile-art { display: block; position: absolute; inset: 0; background-size: cover; background-position: center 22%;
    filter: grayscale(.5) brightness(.42); }
  .lobby .tourney-card > header, .lobby .binder-card > header { position: absolute; left: 0; right: 0; bottom: 0; min-height: 0; padding: 0 9px 8px; border: 0; }
  .tourney-card h2, .binder-card h2 { font: 700 13px/1 var(--font-display); letter-spacing: .16em; color: var(--tx); }
  .tourney-card p, .binder-card p { display: none; }
  .lobby .tourney-card .btn, .lobby .binder-card .btn { position: absolute; inset: 0; margin: 0; min-height: 0; padding: 7px 8px; align-items: flex-start; justify-content: flex-end;
    font-size: 0; background: none; border: 0; }
  .tourney-card .btn::after, .binder-card .btn::after { content: "OPEN ›"; font: 600 9px/1 var(--font-display); letter-spacing: .16em; color: var(--tx-2); }
  .lobby-side > .rec-card { order: 1; } .lobby-side > .people-card { order: 2; }

  /* Start */
  #startBtn { min-height: 52px; padding: 10px 22px 10px 18px; font: 800 17px/1 var(--font-display); letter-spacing: .14em; white-space: nowrap; }
  #startBtn::after { content: " ›››"; opacity: .55; letter-spacing: -.02em; }
  .start-sum b { font: 700 13px/1.15 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
  .start-sum span { font: 600 10px/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); }
}
@keyframes lbp-deal { from { opacity: 0; translate: 0 34px; filter: brightness(2.2); } }

/* a finger drags a card to play it or aim it (play.js): the browser must not take the touch for a scroll */
@media (max-width: 600px) and (orientation: portrait), (max-width: 900px) and (min-height: 521px) {
  #table .slot[data-id] > .card { touch-action: none; }
  .oppcard > * { width: 100%; }
  .oppcard .pips { justify-content: flex-start; }
}

/* ---- a phone on its side, bigger (2026-11-10) ----------------------------------------------
 * The user, on a folded Fold 5 (882x344): "almost readable but still small". The
 * 2026-10-27 layout stacked a shelf and a field per side, so a card was a 5.7th of
 * the height. Here the Legends move into the players' column on the left and the
 * Eddies sit as backs in a corner of the field, so the height holds only the two
 * fields (2 x 1.4, Gear .28 each) and the peeking hand (~.9): a card is a 4.5th of
 * it, about a third wider (52 -> 68px at 344 tall). .lanewrap and .lane are
 * display: contents, so the zones are cells of the table's own grid, and the
 * frame the upright phone puts on a lane is on the field here. */
@media (orientation: landscape) and (max-height: 520px) {
  .table { isolation: isolate; position: relative; gap: 3px 8px;
    grid-template-rows: auto auto minmax(16px, 1fr) auto auto auto;
    grid-template-areas: "rinfo rfield" "rleg rfield" "mid mid" "yleg yfield" "yinfo yfield" "yinfo hand";
    --cw: calc(clamp(40px, (100dvh - 50px) / 4.25, 124px) * var(--scale)); }
  body.pmat .table { background:
    radial-gradient(70% 120% at 50% 48%, transparent 55%, rgba(0, 0, 0, .5)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, #100f0e 0%, #0d0f14 44%, #0d0f14 56%, #0b1114 100%); }
  .lanewrap, .lane { display: contents; }
  .lanewrap::after { content: none; }
  #sideRival { --c: 255, 160, 71; }
  #sideYou { --c: 53, 215, 232; }
  #sideRival .zone.legends { grid-area: rleg; align-self: start; }
  #sideRival .zone.field, #sideRival .zone.eddies { grid-area: rfield; }
  #sideYou .zone.legends { grid-area: yleg; align-self: end; }
  #sideYou .zone.field, #sideYou .zone.eddies { grid-area: yfield; }
  #sideRival > .sideinfo { align-self: start; }
  #sideYou > .sideinfo { align-self: start; padding-bottom: 0; }

  /* a player: tag and name on one line, the counts two by two, the Legends beneath */
  .sideinfo { gap: 3px; }
  .sideinfo .who { flex-direction: row; align-items: center; gap: 5px; min-width: 0; }
  .who .name { display: block; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: none; }
  .ctr.eddies { grid-column: auto; }
  .ctr.eddies b { display: none; }  /* the backs on the field are the count; this leaves "€$ · pay N" */
  .ctr.eddies .faint { color: var(--tx-2); }
  .zone.legends { padding: 0; gap: 3px; justify-content: flex-start; }
  /* three spent Legends lie side by side (1.4 wide each) and still fit the column */
  .table { --infow: clamp(104px, 16vw, 150px); }
  .zone.legends > .slot { --cw: min(calc(var(--cw0) * .5), calc((var(--infow) - 6px) / 4.3)); }

  /* a field, framed in its side's colour and lit on its turn */
  .zone.field { position: relative; align-self: stretch; align-items: center; padding: 3px 8px; min-height: calc(var(--cw) * 1.68 + 6px); box-sizing: border-box;
    border: 1px solid rgba(var(--c), .22); background-origin: border-box;
    background:
      linear-gradient(rgb(var(--c)), rgb(var(--c))) left top / 11px 2px no-repeat, linear-gradient(rgb(var(--c)), rgb(var(--c))) left top / 2px 11px no-repeat,
      linear-gradient(rgb(var(--c)), rgb(var(--c))) right top / 11px 2px no-repeat, linear-gradient(rgb(var(--c)), rgb(var(--c))) right top / 2px 11px no-repeat,
      linear-gradient(rgb(var(--c)), rgb(var(--c))) left bottom / 11px 2px no-repeat, linear-gradient(rgb(var(--c)), rgb(var(--c))) left bottom / 2px 11px no-repeat,
      linear-gradient(rgb(var(--c)), rgb(var(--c))) right bottom / 11px 2px no-repeat, linear-gradient(rgb(var(--c)), rgb(var(--c))) right bottom / 2px 11px no-repeat,
      linear-gradient(180deg, rgba(var(--c), .035), rgba(var(--c), .012)); }
  .side.active .zone.field { border-color: rgba(var(--c), .55); box-shadow: inset 0 0 22px rgba(var(--c), .07); }
  .zone.field > .slot { align-self: flex-start; }
  .slot.hasgear { margin-bottom: 0; }

  /* the Eddies: backs in the field's outer corner, gold-edged while ready */
  .zone.eddies { z-index: 1; justify-self: end; align-self: start; margin: 5px 7px; pointer-events: none; }
  #sideYou .zone.eddies { align-self: end; }
  .ebacks { gap: 2px; }
  .ebacks i { width: calc(var(--cw) * .2); height: calc(var(--cw) * .28); margin-left: 0; border-color: rgba(233, 196, 110, .7); }
  .ebacks i.spent { opacity: .3; border-color: var(--line-2); transform: rotate(90deg) scale(.8); }
  .ebacks i.picked { box-shadow: 0 0 0 2px var(--turn); }

  .handzone { --hw: calc(var(--cw) * 1.1); --peek: .56; }
  .tablemid { min-height: 16px; }

  /* Gear tucks further under its Unit: the field has .28 of a card for it, not the .47 it hung by */
  .gearrow { top: calc(100% - var(--cw) * .6); }
  .tablemid { position: relative; z-index: 2; }
  .tablemid .phase { background-color: #14140c; }
  .tablemid.rival .phase { background-color: #17110b; }

  /* the Gig panels lose a line each (the fixer's dice sit beside the title), so the
     action bar's two lines and its button fit between them at 344px tall */
  .rail .gigrow { position: relative; }
  .rail .fixer { position: absolute; top: 5px; right: 7px; }
  .rail .fixer .zlabel { display: none; }
  .rail .fixer .fd { width: 13px; height: 13px; }
  .acttext span { -webkit-line-clamp: 1; }

  /* choosing a target and dragging by touch, as on the upright phone */
  #table .slot[data-id] > .card { touch-action: none; }
  body.aiming #sideRival .zone.field > .slot:not(.target) > .card { filter: brightness(.5) saturate(.6); }
  body.aiming .slot.target > .card { box-shadow: 0 0 0 2px var(--turn), var(--elev-2); }
  body.aiming .slot.target[data-aim]::after { content: attr(data-aim); top: -7px; background: var(--turn); white-space: nowrap; letter-spacing: .1em; text-transform: uppercase; }
  body.aiming .gigrow.target { position: relative; outline: 2px solid var(--turn); outline-offset: -1px; }
  body.aiming .gigrow.target[data-aim]::after { content: attr(data-aim); position: absolute; right: 8px; top: 5px; padding: 3px 6px; pointer-events: none;
    background: var(--turn); color: var(--on-accent); font: 700 10px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
  body.aiming .armed[data-aim]::after { background: var(--danger); color: #fff; }
  body.aiming .handzone { transform: translateY(40%); }
  body.aiming .gigrow.target[data-aim]::after { top: auto; bottom: 5px; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 760px) {
  .ctr.eddies { grid-column: 1 / -1; }  /* "€$ · pay N" wraps in half of a 104px column */
}

/* ---- the lobby on a phone's side (2026-11-10) -----------------------------------------------
 * It wears the upright phone's dress (the block above marked "the lobby, dressed"
 * now includes this tier). What differs is where Start goes: docked along the
 * bottom it took 70 of 344px and left the page a 230px slot, so here it is a
 * column down the right edge, where the table has its action panel, and the page
 * scrolls beside it at full height. */
@media (orientation: landscape) and (max-height: 520px) {
  .lobby { --dockw: clamp(150px, 21vw, 196px);
    padding: 8px calc(var(--dockw) + 10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .start-dock { left: auto; top: 44px; bottom: 0; right: 0; width: calc(var(--dockw) + env(safe-area-inset-right)); box-sizing: border-box;
    flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 10px;
    padding: 12px calc(10px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) 10px;
    border-top: 0; border-left: 1px solid var(--line-2); box-shadow: -12px 0 28px rgba(0, 0, 0, .45); }
  .start-sum { flex: 0 0 auto; }
  .start-sum b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
  .start-sum span { white-space: normal; }
  #startBtn { min-height: 64px; padding: 10px 8px; white-space: normal; line-height: 1.15; }
  .oppcard > * { width: 100%; }
  .oppcard .pips { justify-content: flex-start; }
  /* the header on one line, and a deck's name small enough to keep to two */
  .lobby .compose > header { grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; padding-bottom: 6px; }
  .lobby .compose > header h2 { font-size: 26px; }
  #learnBtn, #simOpen, #importOpen { grid-column: auto; grid-row: 1; justify-self: auto; }
  .deckslot { grid-template-columns: minmax(0, 1fr) 132px; min-height: 150px; }
  .ds-name { font-size: 18px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .ds-legends { min-height: 118px; }
  .ds-legends button { width: 70px; margin-left: -35px; }
}
/* a small phone on its side (667 wide): beside the Start column there is room for one deck across */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 760px) {
  .matchup { grid-template-columns: 1fr; }
  .versus { flex-direction: row; }
  .lobby .compose > header h2 { font-size: 20px; white-space: nowrap; }
  .lobby .compose > header .btn { padding: 4px 6px; font-size: 10px; letter-spacing: .08em; }
}

/* ---- the ending on a phone's side (ending.js, full since 2026-11-10) ----
   The banner is laid over the table (not the right-hand column), so the word is
   sized to the table: FLATLINED is nine letters and ran past it at the desktop's size. */
@media (orientation: landscape) and (max-height: 520px) {
  .endbanner h1 { font-size: min(72px, 7.4vw); letter-spacing: .2em; padding-left: .2em; }
  .endbanner .sub { margin-top: 8px; font-size: 12px; letter-spacing: .2em; }
  .endbanner .band { padding: 16px 0 14px; }
  .endbanner svg.ecg { width: 90%; height: 46px; margin-top: 8px; }
  .endskip { right: auto; left: max(12px, env(safe-area-inset-left)); bottom: calc(8px + env(safe-area-inset-bottom)); }
}