/* ehlocal/static/css/games.css
 *
 * EH! Games — editorial Canadian aesthetic.
 *
 * Uses EH local's tokens exclusively (--red, --bg, --surface, --text,
 * etc.). Mobile-first; single breakpoint at min-width: 769px for the
 * sidebar layout. Respects [data-theme="dark"] via the same mechanism
 * as the rest of the site.
 *
 * Per-puzzle styles live below the shared sections; each puzzle uses
 * its own short prefix (floes__, m5__, lynx__, mini__, mm__, lo__).
 */

.games-page {
    /* Druk Heavy is a condensed display face — already tight by
       design. Turn on real kerning + ligatures so glyph pairs lock
       in cleanly, and let optimizeLegibility take the cost on the
       big editorial type. Per-element letter-spacing values below
       are conservative on top of this; the worst offender (the 88px
       headline) used to ride at -0.04em which crashed words
       together. */
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;

    /* Games-scoped tokens — only new things. */
    --games-tile-aspect: 1 / 1.15;
    --games-motion-fast: 180ms;
    --games-motion-flip: 600ms;
    --games-motion-cascade: 800ms;
    --games-edition-tracking: 0.12em;

    /* Hug the site-header. The prior masthead block (dropped) was
       eating ~70px below the nav; without it, the red strip should
       sit snug against the navigation. */
    padding-top: 0;
    padding-bottom: 64px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

/* Per-game color themes — scoped via data-game-theme="<id>".

   Each game's primary accent (--game-color), light surface
   (--game-bg), and dark surface (--game-bg-dark) layer on top of
   EH local's tokens. Puzzle modules and tile chrome read
   ``var(--game-color, var(--red))`` so the integration falls back
   to EH red whenever the attribute isn't set. Values lifted from
   the design package /tmp/games-design/eh-games/project/data.js. */

[data-game-theme="floes"]       { --game-color: #0E7C9A; --game-bg: #E1F1F5; --game-bg-dark: #0d2a35; }
[data-game-theme="maple-five"]  { --game-color: #D32B1E; --game-bg: #FFE6E2; --game-bg-dark: #2a0a07; }
[data-game-theme="lynx"]        { --game-color: #1A3852; --game-bg: #E0E8F0; --game-bg-dark: #0d1a26; }
[data-game-theme="mini"]        { --game-color: #508726; --game-bg: #E5F0DC; --game-bg-dark: #0f1f0a; }
[data-game-theme="maple-match"] { --game-color: #B95E1F; --game-bg: #FBE8D7; --game-bg-dark: #2c1808; }
[data-game-theme="loonie"]      { --game-color: #A5853F; --game-bg: #F4EBD0; --game-bg-dark: #2a2008; }

.games-page__placeholder {
    padding: 32px 16px;
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
}

/* Tabular numerals on every numeric display. */
.games-numeric {
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Honour reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .games-page *,
    .games-page *::before,
    .games-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Hub layout ─────────────────────────────────────────────────── */

.games-page__header {
    margin-bottom: 18px;
}

.games-hub {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    /* Each column sizes to its own content. Without this the hero
       stretches vertically to match the taller rail (trail +
       leaderboard + yesterday) and trails empty whitespace. */
    align-items: start;
}

@media (min-width: 769px) {
    .games-hub {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
        gap: 28px;
    }
}

@media (min-width: 1100px) {
    .games-hub {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 36px;
    }
}

/* ── Full-bleed red stats strip ─────────────────────────────────── */
/* Negative-margin wrapper breaks out of the .container gutters so
   the strip reads as a published headline band, not an inset card. */

.games-strip-bleed {
    background: var(--red);
    color: #FFFFFF;
    margin: 0 calc(-1 * max(16px, env(safe-area-inset-left))) 24px;
    padding: 14px max(16px, env(safe-area-inset-left));
}

[data-theme="dark"] .games-strip-bleed {
    background: var(--red);
    color: #FFFFFF;
}

.games-strip-bleed__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
    max-width: 1240px;
    margin: 0 auto;
}

.games-strip-bleed__cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.games-strip-bleed__label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--games-edition-tracking);
    opacity: 0.85;
}

.games-strip-bleed__value {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.005em;
    word-spacing: 0.02em;
}

.games-strip-bleed__footnote {
    margin-left: auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 600;
    opacity: 0.85;
}

@media (max-width: 600px) {
    .games-strip-bleed__inner { gap: 16px; }
    .games-strip-bleed__footnote { width: 100%; margin: 8px 0 0 0; }
}

/* ── Editorial title bar ────────────────────────────────────────── */

.games-title-bar {
    text-align: center;
    padding: 24px 16px 28px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}

.games-title-bar__super {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 18px 0;
}

.games-title-bar__title {
    /* Druk Wide Heavy — the section's typographic hero. Used ONLY on
       this headline; everywhere else stays Druk Heavy/Text so the
       page has one unmistakable type moment instead of three
       competing ones. Falls back to Druk Heavy on systems without
       the licensed file. */
    font-family: 'Druk Wide', var(--font-display);
    font-weight: 900;
    /* Druk Wide is ~30% wider per glyph than Druk Heavy. The longer
       phrase "One Canadian morning." sets the upper bound — at
       1240px container, it fits comfortably one-line at 64px. The
       font still hits enormous because the broadcast width carries
       weight that Druk Heavy at 88px couldn't.
       Floor dropped from 36px → 28px so "Canadian" doesn't get
       orphaned on its own line at 375px — Druk Wide carries enough
       presence at 28px that the headline still reads as the page's
       type hero. */
    font-size: clamp(28px, 7vw, 64px);
    /* Wide letterforms read better with a *little* more line-height
       than Druk Heavy needed — 0.94 holds the two-line stack tight
       without crashing descenders. */
    line-height: 0.94;
    /* Druk Wide has built-in air per glyph, so it tolerates a touch
       more negative tracking than Druk Heavy could (the prior -0.01
       was conservative because Druk Heavy was being asked to do
       headline work it wasn't designed for). -0.025em is the sweet
       spot for "intentional tight, not crushed". */
    letter-spacing: -0.025em;
    /* But word-spacing matters at any size — explicit 0.06em keeps
       inter-word breath visible. */
    word-spacing: 0.06em;
    color: var(--text);
    margin: 0 0 18px 0;
    text-wrap: balance;
    /* kern + liga inherits from .games-page — explicit here so this
       block stays self-contained. */
    font-feature-settings: "kern" 1, "liga" 1;
}

.games-title-bar__sub {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-secondary);
    margin: 0;
}

/* ── Hero featured card ─────────────────────────────────────────── */
/* Two-row card: row1 is glyph + body (title/rule/CTA),
   row2 is meta — edition / best streak / players / avg solve. */

.games-hero {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 20px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .games-hero {
    background: var(--surface);
}

.games-hero__main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 769px) {
    .games-hero__main {
        flex-direction: row;
        align-items: flex-start;
        gap: 32px;
    }
}

/* Hero glyph mirrors the tile glyph: solid game-bg fill (no
   gradient fade), same color tokens, just larger. The inner SVG
   sits with generous padding inside the chip. */
.games-hero__glyph {
    width: 100%;
    aspect-ratio: 1;
    max-width: 220px;
    border-radius: 18px;
    background: var(--game-bg, var(--surface-hover));
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    color: var(--game-color, var(--red));
}

@media (min-width: 769px) {
    .games-hero__glyph { width: 168px; height: 168px; max-width: none; }
}

[data-theme="dark"] .games-hero__glyph {
    background: var(--game-bg-dark, var(--surface));
}

.games-hero__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.games-hero__eyebrow {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--games-edition-tracking);
    text-transform: uppercase;
    color: var(--red);
    margin: 0;
}

.games-hero__title {
    /* Druk Wide on game titles ("Floes" here) — matches the
       desktop prototype and ties the hero title to the lineup
       tile names. The narrower 40-52px clamp keeps the wider
       letterforms from overflowing the hero card on mobile. */
    font-family: 'Druk Wide', var(--font-display);
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 900;
    letter-spacing: -0.02em;
    word-spacing: 0.02em;
    line-height: 0.96;
    color: var(--text);
    margin: 0;
}

/* Hero blurb in Inter (prototype's --font-body), to lean editorial
   the way the desktop reference does. Wide max-width so the default
   copy doesn't break onto a second line. */
.games-hero__rule {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    max-width: 720px;
    margin: 0;
}

.games-hero__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 26px;
    background: var(--red);
    color: #FFFFFF;
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.01em;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform var(--games-motion-fast) ease,
                filter var(--games-motion-fast) ease;
    min-height: 52px;
}

.games-hero__cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
.games-hero__cta:active { transform: translateY(0); }
.games-hero__cta svg { stroke-width: 2.5; }

.games-hero__meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

@media (min-width: 769px) {
    .games-hero__meta { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}

.games-hero__meta-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.games-hero__meta-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.games-hero__meta-value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.01em;
    word-spacing: 0.02em;
    color: var(--text);
    line-height: 1.0;
}

/* ── The Daily Six lineup ───────────────────────────────────────── */

.games-six {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 24px;
}

.games-six__heading {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--text);
    margin: 0 0 8px 0;
}

/* Daily Six lineup — fixed-size cards that wrap onto the next
   line. Cards do NOT scale with viewport width; they keep their
   188px footprint so six fit comfortably across at typical
   desktop widths, then reflow into fewer columns as space
   tightens, and collapse to a 2-up grid on phone widths. */
.games-six__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 600px) {
    .games-six__grid {
        grid-template-columns: repeat(auto-fill, 188px);
        gap: 10px;
    }
}

