/* CZ: the rarity scale of a Magic card read as a hierarchy, as in the logo. Ink for the ground and
   the keylines, uncommon silver for the interface, rare gold for what you can act on, mythic orange
   for your turn and your wins. Inter for everything, Beleren only for card names. */
@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 {
  --ink: #05070A;
  --bg: #0A0E13;
  --table: #13161C;
  --raised: #1B1F26;
  --line: #2C313A;
  --hairline: rgba(255, 255, 255, .07);
  --text: #F4F2ED;
  --text-2: #BCC1CA;
  --text-3: #8D95A3;
  --silver: #C7CDD6;
  --silver-lo: #8A93A2;
  --silver-metal: linear-gradient(135deg, #FFFFFF 0%, #C7CDD6 34%, #8A93A2 52%, #E9ECF1 72%, #959EAD 100%);
  --gold: #E3C06A;
  --gold-hi: #F6DE9C;
  --gold-text: #F3DFA8; /* text on a gold tint */
  --gold-metal: linear-gradient(135deg, #FFF1C2 0%, #EBCB76 32%, #B98E38 56%, #F3D98E 76%, #A9802F 100%);
  --mythic: #F2762E;
  --mythic-hi: #FFAE6B;
  --mythic-metal: linear-gradient(135deg, #FFD9A0 0%, #F59A45 32%, #D85A20 56%, #F7A95A 76%, #B9421B 100%);
  --danger: #E5484D;
  --danger-text: #F0646A; /* the same red, light enough for small text on the table (4.5:1) */
  --ok: #3DD68C;
  --body: Inter, system-ui, sans-serif;
  --card-name: Beleren, Inter, serif;
  --r: 0.5rem;
  --shadow-rest: 0 6px 18px -4px rgba(0, 0, 0, .55);
  --shadow-float: 0 14px 28px -10px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .35); /* panels over the table or the page */
  --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; text-decoration-color: rgba(227, 192, 106, .45); }
a:hover { color: var(--gold-hi); text-decoration-color: currentColor; }
::selection { background: rgba(227, 192, 106, .32); color: #fff; }
* { scrollbar-color: #343B48 transparent; scrollbar-width: thin; }
button, input, select, textarea { font: inherit; color: inherit; caret-color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
small { font-size: max(.75rem, .85em); } /* never under 12 px */
[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: the primary one is rare gold with the logo's black keyline, the secondary one silver. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 600 .9rem/1.2 var(--body);
  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:disabled { background: var(--raised); border-color: var(--line); color: var(--text-3); text-shadow: none; }
.btn.primary { color: #1B1407; border-color: var(--ink); background: var(--gold-metal); box-shadow: 0 0 0 1px rgba(227, 192, 106, .2), 0 6px 14px -6px rgba(0, 0, 0, .7); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.07) saturate(1.05); transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(227, 192, 106, .32), 0 10px 20px -8px rgba(0, 0, 0, .8); }
.btn.secondary { color: var(--silver); border-color: var(--silver-lo); background: rgba(199, 205, 214, .06); }
.btn.secondary:hover:not(:disabled) { background: rgba(199, 205, 214, .12); border-color: var(--silver); color: #fff; }
.btn.small { padding: .4rem .7rem; font-size: .8rem; }
.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(--gold); box-shadow: 0 0 0 3px rgba(227, 192, 106, .18); }
::placeholder { color: #7D8594; }
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 under a silver sheen, gold for what you can act on.
   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 70% 45% at 50% -12%, rgba(199, 205, 214, .08), 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; } }
/* The home, its header and footer use the whole screen, up to a width where lines stay readable. */
:root { --page-max: 1840px; }
.wrap.wide { max-width: var(--page-max); padding-inline: clamp(1rem, 2.5vw, 2.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: 600 1.5rem/1 var(--body); letter-spacing: -.01em; color: var(--text); text-decoration: none; }
.wordmark img { display: block; height: 2rem; width: auto; }
.tagline { color: var(--text-3); font: 500 .85rem/1 var(--body); letter-spacing: .01em; }
@media (max-width: 900px) { .tagline { display: none; } }
.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 { border-color: var(--silver-lo); }
.identity:focus-within { border-color: var(--gold); } /* the pseudo field draws its focus on the pill */
.identity-label { font: 600 .75rem/1 var(--body); 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: 600 clamp(2.1rem, 5.5vw, 3.4rem)/1.04 var(--body); letter-spacing: -.035em; text-wrap: balance; }
.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); grid-template-rows: auto auto 1fr; gap: clamp(1rem, 2vw, 1.75rem); align-items: start; padding-bottom: 2.5rem; }
.play-block { grid-row: span 3; } /* the open tables and the friends tuck under the deck */
/* Wide screens: three columns, your deck, how to play, and who is around (tables, friends). */
@media (min-width: 1280px) {
  .lobby-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3.6fr); grid-template-rows: auto 1fr; }
  .deck-block { grid-column: 1; grid-row: 1 / span 2; }
  .play-block { grid-column: 2; grid-row: 1 / span 2; }
  .tables-block { grid-column: 3; grid-row: 1; }
  .friends-block { grid-column: 3; grid-row: 2; }
  .intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .2rem 2.5rem; max-width: none; }
  .intro .promise { grid-column: 1; }
  .intro .formats { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}
.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: 600 clamp(1.2rem, 2.2vw, 1.5rem)/1.2 var(--body); letter-spacing: -.01em; }
/* The rarity pip: the logo's silver, its black keyline and the thin light ring around it. */
.section-title::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--silver-metal); box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 2.5px rgba(255, 255, 255, .14); }
.sub-title { margin: 1.75rem 0 .75rem; font: 600 1rem/1.2 var(--body); color: var(--silver); }
.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, 11vw, 210px); 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-legal { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .5rem; border-radius: 4px; background: var(--silver-metal); color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px rgba(255, 255, 255, .12); font: 600 .75rem/1.3 var(--body); }
.badge-legal 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: 600 .82rem/1.2 var(--body); letter-spacing: -.01em; 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(--silver); }
.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-block; vertical-align: -.2rem; width: 1.1rem; height: 1.1rem; margin-right: .4rem; border: 1px solid var(--line); border-radius: 4px;
  background: linear-gradient(var(--text-3), var(--text-3)) center / 8px 1.5px no-repeat, linear-gradient(var(--text-3), var(--text-3)) center / 1.5px 8px no-repeat; }
