/* WordBattle - Comic Theme
 * "Mahalle kavgasi" street-fight comic page: CMYK print colors, black ink,
 * halftone dots, tilted caption boxes, hand-lettered shouting.
 *
 * Visual layer only. wordbattle.css / grammar-panel.css / ui-improvements.css
 * provide layout, game-state visibility and animation timing; this file is
 * loaded last and owns color, type, borders and shadows. Where an old file
 * uses a high-specificity state selector, the same selector is repeated here
 * so load order decides instead of !important.
 */

:root {
    /* Palette */
    --ink: #000;
    --paper: #fffbf0;
    --paper-shade: #f1e9d2;
    --page: #1f3f95;
    --page-dot: #2b4fae;
    --pow: #e8262b;
    --zap: #ffd21f;
    --cyan: #14a3de;
    --magenta: #e0218a;
    --go: #22b35a;
    --orange: #ff7a1a;
    --dusk: #7d7aa8;

    /* Damage channels */
    --ch-moral: var(--pow);
    --ch-honor: var(--zap);
    --ch-shame: var(--magenta);
    --ch-will: var(--cyan);
    --ch-fury: var(--orange);
    --ch-fear: var(--dusk);

    /* Type */
    /* Japanese words (cards-ja.js) fall through the Latin faces to a Japanese one of
       the same voice: Dela Gothic One (heavy manga lettering) for display, Yusei Magic
       (marker) for hand and graffiti. Google Fonts splits them by unicode-range, so
       only the glyphs a page shows are fetched. */
    --font-display: 'Bangers', 'Dela Gothic One', Impact, 'Arial Black', sans-serif;
    --font-body: 'Archivo', 'Segoe UI', system-ui, 'Yu Gothic UI', 'Meiryo', sans-serif;
    --font-hand: 'Patrick Hand', 'Yusei Magic', 'Comic Neue', 'Segoe Print', cursive;
    --font-graffiti: 'Sedgwick Ave Display', 'Mansalva', 'Yusei Magic', 'Segoe Print', cursive;
    /* How each tone looks when said (cards.js TONE_STYLES style). All carry Turkish
       letters (Google Fonts latin-ext subset): ş, ğ, ı, İ never fall back mid-word. */
    --font-tone-shout: 'Knewave', var(--font-display);
    --font-tone-calm: 'Mansalva', var(--font-hand);
    --font-tone-mock: var(--font-graffiti);
    --font-tone-menace: 'Rubik Wet Paint', var(--font-display);
    --font-tone-unhinged: 'Rubik Glitch', var(--font-display);

    /* Ink */
    --line: 3px solid var(--ink);
    --line-heavy: 4px solid var(--ink);
    --drop: 5px 5px 0 var(--ink);
    --drop-heavy: 8px 8px 0 var(--ink);
    --drop-small: 3px 3px 0 var(--ink);
    --outline-text: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 3px 4px 0 var(--ink);
    --outline-text-thin: -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 1px 1px 0 var(--ink);
    --halftone: radial-gradient(rgba(0, 0, 0, 0.18) 1.1px, transparent 1.5px);

    /* Page geometry */
    --hud-h: 96px;
    --zone-top: 138px;
    --side-w: 240px;
    --hand-h: 208px;    /* exact height of .hand-area - panels above end relative to it */
    --gutter: 20px;
}

/* ===========================
   PAGE
   =========================== */
body {
    font-family: var(--font-body);
    color: var(--ink);
    background-color: var(--page);
    background-image: radial-gradient(var(--page-dot) 2px, transparent 2.5px);
    background-size: 14px 14px;
}

button {
    font-family: var(--font-body);
}

/* The stage: the board is laid out at a logical size and scaled uniformly to the
   screen (GameUI.fitStage sets width/height/--stage-scale). The transform also makes
   it the containing block for the board's fixed-position panels, so every panel is
   placed in stage coordinates. It is a size container: layout rules below use
   @container stage (...) and cqw/cqh units instead of viewport media queries. */
.game-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    transform: scale(var(--stage-scale, 1));
    transform-origin: 0 0;
    container: stage / size;
    overflow: hidden;
}

.game-container[data-layout="portrait"] {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

:focus-visible {
    outline: 3px solid var(--zap);
    outline-offset: 3px;
}

/* Tilted caption box - names every panel */
.panel-caption,
.log-header,
.crowd-header {
    position: absolute;
    top: -18px;
    left: 14px;
    z-index: 2;
    padding: 3px 12px 1px;
    background: var(--zap);
    border: var(--line);
    box-shadow: var(--drop-small);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1.2;
    color: var(--ink);
    text-transform: uppercase;
    text-shadow: none;
    transform: rotate(-2.5deg);
    white-space: nowrap;
}

/* ===========================
   TOP HUD - two fighter panels
   =========================== */
.top-hud {
    height: var(--hud-h);
    padding: 22px var(--gutter) 0;
    align-items: flex-start;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
}

.player-info {
    position: relative;
    gap: 12px;
    padding: 8px 14px 8px 10px;
    background: var(--paper);
    border: var(--line);
    box-shadow: var(--drop);
    flex: 0 1 38%;
    max-width: 38%;
}

.player-info.opponent {
    padding: 8px 10px 8px 14px;
}

.player-info.opponent .panel-caption {
    left: auto;
    right: 14px;
    background: var(--magenta);
    color: #fff;
    transform: rotate(2.5deg);
}

.avatar {
    width: 50px;
    height: 50px;
    background: var(--cyan) var(--halftone);
    background-size: 5px 5px;
    border: var(--line);
    border-radius: 50%;
    box-shadow: var(--drop-small);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    color: #fff;
    text-shadow: var(--outline-text-thin);
}

.avatar.opponent {
    background-color: var(--magenta);
    border-color: var(--ink);
}

.player-level {
    gap: 3px;
    padding: 4px 8px;
    min-width: 96px;
    background: var(--paper-shade);
    border: 2px solid var(--ink);
    border-radius: 0;
}

.level-text {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--ink);
}

.xp-bar {
    height: 12px;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 0;
}

.xp-fill {
    background: var(--go);
}

.xp-text {
    font-size: 9px;
    font-weight: 800;
    line-height: 8px;
    color: var(--ink);
    text-shadow: none;
}

.stats {
    flex: 1 1 auto;
    gap: 4px;
    max-width: none;
}

.stat-bar {
    height: 17px;
    max-width: none;
    margin: 0;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: none;
}

.stat-fill {
    border-radius: 0;
    box-shadow: none;
}

.stat-fill.moral-fill { background: var(--pow); }
.stat-fill.mana-fill  { background: var(--cyan); box-shadow: none; }
.stat-fill.fury-fill  { background: var(--orange); }

/* Ink on flat fills and on the white track - readable at any fill width */
.stat-text {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 800;
    line-height: 13px;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-shadow: none;
}

/* Banked mana above the max (refill = max + per-turn bonus) */
.stat-bar.mana-overflow {
    background: var(--cyan) var(--halftone);
    background-size: 4px 4px;
}

.player-path {
    padding: 3px 9px;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: 2px 2px 0 var(--ink);
    transform: rotate(3deg);
}

.path-name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--ink);
}

/* Turn caption + timer hang below the HUD between the fighters */
.center-info {
    top: 12px;
}

.turn-indicator {
    display: inline-block;
    padding: 4px 22px 2px;
    background: var(--zap);
    border: var(--line);
    border-radius: 0;
    box-shadow: var(--drop);
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--ink);
    transform: rotate(-2deg);
}

body.game-state-ai-turn .turn-indicator {
    background: var(--magenta);
    color: #fff;
    text-shadow: var(--outline-text-thin);
    transform: rotate(2deg);
}

.turn-timer {
    margin-top: 10px;
    padding: 6px 12px;
    min-width: 210px;
    background: var(--paper);
    border: var(--line);
    border-radius: 0;
    box-shadow: var(--drop-small);
}

.timer-display {
    margin-bottom: 4px;
}

.timer-text {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--ink);
}

.timer-text.warning,
.timer-text.pulse { color: var(--orange); }

.timer-text.critical,
.timer-text.shake { color: var(--pow); }

/* Online and practice show both clocks: the opponent's is dimmed (board.js) */
.turn-timer.is-opponent { opacity: 0.7; }

.timer-bank,
.game-time {
    font-size: 11px;
    font-weight: 600;
    color: #555;
}

.timer-bank.active { color: var(--orange); }

.game-time { margin-top: 3px; }

.timer-bar-container {
    height: 8px;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 0;
}

.timer-bar,
.timer-bar.warning,
.timer-bar.critical {
    border-radius: 0;
    box-shadow: none;
}

.timer-bar          { background: var(--cyan); }
.timer-bar.warning  { background: var(--orange); }
.timer-bar.critical { background: var(--pow); animation: none; }

/* Status effects: badges pinned under the fighter's avatar (wordbattle.css floats
   them fixed near the screen corner, away from the fighter they belong to) */
.status-effects,
.status-effects.opponent {
    position: absolute;
    top: auto;
    bottom: -14px;
    left: 8px;
    right: auto;
    z-index: 3;
    flex-direction: row;
    gap: 4px;
    max-height: none;
    overflow: visible;
}

.status-effects.opponent {
    left: auto;
    right: 8px;
}

.status-effect {
    gap: 2px;
    padding: 1px 5px;
    background: var(--zap);
    border: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: 2px 2px 0 var(--ink);
    font-weight: 800;
    color: var(--ink);
    transform: rotate(-3deg);
}

.status-effect .status-icon { font-size: 14px; }
.status-duration {
    margin-left: 0;
    font-size: 11px;
    color: var(--ink);
}

.status-effect.status-humiliated,
.status-effect.status-terrified,
.status-effect.status-silenced { background: var(--pow); color: #fff; }
.status-effect.status-humiliated .status-duration,
.status-effect.status-terrified .status-duration,
.status-effect.status-silenced .status-duration { color: #fff; }

/* Fighter states: 2x2 meters beside the bars. Bar fills toward the threshold
   that matters (Fear toward 50); red when close to it. */
.fighter-states {
    display: grid;
    grid-template-columns: repeat(2, 76px);
    gap: 4px;
    flex-shrink: 0;
}

.state-meter {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
    padding: 2px 5px 6px;
    background: #fff;
    border: 2px solid var(--ink);
    line-height: 1;
}

.state-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #444;
}

.state-value {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--ink);
}

.state-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--paper-shade);
}

.state-fill { display: block; height: 100%; }
.state-shame .state-fill   { background: var(--ch-shame); }
.state-fear .state-fill    { background: var(--ch-fear); }
.state-tension .state-fill { background: var(--orange); }
.state-trust .state-fill   { background: var(--cyan); }

.state-meter.is-danger {
    background: #fde3e3;
    border-color: var(--pow);
}

.state-meter.is-danger .state-value { color: var(--pow); }

/* ===========================
   SPELL PANEL (grammar zone)
   =========================== */
/* Page grid: the spell panel shares the side panels' top and bottom lines
   (zone-top to just above the hand) at every viewport height, and centers its
   content in that band instead of leaving dead space above the hand. */
.grammar-zone {
    top: var(--zone-top);
    bottom: calc(var(--hand-h) + 34px);
    margin: 0;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
    /* Fill the space between the side panels (one gutter each side), capped for ultrawide */
    width: min(1500px, calc(100cqw - 2 * (var(--side-w) + var(--gutter) * 2)));
    max-width: none;
    padding: 22px 24px 18px;
    background: var(--paper);
    border: var(--line-heavy);
    border-radius: 0;
    box-shadow: var(--drop-heavy);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* grammar-panel.css shows the zone with display:block !important per game state;
   same selectors, flex instead, so the content can center vertically */
body.game-state-player-turn .grammar-zone,
body.game-state-casting .grammar-zone {
    display: flex !important;
}

/* Opponent's turn: the panel shows their sentence being built (read-only) */
body.game-state-ai-building .grammar-zone {
    display: flex !important;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: none;
}

/* Their sentence: magenta speaker tag, magenta frame; your Say/Clear/budget row
   is not theirs to use (covers building and their cast) */
.spell-preview.is-opponent .preview-label {
    background: var(--magenta);
    color: #fff;
}

.grammar-zone:has(.spell-preview.is-opponent) {
    box-shadow: 0 0 0 4px var(--magenta), var(--drop-heavy);
}

.grammar-zone:has(.spell-preview.is-opponent) .cast-area {
    visibility: hidden;
}

.grammar-header {
    margin-bottom: 16px;
}

/* What you will say - the speech bubble */
.spell-preview {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 10px 26px;
    background: #fff;
    border: var(--line);
    border-radius: 34px;
    box-shadow: none;
    text-align: left;
}

/* Bubble tail, pointing down-left toward your hand */
.spell-preview::before,
.spell-preview::after {
    content: '';
    position: absolute;
    left: 56px;
    width: 0;
    height: 0;
    border-style: solid;
}

.spell-preview::before {
    bottom: -21px;
    border-width: 21px 22px 0 0;
    border-color: var(--ink) transparent transparent transparent;
}

.spell-preview::after {
    bottom: -14px;
    left: 59px;
    border-width: 15px 16px 0 0;
    border-color: #fff transparent transparent transparent;
}

.preview-label {
    flex-shrink: 0;
    padding: 2px 10px 0;
    background: var(--ink);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--zap);
    text-transform: uppercase;
    transform: rotate(-3deg);
}

.preview-text {
    min-width: 0;
    flex: 1;
    font-family: var(--font-display);
    font-size: 34px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1.05;
    color: var(--pow);
    text-shadow: 2px 2px 0 var(--ink);
    -webkit-user-select: text;
    user-select: text;
}

.preview-text.is-empty {
    font-family: var(--font-body);
    font-size: 16px;
    font-style: italic;
    font-weight: 600;
    color: #777;
    text-shadow: none;
}

/* Never wider than the panel: slots (overflow:hidden, so min-width 0) shrink to fit */
.grammar-slots {
    max-width: 100%;
    gap: 4px;
    padding: 10px 8px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.grammar-slots::before,
.grammar-slots::after {
    display: none;
}

.grammar-slot {
    background: #fff;
    border: 3px dashed rgba(0, 0, 0, 0.45);
    border-radius: 0;
    box-shadow: none;
}

.grammar-slot.empty {
    opacity: 1;
}

.grammar-slot.core-slot {
    background: #fff4c2;
    border: 3px dashed var(--ink);
    box-shadow: none;
}

.grammar-slot.filled {
    background: #fff;
    border: var(--line);
    box-shadow: var(--drop-small);
}

.grammar-slot.core-slot.filled {
    border: var(--line);
    box-shadow: var(--drop-small), 0 0 0 4px var(--zap);
}

.grammar-slot:hover:not(.filled) {
    background: var(--paper-shade);
    border-color: var(--ink);
}

.grammar-slot.can-accept {
    background: #d9f1fb;
    border: 3px solid var(--cyan);
    box-shadow: 0 0 0 3px var(--ink);
    animation: none;
}

.grammar-slot.drag-over {
    border: 3px solid var(--go);
    box-shadow: 0 0 0 3px var(--ink);
}

/* Old rule sets this border with !important; matched so the state reads correctly */
.grammar-slot.too-expensive {
    border: 3px solid var(--pow) !important;
    background: #fde3e3;
    opacity: 1;
}

.slot-label {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--ink);
    text-shadow: none;
}

.core-slot .slot-label {
    color: var(--ink);
    text-shadow: none;
}

.slot-hint {
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    color: #666;
}

/* A placed card - flat type color, white lettering outlined in ink */
/* wordbattle.css positions .slot-card absolutely at 80% scale; grammar-panel.css
   sizes it to fill the container. Reset to in-flow so text and cost stack cleanly. */
.slot-card {
    --type: #888;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: var(--type);
    border: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: none;
}