/* Restrained tile pattern — matches the desktop prototype. The
   base is true white in light mode (cleaner contrast against EH
   local's warm-beige page bg) with a *whisper* of game-bg as a
   gradient overlay in the top-left corner. The dark-mode treatment
   keeps the surface base since the user explicitly liked it. The
   per-game color lives ONLY in the inset glyph chip + the featured
   border. Eyebrow / streak / Play stay neutral so the tile reads
   as a typography object, not a colored block. */
.games-tile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    /* Two-layer background: tinted gradient overlay over solid
       white. ``transparent`` end-stop on the gradient means the
       white shows through cleanly past 55%. */
    background:
        linear-gradient(155deg,
            color-mix(in srgb, var(--game-bg, transparent) 45%, transparent) 0%,
            transparent 55%),
        #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 18px;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    color: inherit;
    font-family: inherit;
    min-height: 184px;
    position: relative;
    overflow: hidden;
    transition: transform var(--games-motion-fast) ease,
                border-color var(--games-motion-fast) ease,
                box-shadow var(--games-motion-fast) ease;
}

[data-theme="dark"] .games-tile {
    background:
        linear-gradient(155deg,
            color-mix(in srgb, var(--game-bg-dark, transparent) 50%, transparent) 0%,
            transparent 55%),
        var(--surface);
}

