/* Duel of Champions — one stylesheet, one set of tokens.
   Fonts are bundled locally (SIL OFL, see assets/fonts) so the game stays offline. */

@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 800; font-display: swap; src: url('./assets/fonts/cinzel-400-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 800; font-display: swap; src: url('./assets/fonts/cinzel-400-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url('./assets/fonts/alegreya-sans-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url('./assets/fonts/alegreya-sans-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url('./assets/fonts/alegreya-sans-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url('./assets/fonts/alegreya-sans-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url('./assets/fonts/alegreya-sans-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url('./assets/fonts/alegreya-sans-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;
  --font-display: "Cinzel", Georgia, "Times New Roman", serif;
  --font-body: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --font-num: 700 1em/1 "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --bg: #0a1317;
  --panel: #0a1619e6;
  --panel-solid: #0d1a1f;
  --panel-raised: #12252b;
  --line: #9c8556;
  --line-soft: #9c855640;
  --gold: #c9a961;
  --gold-light: #f1d79b;
  --gold-deep: #7d6234;
  --ink: #efe8d6;
  --ink-2: #cfd0c2;
  --muted: #a3ada6;
  --parchment: linear-gradient(125deg, #ece0c6, #d6c7a9 75%, #e4d5b7);
  --parchment-ink: #2c261d;
  --attack: #f6d48f;
  --retaliation: #b9d7ea;
  --health: #f2a395;
  --ok: #98e0b1;
  --danger: #ff9580;
  --header-h: 56px;
  --radius: 4px;
  --frame: inset 0 0 0 1px #000c, inset 0 0 0 3px #08121699, inset 0 0 0 4px #5d4d31;
  --shadow: 0 6px 16px #000a;
  --hand-w: 112px;
  font-family: var(--font-body);
  font-size: 15px;
  font-feature-settings: "lnum" 1;
  font-synthesis: none;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-width: 320px; color: var(--ink); line-height: 1.45;
  background: linear-gradient(#05101870, #06111890), url('./assets/art/arena-v1.png') center top / cover fixed, var(--bg);
}
body.battle-mode { background-image: radial-gradient(ellipse at 50% 45%, #0000 35%, #020709b0 100%), linear-gradient(90deg, #04101766, #08121722, #04101777), url('./assets/art/arena-v1.png'); }
button, input, select { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
button, select, input { transition: border-color .18s, background-color .18s, box-shadow .18s, color .18s, filter .18s, opacity .18s; }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; text-shadow: 0 2px 6px #0008; }
h1 { font-size: clamp(38px, 4.4vw, 64px); line-height: 1.06; }
h2 { font-size: 30px; line-height: 1.15; }
h3 { font-size: 21px; line-height: 1.2; }
p { margin-bottom: 14px; }
::selection { background: #806c42; color: #fff; }
.muted { color: var(--muted); }
.eyebrow { font: 700 11px/1.3 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; vertical-align: -.14em; }
.artwork { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.artwork::before { content: ""; position: absolute; left: 0; width: 100%; aspect-ratio: var(--art-ratio, 1); top: var(--art-top, 50%); transform: translateY(var(--art-offset, -50%)); background-image: var(--art-image); background-image: var(--art-image-set, var(--art-image)); background-size: var(--art-size, cover); background-position: var(--art-position, center); background-repeat: no-repeat; }
.crest { position: relative; display: inline-flex; flex-shrink: 0; overflow: hidden; border-radius: 3px; border: 1px solid #bfa368; box-shadow: 0 0 40px #a98a3e22; }

/* ---------- Ambient light (torches at the arena edges) ---------- */
.ambient { position: fixed; z-index: 0; pointer-events: none; border-radius: 50%; mix-blend-mode: screen; opacity: .55; animation: torch-flicker 3.6s infinite; }
.ambient-one { width: 46vw; height: 54vh; left: -16vw; bottom: -18vh; background: radial-gradient(closest-side, #ff9a3c55, #ff6a1a1c 55%, transparent); }
.ambient-two { width: 46vw; height: 54vh; right: -16vw; bottom: -18vh; background: radial-gradient(closest-side, #ff9a3c4d, #ff6a1a18 55%, transparent); animation-delay: -1.7s; animation-duration: 4.3s; }
.ambience { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.ambient-fog { position: fixed; inset: -20% -30%; z-index: 0; pointer-events: none; opacity: .5; background: radial-gradient(ellipse 40% 22% at 30% 72%, #cfd9e01a, transparent 70%), radial-gradient(ellipse 35% 18% at 72% 60%, #cfd9e014, transparent 70%), radial-gradient(ellipse 50% 20% at 50% 90%, #d9d2c014, transparent 70%); animation: fog-drift 46s ease-in-out infinite alternate; }
.site-header, main, .site-footer { position: relative; z-index: 1; }

/* ---------- Buttons and fields ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 18px; border: 1px solid #927c53; border-radius: 2px; background: #10202599; color: var(--gold-light); font: 700 13px/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; box-shadow: inset 0 0 0 2px #070d1090, 0 3px 7px #0005; }
.button:hover:not(:disabled) { border-color: #e6c983; background: #18303699; box-shadow: inset 0 0 0 2px #070d1090, 0 0 14px #e8bb6233, 0 3px 7px #0005; }
.button.primary { color: #22190b; border-color: #f1d193; background: linear-gradient(180deg, #f0cd85, #cfa85f 45%, #b98d45 52%, #e2bb6a); box-shadow: inset 0 0 0 2px #7d5d2c, inset 0 0 0 3px #f2d48f, 0 3px 10px #0008; text-shadow: 0 1px 0 #ffe9b366; }
.button.primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: inset 0 0 0 2px #7d5d2c, inset 0 0 0 3px #f2d48f, 0 0 18px #ffcf6a66, 0 3px 10px #0008; }
.button.primary:disabled { filter: grayscale(.85) brightness(.55); }
.button.secondary { background: #10202599; }
.button.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.button.ghost:hover:not(:disabled) { color: var(--gold-light); background: #ffffff0d; border-color: transparent; box-shadow: none; }
.button.full { width: 100%; }
.button.small { min-height: 30px; padding: 5px 10px; font-size: 11px; }
.button:disabled { opacity: .55; }
.field { width: 100%; min-width: 0; padding: 9px 12px; border: 1px solid #81714f; border-radius: 2px; background: #0b1519e8; color: var(--ink); font-size: 14px; }
.field:focus { border-color: var(--gold-light); outline: none; box-shadow: 0 0 0 3px #f1d79b22; }
.form-label { display: block; margin: 18px 0 7px; font: 700 11px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #cfc6ab; }
.segmented { display: flex; gap: 3px; padding: 3px; border: 1px solid #81714f; border-radius: 2px; background: #0b1519e8; }
.segmented button { flex: 1; padding: 8px; border-radius: 1px; font-size: 13px; color: var(--muted); }
.segmented button:hover { color: var(--ink); }
.segmented button.active { background: #4c4935; color: #f7e6b6; box-shadow: inset 0 0 0 1px #9c865d; }
.empty-message { grid-column: 1 / -1; margin: 0; padding: 50px 20px; text-align: center; color: var(--muted); font-size: 14px; border: 1px dashed #5b5440; border-radius: var(--radius); }

/* ---------- Panels ---------- */
.battle-box, .hero-stat-panel, .setup-panel, .builder-panel, .inspector-panel, .privacy-inner, .finish-inner, .resume-box {
  background: var(--panel); border: 1px solid #a08a5c; border-radius: 3px; box-shadow: var(--frame), var(--shadow);
}

/* ---------- Header / footer ---------- */
.site-header { height: var(--header-h); display: flex; align-items: center; gap: 34px; padding: 0 22px; background: linear-gradient(#0d191ef5, #0a1418ee); border-top: 1px solid #776343; border-bottom: 2px solid #8a7047; box-shadow: 0 3px 13px #000b, inset 0 -3px #050b0e; z-index: 10; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { display: block; width: 32px; height: 38px; color: var(--gold); }
.brand-mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; filter: drop-shadow(0 0 6px #e0b86055); }
.brand strong { display: block; font: 600 21px/1 var(--font-display); letter-spacing: .04em; color: #f0e0b6; white-space: nowrap; text-shadow: 1px 2px #000; }
.brand strong i { font-size: 14px; font-style: normal; color: var(--gold); text-transform: lowercase; }
.brand small { display: none; }
.main-nav { display: flex; align-self: stretch; gap: 26px; }
.nav-button { position: relative; padding: 0 2px; font: 600 14px/1 var(--font-display); letter-spacing: .06em; color: #cbc4b0; }
.nav-button:hover { color: var(--gold-light); }
.nav-button.active { color: var(--gold-light); text-shadow: 0 0 12px #ffd78066; }
.nav-button.active::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg); background: #edcd83; box-shadow: 0 0 10px #ffd780; }
.header-status { display: flex; align-items: center; gap: 16px; margin-left: auto; font: 700 13px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #e6d3a0; }
.header-help { width: 30px; height: 30px; border: 1px solid #a1895a; border-radius: 50%; background: #0b1418; font: 700 17px/1 var(--font-display); color: #e2cc98; box-shadow: inset 0 0 0 2px #2e2d24; }
.header-help:hover { border-color: var(--gold-light); box-shadow: inset 0 0 0 2px #2e2d24, 0 0 12px #f1d79b55; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 18px 4%; font-size: 12px; letter-spacing: .05em; color: #a8b4a7; background: #081115b8; border-top: 1px solid #81704660; }
body.battle-mode .site-footer { display: none; }

/* ---------- Pages ---------- */
.page { max-width: 1440px; margin: auto; padding: 34px 4% 56px; }
.screen-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 22px; }
.screen-heading h1 { margin: 0 0 8px; font-size: 44px; color: #efd9a6; }
.screen-heading p:last-child { max-width: 690px; margin: 0; font-size: 15px; color: var(--ink-2); text-shadow: 0 1px 3px #000; }

/* Lobby */
.lobby-intro { display: flex; justify-content: space-between; align-items: center; gap: 48px; padding: 6px 0 28px; }
.lobby-intro h1 { margin: 0 0 18px; }
.lobby-intro h1 em { font-style: normal; color: var(--gold-light); }
.lobby-intro .lead { max-width: 500px; margin: 0; font-size: 17px; line-height: 1.6; color: #d6d8cd; text-shadow: 0 2px 4px #000; }
.intro-seal { position: relative; display: grid; place-items: center; gap: 12px; flex-shrink: 0; }
.intro-seal > .crest { width: 160px; height: 190px; }
.intro-seal > span:not(.crest) { font: 700 11px/1 var(--font-body); letter-spacing: .3em; color: #cdbb8d; text-shadow: 0 1px 3px #000; }
.resume-box { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding: 13px 17px; border-color: #b49b62; }
.resume-box > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.resume-box strong { font: 600 17px/1.2 var(--font-display); color: var(--gold-light); }
.resume-box span { font-size: 14px; color: var(--muted); }
.lobby-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; }
.section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; margin-bottom: 14px; }
.section-title h2 { margin: 0; font-size: 26px; }
.section-title span { font-size: 13px; color: var(--muted); }
.starter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.starter-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; overflow: hidden; text-align: left; border: 1px solid #8a7750; border-radius: 4px; background: #0d1a1f; box-shadow: inset 0 0 0 3px #081116, 0 6px 16px #0008; isolation: isolate; }
.starter-card > .artwork { z-index: -2; transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .4s; filter: saturate(.85) brightness(.85); }
.starter-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 22%, #0a151ad0 58%, #081216 88%), linear-gradient(0deg, color-mix(in srgb, var(--faction) 18%, transparent), transparent 40%); }
.starter-card::after { content: ""; position: absolute; inset: 5px; border: 1px solid #c9a96133; pointer-events: none; }
.starter-card:hover > .artwork { transform: scale(1.05); filter: saturate(1) brightness(.95); }
.starter-card:hover { border-color: #c9a961; }
.starter-card.selected { border-color: #f0d08a; box-shadow: inset 0 0 0 2px #e8c57a88, 0 0 24px #e3b24f40, 0 6px 16px #0008; }
.starter-card.selected > .artwork { filter: saturate(1.05) brightness(1); }
.starter-card.selected .starter-text::before { content: "Wybrano"; position: absolute; top: -26px; left: 16px; padding: 3px 9px; font: 700 11px/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #22190b; background: linear-gradient(#f0cd85, #c9a056); border-radius: 2px; }
.starter-text { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 18px 16px 16px; }
.starter-card h3 { margin: 0; font-size: 25px; color: #f4e2b5; }
.starter-hero { font: 600 13px/1.3 var(--font-body); color: color-mix(in srgb, var(--faction) 60%, #f1d79b); }
.starter-card p { margin: 6px 0 4px; font-size: 14px; line-height: 1.45; color: #cfd3c8; }
.deck-chip { font: 700 11px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #a5ab9c; }
.how-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 28px; padding-top: 22px; border-top: 1px solid #9c855640; }
.how-strip > div { display: flex; gap: 12px; }
.how-strip span { font: 600 26px/1.1 var(--font-display); color: var(--gold); }
.how-strip strong { display: block; font: 600 15px/1.3 var(--font-display); }
.how-strip small { display: block; font-size: 14px; color: var(--muted); }
.setup-panel { position: sticky; top: 18px; padding: 22px; }
.setup-panel h3 { margin-bottom: 6px; color: #efd9a6; }
.setup-panel .muted { font-size: 15px; margin-bottom: 4px; }
.setup-summary { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 18px 0; padding: 12px 0; border-block: 1px solid #9c855640; font-size: 13px; color: var(--muted); }
.setup-summary strong { font: 600 14px/1.3 var(--font-display); color: var(--ink); }
.setup-summary small { grid-column: 2; font-size: 13px; }
.setup-note { margin: 12px 0 4px; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* Collection and deck builder */
.filters { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.gallery-count, .builder-filter-note { margin: 0 0 16px; font-size: 13px; color: var(--ink-2); text-shadow: 0 1px 3px #000; }
.collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px; }
.builder-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; }
.builder-layout .filters { grid-template-columns: 2fr 1fr 1fr 1fr; }
.builder-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.builder-grid > div { display: flex; flex-direction: column; }
.builder-grid > div > .card-wrap { flex: 1; }
.collection-grid .card-wrap > .card { height: 100%; }
.builder-card-add { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 6px; padding: 6px 9px; border: 1px solid #9e885c; border-radius: 2px; background: #1c2b2be6; color: #e1d2ab; font: 700 12px/1.2 var(--font-body); }
.builder-card-add:hover { border-color: var(--gold-light); background: #26393ae6; }
.builder-panel { position: sticky; top: 18px; padding: 20px; }
.builder-panel .form-label:first-of-type { margin-top: 4px; }
.builder-summary { display: flex; gap: 10px; margin: 16px 0 10px; }
.builder-summary > div { flex: 1; display: flex; flex-direction: column; padding: 8px 10px; border: 1px solid #9c855640; }
.builder-summary strong { font: 700 28px/1.1 var(--font-body); color: var(--gold-light); }
.builder-summary small { font-size: 12px; color: var(--muted); }
.deck-validation { margin: 12px 0; padding: 10px 12px; font-size: 13px; line-height: 1.5; color: #f0b3a5; background: #36272455; border: 1px solid #8a5444; border-radius: 2px; }
.deck-validation ul { margin: 4px 0 0; padding-left: 18px; }
.deck-validation.valid { color: var(--ok); background: #2e483033; border-color: #4f7b54; }
.deck-list { max-height: 390px; margin: 14px 0 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #a88951 #0b171b; }
.deck-section-label { margin: 14px 0 4px; font: 700 11px/1.2 var(--font-body); letter-spacing: .18em; color: var(--gold); }
.deck-list-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #9c855626; }
.deck-list-row .count { width: 26px; text-align: center; font: 700 14px var(--font-body); color: var(--gold); }
.deck-list-name { flex: 1; text-align: left; font-size: 14px; line-height: 1.3; }
.deck-list-name:hover { color: var(--gold-light); }
.mini-adjust { width: 26px; height: 26px; border: 1px solid #7d6a45; border-radius: 2px; background: #182729; color: #e6d5a8; font-size: 15px; }
.mini-adjust:hover { border-color: var(--gold-light); }

/* ---------- Cards ---------- */
.card-wrap { position: relative; min-width: 0; }
.card {
  --name-h: 34px; --art-h: 170px;
  position: relative; display: flex; flex-direction: column; width: 100%; padding: 4px; text-align: left; color: var(--parchment-ink);
  border: 1px solid #c2a468; border-radius: 6px; background: linear-gradient(160deg, #1a262b, #0e171b);
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #172226, inset 0 0 0 4px #7d6a45, 0 6px 14px #000a;
  transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s, border-color .2s, filter .2s;
}
.card-wrap > .card { cursor: pointer; }
.card-top { position: relative; height: var(--art-h); overflow: hidden; border: 1px solid #4f4836; border-radius: 3px 3px 0 0; background: #1b252a; }
.card-top > .artwork { inset: var(--name-h) 0 0; }
.card-name { position: absolute; inset: 0 0 auto; z-index: 1; display: flex; align-items: center; min-height: var(--name-h); margin: 0; padding: 4px 32px 4px 8px; font: 700 14px/1.08 var(--font-display); letter-spacing: 0; color: #2a2116; text-shadow: none; text-wrap: balance; background: linear-gradient(90deg, #f0e3c9, #d7c5a2 68%, #e5d8ba); border-bottom: 1px solid #8f7c5d; box-shadow: 0 2px 4px #0006; overflow: hidden; }
.card-type { position: absolute; inset: auto 0 0; z-index: 1; padding: 3px 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 11px/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: #efe6cf; background: linear-gradient(90deg, #081318ee, #081318bb); border-top: 1px solid #af966969; }
.cost-orb { position: absolute; top: -7px; right: -7px; z-index: 4; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid #d3b06a; border-radius: 50%; font: 700 21px/1 var(--font-body); color: #f7f1df; text-shadow: 0 1px 2px #000; background: radial-gradient(circle at 35% 28%, #4c8fb3, #17406a 50%, #071827 78%); box-shadow: 0 0 0 1px #3d3322, inset 0 0 0 1px #7fb0c9, 0 3px 6px #000c; }
.cost-orb.hero-badge { color: #3a2a0f; background: radial-gradient(circle at 35% 28%, #ffe7a6, #d6a650 55%, #8b6326 85%); box-shadow: 0 0 0 1px #3d3322, inset 0 0 0 1px #fff2c4, 0 3px 6px #000c; }
.cost-orb.hero-badge .icon { width: 18px; height: 18px; }
.card.cost-short .cost-orb { border-color: #f09a82; background: radial-gradient(circle at 35% 28%, #d35c4a, #7c1f1c 52%, #2c0809 80%); box-shadow: 0 0 0 1px #3d2222, inset 0 0 0 1px #f2a08c, 0 0 10px #ff5d4566, 0 3px 6px #000c; }
.card-body { flex: 1; min-height: 88px; padding: 7px 8px 8px; background: var(--parchment); border-inline: 1px solid #9f8e6d; font-size: 14px; line-height: 1.35; color: var(--parchment-ink); }
.requirements { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-bottom: 5px; font: 700 12px/1.3 var(--font-body); color: #5a4932; }
.req { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.req .icon { width: 13px; height: 13px; }
.req-might .icon { color: #8b5a1f; }
.req-magic .icon { color: #6a4aa8; }
.req-destiny .icon { color: #2d7f86; }
.req.missing { color: #b0301f; }
.req.missing .icon { color: #c63b28; }
.card-description { margin: 0; font-size: 14px; line-height: 1.35; }
.card-stats { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-radius: 0 0 3px 3px; border-top: 1px solid #ad9669; background: linear-gradient(#0f1c21, #091216); font: 700 19px/1 var(--font-body); color: var(--ink); }
.card-stats span { display: inline-flex; align-items: center; gap: 4px; }
.card-stats .icon { width: 15px; height: 15px; }
.card-stats .attack { color: var(--attack); }
.card-stats .retaliation { color: var(--retaliation); }
.card-stats .health { color: var(--health); }
.card-stats .health.damaged { color: #ff7a66; }
.card-meta { padding: 6px 8px; border-radius: 0 0 3px 3px; border-top: 1px solid #ad966966; background: #0c171b; font: 700 11px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #c3bfa8; }
.card-info { position: absolute; z-index: 5; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #bda779; border-radius: 50%; background: #0b1920e8; color: #ecd7a2; font: 700 13px/1 var(--font-display); box-shadow: 0 1px 4px #000a; }
.card-info:hover { border-color: var(--gold-light); color: #fff; background: #183039; }
.card-wrap > .card-info { top: calc(var(--info-top, 42px)); right: 9px; }
.card-shine { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; mix-blend-mode: soft-light; background: radial-gradient(circle at var(--mx, 50%) var(--my, 20%), #fffbe8cc 0, #fff4d055 18%, transparent 46%), linear-gradient(115deg, transparent 32%, #ffffff40 46%, transparent 58%); background-size: 100% 100%, 260% 100%; background-position: 0 0, var(--sheen, 100%) 0; transition: opacity .25s; }
.card:hover .card-shine, .card.selected .card-shine { opacity: 1; }
.card.playable { border-color: #f6dc97; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #172226, inset 0 0 0 4px #b49447, 0 0 0 1px #ffe39a, 0 0 16px 2px #ffcf5e70, 0 6px 14px #000a; }
.card.selected { border-color: #fff3c4; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #172226, inset 0 0 0 4px #e1c071, 0 0 0 2px #ffe8a8, 0 0 24px 4px #ffcf5e99, 0 10px 22px #000c; }
.card.dimmed .card-top, .card.dimmed .card-body { filter: grayscale(.7) brightness(.6); }
.card.dimmed { border-color: #6f6146; }
.card.dimmed:hover .card-top, .card.dimmed:hover .card-body { filter: grayscale(.35) brightness(.85); }

/* Pointer polish: collection cards tilt too, the targeting arc follows the cursor. */
.collection-grid .card:hover { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #172226, inset 0 0 0 4px #a88a4c, 0 0 18px #ffcf5e40, 0 14px 26px #000c; }
.target-arrow { position: fixed; inset: 0; z-index: 900; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .15s; --arrow: #f6d27c; }
.target-arrow.visible { opacity: 1; }
.target-arrow[data-kind="hostile"] { --arrow: #ff7a5c; }
.target-arrow[data-kind="friendly"] { --arrow: #9ff0c4; }
.target-arrow .arrow-glow { fill: none; stroke: var(--arrow); stroke-width: 14; stroke-linecap: round; opacity: .18; filter: blur(3px); }
.target-arrow .arrow-body { fill: none; stroke: var(--arrow); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 14 12; animation: arrow-flow .45s linear infinite; filter: drop-shadow(0 0 6px var(--arrow)) drop-shadow(0 2px 2px #000); }
.target-arrow .arrow-head { fill: var(--arrow); stroke: #1b1206; stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 8px var(--arrow)) drop-shadow(0 2px 2px #000); }
.target-arrow .arrow-ring { fill: color-mix(in srgb, var(--arrow) 16%, transparent); stroke: var(--arrow); stroke-width: 3.5; stroke-dasharray: 12 8; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ring-spin 3s linear infinite; filter: drop-shadow(0 0 6px var(--arrow)); }
.target-arrow.locked .arrow-ring { opacity: 1; }

/* ---------- Battle page ---------- */
.battle-page { display: flex; flex-direction: column; gap: 8px; max-width: 1880px; margin: 0 auto; padding: 8px 14px 12px; }
.battle-toolbar { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 40px; }
.turn-title { display: flex; flex-direction: column; justify-content: center; min-width: 140px; }
.turn-title strong { font: 700 19px/1.05 var(--font-display); }
.turn-title .num { font: 700 21px/1 var(--font-body); }
.turn-title strong { color: #f0d898; text-shadow: 0 2px 4px #000; }
.turn-title small { font: 500 12px/1.3 var(--font-body); color: var(--ink-2); }
.action-playing .turn-title small::after { content: " · trwa akcja"; color: var(--gold-light); }
.battle-recap { display: flex; align-items: center; gap: 10px; min-width: 0; height: 38px; padding: 0 6px 0 14px; text-align: left; border: 1px solid #9d855b99; border-left: 3px solid #d1b274; border-radius: 2px; background: linear-gradient(90deg, #0b191ef2, #0b191ecc); box-shadow: inset 0 0 16px #142e3444; white-space: nowrap; }
.recap-icon { display: grid; place-items: center; color: #e4c887; font-size: 18px; }
.battle-recap small { flex: none; font: 700 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #b9b9a3; }
.battle-recap strong { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; font: 600 15px/1.2 var(--font-display); color: #f2e3c2; }
.battle-recap p { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; color: #d2dbd4; }
.battle-recap:hover { border-color: #e6c983; }
.recap-log { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 4px 8px; border-left: 1px solid #9d855b66; font: 700 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.battle-recap:hover .recap-log { color: var(--gold-light); }
.log-dialog { width: min(480px, 80vw); }
.log-dialog .log-list { max-height: 60vh; }
.log-dialog .log-list p { font-size: 15px; margin-bottom: 6px; }
.battle-recap[data-feedback-kind="attack"] { border-left-color: #f08a6a; }
.battle-recap[data-feedback-kind="attack"] .recap-icon { color: #ffab8e; }
.battle-recap[data-feedback-kind="end"] { border-left-color: #8fd0e0; }
.page-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.battle-layout { display: grid; grid-template-columns: clamp(176px, 13vw, 232px) minmax(0, 1fr) clamp(224px, 17vw, 300px); gap: 12px; align-items: start; }
.battle-left, .battle-sidebar { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.battle-field { position: relative; display: flex; flex-direction: column; min-width: 0; z-index: 2; }
.action-playing .battle-layout { cursor: progress; }

/* Heroes */
.hero-panel { position: relative; height: 200px; flex: none; overflow: hidden; border: 1px solid #a18d60; border-radius: 3px; background: #112027; box-shadow: inset 0 0 0 3px #13191a, 0 4px 12px #000a; isolation: isolate; text-align: left; }
.hero-panel > .artwork { inset: 3px; z-index: -1; }
.hero-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 3px #06101688, inset 0 -40px 50px -20px #000c; }
.hero-panel.active { border-color: #f0d08a; box-shadow: inset 0 0 0 2px #c9a65e, 0 0 18px #e8b44f55, 0 4px 12px #000a; }
.hero-panel.targetable { cursor: pointer; border-color: #ff9a80; box-shadow: inset 0 0 0 2px #ff9a80, 0 0 22px #ff6a4ab0; animation: target-pulse-enemy 1.3s ease-in-out infinite; }
.hero-caption { position: absolute; inset: auto 0 0; z-index: 1; padding: 22px 11px 9px; background: linear-gradient(180deg, transparent, #071216e8 30%, #071216); border-bottom: 1px solid #c5a361; }
.hero-owner { display: block; font: 700 11px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #c4c6b5; }
.hero-name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 clamp(17px, 1.35vw, 22px)/1.1 var(--font-display); color: #f5e6c4; text-shadow: 0 2px 3px #000; }
.hero-subtitle { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 12px/1.3 var(--font-body); color: #e0c388; }
.hero-life { position: absolute; right: 7px; bottom: 58px; z-index: 2; display: grid; place-items: center; width: 54px; height: 54px; color: #fff3ea; }
.hero-life .icon { position: absolute; inset: 0; width: 100%; height: 100%; color: #b3261e; filter: drop-shadow(0 2px 3px #000) drop-shadow(0 0 8px #ff4b3a66); }
.hero-hp { position: relative; margin-top: -3px; font: 700 23px/1 var(--font-body); text-shadow: 0 1px 2px #000, 0 0 6px #000; }
.hero-life.critical .icon { animation: heart-beat 1s ease-in-out infinite; }
.hero-mini-stats { position: absolute; inset: 6px 6px auto; z-index: 2; display: flex; justify-content: space-between; gap: 6px; padding: 4px 7px; border: 1px solid #b5a16a52; background: #071318c4; font: 700 14px/1 var(--font-body); color: #f2dfad; }
.hero-mini-stats span { display: inline-flex; align-items: center; gap: 3px; }
.hero-mini-stats .icon-magic { color: #c8b1f2; }
.hero-mini-stats .icon-destiny { color: #8fd6dc; }
.hero-decks { display: block; padding: 4px 0 0; text-align: center; font-size: 12px; color: var(--ink-2); text-shadow: 0 1px 3px #000; }
.hero-ongoing { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.hero-ongoing button { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1px solid #7d9d6680; border-radius: 2px; background: #24352de6; font-size: 12px; color: #dfe6b8; }
.hero-stat-panel { padding: 8px 12px; }
.hero-stat-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; font: 700 15px/1.2 var(--font-body); color: #e6d09a; }
.hero-stat-row > strong { margin-left: auto; font: 700 20px/1 var(--font-body); color: #fbf0d6; }
.stat-symbol { display: grid; place-items: center; width: 20px; font-size: 18px; color: #dec381; }
.hero-stat-row.magic .stat-symbol { color: #c4aaf0; }
.hero-stat-row.destiny .stat-symbol { color: #86d2d8; }
.hero-stat-row.resources { margin-top: 4px; padding-top: 8px; border-top: 1px solid #89794d66; }
.hero-stat-row.resources .stat-symbol { color: #9fe0c0; }
.resource-production { margin: 0 0 2px; text-align: right; font-size: 12px; color: var(--muted); }
.battle-box { padding: 10px 11px; }
.hero-box > .eyebrow { margin-bottom: 7px; }
.hero-actions { display: grid; grid-template-columns: 1fr; gap: 4px; }
.hero-action { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 9px; text-align: left; border: 1px solid #a88c55; border-radius: 2px; background: linear-gradient(#20332f, #15231f); color: #f0dfb2; font: 700 14px/1.15 var(--font-body); box-shadow: inset 0 0 0 1px #00000080, 0 0 10px #e6b75a22; }
.hero-action .stat-symbol { width: 18px; font-size: 16px; }
.hero-action:nth-child(2) .stat-symbol { color: #c4aaf0; }
.hero-action:nth-child(3) .stat-symbol { color: #86d2d8; }
.hero-action small { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font: 700 14px/1 var(--font-body); color: var(--ok); }
.hero-action-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-action.wide { margin-top: 2px; }
.hero-action:hover:not(:disabled) { border-color: #ffe39a; background: linear-gradient(#2a4540, #1a2c27); box-shadow: inset 0 0 0 1px #00000080, 0 0 14px #ffd36e66; transform: translateX(2px); }
.hero-action:disabled { border-color: #4b4637; background: #10191a; color: #7e837a; box-shadow: none; }
.hero-action:disabled .stat-symbol, .hero-action:disabled small { color: #6b726b; }
.hero-actions-note { margin: 7px 0 0; font-size: 12px; line-height: 1.35; color: var(--muted); }
.pile-panel { display: flex; justify-content: space-evenly; gap: 8px; padding: 4px 0; }
.deck-pile, .grave-pile { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #e1ca8b; text-align: center; }
.pile-art { position: relative; display: grid; place-items: center; width: 52px; height: 66px; margin-bottom: 6px; transform: rotate(-6deg); border: 2px solid #b39a64; border-radius: 4px; background: repeating-linear-gradient(45deg, #263d46 0 2px, #1a2b33 2px 8px); box-shadow: 3px 3px #102028, 4px 4px #a28b5b, 6px 6px #102028, 7px 7px #8d784c; color: #c9b073; font-size: 26px; }
.grave-pile .pile-art { transform: rotate(6deg); border-color: #6e7364; background: #142126; color: #9aa596; }
.grave-pile:hover .pile-art { border-color: var(--gold-light); color: #d7e0d2; }
.pile-name { font: 600 13px/1.2 var(--font-display); }
.pile-count { font: 700 19px/1 var(--font-body); color: #f6deb0; }
.save-status { margin: 0; text-align: center; font-size: 11px; color: var(--muted); }

/* Board */
.board-labels { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 4px 28px; text-align: center; font: 700 11px/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: #e8d6ad; text-shadow: 0 1px 3px #000; }
.board { position: relative; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 6px; padding-left: 28px; }
.board::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: calc(14px + 50%); width: 2px; transform: translateX(-50%); pointer-events: none; z-index: 3; background: linear-gradient(transparent, #e9cf8a 10%, #a6f4ef 50%, #e9cf8a 90%, transparent); box-shadow: 0 0 10px 1px #7fe7e080; }
.board::before { content: ""; position: absolute; top: 50%; left: calc(14px + 50%); z-index: 4; width: 14px; height: 14px; transform: translate(-50%, -50%) rotate(45deg); border: 2px solid #f0d08a; background: #0b1a1f; box-shadow: 0 0 12px #a6f4ef, inset 0 0 4px #a6f4ef; pointer-events: none; }
.board-row { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; min-height: 0; height: 104px; }
.row-marker { position: absolute; left: -28px; top: 50%; width: 26px; transform: translateY(-50%); text-align: center; font: 700 17px/1 var(--font-display); color: #e3c68a; text-shadow: 0 2px 4px #000; }
.board-slot { position: relative; min-width: 0; height: 100%; border: 1px solid #8b7a58aa; border-radius: 4px; background: #0b171cb3; box-shadow: inset 0 0 0 2px #0d1a209c, inset 0 0 18px #020c1288, 0 2px 4px #0008; container-type: size; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.board-slot.side-own.empty { background: linear-gradient(160deg, color-mix(in srgb, var(--own, #ddbc68) 9%, #0a1a20cc), #08141ab8); }
.board-slot.side-enemy.empty { background: linear-gradient(200deg, color-mix(in srgb, var(--enemy, #e87453) 9%, #0a1a20cc), #08141ab8); }
.board-slot.empty::after { content: ""; position: absolute; inset: 4px; border: 1px solid #b9ac7424; border-radius: 2px; pointer-events: none; }
.empty-slot-button { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.slot-rune { width: 16px; height: 16px; transform: rotate(45deg); border: 1px solid #c9b47a40; box-shadow: 0 0 0 5px #0000, 0 0 0 6px #c9b47a18; }
.slot-hint { position: absolute; left: 4px; right: 4px; bottom: 7px; text-align: center; font: 700 11px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #e2ffe5; text-shadow: 0 1px 3px #000; }
.board-slot.targetable { cursor: pointer; }
.board-slot.target-empty { border-color: #bdf3cf; background: linear-gradient(160deg, #2f5a4bcc, #173a33b8); box-shadow: inset 0 0 0 1px #c6f5d0, inset 0 0 22px #8be0ae55, 0 0 12px #8bddac80; animation: target-pulse 1.5s ease-in-out infinite; }
.board-slot.target-empty .slot-rune { border-color: #cff8dc; box-shadow: 0 0 0 5px #0000, 0 0 0 6px #cff8dc60, 0 0 14px #9ff0c4; }
.board-slot.target-enemy { border-color: #ffb09a; box-shadow: inset 0 0 0 2px #ff8d73, 0 0 16px #ff5a3cb0; animation: target-pulse-enemy 1.3s ease-in-out infinite; }
.board-slot.target-friend { border-color: #a9f1ff; box-shadow: inset 0 0 0 2px #8fe6f8, 0 0 16px #6fd8f0b0; animation: target-pulse 1.5s ease-in-out infinite; }
.board-slot.unit-ready { border-color: #f5d685; box-shadow: inset 0 0 0 1px #ffe39a, 0 0 12px #ffcd5a66; animation: ready-breathe 2.6s ease-in-out infinite; }
.board-slot.unit-spent .battle-creature > .artwork { filter: saturate(.45) brightness(.7); }
.board-slot.source-selected { z-index: 2; border-color: #fff0b5; box-shadow: inset 0 0 0 2px #ffe08f, 0 0 0 1px #ffe8a8, 0 0 22px #ffcf5ecc; transform: translateY(-2px); animation: none; }
.battle-creature { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 3px; background: #182226; text-align: left; }
.battle-creature > .artwork { inset: 0; transition: filter .3s; }
.battle-creature > .artwork::before { left: 50%; top: 50%; width: min(100%, 100cqh); transform: translate(-50%, -50%); }
.battle-creature:hover > .artwork { filter: brightness(1.12); }
.creature-content { position: absolute; inset: 0 0 auto; z-index: 1; display: block; padding: 5px 26px 16px 7px; background: linear-gradient(180deg, #050c10ee, #050c10a0 62%, transparent); }
.creature-name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 14px/1.15 var(--font-display); color: #fbecc8; text-shadow: 0 1px 3px #000; }
.creature-abilities { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 12px/1.25 var(--font-body); color: #e6dfc8; text-shadow: 0 1px 3px #000; }
.creature-status { position: absolute; left: 6px; bottom: 32px; z-index: 2; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #8e8c7a; border-radius: 50%; background: #06100fd9; color: #b9bcaa; font-size: 12px; box-shadow: 0 1px 4px #000; }
.creature-status.status-ready { border-color: #ffe08a; color: #ffe08a; box-shadow: 0 0 8px #ffd25a, 0 1px 4px #000; }
.creature-bottom { position: absolute; inset: auto 0 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 4px 8px 5px; background: linear-gradient(180deg, transparent, #050c10e6 38%); font: 700 18px/1 var(--font-body); }
.creature-bottom > span { display: inline-flex; align-items: center; gap: 3px; text-shadow: 0 1px 2px #000; }
.creature-bottom .icon { width: 14px; height: 14px; }
.creature-bottom .attack { color: var(--attack); }
.creature-bottom .ret { color: var(--retaliation); }
.creature-bottom .hp { color: var(--health); }
.creature-bottom .damaged { color: #ff6b57; }
.creature-bottom small { font: 700 11px/1 var(--font-body); color: #d9cdbd; opacity: .8; align-self: flex-end; }
.creature-bottom .stack { font: 700 12px/1 var(--font-body); color: #d9e4c6; }
.board-slot .card-info { top: 5px; right: 5px; width: 18px; height: 18px; font-size: 11px; opacity: .85; }
.building-tag { position: absolute; z-index: 3; left: 6px; bottom: 30px; display: inline-flex; align-items: center; gap: 3px; max-width: 70%; padding: 2px 5px; overflow: hidden; white-space: nowrap; border: 1px solid #8d8656; border-radius: 2px; background: #232819e6; color: #e6d7a2; font-size: 11px; }
.building-only { top: 8px; bottom: auto; }
@container (max-height: 92px) {
  .creature-abilities { display: none; }
  .creature-content { padding-bottom: 10px; }
  .creature-status { bottom: 27px; width: 19px; height: 19px; font-size: 11px; }
  .creature-bottom { font-size: 15px; padding-block: 3px 4px; }
}
@container (min-height: 140px) {
  .creature-name { font-size: 16px; }
  .creature-abilities { font-size: 13px; }
  .creature-bottom { font-size: 20px; padding: 6px 10px 7px; }
  .creature-bottom .icon { width: 16px; height: 16px; }
  .creature-status { bottom: 40px; width: 26px; height: 26px; font-size: 14px; }
}
@container (max-width: 120px) {
  .creature-bottom small { display: none; }
  .creature-bottom { padding-inline: 5px; font-size: 14px; }
  .creature-name { font-size: 12px; }
}

/* Wide battlefield cells keep the whole square illustration beside the text. */
@container (min-width: 190px) and (min-aspect-ratio: 3/2) {
  .battle-creature { --unit-art-width: min(100cqh, 44cqw); background: linear-gradient(135deg, #18272c, #091419); }
  .battle-creature > .artwork { right: auto; width: var(--unit-art-width); border-right: 1px solid #b59b614a; background: #090f13; }
  .creature-content { left: var(--unit-art-width); bottom: 30px; padding: 8px 25px 4px 9px; background: none; overflow: hidden; }
  .creature-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; font-size: 14px; line-height: 1.2; }
  .creature-abilities { margin-top: 5px; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px; line-height: 1.2; color: #c7c5b5; }
  .creature-bottom { left: var(--unit-art-width); min-height: 28px; padding: 5px 8px; border-top: 1px solid #b59b6133; background: #050d11b3; font-size: 17px; }
  .creature-status { left: 5px; bottom: 5px; width: 19px; height: 19px; font-size: 11px; }
}
@container (min-width: 190px) and (min-aspect-ratio: 3/2) and (max-height: 85px) {
  .creature-content { padding-top: 5px; }
  .creature-abilities { display: none; }
  .creature-bottom { font-size: 15px; }
}

/* Events */
.events-row { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 660px; margin: 8px auto 0; }
.events-label { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: center; gap: 7px; font: 700 14px/1 var(--font-display); color: #eed69b; text-shadow: 0 1px 3px #000; }
.events-label .icon { align-self: center; font-size: 12px; }
.events-label small { font: 500 12px/1 var(--font-body); color: var(--ink-2); }
.event-wrap { position: relative; min-width: 0; }
.event-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 62px; padding: 6px 10px 7px; overflow: hidden; text-align: left; border: 1px solid #a88e5c; border-radius: 4px; background: #10202a; box-shadow: inset 0 0 0 2px #07111590, 0 3px 8px #000a; isolation: isolate; }
.event-card > .artwork { z-index: -2; }
.event-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #06121aee 10%, #06121ab0 60%, #06121a66), linear-gradient(0deg, #06121ad0, transparent 70%); }
.event-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.event-cost { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1px solid #e3c47c; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6b5b2a, #2d2610); color: #fbe6b0; font: 700 14px/1 var(--font-body); }
.event-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 15px/1.15 var(--font-display); color: #fbe7b8; text-shadow: 0 2px 3px #000; }
.event-text { display: block; margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; line-height: 1.25; color: #dde0d3; }
.event-position { position: absolute; top: 6px; right: 32px; padding: 1px 6px; border: 1px solid #c9b47a66; border-radius: 2px; background: #081318cc; font: 700 11px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #d9ccaa; }
.event-position.leaving { border-color: #e98a6f88; color: #ffb59f; }
.event-wrap > .card-info { top: 6px; right: 7px; width: 20px; height: 20px; font-size: 12px; }
.event-card.playable { border-color: #f6dc97; box-shadow: inset 0 0 0 2px #07111590, 0 0 0 1px #ffe39a, 0 0 14px #ffcf5e70; }
.event-card.selected { border-color: #fff3c4; box-shadow: inset 0 0 0 2px #e1c071, 0 0 20px #ffcf5e99; }
.event-card:hover { border-color: #e9cf8a; }

/* Hand */
.hand-area { position: relative; z-index: 5; flex: none; margin-top: 8px; padding: 0 8px 6px; border-top: 1px solid #b79d6299; background: linear-gradient(#07131bd9, #050e13e6); box-shadow: 0 -4px 14px #0006; }
.hand-heading { display: flex; align-items: baseline; gap: 12px; padding: 6px 2px 0; }
.hand-heading h3 { margin: 0; font: 700 14px/1.2 var(--font-display); color: #e6d2a2; }
.hand-heading h3 span { margin-left: 6px; font: 500 12px/1 var(--font-body); color: var(--ink-2); }
.hand-heading > small { margin-left: auto; font-size: 12px; color: var(--muted); }
.hand { display: flex; justify-content: center; align-items: flex-end; min-height: 150px; padding: 10px 4px 2px; container-type: inline-size; }
.hand > .card-wrap { flex: 0 0 var(--hand-w); width: var(--hand-w); transform-origin: 50% 100%; transition: transform .22s cubic-bezier(.2, .7, .2, 1), margin .22s; z-index: 1; }
.hand > .card-wrap + .card-wrap { margin-left: min(8px, calc((100cqi - var(--n, 1) * var(--hand-w)) / max(var(--n, 1) - 1, 1))); }
.hand > .card-wrap:hover, .hand > .card-wrap:focus-within { z-index: 30; transform: translateY(-36px) scale(1.3); }
.hand > .card-wrap:has(.card.selected) { z-index: 20; transform: translateY(-16px); }
.hand > .card-wrap:has(.card.selected):hover { transform: translateY(-36px) scale(1.3); }
.hand .card { --name-h: 30px; --art-h: 108px; padding: 3px; transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.hand .card-name { padding: 3px 18px 3px 6px; font-size: 11.5px; line-height: 1.05; background: linear-gradient(90deg, #f0e3c9f2, #d7c5a2e6 68%, #e5d8baee); }
.hand .card-top > .artwork { inset: 0; }
.hand .card-top > .artwork::before { top: 50%; transform: translateY(-42%); }
.hand .cost-orb { top: -6px; right: -6px; width: 28px; height: 28px; font-size: 15px; }
.hand .card-body { flex: none; min-height: 0; padding: 3px 5px; }
.hand .requirements { flex-wrap: nowrap; gap: 6px; margin: 0; overflow: hidden; font-size: 12px; }
.hand .req-school { overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: #6b5a40; }
.hand .card-stats { padding: 4px 6px; font-size: 15px; }
.hand .card-stats .icon { width: 12px; height: 12px; }
.hand .card-meta { padding: 5px 6px; text-align: center; }
.hand .card-wrap > .card-info { --info-top: 36px; right: 6px; width: 19px; height: 19px; font-size: 11px; opacity: 0; transition: opacity .2s; }
.hand .card-wrap:hover > .card-info, .hand .card-wrap:focus-within > .card-info { opacity: 1; }
.hand .card.playable { animation: playable-glow 2.4s ease-in-out infinite; }
.hand .empty-message { padding: 30px 10px; }

/* Mulligan */
.mulligan-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; padding: 10px 14px; border: 1px solid #b99f60; border-radius: 2px; background: #10232bf2; box-shadow: var(--frame); }
.mulligan-banner .eyebrow { margin-bottom: 3px; }
.mulligan-banner h3 { margin: 0 0 2px; font-size: 18px; }
.mulligan-banner p { margin: 0; font-size: 13px; color: var(--ink-2); }
.mulligan-buttons { display: flex; flex-shrink: 0; gap: 8px; }

/* Sidebar */
.opponent-summary { flex: none; }
.opponent-summary .hero-panel { height: 176px; }
.inspector-panel { padding: 9px 9px 7px; }
.inspector-panel > .eyebrow { margin: 0 0 7px 2px; }
.inspector-body .card { --art-h: 160px; }
.inspector-body .card-body { min-height: 64px; }
.inspector-details { display: flex; justify-content: space-between; width: 100%; padding: 6px 2px 0; font-size: 12px; color: #d6c089; }
.inspector-details:hover { color: var(--gold-light); }
.instance-status { margin: 8px 0 0; padding: 7px 9px; border: 1px solid #cfb37740; background: #cfb3770d; }
.instance-status strong { font: 600 13px/1.2 var(--font-display); color: var(--gold-light); }
.instance-status p { margin: 3px 0 0; font-size: 13px; }
.instance-stats { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.instance-stats span { display: inline-flex; align-items: center; gap: 3px; }
.play-requirements { margin: 8px 0 2px; padding: 8px 9px; border: 1px solid #927a4f; background: #0a1519; font-size: 13px; line-height: 1.4; }
.play-requirements > strong { display: block; margin-bottom: 4px; font: 600 13px/1.2 var(--font-display); color: #ead5a5; }
.play-requirement { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; padding: 2px 0; }
.play-requirement.met { color: #b9dfbc; }
.play-requirement.missing { color: #ffb7a5; font-weight: 700; }
.play-requirements p { margin: 5px 0 0; color: #e7e0d0; }
.play-requirements.can-play { border-color: #7c9d78; }
.selection-box > .eyebrow { margin-bottom: 3px; }
.action-title { margin: 0 0 4px; font: 700 18px/1.15 var(--font-display); color: #f0dcaa; }
.action-hint { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.selection-actions { display: flex; flex-direction: column; gap: 5px; max-height: 190px; margin-top: 8px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #a88951 #0b171b; }
.selection-actions button { display: flex; align-items: center; gap: 9px; padding: 6px 9px; text-align: left; border: 1px solid #7d8c66; border-radius: 2px; background: #1e332ce6; color: #f0e6c6; font-size: 14px; }
.selection-actions button > .icon { font-size: 17px; color: var(--gold-light); }
.selection-actions button:hover { border-color: #ffe39a; background: #294339e6; box-shadow: 0 0 10px #ffd36e44; }
.order-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.order-text b { font-weight: 700; }
.order-text span { font-size: 12px; color: #c4d0c0; }
.cancel-selection { margin-top: 7px; font-size: 13px; color: #e2c88d; }
.cancel-selection:hover { color: #fff; }
.thinking { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #e0d7b5; }
.thinking::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: pulse 1.1s infinite alternate; }
.log-box > .eyebrow { margin-bottom: 4px; font: 700 14px/1.2 var(--font-display); letter-spacing: 0; text-transform: none; color: #e7cf95; }
.log-list { display: flex; flex-direction: column; max-height: 78px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #a88951 #0b171b; }
.log-list p { position: relative; margin: 0 0 3px; padding-left: 12px; font-size: 13px; line-height: 1.35; color: #c8cdbf; }
.log-list p:first-child { color: #f0ead8; }
.log-list p::before { content: ""; position: absolute; left: 1px; top: 7px; width: 5px; height: 5px; transform: rotate(45deg); background: #dcc487; }
.turn-end { flex: none; min-height: 50px; font: 700 19px/1 var(--font-display); letter-spacing: .04em; text-transform: none; }
.turn-end:disabled { opacity: 1; filter: none; color: #a9ad9f; border-color: #5d5643; background: linear-gradient(#17252a, #0f1a1e); box-shadow: inset 0 0 0 2px #070d1090; text-shadow: none; }
.turn-end:disabled .icon { color: var(--gold); animation: hourglass 2.4s ease-in-out infinite; }
.turn-end.ready-pulse { animation: end-pulse 1.6s ease-in-out infinite; }

/* ---------- Privacy / finish screens ---------- */
.privacy-screen, .finish-screen { display: flex; align-items: center; justify-content: center; min-height: calc(100dvh - var(--header-h)); padding: 40px 20px; text-align: center; }
.privacy-inner, .finish-inner { max-width: 580px; padding: 34px 38px; }
.privacy-inner > .crest, .finish-inner > .crest { width: 96px; height: 112px; margin: 0 auto 22px; }
.privacy-screen h1, .finish-screen h1 { font-size: 50px; }
.privacy-screen p, .finish-screen p { font-size: 16px; color: var(--ink-2); }
.finish-stats { display: flex; justify-content: center; gap: 34px; margin: 22px 0; }
.finish-stats > div { display: flex; flex-direction: column; }
.finish-stats strong { font: 700 36px/1.1 var(--font-body); color: var(--gold-light); }
.finish-stats small { font: 700 11px/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.finish-buttons { display: flex; justify-content: center; gap: 10px; }
.finish-screen.victory h1 { color: #ffe3a0; text-shadow: 0 0 30px #ffc95a88, 0 2px 6px #000; }
.finish-screen.defeat h1 { color: #e0c2b8; }
.finish-screen.defeat .finish-inner > .crest { filter: grayscale(.85) brightness(.7); }
.finish-inner, .privacy-inner { animation: result-in .7s cubic-bezier(.2, .8, .2, 1) both; }
.finish-screen.victory .finish-inner { border-color: #f0d08a; box-shadow: var(--frame), 0 0 60px #e3b24f40, var(--shadow); }
.finish-screen.victory .finish-inner > .crest { width: 120px; height: 140px; border-color: #ffe39a; animation: crest-glow 2.4s ease-in-out infinite; }
.finish-screen.victory .finish-stats strong { text-shadow: 0 0 16px #ffcf5e66; }

/* ---------- Dialogs and toast ---------- */
dialog { max-width: 94vw; padding: 0; color: var(--ink); border: 1px solid #ccb078; border-radius: 3px; background: #0f1c21; box-shadow: inset 0 0 0 4px #071217, inset 0 0 0 5px #6b5e41, 0 20px 80px #000b; }
dialog::backdrop { background: #040a0dd9; backdrop-filter: blur(5px); }
dialog[open] { animation: dialog-in .22s cubic-bezier(.2, .7, .2, 1); }
.close-dialog { position: absolute; top: 8px; right: 10px; z-index: 2; width: 30px; height: 30px; color: #d6c8a2; font-size: 26px; line-height: 1; }
.close-dialog:hover { color: #fff; }
.close-label { display: none; }
.card-dialog { width: 600px; max-height: 92vh; overflow: auto; padding: 32px; }
.card-modal-content { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
.card-modal-content > .card-wrap { width: 220px; }
.card-modal-content .card { --art-h: 220px; --name-h: 38px; }
.card-modal-content .card-name { font-size: 16px; }
.card-modal-text h2 { margin-bottom: 8px; font-size: 28px; color: #f2dca7; }
.card-modal-text p { font-size: 15px; line-height: 1.6; color: #d6dccd; }
.modal-facts { margin: 14px 0 18px; }
.modal-facts > div { display: flex; justify-content: space-between; gap: 15px; padding: 5px 0; border-bottom: 1px solid #cadac11a; font-size: 14px; }
.modal-facts dt { color: var(--muted); }
.modal-facts dd { margin: 0; text-align: right; }
.keyword-explanations { padding-top: 12px; border-top: 1px solid #cfb37735; }
.keyword-explanations strong { font: 600 14px/1.3 var(--font-display); color: var(--gold-light); }
.keyword-explanations p { margin: 3px 0 10px; font-size: 14px; line-height: 1.55; color: #c8d0c1; }
.zone-dialog { padding: 30px; }
.zone-dialog .collection-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.help-dialog { width: 620px; padding: 36px; }
.help-dialog h2 { color: #f2dca7; }
.help-dialog p, .help-dialog li { font-size: 15px; line-height: 1.65; color: #cfd8c9; }
.help-dialog ol { margin-bottom: 22px; padding-left: 20px; }
.help-dialog li { margin-bottom: 10px; padding-left: 6px; }
.help-dialog strong { color: #f0e9d4; }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 1300; max-width: min(640px, 92vw); padding: 12px 20px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; border: 1px solid #c2a468; border-left: 3px solid #f0d08a; border-radius: 2px; background: #0c1a1ff2; color: #f0ead6; font-size: 15px; line-height: 1.45; box-shadow: inset 0 0 0 3px #07111780, 0 12px 40px #000c; transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
body.battle-mode .toast { top: calc(var(--header-h) + 72px); bottom: auto; transform: translate(-50%, -12px); }
body.battle-mode .toast.visible { transform: translate(-50%, 0); }

/* ---------- Motion ---------- */
@keyframes pulse { to { opacity: .25; } }
@keyframes torch-flicker { 0%, 100% { opacity: .5; transform: scale(1); } 12% { opacity: .62; } 23% { opacity: .46; transform: scale(1.03); } 41% { opacity: .6; } 58% { opacity: .44; transform: scale(.98); } 76% { opacity: .58; } }
@keyframes ready-breathe { 0%, 100% { box-shadow: inset 0 0 0 1px #ffe39a, 0 0 8px #ffcd5a44; } 50% { box-shadow: inset 0 0 0 1px #fff0c0, 0 0 18px 2px #ffcd5a99; } }
@keyframes target-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.22); } }
@keyframes target-pulse-enemy { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25) saturate(1.15); } }
@keyframes playable-glow { 0%, 100% { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #172226, inset 0 0 0 4px #b49447, 0 0 0 1px #ffe39a, 0 0 10px 1px #ffcf5e55, 0 6px 14px #000a; } 50% { box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #172226, inset 0 0 0 4px #d6b35c, 0 0 0 1px #fff0c0, 0 0 20px 3px #ffcf5e99, 0 6px 14px #000a; } }
@keyframes end-pulse { 0%, 100% { box-shadow: inset 0 0 0 2px #7d5d2c, inset 0 0 0 3px #f2d48f, 0 0 8px #ffcf6a44, 0 3px 10px #0008; } 50% { box-shadow: inset 0 0 0 2px #7d5d2c, inset 0 0 0 3px #fff0bd, 0 0 26px 4px #ffcf6aaa, 0 3px 10px #0008; } }
@keyframes heart-beat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
@keyframes hourglass { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(180deg); } }
@keyframes fog-drift { from { transform: translateX(-6%) translateY(0); } to { transform: translateX(6%) translateY(-2%); } }
@keyframes arrow-flow { to { stroke-dashoffset: -26; } }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes result-in { from { opacity: 0; transform: translateY(18px) scale(.96); } }
@keyframes crest-glow { 0%, 100% { box-shadow: 0 0 26px #ffcf5e55; } 50% { box-shadow: 0 0 54px 6px #ffcf5eaa; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* ---------- Battle fills the window on desktop ---------- */
@media (min-width: 901px) and (min-height: 600px) {
  html:has(body.battle-mode), body.battle-mode { height: 100%; overflow: hidden; }
  body.battle-mode main { height: calc(100dvh - var(--header-h)); }
  .battle-page { height: 100%; }
  .battle-layout { flex: 1; min-height: 0; align-items: stretch; }
  .battle-left, .battle-sidebar { min-height: 0; }
  .battle-left .hero-panel { flex: 0 1 200px; min-height: 120px; height: auto; }
  .opponent-summary .hero-panel { height: clamp(118px, 20vh, 176px); }
  .battle-field { min-height: 0; }
  .board { flex: 1; min-height: 0; }
  .board-row { height: auto; }
  .inspector-panel { flex: 1 1 auto; min-height: 150px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #a88951 #0b171b; }
  .inspector-body .card { --art-h: clamp(90px, 17vh, 170px); }
  .selection-box, .turn-end { flex: none; }
  .log-box { flex: 0 3 auto; min-height: 58px; overflow: hidden; }
  .battle-left .pile-panel { margin-top: auto; }
}
@media (min-width: 901px) and (min-height: 600px) and (max-height: 800px) {
  :root { --header-h: 50px; --hand-w: 104px; }
  .battle-page { gap: 6px; padding-block: 6px 8px; }
  .hand { min-height: 140px; padding-top: 8px; }
  .hand .card { --art-h: 98px; }
  .events-row { margin-top: 6px; }
  .event-card { height: 54px; padding-block: 4px 5px; }
  .event-text { margin-top: 1px; }
  .hero-stat-row { padding-block: 2px; }
  .hero-stat-row.resources { padding-top: 5px; }
  .hero-action { min-height: 28px; padding-block: 2px; }
  .pile-art { width: 40px; height: 50px; font-size: 20px; margin-bottom: 4px; }
  .log-box { display: none; }
  .selection-actions { max-height: 140px; }
  .turn-end { min-height: 44px; }
}
@media (min-width: 1500px) and (min-height: 860px) {
  :root { --hand-w: 128px; }
  .hand .card { --art-h: 128px; }
  .hand .card-name { font-size: 12.5px; }
  .hand { min-height: 184px; }
}
@media (min-width: 1800px) and (min-height: 1000px) {
  :root { --hand-w: 140px; }
  .hand .card { --art-h: 140px; --name-h: 34px; }
  .hand .card-name { font-size: 13px; }
  .hand { min-height: 200px; }
}

/* ---------- Narrower desktops ---------- */
@media (max-width: 1190px) {
  .lobby-body { grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; }
  .starter-grid { gap: 10px; }
  .builder-layout { grid-template-columns: minmax(0, 1fr) 290px; }
  .builder-layout .filters { grid-template-columns: 1fr 1fr; }
  .builder-layout .filters input { grid-column: 1 / -1; }
  .battle-recap small { display: none; }
}
@media (max-width: 1100px) {
  .site-header { gap: 20px; padding-inline: 16px; }
  .battle-toolbar { grid-template-columns: auto minmax(0, 1fr); }
  .battle-toolbar .page-actions { grid-column: 1 / -1; justify-content: flex-end; margin-top: -4px; }
  .battle-layout { grid-template-columns: 168px minmax(0, 1fr) 212px; gap: 9px; }
  .hero-name { font-size: 18px; }
  .hero-action-label { font-size: 11px; }
}
@media (max-width: 940px) {
  .lobby-intro { gap: 20px; }
  .lobby-body { grid-template-columns: 1fr; }
  .setup-panel { position: static; }
  .builder-layout { grid-template-columns: 1fr 270px; gap: 15px; }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters input { grid-column: 1 / -1; }
  .site-footer { flex-direction: column; gap: 4px; }
}

/* ---------- Tablet and phone: compact header (the battle uses the arena, see the end of the file) ---------- */
@media (max-width: 900px) {
  .header-status > span { display: none; }
  .main-nav { margin-left: auto; gap: 18px; }
}
@media (max-width: 660px) {
  .site-header { height: auto; min-height: var(--header-h); flex-wrap: wrap; gap: 0; padding: 8px 12px 0; }
  .brand strong { font-size: 18px; }
  .header-status { margin-left: auto; }
  .main-nav { order: 3; width: 100%; height: 38px; justify-content: center; gap: 32px; margin: 2px 0 0; }
  .page { padding: 24px 15px 40px; }
  .lobby-intro { padding-bottom: 18px; }
  .lobby-intro .lead { font-size: 15px; }
  .intro-seal { display: none; }
  .starter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .starter-card { min-height: 250px; }
  .starter-card h3 { font-size: 20px; }
  .starter-card p { font-size: 13px; }
  .starter-text { padding: 14px 11px 12px; }
  .how-strip { grid-template-columns: 1fr; gap: 14px; }
  .screen-heading { flex-direction: column; align-items: flex-start; gap: 10px; }
  .screen-heading h1 { font-size: 34px; }
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card { --art-h: 140px; }
  .builder-layout { display: flex; flex-direction: column-reverse; }
  .builder-panel { position: static; width: 100%; }
  .builder-panel .deck-list { max-height: 200px; }
  .card-dialog { width: 340px; padding: 26px 18px; }
  .card-modal-content { grid-template-columns: 1fr; gap: 16px; }
  .card-modal-content > .card-wrap { width: 200px; margin: auto; }
  .help-dialog { padding: 28px 22px; }
  .privacy-screen h1, .finish-screen h1 { font-size: 36px; }
  .privacy-inner, .finish-inner { padding: 26px 18px; }
  .finish-buttons { flex-direction: column; }
  .zone-dialog { padding: 26px 16px; }
  .zone-dialog .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer { padding: 16px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hand > .card-wrap:hover, .hand > .card-wrap:focus-within { transform: translateY(-36px) scale(1.3); }
}
/* Choices are part of a card's resolution and remain visible above the board. */
.gallery-pages { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0; scroll-margin-top: 20px; }
.gallery-pages span { color: #bcb39d; font-size: 13px; white-space: nowrap; }
.gallery-pages .button { min-height: 40px; }
.card:not(.compact) .card-top { display: flex; flex-direction: column; height: auto; }
.card:not(.compact) .card-name { position: relative; inset: auto; flex-shrink: 0; }
.card:not(.compact) .card-top > .artwork { position: relative; inset: auto; height: var(--art-h); flex-shrink: 0; }
.card:not(.compact) .card-type { position: relative; inset: auto; }
.collection-grid > .card-wrap, .builder-grid > div { content-visibility: auto; contain-intrinsic-size: auto 330px; }
@media (max-width: 440px) {
  .collection-grid { gap: 10px; }
  .collection-grid .card-name { font-size: 14px; line-height: 1.15; }
  .collection-grid .card-body { padding-inline: 8px; }
  .collection-grid .card-description { font-size: 12px; line-height: 1.4; }
  .gallery-pages { gap: 5px; }
  .gallery-pages .button { font-size: 12px; padding-inline: 9px; }
}
.choice-banner { flex: 0 1 auto; min-height: 90px; max-height: 44vh; overflow: auto; border: 1px solid #c9a55b; background: #13252cf2; border-radius: 8px; padding: 12px; box-shadow: 0 0 20px #c9a55b25; }
.battle-sidebar:has(.choice-banner) .selection-box { display: none; }
.battle-sidebar:has(.choice-banner) .inspector-panel { display: none; }
.choice-banner h3 { margin: 4px 0; color: #f0d89a; }
.choice-banner p { margin: 5px 0 10px; }
.choice-options { display: flex; flex-wrap: wrap; gap: 8px; max-height: 260px; overflow-y: auto; }
.choice-options .button { white-space: normal; text-align: left; }
.revealed-cards summary { cursor: pointer; font-weight: 700; }
.revealed-cards > div { display: grid; gap: 6px; max-height: 180px; overflow-y: auto; margin-top: 8px; }
.revealed-cards button { display: grid; text-align: left; white-space: normal; }
.revealed-cards small { opacity: .7; font-size: 10px; }
.choice-options { max-height: min(40vh, 340px); overflow-y: auto; }

/* ---------- Phone: compact arena (below 901 × 600) ----------
   One screen, no scrolling. Rows I–IV are columns, your lines sit at the bottom.
   Cell height comes from the free height; whatever is left goes to the dock. */
html:has(body.battle-compact), body.battle-compact { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.battle-compact .site-header, body.battle-compact .site-footer { display: none; }
body.battle-compact main { height: 100vh; height: 100dvh; height: var(--app-h, 100dvh); container: arena / size; }
body.battle-compact .toast { top: calc(env(safe-area-inset-top, 0px) + 62px); }
.arena {
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
  --aw: min(100cqw, 640px); --pad: 8px; --gap: 4px; --bar-h: 54px; --me-h: 56px; --mid-h: 34px; --end-w: 100px;
  --dock-min: clamp(124px, 19cqh, 168px);
  --cell-w: calc((var(--aw) - var(--sal) - var(--sar) - 2 * var(--pad) - 3 * var(--gap)) / 4);
  --free: calc(100cqh - var(--sat) - var(--sab) - var(--bar-h) - var(--me-h) - var(--mid-h) - var(--dock-min) - 6 * var(--gap));
  --cell-h: clamp(54px, calc(var(--free) / 4), calc(var(--cell-w) * 1.32));
  position: relative; display: grid; height: 100%; max-width: 640px; margin: 0 auto; padding: var(--sat) var(--sar) var(--sab) var(--sal);
  grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--bar-h) auto var(--me-h) minmax(0, 1fr); grid-template-areas: "foe" "board" "me" "dock";
  font-size: 14px; line-height: 1.3; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.arena button { -webkit-tap-highlight-color: transparent; }
.arena .icon { width: 1em; height: 1em; }

/* Opponent bar */
.arena-foe { grid-area: foe; position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px var(--pad) 4px; background: linear-gradient(#1b0f0ce6, #0c1418d9); border-bottom: 1px solid color-mix(in srgb, var(--enemy) 40%, transparent); }
.arena-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid #9c855640; border-radius: 8px; background: #0a1519b8; color: var(--gold); font-size: 20px; }
.arena-pill { display: inline-flex; align-items: center; gap: 3px; flex: none; height: 30px; padding: 0 8px; border: 1px solid #9c855640; border-radius: 15px; background: #0a1519cc; font: 700 14px/1 var(--font-body); color: var(--ink); }
.arena-pill small { font-size: 11px; font-weight: 500; color: var(--muted); }
.arena-pill .icon-resource, .arena-res .icon-resource { color: #7fe0b0; }
.arena-events-side { display: none; }

/* Hero chips: the portrait is the effects anchor (.hero-panel) and the target for hero attacks */
.arena-hero { position: relative; display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; height: 46px; padding-right: 6px; border-radius: 9px; text-align: left; transition: box-shadow .18s, background-color .18s; }
.arena-portrait.hero-panel { flex: none; width: 40px; height: 40px; border: 0; border-radius: 8px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--faction), 0 3px 8px #000a; container-type: size; }
.arena-portrait.hero-panel::after { display: none; }
.arena-portrait.hero-panel.active { box-shadow: 0 0 0 1px #000, 0 0 0 2px #f0d08a, 0 0 12px #e8b44f88; }
.arena-portrait > .artwork { inset: 0; z-index: 0; border-radius: inherit; }
.arena-portrait > .artwork::before { left: 50%; top: 0; width: 100%; transform: translate(-50%, -12%); }
.arena-hp { position: absolute; left: 24px; top: 23px; z-index: 2; display: grid; place-items: center; width: 27px; height: 25px; font: 800 13px/1 var(--font-body); color: #fff; text-shadow: 0 1px 2px #000; }
.arena-hp .icon { position: absolute; inset: 0; width: 100%; height: 100%; color: #b9261c; filter: drop-shadow(0 1px 2px #000); }
.arena-hp b { position: relative; margin-top: -2px; }
.arena-hp.critical .icon { animation: heart-beat 1s ease-in-out infinite; }
.arena-crown { position: absolute; left: -6px; top: -5px; z-index: 2; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--gold-light); color: #2a1b06; font-size: 12px; box-shadow: 0 0 0 1.5px #000, 0 0 12px #f1d79b; animation: arena-pulse 1.6s ease-in-out infinite; }
.arena-hmeta { display: flex; flex-direction: column; min-width: 0; }
.arena-hmeta b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 14px/1.15 var(--font-display); color: #f5e6c4; }
.arena-stats { display: flex; gap: 8px; margin-top: 3px; font: 700 13px/1 var(--font-body); white-space: nowrap; }
.arena-stats > span { display: inline-flex; align-items: center; gap: 2px; }
.arena-stats .icon { width: 11px; height: 11px; }
.arena-stats b { color: var(--ink); }
.st-might .icon { color: #ecc978; } .st-magic .icon { color: #c9a8ff; } .st-destiny .icon { color: #80d5ea; } .st-draw .icon, .st-special .icon { color: #7fe0b0; }
.arena-hero.targetable { background: #3a100acc; box-shadow: 0 0 0 2px #ff7a5c, 0 0 18px #ff5a3c99; animation: target-pulse-enemy 1.3s ease-in-out infinite; }
.arena-hero.aimed { background: #4a120acc; box-shadow: 0 0 0 3px #ff6a4a, 0 0 24px #ff5a3c; animation: none; }
.arena-hero.open { background: #2a2410cc; box-shadow: 0 0 0 2px var(--gold-light); }
.arena-hero.drop-hover { transform: scale(1.04); }
.arena-tgi { position: absolute; right: 6px; top: 50%; display: grid; place-items: center; width: 26px; height: 26px; transform: translateY(-50%); border-radius: 50%; background: #ff6a4a; color: #2a0b05; font-size: 15px; }
.arena-hero-pred { position: absolute; left: 0; top: 50%; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; transform: translateY(-50%); border-radius: 8px; background: #1a0503b0; font: 800 18px/1 var(--font-body); color: #ff8a72; text-shadow: 0 1px 3px #000; }

/* Board */
.arena-board { grid-area: board; position: relative; display: grid; gap: var(--gap); padding: var(--gap) var(--pad); grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: var(--cell-h) var(--cell-h) var(--mid-h) var(--cell-h) var(--cell-h); }
.cslot[data-lane="0"] { grid-column: 1; } .cslot[data-lane="1"] { grid-column: 2; } .cslot[data-lane="2"] { grid-column: 3; } .cslot[data-lane="3"] { grid-column: 4; }
.cslot[data-side="enemy"][data-line="back"] { grid-row: 1; } .cslot[data-side="enemy"][data-line="front"] { grid-row: 2; }
.arena-mid { grid-row: 3; grid-column: 1 / -1; }
.cslot[data-side="own"][data-line="front"] { grid-row: 4; } .cslot[data-side="own"][data-line="back"] { grid-row: 5; }
.arena .board-slot.cslot { height: auto; min-height: 0; border-radius: 7px; transition: opacity .2s, filter .2s, transform .16s, box-shadow .18s; }
.cslot.empty[data-line="back"] { opacity: .88; }
.cslot-btn { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 6px; text-align: left; }
.cslot.occupied { border-color: color-mix(in srgb, var(--faction) 70%, #000); box-shadow: inset 0 0 0 1px #000c; }
.cslot-btn > .artwork { inset: 0; border-radius: inherit; }
.cslot-btn > .artwork::before { left: 50%; top: 50%; width: max(100cqw, calc(100cqh * var(--art-ratio, 1))); transform: translate(-50%, -45%); }
.u-rune { position: absolute; inset: 0; display: grid; place-items: center; font: 600 12px/1 var(--font-display); color: #c9b47a59; }
.u-rune::before { content: ""; position: absolute; width: 28%; aspect-ratio: 1; transform: rotate(45deg); border: 1px solid #c9b47a33; }
.u-name { position: absolute; inset: 0 0 auto; z-index: 1; overflow: hidden; padding: 3px 17px 9px 5px; white-space: nowrap; text-overflow: ellipsis; font: 600 9.5px/1.15 var(--font-display); color: #f5ead2; background: linear-gradient(#000d, #0000); text-shadow: 0 1px 2px #000; }
.u-type { position: absolute; top: 4px; right: 4px; z-index: 1; width: 12px; height: 12px; color: #f5ead2d0; filter: drop-shadow(0 1px 1px #000); }
.u-type .icon { width: 12px; height: 12px; display: block; }
.u-stats { position: absolute; inset: auto 0 0; z-index: 1; display: flex; justify-content: space-between; padding: 12px 4px 3px; background: linear-gradient(#0000, #000e 60%); font: 800 13px/1 var(--font-body); }
.u-stats > span, .mc-foot > span, .arena-pcard .u-stats > span { display: inline-flex; align-items: center; gap: 1px; text-shadow: 0 1px 2px #000; }
.u-stats .icon { width: 10px; height: 10px; }
.u-stats .attack { color: var(--attack); } .u-stats .ret { color: var(--retaliation); } .u-stats .hp { color: var(--health); } .u-stats .damaged { color: #ff6650; }
.u-badge { position: absolute; left: 4px; top: 17px; z-index: 2; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #26343a; color: #a3ada6; font-size: 10px; box-shadow: 0 0 0 1px #000; }
.u-badge.status-ready { background: #e5bf58; color: #1b1406; box-shadow: 0 0 0 1px #000, 0 0 8px #f1d79b; }
.u-stack { position: absolute; right: 4px; bottom: 19px; z-index: 2; padding: 1px 4px; border-radius: 3px; background: #000b; font: 700 10px/1.2 var(--font-body); color: #d9e4c6; }
.u-building { position: absolute; left: 4px; bottom: 19px; z-index: 2; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: #232819e6; color: #e6d7a2; font-size: 11px; box-shadow: 0 0 0 1px #8d8656; }
.cslot.empty .u-building { left: 50%; top: 50%; bottom: auto; width: 26px; height: 26px; transform: translate(-50%, -50%); font-size: 15px; }
.cslot.unit-ready { animation: none; border-color: #f5d685; box-shadow: inset 0 0 0 1px #ffe39a, 0 0 10px #ffcd5a55; }
.cslot.unit-spent .cslot-btn > .artwork { filter: saturate(.4) brightness(.72); }
.arena-board.focus .cslot:not(.targetable):not(.source-selected):not(.aimed) { opacity: .42; filter: saturate(.5); }
.cslot.target-empty { border-color: var(--gold-light); background: #2a2410d9; box-shadow: inset 0 0 0 1px #fff0c0, 0 0 14px #f1d79b66; }
.cslot.target-empty.target-move { border-color: #86dccb; background: #10291fd9; box-shadow: inset 0 0 0 1px #c5f5ea, 0 0 14px #86dccb66; }
.u-tgi { position: absolute; z-index: 3; display: grid; place-items: center; border-radius: 50%; pointer-events: none; }
.cslot.empty .u-tgi { left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; font-size: 16px; color: #2a1b06; background: var(--gold-light); box-shadow: 0 0 14px #f1d79b; }
.cslot.target-move .u-tgi { background: #86dccb; box-shadow: 0 0 14px #86dccb; color: #062019; }
.cslot.occupied .u-tgi { top: 3px; right: 3px; width: 22px; height: 22px; font-size: 12px; color: #2a0b05; background: #ff6a4a; box-shadow: 0 0 0 1px #000; }
.cslot.target-friend .u-tgi { background: #8fe6f8; color: #062019; }
.arena .board-slot.cslot.source-selected { z-index: 2; transform: translateY(-2px) scale(1.04); }
.cslot.aimed { z-index: 2; border-color: #ff6a4a; box-shadow: inset 0 0 0 2px #ff6a4a, 0 0 24px #ff5a3c; animation: none; }
.board-slot:has(.drop-hover) { z-index: 3; transform: scale(1.07); }
.u-pred { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 2px; background: #1a0503b0; pointer-events: none; }
.u-pred b { font: 800 24px/1 var(--font-body); color: #ff8a72; text-shadow: 0 2px 4px #000; }
.u-pred small { font: 800 10px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #ffd2c8; }
.u-pred.safe { background: #05101399; }
.u-pred.safe b { color: var(--ok); }

/* Front line: turn number and the two shared events */
.arena-mid { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
.arena-mid::before { content: ""; position: absolute; left: calc(-1 * var(--pad)); right: calc(-1 * var(--pad)); top: 50%; z-index: -1; height: 1px; background: linear-gradient(90deg, #0000, #86dccbaa 18%, #86dccbaa 82%, #0000); }
.arena-turn { display: inline-flex; align-items: center; flex: none; height: 26px; padding: 0 9px; border: 1px solid #9c855670; border-radius: 13px; background: #0a1519; font: 700 12px/1 var(--font-display); color: var(--gold-light); }
.their-turn .arena-turn { border-color: #e0643f88; color: #ffb3a0; }
.arena-event { position: relative; display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; height: 30px; padding: 0 9px 0 3px; border: 1px solid #9c855666; border-radius: 15px; background: #0f1d22f0; text-align: left; font: 600 11.5px/1 var(--font-display); white-space: nowrap; color: #fbe7b8; }
.arena-event::after { content: ""; position: absolute; inset: -5px 0; }
.ev-cost, .mc-cost { display: grid; place-items: center; flex: none; border-radius: 50%; border: 1.5px solid #e3c47c; background: radial-gradient(circle at 35% 30%, #6b5b2a, #2d2610); color: #fbe6b0; font: 800 12px/1 var(--font-body); text-shadow: 0 1px 2px #000; }
.ev-cost { width: 24px; height: 24px; }
.ev-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ev-leave { display: inline-flex; font-size: 12px; color: #ffad94; }
.arena-event.playable { border-color: var(--gold-light); box-shadow: 0 0 10px #f1d79b55; }
.arena-event.selected { border-color: #fff4d0; box-shadow: 0 0 14px #f1d79bcc; }

/* Your hero, resources and end of turn */
.arena-me { grid-area: me; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px calc(var(--pad) + var(--end-w) + 8px) 4px var(--pad); border-top: 1px solid #9c855650; background: linear-gradient(#0c1418d0, #10201fe6); }
.arena-hero.own { flex: 0 0 auto; height: 50px; padding-right: 0; }
.arena-hero.own .arena-portrait { width: 46px; height: 46px; }
.arena-hero.own .arena-hp { left: 30px; top: 29px; }
.arena-mstats { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.arena-mstats .arena-stats { margin: 0; gap: 9px; font-size: 15px; }
.arena-mstats .arena-stats .icon { width: 12px; height: 12px; }
.arena-piles { display: flex; gap: 4px; font: 700 11px/1 var(--font-body); color: var(--muted); }
.arena-piles > * { display: inline-flex; align-items: center; gap: 2px; padding: 2px 3px; border-radius: 4px; color: inherit; }
.arena-piles button { background: #ffffff0d; }
.arena-piles .icon { width: 11px; height: 11px; }
.arena-res { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; min-width: 48px; height: 46px; margin-left: auto; border: 1px solid #7fe0b055; border-radius: 9px; background: #0a1a17d9; }
.arena-res b { display: flex; align-items: center; gap: 3px; font: 800 19px/1 var(--font-body); color: #d8fbe8; }
.arena-res b .icon { width: 14px; height: 14px; }
.arena-res small { margin-top: 3px; font: 700 10px/1 var(--font-body); color: var(--muted); }
.arena-me .arena-orders { display: none; }
.arena-end { grid-area: me; justify-self: end; align-self: center; z-index: 2; display: flex; padding: 0 7px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: var(--end-w); height: 48px; margin-right: var(--pad); border-radius: 8px; font: 700 13px/1.05 var(--font-display); text-align: center; color: #2a1b06; background: linear-gradient(#f6d995, #c99a46 62%, #a77b30); box-shadow: inset 0 0 0 1px #fff7, 0 0 0 1px #000, 0 5px 14px #000b; }
.arena-end > span { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.arena-end small { display: inline-flex; align-items: center; gap: 2px; font: 700 10.5px/1 var(--font-body); opacity: .82; }
.arena-end.ready-pulse { animation: arena-end-pulse 1.6s ease-in-out infinite; }
.arena-end.confirm { color: #fff; background: linear-gradient(#ff9a7a, #c5432b); box-shadow: inset 0 0 0 1px #fff6, 0 0 0 1px #000, 0 0 18px #ff5a3c88; }
.arena-end:disabled { gap: 3px; color: var(--muted); background: #13232a; box-shadow: inset 0 0 0 1px #9c855640; font-size: 11px; }

/* Dock */
.arena-dock { grid-area: dock; position: relative; min-height: 0; container: dock / size; border-top: 1px solid #9c855638; background: linear-gradient(#0b1519f2, #061014); }
.arena-hand { position: absolute; inset: 0; touch-action: none; }
.arena-empty { margin: 0; padding-top: 40px; text-align: center; font-size: 13px; color: var(--muted); }
.mcard {
  --cw: min(calc((100cqh - 24px) * .72), 118px); --ch: calc(var(--cw) / .72);
  --step: min(calc(var(--cw) + 6px), calc((100cqw - 2 * var(--pad) - var(--cw)) / var(--div)));
  position: absolute; bottom: max(9px, calc((100cqh - var(--ch)) / 2 - 6px)); left: calc((100cqw - var(--cw) - var(--n1) * var(--step)) / 2 + var(--i) * var(--step)); z-index: calc(10 + var(--i));
  width: var(--cw); height: var(--ch); border-radius: 7px; text-align: left; background: var(--parchment); box-shadow: 0 0 0 1px #000, 0 0 0 2px #6b5a3a, 0 6px 14px #000c;
  transform-origin: 50% 100%; transition: transform .14s ease-out, box-shadow .16s, filter .16s, opacity .16s;
}
.mc-art { position: absolute; left: 3px; right: 3px; top: 3px; height: 57%; overflow: hidden; border-radius: 5px 5px 2px 2px; background: #1b252a; }
.mc-cost { position: absolute; left: -6px; top: -7px; z-index: 2; width: 25px; height: 25px; font-size: 14px; }
.mc-cost.short { border-color: #ffb4a4; background: radial-gradient(circle at 35% 30%, #d36c56, #5a1a12); }
/* Requirements and the name hug the left edge: in the fan only the left part of a card shows. */
.mc-reqs { position: absolute; left: 1px; top: 22px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.mc-req { display: inline-flex; align-items: center; gap: 1px; height: 15px; padding: 0 3px; border-radius: 3px; background: #0b1519e6; box-shadow: 0 0 0 1px #000; font: 800 10px/1 var(--font-body); color: #fff; }
.mc-req .icon { width: 9px; height: 9px; }
.mc-req.missing { background: #a3271a; }
.mc-name { position: absolute; left: 5px; right: 4px; top: calc(57% + 6px); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 700 9.5px/1.12 var(--font-display); color: var(--parchment-ink); }
.mc-foot { position: absolute; left: 5px; right: 4px; bottom: 4px; display: flex; gap: 5px; font: 800 11px/1 var(--font-body); color: var(--parchment-ink); }
.mc-foot .icon { width: 9px; height: 9px; }
.mc-foot .attack { color: #7a4d09; } .mc-foot .ret { color: #24516b; } .mc-foot .hp { color: #9b2618; }
.mc-type { white-space: nowrap; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: #6b5d45; }
.mcard.playable { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold-light), 0 0 14px #f1d79b88, 0 6px 14px #000c; }
.mcard.targetable { box-shadow: 0 0 0 1px #000, 0 0 0 2px #8fe6f8, 0 0 16px #6fd8f0b0; }
.mcard.dimmed { filter: brightness(.6) saturate(.55); }
.arena-hand.scrubbing .mcard:not(.focus) { filter: brightness(.55) saturate(.6); }
.mcard.focus { z-index: 60; filter: none; transform: translateY(-30%) scale(1.55); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold-light), 0 16px 30px #000; }
.mcard.dragging { opacity: .2; }
.arena-hand.waiting .mcard { filter: brightness(.45) saturate(.4); }
.mcard.drag-ghost { position: fixed; left: 0; top: 0; bottom: auto; z-index: 1200; pointer-events: none; transition: none; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold-light), 0 18px 34px #000; }
.drag-arc { position: fixed; inset: 0; z-index: 1150; width: 100vw; height: 100vh; overflow: visible; pointer-events: none; }
.drag-arc path { fill: none; stroke: var(--gold-light); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 9; filter: drop-shadow(0 0 4px #f1d79b); animation: arc-dash .5s linear infinite; }
.drag-arc[data-kind="hostile"] path { stroke: #ff6a4a; filter: drop-shadow(0 0 5px #ff5a3c); }
.drag-arc circle { fill: var(--gold-light); }
.drag-arc[data-kind="hostile"] circle { fill: #ff6a4a; }
.arena-wait { position: absolute; left: 50%; top: 8px; z-index: 80; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); margin: 0; padding: 7px 14px; transform: translateX(-50%); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid #e0643f88; border-radius: 18px; background: #1c0c09ee; font: 600 13px/1.2 var(--font-display); color: #ffd2c8; box-shadow: 0 6px 16px #000c; }
.arena-spinner { flex: none; width: 14px; height: 14px; border: 2px solid #ffb3a055; border-top-color: #ffb3a0; border-radius: 50%; animation: ring-spin .8s linear infinite; }

/* Dock panels */
.arena-panel { position: absolute; inset: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) 96px; gap: 10px; padding: 10px var(--pad); animation: arena-dock-in .2s ease-out; }
.arena-panel.aim { grid-template-columns: minmax(0, 1fr) 100px; }
.arena-pcard { position: relative; height: 100%; max-height: 150px; aspect-ratio: .74; overflow: hidden; border-radius: 7px; background: #1b252a; box-shadow: 0 0 0 1px #000, 0 0 0 2px color-mix(in srgb, var(--faction) 55%, #000), 0 6px 14px #000c; container-type: size; }
.arena-pcard > .artwork::before { left: 50%; top: 0; width: max(100cqw, calc(100cqh * var(--art-ratio, 1))); transform: translateX(-50%); }
.arena-pcard .mc-cost { left: 2px; top: 2px; }
.arena-pcard .u-stats { justify-content: space-around; padding: 12px 2px 4px; }
.arena-pbody { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 0; overflow: hidden; }
.arena-ptype { margin: 0; font: 700 10px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.arena-ptype .icon { width: 11px; height: 11px; color: #ff6a4a; }
.arena-ptitle { margin: 0; font: 600 16px/1.12 var(--font-display); color: var(--gold-light); }
.arena-ptitle.sm { font-size: 13.5px; line-height: 1.18; }
.arena-ptext { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 0; overflow: hidden; font-size: 13px; line-height: 1.28; color: var(--ink-2); }
.arena-phint { margin: 0; font: 700 12.5px/1.25 var(--font-body); color: var(--gold-light); }
.arena-phint .icon { margin-right: 3px; vertical-align: -.12em; }
.arena-phint.bad { color: #ffa08a; }
.arena-pacts { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; }
.arena-btn { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 0 8px; border: 1px solid #9c855670; border-radius: 7px; background: #12252b; font: 700 13px/1.1 var(--font-body); text-align: center; color: var(--ink); }
.arena-btn .icon { width: 14px; height: 14px; flex: none; }
.arena-btn small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.arena-btn.primary { border: 0; background: linear-gradient(#f6d995, #c99a46 62%, #a77b30); color: #2a1b06; box-shadow: inset 0 0 0 1px #fff7; font-family: var(--font-display); }
.arena-btn.danger { border: 0; background: linear-gradient(#ff8f6e, #b83a22); color: #fff; box-shadow: inset 0 0 0 1px #fff5; font-family: var(--font-display); }
.arena-btn.ghost { border-color: #9c855640; background: #0a1519; color: var(--ink-2); }
.arena-btn.sm { min-width: 44px; padding: 0; }
.arena-pacts .arena-btn .order-text { overflow: hidden; text-overflow: ellipsis; }
.arena-pacts .arena-btn .order-text span { display: none; }
.arena-options { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; margin-top: 3px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.arena-opt { display: flex; align-items: center; gap: 6px; min-height: 40px; max-width: 100%; padding: 4px 10px; border: 1px solid var(--gold-light); border-radius: 7px; background: #172a2d; font-size: 13px; text-align: left; color: var(--ink); box-shadow: 0 0 10px #f1d79b33; }
.arena-opt.ghost { border-color: #9c855640; background: #0a1519; box-shadow: none; color: var(--ink-2); }
.arena-opt .order-text { display: flex; flex-direction: column; min-width: 0; }
.arena-opt .order-text span { font-size: 11.5px; color: var(--muted); }
.arena-prow { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: baseline; gap: 6px; margin: 0; padding: 3px 0; border-bottom: 1px solid #9c855622; font-size: 13.5px; line-height: 1.25; color: var(--ink-2); }
.arena-prow .pl { font: 700 10px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.arena-prow .pn { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; color: var(--ink); }
.arena-prow .pv { white-space: nowrap; font-weight: 700; color: #ffb3a0; }
.arena-prow .icon { width: 11px; height: 11px; margin: 0 1px; color: var(--health); vertical-align: -.1em; }
.arena-prow b { font-size: 15px; color: var(--ink); }
.arena-prow .dead, .arena-prow .dead .icon { color: #ff7056; }
.arena-choice { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4px; padding: 8px var(--pad) 10px; animation: arena-dock-in .2s ease-out; }
.arena-heropanel { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px; padding: 8px var(--pad) 12px; animation: arena-dock-in .2s ease-out; }
.arena-hp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.arena-hp-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 6px; min-height: 0; }
.arena-hcmd { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border: 1px solid #9c855670; border-radius: 9px; background: #12252b; font: 700 12px/1.1 var(--font-body); color: var(--ink); }
.arena-hcmd > .icon { width: 20px; height: 20px; }
.arena-hcmd b { display: inline-flex; align-items: center; gap: 2px; font: 800 14px/1 var(--font-body); color: var(--gold-light); }
.arena-hcmd b .icon { width: 12px; height: 12px; color: #7fe0b0; }
.arena-hcmd small { position: absolute; left: 50%; bottom: -7px; max-width: 110%; overflow: hidden; padding: 2px 6px; transform: translateX(-50%); white-space: nowrap; text-overflow: ellipsis; border-radius: 8px; background: var(--gold-light); font: 700 9.5px/1.1 var(--font-body); color: #2a1b06; }
.arena-hcmd.suggest { border-color: var(--gold-light); box-shadow: 0 0 14px #f1d79b77; }
.arena-hcmd:disabled { opacity: .4; }
.arena-mull { grid-area: board; z-index: 6; align-self: center; margin: 0 14px; padding: 18px 16px; border: 1px solid var(--line); border-radius: 12px; background: #0b1519f2; box-shadow: 0 16px 40px #000c; text-align: center; }
.arena-mull h3 { margin: 4px 0 6px; font-size: 19px; color: var(--gold-light); }
.arena-mull p { margin: 0 0 12px; font-size: 14px; color: var(--ink-2); }
.arena-mull-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Dialogs become bottom sheets on the phone */
/* The sheet's bottom edge follows the measured visible height: some phone browsers place
   fixed elements against a taller layout viewport, which would hide its end under the toolbar. */
body.battle-compact dialog { top: auto; bottom: max(0px, calc(100% - var(--app-h, 100%))); width: min(100%, 640px); max-width: 100%; max-height: calc(var(--app-h, 100dvh) - 48px); margin: 0 auto; border-radius: 16px 16px 0 0; animation: arena-sheet .26s cubic-bezier(.2, .8, .2, 1); }
body.battle-compact .card-dialog, body.battle-compact .help-dialog { overflow: auto; padding: 0 16px calc(18px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; touch-action: pan-y; }
/* The way back is a sticky bar at the top of every sheet, so it never scrolls or hides away. */
body.battle-compact dialog .close-dialog { position: sticky; top: 0; right: auto; z-index: 6; display: flex; align-items: center; gap: 8px; width: calc(100% + 32px); height: 52px; margin: 0 -16px 14px; padding: 0 16px; border-bottom: 1px solid #9c855640; border-radius: 16px 16px 0 0; background: #0f1c21f7; font: 700 15px/1 var(--font-body); color: var(--gold-light); }
body.battle-compact dialog .close-x { display: none; }
body.battle-compact dialog .close-label { display: inline-flex; align-items: center; gap: 8px; }
body.battle-compact dialog .close-label .icon { width: 18px; height: 18px; }
body.battle-compact .card-modal-content { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 14px; }
body.battle-compact .card-modal-content > .card-wrap { width: auto; margin: 0; }
body.battle-compact .card-modal-content .card { --art-h: clamp(110px, 32vw, 200px); --name-h: 32px; }
body.battle-compact .card-modal-text h2 { font-size: 22px; }
body.battle-compact .card-modal-text p { font-size: 14px; line-height: 1.5; }
.arena-menu h2 { margin: 2px 0 14px; color: #f2dca7; }
.arena-menu-list { display: grid; gap: 8px; }
.arena-menu-list .arena-btn { justify-content: flex-start; padding: 0 14px; font-size: 15px; text-align: left; }
.arena-menu-list .arena-btn span { display: flex; flex-direction: column; }
.arena-menu-sec { margin: 18px 0 4px; }
.arena-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 56px; text-align: left; font-size: 15px; color: var(--ink); }
.arena-switch small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.arena-switch i { position: relative; flex: none; width: 46px; height: 28px; border-radius: 14px; background: #26343a; transition: background-color .2s; }
.arena-switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #cfd0c2; transition: transform .2s; }
.arena-switch[aria-checked="true"] i { background: #b08a3e; }
.arena-switch[aria-checked="true"] i::after { transform: translateX(18px); background: #fff4d0; }

/* Low dock (landscape, short screens): mini cards keep cost, requirements and name. */
@container dock (max-height: 112px) {
  .mcard .mc-foot { display: none; }
  .mcard .mc-art { height: 60%; }
  .mcard .mc-name { top: calc(60% + 4px); font-size: 9px; }
}

/* Landscape phone: the desktop board orientation, heroes on the sides, end turn under the right thumb. */
@container arena (orientation: landscape) {
  .arena {
    --side: clamp(104px, 16cqw, 160px); --dock-l: clamp(100px, 28cqh, 128px);
    max-width: none; grid-template-columns: var(--side) minmax(0, 1fr) var(--side); grid-template-rows: minmax(0, 1fr) var(--dock-l); grid-template-areas: "me board foe" "me dock foe";
  }
  .arena-board { grid-template-columns: 1fr 1fr 12px 1fr 1fr; grid-template-rows: repeat(4, minmax(0, 1fr)); padding: 6px 4px; }
  .arena-board > .cslot[data-lane="0"] { grid-row: 1; } .arena-board > .cslot[data-lane="1"] { grid-row: 2; } .arena-board > .cslot[data-lane="2"] { grid-row: 3; } .arena-board > .cslot[data-lane="3"] { grid-row: 4; }
  .arena-board > .cslot[data-side="own"][data-line="back"] { grid-column: 1; } .arena-board > .cslot[data-side="own"][data-line="front"] { grid-column: 2; }
  .arena-board > .cslot[data-side="enemy"][data-line="front"] { grid-column: 4; } .arena-board > .cslot[data-side="enemy"][data-line="back"] { grid-column: 5; }
  .arena-board > .arena-mid { grid-column: 3; grid-row: 1 / -1; }
  .arena-mid > * { display: none; }
  .arena-mid::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(#0000, #86dccbaa 15%, #86dccbaa 85%, #0000); }
  .arena-foe, .arena-me { flex-flow: row wrap; align-content: flex-start; gap: 6px; padding: 8px; border: 0; }
  .arena-foe { padding-bottom: 66px; border-left: 1px solid color-mix(in srgb, var(--enemy) 40%, transparent); background: linear-gradient(90deg, #0c1418cc, #1b0f0ce6); }
  .arena-me { border-right: 1px solid #9c855650; background: linear-gradient(90deg, #10201fe6, #0c1418d0); }
  .arena-foe .arena-icon { flex: 1; }
  .arena-hero, .arena-hero.own { order: 2; flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 6px; height: auto; padding: 0; }
  .arena-portrait.hero-panel, .arena-hero.own .arena-portrait { width: 100%; height: clamp(54px, 26cqh, 104px); }
  .arena-hp, .arena-hero.own .arena-hp { left: auto; right: 3px; top: 3px; }
  .arena-hmeta b { font-size: 13px; }
  .arena-stats { flex-wrap: wrap; gap: 4px 8px; }
  .arena-pill { order: 3; flex: 1; justify-content: center; }
  .arena-events-side { order: 4; display: grid; gap: 6px; width: 100%; }
  .arena-mstats { order: 3; gap: 6px; }
  .arena-res { order: 4; width: 100%; height: 40px; margin: 0; flex-direction: row; gap: 8px; }
  .arena-me .arena-orders { order: 5; display: flex; width: 100%; }
  .arena-tgi { top: 30px; transform: none; }
  .arena-hero-pred { top: 0; width: 100%; height: clamp(54px, 26cqh, 104px); transform: none; font-size: 26px; }
  .arena-end { grid-area: foe; align-self: end; justify-self: stretch; width: auto; margin: 0 8px 8px; }
  .mcard { --cw: min(calc((100cqh - 18px) * .72), 92px); bottom: 6px; }
  .arena-panel { grid-template-columns: auto minmax(0, 1fr) 110px; padding: 6px 10px; }
  .arena-panel.aim { grid-template-columns: minmax(0, 1fr) 110px; }
  .arena-ptext, .arena-panel.aim .arena-phint { display: none; }
  .arena-hcmd { flex-direction: row; gap: 6px; min-height: 44px; }
  .arena-hcmd small { display: none; }
  .arena-mull { grid-area: board; }
}

@keyframes arena-pulse { 50% { transform: scale(1.12); } }
@keyframes arena-end-pulse { 50% { box-shadow: inset 0 0 0 1px #fff7, 0 0 0 1px #000, 0 0 22px #f1d79bcc; } }
@keyframes arena-dock-in { from { opacity: 0; transform: scale(.97); } }
@keyframes arena-sheet { from { transform: translateY(100%); } }
@keyframes arc-dash { to { stroke-dashoffset: -11; } }