.partner[open] summary { margin-bottom: .6rem; }
.partner[open] summary::before { background-size: 8px 1.5px, 0 0; }
.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(--silver); 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: 600 .8rem/1.2 var(--body); cursor: pointer; transition: background .2s, color .2s; }
.segmented input:checked + span { background: var(--raised); color: var(--text); box-shadow: inset 0 -2px 0 var(--silver); }
.segmented input:focus-visible + span { outline: 2px solid var(--gold); 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: 600 1.15rem/1.2 var(--body); letter-spacing: -.01em; }
.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(227, 192, 106, .08); border: 1px solid rgba(227, 192, 106, .35); color: var(--gold-text); font-size: .9rem; }
.seated { margin-bottom: .5rem; padding: 1.25rem; border-radius: var(--r); border: 1px solid rgba(227, 192, 106, .55); background: linear-gradient(180deg, rgba(227, 192, 106, .1), rgba(227, 192, 106, .02)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.seated h3 { margin: 0; display: flex; align-items: center; gap: .6rem; font: 600 1.1rem/1.2 var(--body); letter-spacing: -.01em; }
.seated h3::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--gold); animation: waiting 1.6s var(--ease-out) infinite; }
@keyframes waiting { 0% { box-shadow: 0 0 0 0 rgba(227, 192, 106, .55); } 100% { box-shadow: 0 0 0 12px rgba(227, 192, 106, 0); } }
.seated .code { margin: .8rem 0 .2rem; font: 600 clamp(2.4rem, 6vw, 3.2rem)/1 var(--body); letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--gold-hi); }
.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: 600 1.05rem/1.2 var(--body); }
.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: .75rem; }
.tables .live { color: var(--text-3); font: 600 .75rem/1 var(--body); }
.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); }