.games-tile:hover {
    transform: translateY(-2px);
    border-color: var(--text);
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.10);
}

[data-theme="dark"] .games-tile:hover {
    box-shadow: 0 6px 16px -4px rgba(255, 255, 255, 0.06);
}

.games-tile:active { transform: translateY(0); }

/* The featured tile keeps the per-game-colored border — single
   touch of personality that says "play this one first". */
.games-tile--featured {
    border-color: var(--game-color, var(--red));
    border-width: 2px;
}

.games-tile--played { opacity: 0.7; }

/* The glyph chip is the only place the per-game color lives in
   force. Solid game-bg tint with the icon in game-color. */
.games-tile__glyph {
    width: 62px;
    height: 62px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--game-bg, var(--surface-hover));
    color: var(--game-color, var(--red));
    flex-shrink: 0;
}

[data-theme="dark"] .games-tile__glyph {
    background: var(--game-bg-dark, var(--surface));
}

/* Eyebrow tag and rule body switch to Inter — matches the
   desktop prototype, which uses --font-body (Inter) for both. The
   contrast against the Druk Wide tile name is sharper than when
   they were stacked in the same Druk family. */
.games-tile__tag {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Druk Wide on tile names — matches the prototype's titling. Tiles
   are now fixed 200px wide so the name doesn't have to shrink at a
   6-col layout; we can hold a single confident size and let it sit
   loose with +1px tracking. */
.games-tile__name {
    font-family: 'Druk Wide', var(--font-display);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 0.98;
    color: var(--text);
}

.games-tile__rule {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary);
    flex: 1;
}

.games-tile__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-headline);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-top: auto;
}

