/* Tokens from the Pauper Duel Commander design system (pdc/DESIGN.md). */
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("/fonts/barlow-condensed-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("/fonts/barlow-condensed-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 400 600; font-display: swap; src: url("/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; }
@font-face { font-family: "Inter"; font-weight: 400 600; font-display: swap; src: url("/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Beleren"; font-weight: 700; font-display: swap; src: url("/fonts/Beleren2016-Bold.woff2") format("woff2"); }

:root {
  --orange: #FF5722;
  --orange-light: #FF7043;
  --orange-dark: #E64A19;
  --gold: #FFA500;
  --bg: #0A0E13;
  --table: #141821;
  --raised: #1C212B;
  --line: #2A303C;
  --hairline: rgba(255, 255, 255, .08);
  --text: #FFFFFF;
  --text-2: #B8BEC8;
  --text-3: #8B93A1;
  --danger: #E5484D;
  --ok: #3DD68C;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: Inter, system-ui, sans-serif;
  --card-name: Beleren, "Barlow Condensed", serif;
  --r: 0.5rem;
  --shadow-rest: 0 4px 24px -2px rgba(255, 87, 34, .08), 0 8px 16px -4px rgba(0, 0, 0, .3);
  --halo: 0 0 20px rgba(255, 87, 34, .15), 0 0 40px rgba(255, 87, 34, .08);
  --halo-strong: 0 0 30px rgba(255, 87, 34, .25), 0 0 60px rgba(255, 110, 64, .12);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --cw: clamp(46px, 5.6vw, 92px); /* battlefield card width */
  --hw: clamp(64px, 7.5vw, 112px); /* hand card width */
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold); text-underline-offset: .2em; }
a:hover { color: #FFB84D; }
::selection { background: rgba(255, 87, 34, .35); color: #fff; }
* { scrollbar-color: #343B48 transparent; scrollbar-width: thin; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--raised); padding: .5rem 1rem; z-index: 99; }

/* Buttons, as on pauperduelcommander.fr: the primary one is the only thing that glows. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 700 .85rem/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase;
  background: var(--raised); color: var(--text); border: 1px solid var(--line); border-radius: var(--r);
  padding: .7rem 1.2rem; cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .25s var(--ease-out), transform .2s var(--ease-out);
}
.btn:hover:not(:disabled) { border-color: var(--text-3); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn.primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--orange-light) 0%, var(--orange) 50%, var(--orange-dark) 100%); text-shadow: 0 2px 4px rgba(0, 0, 0, .5); box-shadow: var(--halo); }
.btn.primary:hover:not(:disabled) { box-shadow: var(--halo-strong); transform: translateY(-2px); }
.btn.secondary { color: var(--orange-light); border: 2px solid var(--orange); background: rgba(255, 87, 34, .1); }
.btn.secondary:hover:not(:disabled) { background: rgba(255, 87, 34, .2); border-color: var(--orange-light); }
.btn.small { padding: .4rem .7rem; font-size: .75rem; }
.link-btn { background: none; border: none; padding: 0; color: var(--text-2); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; font-size: .85rem; }
.link-btn:hover { color: var(--text); }

/* Form fields (shared with the game's dialogs). */
label { display: block; color: var(--text-2); font-size: .85rem; font-weight: 500; margin-bottom: .75rem; }
input, select, textarea {
  display: block; width: 100%; margin-top: .35rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  padding: .65rem .8rem; transition: border-color .2s;
}
input:hover, select:hover, textarea:hover { border-color: #3A4250; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 87, 34, .2); }
::placeholder { color: #6E7684; }
textarea { font: .85rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.hint { color: var(--text-3); font-size: .82rem; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Lobby ----------
   The tournament hall: an almost-black room, orange for what you can act on, gold for distinction.
   Two blocks side by side: your deck (shown as your commander's card once it is legal) and
   how to play. Everything secondary waits until it is needed. */
.lobby {
  min-height: 100%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 87, 34, .09), transparent 70%),
    var(--bg);
}
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .wrap { padding: 0 1.5rem; } }

.masthead { border-bottom: 1px solid var(--hairline); background: rgba(10, 14, 19, .7); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5; }
.masthead-in { display: flex; align-items: center; gap: 1rem; min-height: 3.75rem; }
.wordmark { font: 700 1.5rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--text); text-decoration: none; }
.wordmark span { color: var(--orange); }
.online { margin: 0; display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem; border-radius: 999px; background: var(--raised); color: var(--text-2); font-size: .8rem; }
.online::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(61, 214, 140, .15); }
.identity { margin: 0 0 0 auto; display: flex; align-items: center; gap: .5rem; padding: .25rem .4rem .25rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--table); cursor: text; transition: border-color .2s; }
.identity:hover, .identity:focus-within { border-color: var(--orange); }
.identity-label { font: 700 .7rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.identity input { margin: 0; width: 10rem; padding: .3rem .2rem; border: none; background: none; font-weight: 600; color: var(--text); }
.identity input:focus-visible { box-shadow: none; }
.identity-pen { width: 1rem; height: 1rem; flex: none; margin-right: .3rem; fill: none; stroke: var(--text-3); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }

.intro { padding: clamp(1.75rem, 5vw, 3rem) 0 clamp(1.25rem, 3vw, 2rem); max-width: 46rem; }
.headline { margin: 0; font: 700 clamp(2.1rem, 5.5vw, 3.6rem)/.95 var(--display); letter-spacing: -.02em; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); text-wrap: balance; }
.headline .magic { background: linear-gradient(135deg, var(--orange-light) 0%, var(--orange) 45%, var(--orange-dark) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.promise { margin: .9rem 0 0; color: var(--text-2); font-size: 1.05rem; max-width: 38rem; }

.lobby-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1rem, 2.5vw, 1.75rem); align-items: start; padding-bottom: 2.5rem; }
.block { scroll-margin-top: 5rem; background: var(--table); border: 1px solid var(--hairline); border-radius: .75rem; padding: clamp(1.1rem, 2.5vw, 1.6rem); }
.section-title { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.1rem; font: 700 clamp(1.2rem, 2.2vw, 1.5rem)/1.2 var(--display); letter-spacing: .025em; text-transform: uppercase; }
.section-title::before { content: ""; width: 4px; height: 1.1em; border-radius: 2px; background: var(--orange); }
.sub-title { margin: 1.75rem 0 .75rem; font: 700 1rem/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.form-field { margin-bottom: .9rem; }
.form-field.compact { margin: 0; font-size: .8rem; }

/* Your deck: once legal, the commander's card is the deck. */
.deck-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.deck-art { position: relative; width: clamp(130px, 13vw, 170px); aspect-ratio: 63 / 88; }
.deck-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4.5% / 3.2%; box-shadow: var(--shadow-rest); background: var(--raised); }
.deck-art img + img { transform: translate(18%, 6%) rotate(5deg); z-index: -1; filter: brightness(.8); }
.deck-art.pair { margin-right: 18%; }
.deck-info { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; min-width: 0; }
.badge-gold { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .5rem; border-radius: 4px; background: var(--gold); color: var(--bg); font: 700 .72rem/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.badge-gold svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.deck-name { margin: 0; font: 700 clamp(1.25rem, 2.2vw, 1.55rem)/1.15 var(--card-name); }
.deck-partner { margin: 0; font: 700 1rem/1.2 var(--card-name); color: var(--text-2); }
.deck-source { margin: 0; color: var(--text-3); font-size: .85rem; }

.tabs { display: flex; gap: .25rem; padding: .25rem; margin-bottom: 1.1rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); }
.tabs [role=tab] { flex: 1; padding: .55rem .75rem; border: none; border-radius: calc(var(--r) - 2px); background: none; color: var(--text-3); font: 700 .82rem/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.tabs [role=tab]:hover { color: var(--text); }
.tabs [role=tab][aria-selected=true] { background: var(--raised); color: var(--text); box-shadow: inset 0 -2px 0 var(--orange); }
.partner { margin: -.2rem 0 .9rem; }
.partner summary { cursor: pointer; color: var(--text-2); font-size: .85rem; list-style: none; width: fit-content; }
.partner summary::-webkit-details-marker { display: none; }
.partner summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-right: .4rem; border: 1px solid var(--line); border-radius: 4px; font-size: .8rem; line-height: 1; color: var(--text-3); }
.partner[open] summary { margin-bottom: .6rem; }
.partner[open] summary::before { content: "\2212"; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.deck-status:empty { display: none; }
.deck-status { margin-top: 1rem; border-radius: var(--r); padding: .75rem .9rem; font-size: .88rem; }
.deck-status.wait { display: flex; align-items: center; gap: .6rem; background: var(--raised); color: var(--text-2); }
.deck-status.wait::before { content: ""; width: 1rem; height: 1rem; flex: none; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--orange); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.deck-status.err { background: rgba(229, 72, 77, .08); border: 1px solid rgba(229, 72, 77, .4); color: #FFC9CB; }
.deck-status.err strong { color: #fff; }
.deck-status ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.deck-status li + li { margin-top: .2rem; }
#keep-deck { margin-top: .9rem; }

/* How to play: the format, then two routes, then the open tables. */
.segmented { display: inline-flex; padding: .25rem; margin: 0 0 1.1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.segmented legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.segmented label { margin: 0; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented span { display: block; padding: .45rem .9rem; border-radius: calc(var(--r) - 2px); color: var(--text-3); font: 700 .8rem/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.segmented input:checked + span { background: var(--raised); color: var(--text); box-shadow: inset 0 -2px 0 var(--orange); }
.segmented input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.routes { display: grid; border: 1px solid var(--line); border-radius: var(--r); background: rgba(10, 14, 19, .35); }
.route { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head action" "option action"; align-items: center; gap: .35rem 1.25rem; padding: 1.1rem 1.15rem; }
.route + .route { border-top: 1px solid var(--line); }
.route-head { grid-area: head; }
.route-head h3 { margin: 0; font: 700 1.15rem/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.route-head p { margin: .2rem 0 0; color: var(--text-2); font-size: .88rem; }
.route .form-field.compact { grid-area: option; max-width: 22rem; }
.route .btn { grid-area: action; min-width: 11.5rem; }
.route:not(:has(.form-field)) { grid-template-areas: "head action"; }
.needs-deck { margin: .75rem 0 0; color: var(--text-3); font-size: .85rem; }

.notice { margin: 0 0 1rem; padding: .75rem .9rem; border-radius: var(--r); background: rgba(255, 165, 0, .08); border: 1px solid rgba(255, 165, 0, .35); color: #FFD9A3; font-size: .9rem; }
.seated { margin-bottom: .5rem; padding: 1.25rem; border-radius: var(--r); border: 2px solid var(--orange); background: rgba(255, 87, 34, .06); }
.seated h3 { margin: 0; display: flex; align-items: center; gap: .6rem; font: 700 1.1rem/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.seated h3::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--orange); animation: waiting 1.6s var(--ease-out) infinite; }
@keyframes waiting { 0% { box-shadow: 0 0 0 0 rgba(255, 87, 34, .55); } 100% { box-shadow: 0 0 0 12px rgba(255, 87, 34, 0); } }
.seated .code { margin: .8rem 0 .2rem; font: 700 clamp(2.4rem, 6vw, 3.2rem)/1 var(--display); letter-spacing: .14em; }
.seated p { margin: 0; color: var(--text-2); font-size: .9rem; }
.seated .link { display: flex; gap: .5rem; margin: 1rem 0 .75rem; }
.seated .link input { margin: 0; font-size: .85rem; color: var(--text-2); }

.tables { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tables li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .25rem 1rem; padding: .75rem .9rem; border-radius: var(--r); background: var(--raised); border: 1px solid transparent; transition: border-color .2s; }
.tables li:hover { border-color: var(--line); }
.tables .who { font: 700 1.05rem/1.2 var(--display); letter-spacing: .02em; }
.tables .meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; color: var(--text-3); font-size: .82rem; }
.tables .commander { font: 700 .9rem/1.2 var(--card-name); color: var(--text-2); }
.tables .tag { padding: .05rem .45rem; border-radius: 4px; background: var(--table); color: var(--text-2); font-size: .74rem; }
.tables .live { color: var(--text-3); font: 700 .75rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.tables .empty { display: block; padding: 1rem; background: none; border: 1px dashed var(--line); color: var(--text-3); text-align: center; font-size: .88rem; }

.credits { padding: 1.5rem 1rem 2.5rem; border-top: 1px solid var(--hairline); color: var(--text-3); font-size: .8rem; }
.credits p { margin: 0; }
.credits p + p { margin-top: .25rem; }
.credits a { color: var(--text-2); }

@media (max-width: 860px) {
  .lobby-grid { grid-template-columns: 1fr; }
  .route { grid-template-columns: 1fr; grid-template-areas: "head" "option" "action"; }
  .route:not(:has(.form-field)) { grid-template-areas: "head" "action"; }
  .route .btn { width: 100%; margin-top: .5rem; }
  .route .form-field.compact { max-width: none; }
}
@media (max-width: 560px) {
  .masthead-in { flex-wrap: wrap; gap: .5rem .75rem; padding-block: .6rem; }
  .online { order: 3; }
  .identity input { width: 7.5rem; }
  .deck-card { gap: 1rem; }
  .deck-art { width: 96px; }
  .deck-name { font-size: 1.15rem; }
  .deck-info { gap: .4rem; }
  .segmented { display: flex; }
  .segmented label { flex: 1; text-align: center; }
}

/* ---------- Game: endstep's layout, PDC's colours ---------- */
:root { --opp: #6F8FB8; --target: #5DBB63; }
.game {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: clamp(190px, 16vw, 240px) minmax(0, 1fr) clamp(150px, 12vw, 190px);
  background: radial-gradient(ellipse at 50% 50%, #18202c 0%, var(--bg) 75%);
  overflow: hidden;
}
.rail { background: var(--table); display: flex; flex-direction: column; min-height: 0; }
.rail-left { border-right: 1px solid var(--line); }
.rail-right { border-left: 1px solid var(--line); padding: .75rem .6rem; gap: .6rem; }

/* Player plates: who is deciding glows in their seat colour (orange: you, blue: opponent). */
.plate { padding: .7rem .75rem; display: flex; flex-direction: column; gap: .5rem; transition: background .2s, box-shadow .2s; }
.plate.opp { border-bottom: 1px solid var(--line); }
.plate.me { border-top: 1px solid var(--line); }
.plate.me[data-deciding="true"] { box-shadow: inset 3px 0 0 var(--orange); background: linear-gradient(90deg, rgba(255, 87, 34, .12), transparent); }
.plate.opp[data-deciding="true"] { box-shadow: inset 3px 0 0 var(--opp); background: linear-gradient(90deg, rgba(111, 143, 184, .14), transparent); }
.plate-head { display: flex; align-items: center; gap: .6rem; }
.life-box { position: relative; min-width: 3.4rem; padding: .3rem .45rem; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.life { font: 700 2rem/1 var(--display); }
.life.mid { color: var(--gold); }
.life.low { color: var(--danger); }
.plate.target .life-box { box-shadow: 0 0 0 3px var(--target), 0 0 12px rgba(93, 187, 99, .5); }
.delta { position: absolute; right: -.4rem; top: -.7rem; font: 700 1rem/1 var(--display); animation: rise 1.4s forwards; pointer-events: none; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--danger); }
@keyframes rise { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-1.5rem); } }
.who { min-width: 0; }
.pname { display: block; font: 700 1.1rem/1.1 var(--display); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat { display: block; color: var(--text-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.counts { display: flex; gap: .3rem; flex-wrap: wrap; }
.count { background: var(--raised); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; font-size: .74rem; color: var(--text-2); white-space: nowrap; }
button.count { cursor: pointer; }
button.count:hover:not(:disabled) { border-color: var(--text-3); }
button.count:disabled { opacity: .5; cursor: default; }
.count.poison { color: var(--ok); }
.command { display: flex; gap: .4rem; }
.command .card { --w: 48px; }
.mana { display: flex; gap: .25rem; flex-wrap: wrap; }
.pip { width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); font: 700 .8rem/1 var(--display); cursor: pointer; color: #000; }
.pip.W { background: #F8F6F1; } .pip.U { background: #4FA3E0; } .pip.B { background: #8C7F86; }
.pip.R { background: #E8533F; } .pip.G { background: #3BA45B; } .pip.C { background: #BEB9B2; }

/* Decision panel: the step, what to do, one main verb. */
.decision { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .45rem; padding: 1rem .75rem; min-height: 0; overflow-y: auto; }
.d-turn { margin: 0; color: var(--text-3); font: 700 .75rem/1.2 var(--display); letter-spacing: .07em; text-transform: uppercase; }
.d-title { margin: 0; font: 700 1.3rem/1.15 var(--display); letter-spacing: .01em; }
.d-hint { margin: 0; color: var(--text-2); font-size: .84rem; line-height: 1.45; }
.d-hint:empty, .d-prompt:empty, .d-keys:empty, .d-turn:empty { display: none; }
.d-prompt { margin: 0; font-size: .84rem; line-height: 1.45; white-space: pre-line; max-height: 10rem; overflow: auto; }
.d-actions { display: flex; flex-direction: column; gap: .4rem; margin-top: .35rem; }
.btn.big { padding: .95rem 1rem; font-size: 1rem; }
.btn.armed { background: var(--danger); border-color: var(--danger); animation: pulse 1s ease-in-out infinite; }
.btn.danger { border-color: var(--danger); color: #ffb3b5; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(229, 72, 77, .25); } }
.d-keys { margin: .1rem 0 0; color: var(--text-3); font-size: .72rem; }
.d-menu { display: none; }
/* "Pass until" pills under the main buttons. */
.d-skip { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; margin-top: .2rem; }
.d-skip:empty { display: none; }
.skip-label { grid-column: 1 / -1; color: var(--text-3); font: 700 .68rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.pill { display: inline-flex; align-items: center; justify-content: space-between; gap: .35rem; min-width: 0; padding: .3rem .55rem; border-radius: 999px; border: 1px solid var(--line); background: var(--raised); color: var(--text-2); font: 600 .74rem/1.1 var(--body); cursor: pointer; }
.pill:hover:not(:disabled) { border-color: var(--gold); color: var(--text); }
.pill:disabled { opacity: .45; cursor: default; }
.pill kbd { font-size: .65rem; padding: .05rem .25rem; }
.pill.stop { border-color: var(--orange); color: var(--orange-light); }
.pill.stop { grid-column: 1 / -1; justify-content: center; }
.skip-on { grid-column: 1 / -1; margin: 0; color: var(--gold); font: 700 .8rem/1.3 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.decision.nope { animation: nope .35s; }
@keyframes nope { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Board: opponent above the gold midline, you below, hand at the bottom. */
.board { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) 24px minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.field { display: flex; flex-direction: column; justify-content: space-evenly; min-height: 0; padding: 2px 10px; overflow: hidden; }
/* The gold midline is a thin rule; the turn line sits on it, between the two halves. */
.midline { position: relative; }
.midline::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent); opacity: .65; }
.stack-badge { display: none; }
.turn-line {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; white-space: nowrap;
  max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis;
  padding: .2rem .7rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--gold);
  font: 700 .72rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--text);
}
.turn-line[data-live="mine"] { border-color: var(--orange); color: var(--orange-light); }
.turn-line[data-live="opp"] { border-color: var(--opp); color: #A9C0E0; }
.field.active { background: linear-gradient(var(--tint-dir, 0deg), rgba(255, 87, 34, .07), transparent 70%); }
.opp-field.active { --tint-dir: 180deg; background: linear-gradient(180deg, rgba(111, 143, 184, .08), transparent 70%); }
.my-field.active { background: linear-gradient(0deg, rgba(255, 87, 34, .07), transparent 70%); }
.turn-banner {
  position: absolute; left: 50%; top: 50%; z-index: 7; transform: translate(-50%, -50%); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .9rem 2.4rem; border-radius: .75rem;
  background: rgba(10, 14, 19, .9); border: 1px solid var(--orange); box-shadow: 0 16px 50px rgba(0, 0, 0, .6);
  animation: banner 1.7s ease-in-out both;
}
.turn-banner[data-live="opp"] { border-color: var(--opp); }
.turn-banner .big { font: 700 clamp(1.6rem, 3.4vw, 2.6rem)/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.turn-banner[data-live="mine"] .big { color: var(--orange-light); }
.turn-banner[data-live="opp"] .big { color: #A9C0E0; }
.turn-banner .small { font: 700 .85rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -40%); } 15%, 75% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -55%); } }
.row { display: flex; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 6px 4px; min-height: calc(var(--cw, 80px) * 88 / 63 + 12px); scrollbar-width: thin; }
.row.lands { gap: 6px; }

/* A slot swaps width and height when its card is tapped, so the row reflows. */
.slot { position: relative; flex: none; width: var(--cw, 80px); height: calc(var(--cw, 80px) * 88 / 63); transition: width .22s ease-out, height .22s ease-out; }
.slot.tapped { width: calc(var(--cw, 80px) * 88 / 63); height: var(--cw, 80px); }
.slot > .card, .slot > .att > .card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform .22s ease-out, box-shadow .15s, translate .3s ease-out; }
.slot.tapped > .card { transform: translate(-50%, -50%) rotate(90deg); }
.slot.has-att { margin-top: calc(var(--cw, 80px) * .22 * var(--na, 1)); }
.slot > .att { position: absolute; inset: 0; transform: translateY(calc(var(--cw, 80px) * -.22 * var(--i))); }
.slot > .att > .card { transform: translate(-50%, -50%); }
/* Identical permanents stack, each offset by 18% of a card. */
.pile { position: relative; flex: none; height: calc(var(--cw, 80px) * 88 / 63); width: calc(var(--cw, 80px) * (1 + .18 * (var(--n) - 1))); }
.pile.tapped { height: var(--cw, 80px); width: calc(var(--cw, 80px) * (88 / 63 + .18 * (var(--n) - 1))); }
.pile > .slot { position: absolute; top: 0; left: calc(var(--cw, 80px) * .18 * var(--i)); }
/* "Déployer N" on a pile, "Empiler N" once spread, as endstep's Fan out / Stack chips. */
.stack-chip {
  position: absolute; z-index: 4; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 6px; cursor: pointer;
  background: rgba(28, 33, 43, .9); backdrop-filter: blur(4px); border: 1px solid var(--line);
  color: var(--gold); font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums;
  transition: color .12s, border-color .12s, transform .1s;
}
.stack-chip:hover { color: var(--text); border-color: var(--gold); }
.stack-chip:active { transform: scale(.95); }
.stack-chip svg { width: 12px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pile > .stack-chip { top: 4px; right: 4px; }
.spread { position: relative; flex: none; display: flex; align-items: center; gap: 4px; }
.spread > .stack-chip { top: 4px; left: 4px; color: var(--text-2); }
.volume { display: flex; flex-direction: column; gap: .35rem; margin: .25rem 0; }
.pace { border: 1px solid var(--line); border-radius: var(--r); padding: .5rem .75rem .6rem; margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.pace legend { color: var(--text-2); font-size: .85rem; padding: 0 .3rem; }
.pace label { display: flex; align-items: center; gap: .35rem; margin: 0; color: var(--text); }
.pace input { width: auto; margin: 0; accent-color: var(--orange); }
.volume input { accent-color: var(--orange); margin: 0; padding: 0; }

.hand { display: flex; justify-content: center; align-items: flex-end; gap: 0; padding: 10px 16px 8px; min-height: calc(var(--hw) * 88 / 63 + 18px); background: linear-gradient(transparent, rgba(0, 0, 0, .35)); overflow-x: auto; overflow-y: visible; --hw: clamp(84px, 13vh, 128px); }
.hand .card { --w: var(--hw); margin: 0 calc(var(--hw) * -.1); transition: transform .12s, box-shadow .15s; }
.hand .card:hover, .hand .card:focus-visible { transform: translateY(-16%) scale(1.04); z-index: 2; }

/* The stack floats over the board; drag it by its header. */
.stack-panel { position: absolute; right: 16px; top: 16px; z-index: 5; width: min(360px, 60%); max-height: 55%; display: flex; flex-direction: column; background: rgba(20, 24, 33, .96); border: 1px solid var(--gold); border-radius: .75rem; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); }
.stack-head { display: flex; align-items: center; justify-content: space-between; padding: .45rem .75rem; border-bottom: 1px solid var(--line); cursor: move; touch-action: none; }
.stack-head h2 { margin: 0; font: 700 .95rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.stack-head span { font: 700 .85rem var(--display); color: var(--gold); }
.stack-panel.collapsed .stack { display: none; }
.stack-panel.collapsed .stack-head { border-bottom: none; }
.stack-panel.collapsed .stack-head span::after { content: " · afficher"; color: var(--text-3); font-weight: 600; }
.stack { list-style: none; margin: 0; padding: .5rem; display: flex; flex-direction: column; gap: .4rem; overflow: auto; }
.stack-item { display: flex; align-items: center; gap: .55rem; background: var(--raised); border-radius: var(--r); padding: .35rem .5rem .35rem .35rem; border-left: 3px solid var(--opp); }
.stack-item.mine { border-left-color: var(--orange); }
.stack-item.top { box-shadow: 0 0 0 1px var(--gold); }
.stack-item .card { --w: 44px; }
.stack-item p { margin: 0; font-size: .8rem; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Right rail: turn chip, priority, the phase rail (endstep's cartouches), score. */
.turn-chip {
  margin: 0; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: .1rem .45rem;
  padding: .5rem .5rem .45rem; border-radius: 6px; border: 1px solid var(--line); background: var(--raised);
}
.turn-chip[data-live="mine"] { border-color: rgba(255, 87, 34, .7); background: linear-gradient(180deg, rgba(255, 87, 34, .2), rgba(255, 87, 34, .06)); }
.turn-chip[data-live="opp"] { border-color: rgba(111, 143, 184, .75); background: linear-gradient(180deg, rgba(111, 143, 184, .22), rgba(111, 143, 184, .06)); }
.turn-chip .owner { font: 700 .95rem/1.1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.turn-chip[data-live="mine"] .owner { color: var(--orange-light); }
.turn-chip[data-live="opp"] .owner { color: #A9C0E0; }
.turn-chip .num { font: 700 1.25rem/1 var(--display); color: var(--text); }
.turn-chip .who { flex: 1 1 100%; text-align: center; font-size: .72rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turn-chip.arrive { animation: arrive .6s ease-out; }
@keyframes arrive { from { filter: brightness(1.6); transform: translateY(-3px); } }
.prio { margin: 0; min-height: 1.2em; text-align: center; font: 700 .78rem/1.2 var(--display); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.prio.me { color: var(--orange-light); }
.prio.them { color: #9DB4D4; }

.phases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; flex: 1; min-height: 0; }
.pb {
  position: relative; flex: 1 1 0; min-height: 20px;
  transition: flex-grow .4s cubic-bezier(.2, .8, .2, 1), min-height .4s cubic-bezier(.2, .8, .2, 1), opacity .3s, border-color .3s, background .3s, box-shadow .3s; display: grid; grid-template-columns: 16px 1fr 16px; align-items: center; gap: 4px;
  padding: 0 4px; border: 1px solid #222936; border-radius: 4px; background: #0F131A; color: var(--text-2);
}
.pb--past { opacity: .45; }
.pb .now { display: none; }
.pb--current .ph { display: none; }
.pb--current .now { display: flex; animation: now-in .35s ease-out; }
@keyframes now-in { from { opacity: 0; transform: translateY(4px); } }
.ph { text-align: center; font: 600 .68rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* The current step grows into a cartouche: its name in big type and what happens there. */
.pb--current { flex-grow: 3.4; min-height: 64px; color: var(--text); border-color: rgba(255, 87, 34, .75); background: linear-gradient(180deg, rgba(255, 87, 34, .18), rgba(255, 87, 34, .05)); box-shadow: 0 0 16px rgba(255, 87, 34, .22), 0 6px 18px rgba(0, 0, 0, .45); }
.pb--current[data-turn="opp"] { border-color: rgba(111, 143, 184, .8); background: linear-gradient(180deg, rgba(111, 143, 184, .2), rgba(111, 143, 184, .05)); box-shadow: 0 0 16px rgba(111, 143, 184, .22), 0 6px 18px rgba(0, 0, 0, .45); }
.now { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; min-width: 0; }
.now-name { font: 700 1.05rem/1.05 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.now-help { font-size: .7rem; line-height: 1.25; color: var(--text-2); }
.pb.flash::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; pointer-events: none; animation: ring .56s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes ring { from { box-shadow: 0 0 0 0 rgba(255, 165, 0, .45); } to { box-shadow: 0 0 0 34px rgba(255, 165, 0, 0); } }
.pb-section { display: flex; align-items: center; gap: .4rem; padding: 1px 2px; flex: none; }
.pb-section .rule { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .45; }
.pb-section .label { font-size: .62rem; font-style: italic; color: #C4A15F; letter-spacing: .02em; }
.stop, .stop-gap { width: 14px; height: 14px; }
.stop { border-radius: 50%; border: 2px solid #3A4250; background: transparent; padding: 0; cursor: pointer; }
.stop:hover { border-color: var(--text-3); }
.stop.me.on { background: var(--orange); border-color: var(--orange); }
.stop.opp.on { background: var(--opp); border-color: var(--opp); }
.score { margin: 0; text-align: center; color: var(--text-2); font: 700 .85rem/1.2 var(--display); letter-spacing: .03em; }
.score:empty { display: none; }
.rail-btns { display: flex; flex-direction: column; gap: .35rem; }
.unread { display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; margin-left: .3rem; border-radius: 999px; background: var(--orange); color: #fff; font: 700 .7rem/1 var(--display); }

/* Chat: a panel over the bottom right of the board. */
.chat-panel {
  position: fixed; right: calc(clamp(150px, 12vw, 190px) + 12px); bottom: 12px; z-index: 9;
  width: min(340px, calc(100vw - 24px)); max-height: min(60vh, 520px); display: flex; flex-direction: column;
  background: rgba(20, 24, 33, .97); border: 1px solid var(--line); border-radius: .75rem; box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: .5rem .75rem; border-bottom: 1px solid var(--line); }
.chat-head h2 { margin: 0; font: 700 .95rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.chat-lines { list-style: none; margin: 0; padding: .6rem .75rem; overflow-y: auto; flex: 1; min-height: 6rem; display: flex; flex-direction: column; gap: .5rem; }
.chat-lines li { max-width: 85%; padding: .4rem .6rem; border-radius: .6rem; background: var(--raised); border: 1px solid var(--line); }
.chat-lines li.mine { align-self: flex-end; border-color: rgba(255, 87, 34, .5); background: rgba(255, 87, 34, .1); }
.chat-lines li.theirs { align-self: flex-start; border-color: rgba(111, 143, 184, .5); }
.chat-lines li.empty { align-self: center; background: none; border: none; color: var(--text-3); font-size: .85rem; }
.chat-lines .who { font: 700 .72rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.chat-lines time { margin-left: .4rem; font-size: .68rem; color: var(--text-3); }
.chat-lines p { margin: .2rem 0 0; font-size: .9rem; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-typing { margin: 0; padding: 0 .75rem; min-height: 1.1rem; color: var(--text-3); font-size: .78rem; font-style: italic; }
.chat-quick { display: flex; flex-wrap: wrap; gap: .3rem; padding: .3rem .75rem; }
.chat-form { display: flex; gap: .4rem; padding: .5rem .75rem .7rem; }
.chat-form input { margin: 0; flex: 1; }

/* Arrows for targets, attacks and blocks. */
.arrows { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
.arrow { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 9 6; animation: dash .9s linear infinite; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .8)); }
.arrow.target { stroke: #FF7043; }
.arrow.attack { stroke: var(--danger); }
.arrow.block { stroke: #4FA3E0; }
@keyframes dash { to { stroke-dashoffset: -15; } }

/* Hover preview, next to the card. */
.tip { position: fixed; z-index: 25; pointer-events: none; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .7)); }
.tip .card { --w: 250px; cursor: default; }

/* ---------- Cards ---------- */
.card {
  --w: var(--cw, 80px);
  position: relative; flex: none;
  width: var(--w); aspect-ratio: 63 / 88;
  border-radius: 4.5% / 3.2%;
  background: #23262d;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform .15s, box-shadow .15s;
}
.card img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.card .frame {
  position: absolute; inset: 0; border-radius: inherit; padding: 6%;
  background: linear-gradient(160deg, #3a3f4b, #20232a); border: 1px solid #4a5060;
  display: flex; flex-direction: column; gap: 3%; overflow: hidden;
  font-size: calc(var(--w) * 0.085); line-height: 1.15;
}
.card .frame b { font-weight: 700; font-family: var(--display); font-size: 1.15em; }
.card .frame i { color: var(--text-2); font-style: normal; font-size: .9em; }
.card .frame small { color: var(--text-3); overflow: hidden; }
.card.has-img .frame { display: none; }
.card.back { background: repeating-linear-gradient(45deg, #2b1a14 0 6px, #3a2218 6px 12px); border: 2px solid #6b3a26; cursor: default; }
.hand .card.tapped, .stack .card.tapped, .command .card.tapped { transform: none; }
/* Halos: gold castable, orange what auto-pay would tap or a chosen target, green a possible target,
   red attacking, blue blocking. */
.card.playable { box-shadow: 0 0 0 2px var(--gold-light, #FFB84D), 0 0 12px rgba(255, 165, 0, .45); }
.card.autotap { box-shadow: 0 0 0 3px var(--orange), 0 0 14px rgba(255, 87, 34, .6); }
.card.selectable { box-shadow: 0 0 0 3px var(--target), 0 0 14px rgba(93, 187, 99, .55); }
.card.highlighted { box-shadow: 0 0 0 3px var(--orange), 0 0 16px rgba(255, 87, 34, .7); }
.card.attacking { box-shadow: 0 0 0 3px var(--danger), 0 0 14px rgba(229, 72, 77, .5); }
.card.blocking { box-shadow: 0 0 0 3px #4FA3E0, 0 0 14px rgba(79, 163, 224, .5); }
.card.sick::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(79, 163, 224, .2); pointer-events: none; }
.card .zz { position: absolute; right: 8%; top: 22%; z-index: 1; font: 700 calc(var(--w) * .12)/1 var(--display); color: #CFE8FF; text-shadow: 0 1px 3px #000; letter-spacing: .1em; opacity: .85; pointer-events: none; }
.card .pt {
  position: absolute; right: -3px; bottom: -3px; z-index: 1;
  font: 700 calc(var(--w) * 0.15)/1 var(--display);
  background: rgba(10, 14, 19, .92); border: 1px solid var(--gold); border-radius: 4px; padding: 2px 4px; pointer-events: none;
}
.card .pt.hurt { color: var(--danger); border-color: var(--danger); }
.card .pt.loyalty { border-radius: 4px 4px 50% 50%; }
.card .badges { position: absolute; left: -3px; top: -3px; z-index: 1; display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.card .badges span { font: 700 calc(var(--w) * 0.12)/1 var(--display); background: rgba(10, 14, 19, .92); border-radius: 999px; padding: 2px 5px; color: var(--gold); }
.card .badges .cmd { color: var(--orange); border-radius: 4px; }
/* Attackers step toward the opponent. */
.my-field .card.attacking { translate: 0 -14%; }
.opp-field .card.attacking { translate: 0 14%; }
/* A card that left play: a copy fades to ash where it stood. */
.card.ghost { position: fixed; z-index: 8; pointer-events: none; animation: dissolve .65s ease-in forwards; }
@keyframes dissolve { to { opacity: 0; filter: grayscale(1) brightness(.5) blur(2px); scale: .9; } }

/* ---------- Dialogs ---------- */
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(5, 7, 10, .72); padding: 1rem; }
.modal.min { inset: auto 1rem 1rem auto; background: none; padding: 0; place-items: end; }
.modal.min .dialog > :not(header) { display: none; }
.dialog { background: var(--table); border: 1px solid var(--line); border-radius: .75rem; width: min(920px, 100%); max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.dialog header { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.dialog h2 { font: 700 1.3rem/1.2 var(--display); letter-spacing: .02em; margin: 0; flex: 1; }
.dialog .sub { color: var(--text-2); margin: 0; padding: .75rem 1.25rem 0; }
.dialog .body { padding: 1rem 1.25rem; overflow: auto; display: flex; flex-wrap: wrap; gap: .75rem; align-content: flex-start; }
.dialog .body.list { flex-direction: column; flex-wrap: nowrap; }
.dialog footer { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; padding: .9rem 1.25rem; border-top: 1px solid var(--line); }
.dialog footer .info { margin-right: auto; color: var(--text-3); font-size: .85rem; }
.opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; background: none; border: 2px solid transparent; border-radius: var(--r); padding: .25rem; cursor: pointer; }
.opt .card { --w: clamp(90px, 13vw, 150px); }
.opt.picked { border-color: var(--gold); }
.opt .num { position: absolute; top: -.5rem; right: -.5rem; background: var(--orange); border-radius: 50%; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; font: 700 .9rem/1 var(--display); z-index: 2; }
.opt .lbl { font-size: .8rem; color: var(--text-2); max-width: 150px; text-align: center; }
.choice { text-align: left; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); padding: .7rem 1rem; cursor: pointer; width: 100%; }
.choice:hover:not(:disabled) { border-color: var(--text-3); }
.choice.picked { border-color: var(--gold); background: rgba(255,165,0,.08); }
.choice:disabled { opacity: .45; cursor: default; }
.amount { display: flex; align-items: center; gap: .75rem; background: var(--raised); border-radius: var(--r); padding: .5rem .75rem; width: 100%; }
.amount .card { --w: 56px; }
.amount .name { flex: 1; }
.amount input { width: 4.5rem; margin: 0; text-align: center; }
.revealed { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 1.25rem 0; }
.revealed .card { --w: 70px; }

.zoom { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(5,7,10,.8); padding: 1rem; }
.zoom-box { display: flex; gap: 1.25rem; align-items: flex-start; max-width: min(94vw, 780px); max-height: 92vh; overflow: auto; background: var(--table); border: 1px solid var(--line); border-radius: .75rem; padding: 1rem; }
.zoom-box .card { --w: min(42vw, 320px); cursor: default; }
.zoom-text { min-width: 0; }
.zoom-text h2 { margin: 0 0 .25rem; font: 700 1.5rem/1.1 var(--display); }
.zoom-text .type { margin: 0 0 .75rem; color: var(--text-2); }
.zoom-text .rules { margin: 0 0 .75rem; white-space: pre-line; }
.zoom-text .state { margin: 0 0 .5rem; color: var(--gold); font: 700 .9rem var(--display); letter-spacing: .04em; text-transform: uppercase; }
.zoom-text dl { display: grid; grid-template-columns: auto auto; gap: .2rem 1rem; margin: 0 0 .75rem; justify-content: start; }
.zoom-text dt { color: var(--text-3); }
.zoom-text dd { margin: 0; font-weight: 600; }
.zoom-text .hint { color: var(--text-3); font-size: .8rem; margin: 0; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 0; }
.keys dd { margin: 0; color: var(--text-2); }
kbd { font: 600 .8rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--raised); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: .2rem .4rem; white-space: nowrap; }
.log { list-style: none; margin: 0; padding: 0; font-size: .82rem; color: var(--text-2); }
.log li { padding: .25rem 0; border-bottom: 1px solid rgba(255,255,255,.05); }

.toasts { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 40; display: grid; gap: .5rem; width: min(90vw, 480px); pointer-events: none; }
.toast { background: var(--raised); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--r); padding: .7rem 1rem; box-shadow: 0 8px 24px rgba(0,0,0,.5); font-size: .9rem; animation: in .2s; }
.toast.err { border-left-color: var(--danger); }
@keyframes in { from { opacity: 0; transform: translateY(-8px); } }

.over { text-align: center; }
.over .big { font: 700 clamp(2rem, 6vw, 3rem)/1 var(--display); text-transform: uppercase; margin: .5rem 0; }

/* Phones: one column. Plates, board, decision dock and hand stack up; the phase stops move to the menu. */
@media (max-width: 820px) {
  .game { display: flex; flex-direction: column; }
  .rail-left, .board { display: contents; }
  .rail-right { display: none; }
  .plate.opp { order: 0; }
  .opp-field { order: 1; flex: 1; }
  .stack-panel { order: 2; }
  .midline { order: 3; height: 24px; flex: none; }
  .my-field { order: 4; flex: 1; }
  .decision { order: 5; flex: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .5rem .6rem; background: var(--table); border-top: 1px solid var(--line); }
  .plate.me { order: 6; }
  .hand { order: 7; --hw: clamp(60px, 17vw, 84px); }
  /* In the flow on phones, above the midline: it never hides the board. */
  .stack-panel { position: static; flex: none; width: auto; margin: 4px 8px; max-height: 30vh; left: auto !important; top: auto !important; }
  .d-menu { display: inline-block; padding: .3rem .6rem; }
  .d-hint, .d-keys { display: none; }
  .d-title { font-size: 1rem; flex: 1 1 100%; }
  .d-turn { flex: 1 1 100%; }
  .d-prompt { flex: 1 1 100%; max-height: 4.5rem; font-size: .8rem; }
  .d-actions { flex-direction: row; margin: 0; width: 100%; }
  .d-actions .btn { flex: 1; }
  .btn.big { padding: .7rem; font-size: .9rem; }
  /* Plates fold to one line: life, name, counts, commander. */
  .plate { flex-direction: row; flex-wrap: nowrap; align-items: center; padding: .3rem .5rem; gap: .4rem; overflow-x: auto; }
  .plate-head { flex: none; gap: .4rem; }
  .seat { display: none; }
  .pname { font-size: .95rem; max-width: 7.5rem; }
  .life { font-size: 1.35rem; }
  .life-box { min-width: 2.4rem; padding: .2rem .35rem; }
  .counts { flex-wrap: nowrap; }
  .command .card { --w: 28px; }
  .mana { flex-wrap: nowrap; }
  .pip { width: 1.5rem; height: 1.5rem; }
  .count { font-size: .66rem; padding: .05rem .4rem; }
  .decision { position: relative; }
  .d-menu { position: absolute; top: .4rem; right: .6rem; }
  .stack-panel { max-height: 22vh; }
  .stack-item p { -webkit-line-clamp: 3; }
  .row { padding: 3px 2px; gap: 5px; }
  .tip { display: none; }
  .chat-panel { right: 8px; left: 8px; bottom: 8px; width: auto; max-height: 70vh; }
  .zoom-box { flex-direction: column; align-items: center; }
  .zoom-box .card { --w: min(70vw, 300px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}