.slot-card.type-tone         { --type: #7b3fc4; }
.slot-card.type-opener       { --type: var(--cyan); }
.slot-card.type-intensifier  { --type: var(--magenta); }
.slot-card.type-epithet      { --type: #f2b705; }
.slot-card.type-target,
.slot-card.type-bloodline,
.slot-card.type-identity     { --type: var(--go); }
.slot-card.type-anatomy      { --type: var(--orange); }
.slot-card.type-action       { --type: var(--pow); }
.slot-card.type-amplifier    { --type: #2f5fd0; }
.slot-card.type-resolution   { --type: #0e9a8f; }
.slot-card.type-curse        { --type: #222; }
.slot-card.type-defensive    { --type: #5d7286; }

/* Same selectors as grammar-panel.css so its gradients are replaced */
.slot-card.type-tone, .slot-card.type-opener, .slot-card.type-intensifier,
.slot-card.type-epithet, .slot-card.type-target, .slot-card.type-bloodline,
.slot-card.type-identity, .slot-card.type-anatomy, .slot-card.type-action,
.slot-card.type-amplifier, .slot-card.type-resolution, .slot-card.type-curse,
.slot-card.type-defensive {
    background: var(--type);
    border: 2px solid var(--ink);
}

.slot-card:hover {
    transform: none;
    box-shadow: none;
}

/* Slots shrink with the panel; lettering scales with the slot (container query)
   and words only break at spaces - never "SATAR / IM" */
.grammar-slot {
    container-type: inline-size;
}

.slot-card-text {
    font-family: var(--font-display);
    font-size: clamp(11px, 17cqi, 21px);
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    overflow: hidden;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: #fff;
    text-shadow: var(--outline-text-thin), 2px 2px 0 var(--ink);
}

.slot-card-cost {
    position: static;
    transform: none;
    flex-shrink: 0;
    background: var(--ink);
    border: none;
    border-radius: 0;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
}

.slot-formula {
    background: var(--ink);
    border: none;
    border-radius: 0;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.05em;
}

/* Tones carry no damage/multiplier - don't draw an empty ink pill */
.grammar-slot.filled .slot-formula:empty {
    display: none;
}

.formula-damage     { color: #ff8a8d; text-shadow: none; }
.formula-multiplier { color: var(--zap); text-shadow: none; }
.formula-special    { color: var(--orange); text-shadow: none; }

.slot-connector {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--ink);
    opacity: 0.55;
}

.slot-connector.active {
    color: var(--pow);
    opacity: 1;
    text-shadow: none;
}

/* Damage you are about to deal */
.damage-formula {
    gap: 16px;
    margin-top: 6px;
    padding: 8px 20px;
    background: var(--paper-shade) var(--halftone);
    background-size: 6px 6px;
    border: var(--line);
    border-radius: 0;
}

.formula-equals {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 400;
    color: var(--ink);
}

.damage-breakdown {
    gap: 8px;
}

.damage-breakdown span {
    padding: 3px 10px 2px;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: 2px 2px 0 var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.damage-breakdown span:hover {
    transform: none;
    box-shadow: 2px 2px 0 var(--ink);
}

.damage-breakdown .damage-moral { background: var(--ch-moral); color: #fff; }
.damage-breakdown .damage-honor { background: var(--ch-honor); color: var(--ink); }
.damage-breakdown .damage-shame { background: var(--ch-shame); color: #fff; }
.damage-breakdown .damage-will  { background: var(--ch-will); color: #fff; }
.damage-breakdown .damage-fury  { background: var(--ch-fury); color: #fff; }
.damage-breakdown .damage-fear  { background: var(--ch-fear); color: #fff; }

.damage-breakdown .damage-none,
.damage-breakdown .damage-none:hover {
    background: none;
    border: none;
    box-shadow: none;
    font-style: italic;
    font-weight: 600;
    color: #666;
}

.damage-total {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--pow);
    text-shadow: 2px 2px 0 var(--ink);
    animation: none;
}

/* Cast row */
.cast-area {
    gap: 16px;
    margin-top: 14px;
    padding: 0;
    background: none;
    border: none;
}

.clear-button,
.clear-button:hover {
    padding: 8px 18px 6px;
    background: #fff;
    border: var(--line);
    border-radius: 0;
    box-shadow: var(--drop-small);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--ink);
    transform: none;
}

.clear-button:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink);
}

.cast-button {
    padding: 10px 34px 7px;
    background: var(--pow);
    border: var(--line);
    border-radius: 0;
    box-shadow: var(--drop);
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #fff;
    text-transform: uppercase;
    text-shadow: var(--outline-text);
    transform: rotate(-2deg);
}

.cast-button:hover:not(:disabled),
.cast-button:not(:disabled):hover {
    background: #ff3b40;
    box-shadow: var(--drop-heavy);
    transform: rotate(-2deg) translate(-2px, -2px);
}

.cast-button:active:not(:disabled) {
    transform: rotate(-2deg) translate(3px, 3px);
    box-shadow: 2px 2px 0 var(--ink);
}

.cast-button:disabled {
    background: #cfc8b4;
    color: #f4efe2;
    text-shadow: var(--outline-text-thin);
    box-shadow: var(--drop-small);
    opacity: 1;
}

/* Ready to cast - the one looping attention cue on the board */
.cast-button.is-ready {
    animation: castReady 1.4s ease-in-out infinite;
}

@keyframes castReady {
    0%, 100% { transform: rotate(-2deg) scale(1); }
    50%      { transform: rotate(-2deg) scale(1.06); }
}

/* Mana budget */
.mana-cost {
    gap: 6px;
    min-width: 260px;
    padding: 8px 14px;
    background: #fff;
    border: var(--line);
    border-radius: 0;
    box-shadow: var(--drop-small);
    backdrop-filter: none;
    color: var(--ink);
}

.mana-cost-bar {
    height: 18px;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 0;
}

.mana-cost-fill {
    background: var(--cyan);
    border-radius: 0;
}

.mana-cost-text {
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    text-shadow: var(--outline-text-thin);
}

.mana-cost .cost-label {
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: 0.05em;
    color: var(--ink);
}

.mana-cost .cost-value {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--ink);
}

.mana-cost .remaining-value {
    font-size: 14px;
    font-weight: 800;
    color: var(--go);
}

.mana-cost .shortage-value {
    font-size: 14px;
    font-weight: 800;
    color: var(--pow);
}

.mana-cost.insufficient {
    background: #fde3e3;
    border-color: var(--pow);
}

/* ===========================
   HAND - bottom strip
   =========================== */
/* Fixed + left:50% only offers half the viewport to shrink-to-fit sizing, so the
   hand used to scroll after ~4 cards. Size to content, capped to the viewport
   (clear of the music button), and scroll only when cards truly don't fit. */
.hand-area {
    bottom: 14px;
    width: max-content;
    max-width: calc(100cqw - 2 * (var(--gutter) + 64px));
    height: var(--hand-h);
    gap: 14px;
    align-items: flex-end;
    padding: 4px 14px 12px;
    background: var(--paper);
    border: var(--line-heavy);
    border-radius: 0;
    box-shadow: var(--drop-heavy);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.hand-controls {
    gap: 8px;
    padding: 0 0 12px;
    background: none;
    border: none;
    border-radius: 0;
}

.control-button {
    width: 70px;
    height: 70px;
    border: var(--line);
    border-radius: 0;
    box-shadow: var(--drop-small);
    color: var(--ink);
}

.control-button:hover:not(:disabled) {
    transform: translate(-1px, -1px) rotate(-2deg);
    box-shadow: var(--drop);
}

.control-button:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink);
}

.control-button:disabled {
    opacity: 1;
    background: #e3ddcc;
    color: #8c8574;
    box-shadow: none;
}

.draw-button      { background: var(--cyan); color: #fff; }
.pass-button      { background: #fff; }
.special-button   { background: var(--zap); }
.surrender-button { background: var(--pow); color: #fff; }

.button-icon {
    font-size: 20px;
}

.button-text {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.06em;
}

.draw-button .button-text,
.surrender-button .button-text {
    text-shadow: var(--outline-text-thin);
}

.button-cost,
.button-cooldown {
    font-size: 9px;
    font-weight: 800;
}

.button-cooldown.is-ready   { color: var(--ink); }
.button-cooldown.is-cooling { color: var(--pow); }

/* Horizontal scroll clips vertically too - top padding is headroom for the
   selected card's lift and tilt */
.cards-container {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    gap: 12px;
    padding: 20px 8px 10px;
    background: none;
    border: none;
    border-radius: 0;
}

.cards-container::-webkit-scrollbar-track,
.log-content::-webkit-scrollbar-track {
    background: var(--paper-shade);
    border-radius: 0;
}

.cards-container::-webkit-scrollbar-thumb,
.log-content::-webkit-scrollbar-thumb,
.cards-container::-webkit-scrollbar-thumb:hover,
.log-content::-webkit-scrollbar-thumb:hover {
    background: var(--ink);
    border-radius: 0;
}

/* ===========================
   CARDS - each one a mini comic panel
   =========================== */
.card {
    --type: #888;
    width: 104px;
    height: 146px;
    padding: 0;
    background: #fff;
    border: var(--line);
    border-radius: 0;
    box-shadow: var(--drop-small);
    transform: rotate(var(--hand-tilt, 0deg));
}

/* Hand-dealt look: cards lean a little, alternating */
.cards-container .card:nth-child(odd)  { --hand-tilt: -1.2deg; }
.cards-container .card:nth-child(even) { --hand-tilt: 1deg; }

.card:hover {
    transform: rotate(0deg) translateY(-8px);
    box-shadow: var(--drop);
}

.card.selected {
    border-color: var(--ink);
    box-shadow: 0 0 0 4px var(--zap), var(--drop);
    transform: rotate(-3deg) translateY(-14px);
}

.card.card-unaffordable {
    filter: grayscale(1) contrast(0.8);
    opacity: 0.5;
    border-color: var(--ink);
}

.card.card-unaffordable:hover {
    transform: rotate(var(--hand-tilt, 0deg));
    box-shadow: var(--drop-small);
    filter: grayscale(1) contrast(0.8);
}

.card.card-tone         { --type: #7b3fc4; }
.card.card-opener       { --type: var(--cyan); }
.card.card-intensifier  { --type: var(--magenta); }
.card.card-epithet      { --type: #f2b705; }
.card.card-target,
.card.card-bloodline,
.card.card-identity     { --type: var(--go); }
.card.card-anatomy      { --type: var(--orange); }
.card.card-action       { --type: var(--pow); }
.card.card-amplifier    { --type: #2f5fd0; }
.card.card-resolution   { --type: #0e9a8f; }
.card.card-curse        { --type: #222; }
.card.card-defensive    { --type: #5d7286; }
.card.card-compound     { --type: #777; }

.card-rarity {
    display: none;
}

.card-type-banner {
    padding: 3px 4px 1px;
    background: var(--type);
    border-bottom: var(--line);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #fff;
    text-shadow: var(--outline-text-thin);
}

/* Core types carry the sentence - their header is called out */
.card.card-action .card-type-banner,
.card.card-epithet .card-type-banner {
    background-image: var(--halftone);
    background-size: 5px 5px;
}

.card-damage-icon {
    top: 28px;
    right: 5px;
    font-size: 17px;
    opacity: 1;
}

.card-text {
    margin-top: 34px;
    padding: 4px 8px;
    min-height: 50px;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1;
    color: var(--ink);
}

.card-stats {
    bottom: 34px;
    gap: 4px;
}

.damage-stat {
    min-width: 22px;
    padding: 2px 5px 1px;
    border: 2px solid var(--ink);
    border-radius: 0;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    text-shadow: var(--outline-text-thin);
}

.damage-stat.damage-moral { background: var(--ch-moral); }
.damage-stat.damage-honor { background: var(--ch-honor); }
.damage-stat.damage-shame { background: var(--ch-shame); }
.damage-stat.damage-will  { background: var(--ch-will); }
.damage-stat.damage-fury  { background: var(--ch-fury); }
.damage-stat.damage-fear  { background: var(--ch-fear); }

.card-footer {
    bottom: 5px;
    padding: 0 6px;
    align-items: center;
}

/* Mana cost as a cyan coin */
.card-cost {
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--cyan);
    border: 2px solid var(--ink);
    border-radius: 50%;
    color: #fff;
}

.card-cost .mana-icon {
    display: none;
}

.card-cost .cost-value {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 400;
    text-shadow: var(--outline-text-thin);
}

.card-cost.too-expensive {
    background: #bbb;
    text-decoration: none;
    opacity: 1;
}

.card-alignment {
    font-size: 15px;
}

/* ===========================
   SIDE PANELS - battle log, crowd
   =========================== */
.battle-log,
.crowd-section {
    top: var(--zone-top);
    bottom: calc(var(--hand-h) + 34px);
    transform: none;
    width: var(--side-w);
    max-height: none;
    overflow: visible;
    background: var(--paper);
    border: var(--line);
    border-radius: 0;
    box-shadow: var(--drop);
}

.battle-log {
    left: var(--gutter);
}

.crowd-section {
    right: var(--gutter);
    display: flex;
    flex-direction: column;
    padding: 26px 14px 12px;
}

.log-header {
    border-bottom: var(--line);
}

.crowd-header {
    left: auto;
    right: 14px;
    margin: 0;
    background: var(--pow);
    color: #fff;
    text-shadow: var(--outline-text-thin);
    transform: rotate(2.5deg);
}

.log-content {
    margin-top: 18px;
    max-height: none;
    padding: 8px 10px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink);
}

.log-entry {
    margin-bottom: 6px;
    padding: 3px 8px;
    background: none;
    border-left: 4px solid #aaa;
    font-weight: 600;
}

.log-entry.damage { border-left-color: var(--pow); }
.log-entry.heal   { border-left-color: var(--go); }
.log-entry.effect { border-left-color: var(--magenta); }
.log-entry.action { border-left-color: var(--cyan); }
.log-entry.info   { border-left-color: #aaa; color: #555; font-weight: 500; }

/* Sayings: the heart of the log - speaker color + the line in lettering */
.log-entry.say-player,
.log-entry.say-opponent {
    font-weight: 800;
    border-left-width: 6px;
}

.log-entry.say-player   { border-left-color: var(--cyan); background: #e9f6fc; }
.log-entry.say-opponent { border-left-color: var(--magenta); background: #fdeaf4; }

.hype-meter {
    position: relative;
    height: 30px;
    margin-bottom: 14px;
    background: #fff;
    border: var(--line);
    border-radius: 0;
    flex-shrink: 0;
}

.hype-fill {
    background: var(--orange) var(--halftone);
    background-size: 5px 5px;
}

.hype-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.05em;
    color: var(--ink);
    text-shadow: 1px 1px 0 #fff;
}

.crowd-reactions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.reaction {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    font-size: 22px;
}

.reaction:hover {
    transform: rotate(-4deg) scale(1.08);
}

.reaction:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

.crowd-messages {
    flex: 1;
    min-height: 0;
    max-height: none;
}

.crowd-message {
    position: relative;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 14px;
    font-size: 12.5px;
    font-weight: 700;
}

.crowd-message:nth-child(even) {
    transform: rotate(1deg);
}

/* ===========================
   FEEDBACK - toasts, spell burst, damage
   =========================== */
.toast-stack {
    position: fixed;
    /* in the gap between the "You say" line and the grammar slots - never on the
       arena chip or the line */
    top: calc(var(--zone-top) + 112px);
    left: 50%;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transform: translateX(-50%);
    pointer-events: none;
}

.message-popup {
    --toast: var(--cyan);
    --toast-text: #fff;
    padding: 5px 16px 3px;
    background: var(--toast);
    border: var(--line);
    box-shadow: var(--drop-small);
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: 0.05em;
    color: var(--toast-text);
    text-shadow: var(--outline-text-thin);
    transform: rotate(-1.5deg);
    animation: toastIn 0.18s ease-out;
}

.message-popup:nth-child(even) {
    transform: rotate(1.5deg);
}

.message-error,
.message-damage { --toast: var(--pow); }
.message-success,
.message-heal   { --toast: var(--go); }
.message-status,
.message-effect { --toast: var(--magenta); }

@keyframes toastIn {
    from { opacity: 0; scale: 0.7; }
    to   { opacity: 1; scale: 1; }
}

/* Spell cast - the board's one big moment */
.spell-burst {
    position: absolute;
    top: 40%;
    left: 50%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(760px, 70vw);
    min-height: 300px;
    padding: 70px 120px;
    font-family: var(--font-display);
    font-size: 46px;
    letter-spacing: 0.03em;
    line-height: 1.05;
    text-align: center;
    color: var(--pow);
    text-shadow: var(--outline-text);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6) rotate(-4deg);
    animation: burstPop var(--burst-duration, 3000ms) ease-out var(--burst-delay, 0ms) forwards;
    pointer-events: none;
}

.spell-burst::before,
.spell-burst::after {
    content: '';
    position: absolute;
    z-index: -1;
    clip-path: polygon(50% 0%, 59% 22%, 79% 6%, 73% 30%, 98% 26%, 80% 45%, 100% 58%, 76% 63%, 88% 88%, 63% 74%, 52% 100%, 42% 76%, 18% 94%, 26% 68%, 0% 64%, 20% 49%, 3% 28%, 28% 31%, 22% 6%, 41% 23%);
}

.spell-burst::before {
    inset: 0;
    background: var(--ink);
}

.spell-burst::after {
    inset: 12px;
    background: var(--zap) var(--halftone);
    background-size: 7px 7px;
}

.spell-burst-opponent {
    color: #fff;
    transform: translate(-50%, -50%) scale(0.6) rotate(4deg);
    animation-name: burstPopOpponent;
}

.spell-burst-opponent::after {
    background-color: var(--magenta);
}

@keyframes burstPop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-4deg); }
    8%   { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(-4deg); }
    14%  { transform: translate(-50%, -50%) scale(1) rotate(-4deg); }
    85%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95) rotate(-4deg); }
}

@keyframes burstPopOpponent {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(4deg); }
    8%   { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(4deg); }
    14%  { transform: translate(-50%, -50%) scale(1) rotate(4deg); }
    85%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(4deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95) rotate(4deg); }
}

/* Damage numbers - comic sound-effect lettering */
.damage-number {
    position: absolute;
    z-index: 1100;
    font-family: var(--font-display);
    font-size: 64px;
    letter-spacing: 0.02em;
    color: var(--pow);
    text-shadow: var(--outline-text);
    pointer-events: none;
    animation: damagePop 1.8s ease-out forwards;
}

.damage-number.damage-moral,
.damage-number.damage-damage { color: var(--ch-moral); }
.damage-number.damage-honor  { color: var(--ch-honor); }
.damage-number.damage-shame  { color: var(--ch-shame); }
.damage-number.damage-will   { color: var(--ch-will); }
.damage-number.damage-heal   { color: var(--go); }
.damage-number.damage-fury   { color: var(--ch-fury); }
.damage-number.damage-fear   { color: var(--ch-fear); }

/* Channel icon in a white comic sticker beside the number */
.damage-number {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.damage-number-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.6em;
    height: 1.6em;
    font-size: 0.5em;
    line-height: 1;
    text-shadow: none;
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 50%;
    box-shadow: 3px 3px 0 var(--ink);
    transform: rotate(-10deg);
}

@keyframes damagePop {
    0%   { opacity: 0; transform: scale(0.4) rotate(-8deg); }
    15%  { opacity: 1; transform: scale(1.15) rotate(-8deg); }
    25%  { transform: scale(1) rotate(-8deg); }
    75%  { opacity: 1; transform: translateY(-30px) scale(1) rotate(-8deg); }
    100% { opacity: 0; transform: translateY(-60px) scale(0.9) rotate(-8deg); }
}

/* ===========================
   TONE - how the sentence is delivered (TONE_STYLES in cards.js)
   The tone card is not spoken; it restyles the speech bubble, the speaking verb,
   the cast burst and the voice filter. Five deliveries:
   shout / calm / mock / menace / unhinged.
   =========================== */

/* Shout: hard corners, a yellow shock ring, bigger lettering */
.spell-preview[data-tone="shout"] {
    border-radius: 10px;
    box-shadow: 0 0 0 4px var(--zap), 0 0 0 7px var(--ink);
    animation: toneShake 0.35s ease-out;
}

.spell-preview[data-tone="shout"] .preview-text:not(.is-empty) {
    font-size: 1.15em;
    letter-spacing: 0.05em;
}

/* Calm: soft round balloon, thin blue line, cool lettering */
.spell-preview[data-tone="calm"] {
    background: #eef7fd;
    border: 2px solid #3b6f98;
    border-radius: 60px;
}

.spell-preview[data-tone="calm"]::before { border-top-color: #3b6f98; }
.spell-preview[data-tone="calm"]::after  { border-top-color: #eef7fd; }

.spell-preview[data-tone="calm"] .preview-text:not(.is-empty) {
    color: #1d5f8a;
    text-shadow: none;
    letter-spacing: 0.08em;
}

.spell-preview[data-tone="calm"] .preview-label { background: #1d5f8a; color: #fff; }

/* Mock: lopsided dashed balloon, leaning magenta lettering */
.spell-preview[data-tone="mock"] {
    background: #fff0f8;
    border: 3px dashed var(--ink);
    border-radius: 40px 10px 40px 10px;
}

.spell-preview[data-tone="mock"]::after { border-top-color: #fff0f8; }

.spell-preview[data-tone="mock"] .preview-text:not(.is-empty) {
    color: var(--magenta);
    transform: skewX(-10deg);
}

.spell-preview[data-tone="mock"] .preview-label { background: var(--magenta); color: #fff; }

/* Menace: black balloon, red lettering - said low and close */
.spell-preview[data-tone="menace"] {
    background: var(--ink);
    border-radius: 18px;
}

.spell-preview[data-tone="menace"]::after { border-top-color: var(--ink); }

.spell-preview[data-tone="menace"] .preview-text:not(.is-empty) {
    color: #ff3b3b;
    text-shadow: 2px 2px 0 #5a0000;
}

.spell-preview[data-tone="menace"] .preview-text.is-empty { color: #999; }
.spell-preview[data-tone="menace"] .preview-label { background: var(--pow); color: #fff; }

/* Unhinged: candy-striped frame, rattling */
.spell-preview[data-tone="unhinged"] {
    border: 5px solid;
    border-image: repeating-linear-gradient(45deg, var(--pow) 0 10px, var(--zap) 10px 20px,
                  var(--cyan) 20px 30px, var(--magenta) 30px 40px) 5;
    animation: toneShake 0.3s ease-in-out 3;
}

.spell-preview[data-tone="unhinged"] .preview-text:not(.is-empty) {
    color: var(--magenta);
    text-shadow: 2px 2px 0 var(--cyan);
    transform: rotate(-1.5deg);
}

@keyframes toneShake {
    0%, 100% { translate: 0 0; }
    20%      { translate: -4px 1px; }
    40%      { translate: 3px -2px; }
    60%      { translate: -2px 2px; }
    80%      { translate: 2px -1px; }
}

/* Cast bursts per delivery (selectors outrank the per-speaker colors) */
.spell-burst[data-tone="calm"] {
    color: #1d5f8a;
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
}

.spell-burst[data-tone="calm"]::before,
.spell-burst[data-tone="calm"]::after {
    clip-path: ellipse(48% 44% at 50% 50%);
}

.spell-burst[data-tone="calm"]::after {
    background-color: #dff1fb;
}

.spell-burst[data-tone="mock"] {
    color: var(--magenta);
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 3px 4px 0 var(--ink);
}

.spell-burst[data-tone="mock"]::before,
.spell-burst[data-tone="mock"]::after {
    clip-path: polygon(50% 4%, 57% 8%, 64% 12%, 71% 12%, 79% 13%, 82% 20%, 86% 26%, 91% 31%, 98% 36%, 95% 43%, 94% 50%, 95% 57%, 98% 64%, 91% 69%, 86% 74%, 82% 80%, 79% 87%, 71% 88%, 64% 88%, 57% 92%, 50% 96%, 43% 92%, 36% 88%, 29% 88%, 21% 87%, 18% 80%, 14% 74%, 9% 69%, 2% 64%, 5% 57%, 6% 50%, 5% 43%, 2% 36%, 9% 31%, 14% 26%, 18% 20%, 21% 13%, 29% 12%, 36% 12%, 43% 8%);
}

.spell-burst[data-tone="mock"]::after {
    background-color: #ffd6ec;
}

.spell-burst[data-tone="menace"] {
    color: #ff3b3b;
    text-shadow: 2px 2px 0 #5a0000, 4px 5px 0 #000;
}

.spell-burst[data-tone="menace"]::before,
.spell-burst[data-tone="menace"]::after {
    clip-path: polygon(50% 0%, 57% 21%, 72% 5%, 69% 27%, 89% 19%, 77% 37%, 99% 39%, 80% 50%, 99% 61%, 77% 63%, 89% 81%, 69% 73%, 72% 95%, 57% 79%, 50% 100%, 43% 79%, 28% 95%, 31% 73%, 11% 81%, 23% 63%, 1% 61%, 20% 50%, 1% 39%, 23% 37%, 11% 19%, 31% 27%, 28% 5%, 43% 21%);
}

.spell-burst[data-tone="menace"]::before {
    background: var(--pow);
}

.spell-burst[data-tone="menace"]::after {
    background: var(--ink);
}

.spell-burst[data-tone="unhinged"] {
    color: #fff;
}

.spell-burst[data-tone="unhinged"]::after {
    background: conic-gradient(var(--pow) 0 25%, var(--zap) 0 50%, var(--cyan) 0 75%, var(--magenta) 0);
}

/* ===========================
   HAND LETTERING - running text reads like comic dialogue
   Patrick Hand for anything read as sentences; Bangers stays for shouted titles;
   Archivo only for tiny numeric labels where hand lettering loses legibility.
   =========================== */
.log-entry,
.crowd-message,
.dialog-content,
.notification-text,
.victory-stat-label,
.loading-text,
.preview-text.is-empty,
.damage-breakdown .damage-none,
.lobby-panel {
    font-family: var(--font-hand);
}

.log-entry {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.25;
}

.log-entry.say-player,
.log-entry.say-opponent {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.log-entry.info { font-weight: 400; }
.crowd-message { font-size: 15px; font-weight: 400; }
.dialog-content { font-size: 19px; font-weight: 400; }
.victory-stat-label { font-size: 17px; font-weight: 400; }
.preview-text.is-empty { font-size: 19px; font-style: normal; font-weight: 400; }
.damage-breakdown .damage-none { font-size: 16px; font-style: normal; font-weight: 400; }

/* ===========================
   VS SPLASH - match opening, before turn 1 (GameUI.playIntro)
   =========================== */
.vs-splash {
    position: absolute;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4%;
    background-color: var(--page);
    background-image: repeating-conic-gradient(from 0deg at 50% 50%, var(--page-dot) 0deg 7deg, var(--page) 7deg 14deg);
    transition: opacity 0.25s ease-out;
}

.vs-splash.vs-out { opacity: 0; }

.vs-fighter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 34px 18px;
    border: var(--line-heavy);
    box-shadow: var(--drop-heavy);
    animation: vsSlideLeft 0.35s ease-out both;
}

.vs-you { background: var(--cyan); transform: rotate(-3deg); }
.vs-opponent { background: var(--magenta); transform: rotate(3deg); animation-name: vsSlideRight; }

.vs-name {
    font-family: var(--font-display);
    font-size: 64px;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #fff;
    text-shadow: var(--outline-text);
}

.vs-level {
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: 0.05em;
    color: var(--ink);
    background: var(--zap);
    border: 2px solid var(--ink);
    padding: 2px 10px 0;
}

.vs-mark {
    font-family: var(--font-display);
    font-size: 140px;
    line-height: 1;
    color: var(--zap);
    text-shadow: var(--outline-text), 8px 9px 0 var(--ink);
    transform: rotate(-8deg);
    animation: vsPunch 0.4s 0.25s ease-out both;
}

@keyframes vsSlideLeft  { from { opacity: 0; translate: -120px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes vsSlideRight { from { opacity: 0; translate: 120px 0; }  to { opacity: 1; translate: 0 0; } }
@keyframes vsPunch      { from { opacity: 0; scale: 2.4; } to { opacity: 1; scale: 1; } }

@container stage (orientation: portrait) {
    .vs-splash { flex-direction: column; gap: 18px; }
    .vs-name { font-size: 44px; }
    .vs-mark { font-size: 96px; }
}

/* ===========================
   LOBBY - before any match (outside the scaled stage, so plain media queries)
   =========================== */
.lobby-screen {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    justify-content: center;
    padding: 64px 20px 28px;
    overflow-y: auto;
    background-color: var(--page);
    background-image: repeating-conic-gradient(from 0deg at 50% 50%, var(--page-dot) 0deg 7deg, var(--page) 7deg 14deg);
}

.lobby-screen[hidden] { display: none; }

.lobby-panel {
    position: relative;
    width: min(880px, 100%);
    /* auto margins, not align-items, so a panel taller than the window scrolls from its top */
    margin: auto;
    padding: 64px 32px 26px;
    background: var(--paper);
    border: var(--line-heavy);
    box-shadow: var(--drop-heavy);
    color: var(--ink);
    font-size: 19px;
}

.lobby-title {
    position: absolute;
    top: -46px;
    left: 50%;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(54px, 13vw, 92px);
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
    color: var(--zap);
    text-shadow: var(--outline-text), 6px 7px 0 var(--ink);
    transform: translateX(-50%) rotate(-4deg);
}

/* The tagline: one comic caption box under the title, in the interface language */
.lobby-tagline {
    margin: 0 0 22px;
    text-align: center;
    font-size: 30px;
    line-height: 1;
}
.tagline-tag {
    display: inline-block;
    padding: 7px 18px 3px;
    background: var(--zap);
    border: var(--line);
    box-shadow: 4px 4px 0 var(--ink);
    font-family: var(--font-display);
    font-size: 1em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink);
    text-shadow: none;
    transform: rotate(-2deg);
}

/* The interface language: EN / TR, top right of the lobby */
.lobby-lang { position: absolute; top: 14px; right: 16px; z-index: 3; }
.lang-switch {
    display: flex;
    background: #fff;
    border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
}
.lang-switch button {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px 2px;
    background: #fff;
    border: 0;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.05em;
    color: var(--ink);
    cursor: pointer;
}
.lang-switch button + button { border-left: 3px solid var(--ink); }
.lang-switch button[aria-pressed="true"] { background: var(--zap); }
.lang-switch button:hover:not([aria-pressed="true"]) { background: #fff6c8; }
.lang-switch button:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }
.lang-switch .flag { width: 24px; height: 16px; }

.lobby-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    margin-bottom: 18px;
    background: #fff;
    border: var(--line);
}

.lobby-section[hidden] { display: none; }

.lobby-label {
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: 0.05em;
}

.lobby-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lobby-input {
    flex: 1 1 200px;
    min-width: 0;
    padding: 8px 12px;
    border: var(--line);
    background: var(--paper);
    font-family: var(--font-hand);
    font-size: 22px;
    color: var(--ink);
    user-select: text;
    -webkit-user-select: text;
}

.lobby-input:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

.lobby-button {
    padding: 8px 18px 5px;
    background: #fff;
    border: var(--line);
    box-shadow: var(--drop-small);
    font-family: var(--font-display);
    font-size: 21px;
    letter-spacing: 0.05em;
    color: var(--ink);
    cursor: pointer;
}

.lobby-button:hover:not(:disabled) { transform: translate(-1px, -1px) rotate(-1deg); box-shadow: var(--drop); }
.lobby-button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.lobby-button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.lobby-button[hidden] { display: none; }

.lobby-primary {
    background: var(--pow);
    color: #fff;
    text-shadow: var(--outline-text-thin);
}

.lobby-find {
    font-size: 30px;
    padding: 10px 18px 6px;
    transform: rotate(-1.5deg);
}

.lobby-link {
    margin-left: 8px;
    padding: 0;
    background: none;
    border: none;
    font-family: var(--font-hand);
    font-size: 17px;
    color: var(--cyan);
    text-decoration: underline;
    cursor: pointer;
}

.lobby-greeting,
.lobby-presence,
.lobby-match-turn,
.lobby-note {
    margin: 0;
}

.lobby-presence { color: #555; }

.lobby-searching {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: var(--zap);
    border: var(--line);
}

.lobby-searching[hidden] { display: none; }
.lobby-error { min-height: 1.2em; margin: 0; color: var(--pow); }

.lobby-match-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.lobby-scores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.lobby-score {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    border: 2px solid var(--ink);
    background: var(--paper);
}

.lobby-score strong { font-family: var(--font-display); font-size: 22px; font-weight: 400; }

.lobby-feed {
    margin: 0;
    padding-left: 22px;
    max-height: 170px;
    overflow-y: auto;
    font-size: 17px;
}

.lobby-note { font-size: 16px; color: #555; }

.lobby-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.lobby-status { margin: 0; font-size: 17px; color: #555; }

/* Deck select: one comic-book tile per deck, colored by --deck-color (js/lobby-screen.js) */
.lobby-decks {
    min-width: 0;               /* fieldsets default to min-content width */
    margin: 0 0 18px;
}

.lobby-decks-title {
    float: left;                /* keeps the legend inside the section box */
    width: 100%;
    padding: 0;
}

.lobby-decks[disabled] .deck-tile { cursor: not-allowed; }
.lobby-decks[disabled] .deck-tile:not(.is-picked) { opacity: 0.4; filter: grayscale(0.7); }

.deck-grid {
    position: relative;         /* tiles' offsetLeft is measured from here (centering on phones) */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
    gap: 16px;
    padding: 6px 4px 8px;
}

.deck-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: var(--line);
    box-shadow: var(--drop-small);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

@media (hover: hover) {
    .lobby-decks:not([disabled]) .deck-tile:not(.is-picked):hover {
        transform: translate(-2px, -3px) rotate(-1deg);
        box-shadow: var(--drop);
    }
}

.deck-tile.is-picked {
    transform: translate(-3px, -4px) rotate(-1.5deg);
    box-shadow: 7px 7px 0 var(--deck-color), 7px 7px 0 3px var(--ink);
}

/* The real radio stays focusable for keyboards; the tile is what is seen */
.deck-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.deck-tile:has(.deck-radio:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 3px; }

.deck-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    background-color: var(--deck-color);
    background-image: var(--halftone);
    background-size: 7px 7px;
    border-bottom: var(--line);
}

.deck-art svg {
    width: 58px;
    height: 58px;
    fill: #fff;
    stroke: var(--ink);
    stroke-width: 3.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(3px 3px 0 var(--ink));
}

.deck-style {
    position: absolute;
    left: 8px;
    bottom: -13px;
    padding: 2px 8px 0;
    background: var(--zap);
    border: 2px solid var(--ink);
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.06em;
    transform: rotate(-3deg);
}

.deck-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 18px 12px 10px;
}

.deck-name {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1;
}

.deck-blurb {
    flex: 1;
    margin: 0;
    font-size: 16px;
    line-height: 1.15;
    color: #333;
}

.deck-stats {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 3px 10px;
    margin: 4px 0 0;
    font-size: 15px;
}

.deck-stats dt { margin: 0; }

.deck-meter {
    display: flex;
    gap: 3px;
    margin: 0;
}

.deck-meter .pip {
    flex: 1;
    height: 10px;
    max-width: 18px;
    border: 2px solid var(--ink);
    background: #fff;
    transform: skewX(-12deg);
}

.deck-meter .pip.on { background: var(--deck-color); }

.deck-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
    font-size: 14px;
}

.deck-count { margin-right: auto; color: #555; }

.deck-gem {
    padding: 0 6px;
    border: 2px solid var(--ink);
    line-height: 1.3;
    text-transform: capitalize;
}

.gem-rare { background: var(--cyan); color: #fff; text-shadow: var(--outline-text-thin); }
.gem-epic { background: var(--magenta); color: #fff; text-shadow: var(--outline-text-thin); }
.gem-legendary { background: var(--zap); }

.deck-stamp {
    position: absolute;
    top: 8px;
    right: -10px;
    padding: 3px 10px 0;
    background: var(--pow);
    border: 3px solid var(--ink);
    font-family: var(--font-display);
    font-size: 19px;
    letter-spacing: 0.06em;
    color: #fff;
    text-shadow: var(--outline-text-thin);
    transform: rotate(8deg) scale(0);
    transition: transform 0.15s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.deck-tile.is-picked .deck-stamp { transform: rotate(8deg) scale(1); }

.lobby-deck-lock { margin: 6px 0 0; }
.lobby-deck-lock[hidden] { display: none; }

/* Lobby layout: fighter card and live fights on the left, decks and the fight bar
   on the right (wide screens); one column below that */
.lobby-layout {
    display: grid;
    gap: 18px;
    margin-bottom: 18px;
}

.lobby-layout[hidden] { display: none; }
.lobby-layout .deck-grid { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.lobby-layout > .lobby-section,
.lobby-layout > .lobby-actions { margin: 0; }

@media (min-width: 960px) {
    .lobby-panel { width: min(1180px, 100%); }
    .lobby-layout {
        grid-template-columns: 300px minmax(0, 1fr);
        grid-template-areas:
            "card decks"
            "live decks"
            "live actions";
        grid-template-rows: auto 1fr auto;
        align-items: start;
    }
    .fighter-card { grid-area: card; }
    .live-panel { grid-area: live; }
    .lobby-decks { grid-area: decks; }
    .lobby-actions { grid-area: actions; }
}

/* Fighter card: a trading-card portrait with a level starburst */
.fighter-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px 16px;
    background: #fff;
    border: var(--line);
    box-shadow: var(--drop);
}

.fighter-card[hidden] { display: none; }

.fighter-banner {
    position: relative;
    height: 104px;
    margin: 0 -16px;
    border-bottom: var(--line);
    background:
        repeating-conic-gradient(from 0deg at 22% 100%, var(--zap) 0deg 9deg, #ffe46b 9deg 18deg);
}

.fighter-avatar {
    position: absolute;
    left: 16px;
    bottom: -38px;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background-color: var(--avatar-color, var(--pow));
    background-image: var(--halftone);
    background-size: 7px 7px;
    border: var(--line-heavy);
    box-shadow: var(--drop-small);
    font-family: var(--font-display);
    font-size: 42px;
    letter-spacing: 0.02em;
    color: #fff;
    text-shadow: var(--outline-text-thin), 2px 3px 0 var(--ink);
}

/* The level burst: star shape on a pseudo element, outlined by stacked drop shadows */
.fighter-level {
    position: absolute;
    top: 8px;
    right: 12px;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    color: #fff;
    transform: rotate(-8deg);
    filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink))
            drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink))
            drop-shadow(3px 4px 0 var(--ink));
}

.fighter-level::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--pow);
    clip-path: polygon(50% 0%, 61% 18%, 82% 8%, 80% 31%, 100% 38%, 85% 54%, 97% 74%, 74% 76%, 70% 98%, 52% 84%,
                       33% 100%, 27% 77%, 4% 78%, 15% 58%, 0% 41%, 20% 32%, 16% 9%, 38% 17%);
}

.fighter-level-word {
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.08em;
    line-height: 1;
}

.fighter-level strong {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 400;
    line-height: 0.9;
    text-shadow: var(--outline-text-thin);
}

.fighter-id {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    margin-top: 40px;
}

.fighter-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1;
    overflow-wrap: anywhere;
}

.fighter-id .lobby-link { margin-left: 0; font-size: 16px; }

.xp-meter {
    position: relative;
    height: 28px;
    overflow: hidden;
    background: var(--paper-shade);
    border: var(--line);
    transform: skewX(-8deg);
}

.xp-meter-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background-color: var(--zap);
    background-image: var(--halftone);
    background-size: 6px 6px;
    border-right: 3px solid var(--ink);
    transition: width 0.6s ease;
}

.xp-meter-text {
    position: relative;
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.04em;
    line-height: 28px;
    text-align: center;
    transform: skewX(8deg);
}

.fighter-record {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0;
}

.fighter-record > div {
    padding: 4px 0 2px;
    text-align: center;
    background: var(--paper);
    border: 2px solid var(--ink);
}

.fighter-record dt { font-size: 14px; color: #444; }

.fighter-record dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1;
}

.record-win dd { color: var(--go); }
.record-loss dd { color: var(--pow); }
.record-draw dd { color: var(--dusk); }

.fighter-next {
    margin: 0;
    padding: 6px 10px;
    font-size: 16px;
    line-height: 1.2;
    background: var(--paper);
    border: 2px dashed var(--ink);
}

.fighter-card .lobby-presence { font-size: 16px; }

/* Live fights: one strip per match, Watch on the right */
.live-title { display: flex; align-items: center; gap: 8px; margin: 0; }

.live-title::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pow);
    border: 2px solid var(--ink);
    animation: livePulse 1.4s ease-in-out infinite;
}

@keyframes livePulse {
    50% { transform: scale(0.7); opacity: 0.6; }
}

.live-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 380px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.live-match {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: var(--paper);
    border: 2px solid var(--ink);
}

.live-fighters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.live-fighter { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.live-right { align-items: flex-end; text-align: right; }

.live-name {
    max-width: 100%;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-level { font-size: 13px; color: #555; }

.live-moral {
    width: 100%;
    height: 8px;
    overflow: hidden;
    background: #fff;
    border: 2px solid var(--ink);
}

.live-moral-fill { display: block; height: 100%; background: var(--pow); }

.live-vs {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--zap);
    text-shadow: var(--outline-text-thin), 2px 2px 0 var(--ink);
    transform: rotate(-6deg);
}

.live-meta { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #555; }
.live-watch { margin-left: auto; padding: 4px 12px 2px; font-size: 17px; }
.live-empty { margin: 0; }
.live-empty[hidden] { display: none; }

/* The name form doubles as rename */
.lobby-name .lobby-button[hidden] { display: none; }

/* Battle screen while spectating: no hand, no controls, a bar that says so */
.spectator-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    height: 100%;
    padding: 12px 20px;
}

.spectator-bar[hidden] { display: none; }

.spectator-text {
    max-width: 60ch;
    margin: 0;
    font-family: var(--font-hand);
    font-size: 20px;
    line-height: 1.2;
}

body.is-spectating .hand-controls,
body.is-spectating .cards-container,
body.is-spectating .cast-area { display: none !important; }

.spectator-count {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 10px 0;
    background: var(--paper);
    border: 2px solid var(--ink);
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.04em;
    transform: rotate(1.5deg);
}

.spectator-count[hidden] { display: none; }

/* ===========================
   GAME SCREENS - collection, deck editor, packs (js/ui/game-screen.js)
   Full-screen comic panels over the lobby: a tilted title, a Back button
   =========================== */
body.has-game-screen { overflow: hidden; }

.game-screen {
    position: fixed;
    inset: 0;
    z-index: 3200;
    display: flex;
    padding: 16px;
    overflow: hidden;
    background-color: var(--page);
    background-image: repeating-conic-gradient(from 0deg at 50% 0%, var(--page-dot) 0deg 6deg, var(--page) 6deg 12deg);
    color: var(--ink);
    animation: screenIn 0.18s ease-out;
}

.game-screen[hidden] { display: none; }

@keyframes screenIn {
    from { opacity: 0; transform: scale(0.98); }
}

.game-screen-frame {
    display: flex;
    flex-direction: column;
    width: min(1280px, 100%);
    margin: 0 auto;
    min-height: 0;
    background: var(--paper);
    border: var(--line-heavy);
    box-shadow: var(--drop-heavy);
}

.game-screen-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 12px 16px;
    border-bottom: var(--line);
    background: #fff;
}

.game-screen-back { font-size: 18px; padding: 6px 14px 3px; }

.game-screen-title {
    margin: 0;
    padding: 2px 16px 0;
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.1;
    color: #fff;
    background: var(--screen-tone, var(--zap));
    border: var(--line);
    box-shadow: var(--drop-small);
    text-shadow: var(--outline-text-thin), 2px 3px 0 var(--ink);
    transform: rotate(-2deg);
}

.game-screen[data-tone="cyan"] { --screen-tone: var(--cyan); }
.game-screen[data-tone="pow"] { --screen-tone: var(--pow); }
.game-screen[data-tone="magenta"] { --screen-tone: var(--magenta); }

.game-screen-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

.game-screen-body {
    flex: 1;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
}

.screen-hint { margin: 0 0 14px; font-size: 16px; color: #444; max-width: 80ch; }
.screen-empty { margin: 20px 0; font-size: 18px; color: #555; }

/* Filter chips */
.screen-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; }
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
    padding: 4px 12px 2px;
    background: #fff;
    border: 2px solid var(--ink);
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--ink);
    cursor: pointer;
}

.chip[aria-checked="true"] {
    background: var(--ink);
    color: var(--zap);
    transform: rotate(-2deg);
}

.screen-select {
    padding: 5px 10px;
    background: #fff;
    border: 2px solid var(--ink);
    font-family: var(--font-hand);
    font-size: 17px;
    color: var(--ink);
}

/* Rarity gem on a card face: tucked under the type banner, left */
.card .card-gem {
    position: absolute;
    top: 27px;
    left: 4px;
    display: none;
}

.collection-grid .card .card-gem,
.editor-pool-grid .card .card-gem {
    display: block;
    padding: 0 4px;
    border: 2px solid var(--ink);
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.4;
    background: #fff;
}

.card .card-gem.gem-uncommon { background: var(--go); color: #fff; }
.card .card-gem.gem-rare { background: var(--cyan); color: #fff; }
.card .card-gem.gem-epic { background: var(--magenta); color: #fff; }
.card .card-gem.gem-legendary { background: var(--zap); color: var(--ink); }

/* Collection: a card wall with learning badges */
.collection-summary {
    display: grid;
    grid-template-columns: auto minmax(160px, 1fr);
    align-items: center;
    gap: 10px 20px;
    margin-bottom: 14px;
}

.collection-total { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.04em; }
.collection-total strong { font-size: 44px; font-weight: 400; color: var(--cyan); text-shadow: var(--outline-text-thin), 2px 3px 0 var(--ink); }

.collection-rarities { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

.rarity-count {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 2px 10px 0;
    border: 2px solid var(--ink);
    background: #fff;
}

.rarity-count dt { font-size: 14px; }
.rarity-count dd { margin: 0; font-family: var(--font-display); font-size: 20px; }
.rarity-count.gem-uncommon { background: #d9f5e3; }
.rarity-count.gem-rare { background: #d6effa; }
.rarity-count.gem-epic { background: #fbd9ec; }
.rarity-count.gem-legendary { background: #fff2b3; }

.collection-grid,
.editor-pool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 22px 14px;
    justify-items: center;
    padding: 6px 4px 20px;
}

.collection-grid .card,
.editor-pool-grid .card { position: relative; flex: none; }

/* A card with its collection badge under it (CardFace.tile) */
.card-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }

.card.is-locked > :not(.card-learn) { filter: grayscale(0.85); opacity: 0.6; }
.card.is-unseen > :not(.card-learn) { filter: grayscale(1) brightness(0.25); opacity: 0.9; }
.card.is-unseen .card-text { color: transparent; text-shadow: none; }
.card.is-unseen::after {
    content: '?';
    position: absolute;
    inset: 30px 0 auto;
    font-family: var(--font-display);
    font-size: 54px;
    text-align: center;
    color: var(--paper);
    text-shadow: var(--outline-text);
}

.card-learn {
    position: relative;
    z-index: 2;
    width: 112px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 4px 1px;
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    transform: rotate(-2deg);
}

.card-learn.is-unlocked {
    background: var(--go);
    color: #fff;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-shadow: var(--outline-text-thin);
}

.card-learn-bar {
    display: block;
    height: 6px;
    overflow: hidden;
    background: var(--paper-shade);
    border: 1.5px solid var(--ink);
}

.card-learn-fill { display: block; height: 100%; background: var(--zap); }

/* Deck editor: your cards | the deck */
.deck-slots { display: flex; flex-wrap: wrap; gap: 6px; }

.deck-slot {
    max-width: 150px;
    padding: 5px 12px 2px;
    overflow: hidden;
    background: #fff;
    border: 2px solid var(--ink);
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.deck-slot[aria-selected="true"] { background: var(--zap); box-shadow: var(--drop-small); transform: rotate(-2deg); }
.deck-slot.is-empty { font-style: italic; color: #666; }
.deck-slot:disabled { opacity: 0.5; cursor: not-allowed; background: var(--paper-shade); }

.editor-pane-tabs { display: none; gap: 6px; margin-bottom: 10px; }

.editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
    gap: 18px;
    min-height: 0;
}

.editor-pool,
.editor-deck {
    min-width: 0;
    padding: 12px;
    background: #fff;
    border: var(--line);
}

.editor-deck { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 10px; }

.editor-heading {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.05em;
}

.editor-pool-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.editor-pool-head .editor-heading { margin: 0; }
.editor-search { flex: 1 1 160px; font-size: 18px; padding: 5px 10px; }
.editor-types { margin: 10px 0; }
.editor-types .chip { font-size: 13px; padding: 3px 8px 1px; }

.editor-card {
    position: relative;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.editor-card:hover .card { transform: translateY(-5px) rotate(-1deg); box-shadow: var(--drop); }
.editor-card.is-maxed .card { filter: grayscale(0.8); opacity: 0.5; }

.editor-copies {
    position: absolute;
    top: -10px;
    right: -8px;
    z-index: 2;
    padding: 1px 7px 0;
    background: var(--ink);
    color: var(--zap);
    font-family: var(--font-display);
    font-size: 15px;
    transform: rotate(6deg);
}

.editor-name { font-size: 22px; width: 100%; }

.editor-meters { display: grid; grid-template-columns: auto auto 1fr; align-items: end; gap: 12px; }

.editor-counter,
.editor-verbs { font-size: 15px; white-space: nowrap; }
.editor-counter strong,
.editor-verbs strong { font-family: var(--font-display); font-size: 34px; font-weight: 400; line-height: 1; }
.editor-counter.is-full strong { color: var(--go); }
.editor-verbs.is-short strong { color: var(--pow); }

.editor-curve { display: flex; align-items: flex-end; gap: 3px; height: 54px; }

.curve-bar {
    position: relative;
    flex: 1;
    height: 100%;
    background: linear-gradient(to top, var(--cyan) var(--h, 0%), transparent var(--h, 0%));
    border-bottom: 3px solid var(--ink);
}

.curve-label { position: absolute; bottom: -18px; left: 0; right: 0; font-size: 11px; text-align: center; }

.editor-list { max-height: 44vh; margin-top: 8px; overflow-y: auto; }
.editor-group { margin-bottom: 8px; }
.editor-group-title { margin: 0 0 3px; font-family: var(--font-display); font-size: 16px; font-weight: 400; letter-spacing: 0.05em; color: #444; }

.editor-row {
    display: grid;
    grid-template-columns: 30px 1fr auto 28px 28px;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    border-left: 5px solid #bbb;
    font-size: 16px;
}

.editor-row:nth-child(even) { background: var(--paper); }
.gem-row-uncommon { border-left-color: var(--go); }
.gem-row-rare { border-left-color: var(--cyan); }
.gem-row-epic { border-left-color: var(--magenta); }
.gem-row-legendary { border-left-color: var(--zap); }
.editor-row-count { font-family: var(--font-display); font-size: 17px; }
.editor-row-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.editor-row-cost { font-family: var(--font-display); color: var(--cyan); }

.editor-row-btn {
    width: 28px;
    height: 26px;
    padding: 0;
    background: #fff;
    border: 2px solid var(--ink);
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.editor-row-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.editor-errors { margin: 0; padding-left: 18px; font-size: 15px; color: var(--pow); }
.editor-errors:empty { display: none; }
.editor-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.editor-actions .lobby-button { font-size: 16px; padding: 6px 12px 3px; }
.editor-save { margin-left: auto; font-size: 22px !important; }
.editor-status { min-height: 1.2em; margin: 0; font-size: 16px; }
.editor-status.is-flash { animation: statusFlash 0.6s ease; }

@keyframes statusFlash {
    30% { color: var(--pow); transform: translateX(-3px); }
    60% { transform: translateX(3px); }
}

/* Packs: a spotlit pack that tears open, cards dealt face down (rarest last, rare
   backs glowing) and flipped one by one (js/screens/packs.js) */
/* The game's own backdrop - the blue sunburst behind the lobby and the board -
   with its rays centred on the pack */
.pack-screen .game-screen-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--page);
    background-image: repeating-conic-gradient(from 0deg at 50% 40%, var(--page-dot) 0deg 7deg, var(--page) 7deg 14deg);
    color: var(--paper);
}

.pack-stage {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    width: 100%;
    min-height: 380px;
    padding: 20px 0;
}

/* The sealed pack: foil, a flap that tears off */
.pack-sealed {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 250px;
    height: 350px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transform: rotate(-3deg);
    animation: packFloat 2.6s ease-in-out infinite;
    filter: drop-shadow(8px 9px 0 var(--ink));
}

.pack-sealed.is-big { width: 280px; height: 390px; }

.pack-flap,
.pack-body {
    display: block;
    border: var(--line-heavy);
    background-color: var(--magenta);
    background-image:
        linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.45) 32%, transparent 44%),
        var(--halftone);
    background-size: 220% 100%, 7px 7px;
    animation: packShine 3.2s linear infinite;
}

.pack-sealed.is-big .pack-flap,
.pack-sealed.is-big .pack-body { background-color: #d4a500; }

.pack-flap {
    height: 46px;
    border-bottom: 3px dashed var(--ink);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 96% 86%, 92% 100%, 88% 86%, 84% 100%, 80% 86%, 76% 100%, 72% 86%, 68% 100%, 64% 86%, 60% 100%, 56% 86%, 52% 100%, 48% 86%, 44% 100%, 40% 86%, 36% 100%, 32% 86%, 28% 100%, 24% 86%, 20% 100%, 16% 86%, 12% 100%, 8% 86%, 4% 100%, 0 86%);
}

.pack-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: -3px;
    color: #fff;
}

.pack-sealed:hover { animation-duration: 0.9s; }
.pack-sealed.is-tearing { animation: none; }
.pack-sealed.is-tearing .pack-flap { animation: flapOff 0.45s ease-in forwards; }
.pack-sealed.is-tearing .pack-body { animation: bodyDrop 0.45s 0.15s ease-in forwards; }

@keyframes packFloat { 50% { transform: rotate(3deg) translateY(-8px) scale(1.02); } }
@keyframes packShine { from { background-position: 120% 0, 0 0; } to { background-position: -120% 0, 0 0; } }
@keyframes flapOff { to { transform: translate(60px, -120px) rotate(28deg); opacity: 0; } }
@keyframes bodyDrop { to { transform: translateY(40px) scale(0.9); opacity: 0; } }

.pack-brand { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.14em; text-shadow: var(--outline-text-thin); }
.pack-level { font-family: var(--font-display); font-size: 52px; font-weight: 400; color: var(--zap); text-shadow: var(--outline-text), 3px 4px 0 var(--ink); }
.pack-count { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.04em; text-shadow: var(--outline-text-thin); }
.pack-tap {
    margin-top: 18px;
    padding: 3px 12px 1px;
    background: #fff;
    border: 2px solid var(--ink);
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--ink);
    animation: tapPulse 1.1s ease-in-out infinite;
}

@keyframes tapPulse { 50% { transform: scale(1.08) rotate(-2deg); } }

.pack-empty { max-width: 420px; text-align: center; }
.pack-empty-title { display: block; margin-bottom: 8px; font-family: var(--font-display); font-size: 34px; letter-spacing: 0.04em; color: var(--zap); text-shadow: var(--outline-text); }
.pack-empty p { margin: 0; font-size: 18px; color: var(--paper); text-shadow: var(--outline-text-thin); }
.pack-more {
    margin: 0;
    padding: 2px 12px 0;
    background: var(--zap);
    border: 2px solid var(--ink);
    box-shadow: var(--drop-small);
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: 0.04em;
    color: var(--ink);
    transform: rotate(-1.5deg);
}

/* The deal: cards land face down, then turn over when tapped */
/* Up to 8 cards in one row on a desktop; when they wrap, rows leave room for an
   enlarged unlocked card and its meter */
/* The dealt cards: packs.js fit() sizes them to the stage (--card-w, --per-row,
   --gap) - the reveal never scrolls */
.pack-reveal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: flex-start;
    gap: 52px var(--gap, 28px);
    width: 100%;
    max-width: calc(var(--per-row, 5) * (var(--card-w, 200px) + var(--gap, 28px)));
    padding-top: 30px;
}

/* A dealt card: the card (back, then its face) and its sighting meter under it */
.pack-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: var(--card-w, 200px);
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    animation: dealIn 0.42s cubic-bezier(0.2, 1.4, 0.4, 1) both;
    animation-delay: var(--deal-delay, 0ms);
}

@keyframes dealIn {
    from { transform: translateY(-40vh) rotate(-14deg) scale(0.6); opacity: 0; }
}

.pack-card-slot {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 5 / 7;
    transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.pack-card:not(.is-flipped):hover .pack-card-slot { transform: translateY(-10px) rotate(-2deg); }
.pack-card:focus-visible { outline: none; }
.pack-card:focus-visible .pack-card-slot { outline: 4px solid var(--zap); outline-offset: 6px; }

/* The turn: the back swings edge-on, the face swings in from the other edge */
.pack-card-back,
.pack-card-front {
    position: absolute;
    inset: 0;
}

.pack-card-back {
    display: grid;
    place-items: center;
    container-type: inline-size;
    background-color: var(--magenta);
    background-image:
        repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.14) 0deg 9deg, transparent 9deg 18deg),
        var(--halftone);
    background-size: auto, 7px 7px;
    border: var(--line-heavy);
    box-shadow: 7px 7px 0 var(--ink);
}

.pack-card-front { visibility: hidden; }
.pack-card.is-flipped .pack-card-back { animation: turnOut 0.17s ease-in forwards; }
.pack-card.is-flipped .pack-card-front { visibility: visible; animation: turnIn 0.3s 0.17s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
/* waiting for its word (a moment at most): the back trembles */
.pack-card.is-turning .pack-card-back { animation: backWait 0.4s ease-in-out infinite; }

@keyframes turnOut { to { transform: perspective(900px) rotateY(90deg) scale(1.06); } }
@keyframes turnIn { from { transform: perspective(900px) rotateY(-90deg) scale(1.06); } }
@keyframes backWait { 50% { transform: rotate(1.5deg) scale(1.02); } }

.pack-card-mark {
    font-family: var(--font-display);
    font-size: 34cqi;
    letter-spacing: 0.04em;
    color: var(--zap);
    text-shadow: var(--outline-text), 4px 5px 0 var(--ink);
    transform: rotate(-8deg);
}

/* Rare or better: the back glows before it is turned */
.pull-rare .pack-card-back { box-shadow: 0 0 0 4px var(--cyan), 0 0 26px 6px var(--cyan); }
.pull-epic .pack-card-back { box-shadow: 0 0 0 4px var(--magenta), 0 0 30px 8px var(--magenta); animation: backPulse 1s ease-in-out infinite; }
.pull-legendary .pack-card-back { box-shadow: 0 0 0 5px var(--zap), 0 0 40px 12px var(--zap); animation: backPulse 0.8s ease-in-out infinite; }

@keyframes backPulse { 50% { filter: brightness(1.35); } }

.pack-card-glint {
    position: absolute;
    bottom: 7cqi;
    padding: 1px 10px 0;
    background: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(14px, 8cqi, 22px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--zap);
}

/* The face: the full-art card, ringed in its rarity's colour from rare up */
.pack-card-front .art-card { width: 100%; }
.pull-rare .pack-card-front .ac-body { box-shadow: 0 0 0 4px var(--cyan), 7px 7px 0 var(--ink); }
.pull-epic .pack-card-front .ac-body { box-shadow: 0 0 0 4px var(--magenta), 0 0 28px 6px var(--magenta), 7px 7px 0 var(--ink); }
.pull-legendary .pack-card-front .ac-body { box-shadow: 0 0 0 5px var(--zap), 0 0 40px 12px var(--zap), 7px 7px 0 var(--ink); }

/* Rare or better: the card turns in a white burst */
.pack-card.is-flipped:is(.pull-rare, .pull-epic, .pull-legendary) .pack-card-slot::after {
    content: '';
    position: absolute;
    inset: -30%;
    z-index: 7;
    pointer-events: none;
    background: radial-gradient(circle, #fff 0 18%, rgba(255, 255, 255, 0.7) 30%, transparent 62%);
    animation: rareBurst 0.7s 0.2s ease-out both;
}

@keyframes rareBurst {
    from { opacity: 1; transform: scale(0.3); }
    to { opacity: 0; transform: scale(1.4); }
}

.pack-gain {
    position: absolute;
    top: -34px;
    left: 50%;
    z-index: 8;
    padding: 2px 10px 0;
    background: var(--zap);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    font-family: var(--font-display);
    font-size: clamp(15px, 1.4vw, 20px);
    color: var(--ink);
    white-space: nowrap;
    transform: translateX(-50%) rotate(-3deg);
}

.pack-gain.is-finisher { background: var(--go); color: #fff; text-shadow: var(--outline-text-thin); }

/* The meter shows once the card is turned: its sightings rise from before to after */
.pack-meter {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: min(100%, 240px);
    padding: 4px 8px 3px;
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    color: var(--ink);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s 0.35s, transform 0.25s 0.35s;
}

.pack-card.is-flipped .pack-meter { opacity: 1; transform: none; }
.pack-meter .card-learn-bar { height: 9px; }
.pack-meter .card-learn-fill { transition: width 0.9s cubic-bezier(0.2, 0.8, 0.3, 1); }
.pack-meter-text { font-family: var(--font-display); font-size: clamp(15px, 1.3vw, 19px); letter-spacing: 0.04em; text-align: center; }
.pack-card.is-unlock .pack-meter { background: var(--go); color: #fff; text-shadow: var(--outline-text-thin); }
.pack-card.is-unlock .pack-meter .card-learn-fill { background: #fff; }

/* Unlocked: the card steps forward in a burst of rays, stamped */
.pack-card.is-unlock { z-index: 3; }
.pack-card.is-unlock .pack-card-slot { transform: scale(1.06); }

.pack-stamp {
    position: absolute;
    top: 49%;
    left: 50%;
    z-index: 8;
    padding: 4px 14px 0;
    background: var(--pow);
    border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 30px);
    color: #fff;
    text-shadow: var(--outline-text-thin);
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-12deg) scale(2.4);
}

/* no art: the word is the middle of the card - the stamp goes under it */
.pack-card-front:has(.art-card.is-bare) .pack-stamp { top: 64%; }
.pack-card.is-unlock .pack-stamp { animation: stampIn 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) forwards; }

@keyframes stampIn {
    to { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
}

/* The spotlight: a turned card is lifted to the middle of the window (packs.js sets
   the move), the rest of the stage dims behind it, then it goes back to its place */
.pack-spotlight {
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.82) 70%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.pack-spotlight.is-on { opacity: 1; }
.pack-card.is-zooming { z-index: 40; }
/* turning or in the spotlight: not clickable until it is back in its place */
.pack-card.is-flipped:not(.is-settled) { cursor: default; }
.pack-card.is-zooming .pack-card-slot { transition: transform 0.42s cubic-bezier(0.25, 1.15, 0.4, 1); }
.pack-card.is-zooming .pack-gain { opacity: 0; }

.pack-card.is-unlock .pack-card-slot::before {
    content: '';
    position: absolute;
    inset: -18%;
    z-index: -1;
    background: repeating-conic-gradient(from 0deg, var(--zap) 0deg 10deg, transparent 10deg 20deg);
    border-radius: 50%;
    mask: radial-gradient(circle, #000 30%, transparent 70%);
    -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%);
    animation: burstSpin 4s linear infinite, burstIn 0.4s ease-out;
}

@keyframes burstSpin { to { transform: rotate(360deg); } }
@keyframes burstIn { from { transform: scale(0.2); opacity: 0; } }

.pack-hint {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.05em;
    color: var(--zap);
    text-shadow: var(--outline-text-thin), 2px 3px 0 var(--ink);
    animation: tapPulse 1.2s ease-in-out infinite;
}

.pack-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; padding: 6px 0 14px; }

.pack-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 12px;
    flex-basis: 100%;
}

.pack-summary-stat {
    padding: 4px 14px 2px;
    background: var(--paper);
    border: var(--line);
    box-shadow: var(--drop-small);
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: 0.04em;
    color: var(--ink);
    transform: rotate(-1.5deg);
}

.pack-summary-stat.is-hot { background: var(--go); color: #fff; text-shadow: var(--outline-text-thin); transform: rotate(1.5deg); }
.pack-summary-text { flex-basis: 100%; margin: 4px 0 0; text-align: center; font-size: 18px; color: var(--paper); text-shadow: var(--outline-text-thin); }

.pack-note {
    max-width: 640px;
    margin: 0 auto 10px;
    text-align: center;
    font-size: 16px;
    color: var(--paper);
    text-shadow: var(--outline-text-thin);
}

.pack-note[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .pack-sealed, .pack-flap, .pack-body, .pack-card, .pack-card-back, .pack-card-front, .pack-tap, .pack-hint, .pack-card-slot::before, .pack-card-slot::after { animation: none !important; }
    .pack-card-slot, .pack-meter, .pack-meter .card-learn-fill { transition: none; }
}

/* Fighter card: the doors to the collection, decks and packs */
.fighter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.fighter-action {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 10px 3px;
    font-size: 17px;
}

.fighter-action strong { font-weight: 400; color: var(--cyan); }
.fighter-action[hidden] { display: none; }

.fighter-packs {
    grid-column: 1 / -1;
    justify-content: center;
    animation: packCall 1.2s ease-in-out infinite;
}

.fighter-packs strong {
    min-width: 26px;
    padding: 0 6px;
    background: var(--zap);
    border: 2px solid var(--ink);
    color: var(--ink);
    text-shadow: none;
}

@keyframes packCall {
    50% { transform: rotate(-1.5deg) scale(1.03); }
}

/* Deck tiles: the fighter's own decks and the new-deck tile */
.deck-art-custom { background-color: var(--zap); }
.deck-monogram { font-family: var(--font-display); font-size: 46px; color: #fff; text-shadow: var(--outline-text), 3px 3px 0 var(--ink); }
.deck-edit { margin-left: auto; font-size: 16px; }

.deck-tile-new {
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 200px;
    padding: 16px;
    background: transparent;
    border: 3px dashed var(--ink);
    box-shadow: none;
    font-family: var(--font-hand);
    color: var(--ink);
    text-align: center;
}

.deck-tile-new:hover { background: #fff; }
.deck-new-plus { font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--pow); text-shadow: var(--outline-text-thin); }

/* Battle log tabs and the Cards record */
.log-tabs { display: flex; padding: 0; overflow: hidden; }

.log-tab {
    padding: 3px 10px 1px;
    background: var(--paper);
    border: none;
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: 0.04em;
    color: var(--ink);
    cursor: pointer;
}

.log-tab + .log-tab { border-left: 3px solid var(--ink); }
.log-tab[aria-selected="true"] { background: var(--zap); }

.cast-record {
    margin-top: 18px;
    padding: 6px 8px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.cast-record[hidden], .log-content[hidden] { display: none; }

.record-fighter + .record-fighter { margin-top: 10px; }

.record-title {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.05em;
}

.record-right .record-title { color: var(--magenta); }
.record-left .record-title { color: var(--cyan); }
.record-empty { margin: 0; font-size: 12px; color: #666; }

.record-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    border-left: 4px solid #bbb;
    font-size: 12px;
    font-weight: 700;
}

.record-row:nth-child(odd) { background: var(--paper); }
.record-times { font-family: var(--font-display); font-weight: 400; font-size: 14px; }
.record-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.record-learn { display: flex; align-items: center; gap: 3px; font-size: 11px; white-space: nowrap; }
.record-learn .card-learn-bar { width: 34px; }
.record-row.is-owned .record-learn { color: var(--go); }

@media (prefers-reduced-motion: reduce) {
    .game-screen, .pack-sealed, .fighter-packs, .pack-card-back, .pack-card-front, .pack-stamp { animation: none !important; }
}

/* ===========================
   ARENAS (core/arenas.js) - the place colors the stage; a chip names it
   =========================== */
.game-container[data-arena]:not([data-arena=""]) {
    background-color: var(--arena-ground);
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.10) 1.2px, transparent 1.6px),
        linear-gradient(to bottom, var(--arena-sky) 0%, var(--arena-ground) 78%);
    background-size: 9px 9px, 100% 100%;
}

.arena-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 3px 10px 1px;
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--arena-accent, var(--ink));
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--ink);
    cursor: pointer;
    transform: rotate(-1.5deg);
}

.arena-chip[hidden] { display: none; }
.arena-chip strong { font-weight: 400; }

.arena-style {
    padding: 0 6px;
    border: 2px solid var(--ink);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.arena-style-polite { background: var(--cyan); color: #fff; }
.arena-style-street { background: var(--pow); color: #fff; }

.vs-arena {
    position: absolute;
    top: 9%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 24px 6px;
    background: var(--paper);
    border: var(--line-heavy);
    box-shadow: var(--drop);
    transform: translateX(-50%) rotate(-2deg);
    white-space: nowrap;
}

.vs-arena strong {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--zap);
    text-shadow: var(--outline-text), 3px 4px 0 var(--ink);
}

.vs-arena span { font-family: var(--font-hand); font-size: 18px; color: var(--ink); }
.vs-arena-street { border-color: var(--ink); background: #fff3f0; }
.vs-arena-polite { background: #eef8fd; }

.damage-breakdown .damage-arena {
    flex-basis: 100%;
    font-family: var(--font-hand);
    font-size: 13px;
    color: var(--ink);
    opacity: 0.8;
}

.live-arena { padding: 0 6px; border: 2px solid var(--ink); font-size: 12px; color: var(--ink); }
.live-arena-polite { background: #d6effa; }
.live-arena-street { background: #ffd9d4; }

.arena-info-place { margin: 0 0 6px; font-family: var(--font-hand); font-size: 18px; }
.arena-info-blurb { margin: 0 0 10px; }
.arena-info-mods { margin: 0; padding-left: 20px; text-align: left; }

/* NEW! - a starburst sticker on cards unlocked and not yet used */
.is-new { position: relative; }

.new-splash {
    position: absolute;
    top: -24px;
    left: -22px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--ink);
    transform: rotate(-14deg);
    filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)) drop-shadow(2px 3px 0 var(--ink));
    animation: newPop 1.6s ease-in-out infinite;
    pointer-events: none;
}

.new-splash::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--zap);
    clip-path: polygon(50% 0%, 61% 18%, 82% 8%, 80% 31%, 100% 38%, 85% 54%, 97% 74%, 74% 76%, 70% 98%, 52% 84%,
                       33% 100%, 27% 77%, 4% 78%, 15% 58%, 0% 41%, 20% 32%, 16% 9%, 38% 17%);
}

@keyframes newPop { 50% { transform: rotate(-8deg) scale(1.1); } }

.editor-states { align-items: center; margin-top: 10px; }
.editor-states .chip { font-size: 15px; }
.editor-clear-new { margin-left: auto; font-size: 15px; }
.editor-clear-new[hidden] { display: none; }
.editor-card.is-learning { cursor: help; }
.editor-card.is-learning .card-tile { gap: 4px; }

.fighter-action .new-count {
    padding: 0 6px;
    background: var(--zap);
    border: 2px solid var(--ink);
    color: var(--ink);
    font-size: 14px;
    transform: rotate(4deg);
}

.fighter-action .new-count[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .new-splash { animation: none; } }

/* The sentence strip lives in the opened phone hand only */
.hand-sentence {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #fff;
    border: var(--line);
    box-shadow: var(--drop-small);
}

.hand-sentence-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.03em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.hand-sentence-text.is-empty { font-family: var(--font-hand); font-size: 15px; text-transform: none; color: #666; }
.hand-sentence-total { font-family: var(--font-display); font-size: 16px; color: var(--pow); white-space: nowrap; }
.hand-sentence-total.is-missing { color: #888; font-family: var(--font-hand); }
.hand-sentence .hand-say {
    order: 3;
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 14px 2px !important;
    font-size: 20px !important;
}

/* Crowd lines wrap inside the panel; never a sideways scrollbar */
.crowd-messages { overflow-x: hidden; }
.crowd-message { overflow-wrap: anywhere; }

.record-note { margin: 0 0 6px; font-size: 11px; color: #666; font-style: italic; }

/* Spectating: the bar under the arena shows both fighters' cards, side by side */
.spectator-bar {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 16px;
    min-height: 0;
}

.spectator-head { display: flex; align-items: center; gap: 14px; }
.spectator-head .spectator-text { flex: 1; font-size: 17px; }
.spectator-head .lobby-button { padding: 4px 14px 2px; font-size: 18px; }

.spectator-record {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 18px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.spectator-record .record-note { grid-column: 1 / -1; }
.spectator-record .record-fighter + .record-fighter { margin-top: 0; }
.spectator-record .record-row { font-size: 13px; }

/* Portrait phones: the hand opens up to show every card once scrolled to */
@container stage (orientation: portrait) {
    .hand-area.is-expanded .cards-container {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
        row-gap: 14px;
    }
    .hand-area .panel-caption::after {
        content: ' - scroll down for all';
        font-family: var(--font-hand);
        font-size: 13px;
        letter-spacing: 0;
    }
    .hand-area.is-expanded .panel-caption::after { content: ''; }
    .hand-area.is-expanded .hand-sentence { display: flex; }
    .spectator-record { grid-template-columns: 1fr; }
    .spectator-head { flex-direction: column; align-items: stretch; text-align: center; }
}

/* Phones: screens fill the viewport; the editor shows one pane at a time */
@media (max-width: 760px) {   /* game screens live outside the board stage: viewport width */
    .game-screen { padding: 0; }
    .game-screen-frame { border: none; box-shadow: none; }
    .game-screen-header { padding: 8px 10px; gap: 8px; }
    .game-screen-title { font-size: 28px; }
    .game-screen-tools { margin-left: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .game-screen-body { padding: 10px; }
    .collection-grid, .editor-pool-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 22px 8px; }
    .editor-pane-tabs { display: flex; }
    .editor-layout { grid-template-columns: 1fr; }
    .editor-layout[data-pane="cards"] .editor-deck,
    .editor-layout[data-pane="deck"] .editor-pool { display: none; }
    .editor-deck { position: static; }
    .editor-list { max-height: none; }
    .editor-meters { grid-template-columns: auto auto; }
    .editor-curve { grid-column: 1 / -1; }
}

/* Victory screen: the XP the server awarded */
.victory-xp {
    margin: -10px 0 18px;
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.victory-xp[hidden] { display: none; }
.victory-xp.is-level-up { color: var(--zap); text-shadow: var(--outline-text); transform: rotate(-2deg); }

@media (prefers-reduced-motion: reduce) {
    .live-title::before { animation: none; }
    .xp-meter-fill { transition: none; }
}

@media (max-width: 520px) {
    .fighter-banner { height: 78px; }
    .fighter-avatar { width: 70px; height: 70px; bottom: -30px; font-size: 32px; }
    .fighter-level { width: 74px; height: 74px; top: 4px; }
    .fighter-level strong { font-size: 32px; }
    .fighter-id { margin-top: 32px; }
    .fighter-name { font-size: 28px; }
    .live-list { max-height: none; }
    .spectator-bar { flex-direction: column; gap: 8px; }
    .spectator-text { font-size: 16px; text-align: center; }
}

/* One row: the fight (Find, or the search in progress) and practice beside it */
.lobby-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;
}

.lobby-actions .lobby-find { min-width: min(340px, 100%); }
.lobby-actions .lobby-searching { flex: 1 1 340px; }
.lobby-searching-deck { margin-left: 6px; }

@media (prefers-reduced-motion: reduce) {
    .deck-tile, .deck-stamp { transition: none; }
}

/* Phones: the decks become a swipe row (one tile in view, the next peeking in) and
   the action bar is pinned to the bottom, so a fight is always one tap away */
@media (max-width: 520px) {
    .lobby-screen { padding: 50px 10px 0; }
    .lobby-panel { padding: 50px 12px 0; box-shadow: var(--drop); font-size: 17px; }
    .lobby-tagline { margin-bottom: 14px; font-size: 22px; }
    .lobby-section { padding: 12px 14px; margin-bottom: 14px; }
    .lobby-home { gap: 2px; }
    .lobby-presence { font-size: 15px; }

    .deck-grid {
        display: flex;
        gap: 14px;
        margin: 0 -14px;
        padding: 8px 14px 16px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 14px;
        scrollbar-width: none;
    }
    .deck-grid::-webkit-scrollbar { display: none; }
    .deck-tile { flex: 0 0 76%; scroll-snap-align: center; }
    .deck-art { height: 78px; }
    .deck-art svg { width: 50px; height: 50px; }
    .deck-stamp { right: -4px; }
    .lobby-decks-title { margin-bottom: 2px; }
    .lobby-decks-title::after {
        content: ' - swipe';
        font-family: var(--font-hand);
        font-size: 15px;
        letter-spacing: 0;
        color: #555;
    }
}

/* Small or short screens: pin the action bar */
@media (max-width: 520px), (max-height: 560px) {
    .lobby-actions {
        position: sticky;
        bottom: 0;
        z-index: 2;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0 -12px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--paper);
        border-top: var(--line);
    }
    .lobby-actions .lobby-find { flex: 1 1 auto; min-width: 0; font-size: 24px; padding: 8px 10px 4px; }
    .lobby-actions .lobby-searching { flex: 1 1 auto; min-width: 0; padding: 6px 8px; gap: 6px; font-size: 15px; }
    .lobby-actions .lobby-searching .lobby-button { padding: 5px 10px 2px; font-size: 17px; }
    .lobby-actions .lobby-practice { flex: 0 0 auto; padding: 8px 10px 4px; font-size: 16px; }
    /* While searching the strip takes the bar; practice returns with Find after a cancel */
    .lobby-actions:has(.lobby-searching:not([hidden])) .lobby-practice { display: none; }
    .lobby-actions .lobby-searching { flex-wrap: nowrap; }
    .lobby-footer:has(.lobby-status:empty):has(#lobbyTakeOver[hidden]) { display: none; }
    .lobby-footer { padding: 10px 0 14px; }
}

/* Turkish card words in comic lettering. Bangers draws lowercase as capitals,
   so "i" would show as a dotless I; real uppercasing under lang="tr" maps
   i -> İ and ı -> I so words read correctly. */
[lang="tr"] .card-text,
[lang="tr"] .slot-card-text,
.preview-text[lang="tr"],
.spell-burst[lang="tr"] {
    text-transform: uppercase;
}

.preview-text.is-empty[lang="tr"] {
    text-transform: none;
}

/* ===========================
   OPPONENT'S TURN - thought bubble
   =========================== */
.ai-thinking {
    position: relative;
    padding: 36px 64px 34px;
    background: #fff;
    border: var(--line-heavy);
    border-radius: 50%;
    box-shadow: var(--drop-heavy);
}

/* Trailing thought dots */
.ai-thinking::before,
.ai-thinking::after {
    content: '';
    position: absolute;
    background: #fff;
    border: var(--line);
    border-radius: 50%;
}

.ai-thinking::before {
    right: 18%;
    top: -34px;
    width: 30px;
    height: 24px;
}

.ai-thinking::after {
    right: 12%;
    top: -60px;
    width: 18px;
    height: 15px;
}

.ai-thinking-text {
    margin-bottom: 14px;
    font-family: var(--font-display);
    font-size: 32px;
    letter-spacing: 0.05em;
    color: var(--ink);
}

.ai-dot {
    background: var(--magenta);
    border: 2px solid var(--ink);
}

.ai-spell-preview {
    background: none;
}

/* Nothing to reveal yet - don't reserve space inside the bubble */
.ai-spell-preview:has(.ai-spell-cards:empty) {
    display: none;
}

.ai-preview-label {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.05em;
    color: var(--ink);
}

.ai-preview-card {
    background: var(--magenta);
    border: 2px solid var(--ink);
    border-radius: 0;
    font-family: var(--font-display);
    font-size: 13px;
    color: #fff;
    text-shadow: var(--outline-text-thin);
}

/* ===========================
   SCREENS & DIALOGS
   =========================== */
.loading-screen,
.victory-screen {
    background-color: var(--page);
    background-image: repeating-conic-gradient(from 0deg at 50% 50%, var(--page-dot) 0deg 7deg, var(--page) 7deg 14deg);
    backdrop-filter: none;
}

.loading-spinner {
    border: 6px solid #fff;
    border-top-color: var(--zap);
    box-shadow: 0 0 0 3px var(--ink);
}

.loading-text {
    font-family: var(--font-display);
    font-size: 30px;
    letter-spacing: 0.06em;
    color: #fff;
    text-shadow: var(--outline-text);
}

.victory-content {
    position: relative;
    min-width: 440px;
    padding: 40px 40px 32px;
    background: var(--paper);
    border: var(--line-heavy);
    border-image: none;
    border-radius: 0;
    box-shadow: var(--drop-heavy);
    animation: none;
}

/* Overrides the gradient text-fill from ui-improvements.css */
.victory-title,
.victory-title.defeat-title {
    margin: -78px 0 26px;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    font-family: var(--font-display);
    font-size: 82px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--zap);
    text-shadow: var(--outline-text), 6px 7px 0 var(--ink);
    transform: rotate(-4deg);
    animation: none;
}

.victory-title.defeat-title {
    color: var(--pow);
    transform: rotate(3deg);
}

/* Why the match ended (board.js) - a hand-lettered caption under the title */
.victory-reason {
    margin: -14px 0 20px;
    font-family: var(--font-hand);
    font-size: 22px;
    color: var(--ink);
}

.victory-stats {
    gap: 10px;
    margin: 0 0 26px;
}

.victory-stat {
    align-items: center;
    padding: 8px 16px;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 0;
}

.victory-stat-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.victory-stat-value {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    color: var(--ink);
}

.victory-buttons {
    gap: 16px;
    margin-top: 0;
}

.victory-button,
.victory-button:hover {
    padding: 10px 28px 7px;
    background: var(--zap);
    border: var(--line);
    border-radius: 0;
    box-shadow: var(--drop);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--ink);
}

.victory-button:last-child {
    background: #fff;
}

.victory-button::after {
    display: none;
}

.victory-button:hover {
    transform: translate(-2px, -2px) rotate(-1.5deg);
    box-shadow: var(--drop-heavy);
}

.victory-button:active {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0 var(--ink);
}

.dialog-overlay {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: none;
}

.game-dialog {
    padding: 34px 30px 26px;
    background: var(--paper);
    border: var(--line-heavy);
    border-radius: 0;
    box-shadow: var(--drop-heavy);
    backdrop-filter: none;
    color: var(--ink);
}

.dialog-header {
    margin-bottom: 8px;
    padding-bottom: 0;
    border-bottom: none;
}

/* Overrides the gradient text-fill from ui-improvements.css */
.dialog-title {
    display: inline-block;
    padding: 4px 16px 2px;
    background: var(--zap);
    border: var(--line);
    box-shadow: var(--drop-small);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--ink);
    text-shadow: none;
    transform: rotate(-2deg);
}

.dialog-content {
    color: var(--ink);
    font-weight: 600;
}

.dialog-button {
    border: var(--line);
    border-radius: 0;
    box-shadow: var(--drop-small);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.06em;
}

.dialog-button::before {
    display: none;
}

.dialog-button.primary   { background: var(--cyan); border-color: var(--ink); color: #fff; text-shadow: var(--outline-text-thin); }
.dialog-button.secondary { background: #fff; border-color: var(--ink); color: var(--ink); }
.dialog-button.danger    { background: var(--pow); border-color: var(--ink); color: #fff; text-shadow: var(--outline-text-thin); }

.dialog-button.primary:hover,
.dialog-button.secondary:hover,
.dialog-button.danger:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--drop);
}

.game-notification {
    background: var(--paper);
    border: var(--line);
    border-radius: 0;
    box-shadow: var(--drop);
    backdrop-filter: none;
}

.notification-text {
    color: var(--ink);
    font-weight: 800;
}

.music-toggle {
    width: 44px;
    height: 44px;
    background: var(--paper);
    border: var(--line);
    box-shadow: var(--drop-small);
    color: var(--ink);
}

.music-toggle:hover {
    background: var(--zap);
    border-color: var(--ink);
}

.music-toggle.music-off {
    color: #8c8574;
}

/* ===========================
   RESPONSIVE - container queries on the scaled stage
   Landscape stages are ~1600x900 logical (wider/taller with aspect). Smaller
   logical sizes only happen when the scale hits its legibility floor (phones in
   landscape), so those get compact rules. Tokens are set on the stage's children
   because a container query cannot style the container itself.
   =========================== */
@container stage (orientation: landscape) and (max-width: 1500px) {
    .game-container > * { --side-w: 200px; }

    /* A full 10-card hand fits without scrolling */
    .card { width: 90px; height: 128px; }
    .card-text { margin-top: 30px; font-size: 16px; }
    .card-stats { bottom: 32px; }
    .cards-container { gap: 8px; }
}

/* Too narrow for side panels: the spell panel takes the full width */
@container stage (orientation: landscape) and (max-width: 1250px) {
    .game-container > * { --side-w: 0px; }

    .battle-log,
    .crowd-section { display: none; }
}

/* Tall stages (4:3 screens): the spell band has room - scale the builder up */
@container stage (orientation: landscape) and (min-height: 1000px) and (min-width: 1500px) {
    .game-container > * {
        --slot-width-empty: 92px;
        --slot-width-filled: 142px;
        --slot-height: 124px;
    }

    .spell-preview { min-height: 76px; }
    .preview-text { font-size: 42px; }
    .grammar-header { margin-bottom: 26px; }
    .slot-label { font-size: 18px; }
    .damage-formula { margin-top: 14px; }
    .cast-area { margin-top: 22px; }
}

@container stage (orientation: landscape) and (max-height: 820px) {
    .game-container > * {
        --zone-top: 128px;
        --hand-h: 192px;
        --slot-width-empty: 66px;
        --slot-width-filled: 104px;
        --slot-height: 88px;
    }

    .grammar-zone { padding-top: 16px; padding-bottom: 14px; }
    .spell-preview { min-height: 48px; padding: 5px 20px; }
    .preview-text { font-size: 26px; }
    .grammar-header { margin-bottom: 10px; }
    .damage-formula { padding: 4px 16px; }
    .cast-area { margin-top: 10px; }
    /* Height only - card width is owned by the width rules above */
    .card { height: 134px; }
    .card-text { font-size: 17px; }
    .control-button { width: 62px; height: 62px; }
}

/* Phones in landscape: every vertical pixel counts */
@container stage (orientation: landscape) and (max-height: 700px) {
    .game-container > * {
        --hud-h: 84px;
        --zone-top: 104px;
        --hand-h: 166px;
        --slot-height: 76px;
    }

    .top-hud { padding-top: 18px; }
    .center-info { top: 8px; }
    .turn-indicator { font-size: 20px; padding: 2px 16px 0; }
    .turn-timer { margin-top: 6px; padding: 3px 10px; }
    .timer-text { font-size: 18px; }
    .game-time,
    .timer-bank { display: none; }
    .grammar-zone { padding-top: 12px; padding-bottom: 10px; }
    .spell-preview { min-height: 40px; }
    .preview-text { font-size: 22px; }
    .damage-formula { margin-top: 2px; padding: 2px 12px; }
    .damage-total { font-size: 22px; }
    .cast-button { font-size: 24px; padding: 6px 24px 4px; }
    .card { height: 116px; }
    .card-text { margin-top: 26px; font-size: 15px; min-height: 36px; }
    .card-stats { bottom: 30px; }
    .control-button { width: 56px; height: 52px; }
    .button-icon { font-size: 16px; }
}

/* ===========================
   PORTRAIT (phones, tablets upright) - single scrolling column:
   fighters -> spell builder -> hand -> log -> crowd. The play area (fighters,
   builder, hand) fits the first screen; log and crowd sit below it.
   =========================== */
@container stage (orientation: portrait) {
    .game-container > * {
        --gutter: 10px;
    }

    /* Panels leave the fixed page grid and join the column flow */
    .top-hud {
        order: 0;
        position: relative;
        height: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px 10px;
        padding: 20px 10px 0;
    }

    .player-info,
    .player-info.opponent {
        flex: none;
        max-width: none;
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px;
    }

    .player-info.opponent { flex-direction: row-reverse; }

    /* Explicit cells: the turn/timer row spans both columns underneath */
    .top-hud > .player-info:not(.opponent) { grid-column: 1; grid-row: 1; }
    .top-hud > .player-info.opponent { grid-column: 2; grid-row: 1; }

    .player-level,
    .player-path { display: none; }

    .avatar {
        width: 36px;
        height: 36px;
        font-size: 17px;
    }

    .stats { flex: 1 1 90px; gap: 3px; }
    .stat-bar { height: 15px; }
    .stat-text { font-size: 10px; line-height: 11px; }

    .center-info {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .turn-indicator { font-size: 21px; padding: 3px 16px 1px; }
    .turn-timer { margin-top: 0; min-width: 150px; padding: 4px 10px; }
    .timer-text { font-size: 19px; }
    .game-time { display: none; }

    /* States: one row of four under the bars */
    .fighter-states {
        flex: 1 1 100%;
        grid-template-columns: repeat(4, 1fr);
        gap: 3px;
    }

    .state-meter {
        flex-direction: column;
        align-items: center;
        gap: 1px;
        padding: 2px 2px 6px;
    }

    .state-label { font-size: 7px; }
    .state-value { font-size: 13px; }

    .ai-turn-overlay {
        order: 1;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 40px auto 10px;
    }

    .ai-thinking { padding: 26px 34px 24px; }
    .ai-thinking-text { font-size: 24px; }

    /* stretch: children take the column width (the desktop rule centers them,
       which sized the hand to all its cards and pushed it off-screen) */
    .battle-arena {
        order: 2;
        position: relative;
        flex: none;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 26px;
        padding: 24px 10px 10px;
        overflow: visible;
    }

    /* Same specificity as grammar-panel.css state rules (body.game-state-* .grammar-zone) */
    body .game-container .grammar-zone {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        transform: none;
        width: auto;
        margin: 0;
        padding: 18px 10px 14px;
    }

    .spell-preview {
        min-height: 54px;
        padding: 8px 14px;
        border-radius: 24px;
        flex-wrap: wrap;
        gap: 4px 10px;
    }

    .spell-preview::before { left: 34px; }
    .spell-preview::after { left: 37px; }
    .preview-text { font-size: 24px; }
    .preview-text.is-empty { font-size: 14px; }

    /* 9 slots as a 3x3 grid, read left to right: tone/opener/intensifier,
       epithet/target/anatomy, action/amplifier/resolution */
    .grammar-slots {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        width: 100%;
        padding: 4px 0;
    }

    .slot-connector { display: none; }

    .grammar-slot,
    .grammar-slot.filled {
        width: auto;
        height: 64px;
    }

    /* Small slots: the word gets the room; per-card cost is in the budget panel */
    .slot-card-cost { display: none; }
    .slot-card-container { top: 4px; height: calc(100% - 28px); }

    .damage-formula {
        gap: 8px;
        margin-top: 4px;
        padding: 6px 10px;
    }

    .formula-equals { display: none; }
    .damage-total { font-size: 24px; }

    /* Saying it is the primary action - full width on top, clear + budget beneath */
    .cast-area {
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 12px;
    }

    .cast-button {
        order: -1;
        flex: 1 1 100%;
        padding: 6px 20px 3px;
        font-size: 30px;
        transform: rotate(-1deg);
    }

    .cast-button:hover:not(:disabled),
    .cast-button:not(:disabled):hover { transform: rotate(-1deg) translate(-2px, -2px); }
    .cast-button:active:not(:disabled) { transform: rotate(-1deg) translate(3px, 3px); }
    .cast-button.is-ready { animation-name: castReadyFlat; }

    .clear-button { flex: 0 0 auto; }

    /* Budget as one line - the HUD mana bar already shows the pool */
    .mana-cost {
        flex: 1 1 0;
        min-width: 0;
        padding: 6px 10px;
    }

    .mana-cost-bar { display: none; }

    /* Docked to the bottom of the screen like a card-game hand: always reachable
       while building a sentence; sticky keeps its place in the flow, so scrolling
       still reveals anything it covers on very short phones */
    .hand-area {
        position: sticky;
        left: auto;
        bottom: 0;
        z-index: var(--z-hand);
        transform: none;
        width: auto;
        max-width: none;
        height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 16px 8px 4px;
        box-shadow: 0 -4px 0 var(--ink), var(--drop);
    }

    .hand-controls {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        padding: 0;
        min-width: 0;
    }

    .draw-button,
    .pass-button,
    .special-button,
    .surrender-button { grid-area: auto; }

    /* Actions as one compact row: icon + label side by side */
    .control-button {
        width: auto;
        height: 40px;
        flex-direction: row;
        gap: 4px;
    }

    .button-icon { font-size: 15px; }
    .button-cost,
    .button-cooldown { display: none; }

    /* wordbattle.css sets min-height: 160px - let the row follow the card size */
    .cards-container { min-height: 0; padding: 16px 4px 8px; }
    .card { width: 88px; height: 124px; }
    .card-text { margin-top: 28px; font-size: 16px; min-height: 40px; }
    .card-stats { bottom: 30px; }

    .battle-log,
    .crowd-section {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        width: auto;
        height: 280px;
    }

    .crowd-section {
        order: 3;
        margin: 6px 10px 30px;
    }

    .music-toggle {
        top: 6px;
        right: 6px;
        left: auto;
        bottom: auto;
        width: 34px;
        height: 34px;
    }

    .music-icon { width: 16px; height: 16px; }

    /* Over the slot grid, clear of the fighter panels and the speech bubble */
    .toast-stack { top: 340px; }
    .message-popup { font-size: 17px; }

    .spell-burst {
        top: 30%;
        width: 94%;
        min-height: 220px;
        padding: 50px 40px;
        font-size: 32px;
    }

    .damage-number { font-size: 48px; }

    .victory-content {
        min-width: 0;
        width: 92%;
        padding: 40px 18px 24px;
    }

    .victory-title,
    .victory-title.defeat-title {
        margin-top: -64px;
        font-size: 60px;
    }

    .victory-button,
    .victory-button:hover { font-size: 20px; padding: 8px 18px 5px; }
}

/* Short phones (SE-class, ~667px tall): fit builder + SAY above the docked hand */
@container stage (orientation: portrait) and (max-height: 820px) {
    .top-hud { gap: 10px 8px; padding-top: 16px; }
    .stat-bar { height: 14px; }
    /* Fury is the minor stat - Moral and Mana stay on short phones */
    .stat-bar.fury-bar { display: none; }
    .battle-arena { gap: 18px; padding-top: 18px; }
    body .game-container .grammar-zone { padding: 14px 8px 10px; }
    .grammar-header { margin-bottom: 8px; }
    .spell-preview { min-height: 42px; padding: 4px 12px; }
    .preview-text { font-size: 20px; }

    .grammar-slot,
    .grammar-slot.filled { height: 58px; }

    .slot-card-container { height: calc(100% - 24px); }

    .slot-label { font-size: 13px; }
    .slot-hint { display: none; }

    /* Keep the total; per-channel chips return on taller screens */
    .damage-breakdown { display: none; }
    .damage-formula { padding: 2px 10px; }
    .damage-total { font-size: 21px; }
    .cast-area { margin-top: 8px; gap: 8px; }
    .cast-button { font-size: 26px; }

    .hand-area { padding-top: 12px; }
    .cards-container { padding: 12px 4px 4px; }
    .card { width: 80px; height: 94px; }
    .card-type-banner { font-size: 12px; }
    .card-text { margin-top: 22px; font-size: 14px; min-height: 30px; padding: 2px 6px; }
    .card-stats { bottom: 27px; }
    .card-cost { width: 22px; height: 22px; }
    .card-cost .cost-value { font-size: 14px; }
}

/* Portrait "ready" pulse keeps the flatter tilt of the full-width button */
@keyframes castReadyFlat {
    0%, 100% { transform: rotate(-1deg) scale(1); }
    50%      { transform: rotate(-1deg) scale(1.03); }
}

/* ===========================
   REDUCED MOTION
   =========================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* These end on an invisible keyframe - show them statically instead
       (the game removes them on its own timer) */
    .spell-burst,
    .spell-burst-opponent {
        animation: none !important;
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    .damage-number {
        animation: none !important;
        opacity: 1;
    }
}

/* Out-of-turn swap: a marked hand card is turned to its back (the pack back) with
   its name kept on a strip, so the player still knows what goes back to the deck */
.card.is-marked { transform: rotate(var(--hand-tilt, 0deg)) translateY(-6px); box-shadow: 0 0 0 3px var(--zap), var(--drop-small); }
.card.is-marked:hover { transform: rotate(0deg) translateY(-10px); }
.card-swap-back {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--magenta);
    background-image:
        repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.14) 0deg 9deg, transparent 9deg 18deg),
        var(--halftone);
    background-size: auto, 7px 7px;
    pointer-events: none;
}
.card-swap-word {
    font-family: var(--font-display);
    font-size: 30px;
    letter-spacing: 0.04em;
    color: var(--zap);
    text-shadow: var(--outline-text), 2px 3px 0 var(--ink);
    transform: rotate(-8deg);
}
.card-swap-name {
    max-width: 92%;
    padding: 1px 5px;
    background: #fff;
    border: 2px solid var(--ink);
    font-family: var(--font-hand);
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.card.just-flipped { animation: swapFlip 0.32s ease-out; }
@keyframes swapFlip {
    0% { transform: rotate(var(--hand-tilt, 0deg)) perspective(400px) rotateY(90deg); }
    100% { transform: rotate(var(--hand-tilt, 0deg)) perspective(400px) rotateY(0deg); }
}
.panel-caption.is-swap { color: var(--magenta); }
@media (prefers-reduced-motion: reduce) { .card.just-flipped { animation: none; } }

/* Account box on the fighter card: a guest is asked to save the fighter (louder once
   there is progress to lose); a saved fighter shows its address */
.fighter-account {
    display: grid;
    gap: 6px;
    padding: 8px 10px;
    background: var(--paper);
    border: var(--line);
}
.fighter-account.is-urgent {
    background: var(--zap);
    box-shadow: var(--drop-small);
    transform: rotate(-0.6deg);
}
.account-guest { display: grid; gap: 6px; }
.account-pitch { margin: 0; font-size: 16px; line-height: 1.2; }
.fighter-account.is-urgent .account-pitch { font-weight: 700; }
.account-save { justify-self: start; padding: 4px 14px 2px; font-size: 18px; }
.fighter-account.is-urgent .account-save { background: var(--pow); color: #fff; text-shadow: var(--outline-text-thin); }
.account-form { display: flex; flex-wrap: wrap; gap: 6px; }
.account-form .lobby-input { flex: 1 1 160px; font-size: 18px; padding: 6px 10px; }
.account-form .lobby-button { padding: 4px 14px 2px; font-size: 18px; }
.fighter-account .lobby-error:empty { display: none; }
.account-sent { margin: 0; font-size: 15px; color: var(--ink); }
.account-saved { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 16px; }
.account-saved .lobby-link { margin-left: auto; font-size: 16px; }
.account-email { min-width: 0; overflow-wrap: anywhere; }
.account-check {
    width: 22px;
    height: 22px;
    flex: none;
    padding: 2px;
    background: var(--go);
    border: 2px solid var(--ink);
    fill: none;
    stroke: #fff;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lobby-signin-offer { margin: 6px 0 0; font-size: 16px; }
.lobby-signin-offer .lobby-link { margin-left: 4px; }
.lobby-signin .account-sent { margin-top: 6px; }
.fighter-account [hidden], .lobby-signin[hidden], .lobby-signin [hidden] { display: none !important; }

/* Honor and will join the fighter states: six meters in two rows of three (phones
   too); the spell preview names a worn defender's extra damage */
.fighter-states { grid-template-columns: repeat(3, 66px); }
.fighter-states .state-label { font-size: 8px; letter-spacing: 0.02em; }
.fighter-states .state-meter { padding-left: 4px; padding-right: 4px; }
.state-honor .state-fill { background: var(--ch-honor); }
.state-will .state-fill  { background: var(--ch-will); }
.damage-breakdown .damage-wear {
    flex-basis: 100%;
    font-family: var(--font-hand);
    font-size: 13px;
    color: var(--pow);
}
@container stage (orientation: portrait) {
    .fighter-states { grid-template-columns: repeat(3, 1fr); }
}

/* ===========================
   REWARDS (js/screens/rewards.js): streak strip, quests, milestones
   =========================== */
.game-screen[data-tone="go"] { --screen-tone: var(--go); }

.fighter-rewards.has-ready { background: var(--zap); }
.fighter-rewards.has-ready strong { color: var(--ink); }

.rewards-screen .game-screen-body { display: grid; gap: 18px; align-content: start; }

.rw-section { display: grid; gap: 10px; }
.rw-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.rw-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 0.02em;
}
.rw-clock { font-family: var(--font-hand); font-size: 16px; color: #555; }
.rw-note { margin: 0; font-size: 16px; color: #444; }
.rw-best { font-family: var(--font-hand); font-size: 15px; color: var(--go); }
.rw-extra { margin: 0; padding: 8px 12px; font-size: 16px; background: var(--paper); border: 2px dashed var(--ink); }

.rw-guest {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    padding: 10px 14px;
    background: var(--zap);
    border: var(--line);
    box-shadow: var(--drop-small);
    transform: rotate(-0.4deg);
}
.rw-guest[hidden] { display: none; }
.rw-guest-text { flex: 1 1 260px; margin: 0; font-size: 17px; font-weight: 700; }

.rw-toast {
    justify-self: center;
    margin: 0;
    padding: 6px 16px 4px;
    background: var(--go);
    border: var(--line);
    box-shadow: var(--drop-small);
    font-family: var(--font-display);
    font-size: 20px;
    color: #fff;
    text-shadow: var(--outline-text-thin);
    text-align: center;
}
.rw-toast.is-error { background: var(--pow); }
.rw-toast[hidden] { display: none; }
.rw-toast.is-pop { animation: rwPop 0.35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes rwPop { from { transform: scale(0.6) rotate(-4deg); } to { transform: scale(1) rotate(0); } }

/* Reward chips: what a claim gives */
.rw-chip {
    display: inline-block;
    padding: 1px 8px 0;
    border: 2px solid var(--ink);
    font-family: var(--font-display);
    font-size: 15px;
    white-space: nowrap;
}
.rw-chip-xp { background: var(--cyan); color: #fff; text-shadow: var(--outline-text-thin); }
.rw-chip-learn { background: var(--paper); color: var(--ink); }
.rw-chip-pack { background: var(--magenta); color: #fff; text-shadow: var(--outline-text-thin); }
.rw-chip-bigpack { background: var(--zap); color: var(--ink); }

.rw-stamp {
    display: inline-block;
    padding: 1px 8px 0;
    background: var(--go);
    border: 2px solid var(--ink);
    font-family: var(--font-display);
    font-size: 14px;
    color: #fff;
    text-shadow: var(--outline-text-thin);
    transform: rotate(-6deg);
}

/* The 7-day strip: days done stamped, today lifted and glowing, day 7 the big one */
.rw-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rw-day {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    min-height: 96px;
    padding: 8px 4px;
    background: #fff;
    border: var(--line);
    box-shadow: var(--drop-small);
    text-align: center;
}
.rw-day-num { font-family: var(--font-display); font-size: 17px; }
.rw-day .rw-chip { font-size: 13px; white-space: normal; }
.rw-day.is-done { background: var(--paper-shade); }
.rw-day.is-done .rw-chip { opacity: 0.55; }
.rw-day.is-done .rw-stamp { position: absolute; bottom: -8px; }
.rw-day.is-today {
    background: var(--zap);
    box-shadow: 0 0 0 4px var(--go), var(--drop);
    transform: translateY(-6px) rotate(-1.5deg);
}
.rw-day.is-big { background-image: var(--halftone); background-size: 7px 7px; }
.rw-daily-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; }

/* Quests: text + reward, a meter, the action */
.rw-quest-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rw-quest {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(120px, 1fr) auto;
    align-items: center;
    gap: 8px 14px;
    padding: 8px 12px;
    background: #fff;
    border: var(--line);
    box-shadow: var(--drop-small);
}
.rw-quest.is-done { background: #e7f8ec; }
.rw-quest.is-claimed { background: var(--paper-shade); }
.rw-quest.is-claimed .rw-quest-text { opacity: 0.6; }
.rw-quest-text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rw-quest-name { font-size: 17px; }
.rw-quest-actions { justify-self: end; }
.rw-quest-actions .lobby-button { padding: 3px 14px 1px; font-size: 17px; }

.rw-meter {
    position: relative;
    height: 22px;
    background: var(--paper-shade);
    border: 2px solid var(--ink);
}
.rw-meter-fill { display: block; height: 100%; background: var(--go); transition: width 0.4s ease-out; }
.rw-meter-text {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-size: 14px;
}

/* Milestones: a card per counter, its goals in a row */
.rw-mile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.rw-mile { display: grid; align-content: start; gap: 6px; padding: 8px 10px; background: #fff; border: var(--line); box-shadow: var(--drop-small); }
.rw-mile-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rw-mile-label { font-size: 17px; }
.rw-mile-count { font-family: var(--font-display); font-size: 22px; color: var(--go); }
.rw-goals { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rw-goal {
    display: flex; align-items: center; gap: 4px;
    padding: 2px 6px;
    border: 2px solid var(--ink);
    background: var(--paper);
    opacity: 0.7;
}
.rw-goal.is-ready { opacity: 1; background: var(--zap); box-shadow: var(--drop-small); }
.rw-goal.is-claimed { opacity: 1; background: #e7f8ec; }
.rw-goal-at { font-family: var(--font-display); font-size: 16px; min-width: 1.6em; text-align: center; }
.rw-goal .rw-chip { font-size: 12px; }
.rw-goal .lobby-button { padding: 1px 8px 0; font-size: 14px; }
.rw-goal .rw-stamp { font-size: 11px; }

@media (max-width: 760px) {   /* game screens live outside the board stage: viewport width */
    .rw-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rw-quest { grid-template-columns: 1fr auto; }
    .rw-quest .rw-meter { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { .rw-toast.is-pop { animation: none; } .rw-day.is-today { transform: none; } }

/* Each tone speaks in its own lettering: the live preview and the spoken burst */
.spell-preview[data-tone="shout"] .preview-text:not(.is-empty),
.spell-burst[data-tone="shout"] { font-family: var(--font-tone-shout); }
.spell-preview[data-tone="calm"] .preview-text:not(.is-empty),
.spell-burst[data-tone="calm"] { font-family: var(--font-tone-calm); }
.spell-preview[data-tone="mock"] .preview-text:not(.is-empty),
.spell-burst[data-tone="mock"] { font-family: var(--font-tone-mock); }
.spell-preview[data-tone="menace"] .preview-text:not(.is-empty),
.spell-burst[data-tone="menace"] { font-family: var(--font-tone-menace); }
.spell-preview[data-tone="unhinged"] .preview-text:not(.is-empty),
.spell-burst[data-tone="unhinged"] { font-family: var(--font-tone-unhinged); }
/* Tag and paint faces run wider than Bangers: a step smaller keeps long sentences inside */
.spell-preview[data-tone="mock"] .preview-text:not(.is-empty),
.spell-preview[data-tone="menace"] .preview-text:not(.is-empty) { font-size: 30px; letter-spacing: 0.01em; }
.spell-burst[data-tone="mock"], .spell-burst[data-tone="menace"] { font-size: 40px; letter-spacing: 0.01em; }
.spell-preview[data-tone="shout"] .preview-text:not(.is-empty) { font-size: 38px; }
.spell-burst[data-tone="shout"] { font-size: 52px; }

/* Deck editor, deck pane: two stat blocks, the mana curve on its own row, and the
   actions in two rows (start / fill / clear, then delete left and save right) */
.editor-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
.editor-counter,
.editor-verbs {
    display: grid;
    align-content: center;
    gap: 2px;
    padding: 6px 10px;
    background: var(--paper);
    border: 2px solid var(--ink);
    white-space: normal;
}
.editor-counter strong,
.editor-verbs strong { font-size: 32px; }
.editor-stat-label { font-size: 14px; line-height: 1.2; color: #444; }
.editor-curve-box { grid-column: 1 / -1; display: grid; gap: 4px; padding-bottom: 18px; }
.editor-curve-title { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.05em; color: #444; }
.editor-meters .editor-curve { grid-column: auto; height: 60px; gap: 5px; }
.curve-label { bottom: -17px; font-size: 12px; }
.editor-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
}
.editor-actions .screen-select { min-width: 0; width: 100%; }
.editor-actions .editor-delete { grid-column: 1; justify-self: start; }
.editor-actions .editor-save { grid-column: 2 / 4; justify-self: end; margin-left: 0; }
@media (max-width: 760px) {   /* game screens live outside the board stage: viewport width */
    .editor-meters { grid-template-columns: 1fr 1fr; }
}

/* The pulse beside Find opponent: a live dot and who is around */
.lobby-pulse {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin: 0;
    padding: 6px 12px 4px;
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: var(--drop-small);
    font-family: var(--font-hand);
    font-size: 17px;
    line-height: 1.1;
    transform: rotate(-1deg);
}
.lobby-pulse strong { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: 0.02em; }
.pulse-stat { white-space: nowrap; }
.pulse-searching strong { color: var(--pow); }
.lobby-pulse [hidden] { display: none; }
.pulse-dot {
    width: 11px;
    height: 11px;
    flex: none;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--go);
    animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot { 50% { box-shadow: 0 0 0 5px rgba(34, 179, 90, 0.25); } }
.lobby-pulse.is-quiet .pulse-dot { background: var(--zap); animation: none; }
.lobby-pulse.is-offline { opacity: 0.55; }
.lobby-pulse.is-offline .pulse-dot { background: #aaa; animation: none; }
@media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none; } }

/* Phones: the pulse is a thin line across the top of the pinned bar */
@media (max-width: 520px), (max-height: 560px) {
    .lobby-actions { flex-wrap: wrap; }
    .lobby-actions .lobby-pulse {
        order: -1;
        flex: 1 1 100%;
        justify-content: center;
        padding: 2px 8px 1px;
        font-size: 15px;
        box-shadow: none;
        transform: none;
        border-width: 0 0 2px;
        background: transparent;
    }
    .lobby-pulse strong { font-size: 18px; }
}

/* Mobile polish (all lobby screens are checked at 390px) */
.fighter-actions:has(#lobbyPacks[hidden]) .fighter-rewards { grid-column: 1 / -1; }
@media (max-width: 760px) {
    /* Deck slots and filter chips: one swipeable line instead of stacked rows */
    .game-screen-tools .deck-slots,
    .screen-filters .chip-group,
    .editor-pool-head + .chip-group,
    .editor-types,
    .editor-states {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .game-screen-tools .deck-slots::-webkit-scrollbar,
    .screen-filters .chip-group::-webkit-scrollbar,
    .editor-types::-webkit-scrollbar,
    .editor-states::-webkit-scrollbar { display: none; }
    .game-screen-tools .deck-slots > *,
    .screen-filters .chip-group > *,
    .editor-types > *,
    .editor-states > * { flex: none; }
    /* Deck actions: the preset picker gets its own row */
    .editor-actions { grid-template-columns: 1fr 1fr; }
    .editor-actions .screen-select { grid-column: 1 / -1; }
    .editor-actions .editor-delete { grid-column: 1; }
    .editor-actions .editor-save { grid-column: 2; }
}
@container stage (orientation: portrait) {
    /* Long fighter names: the tag stays above the bars instead of covering Moral */
    .top-hud .player-info { padding-top: 12px; }
    .top-hud .panel-caption { max-width: 72%; overflow: hidden; text-overflow: ellipsis; font-size: 15px; top: -16px; }
    /* A swap turn's caption is long enough without the scroll hint */
    .hand-area .panel-caption.is-swap::after { content: ''; }
}
/* The watching count sits in the crowd panel, under the hype meter */
.crowd-section .spectator-count { align-self: flex-start; margin: 8px 0 2px; transform: rotate(-1deg); }

/* Card pack choice (lobby decks): the language the fighter speaks */
.set-choice { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.set-pill {
    display: grid;
    gap: 0;
    padding: 5px 14px 3px;
    background: #fff;
    border: var(--line);
    box-shadow: var(--drop-small);
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.03em;
    line-height: 1.1;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
}
.set-pill-note { font-family: var(--font-hand); font-size: 13px; letter-spacing: 0; color: #555; }
.set-pill.is-picked { background: var(--zap); transform: rotate(-1.5deg); }
.set-pill:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.editor-sets { margin: 8px 0 0; }
.editor-sets .chip:disabled { opacity: 0.4; cursor: not-allowed; }

/* Country flags on the card packs (js/ui/flags.js): a small inked rectangle */
.flag {
    display: inline-block;
    flex: none;
    width: 30px;
    height: 20px;
    border: 2px solid var(--ink);
    background: #fff;
    overflow: hidden;
    line-height: 0;
    vertical-align: middle;
}
.flag svg { display: block; width: 100%; height: 100%; }
.set-pill { display: flex; align-items: center; gap: 10px; }
.set-pill .flag { width: 36px; height: 24px; box-shadow: 2px 2px 0 var(--ink); }
.set-pill-words { display: grid; text-align: left; }
.chip-flag { display: inline-flex; align-items: center; gap: 6px; }
.chip-flag .flag { width: 21px; height: 14px; border-width: 1.5px; }

/* ===========================
   RESULT PANEL (victory / defeat / draw): one orchestrated entrance -
   the sunburst turns, the panel slams in, the title stamps down on it, the stat
   tiles and the XP block follow, the buttons rise last (board.js counts the numbers)
   =========================== */
/* A tall panel (quests done) scrolls with the screen - the title sticks out above it */
.victory-screen { overflow-x: hidden; overflow-y: auto; padding: 90px 0 30px; align-items: safe center; }
/* The page's static sunburst stays behind the panel; a defeat darkens it */
.victory-screen.is-defeat {
    background-color: #3b1d2e;
    background-image: repeating-conic-gradient(from 0deg at 50% 50%, #55233a 0deg 7deg, #3b1d2e 7deg 14deg);
}

.victory-content {
    width: min(520px, 92vw);
    min-width: 0;
    margin: auto 0;
    padding: 46px 34px 28px;
    text-align: center;
    background-image: var(--halftone);
    background-size: 9px 9px;
    background-color: var(--paper);
}
.victory-screen.active .victory-content { animation: vsSlam 0.55s cubic-bezier(.2, 1.5, .4, 1) both; }
.victory-screen.active.is-defeat .victory-content { animation: vsSlam 0.55s cubic-bezier(.2, 1.5, .4, 1) both, vsShake 0.45s 0.6s ease-in-out; }

/* The title is a stamp: rays behind it, dropping onto the panel */
.victory-title,
.victory-title.defeat-title { position: relative; display: inline-block; margin: -96px 0 18px; }
.victory-screen.active .victory-title { animation: vsStamp 0.5s 0.35s cubic-bezier(.3, 1.7, .5, 1) both; }
.victory-title::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: repeating-conic-gradient(var(--zap) 0deg 10deg, transparent 10deg 20deg);
    opacity: 0.55;
    transform: translate(-50%, -50%);
    animation: vsSpinCentered 14s linear infinite;
    -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%);
    mask: radial-gradient(circle, #000 30%, transparent 70%);
}
.victory-title.defeat-title::before { background: repeating-conic-gradient(var(--pow) 0deg 10deg, transparent 10deg 20deg); opacity: 0.35; }
.victory-screen.is-draw .victory-title::before { background: repeating-conic-gradient(var(--cyan) 0deg 10deg, transparent 10deg 20deg); }

.victory-reason { margin: -8px 0 16px; }
.victory-screen.active .victory-reason { animation: vsFade 0.4s 0.7s both; }

/* Stats: a 2x2 grid of number tiles */
.victory-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 0 22px;
}
.victory-stat {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 2px;
    padding: 8px 12px 6px;
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    text-align: left;
}
.victory-stat-label { font-family: var(--font-hand); font-size: 15px; font-weight: 400; color: #555; }
.victory-stat-value { font-family: var(--font-display); font-size: 34px; line-height: 1; color: var(--ink); }
.victory-stat:nth-child(odd) { transform: rotate(-0.8deg); }
.victory-stat:nth-child(even) { transform: rotate(0.8deg); }
.victory-screen.active .victory-stat { animation: vsTile 0.4s cubic-bezier(.2, 1.4, .4, 1) both; }
.victory-screen.active .victory-stat:nth-child(1) { animation-delay: 0.9s; }
.victory-screen.active .victory-stat:nth-child(2) { animation-delay: 1.02s; }
.victory-screen.active .victory-stat:nth-child(3) { animation-delay: 1.14s; }
.victory-screen.active .victory-stat:nth-child(4) { animation-delay: 1.26s; }

/* XP block: the gain, the level bar, why, the quests the match finished */
.victory-xp {
    display: grid;
    gap: 8px;
    margin: 0 0 20px;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: 0;
    text-shadow: none;
    transform: none;
}
.victory-xp.is-level-up { color: inherit; text-shadow: none; transform: none; }
.victory-screen.active .victory-xp { animation: vsFade 0.4s 0.8s both; }
.vx-note { margin: 0; font-family: var(--font-hand); font-size: 19px; }
.vx-gain { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.vx-xp {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.03em;
    color: var(--cyan);
    text-shadow: var(--outline-text), 3px 4px 0 var(--ink);
}
.vx-levelup {
    padding: 3px 12px 1px;
    background: var(--zap);
    border: var(--line);
    box-shadow: var(--drop-small);
    font-family: var(--font-display);
    font-size: 22px;
    transform: rotate(-4deg);
}
.victory-screen.active .vx-levelup { animation: vsStamp 0.45s 2.6s cubic-bezier(.3, 1.7, .5, 1) both; }
.vx-level { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.vx-lvl, .vx-count { font-family: var(--font-display); font-size: 18px; }
.vx-bar { position: relative; height: 16px; background: var(--paper-shade); border: 2px solid var(--ink); overflow: hidden; }
.vx-bar-fill { display: block; height: 100%; width: 0; background: var(--cyan); transition: width 1s cubic-bezier(.3, .9, .3, 1); }
.vx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.vx-chip {
    padding: 2px 10px 0;
    border: 2px solid var(--ink);
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.03em;
    background: #fff;
}
.vx-chip-first { background: var(--go); color: #fff; text-shadow: var(--outline-text-thin); }
.vx-chip-ai { background: var(--paper-shade); }
.vx-quests { display: grid; gap: 14px; margin: 10px 0 0; padding: 0; list-style: none; }
.vx-quest {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 14px 12px 8px;
    background: #e7f8ec;
    border: var(--line);
    box-shadow: var(--drop-small);
    text-align: left;
}
.victory-screen.active .vx-quest { animation: vsTile 0.45s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: 2.2s; }
.vx-stamp {
    position: absolute;
    top: -12px;
    left: 10px;
    padding: 1px 8px 0;
    background: var(--go);
    border: 2px solid var(--ink);
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.04em;
    color: #fff;
    text-shadow: var(--outline-text-thin);
    transform: rotate(-4deg);
}
.vx-quest-text { flex: 1 1 180px; font-size: 16px; font-weight: 700; }
.vx-claim { justify-self: center; padding: 6px 18px 3px; font-size: 18px; }
.victory-screen.active .vx-claim { animation: vsFade 0.35s 2.5s both; }

.victory-screen.active .victory-buttons { animation: vsRise 0.4s 1.5s cubic-bezier(.2, 1.3, .4, 1) both; }

@keyframes vsSpinCentered { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes vsSlam {
    0% { opacity: 0; transform: scale(1.5) rotate(-6deg); }
    60% { opacity: 1; transform: scale(0.96) rotate(1deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes vsShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px) rotate(-1deg); }
    40% { transform: translateX(7px) rotate(1deg); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(3px); }
}
@keyframes vsStamp {
    0% { opacity: 0; transform: scale(3) rotate(-14deg); }
    100% { opacity: 1; }
}
@keyframes vsFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vsTile { from { opacity: 0; transform: translateY(18px) scale(0.9); } }
@keyframes vsRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (max-width: 520px) {
    .victory-content { padding: 40px 16px 20px; }
    .victory-stat-value { font-size: 28px; }
    .vx-xp { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    .victory-title::before,
    .victory-screen.active .victory-content,
    .victory-screen.active .victory-title,
    .victory-screen.active .victory-reason,
    .victory-screen.active .victory-stat,
    .victory-screen.active .victory-xp,
    .victory-screen.active .vx-levelup,
    .victory-screen.active .vx-quest,
    .victory-screen.active .vx-claim,
    .victory-screen.active .victory-buttons { animation: none; }
    .vx-bar-fill { transition: none; }
}

/* Tone and curse effects under the damage preview (odds, what it adds) */
.damage-breakdown .damage-effects {
    flex-basis: 100%;
    font-family: var(--font-hand);
    font-size: 13px;
    color: var(--magenta);
}
.status-effect.status-cursed { background: #3b1d2e; color: #fff; }
.status-effect.status-cursed .status-duration { color: #fff; }

/* ===========================
   ACTION BAR: one row of equal height - who is around, the fight (Find, or the
   search in progress), practice
   =========================== */
.lobby-actions { align-items: stretch; }
.lobby-actions > * { min-height: 64px; }
.lobby-actions .lobby-pulse { align-self: stretch; align-content: center; }
.lobby-actions .lobby-practice { display: inline-flex; align-items: center; }

/* The search: radar, title and what the matchmaker is doing, the wait, cancel */
.lobby-searching {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 8px 12px 8px 14px;
    background: var(--zap);
    border: var(--line);
    box-shadow: var(--drop);
    transform: rotate(-0.5deg);
    flex-wrap: nowrap;
}
.lobby-searching[hidden] { display: none; }

.search-radar {
    position: relative;
    width: 46px;
    height: 46px;
    border: 3px solid var(--ink);
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--ink) 0 3px, transparent 4px),
        radial-gradient(circle, transparent 0 13px, rgba(0, 0, 0, 0.25) 14px 15px, transparent 16px),
        #fff;
    overflow: hidden;
}
.search-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(232, 37, 37, 0.65), rgba(232, 37, 37, 0) 70deg, transparent 70deg);
    animation: radarSweep 1.6s linear infinite;
}
.search-radar::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 3px solid var(--pow);
    border-radius: 50%;
    animation: radarPing 1.6s ease-out infinite;
}

.search-text { display: grid; gap: 2px; min-width: 0; }
.search-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1;
    white-space: nowrap;
}
.search-title::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: searchDots 1.2s steps(4) infinite; }
.search-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-family: var(--font-hand); font-size: 15px; }
.search-deck strong {
    padding: 0 6px;
    background: #fff;
    border: 2px solid var(--ink);
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.03em;
}
.search-hint { color: #5a4a00; }
.search-time {
    min-width: 3.2ch;
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.search-cancel { padding: 8px 18px 5px; }

@keyframes radarSweep { to { transform: rotate(360deg); } }
@keyframes radarPing { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes searchDots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* Phones: the search fills the pinned bar - a smaller radar, no hint line */
@media (max-width: 520px), (max-height: 560px) {
    .lobby-actions > * { min-height: 0; }
    .lobby-actions .lobby-pulse { min-height: 0; }
    .lobby-searching { gap: 8px; padding: 6px 8px; transform: none; box-shadow: none; }
    .search-radar { width: 32px; height: 32px; }
    .search-title { font-size: 18px; }
    .search-hint { display: none; }
    .search-time { font-size: 24px; }
    .search-cancel { padding: 5px 10px 2px; }
}
@media (prefers-reduced-motion: reduce) {
    .search-sweep, .search-radar::after, .search-title::after { animation: none; }
    .search-title::after { content: "..."; }
}
/* Desktop: the bar never wraps; the search panel takes the room left and its hint
   gives way (ellipsis) before it can touch the timer */
@media (min-width: 521px) and (min-height: 561px) {
    .lobby-actions { flex-wrap: nowrap; }
    .lobby-actions .lobby-searching { flex: 1 1 auto; min-width: 0; }
    .lobby-actions .lobby-pulse, .lobby-actions .lobby-practice { flex: none; }
}
.search-sub { flex-wrap: nowrap; min-width: 0; }
.search-deck { flex: none; }
.search-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The search panel fits its own width (the lobby column can be narrow): compact
   below ~460px; the title never runs over the timer */
.lobby-searching { container: search / inline-size; }
.search-title { overflow: hidden; text-overflow: ellipsis; }
/* Compact panels say it short: "Searching" */
.search-short { display: none; }
@container search (max-width: 400px) {
    .search-long { display: none; }
    .search-short { display: inline; }
    .search-radar { width: 34px; height: 34px; }
    .search-title { font-size: 18px; }
    .search-hint { display: none; }
    .search-time { font-size: 26px; }
    .search-cancel { padding: 6px 12px 3px; font-size: 18px; }
}
/* While searching, the search takes Practice's place (practice would end the search) */
.lobby-actions:has(.lobby-searching:not([hidden])) .lobby-practice { display: none; }
.search-title::after { width: 1.4em; }
.search-title { font-size: 22px; }

/* ===========================
   DECK EDITOR as an app view: the screen is filled exactly, each pane scrolls inside
   itself, and in the deck pane only the card list scrolls - the name, the counts and
   the actions (preset, auto-complete, clear, delete, save) are always in view
   =========================== */
#deckEditor .game-screen-body { display: flex; flex-direction: column; overflow: hidden; }
#deckEditor .editor-pane-tabs { flex: none; }
#deckEditor .editor-layout { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
#deckEditor .editor-pool { min-height: 0; overflow-y: auto; }
#deckEditor .editor-deck {
    position: static;
    align-self: stretch;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    container: deckpane / inline-size;
}
#deckEditor .editor-deck > * { flex: none; }
#deckEditor .editor-deck .editor-list { flex: 1 1 auto; min-height: 90px; max-height: none; margin-top: 0; overflow-y: auto; }
#deckEditor .editor-errors { max-height: 3.9em; overflow-y: auto; }
#deckEditor .editor-status:empty { display: none; }

/* A compact top: title and name, then one short row - cards, epithets + verbs, curve */
#deckEditor .editor-heading { margin: 0; font-size: 20px; }
#deckEditor .editor-name { font-size: 18px; padding: 5px 10px; }
#deckEditor .editor-meters { grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; align-items: stretch; }
#deckEditor .editor-counter,
#deckEditor .editor-verbs { padding: 4px 10px; gap: 0; }
#deckEditor .editor-counter strong,
#deckEditor .editor-verbs strong { font-size: 24px; }
#deckEditor .editor-stat-label { font-size: 12px; }
#deckEditor .editor-curve-box { grid-column: auto; gap: 2px; padding-bottom: 14px; align-self: end; }
#deckEditor .editor-curve-title { font-size: 11px; }
#deckEditor .editor-meters .editor-curve { height: 34px; gap: 3px; }
#deckEditor .curve-label { bottom: -14px; font-size: 10px; }
@container deckpane (max-width: 420px) {
    #deckEditor .editor-meters { grid-template-columns: 1fr 1fr; }
    #deckEditor .editor-curve-box { grid-column: 1 / -1; }
}

/* ===========================
   SUBTITLES: a line said in a pack's language (Japanese, cards-ja.js) with the same
   line in the interface language under it (GameUI.addSubtitle), and a card's word
   with its meaning (SpellText.gloss)
   =========================== */
.line-subtitle {
    display: block;
    margin-top: 4px;
    font-family: var(--font-body);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.25;
    color: var(--ink);
    text-shadow: none;
    text-transform: none;
}
.preview-text .line-subtitle {
    display: block;
    width: fit-content;
    max-width: 100%;
    padding: 1px 8px;
    background: rgba(255, 255, 255, 0.85);
    border-left: 3px solid var(--ink);
}
.log-entry .line-subtitle { margin-top: 2px; font-size: 12px; font-weight: 500; color: #555; }
.hand-sentence-text .line-subtitle { margin-top: 1px; font-size: 12px; color: #444; }

/* The burst: the Japanese words big, the subtitle under them on a caption bar */
.burst-lines { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.burst-subtitle {
    max-width: 100%;
    padding: 4px 12px 2px;
    background: var(--ink);
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.25;
    color: #fff;
    text-shadow: none;
    text-transform: none;
}

/* A card's word over its meaning, both centred in the text area */
.card-text.has-gloss {
    container-type: inline-size;
    /* clear of the damage icon in the top corner */
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 12px;             /* below the rarity badge, which overlaps the box's top */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;   /* centring would push a tall word up under the rarity badge */
    gap: 2px;
    text-align: center;
}
.card-word {
    display: block;
    width: 100%;
    line-height: 1.05;
    letter-spacing: 0;
    text-wrap: balance;            /* even lines: no single kana left on the last one */
}

/* A card's meaning under its word */
.card-gloss {
    display: block;
    margin-top: 3px;
    font-family: var(--font-body);
    font-size: max(9px, 0.5em);
    font-weight: 600;
    /* one line on the face; the whole meaning is in the card viewer */
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0;
    line-height: 1.1;
    text-transform: none;
    opacity: 0.75;
}
.slot-card-text .card-gloss { font-size: 9px; margin-top: 1px; }

/* Japanese words: no letter spacing (kana are set solid), slightly smaller - the
   Japanese face's glyphs are full squares, Bangers' are narrow */
:lang(ja).card-text, .card:lang(ja) .card-text, .preview-text:lang(ja), .spell-burst:lang(ja),
.hand-sentence-text:lang(ja), .slot-card-text:lang(ja), .slot-card:lang(ja) .slot-card-text {
    letter-spacing: 0;
}
.spell-burst:lang(ja) { font-size: 40px; }
.preview-text:lang(ja) { font-size: 28px; }
@media (max-width: 760px) {
    .spell-burst:lang(ja) { font-size: 28px; }
    .burst-subtitle { font-size: 14px; }
    .preview-text:lang(ja) { font-size: 20px; }
}

/* ===========================
   CARD VIEWER (ui/card-viewer.js): one card full screen. The large card is a comic
   panel in its type's colour - the word in a speech bubble shaped by its delivery,
   the meaning in a caption box; beside it (under it on phones) the sheet of what it
   does. The card sizes itself with container units (no measuring in JS).
   =========================== */
.card-viewer {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
}
.card-viewer[hidden] { display: none; }
body.card-viewer-open { overflow: hidden; }

.cv-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 16, 46, 0.9) var(--halftone);
    background-size: 6px 6px;
    animation: cvFade 160ms ease-out;
}

.cv-frame {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
    gap: clamp(20px, 3vw, 40px);
    width: min(1120px, calc(100vw - 150px));
    height: min(740px, calc(100vh - 80px));
    animation: cvRise 200ms ease-out;
}

/* ---- the large card ---- */
.cv-stage {
    container-type: size;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
}
.cv-hero {
    --type: #888;
    --gem: #fff;
    container-type: inline-size;
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    width: min(100cqw, calc(100cqh * 5 / 7));
    aspect-ratio: 5 / 7;
    background: var(--paper);
    border: 5px solid var(--ink);
    box-shadow: 10px 10px 0 var(--ink);
    transform: rotate(-1.2deg);
}
.cv-hero.type-tone { --type: #7b3fc4; }
.cv-hero.type-opener { --type: var(--cyan); }
.cv-hero.type-intensifier { --type: var(--magenta); }
.cv-hero.type-epithet { --type: #f2b705; }
.cv-hero.type-target, .cv-hero.type-bloodline, .cv-hero.type-identity { --type: var(--go); }
.cv-hero.type-anatomy { --type: var(--orange); }
.cv-hero.type-action { --type: var(--pow); }
.cv-hero.type-amplifier { --type: #2f5fd0; }
.cv-hero.type-resolution { --type: #0e9a8f; }
.cv-hero.type-curse { --type: #222; }
.cv-hero.rarity-uncommon { --gem: var(--go); }
.cv-hero.rarity-rare { --gem: var(--cyan); }
.cv-hero.rarity-epic { --gem: var(--magenta); }
.cv-hero.rarity-legendary { --gem: var(--zap); }
.cv-stage > .enter-next { animation: cvSlideNext 220ms ease-out; }
.cv-stage > .enter-prev { animation: cvSlidePrev 220ms ease-out; }

.cv-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2cqi;
    padding: 2.4cqi 3cqi 2cqi 17cqi;
    background: var(--type);
    border-bottom: 5px solid var(--ink);
}
.cv-hero-type {
    font-family: var(--font-display);
    font-size: 8cqi;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #fff;
    text-shadow: var(--outline-text);
}
.cv-hero-gem {
    padding: 1cqi 2.4cqi 0.4cqi;
    background: var(--gem);
    border: 3px solid var(--ink);
    font-family: var(--font-display);
    font-size: 4.2cqi;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    transform: rotate(3deg);
}
.cv-hero.rarity-uncommon .cv-hero-gem, .cv-hero.rarity-rare .cv-hero-gem, .cv-hero.rarity-epic .cv-hero-gem { color: #fff; text-shadow: var(--outline-text-thin); }
.cv-hero-cost {
    position: absolute;
    top: -4cqi;
    left: -4cqi;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 18cqi;
    height: 18cqi;
    background: var(--cyan);
    border: 5px solid var(--ink);
    border-radius: 50%;
    box-shadow: 4px 4px 0 var(--ink);
    font-family: var(--font-display);
    font-size: 10cqi;
    line-height: 1;
    color: #fff;
    text-shadow: var(--outline-text);
}

/* The panel: the type's colour in halftone, the word said in a bubble */
.cv-hero-panel {
    position: relative;
    display: grid;
    place-items: center;
    margin: 4cqi 4cqi 0;
    padding: 6cqi 5cqi 12cqi;
    background:
        radial-gradient(rgba(0, 0, 0, 0.22) 1.4px, transparent 1.9px) 0 0 / 9px 9px,
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.35), transparent 60%),
        var(--type);
    border: 4px solid var(--ink);
    overflow: hidden;
}
.cv-bubble {
    position: relative;
    display: grid;
    place-items: center;
    max-width: 100%;
    min-width: 46%;
    padding: 7cqi 8cqi;
    background: #fff;
    border: 4px solid var(--ink);
    border-radius: 50% / 46%;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.85);
}
/* the tail: an ink wedge, and a white one inside it that opens the bubble's border */
.cv-bubble::before,
.cv-bubble::after {
    content: '';
    position: absolute;
    clip-path: polygon(0 0, 100% 0, 6% 100%);
}
.cv-bubble::before {
    top: calc(100% - 5px);
    left: 24%;
    width: 12cqi;
    height: 11cqi;
    background: var(--ink);
}
.cv-bubble::after {
    top: calc(100% - 9px);
    left: calc(24% + 5px);
    width: calc(12cqi - 13px);
    height: calc(11cqi - 7px);
    background: #fff;
}
.cv-bubble-word {
    font-family: var(--font-display);
    line-height: 1.02;
    letter-spacing: 0.03em;
    text-align: center;
    color: var(--ink);
    overflow-wrap: break-word;
    text-wrap: balance;
}
.cv-bubble-word:lang(tr) { text-transform: uppercase; }
.cv-bubble-word:lang(ja) { letter-spacing: 0; line-height: 1.12; }
/* Delivery: a shout bursts, menace is dark, calm is soft, mockery leans, unhinged shakes */
.cv-bubble[data-tone="shout"] {
    border: none;
    border-radius: 0;
    padding: 12cqi 13cqi;
    background: var(--ink);
    box-shadow: none;
    clip-path: polygon(50% 0%, 59% 18%, 79% 6%, 74% 27%, 98% 24%, 82% 43%, 100% 57%, 78% 62%, 88% 88%, 64% 75%, 52% 100%, 42% 77%, 18% 93%, 25% 68%, 0% 63%, 19% 49%, 3% 27%, 27% 30%, 22% 6%, 41% 20%);
}
.cv-bubble[data-tone="shout"]::before {
    content: '';
    position: absolute;
    inset: 4px;
    width: auto;
    height: auto;
    z-index: -0;
    background: var(--zap);
    clip-path: inherit;
}
.cv-bubble[data-tone="shout"] .cv-bubble-word { position: relative; }
.cv-bubble[data-tone="shout"]::after,
.cv-bubble[data-tone="menace"]::after { display: none; }   /* a burst has no tail; a dark bubble's tail is all ink */
.cv-bubble[data-tone="menace"] { background: var(--ink); border-color: var(--ink); border-radius: 12% / 18%; }
.cv-bubble[data-tone="menace"] .cv-bubble-word { color: #fff; font-family: var(--font-tone-menace); }
.cv-bubble[data-tone="calm"] { border-style: dashed; }
.cv-bubble[data-tone="calm"] .cv-bubble-word { font-family: var(--font-tone-calm); }
.cv-bubble[data-tone="mock"] { transform: rotate(-4deg); }
.cv-bubble[data-tone="mock"] .cv-bubble-word { font-family: var(--font-tone-mock); }
.cv-bubble[data-tone="unhinged"] { border-radius: 38% 62% 44% 56% / 54% 40% 60% 46%; }
.cv-bubble[data-tone="unhinged"] .cv-bubble-word { font-family: var(--font-tone-unhinged); }

/* The meaning: a narration caption in the panel's corner */
.cv-caption {
    position: absolute;
    right: 3cqi;
    bottom: 3cqi;
    max-width: 78%;
    padding: 1.4cqi 3cqi 1cqi;
    background: var(--zap);
    border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    font-family: var(--font-hand);
    font-size: 5.4cqi;
    line-height: 1.1;
    color: var(--ink);
}

.cv-hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.4cqi;
    padding: 4cqi 4cqi 2cqi;
}
.cv-stat {
    display: inline-flex;
    align-items: center;
    gap: 1.2cqi;
    padding: 1cqi 2.6cqi 0.6cqi;
    background: var(--ch, #fff);
    border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    font-family: var(--font-display);
    font-size: 7cqi;
    line-height: 1;
    color: #fff;
    text-shadow: var(--outline-text-thin);
}
.cv-stat-icon { font-size: 0.7em; text-shadow: none; }
.cv-stat.ch-moral { --ch: var(--ch-moral); }
.cv-stat.ch-honor { --ch: var(--ch-honor); }
.cv-stat.ch-shame { --ch: var(--ch-shame); }
.cv-stat.ch-will { --ch: var(--ch-will); }
.cv-stat.ch-fury { --ch: var(--ch-fury); }
.cv-stat.ch-fear { --ch: var(--ch-fear); }
.cv-stat-mult { --ch: var(--ink); }
.cv-stat-none { --ch: var(--paper-shade); color: var(--ink); text-shadow: none; font-size: 5cqi; }

.cv-hero-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2cqi;
    padding: 1cqi 4cqi 3cqi;
    font-family: var(--font-display);
    font-size: 4.4cqi;
    letter-spacing: 0.05em;
    color: var(--ink);
}
.cv-hero-pack { display: inline-flex; align-items: center; gap: 1.6cqi; }
.cv-hero-pack .flag { width: 6cqi; }
.cv-hero-align { font-size: 6cqi; }

/* ---- the sheet ---- */
.cv-sheet {
    align-self: center;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px 24px 26px;
    background: var(--paper);
    border: var(--line-heavy);
    box-shadow: var(--drop-heavy);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink);
    scrollbar-width: thin;
}
.cv-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    padding-bottom: 14px;
    border-bottom: var(--line);
}
.cv-kind { grid-column: 1; margin: 0; font-size: 15px; }
.cv-kind strong { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: 0.04em; margin-right: 2px; }
.cv-chips { grid-column: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.cv-chip {
    padding: 2px 8px 0;
    border: 2px solid var(--ink);
    background: #fff;
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.cv-chip.gem-uncommon { background: var(--go); color: #fff; }
.cv-chip.gem-rare { background: var(--cyan); color: #fff; }
.cv-chip.gem-epic { background: var(--magenta); color: #fff; }
.cv-chip.gem-legendary { background: var(--zap); }
.cv-say {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: 9px 14px 6px;
    background: var(--cyan);
    border: var(--line);
    box-shadow: var(--drop-small);
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.05em;
    color: #fff;
    text-shadow: var(--outline-text-thin);
    cursor: pointer;
}
.cv-say:active { transform: translate(2px, 2px); box-shadow: none; }

.cv-section { padding-top: 16px; }
.cv-heading {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0.05em;
}
.cv-line { margin: 0; }
.cv-line + .cv-line, .cv-effect + .cv-line { margin-top: 6px; }
.cv-effect {
    padding: 9px 12px 10px;
    background: var(--zap);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
}
.cv-effect + .cv-effect { margin-top: 8px; }
.cv-effect-name { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 400; letter-spacing: 0.05em; }

.cv-damage { display: grid; gap: 4px; }
.cv-dmg {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 2.4em;
    grid-template-areas: "name scale value" "note note note";
    align-items: baseline;
    column-gap: 8px;
    padding: 7px 10px 8px;
    background: #fff;
    border: 2px solid var(--ink);
    border-left: 8px solid var(--ch, var(--ink));
}
.cv-dmg.ch-moral { --ch: var(--ch-moral); }
.cv-dmg.ch-honor { --ch: var(--ch-honor); }
.cv-dmg.ch-shame { --ch: var(--ch-shame); }
.cv-dmg.ch-will { --ch: var(--ch-will); }
.cv-dmg.ch-fury { --ch: var(--ch-fury); }
.cv-dmg.ch-fear { --ch: var(--ch-fear); }
.cv-dmg.is-mult { background: var(--paper-shade); }
.cv-dmg-name { grid-area: name; font-weight: 800; color: var(--ink); }
.cv-dmg-icon { margin-right: 6px; }
.cv-dmg-scale { grid-area: scale; font-size: 13px; font-weight: 700; color: #666; }
.cv-dmg-value { grid-area: value; justify-self: end; font-family: var(--font-display); font-size: 24px; line-height: 1; color: var(--ink); }
.cv-dmg-note { grid-area: note; margin-top: 2px; font-size: 13px; line-height: 1.35; color: #4a4a4a; }

.cv-list { margin: 0; padding-left: 20px; }
.cv-list li + li { margin-top: 4px; }
.cv-list li.is-good::marker { color: var(--go); }
.cv-list li.is-bad::marker { color: var(--pow); }
.cv-path, .cv-path strong { color: var(--ink); }
.cv-path strong { font-family: var(--font-display); font-size: 19px; font-weight: 400; }
.cv-twins { display: grid; gap: 6px; }
.cv-twin {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "flag text" "flag sub";
    align-items: center;
    column-gap: 10px;
    padding: 6px 10px;
    background: #fff;
    border: 2px solid var(--ink);
}
.cv-twin.is-this { background: #fff6c7; border-width: 3px; }
.cv-twin .flag { grid-area: flag; }
.cv-twin-text { grid-area: text; font-family: var(--font-display); font-size: 19px; line-height: 1.1; letter-spacing: 0.03em; }
.cv-twin-text:lang(tr) { text-transform: uppercase; }
.cv-twin-text:lang(ja) { letter-spacing: 0; }
.cv-twin-sub { grid-area: sub; font-size: 13px; color: #555; }
.cv-progress { display: grid; gap: 6px; }

/* ---- close, previous, next, count: at the screen's edges ---- */
.cv-close, .cv-nav {
    position: fixed;
    z-index: 2;
    display: grid;
    place-items: center;
    background: var(--zap);
    border: var(--line);
    box-shadow: var(--drop-small);
    font-family: var(--font-display);
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
}
.cv-close { top: 16px; right: 16px; width: 48px; height: 48px; font-size: 34px; }
.cv-nav { top: 50%; width: 52px; height: 72px; margin-top: -36px; font-size: 52px; padding-bottom: 6px; }
.cv-nav[hidden] { display: none; }
.cv-prev { left: 16px; }
.cv-next { right: 16px; }
.cv-close:hover, .cv-nav:hover { background: #fff; }
.cv-close:active, .cv-nav:active { transform: translate(2px, 2px); box-shadow: none; }
.cv-close:focus-visible, .cv-nav:focus-visible, .cv-say:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.cv-count {
    position: fixed;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: 0.1em;
    color: #fff;
    text-shadow: var(--outline-text-thin);
}

/* The inspect button on a card shown elsewhere (deck editor) */
.card-inspect {
    position: absolute;
    left: -6px;
    bottom: -6px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    background: var(--zap);
    border: 2px solid var(--ink);
    border-radius: 50%;
    box-shadow: 2px 2px 0 var(--ink);
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1;
    color: var(--ink);
    cursor: zoom-in;
}
.card-inspect:hover, .card-inspect:focus-visible { background: #fff; outline: none; }
.record-row[role="button"], .card-tile[role="button"] { cursor: zoom-in; }

@keyframes cvFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cvRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes cvSlideNext { from { opacity: 0; transform: translateX(40px) rotate(2deg); } to { opacity: 1; transform: rotate(-1.2deg); } }
@keyframes cvSlidePrev { from { opacity: 0; transform: translateX(-40px) rotate(-4deg); } to { opacity: 1; transform: rotate(-1.2deg); } }

/* Phones: the card on top, the sheet scrolls under it */
@media (max-width: 760px) {
    .cv-frame {
        grid-template-columns: 1fr;
        grid-template-rows: 44vh minmax(0, 1fr);
        gap: 18px;
        width: 100vw;
        height: 100dvh;
        padding: 64px 14px 14px;
    }
    .cv-sheet { align-self: stretch; padding: 16px; box-shadow: var(--drop); }
    .cv-hero { border-width: 4px; box-shadow: 6px 6px 0 var(--ink); }
    .cv-close { top: 10px; right: 10px; width: 42px; height: 42px; font-size: 30px; }
    .cv-nav { top: calc(64px + 22vh); width: 40px; height: 56px; margin-top: -28px; font-size: 40px; }
    .cv-prev { left: 8px; }
    .cv-next { right: 8px; }
    .cv-count { top: 20px; bottom: auto; }
}
/* Phones on their side: the card left, the sheet right */
@media (max-height: 540px) and (min-width: 600px) {
    .cv-frame { grid-template-columns: 40% 1fr; grid-template-rows: 1fr; width: calc(100vw - 120px); height: calc(100dvh - 24px); padding: 0; }
    .cv-close { top: 8px; right: 8px; }
    .cv-count { bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .cv-backdrop, .cv-frame, .cv-stage > .enter-next, .cv-stage > .enter-prev { animation: none; }
}

/* A Japanese word fitted to the card: its squares across the text area (--chars per
   line), never above the card's own size */
.card-word.is-fit { font-size: min(0.8em, calc(99cqi / var(--chars, 4))); }

/* The deck list: a card's meaning under its word, in the interface language */
.editor-row-gloss {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===========================
   HAND HINT: how to open a card's details - a tilted tag opposite the hand's
   caption, a mouse with its right button lit (or a press, on touch screens)
   =========================== */
.hand-hint {
    position: absolute;
    top: -17px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 11px 3px 7px;
    background: #fff;
    border: var(--line);
    box-shadow: var(--drop-small);
    font-family: var(--font-hand);
    font-size: 15px;
    line-height: 1.1;
    color: var(--ink);
    white-space: nowrap;
    transform: rotate(1.5deg);
    pointer-events: none;
    animation: hintIn 400ms ease-out 1.2s both;
}
.hand-hint[hidden] { display: none; }
.hand-hint svg { flex-shrink: 0; width: 18px; height: 24px; }
.hand-hint .hint-touch { width: 22px; height: 22px; }
.hand-hint .hint-mouse path[fill="#e8262b"] { animation: hintClick 1.6s ease-in-out 2s infinite; }
.hint-touch, .hint-text-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
    .hint-mouse, .hint-text-mouse { display: none; }
    .hint-touch, .hint-text-touch { display: inline; }
}
body.is-spectating .hand-hint { display: none; }
@keyframes hintIn { from { opacity: 0; transform: translateY(6px) rotate(1.5deg); } to { opacity: 1; transform: rotate(1.5deg); } }
@keyframes hintClick { 0%, 70%, 100% { fill: #e8262b; } 80% { fill: #ffd21f; } }
@media (max-width: 760px) {
    .hand-hint { top: -15px; right: 8px; font-size: 13px; padding: 2px 8px 2px 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .hand-hint, .hand-hint .hint-mouse path { animation: none; }
}

/* ===========================
   LOBBY, FULL SCREEN (wide screens, once in the lobby): an app shell that fills the
   window - title and tagline in a header row; the fighter card, the deck choice with
   the fight bar under it, and the live fights side by side. Columns scroll on their
   own; the page never does.
   =========================== */
.live-why { margin: -2px 0 10px; font-size: 15px; line-height: 1.3; color: #444; }

@media (min-width: 1200px) and (min-height: 700px) {
    .lobby-screen:has(.lobby-layout:not([hidden])) { padding: 16px; overflow: hidden; }
    .lobby-screen:has(.lobby-layout:not([hidden])) .lobby-panel {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "title tagline"
            "layout layout"
            "footer footer";
        column-gap: 26px;
        width: min(1880px, 100%);
        height: calc(100dvh - 32px);
        margin: 0 auto;
        padding: 14px 22px 12px;
    }
    .lobby-screen:has(.lobby-layout:not([hidden])) .lobby-title {
        grid-area: title;
        position: static;
        align-self: center;
        font-size: 64px;
        transform: rotate(-3deg) translateY(-2px);
    }
    .lobby-screen:has(.lobby-layout:not([hidden])) .lobby-tagline {
        grid-area: tagline;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 18px;
        align-self: center;
        margin: 0;
        text-align: left;
        font-size: 26px;
    }
    .lobby-screen:has(.lobby-layout:not([hidden])) .lobby-footer { grid-area: footer; }
    .lobby-screen:has(.lobby-layout:not([hidden])) .lobby-footer:not(:has(:not([hidden]):not(:empty))) { display: none; }

    .lobby-layout:not([hidden]) {
        grid-area: layout;
        min-height: 0;
        margin: 14px 0 0;
        gap: 18px 22px;
        grid-template-columns: 300px minmax(0, 1fr) 300px;
        /* the fight bar sits right under the deck choice; the deck panel shrinks and
           scrolls only when the window is short */
        grid-template-rows: minmax(0, max-content) auto minmax(0, 1fr);
        grid-template-areas:
            "card decks live"
            "card actions live"
            "card . live";
        align-items: stretch;
    }
    .lobby-layout .fighter-card,
    .lobby-layout .live-panel,
    .lobby-layout .lobby-decks {
        min-height: 0;
        max-height: 100%;
        /* vertical only: buttons' drop shadows and tilts must not open a sideways scroll */
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--ink) transparent;
    }
    .lobby-layout .fighter-card::-webkit-scrollbar,
    .lobby-layout .live-panel::-webkit-scrollbar,
    .lobby-layout .lobby-decks::-webkit-scrollbar { width: 8px; }
    .lobby-layout .fighter-card::-webkit-scrollbar-thumb,
    .lobby-layout .live-panel::-webkit-scrollbar-thumb,
    .lobby-layout .lobby-decks::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 0; }
    .lobby-layout .fighter-card::-webkit-scrollbar-track,
    .lobby-layout .live-panel::-webkit-scrollbar-track,
    .lobby-layout .lobby-decks::-webkit-scrollbar-track { background: transparent; }
    .lobby-layout .fighter-card { grid-area: card; align-self: stretch; }
    .lobby-layout .lobby-actions { justify-content: flex-start; }
    .lobby-layout .lobby-decks { grid-area: decks; align-self: stretch; }
    .lobby-layout .live-panel { grid-area: live; align-self: stretch; }
    .lobby-layout .lobby-actions { grid-area: actions; margin: 0; }
    .lobby-layout .deck-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
}

/* ===========================
   REALMS: card pack languages open by level (core/progression.js REALMS). A locked
   pill is greyed with its level on a tag; an openable one invites a tap.
   =========================== */
.set-pill { position: relative; }
.set-pill.realm-locked { background: var(--paper-shade); cursor: not-allowed; }
.set-pill.realm-locked .flag, .set-pill.realm-locked .set-pill-words { filter: grayscale(1); opacity: 0.55; }
.set-pill-lock {
    position: absolute;
    top: -10px;
    right: -8px;
    padding: 1px 7px 0;
    background: var(--ink);
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.05em;
    color: var(--zap);
    transform: rotate(4deg);
}
.set-pill.realm-openable:not(.is-picked) { border-style: dashed; }
.realm-hint { margin: 6px 0 0; font-size: 15px; }
.pack-realm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    background: #fff;
    border: 2px solid var(--ink);
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--ink);
}
.pack-realm .flag { width: 24px; height: 16px; }

/* The fight bar: one even row - every box the same height, square, borders and
   shadows matching (the pulse, Find or the search, practice) */
.lobby-actions { align-items: stretch; }
.lobby-actions > .lobby-pulse,
.lobby-actions > .lobby-searching,
.lobby-actions > .lobby-find,
.lobby-actions > .lobby-practice {
    min-height: 64px;
    margin: 0;
    border: var(--line);
    box-shadow: var(--drop);
    transform: none;
}
.lobby-actions > .lobby-pulse { align-items: center; align-content: center; }
.lobby-actions > .lobby-searching { flex: 1 1 340px; }
@media (max-width: 520px), (max-height: 560px) {
    .lobby-actions > .lobby-pulse,
    .lobby-actions > .lobby-searching,
    .lobby-actions > .lobby-find,
    .lobby-actions > .lobby-practice { min-height: 0; box-shadow: none; }
}

/* Deck editor: the plan for auto-complete, and the rows it just added */
.editor-plan { max-width: 140px; }
.editor-row.is-added { animation: rowAdded 2.4s ease-out; }
@keyframes rowAdded { 0%, 40% { background: #fff3a8; box-shadow: inset 6px 0 0 var(--go); } 100% { background: transparent; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .editor-row.is-added { animation: none; background: #fff3a8; } }

/* ===========================
   RESULT: the cards this match taught (match/board.js showLearned) - a bar per card
   from before to after, unlocked ones stamped
   =========================== */
.victory-learned { display: grid; gap: 8px; margin: 0 0 18px; text-align: left; }
.victory-learned[hidden] { display: none; }
.victory-screen.active .victory-learned { animation: vsFade 0.4s 1.4s both; }
.vl-title {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0;
    font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: 0.04em;
}
.vl-unlocked {
    padding: 1px 10px 0; background: var(--go); border: 2px solid var(--ink); box-shadow: var(--drop-small);
    font-size: 17px; color: #fff; text-shadow: var(--outline-text-thin); transform: rotate(-3deg);
}
.vl-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
.vl-card {
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(80px, 1fr) auto; align-items: center; gap: 10px;
    padding: 6px 10px; background: #fff; border: 2px solid var(--ink); border-left-width: 6px; cursor: zoom-in;
}
.vl-card.gem-row-uncommon { border-left-color: var(--go); }
.vl-card.gem-row-rare { border-left-color: var(--cyan); }
.vl-card.gem-row-epic { border-left-color: var(--magenta); }
.vl-card.gem-row-legendary { border-left-color: var(--zap); }
.vl-card.is-unlocked { background: #e7f8ec; }
.vl-card:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.victory-screen.active .vl-card { animation: vsTile 0.4s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(1.6s + var(--i) * 80ms); }
.vl-words { display: grid; min-width: 0; }
.vl-word { font-family: var(--font-display); font-size: 19px; font-weight: 400; line-height: 1.05; letter-spacing: 0.03em; overflow-wrap: anywhere; }
.vl-word:lang(tr) { text-transform: uppercase; }
.vl-word:lang(ja) { letter-spacing: 0; }
.vl-gloss { font-family: var(--font-body); font-size: 12px; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-bar { position: relative; height: 12px; background: var(--paper-shade); border: 2px solid var(--ink); overflow: hidden; }
.vl-bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--go); transition: width 0.9s cubic-bezier(.3, .9, .3, 1); }
.vl-bar-was { position: absolute; inset: 0 auto 0 0; border-right: 2px solid var(--ink); background: rgba(0, 0, 0, 0.18); }
.vl-count { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.03em; white-space: pre; }
.vl-stamp {
    padding: 1px 8px 0; background: var(--zap); border: 2px solid var(--ink);
    font-family: var(--font-display); font-size: 15px; letter-spacing: 0.04em; transform: rotate(-4deg);
}
.victory-screen.active .vl-stamp { animation: vsStamp 0.45s cubic-bezier(.3, 1.7, .5, 1) both; animation-delay: calc(2.4s + var(--i) * 120ms); }
.vl-more { margin: 0; font-family: var(--font-hand); font-size: 16px; }
@media (max-width: 520px) {
    .vl-card { grid-template-columns: minmax(0, 1fr) auto; }
    .vl-bar { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
    .vl-bar-fill { transition: none; }
    .victory-screen.active .vl-card, .victory-screen.active .vl-stamp, .victory-screen.active .victory-learned { animation: none; }
}

/* ===========================
   DECK EDITOR, FULL SCREEN with bigger cards: the editor uses the whole window (a
   slim margin), the deck pane keeps a fixed comfortable width, and the pool's cards
   are scaled up as a whole (zoom - the face stays the same card, only larger),
   stepped by window size
   =========================== */
#deckEditor { --pool-zoom: 1.15; padding: 8px; }
#deckEditor .game-screen-frame { width: 100%; }
#deckEditor .editor-layout { grid-template-columns: minmax(0, 1fr) clamp(340px, 26vw, 440px); gap: 14px; }
#deckEditor .editor-pool-grid {
    grid-template-columns: repeat(auto-fill, minmax(calc(112px * var(--pool-zoom)), 1fr));
    gap: calc(22px * var(--pool-zoom)) 14px;
}
#deckEditor .editor-pool-grid .card { zoom: var(--pool-zoom); }
#deckEditor .editor-card .editor-copies { font-size: 15px; }
@media (min-width: 1280px) and (min-height: 760px) { #deckEditor { --pool-zoom: 1.3; } }
@media (min-width: 1600px) and (min-height: 900px) { #deckEditor { --pool-zoom: 1.5; } }
@media (min-width: 2200px) and (min-height: 1200px) { #deckEditor { --pool-zoom: 1.8; } }
@media (max-width: 760px) {
    #deckEditor { --pool-zoom: 1; padding: 0; }
    #deckEditor .editor-layout { grid-template-columns: 1fr; }
}
/* The details button: top-left corner (the cost disc lives bottom-left) */
.editor-card .card-inspect { top: -9px; left: -9px; bottom: auto; }
/* The deck pane's actions share the row: selects get room for their words, buttons
   keep theirs on one line */
#deckEditor .editor-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#deckEditor .editor-actions > * { flex: 1 1 auto; white-space: nowrap; }
#deckEditor .editor-actions .screen-select { flex: 1 1 150px; min-width: 130px; }
#deckEditor .editor-actions .editor-save { flex: 2 1 auto; }
/* Phones: one pane at a time (the tabs) - as specific as the app-view rules above */
@media (max-width: 760px) {
    #deckEditor .editor-layout[data-pane="cards"] .editor-deck,
    #deckEditor .editor-layout[data-pane="deck"] .editor-pool { display: none; }
}

/* Recent fights under the live ones (lobby-screen.js renderRecent) */
.recent-title { margin: 14px 0 6px; font-family: var(--font-display); font-size: 19px; font-weight: 400; letter-spacing: 0.04em; }
.recent-title[hidden] { display: none; }
.recent-match { background: var(--paper-shade); }
.recent-match .is-winner .live-name { color: var(--go); }

/* Hand cards: the meaning under the word stays in the text area, clear of the stats */
.cards-container .card .card-text.has-gloss { overflow: hidden; }
.cards-container .card .card-gloss { font-size: 9px; }

/* Fighter card actions: one full-width row each - the label left, its count right,
   never wrapped (two per row squeezed "Deck editor" and its NEW badge) */
.fighter-actions { grid-template-columns: 1fr; gap: 10px; padding-right: 6px; }
.fighter-actions .fighter-action { grid-column: auto; align-items: center; min-width: 0; white-space: nowrap; }
.fighter-actions .fighter-action > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.fighter-action .new-count { flex: none; }

/* Every card face: the word and its meaning stay inside the text area, clear of the
   stat chips (long Turkish phrases ran into them) */
.card .card-text.has-gloss { overflow: hidden; max-height: 56%; }
.card .card-gloss { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Recent fights: whether it can still teach you (once per fight, never your own) */
.recent-note { padding: 0 6px; border: 2px solid var(--ink); font-family: var(--font-display); font-size: 12px; letter-spacing: 0.04em; background: var(--paper-shade); color: #555; }
.recent-note-yours { background: #d6effa; color: var(--ink); }

/* Recent fights you have watched: dimmed, a grey Watched tag; New cards in green */
.recent-match .live-meta { flex-wrap: wrap; }
.recent-match.is-watched { opacity: 0.72; }
.recent-match.is-watched:hover, .recent-match.is-watched:focus-within { opacity: 1; }
.recent-note-watched { background: #ddd; color: #333; }
.recent-note-learn { background: var(--go); color: #fff; text-shadow: var(--outline-text-thin); }

/* A recent fight: fighters on top; then a grid - arena and "8 turns, 11 min ago" on
   the left over the tags, the Watch button on the right; never wider than the panel */
.live-panel { overflow-x: hidden; }
.recent-match { display: grid; gap: 8px; min-width: 0; }
.recent-match .live-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "where watch" "facts watch" "tags watch";
    align-items: center;
    gap: 4px 10px;
}
.recent-match .live-arena { grid-area: where; justify-self: start; white-space: nowrap; }
.recent-match .recent-facts { grid-area: facts; font-size: 14px; color: #555; }
.recent-match .recent-tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 4px; }
.recent-match .live-watch { grid-area: watch; margin: 0; align-self: center; }
.recent-match .recent-note { white-space: nowrap; }

/* ===========================
   GAME SCREENS, ONE WIDTH: collection, deck editor, packs and rewards all fill the
   window with the same slim margin; the card grids share one card scale (stepped by
   window size) so a card is the same size on every page
   =========================== */
.game-screen { --pool-zoom: 1.15; padding: 8px; }
.game-screen .game-screen-frame { width: 100%; }
@media (min-width: 1280px) and (min-height: 760px) { .game-screen { --pool-zoom: 1.3; } }
@media (min-width: 1600px) and (min-height: 900px) { .game-screen { --pool-zoom: 1.5; } }
@media (min-width: 2200px) and (min-height: 1200px) { .game-screen { --pool-zoom: 1.8; } }
#collectionScreen .collection-grid {
    grid-template-columns: repeat(auto-fill, minmax(calc(112px * var(--pool-zoom)), 1fr));
    gap: calc(22px * var(--pool-zoom)) 14px;
}
#collectionScreen .collection-grid .card-tile { zoom: var(--pool-zoom); }
@media (max-width: 760px) {
    .game-screen { --pool-zoom: 1; padding: 0; }
}

/* The fight lists grow with their fights; the panel is the one scroller (themed ink
   bar, wide-screen lobby) - no box-in-a-box scrolling cut off mid-entry */
.live-list { max-height: none; overflow: visible; }
.live-panel { scrollbar-gutter: stable; }

/* ===========================
   FULL-ART CARD (js/ui/art-card.js) - layout C of tools/card-art/showcase.html: the
   art fills the card, the word in a speech balloon, the meaning as a subtitle, the
   rule as a keyword and a line, the damage as big tiles. Sized by its width; all
   inside is in container units (cqi), so one card reads the same at any size.
   =========================== */
.art-card {
    --type: #555;
    --gem: #fff;
    --kw: var(--zap);
    position: relative;
    display: block;
    width: var(--ac-w, 260px);
    aspect-ratio: 5 / 7;
    container-type: inline-size;
    font-family: var(--font-display);
    color: var(--ink);
    text-align: left;
    user-select: none;
    -webkit-user-select: none;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transform-style: preserve-3d;
    transition: transform 0.16s ease-out;
}

.art-card.type-tone { --type: #7b3fc4; }
.art-card.type-opener { --type: var(--cyan); }
.art-card.type-intensifier { --type: var(--magenta); }
.art-card.type-epithet { --type: #f2b705; }
.art-card:is(.type-target, .type-bloodline, .type-identity) { --type: var(--go); }
.art-card.type-anatomy { --type: var(--orange); }
.art-card.type-action { --type: var(--pow); }
.art-card.type-amplifier { --type: #2f5fd0; }
.art-card.type-resolution { --type: #0e9a8f; }
.art-card.type-curse { --type: #222; }
.art-card.type-defensive { --type: #4a6a8a; }
.art-card.rarity-uncommon { --gem: var(--go); }
.art-card.rarity-rare { --gem: var(--cyan); }
.art-card.rarity-epic { --gem: var(--magenta); }
.art-card.rarity-legendary { --gem: var(--zap); }

.ac-body {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--type);
    border: 4px solid var(--ink);
    box-shadow: 7px 7px 0 var(--ink);
}

.ac-art { position: absolute; inset: 0; background: #111; }
.ac-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.12) translate(var(--px, 0), var(--py, 0));
    transition: opacity 0.38s ease, transform 0.16s ease-out;
}

.ac-img.is-played { opacity: 0; }
.art-card.is-played .ac-img.is-idle { opacity: 0; }
.art-card.is-played .ac-img.is-played { opacity: 1; animation: acPunch 0.42s cubic-bezier(0.2, 1.6, 0.4, 1); }

@keyframes acPunch {
    from { transform: scale(1.3) translate(var(--px, 0), var(--py, 0)); }
}

.ac-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 20%, transparent 46%, rgba(0, 0, 0, 0.6) 66%, rgba(0, 0, 0, 0.92) 100%);
}

.ac-flash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 55%, #fff 0, rgba(255, 255, 255, 0.8) 18%, transparent 60%);
    opacity: 0;
}

.art-card.is-played .ac-flash { animation: acFlash 0.52s ease-out; }
@keyframes acFlash { from { opacity: 0.95; } to { opacity: 0; } }

/* Holo sheen, rare and better: a light band that follows the pointer */
.ac-holo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: color-dodge;
    opacity: 0;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 80, 200, 0.55) 38%, rgba(80, 220, 255, 0.55) 50%, rgba(255, 240, 120, 0.55) 62%, transparent 80%);
    background-size: 250% 250%;
    background-position: var(--hx, 50%) var(--hy, 50%);
    transition: opacity 0.2s;
}

.art-card:is(.rarity-rare, .rarity-epic, .rarity-legendary) .ac-holo { opacity: 0.35; }
.art-card.is-hover:is(.rarity-rare, .rarity-epic, .rarity-legendary) .ac-holo { opacity: 0.8; }

/* No art yet: the type's colour as a comic panel, rays behind a big balloon */
.art-card.is-bare .ac-art {
    background:
        radial-gradient(rgba(0, 0, 0, 0.22) 1.2px, transparent 1.7px) 0 0 / 7px 7px,
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.35), transparent 62%),
        var(--type);
}

.ac-burst {
    position: absolute;
    inset: 6% 2% 30%;
    background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.16) 0deg 8deg, transparent 8deg 16deg);
    -webkit-mask-image: radial-gradient(circle, #000 0 40%, transparent 70%);
    mask-image: radial-gradient(circle, #000 0 40%, transparent 70%);
}

.art-card.is-bare .ac-shade { background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.6) 100%); }

/* The parts float above the art */
.ac-cost {
    position: absolute;
    z-index: 5;
    top: -4cqi;
    left: -4cqi;
    display: grid;
    place-items: center;
    width: 19cqi;
    height: 19cqi;
    background: var(--cyan);
    border: 4px solid var(--ink);
    border-radius: 50%;
    box-shadow: 3px 3px 0 var(--ink);
    font-size: 10.5cqi;
    line-height: 1;
    color: #fff;
    text-shadow: var(--outline-text-thin);
    transform: translateZ(50px);
}

.ac-type {
    position: absolute;
    z-index: 3;
    top: 3cqi;
    right: 3.5cqi;
    display: flex;
    gap: 2cqi;
    align-items: center;
    font-size: 7.2cqi;
    letter-spacing: 0.05em;
    color: #fff;
    text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink);
    transform: translateZ(26px);
}

.ac-gem {
    padding: 0.6cqi 2.2cqi 0.1cqi;
    background: var(--gem);
    border: 2px solid var(--ink);
    font-size: 5.4cqi;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    text-shadow: none;
}

/* The word, said: a speech balloon in the art's open upper third */
.ac-balloon {
    position: absolute;
    z-index: 4;
    top: 13cqi;
    left: 50%;
    display: grid;
    justify-items: center;
    width: max-content;
    min-width: 46%;
    max-width: 90%;
    padding: 2.4cqi 6cqi;
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 50% / 46%;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.8);
    transform: translateX(-50%) translateZ(40px) rotate(-2deg);
}

.ac-balloon::before,
.ac-balloon::after { content: ''; position: absolute; clip-path: polygon(0 0, 100% 0, 10% 100%); }
.ac-balloon::before { top: calc(100% - 3px); left: 28%; width: 9cqi; height: 8cqi; background: var(--ink); }
.ac-balloon::after { top: calc(100% - 7px); left: calc(28% + 4px); width: calc(9cqi - 9px); height: calc(8cqi - 5px); background: #fff; }

.ac-word {
    font-size: var(--size, 10cqi);
    line-height: 1.04;
    letter-spacing: 0.03em;
    text-align: center;
    text-wrap: balance;
}

.ac-word:lang(tr) { text-transform: uppercase; }
.ac-word:lang(ja) { letter-spacing: 0; font-family: 'Dela Gothic One', var(--font-display); }

/* No art: the balloon is the card, large and centred */
.art-card.is-bare .ac-balloon {
    top: 38%;
    min-width: 64%;
    max-width: 88%;
    padding: 5cqi 7cqi;
    box-shadow: 4px 4px 0 var(--ink);
    transform: translate(-50%, -50%) translateZ(40px) rotate(-2deg);
}

.art-card.is-bare .ac-balloon::before { width: 12cqi; height: 12cqi; }
.art-card.is-bare .ac-balloon::after { width: calc(12cqi - 9px); height: calc(12cqi - 5px); }

.ac-bottom {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: 3.6cqi;
    display: grid;
    justify-items: center;
    gap: 2.6cqi;
    transform: translateZ(32px);
}

/* The meaning, as an anime subtitle: bold white with a heavy black outline */
.ac-sub {
    max-width: 92%;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: calc(8cqi * var(--fit, 1));
    line-height: 1.1;
    text-align: center;
    text-wrap: balance;
    color: #fff;
    -webkit-text-stroke: calc(1.5cqi * var(--fit, 1)) #000;
    paint-order: stroke fill;
}

.ac-fx {
    display: flex;
    align-items: center;
    gap: 2cqi;
    width: 90%;               /* one width on every card: the rule boxes line up */
    min-height: 11cqi;
    padding: 1.2cqi 2.6cqi 1.2cqi 1.2cqi;
    background: rgba(255, 251, 240, 0.95);
    border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    transform: rotate(-1.2deg);
}

.ac-kw {
    flex-shrink: 0;
    padding: 0.8cqi 2cqi 0.2cqi;
    background: var(--kw);
    border: 2.5px solid var(--ink);
    font-size: 6.4cqi;
    letter-spacing: 0.05em;
    color: #fff;
    text-shadow: var(--outline-text-thin);
}

.ac-fx-text { flex: 1; min-width: 0; font-family: var(--font-body); font-weight: 700; font-size: calc(5.8cqi * var(--fit, 1)); line-height: 1.12; text-align: left; text-wrap: balance; color: var(--ink); }
.ac-fx.k-curse { --kw: #3b1d5a; }
.ac-fx.k-berserk { --kw: var(--pow); }
.ac-fx.k-combo { --kw: var(--go); }
.ac-fx.k-core { --kw: #c99500; }
.ac-fx:is(.k-threat, .k-merciless, .k-cruelty) { --kw: #5a2a8a; }
.ac-fx:is(.k-echo, .k-chaos) { --kw: var(--magenta); }
.ac-fx:is(.k-guarded, .k-defensive) { --kw: #0e9a8f; }
.ac-fx.k-precision { --kw: var(--cyan); }
.ac-fx:is(.k-heated, .k-reckless) { --kw: var(--orange); }

/* Big stats: a tile per channel - icon, number, name */
.ac-tiles { display: flex; justify-content: center; gap: 2.2cqi; }
.ac-tile {
    --ch: #fff;
    display: grid;
    justify-items: center;
    min-width: 18cqi;
    padding: 1cqi 2cqi 1.2cqi;
    background: var(--ch);
    border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
}

.ac-tile.ch-moral { --ch: var(--pow); }
.ac-tile.ch-honor { --ch: var(--zap); }
.ac-tile.ch-shame { --ch: var(--magenta); }
.ac-tile.ch-will { --ch: var(--cyan); }
.ac-tile.ch-fury { --ch: var(--orange); }
.ac-tile.ch-fear { --ch: #7d7aa8; }
.ac-tile.is-mult { --ch: var(--ink); }
.ac-i { font-size: 5.4cqi; line-height: 1; }
.ac-n {
    font-size: 13cqi;
    line-height: 0.95;
    color: #fff;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000;
}
.ac-tile.is-mult .ac-n { font-size: 9.5cqi; padding-top: 1.6cqi; }
.ac-l {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 4.4cqi;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-stroke: 0.9cqi #000;
    paint-order: stroke fill;
}

.art-card.is-played .ac-tile { animation: acTile 0.42s cubic-bezier(0.2, 1.8, 0.4, 1) both; }
.art-card.is-played .ac-tile:nth-child(2) { animation-delay: 90ms; }
.art-card.is-played .ac-tile:nth-child(3) { animation-delay: 180ms; }
.art-card.is-played .ac-tile:nth-child(4) { animation-delay: 270ms; }
@keyframes acTile { 45% { transform: scale(1.35) rotate(-4deg); } }

/* Played: a burst in its damage colours, then its effect */
.ac-vfx { position: absolute; inset: 0; z-index: 6; pointer-events: none; transform: translateZ(60px); }
.ac-pt {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 4.6cqi;
    height: 4.6cqi;
    margin: -2.3cqi;
    background: var(--c);
    border: 2px solid #000;
    animation: acBurst 0.95s cubic-bezier(0.15, 0.8, 0.3, 1) forwards;
}

.ac-pt.is-star {
    width: 8cqi;
    height: 8cqi;
    margin: -4cqi;
    border: 0;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

@keyframes acBurst {
    0% { transform: rotate(var(--a)) translateX(0) scale(0.4); opacity: 1; }
    65% { opacity: 1; }
    100% { transform: rotate(var(--a)) translateX(var(--d)) scale(1.1); opacity: 0; }
}

.art-card.is-shaking { animation: acShake 0.42s linear; }
@keyframes acShake {
    20% { translate: -6px 2px; }
    40% { translate: 5px -3px; }
    60% { translate: -4px 3px; }
    80% { translate: 3px -2px; }
}

.ac-rage { position: absolute; inset: 0; animation: acRage 0.9s ease-out forwards; }
@keyframes acRage {
    30% { box-shadow: inset 0 0 14cqi 4cqi rgba(232, 38, 43, 0.85); }
    100% { box-shadow: inset 0 0 0 0 rgba(232, 38, 43, 0); }
}

.ac-ring {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 20cqi;
    height: 20cqi;
    margin: -10cqi;
    border: 1.4cqi solid var(--go);
    border-radius: 50%;
    animation: acRing 0.7s ease-out both;
}

@keyframes acRing {
    from { transform: scale(0.2); opacity: 1; }
    to { transform: scale(4.2); opacity: 0; }
}

.ac-smoke {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 110%, rgba(40, 10, 70, 0.95), rgba(40, 10, 70, 0) 70%);
    animation: acSmoke 1.9s ease-out forwards;
}

@keyframes acSmoke {
    0% { opacity: 0; transform: translateY(20%); }
    25% { opacity: 1; }
    70% { opacity: 0.9; }
    100% { opacity: 0; transform: translateY(-25%); }
}

.ac-bite {
    position: absolute;
    left: 50%;
    top: 40%;
    width: 26cqi;
    height: 26cqi;
    margin: -13cqi;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 120, 255, 1) 0 25%, rgba(110, 30, 190, 0.85) 45%, rgba(60, 0, 110, 0) 72%);
    opacity: 0;
    animation: acBite 0.62s ease-out forwards;
}

@keyframes acBite {
    0% { opacity: 0; transform: scale(0.3); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.8); }
}

@media (prefers-reduced-motion: reduce) {
    .art-card, .ac-img { transition: none; }
    .art-card.is-played .ac-img.is-played, .art-card.is-played .ac-flash, .art-card.is-played .ac-tile, .art-card.is-shaking { animation: none; }
}

/* ===========================
   PACK OPENING, FULL SCREEN: no paper frame - the pack and its cards sit on the
   game's sunburst across the whole window, a spotlight on the middle
   =========================== */
#packScreen { padding: 0; }
#packScreen .game-screen-frame,
html.art-skin #packScreen .game-screen-frame {
    position: relative;
    width: 100%;
    background: none;
    border: none;
    box-shadow: none;
}
/* the header floats over the stage, so the backdrop runs under it unbroken */
#packScreen .game-screen-header { position: relative; z-index: 2; padding: 14px 20px 0; background: none; border-bottom: none; }
#packScreen .game-screen-body {
    position: absolute;
    inset: 0;
    padding: 72px 16px 0;
    background-image:
        radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(0, 0, 0, 0.5) 100%),
        repeating-conic-gradient(from 0deg at 50% 40%, var(--page-dot) 0deg 7deg, var(--page) 7deg 14deg);
}
/* One fixed column, never scrolled: the stage takes what is left (a size
   container - the sealed pack and the dealt cards fit it), the bar under it keeps
   its height whether it holds the hint and "Reveal all" or the summary */
#packScreen .game-screen-body { overflow: hidden; }
#packScreen .pack-stage { flex: 1 1 0; min-height: 0; padding: 0; container-type: size; overflow: visible; }
#packScreen .pack-actions {
    flex: none;
    min-height: 118px;
    width: min(100%, 1100px);
    padding: 8px 0 16px;
    align-content: center;
}
#packScreen .pack-actions .pack-hint { flex-basis: 100%; text-align: center; }
#packScreen .pack-note { flex: none; }
/* the summary sits on the backdrop, not on a printed panel */
html.art-skin #packScreen .pack-summary { background-image: none; }

/* The sealed pack, sized to the window */
.pack-screen .pack-sealed { width: clamp(150px, min(40cqw, 80cqh * 0.714), 340px); height: auto; aspect-ratio: 5 / 7; }
.pack-screen .pack-sealed.is-big { width: clamp(160px, min(44cqw, 86cqh * 0.714), 380px); }
.pack-screen .pack-level { font-size: clamp(44px, 4vw, 64px); }

/* The card viewer's large card: the full-art card, as large as the stage allows
   (the stage is a size container) */
.cv-stage .art-card.cv-art { width: min(100cqw - 14px, (100cqh - 14px) * 5 / 7); cursor: pointer; }
.cv-stage .art-card.cv-art:focus-visible { outline: 4px solid var(--zap); outline-offset: 6px; }

/* Turkish capitals carry their accents above the display font's ascent (Bangers:
   I-dot, O/U umlaut, S/C cedilla, G breve). One-line labels that end in an
   ellipsis clip only sideways, so an accent is never cut off at the top. */
:is(.live-name, .deck-slot, .editor-row-text, .record-text, .hand-sentence-text, .card-swap-name,
    .top-hud .panel-caption, .search-hint, .search-title, .card-gloss, .editor-row-gloss, .vl-gloss,
    .fighter-actions .fighter-action > span:first-child) {
    overflow-x: clip;
    overflow-y: visible;
}

/* ===========================
   BOOKMARKS - a star on every said line in the battle log (js/match/board.js), and
   the lobby's Bookmarks page (js/screens/bookmarks.js): saved lines as a wall of
   comic speech balloons, each with its speaker's tag on the tail
   =========================== */
.log-entry.has-mark { position: relative; padding-right: 34px; }
.log-mark {
    position: absolute;
    top: 2px;
    right: 2px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}
.log-mark svg { width: 22px; height: 22px; fill: #fff; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; transition: transform 0.15s; }
.log-mark:hover svg { transform: scale(1.18) rotate(-8deg); fill: #fff3b0; }
.log-mark[aria-pressed="true"] svg { fill: var(--zap); }
.log-mark.is-pending svg { animation: markPulse 0.6s ease-in-out infinite; }
.log-mark:focus-visible { outline: 3px solid var(--cyan); outline-offset: 1px; }
@keyframes markPulse { 50% { transform: scale(0.8); } }

.bookmarks-screen .game-screen-body { display: flex; flex-direction: column; gap: 10px; }
.bm-search { flex: 1 1 220px; min-width: 0; padding: 6px 12px; border: 2px solid var(--ink); font-family: var(--font-hand); font-size: 18px; }
.bm-count { margin: 0; }
.bm-list {
    columns: 3 340px;
    column-gap: 22px;
    padding: 6px 4px 24px;
}
.bm-item {
    break-inside: avoid;
    display: grid;
    gap: 6px;
    margin: 0 0 26px;
    padding: 0 0 14px;
    border-bottom: 3px dashed rgba(0, 0, 0, 0.18);
}

/* The line, said: a balloon with its tail pointing down at the speaker's tag */
.bm-balloon {
    position: relative;
    margin: 18px 6px 14px 0;
    padding: 16px 20px 14px;
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 26px;
    box-shadow: 5px 5px 0 var(--ink);
}
.bm-balloon::before,
.bm-balloon::after { content: ''; position: absolute; clip-path: polygon(0 0, 100% 0, 18% 100%); }
.bm-balloon::before { top: 100%; left: 34px; width: 30px; height: 22px; background: var(--ink); }
.bm-balloon::after { top: calc(100% - 4px); left: 38px; width: 21px; height: 17px; background: #fff; }
.bm-item.is-mine .bm-balloon { background: #e9f6fc; }
.bm-item.is-mine .bm-balloon::after { background: #e9f6fc; }
.bm-words {
    margin: 0;
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1.08;
    letter-spacing: 0.03em;
    text-wrap: balance;
    color: var(--ink);
}
.bm-words:lang(tr) { text-transform: uppercase; }
.bm-words:lang(ja) { font-family: 'Dela Gothic One', var(--font-display); letter-spacing: 0; }
.bm-meaning { margin: 6px 0 0; font-family: var(--font-body); font-weight: 700; font-size: 15px; color: #555; }
/* How hard it hit: a starburst on the balloon's corner */
.bm-hit {
    position: absolute;
    top: -20px;
    right: -14px;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    background: var(--pow);
    clip-path: polygon(50% 0, 61% 30%, 95% 18%, 72% 45%, 100% 62%, 66% 66%, 72% 100%, 50% 76%, 28% 100%, 34% 66%, 0 62%, 28% 45%, 5% 18%, 39% 30%);
    font-family: var(--font-display);
    font-size: 19px;
    color: #fff;
    text-shadow: var(--outline-text-thin);
    transform: rotate(8deg);
}

.bm-who { margin: 0 0 0 64px; font-size: 17px; }
.bm-speaker { font-family: var(--font-display); font-size: 21px; letter-spacing: 0.04em; font-weight: 400; color: var(--magenta); }
.bm-item.is-mine .bm-speaker { color: var(--cyan); }
.bm-meta { margin: 0; font-size: 14px; color: #666; }

/* The sentence's cards: small full-art cards in sentence order, slightly fanned */
.bm-cards { display: flex; flex-wrap: wrap; gap: 14px 10px; padding: 6px 4px 8px; }
.bm-card {
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    transform: rotate(var(--fan, -1.5deg));
    transition: transform 0.15s ease;
}
.bm-card:nth-child(even) { --fan: 1.5deg; }
.bm-card .art-card { --ac-w: 108px; }
.bm-card .ac-body { box-shadow: 4px 4px 0 var(--ink); border-width: 3px; }
.bm-card:hover, .bm-card:focus-visible { transform: translateY(-6px) rotate(0deg) scale(1.06); z-index: 1; }
.bm-card:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }

.bm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bm-action { font-size: 15px; padding: 4px 12px 2px; }
.bm-remove { margin-left: auto; }

.bm-empty { max-width: 560px; margin: 40px auto; text-align: center; }
.bm-empty-title { display: block; margin-bottom: 8px; font-family: var(--font-display); font-size: 32px; letter-spacing: 0.04em; }
.bm-empty p { margin: 0; font-size: 18px; }

@media (max-width: 760px) {
    .bm-list { columns: 1; }
    .bm-words { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .log-mark svg, .bm-card { transition: none; }
    .bm-card { transform: none; }
    .log-mark.is-pending svg { animation: none; }
}

/* While a sentence bursts across the arena (wordbattle.js showSpellAnimation) the
   grammar row and its combo total fade out, then return. Opacity only: the zone
   keeps its own transform (placement) and opacity transition (grammar-panel.css). */
#grammarZone.is-burst-hidden { opacity: 0; pointer-events: none; }

/* ===========================
   MATCH OPENING (wordbattle.js playIntro / buildBoard): the board is covered under
   the loading screen and the VS splash, then builds in in one order - fighters'
   panels drop, side panels slide in, the arena and its clock appear, the hand is
   dealt card by card, the grammar panel rises. Keyframes move with `translate`
   and `scale` only: the panels keep their own `transform` for placement.
   =========================== */
.game-container.intro-cover :is(.top-hud, .battle-log, .crowd-section, .battle-arena, .hand-area, .grammar-zone, .toast-stack) {
    opacity: 0 !important;
    pointer-events: none;
}

.game-container.intro-build :is(.top-hud .player-info, .battle-log, .crowd-section, .battle-arena,
    .turn-indicator, .turn-timer, .arena-chip, .hand-area, .hand-area .card, .grammar-zone) {
    animation-duration: 0.38s;
    animation-timing-function: cubic-bezier(0.2, 1.2, 0.4, 1);
    animation-fill-mode: both;
}
.game-container.intro-build .top-hud .player-info { animation-name: introDrop; }
.game-container.intro-build .top-hud .player-info.opponent { animation-delay: 60ms; }
.game-container.intro-build .battle-log { animation-name: introFromLeft; animation-delay: 120ms; }
.game-container.intro-build .crowd-section { animation-name: introFromRight; animation-delay: 120ms; }
.game-container.intro-build .battle-arena { animation-name: introFade; animation-delay: 150ms; }
.game-container.intro-build :is(.turn-indicator, .turn-timer, .arena-chip) { animation-name: introPop; animation-delay: 300ms; }
.game-container.intro-build .hand-area { animation-name: introRise; animation-delay: 350ms; }
.game-container.intro-build .hand-area .card {
    animation-name: introDeal;
    animation-duration: 0.3s;
    animation-delay: calc(450ms + var(--deal-i, 0) * 55ms);
}
.game-container.intro-build .grammar-zone { animation-name: introRise; animation-duration: 0.42s; animation-delay: 820ms; }

@keyframes introDrop { from { opacity: 0; translate: 0 -60px; } }
@keyframes introFromLeft { from { opacity: 0; translate: -80px 0; } }
@keyframes introFromRight { from { opacity: 0; translate: 80px 0; } }
@keyframes introFade { from { opacity: 0; } }
@keyframes introPop { from { opacity: 0; scale: 0.6; } }
@keyframes introRise { from { opacity: 0; translate: 0 50px; } }
@keyframes introDeal { from { opacity: 0; translate: -40px -120px; rotate: -12deg; scale: 0.7; } }

/* The grammar panel enters as one unit (the opening, and each time it is shown):
   its parts no longer run their own delayed entrances (grammar-panel.css) */
.grammar-zone :is(.grammar-header, .grammar-slot, .slot-connector, .damage-formula) { animation: none; opacity: 1; }

/* ===========================
   CROWD REACTIONS (ui/crowd-fx.js) - the same on every screen in the room: a wave
   of the emoji out of the crowd over the arena, a shout bubble, the arena edge in
   the reaction's colour, the hype meter jolting. The buttons rest between reactions.
   =========================== */
:root {
    --crowd-cheer: #ffd21f;
    --crowd-laugh: #ff9f1c;
    --crowd-gasp: #14a3de;
    --crowd-applause: #22b35a;
    --crowd-boo: #8e3bd1;
    --crowd-murmur: #9aa3b5;
}

.crowd-wave {
    position: fixed;
    z-index: 2500;
    pointer-events: none;
    font-size: var(--size, 34px);
    line-height: 1;
    filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.55));
    animation: crowdWave 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes crowdWave {
    0% { opacity: 0; translate: 0 0; scale: 0.4; rotate: 0deg; }
    15% { opacity: 1; scale: 1.15; }
    70% { opacity: 1; }
    100% { opacity: 0; translate: var(--dx) var(--dy); scale: 0.9; rotate: var(--spin); }
}

.crowd-shouts {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 100%;
    z-index: 30;
    display: grid;
    gap: 6px;
    margin-top: 8px;
    pointer-events: none;
}

.crowd-shout {
    --kind: var(--crowd-cheer);
    position: relative;
    padding: 6px 12px 4px;
    background: #fff;
    border: 3px solid var(--ink);
    border-left: 10px solid var(--kind);
    border-radius: 14px;
    box-shadow: 3px 3px 0 var(--ink);
    font-family: var(--font-hand);
    font-size: 17px;
    line-height: 1.2;
    color: var(--ink);
    animation: shoutIn 0.35s cubic-bezier(0.2, 1.5, 0.4, 1) both;
    transition: opacity 0.3s, translate 0.3s;
}

.crowd-shout strong { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.04em; }
.crowd-shout.is-out { opacity: 0; translate: 0 -8px; }
.crowd-shout.kind-laugh { --kind: var(--crowd-laugh); }
.crowd-shout.kind-gasp { --kind: var(--crowd-gasp); }
.crowd-shout.kind-applause { --kind: var(--crowd-applause); }
.crowd-shout.kind-boo { --kind: var(--crowd-boo); }
.crowd-shout.kind-murmur { --kind: var(--crowd-murmur); }

@keyframes shoutIn { from { opacity: 0; scale: 0.6; rotate: -4deg; } }

/* The arena edge glows the reaction's colour for a moment */
.battle-arena.crowd-flash::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    box-shadow: inset 0 0 0 6px var(--flash), inset 0 0 60px 10px var(--flash);
    animation: crowdFlash 0.9s ease-out both;
}

.battle-arena { --flash: var(--crowd-cheer); }
.battle-arena[data-crowd-kind="laugh"] { --flash: var(--crowd-laugh); }
.battle-arena[data-crowd-kind="gasp"] { --flash: var(--crowd-gasp); }
.battle-arena[data-crowd-kind="applause"] { --flash: var(--crowd-applause); }
.battle-arena[data-crowd-kind="boo"] { --flash: var(--crowd-boo); }
.battle-arena[data-crowd-kind="murmur"] { --flash: var(--crowd-murmur); }

@keyframes crowdFlash { 0% { opacity: 0; } 20% { opacity: 0.85; } 100% { opacity: 0; } }

.hype-meter.is-jolt { animation: hypeJolt 0.45s cubic-bezier(0.2, 1.8, 0.4, 1); }
@keyframes hypeJolt { 40% { scale: 1.08; rotate: -1.5deg; } }

/* The buttons rest between reactions: a bar empties under them */
#crowdReactions { position: relative; }
#crowdReactions.is-resting .reaction { opacity: 0.55; pointer-events: none; }
#crowdReactions.is-resting::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 4px;
    background: var(--ink);
    transform-origin: left;
    animation: reactRest var(--rest, 1200ms) linear both;
}
@keyframes reactRest { from { scale: 1 1; } to { scale: 0 1; } }

@media (prefers-reduced-motion: reduce) {
    .crowd-shout, .hype-meter.is-jolt, .battle-arena.crowd-flash::after, #crowdReactions.is-resting::after { animation: none; }
}

/* ===========================
   FIRST STREET (onboarding, js/lobby-screen.js): a new fighter picks the card pack
   they start in - three big options with the flag, the language and a line said
   the way that street says it
   =========================== */
.lobby-street { display: grid; gap: 14px; text-align: center; }
.lobby-street-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--ink);
}
.lobby-street-sub, .lobby-street-note { margin: 0; font-size: 18px; color: #444; }
.lobby-street-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }

.street-option {
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 200px;
    padding: 16px 16px 46px;
    background: #fff;
    border: var(--line-heavy);
    box-shadow: 6px 6px 0 var(--ink);
    color: var(--ink);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.street-option:hover:not(:disabled), .street-option:focus-visible { transform: translate(-2px, -3px) rotate(-1deg); box-shadow: 9px 9px 0 var(--ink); }
.street-option:focus-visible { outline: 4px solid var(--cyan); outline-offset: 3px; }
.street-option:disabled { cursor: default; opacity: 0.55; }
.street-option.is-picked { opacity: 1; background: var(--zap); transform: rotate(-1deg); }
.street-head { display: flex; align-items: center; gap: 10px; }
.street-head .flag { width: 42px; height: 28px; }
.street-name { font-family: var(--font-display); font-size: 26px; font-weight: 400; letter-spacing: 0.04em; }
.street-lang { font-size: 15px; color: #555; }
/* the line, as a little speech balloon */
.street-sample {
    position: relative;
    margin-top: 4px;
    padding: 10px 14px;
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 18px;
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: 0.02em;
}
.street-sample:lang(tr) { text-transform: uppercase; }
.street-sample:lang(ja) { font-family: 'Dela Gothic One', var(--font-display); letter-spacing: 0; }
.street-hear {
    position: absolute;
    left: 16px;
    bottom: 12px;
    padding: 2px 10px 0;
    background: var(--ink);
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.05em;
    color: #fff;
}
.street-hear:hover, .street-hear:focus-visible { background: var(--magenta); outline: none; }

@media (max-width: 760px) {
    .lobby-street-options { grid-template-columns: 1fr; }
    .street-option { min-height: 0; }
    .lobby-street-title { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .street-option { transition: none; } }

/* ===========================
   PHONE BATTLE (portrait stage): one screen, nothing scrolls during play - the
   fighters as two slim cards (tap one for its state meters), one status row (turn,
   clock, arena, the dock: log / crowd / surrender), the sentence builder with Say
   always in sight, and the hand docked below it. The battle log and the crowd open
   as sheets from the dock. Desktop is untouched: everything here is portrait-only.
   =========================== */
.phone-dock, .phone-sheet-backdrop { display: none; }

.game-container[data-layout="portrait"] { overflow: hidden; }

@container stage (orientation: portrait) {
    .game-container > .top-hud { padding: 12px 8px 0; gap: 8px 8px; }

    /* fighters: avatar, name, Moral and Mana - the rest on a tap */
    .top-hud .player-info { cursor: pointer; padding: 10px 8px 8px; gap: 6px; }
    .top-hud .player-info .stat-bar.fury-bar,
    .top-hud .player-info .fighter-states,
    .top-hud .player-info .status-effects:empty { display: none; }
    .top-hud .player-info.is-open .fighter-states {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        z-index: 40;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 8px;
        background: var(--paper);
        border: var(--line);
        box-shadow: var(--drop);
    }
    .top-hud .player-info { position: relative; }
    /* an opened panel's meters drop over the status row below it */
    .top-hud .player-info.is-open { z-index: 320; }   /* over the status row (310) */
    .top-hud .player-info::after {
        content: '+';
        position: absolute;
        right: 6px;
        bottom: 2px;
        font-family: var(--font-display);
        font-size: 16px;
        color: #666;
    }
    .top-hud .player-info.is-open::after { content: '-'; }

    /* status row: turn and clock, the dock beside them; the arena chip under */
    .center-info { flex-wrap: wrap; gap: 6px 8px; }
    .turn-indicator { font-size: 18px; padding: 2px 12px 0; }
    .turn-timer { min-width: 118px; padding: 3px 8px; }
    .timer-text { font-size: 17px; }
    .timer-bank { font-size: 11px; }
    .arena-chip { order: 5; margin: 0; padding: 1px 8px 0; font-size: 13px; }
    .phone-dock { display: flex; gap: 6px; }
    .phone-dock-button {
        display: grid;
        place-items: center;
        width: 36px;
        height: 34px;
        padding: 0;
        background: #fff;
        border: 2px solid var(--ink);
        box-shadow: 2px 2px 0 var(--ink);
        font-size: 17px;
        line-height: 1;
        cursor: pointer;
    }
    .phone-dock-button[aria-pressed="true"] { background: var(--zap); }
    .phone-dock-button.phone-surrender { background: #ffe1e1; }

    /* the builder takes what is left; it scrolls inside itself only on very short screens */
    .battle-arena {
        flex: 1 1 0;
        min-height: 0;
        gap: 10px;
        padding: 10px 8px 6px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    body .game-container .grammar-zone { padding: 10px 8px 10px; }
    .grammar-header { margin-bottom: 6px; }
    .spell-preview { min-height: 40px; padding: 4px 12px; }
    .preview-text { font-size: 19px; }
    .preview-text.is-empty { font-size: 13px; }
    .grammar-slots { gap: 6px; padding: 2px 0; }
    .grammar-slot, .grammar-slot.filled { height: 56px; }
    .damage-formula { margin-top: 2px; padding: 4px 8px; }
    .damage-total { font-size: 20px; }

    /* Say on the same row as Clear and the budget - never under the hand */
    .cast-area { flex-wrap: nowrap; gap: 8px; margin-top: 8px; }
    .cast-button { order: 2; flex: 1 1 42%; padding: 5px 12px 2px; font-size: 26px; }
    .clear-button { order: 0; flex: 0 0 auto; padding: 6px 10px 3px; font-size: 14px; }
    .mana-cost { order: 1; flex: 1 1 0; padding: 4px 8px; }

    /* the hand: docked below the builder (not over it), one row of cards that
       scrolls sideways, three actions - surrender lives in the dock */
    .hand-area {
        position: relative;
        flex: none;
        bottom: auto;
        padding: 14px 8px 6px;
        gap: 4px;
    }
    .hand-area .panel-caption::after { content: ''; }
    .hand-hint { display: none; }
    .hand-sentence, .hand-area.is-expanded .hand-sentence { display: none; }
    .hand-controls { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .hand-controls .surrender-button { display: none; }
    .control-button { height: 36px; }
    .cards-container,
    .hand-area.is-expanded .cards-container {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px 2px 6px;
        gap: 8px;
        scroll-snap-type: x proximity;
    }
    .cards-container .card { flex: none; width: 84px; height: 118px; scroll-snap-align: start; }

    /* the battle log and the crowd: sheets over the board, from the dock */
    .battle-log,
    .crowd-section {
        position: absolute;
        top: auto;
        left: 8px;
        right: 8px;
        bottom: 8px;
        /* above the hand (150) and the grammar panel (140): same stacking context */
        z-index: 400;
        width: auto;
        height: 62%;
        margin: 0;
        display: none;
    }
    .game-container[data-sheet="log"] .battle-log,
    .game-container[data-sheet="crowd"] .crowd-section { display: flex; }
    .game-container:is([data-sheet="log"], [data-sheet="crowd"]) .phone-sheet-backdrop {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 390;
        background: rgba(0, 0, 0, 0.45);
    }
    /* the hand sits at the foot of the screen; the builder gets the room above it */
    .battle-arena > .hand-area { margin-top: auto; }
    /* the budget as one short line beside Say: cost and what is left */
    .mana-cost { flex: 0 1 auto; min-width: 0; padding: 4px 8px; }
    .mana-cost .mana-cost-info { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 6px; white-space: nowrap; }
    .mana-cost .cost-label { font-size: 12px; }
    .mana-cost .cost-value { font-size: 22px; }
    .mana-cost :is(.remaining-value, .shortage-value) { font-size: 12px; }

    /* with a sheet open the top bar stays above the dimming: the dock switches or
       closes sheets, the fighters stay in sight */
    .game-container:is([data-sheet="log"], [data-sheet="crowd"]) > .top-hud { position: relative; z-index: 395; }

    /* with the crowd in its sheet, its shouts show over the arena (ui/crowd-fx.js) */
    .battle-arena > .crowd-shouts { top: 6px; bottom: auto; margin-top: 0; z-index: 60; }
}

/* Taller phones: the room under the builder goes to bigger slots and hand cards */
@container stage (orientation: portrait) and (min-height: 880px) {
    .grammar-slot, .grammar-slot.filled { height: 66px; }
    .grammar-slots { gap: 8px; }
    .cards-container .card { width: 96px; height: 134px; }
    .battle-arena { gap: 14px; }
}

/* A sentence starts with its core (board.js updateCardAffordability): while it is
   empty, epithets and verbs stand out, every other card waits greyed */
.cards-container .card.is-waiting-core { filter: grayscale(1) contrast(0.85); opacity: 0.45; }
.cards-container .card.is-waiting-core:hover { filter: grayscale(0.4); opacity: 0.8; }
.cards-container .card.is-core-start:not(.card-unaffordable) {
    box-shadow: 0 0 0 3px var(--zap), var(--drop);
    animation: coreStart 1.6s ease-in-out infinite;
}
/* a glow that breathes - the card itself stays put under the finger */
@keyframes coreStart { 50% { box-shadow: 0 0 0 3px var(--zap), 0 0 18px 4px var(--zap), var(--drop); } }
@media (prefers-reduced-motion: reduce) { .cards-container .card.is-core-start { animation: none; } }

/* A new fighter's first steps (lobby fighter card): a checklist, done steps ticked */
.first-steps {
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
    padding: 10px 12px;
    background: var(--zap);
    border: var(--line);
    box-shadow: var(--drop-small);
    transform: rotate(-0.6deg);
}
.first-steps[hidden] { display: none; }
.first-steps-title { font-family: var(--font-display); font-size: 20px; font-weight: 400; letter-spacing: 0.05em; }
.first-steps-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.first-step { display: flex; align-items: center; gap: 8px; counter-increment: step; font-size: 16px; }
.first-step::before {
    content: counter(step);
    display: grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 14px;
}
.first-step.is-done { opacity: 0.6; text-decoration: line-through; }
.first-step.is-done::before { content: '\2713'; background: var(--go); color: #fff; }
.first-step-go {
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    cursor: pointer;
}
.first-step-go:hover, .first-step-go:focus-visible { color: var(--pow); outline: none; }