.games-tile__streak,
.games-tile__estimate {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Streak retains the brand red on its flame; estimate uses the muted
   tile-foot color so "Play →" remains the only red CTA on the tile
   — the eye should land on the action, not the time. */
.games-tile__streak svg { color: var(--red); }
.games-tile__estimate svg { color: currentColor; opacity: 0.65; }

.games-tile__play {
    color: var(--red);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap var(--games-motion-fast) ease;
}

.games-tile:hover .games-tile__play { gap: 8px; }

/* ── Right rail ─────────────────────────────────────────────────── */

.games-rail {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.games-rail__section {
    padding: 18px 16px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 18px;
}

[data-theme="dark"] .games-rail__section {
    background: var(--surface);
}

.games-rail__heading {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--text);
}

.games-rail__sample-pill {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: var(--border);
    color: var(--text-secondary);
    border-radius: 999px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: 1px;
}

/* Cross-Canada Trail — deep-blue gradient card, promoted to rail
   hero. Matches /tmp/games-design/eh-games/project/desktop.css
   .dt-trail and the chip pattern from desktop.jsx:97–105. */

.games-trail {
    background: linear-gradient(135deg, #1A3852, #0F2334);
    color: #FFFFFF;
    border-radius: 18px;
    padding: 22px;
    border: none;
}

.games-trail__heading {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.85;
    margin: 0 0 6px 0;
}

.games-trail__current {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.005em;
    word-spacing: 0.04em;
    color: #FFFFFF;
    line-height: 1.05;
}

.games-trail__progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.games-trail__bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
}

.games-trail__bar-fill {
    height: 100%;
    background: var(--red);
    transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.games-trail__count {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0;
}

.games-trail__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.games-trail__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--red);
    color: #FFFFFF;
    border-radius: 999px;
    padding: 3px 10px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.games-trail__chip svg { stroke-width: 2.5; }

.games-trail__chip--more {
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
}

/* ── Leaderboard rows ───────────────────────────────────────────── */

.games-lb {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.games-lb__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-headline);
    font-size: 13px;
}

.games-lb__row:last-child { border-bottom: none; }

.games-lb__row--you {
    background: rgba(255, 0, 0, 0.04);
    border-radius: var(--radius-sm);
    margin: 0 -8px;
    padding: 8px 12px;
}

[data-theme="dark"] .games-lb__row--you {
    background: rgba(255, 0, 0, 0.10);
}

.games-lb__rank {
    width: 22px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

.games-lb__rank--top { color: var(--red); }

.games-lb__avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--surface-hover);
    display: grid;
    place-items: center;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 12px;
    color: var(--text);
}

.games-lb__name {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.games-lb__name-display {
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.games-lb__name-loc {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
}

.games-lb__score {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0;
    color: var(--text);
}

.games-lb__empty,
.games-lb__error {
    padding: 14px 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    background: var(--surface);
    border-radius: var(--radius-sm);
    text-align: center;
    margin: 0;
}

.games-lb__error {
    color: var(--red);
    background: color-mix(in srgb, var(--red) 6%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--red) 18%, transparent);
}

/* ── Yesterday's solution ───────────────────────────────────────── */

.games-yesterday__eyebrow {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--games-edition-tracking);
    color: var(--text-secondary);
    margin: 0;
}

.games-yesterday__answer {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.005em;
    word-spacing: 0.04em;
    color: var(--text);
    margin: 6px 0 4px;
    line-height: 1.05;
}

.games-yesterday__stat {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

/* ── Modal ─────────────────────────────────────────────────────── */

.games-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9000;
    display: grid;
    place-items: center;
    padding: 0;
}

/* The HTML hidden attribute is normally a UA `display: none`, but
   .games-modal above re-asserts display: grid. Restore the
   attribute's default so the closed modal can't intercept clicks. */
.games-modal[hidden] { display: none; }

@media (min-width: 769px) {
    .games-modal { padding: 32px; }
}

.games-modal__inner {
    background: var(--bg);
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    position: relative;
}

@media (min-width: 769px) {
    .games-modal__inner {
        max-width: 720px;
        max-height: calc(100vh - 64px);
        height: auto;
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        padding: 24px;
    }
}

body.games-modal-open { overflow: hidden; }