/* Account: the guest's pseudo, or the signed-in player's name linking to their profile. */
.account { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.account .identity { margin: 0; }
.identity.me { cursor: pointer; color: var(--text); text-decoration: none; padding: .35rem .9rem .35rem .75rem; }
.me-name { font-weight: 600; }
.tag { padding: .05rem .45rem; border-radius: 4px; background: var(--table); color: var(--text-2); font-size: .75rem; white-space: nowrap; }
.tag.public { background: rgba(199, 205, 214, .12); color: var(--silver); }
.tags { display: flex; gap: .35rem; }
/* Ranked: queue buttons, rating badges, leaderboard, game clock. */
.routes.queues { margin-bottom: 1.25rem; }
.btn.waiting { animation: pulse-gold 1.6s var(--ease-out) infinite; }
@keyframes pulse-gold { 50% { box-shadow: 0 0 0 6px rgba(227, 192, 106, .2); } }
.ratings { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.rating-badge { display: inline-flex; align-items: baseline; gap: .5rem; padding: .45rem .75rem; border-radius: var(--r); background: var(--raised); border: 1px solid var(--line); color: var(--text-2); text-decoration: none; font-size: .85rem; }
.rating-badge strong { font: 600 1.25rem/1 var(--body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.rating-badge small { color: var(--text-3); }
.rating-badge:hover { border-color: var(--silver-lo); color: var(--text); }
.ladder-table tr.me th, .ladder-table tr.me td { color: var(--text); background: rgba(199, 205, 214, .07); }
.ladder-table td:first-child, .ladder-table th:first-child { text-align: left; width: 2.5rem; }
.ladder-table :is(th, td):nth-child(2), .ladder-table :is(th, td):nth-child(3) { text-align: left; }
.ladders { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr)); gap: clamp(1rem, 2vw, 1.75rem); align-items: start; padding-bottom: 2.5rem; }
/* Ranked tiers wear their metal. */
.tier { font-weight: 600; }
.tier[data-tier="Bronze"] { color: #CC9563; }
.tier[data-tier="Argent"] { color: var(--silver); }
.tier[data-tier="Or"] { color: var(--gold); }
.tier[data-tier="Platine"] { color: #A9E2D8; }
.tier[data-tier="Diamant"] { color: #9DCBFF; }
.tier[data-tier="Mythique"] { color: var(--mythic-hi); }
/* Social: notification bell and panel, spectators option. */
.bell { position: relative; display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--line); background: var(--table); cursor: pointer; }
.bell:hover { border-color: var(--silver-lo); }
.bell svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--text-2); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.bell .unread { position: absolute; top: -.3rem; right: -.35rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; border-radius: 999px; background: var(--gold-metal); color: #1B1407; box-shadow: 0 0 0 1.5px var(--ink); font: 600 .75rem/1.1rem var(--body); font-variant-numeric: tabular-nums; text-align: center; }
.notes { position: fixed; z-index: 30; top: 4rem; right: max(1rem, calc((100vw - var(--page-max)) / 2 + 1rem)); width: min(380px, calc(100vw - 2rem)); max-height: 70vh; overflow: auto; padding: .9rem; border-radius: .75rem; border: 1px solid var(--line); background: var(--table); box-shadow: var(--shadow-float); }
.notes { text-align: left; }
.notes header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.notes h2 { margin: 0; font: 600 1rem/1.2 var(--body); letter-spacing: -.01em; }
.notes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.notes li { display: grid; gap: .1rem; padding: .5rem .65rem; border-radius: var(--r); background: var(--raised); }
.notes li.unread { background: rgba(227, 192, 106, .08); box-shadow: inset 0 0 0 1px rgba(227, 192, 106, .28); }
.notes li a { color: var(--text); text-decoration: none; font-size: .88rem; }
.notes li a:hover { color: var(--gold); }
.notes li small { color: var(--text-3); font-size: .75rem; }
/* Private messages: a drawer at the bottom right, like the game chat. */
.dm-panel { position: fixed; z-index: 28; right: 1rem; bottom: 1rem; width: min(360px, calc(100vw - 2rem)); height: min(480px, 70vh); display: flex; flex-direction: column; border-radius: .75rem; border: 1px solid var(--line); background: var(--table); box-shadow: var(--shadow-float); }
.dm-panel .chat-head { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.dm-panel .chat-head h2 { flex: 1; margin: 0; font: 600 1rem/1.2 var(--body); letter-spacing: -.01em; }
.dm-panel .chat-lines { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .45rem; }
.dm-panel .chat-lines li { max-width: 85%; padding: .4rem .6rem; border-radius: .6rem; background: var(--raised); }
.dm-panel .chat-lines li.mine { align-self: flex-end; background: rgba(227, 192, 106, .14); }
.dm-panel .chat-lines li.empty { align-self: center; background: none; color: var(--text-3); font-size: .85rem; }
.dm-panel .chat-lines p { margin: 0; font-size: .88rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.dm-panel .chat-lines time { display: block; margin-top: .15rem; color: var(--text-3); font-size: .75rem; }
.dm-panel .chat-form { display: flex; gap: .5rem; padding: .6rem .8rem; border-top: 1px solid var(--line); }
.dm-panel .chat-form input { margin: 0; }
.dm-panel > .hint { padding: .6rem .8rem; border-top: 1px solid var(--line); }
#dm-list .conv { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .5rem; align-items: baseline; padding: 0; border: none; background: none; color: var(--text); text-align: left; cursor: pointer; }
#dm-list .conv .last { grid-column: 1 / -1; color: var(--text-2); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dm-list .conv small { grid-column: 1 / -1; color: var(--text-3); font-size: .75rem; }
#dm-list select { margin-top: .6rem; }
.link-btn.msg { position: relative; }
.link-btn.msg .unread { display: inline-block; margin-left: .3rem; min-width: 1.05rem; padding: 0 .25rem; border-radius: 999px; background: var(--gold-metal); color: #1B1407; font: 600 .75rem/1.05rem var(--body); text-align: center; text-decoration: none; }
label.check { display: flex; align-items: center; gap: .5rem; margin: .9rem 0 0; color: var(--text-3); font-size: .85rem; cursor: pointer; }
label.check input { width: auto; margin: 0; accent-color: var(--gold); }

/* Tournaments. */
.tournaments details.round { margin-bottom: .75rem; }
.tournaments details.round summary { cursor: pointer; margin-bottom: .5rem; font: 600 1rem/1.2 var(--body); letter-spacing: -.01em; color: var(--text-2); }
.champion { margin: .5rem 0 0; font: 600 1.1rem/1.2 var(--body); color: var(--mythic-hi); letter-spacing: -.01em; }
.create-tournament label { margin: 0; }
.count.clock { font: 700 .82rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); }
.count.clock.running { border-color: var(--gold); color: var(--gold-hi); }
.count.clock.low { border-color: var(--danger); color: #FF9EA1; }
/* The lobby's format switch, and the profile's format chips. */
.segmented.formats { margin: 1.25rem 0 0; }
.segmented.formats span { padding: .6rem 1.1rem; font-size: .9rem; }
.segmented.small { display: inline-flex; gap: .2rem; margin: 0 0 1rem; }
.segmented.small button { padding: .35rem .8rem; border: none; border-radius: calc(var(--r) - 2px); background: none; color: var(--text-3); font: 600 .78rem/1.2 var(--body); cursor: pointer; }
.segmented.small button.on { background: var(--raised); color: var(--text); box-shadow: inset 0 -2px 0 var(--silver); }
.player-link { color: inherit; text-decoration: none; }
.player-link:hover { color: var(--gold); text-decoration: underline; }
.link-btn.danger { color: #FF9EA1; }
.dialog.narrow { width: min(440px, 100%); }
.dialog.narrow label { margin: 0; }
.form-error { margin: 0; color: #FFC9CB; font-size: .88rem; }
.form-error:empty { display: none; }
.auth .btn.primary { align-self: flex-start; }

/* Saved decks, in the deck block's first tab. */
.my-decks { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; max-height: 22rem; overflow: auto; }
.my-deck { width: 100%; display: flex; align-items: center; gap: .75rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--raised); text-align: left; cursor: pointer; transition: border-color .2s; }
.my-deck:hover { border-color: var(--text-3); }
.my-deck.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(227, 192, 106, .35); }
.my-deck img { width: 2.6rem; aspect-ratio: 63 / 88; object-fit: cover; object-position: top; border-radius: 3px; flex: none; background: var(--bg); }
.my-deck-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.my-deck-title { font: 600 1rem/1.2 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-deck-cmd { font: 700 .82rem/1.3 var(--card-name); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-decks .empty, .friends .empty { display: block; padding: 1rem; border: 1px dashed var(--line); border-radius: var(--r); background: none; color: var(--text-3); font-size: .88rem; text-align: center; }
.deck-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
#editing-note { margin-bottom: .9rem; }

/* Friends: who is online, requests, and an invitation in one click. */
.pitch { margin: 0 0 1rem; color: var(--text-2); font-size: .92rem; }
.pitch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.friends { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; }
.friends:empty { display: none; }
#friend-requests { margin-bottom: .6rem; }
.friends li { display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: var(--r); background: var(--raised); }
.friends .who { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; line-height: 1.3; }
.friends .who small { color: var(--text-3); font-weight: 400; font-size: .78rem; }
.friends .request { flex-wrap: wrap; background: rgba(227, 192, 106, .08); border: 1px solid rgba(227, 192, 106, .35); }
.friends .request .who { display: block; font-weight: 400; color: var(--gold-text); }
.friends .request .who a { font-weight: 600; color: #fff; }
.friends .acts { display: flex; align-items: center; gap: .6rem; }
.friend .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--line); flex: none; }
.friend.is-online .dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(61, 214, 140, .15); }
.friend.is-playing .dot { background: var(--silver); }
.friend.is-offline .who a, .friend.pending .who a { color: var(--text-2); }
.add-friend { display: flex; gap: .5rem; margin-top: .9rem; }
.add-friend input { margin: 0; padding-block: .45rem; }
.notice .invite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.notice .invite + .invite { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid rgba(227, 192, 106, .25); }
.notice .invite strong, .notice .commander { color: #fff; }
.notice .commander { font: 700 .95rem/1.2 var(--card-name); }
.notice .acts { display: flex; align-items: center; gap: .75rem; }

/* Profile: a player's record, results by deck and opponent, recent matches, decks. */
.profile { padding-bottom: 2.5rem; }
.back { display: inline-block; margin-top: 1.5rem; color: var(--text-2); font-size: .88rem; text-decoration: none; }
.back::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .55rem; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: translateY(-.1rem) rotate(45deg); }
.back:hover { color: var(--text); }
.profile-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; padding: 1.25rem 0 clamp(1.25rem, 3vw, 2rem); }
.since { margin: .6rem 0 0; color: var(--text-3); font-size: .9rem; }
.friend-state { display: flex; align-items: center; gap: 1rem; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); align-items: start; margin-bottom: clamp(1rem, 2.5vw, 1.75rem); }
.record { display: grid; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); gap: .5rem; }
.stat { display: flex; flex-direction: column; padding: .8rem .9rem; border-radius: var(--r); background: var(--raised); }
.stat .value { font: 600 clamp(1.5rem, 6vw, 2rem)/1 var(--body); white-space: nowrap; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat:first-child .value { color: var(--mythic-hi); }
.stat .label { margin-top: .35rem; color: var(--text-3); font-size: .78rem; }
.tally { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tally th, .tally td { padding: .45rem .5rem; text-align: right; border-bottom: 1px solid var(--hairline); }
.tally th:first-child { text-align: left; font-weight: 600; overflow-wrap: anywhere; }
.tally thead th { color: var(--text-3); font: 600 .75rem/1.2 var(--body); }
.tally abbr { text-decoration: none; }
.tally td { width: 3rem; white-space: nowrap; color: var(--text-2); font-variant-numeric: tabular-nums; }
.recent { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; }
.recent li { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: var(--r); background: var(--raised); }
.recent .res { width: 1.9rem; height: 1.9rem; flex: none; display: grid; place-items: center; border-radius: 6px; font: 600 .95rem/1 var(--body); background: var(--table); color: var(--text-3); }
.recent li.win .res { background: var(--mythic-metal); color: #1F0B03; box-shadow: 0 0 0 1px var(--ink); }
.recent li.loss .res { background: rgba(229, 72, 77, .15); color: #FF9EA1; }
.r-main { min-width: 0; flex: 1; }
.recent .vs { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent .commander { font: 700 .9rem/1.2 var(--card-name); color: var(--text-2); }
.recent .meta { display: flex; flex-wrap: wrap; gap: .2rem .8rem; color: var(--text-3); font-size: .8rem; }
.deck-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: .75rem; }
.deck-tile { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .9rem; padding: .9rem; border-radius: var(--r); background: var(--raised); }
.deck-tile img { width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 4.5% / 3.2%; background: var(--bg); box-shadow: var(--shadow-rest); }
.deck-tile-body { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-width: 0; }
.deck-tile h3 { margin: 0; font: 600 1.15rem/1.2 var(--body); overflow-wrap: anywhere; }
.deck-tile .cmd { margin: 0; font: 700 .9rem/1.25 var(--card-name); color: var(--text-2); }
.tile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: .35rem; }
.tile-actions:empty { display: none; }
.tile-links { display: flex; gap: 1rem; margin-top: .2rem; }
.decklist { grid-column: 1 / -1; margin: 0; max-height: 20rem; overflow: auto; padding: .75rem .9rem; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); font: .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-2); white-space: pre; }
.loading { padding: 3rem 0; color: var(--text-3); }
.profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.account-block { margin-top: clamp(1rem, 2.5vw, 1.75rem); }
.account-block .sub-title:first-of-type { margin-top: 0; }
.friends .context { white-space: pre-line; color: var(--text-2); }
.incident .who small, .incident .who details { display: block; margin-top: .15rem; }
.incident pre { max-height: 14rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin .record { margin-bottom: .5rem; }

/* An update under way or an announcement: a bar above every screen, game included. */
.notice-bar { padding: .55rem 1rem; background: #1D1910; border-bottom: 1px solid rgba(227, 192, 106, .6); color: var(--gold-text); font-size: .88rem; text-align: center; }
body:has(#game:not([hidden])) .notice-bar { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 35; width: min(720px, calc(100% - 16px)); border: 1px solid rgba(227, 192, 106, .6); border-radius: var(--r); background: rgba(18, 22, 29, .97); box-shadow: var(--shadow-float); pointer-events: none; }
.notice-bar p { margin: 0; }
/* Legal pages: plain reading. */
.legal { max-width: 46rem; padding-bottom: 3rem; }
.legal .headline { margin: 1.25rem 0 1rem; }
.legal .section-title { margin-top: 2rem; }
.legal p, .legal li { color: var(--text-2); }
.legal li + li { margin-top: .35rem; }
.legal code { color: var(--text); }
.notice-bar p + p { margin-top: .25rem; color: var(--text); }

@media (max-width: 860px) {
  .lobby-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .play-block { grid-row: auto; }
  .profile-grid { grid-template-columns: minmax(0, 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 { position: static; } /* three lines on a phone: it scrolls away instead of covering a fifth of the screen */
  .masthead-in { flex-wrap: wrap; gap: .5rem .75rem; padding-block: .6rem; }
  .online { order: 3; }
  .identity input { width: 7.5rem; }
  .account { gap: .4rem; flex-wrap: wrap; }
  .identity.me { white-space: nowrap; }
  .account .btn { padding-inline: .6rem; }
  .deck-tile { grid-template-columns: 4.2rem minmax(0, 1fr); }
  .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; you play in mythic orange, the opponent in blue ---------- */
:root { --me: var(--mythic); --opp: #6F8FB8; --target: #5DBB63; }
.game {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: clamp(190px, 16vw, 240px) minmax(0, 1fr) clamp(168px, 13vw, 200px);
  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); justify-content: space-between; }
/* The live journal between the two plates. */
.feed { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .4rem; padding: .7rem .75rem; overflow: hidden; }
.feed h2 { margin: 0; color: var(--text-3); font: 600 .75rem/1.2 var(--body); }
.feed ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; align-content: start; overflow-y: auto; min-height: 0; font-size: .76rem; line-height: 1.35; color: var(--text-2); mask-image: linear-gradient(#000 70%, transparent); }
.feed li:first-child { color: var(--text); }
.feed li.empty { color: var(--text-3); }
.feed li.turn { color: var(--silver); font: 600 .78rem/1.2 var(--body); }
.feed li + li { padding-top: .35rem; border-top: 1px solid var(--hairline); }
.rail-right { border-left: 1px solid var(--line); padding: .75rem .6rem; gap: .6rem; }

/* Player plates: who is deciding is framed in their seat colour (mythic: 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 0 0 0 1px rgba(242, 118, 46, .55); background: linear-gradient(90deg, rgba(242, 118, 46, .14), transparent); }
.plate.opp[data-deciding="true"] { box-shadow: inset 0 0 0 1px rgba(111, 143, 184, .6); 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: 600 2rem/1 var(--body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.life.low { color: var(--danger-text); }
.plate.target .life-box { box-shadow: 0 0 0 3px var(--target), 0 0 12px rgba(93, 187, 99, .5); }
.plate.can-target .life-box { box-shadow: 0 0 0 2px var(--target); } /* a player this targeting accepts */
.delta { position: absolute; right: -.4rem; top: -.7rem; font: 600 1rem/1 var(--body); animation: rise 1.4s forwards; pointer-events: none; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--danger-text); }
@keyframes rise { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-1.5rem); } }
.who { min-width: 0; }
.pname { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 600 1rem/1.15 var(--body); overflow: hidden; overflow-wrap: anywhere; }
.seat { display: block; color: var(--text-3); font-size: .75rem; }
.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: .75rem; 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); }
.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: 600 .8rem/1 var(--body); cursor: pointer; color: #000; }
.pip.W { background: #F8F6F1; } .pip.U { background: #4FA3E0; } .pip.B { background: #7A716F; }
.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-title { margin: 0; font: 600 1.3rem/1.15 var(--body); }
.d-hint { margin: 0; color: var(--text-2); font-size: .84rem; line-height: 1.45; }
.d-hint:empty, .d-prompt:empty, .d-keys: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; }
.d-picks { display: flex; flex-wrap: wrap; gap: .4rem; }
/* The safety net: above everything, at the top of the table. */
.stuck-bar { position: fixed; z-index: 45; top: 8px; left: 50%; transform: translateX(-50%); width: min(720px, calc(100% - 16px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .7rem .9rem; border: 1px solid rgba(229, 72, 77, .6); border-radius: var(--r); background: #1E1416; box-shadow: var(--shadow-float); }
.stuck-bar p { margin: 0; color: #FFC9CB; font-size: .9rem; }
.stuck-bar p strong { color: #fff; }
.stuck-bar .acts { display: flex; flex-wrap: wrap; gap: .4rem; }
.d-picks:empty { display: none; }
.d-picks .card { --w: 64px; }
.d-prompt .card { --w: 48px; float: left; margin: 0 .55rem .25rem 0; } /* the spell being paid for or aimed */
.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: .75rem; }
.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: 600 .75rem/1.2 var(--body); }
.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 .75rem/1.1 var(--body); cursor: pointer; }
.pill:hover:not(:disabled) { border-color: var(--silver-lo); color: var(--text); }
.pill:disabled { opacity: .45; cursor: default; }
.pill kbd { font-size: .75rem; padding: .05rem .25rem; }
.pill.resume { grid-column: 1 / -1; justify-content: center; border-color: var(--gold); color: var(--gold-hi); }
.skip-on { grid-column: 1 / -1; margin: 0; color: var(--gold); font: 600 .8rem/1.3 var(--body); }
.decision.nope { animation: nope .35s; }
/* On a computer the decision is a window over the table: drag it anywhere, it stays there. */
@media (min-width: 821px) {
  .decision.floating {
    position: fixed; z-index: 9; left: var(--dx, 40%); top: var(--dy, 30%);
    flex: none; width: 300px; max-height: calc(100vh - 16px);
    padding: .9rem 1rem 1rem; border: 1px solid #39414F; border-radius: .75rem;
    background: rgba(18, 22, 29, .97); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px var(--ink), var(--shadow-float);
    cursor: move; touch-action: none; user-select: none;
    animation: float-in .3s var(--ease-out);
  }
  .decision.floating::before { content: ""; align-self: center; width: 2.5rem; height: 4px; margin: -.35rem 0 .15rem; border-radius: 2px; background: #3A4250; }
  .decision.floating.dragging { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px var(--ink), 0 20px 34px -12px rgba(0, 0, 0, .85), 0 3px 8px rgba(0, 0, 0, .4); }
  .decision.floating button { cursor: pointer; }
}
@keyframes float-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes nope { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Board: opponent above the silver 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: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-height: 0; padding: 2px 10px; overflow: hidden; }
.field .rows { display: flex; flex-direction: column; justify-content: space-evenly; min-width: 0; height: 100%; }
/* The general's spot, at the edge of each half as on a playmat: the card, its tax, or where it went. */
.cz { display: flex; flex-direction: column; justify-content: center; gap: .5rem; }
.cz-slot { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .35rem .35rem .3rem; border-radius: .6rem; border: 1px solid rgba(199, 205, 214, .14); background: rgba(199, 205, 214, .04); }
.cz-slot .card { --w: var(--cw, 80px); }
.cz.pair .cz-slot .card, .cz.pair .cz-empty { --w: calc(var(--cw, 80px) * .6); width: var(--w); } /* partners: two generals in the height of one */
.cz .badges .cmd { display: none; } /* the spot already says it */
.cz-empty { display: grid; place-items: center; width: var(--cw, 80px); aspect-ratio: 63 / 88; padding: 6%; border: 1px dashed var(--line); border-radius: 4.5% / 3.2%; color: var(--text-3); font: 700 12px/1.2 var(--card-name); text-align: center; overflow: hidden; }
.cz-empty img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; opacity: .35; filter: grayscale(.8); }
.cz-empty:has(img) { padding: 0; }
.cz-label { max-width: calc(var(--cw, 80px) + 1rem); color: var(--text-3); font: 600 .75rem/1.2 var(--body); text-align: center; }
.cz-slot.away .cz-label { color: var(--text-2); }
/* The silver 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(--silver-lo) 20%, var(--silver) 50%, var(--silver-lo) 80%, transparent); opacity: .55; }
.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(--silver-lo);
  font: 600 .78rem/1.2 var(--body); color: var(--text);
}
.turn-line[data-live="mine"] { border-color: var(--me); color: var(--mythic-hi); }
.turn-line[data-live="opp"] { border-color: var(--opp); color: #A9C0E0; }
/* Whose turn: their half of the table is framed and tinted in their colour (mythic: you, blue:
   the opponent); the other half dims a little while nobody is choosing anything on it. */
.field { position: relative; margin: 3px 6px; border-radius: .75rem; transition: background .4s, box-shadow .4s; }
.field::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: rgba(5, 7, 10, .3); opacity: 0; transition: opacity .4s; pointer-events: none; }
.field.idle::after { opacity: 1; }
.my-field.active { background: linear-gradient(0deg, rgba(242, 118, 46, .15), rgba(242, 118, 46, .03) 75%); box-shadow: inset 0 0 0 2px rgba(242, 118, 46, .6), inset 0 0 50px rgba(242, 118, 46, .1); }
.opp-field.active { background: linear-gradient(180deg, rgba(111, 143, 184, .18), rgba(111, 143, 184, .03) 75%); box-shadow: inset 0 0 0 2px rgba(111, 143, 184, .7), inset 0 0 50px rgba(111, 143, 184, .12); }
.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, .92); border: 1px solid var(--me); box-shadow: 0 0 0 1px var(--ink), var(--shadow-float);
  animation: banner 1.7s ease-in-out both;
}
.turn-banner[data-live="opp"] { border-color: var(--opp); }
.turn-banner .big { font: 600 clamp(1.6rem, 3.4vw, 2.6rem)/1 var(--body); letter-spacing: -.01em; }
.turn-banner[data-live="mine"] .big { color: var(--mythic-hi); }
.turn-banner[data-live="opp"] .big { color: #A9C0E0; }
.turn-banner .small { font: 600 .85rem/1 var(--body); letter-spacing: -.01em; 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(--silver); font: 600 12px/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(--silver-lo); }
.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(--gold); }
.volume input { accent-color: var(--gold); margin: 0; padding: 0; }

.hand { display: flex; justify-content: center; align-items: flex-end; gap: 0; min-width: 0; padding: 10px 16px 8px; min-height: calc(var(--hw) * 88 / 63 + 18px); background: linear-gradient(transparent, rgba(0, 0, 0, .35)); --hw: clamp(84px, 13vh, 128px); }
/* No scrolling here: it would clip the lifted card. A big hand overlaps more instead (fitCards). */
.hand .card { --w: var(--hw); margin: 0 var(--hm, 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(18, 22, 29, .96); border: 1px solid #39414F; border-radius: .75rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px var(--ink), var(--shadow-float); }
.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: 600 .95rem/1 var(--body); letter-spacing: -.01em; }
.stack-head span { font: 600 .85rem var(--body); color: var(--silver); }
.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: linear-gradient(90deg, rgba(111, 143, 184, .14), var(--raised) 40%); border: 1px solid rgba(111, 143, 184, .45); border-radius: var(--r); padding: .35rem .5rem .35rem .35rem; }
.stack-item.mine { background: linear-gradient(90deg, rgba(199, 205, 214, .12), var(--raised) 40%); border-color: rgba(199, 205, 214, .45); }
.stack-item.top { box-shadow: 0 0 0 1px var(--silver); } /* resolves next */
.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(242, 118, 46, .7); background: linear-gradient(180deg, rgba(242, 118, 46, .2), rgba(242, 118, 46, .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: 600 .95rem/1.1 var(--body); letter-spacing: -.01em; }
.turn-chip[data-live="mine"] .owner { color: var(--mythic-hi); }
.turn-chip[data-live="opp"] .owner { color: #A9C0E0; }
.turn-chip .num { font: 600 1.25rem/1 var(--body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.turn-chip .who { flex: 1 1 100%; text-align: center; font-size: .75rem; 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: 600 .78rem/1.2 var(--body); color: var(--text-3); }
.prio.me { color: var(--mythic-hi); }
.prio.them { color: #9DB4D4; }

.phases-legend { display: flex; justify-content: space-between; margin: 0 0 -2px; padding: 0 2px; color: var(--text-3); font: 600 .75rem/1.2 var(--body); } /* what the dots on each side are */
.phases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.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 .75rem/1 var(--body); 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(242, 118, 46, .75); background: linear-gradient(180deg, rgba(242, 118, 46, .18), rgba(242, 118, 46, .05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 10px -3px rgba(0, 0, 0, .55); }
.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: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 10px -3px rgba(0, 0, 0, .55); }
.now { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; min-width: 0; }
.now-name { font: 600 .85rem/1.1 var(--body); text-wrap: balance; }
.now-help { font-size: .75rem; 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(199, 205, 214, .4); } to { box-shadow: 0 0 0 34px rgba(199, 205, 214, 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(--silver-lo), transparent); opacity: .6; }
.pb-section .label { font-size: .75rem; font-style: italic; color: #A9B0BC; }
.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(--silver); border-color: var(--silver); }
.stop.opp.on { background: var(--opp); border-color: var(--opp); }
.score { margin: 0; text-align: center; color: var(--text-2); font: 600 .85rem/1.2 var(--body); }
.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(--gold-metal); color: #1B1407; font: 600 .75rem/1 var(--body); font-variant-numeric: tabular-nums; }

/* Chat: a panel over the bottom right of the board. */
.chat-panel {
  position: fixed; right: calc(clamp(168px, 13vw, 200px) + 12px); bottom: 12px; z-index: 9;
  width: min(340px, calc(100vw - 24px)); max-height: min(60vh, 520px); display: flex; flex-direction: column;
  background: #12161D; border: 1px solid var(--line); border-radius: .75rem; box-shadow: var(--shadow-float);
}
.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: 600 .95rem/1 var(--body); letter-spacing: -.01em; }
.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(199, 205, 214, .4); background: rgba(199, 205, 214, .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: 600 .75rem/1 var(--body); color: var(--text-2); }
.chat-lines time { margin-left: .4rem; font-size: .75rem; 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: #F1F3F7; }
.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; }
.tip .badges .cmd, .tip .zz, .zoom-box .badges .cmd, .zoom-box .zz { display: none; }

/* ---------- 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: max(12px, calc(var(--w) * 0.085)); line-height: 1.15;
}
.card .frame b { font-weight: 600; font-family: var(--body); font-size: 1.15em; }
.card .frame i { color: var(--text-2); font-style: normal; font-size: max(12px, .9em); }
.card .frame small { display: none; color: var(--text-3); overflow: hidden; } /* rules text: in the zoom only */
.tip .card .frame small, .zoom .card .frame small { display: block; }
.card.has-img .frame { display: none; }
.card.back { background: repeating-linear-gradient(45deg, #161B23 0 6px, #1E2430 6px 12px); border: 2px solid #5E6674; box-shadow: inset 0 0 0 1px var(--ink); cursor: default; }
.hand .card.tapped, .stack .card.tapped, .command .card.tapped { transform: none; }
/* Halos: gold castable, silver 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-hi), 0 0 12px rgba(227, 192, 106, .5); }
.card.autotap { box-shadow: 0 0 0 3px #F1F3F7, 0 0 14px rgba(241, 243, 247, .45); }
.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 #F1F3F7, 0 0 16px rgba(241, 243, 247, .55); }
.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: 600 calc(var(--w) * .12)/1 var(--body); 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: 600 max(12px, calc(var(--w) * 0.15))/1 var(--body);
  background: rgba(10, 14, 19, .92); border: 1px solid var(--silver-lo); border-radius: 4px; padding: 2px 4px; pointer-events: none;
}
.stack-item .card .pt, .stack-item .card .badges { display: none; } /* too small to read: the line beside says it */
.card .pt.hurt { color: var(--danger-text); 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: 600 max(12px, calc(var(--w) * 0.12))/1 var(--body); background: rgba(10, 14, 19, .92); border-radius: 999px; padding: 2px 5px; color: var(--silver); }
.card .badges .cmd { color: #fff; border-radius: 4px; }
/* Attackers step toward the opponent. */
.my-field .card.attacking { translate: 0 -14%; }
.my-field .row.permanents { padding-top: calc(var(--cw, 80px) * .2 + 6px); min-height: calc(var(--cw, 80px) * (88 / 63 + .2) + 12px); }
.opp-field .row.permanents { padding-bottom: calc(var(--cw, 80px) * .2 + 6px); min-height: calc(var(--cw, 80px) * (88 / 63 + .2) + 12px); }
.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: .75rem auto auto 50%; transform: translateX(-50%); background: none; padding: 0; place-items: start; } /* a slim bar at the top: the menu and the hand stay free */
.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: var(--shadow-float); }
.dialog header { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.dialog h2 { font: 600 1.3rem/1.2 var(--body); 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:empty { display: none; }
.dialog:focus { outline: none; } /* focused only so that Space does not pick an option */
.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(--gold-metal); color: #1B1407; box-shadow: 0 0 0 1.5px var(--ink); border-radius: 50%; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; font: 600 .9rem/1 var(--body); 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(227, 192, 106, .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; }
/* The cards above a question never push its choices off screen: they scroll, the choices too. */
.dialog { overflow: hidden; }
.dialog .body { min-height: 0; }
.dialog-cards { flex: none; max-height: 38vh; overflow: auto; }
.revealed-fold summary { padding: .75rem 1.25rem 0; color: var(--text-2); cursor: pointer; }
.revealed .card { --w: 70px; }
.opt .twins { color: var(--text-3); font-variant-numeric: tabular-nums; }
.body.reveal .card { --w: clamp(110px, 24vw, 200px); } /* what is revealed is the whole point: show it big */

.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(--card-name); }
.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(--silver); font: 600 .9rem var(--body); letter-spacing: -.01em; }
.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 rgba(227, 192, 106, .45); 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-color: rgba(229, 72, 77, .6); }
@keyframes in { from { opacity: 0; transform: translateY(-8px); } }

.over { text-align: center; }
.over .big { font: 600 clamp(2rem, 6vw, 3rem)/1 var(--body); letter-spacing: -.03em; margin: .5rem 0; }
.over .big.win { color: var(--mythic-hi); }
.over-mark { display: block; margin: .25rem auto 0; height: 68px; width: auto; }
.over-mark:not(.win) { opacity: .55; }
.over-why { margin: 0; color: var(--text-2); }
/* Mana symbols inside text: payment prompts, the stack, card costs. */
.sym { display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; margin: 0 .06em; border-radius: 50%; vertical-align: -.22em; background: #BEB9B2; color: #000; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); font: 700 max(12px, .72em)/1 var(--body); }
.sym.W { background: #F8F6F1; } .sym.U { background: #4FA3E0; } .sym.B { background: #7A716F; } .sym.R { background: #E8533F; } .sym.G { background: #3BA45B; }
.sym.T::after { content: ""; width: .38em; height: .55em; border: 1.5px solid #000; border-radius: 1px; transform: rotate(90deg); }
.card:focus-visible { outline-color: #fff; } /* gold already means playable */

/* 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; }
  .feed { display: none; }
  .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; }
  /* The step's guidance stays on a phone (who blocks what, what you will lose), in two lines;
     the keyboard does not. */
  .d-hint { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; flex: 1 1 100%; margin: 0; font-size: .8rem; cursor: pointer; }
  .d-hint.open { -webkit-line-clamp: unset; } /* a tap shows the whole of it */
  /* The board needs the height: the "pass until" pills on one row that scrolls, not a 2x2 grid. */
  .d-skip { display: flex; flex: 1 1 100%; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-top: 0; }
  .d-skip .pill { flex: none; }
  .d-skip:empty { display: none; }
  .d-keys, .pill kbd { display: none; }
  /* Thumb-sized targets. */
  .pill, .d-menu, .plate .count, .life-box, .dialog header .btn, .d-actions .btn { min-height: 44px; }
  .plate .count { justify-content: center; padding-inline: .22rem; } /* four counts and the life fit 375px */
  .plate .count { display: inline-flex; align-items: center; }
  .d-title { font-size: 1rem; flex: 1 1 100%; padding-right: 4.75rem; min-height: 2.6rem; } /* clear of the Menu button, beside and below */
  .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 .45rem; gap: .3rem; overflow-x: auto; }
  .plate-head { flex: none; gap: .4rem; }
  .seat { display: none; }
  .pname { display: block; font-size: .95rem; max-width: 6rem; white-space: nowrap; text-overflow: ellipsis; }
  .life { font-size: 1.35rem; }
  .life-box { min-width: 44px; padding: .2rem .35rem; }
  .counts { flex-wrap: nowrap; }
  .mana { flex-wrap: nowrap; }
  .pip { width: 1.5rem; height: 1.5rem; }
  .count { font-size: .75rem; padding: .05rem .3rem; }
  .counts { gap: .2rem; }
  .decision { position: relative; }
  .d-menu { position: absolute; top: .4rem; right: .6rem; }
  .stack-panel { max-height: 16vh; }
  .stack-item p { -webkit-line-clamp: 2; }
  .field { overflow-y: auto; } /* cards keep 44px: a crowded field scrolls */
  .decision { z-index: 7; } /* the arrows pass under the dock, not across its buttons */
  .dialog footer { flex-wrap: wrap; }
  .dialog footer .info { flex: 1 1 100%; }
  .hand { padding-bottom: env(safe-area-inset-bottom); } /* above the iPhone's home bar */
  .d-skip { flex-wrap: wrap; }
  .d-skip .skip-label { display: block; flex: 1 1 100%; } /* named, and wrapping rather than hiding a pill */
  .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; }
}