/* Reserve a stable line-height for any [data-status] element
   inside a puzzle. Several games show transient guidance ("Fill
   every square to check.", "Not quite — keep trying.") that
   appears + disappears; without a reserved height the surrounding
   layout jumps every time the message toggles. */
.games-modal__inner [data-status] {
    min-height: 1.4em;
    margin: 0;
}

/* Shared modal header — every puzzle's pop-out uses this same
   strip so the icon, edition kicker, tagline, and close button
   read identically across all six games. The wrapping
   ``data-game-theme`` paints the glyph chip in the puzzle's
   color tokens. */
.games-modal__header {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    /* Reserve room on the right so the absolutely-positioned
       close button never overlaps the title at any width. */
    padding-right: 56px;
    border-bottom: 1px solid var(--border);
}

.games-modal__glyph {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--game-bg, var(--surface-hover));
    color: var(--game-color, var(--red));
    flex-shrink: 0;
}

[data-theme="dark"] .games-modal__glyph {
    background: var(--game-bg-dark, var(--surface));
}

.games-modal__heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.games-modal__eyebrow {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0;
}

.games-modal__title {
    font-family: 'Druk Wide', var(--font-display);
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.0;
    color: var(--text);
    margin: 0;
}

/* Close button is pinned to the modal inner's top-right via
   absolute positioning so its position stays put regardless of
   header content (different titles / wider taglines / etc.). */
.games-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--games-motion-fast) ease;
}

@media (min-width: 769px) {
    .games-modal__close { top: 24px; right: 24px; }
}

.games-modal__close:hover { background: var(--surface-hover, var(--surface)); }
.games-modal__close svg { width: 20px; height: 20px; }

/* ── Result modal ───────────────────────────────────────────────── */

.games-result {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px 24px;
    text-align: center;
}

.games-result__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: background var(--games-motion-fast) ease, color var(--games-motion-fast) ease;
}

.games-result__close:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.games-result__eyebrow {
    font-family: var(--font-headline);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--games-edition-tracking);
    color: var(--text-secondary);
    margin: 0;
}

.games-result__headline {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 900;
    letter-spacing: var(--headline-tracking);
    color: var(--text);
    margin: 0;
    line-height: 1.05;
}

.games-result__subhead {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin: -4px 0 0;
    max-width: 32ch;
    text-align: center;
    line-height: 1.4;
}

.games-result__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 16px 12px;
    background: var(--surface);
    border-radius: var(--radius-md);
}

.games-result__points {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 900;
    color: var(--red);
    line-height: 1;
    margin: 0;
}

.games-result__stat-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    margin: 0;
}

.games-result__streak {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--red);
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.games-result__streak svg {
    flex-shrink: 0;
}

.games-result__grid {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 18px;
    line-height: 1.05;
    background: var(--surface);
    padding: 16px;
    border-radius: var(--radius-md);
    margin: 0;
    text-align: center;
    user-select: text;
    white-space: pre;
}

.games-result__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.games-result__close-btn {
    padding: 12px 22px;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}

/* Share card visual — paper-feel red broadside on top of the
   plain stat block. Lifted from
   /tmp/games-design/eh-games/project/app.css:.share-card. */

.games-result__share-card {
    border-radius: 18px;
    background: var(--red);
    color: #FFFFFF;
    padding: 18px 18px 16px;
    position: relative;
    overflow: hidden;
    margin: 0 auto 8px;
    max-width: 360px;
    text-align: left;
}

.games-result__share-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.games-result__share-card-name {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 22px;
    letter-spacing: -0.005em;
    word-spacing: 0.02em;
    line-height: 1.05;
    margin: 0;
}

/* EH! brand logo in the bottom-right of the share card.
   eh-logo-dark.svg is the inverted variant of the brand mark —
   white square with red EH! letters — sized to read against
   the red share-card background. */
.games-result__share-card-logo {
    height: 28px;
    width: auto;
    display: block;
}

.games-result__share-grid {
    margin: 14px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.games-result__share-grid-row {
    display: flex;
    gap: 4px;
}

.games-result__share-grid-cell {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
}

.games-result__share-grid-cell--hit  { background: #FFFFFF; }
.games-result__share-grid-cell--warm { background: rgba(255, 255, 255, 0.55); }
.games-result__share-grid-cell--miss { background: rgba(0, 0, 0, 0.25); }

.games-result__share-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-family: var(--font-headline);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}


.games-toast {
    position: fixed;
    bottom: max(24px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--bg);
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-family: var(--font-headline);
    font-size: 13px;
    font-weight: 600;
    z-index: 10000;
    animation: games-toast-in 200ms ease-out;
}

@keyframes games-toast-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* Confetti container */
.games-confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 11000;
}

.games-confetti span {
    position: absolute;
    bottom: 30%;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    will-change: transform, opacity;
}

/* ── Floes ─────────────────────────────────────────────────────── */

.floes {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    position: relative;
}

.floes__header { text-align: center; }

.floes__rule {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 8px 0 0 0;
}

.floes__objectives {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.floes__objectives li {
    padding: 6px 12px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    font-family: var(--font-headline);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: background var(--games-motion-fast) ease,
                color var(--games-motion-fast) ease;
}

.floes__objectives li.done {
    background: var(--game-color, var(--red));
    color: #FFFFFF;
}

.floes__current {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 900;
    text-align: center;
    color: var(--text);
    min-height: 1em;
    transition: color var(--games-motion-fast) ease;
}

.floes__current.floes__flash { color: var(--game-color, var(--red)); }

.floes__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 80px));
    gap: 8px;
    justify-content: center;
}

.floes__board {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.floes__col-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 80px));
    gap: 8px;
    /* Match the row offset (slide buttons + row gap) so column
       controls align with their grid columns. */
    padding: 0 36px;
}

.floes__col-control {
    display: grid;
    place-items: center;
}

.floes__rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.floes__row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.floes__row-cells {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 80px));
    gap: 8px;
}

.floes__slide {
    width: 28px;
    height: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--games-motion-fast) ease,
                color var(--games-motion-fast) ease;
}

.floes__slide:hover:not(:disabled) {
    background: var(--text);
    color: var(--bg);
}

.floes__slide:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.floes__slides-left {
    text-align: center;
    font-family: var(--font-headline);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--games-edition-tracking);
    color: var(--text-secondary);
}

@media (max-width: 480px) {
    .floes__col-controls,
    .floes__row-cells {
        grid-template-columns: repeat(3, minmax(0, 64px));
        gap: 6px;
    }
    .floes__col-controls { padding: 0 32px; }
}

.floes__cell {
    aspect-ratio: 1;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: grid;
    place-items: center;
    position: relative;
    transition: transform var(--games-motion-fast) ease,
                border-color var(--games-motion-fast) ease,
                background var(--games-motion-fast) ease;
    font-family: inherit;
    color: inherit;
}

.floes__cell.selected {
    border-color: var(--game-color, var(--red));
    background: rgba(13, 122, 154, 0.08);
    transform: scale(1.05);
}

.floes__cell.last {
    border-color: var(--text);
    border-width: 3px;
}

.floes__letter {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 900;
}

.floes__value {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-secondary);
}

.floes__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Maple Five ────────────────────────────────────────────────── */

.m5 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    align-items: center;
    position: relative;
}

.m5__board { display: grid; gap: 6px; }

.m5__row {
    display: grid;
    grid-template-columns: repeat(5, 56px);
    gap: 6px;
}

.m5__cell {
    width: 56px;
    height: 56px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 900;
    color: var(--text);
    transform-style: preserve-3d;
    transition: border-color var(--games-motion-fast) ease;
}

.m5__cell--flip {
    animation: m5-flip var(--games-motion-flip) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes m5-flip {
    0%, 49% {
        transform: rotateX(0);
        border-color: var(--border);
        background: var(--surface);
    }
    50%, 100% {
        transform: rotateX(180deg);
    }
}

.m5__cell--correct { background: var(--game-color, var(--red)); color: #FFFFFF; border-color: var(--game-color, var(--red)); }
.m5__cell--present { background: #d4a017; color: #FFFFFF; border-color: #d4a017; }
.m5__cell--absent  { background: var(--muted); color: #FFFFFF; border-color: var(--muted); }

.m5__keyboard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    width: 100%;
    max-width: 460px;
}

.m5__kb-row {
    display: flex;
    gap: 4px;
    justify-content: center;
    width: 100%;
}

.m5__key {
    flex: 1;
    min-width: 0;
    height: 48px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
}

.m5__key--wide { flex: 1.5; font-size: 12px; }
.m5__key--correct { background: var(--game-color, var(--red)); color: #FFFFFF; border-color: var(--game-color, var(--red)); }
.m5__key--present { background: #d4a017; color: #FFFFFF; border-color: #d4a017; }
.m5__key--absent  { background: var(--muted); color: #FFFFFF; border-color: var(--muted); }

@media (max-width: 480px) {
    .m5__row { grid-template-columns: repeat(5, 48px); }
    .m5__cell { width: 48px; height: 48px; font-size: 22px; }
}

/* ── True North Lynx ───────────────────────────────────────────── */

.lynx {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    position: relative;
}

.lynx__solved {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lynx__solved-row {
    padding: 12px;
    border-radius: var(--radius-md);
    color: #FFFFFF;
    text-align: center;
    animation: lynx-solved 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes lynx-solved {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.lynx__solved-cat {
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: var(--games-edition-tracking);
    font-size: 13px;
    margin: 0;
}

.lynx__solved-words {
    font-size: 13px;
    opacity: 0.9;
    margin: 2px 0 0 0;
}

.lynx__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

/* Shared shake utility — reused by Lynx grid (incorrect group),
   Maple Five row (invalid guess), and Maple Match tile (no
   match). Lives at the games scope so any puzzle's "wrong" feedback
   reuses the same motion. */
.games-shake { animation: games-shake 320ms ease-in-out; }
.lynx__grid--shake { animation: games-shake 320ms ease-in-out; }

@keyframes games-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.lynx__tile {
    aspect-ratio: 1.4 / 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: transform var(--games-motion-fast) ease,
                background var(--games-motion-fast) ease;
}

.lynx__tile--selected {
    background: var(--text);
    color: var(--bg);
    transform: scale(1.04);
}

.lynx__mistakes {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    font-family: var(--font-headline);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--games-edition-tracking);
}

.lynx__heart {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: var(--game-color, var(--red));
    border-radius: 50%;
    margin-right: 4px;
    transition: background 200ms ease;
}

.lynx__heart--lost { background: var(--border); }

/* ── Mini Crossword ────────────────────────────────────────────── */

.mini {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    position: relative;
    align-items: center;
}

.mini__grid {
    display: grid;
    grid-template-columns: repeat(5, 56px);
    gap: 2px;
    justify-content: center;
}

.mini__cell-wrap {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
}

.mini__cell {
    width: 100%;
    height: 100%;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    color: var(--text);
    padding: 0;
}

.mini__cell-num {
    position: absolute;
    top: 2px;
    left: 4px;
    font-family: var(--font-headline);
    font-size: 9px;
    font-weight: 700;
    color: var(--text-secondary);
    pointer-events: none;
    line-height: 1;
}

.mini__cell--black {
    background: var(--text);
    border: 2px solid var(--text);
    border-radius: var(--radius-sm);
    pointer-events: none;
    width: 56px;
    height: 56px;
}

.mini__cell:focus {
    outline: 2px solid var(--game-color, var(--red));
    outline-offset: 1px;
}

.mini__clues {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    font-size: 13px;
    width: 100%;
}

.mini__clues h4 {
    font-family: var(--font-headline);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--games-edition-tracking);
    margin: 0 0 6px 0;
    color: var(--text-secondary);
}

.mini__clues ol { padding-left: 18px; margin: 0; }
.mini__clues li { padding: 2px 0; }

@media (max-width: 480px) {
    .mini__grid { grid-template-columns: repeat(5, 48px); }
    .mini__cell-wrap, .mini__cell--black { width: 48px; height: 48px; }
    .mini__cell { font-size: 20px; }
}

/* ── Maple Match ───────────────────────────────────────────────── */
/*
   Layout: 4×4 grid sized to the modal width. Tiles are placed by
   --row/--col CSS variables driving grid-row/grid-column, so the JS
   never has to know cell coordinates in pixels. Slides animate via
   --slide-dx/--slide-dy (integer cell counts), with the CSS doing
   the math (cell width + gap). When a slide settles, the JS commits
   the new --row/--col and clears the slide vars in the same frame —
   no jump. .mm__tile--no-transition is the one-frame escape hatch
   for wrapping tiles (they teleport across the board) and for the
   commit-after-slide step. */

.mm {
    --mm-gap: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    position: relative;
    align-items: center;
}

.mm__status {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.mm__board {
    display: grid;
    grid-template-columns: repeat(var(--mm-size, 4), 1fr);
    grid-template-rows: repeat(var(--mm-size, 4), 1fr);
    gap: var(--mm-gap);
    width: min(100%, 360px);
    aspect-ratio: 1;
}

.mm__tile {
    grid-column: calc(var(--col, 0) + 1);
    grid-row: calc(var(--row, 0) + 1);
    /* Card back: warm maple-syrup orange. The faint maple silhouette
       inside (.mm__back) gives the back its theme without exposing
       any per-tile identity. */
    background: var(--game-color, #B95E1F);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /* Slide deltas come from JS as integer cell counts; multiply by
       (100% + gap) so the visual lands exactly on the destination
       cell at any viewport size. */
    transform: translate(
        calc((100% + var(--mm-gap)) * var(--slide-dx, 0)),
        calc((100% + var(--mm-gap)) * var(--slide-dy, 0))
    );
    transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 400ms ease,
                background 240ms ease;
}

.mm__tile--no-transition {
    transition: none !important;
}

/* Two stacked layers: the card back (faint maple silhouette) sits
   underneath, and the face icon stacks on top. Both fill the tile so
   the % sizing on the inner svg follows the tile's responsive size. */
.mm__back,
.mm__face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transition: opacity 220ms ease;
}

/* The back is a thin inset border drawn with CSS — no SVG silhouette,
   no per-tile decoration. Uniform across all 16 tiles is exactly
   what a memory-game card back should be: calm, identical, neutral. */
.mm__back {
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: calc(var(--radius-sm) - 4px);
    inset: 6px;
}

.mm__face {
    color: var(--game-color, var(--red));
    opacity: 0;
}

/* CSS overrides the svgIcon helper's width/height attributes so the
   icons scale with the tile, not at the helper's hard-coded 48px. */
.mm__face svg { width: 62%; height: 62%; stroke-width: 1.8; }

/* Face-up state: light cream background, full-strength icon, hide
   back silhouette. Used by both the start-of-game reveal phase
   (-revealed) and the in-game tap reveal (-selected). */
.mm__tile--revealed,
.mm__tile--selected {
    background: #FFFFFF;
}

[data-theme="dark"] .mm__tile--revealed,
[data-theme="dark"] .mm__tile--selected {
    background: var(--surface);
}

.mm__tile--revealed .mm__back,
.mm__tile--selected .mm__back { opacity: 0; }

.mm__tile--revealed .mm__face,
.mm__tile--selected .mm__face { opacity: 1; }

.mm__tile--gone {
    opacity: 0;
    pointer-events: none;
}

.mm__tile--miss { animation: games-shake 320ms; }
.mm__tile--miss .mm__face { opacity: 1; }
.mm__tile--miss .mm__back { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .mm__tile { transition: opacity 200ms ease, background 100ms ease; }
    .mm__back, .mm__face { transition: none; }
}

/* ── Loonie Lineup ─────────────────────────────────────────────── */

.lo {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    align-items: center;
    position: relative;
}

.lo__board {
    display: grid;
    grid-template-columns: repeat(6, 48px);
    gap: 1px;
    background: var(--text);
    padding: 1px;
}

.lo__cell {
    width: 48px;
    height: 48px;
    background: var(--bg);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 900;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.lo__cell--given {
    color: var(--text-secondary);
    cursor: default;
}

.lo__cell--active {
    outline: 2px solid var(--game-color, var(--red));
    background: rgba(165, 133, 63, 0.08);
    outline-offset: -2px;
}

.lo__cell--error { color: var(--game-color, var(--red)); }

.lo__pad {
    display: grid;
    grid-template-columns: repeat(7, minmax(40px, 56px));
    gap: 4px;
}

.lo__pad button {
    aspect-ratio: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
    color: var(--text);
}

@media (max-width: 480px) {
    .lo__board { grid-template-columns: repeat(6, 44px); }
    .lo__cell { width: 44px; height: 44px; font-size: 20px; }
}