:root {
    --bg-night: #071a33;
    --bg-deep: #0b3150;
    --bg-shadow: #04111b;
    --paper: #fff6e7;
    --paper-strong: #fffdf6;
    --paper-soft: #f1dec0;
    --paper-edge: rgba(112, 65, 26, 0.22);
    --ink-1: #2b1b14;
    --ink-2: #624739;
    --ink-3: #90796a;
    --line-soft: rgba(90, 58, 35, 0.14);
    --line-mid: rgba(90, 58, 35, 0.24);
    --line-strong: rgba(90, 58, 35, 0.38);
    --accent: #35bfd6;
    --accent-2: #7ee05d;
    --accent-grad: linear-gradient(135deg, #36bfd8 0%, #7ee05d 58%, #e847a6 100%);
    --accent-glow: rgba(54, 191, 216, 0.28);
    --human: #1fc97d;
    --human-dark: #0c9158;
    --human-soft: rgba(31, 201, 125, 0.16);
    --human-glow: rgba(31, 201, 125, 0.34);
    --ai: #ffbf33;
    --ai-dark: #dd8b08;
    --ai-soft: rgba(255, 191, 51, 0.18);
    --ai-glow: rgba(255, 191, 51, 0.38);
    --red: #ff6b6b;
    --blue: #66a6ff;
    --safe: #78c7ff;
    --success: #1fc97d;
    --danger: #ff756d;
    --warn: #ffbf33;
    --radius-xs: 10px;
    --radius-sm: 14px;
    --radius: 22px;
    --radius-lg: 28px;
    --radius-xl: 34px;
    /* Board cell size adapts to viewport so the play page fits in 100dvh
       on most laptops without any page scroll. clamp(min, ideal, max) — the
       ideal subtracts ~290px of chrome (topnav, play strip, board-stage
       padding+header, dice tray, gaps). Caps at 32px so it doesn't get
       gigantic on big monitors. */
    --cell-size: clamp(22px, calc((100dvh - 290px) / 15), 32px);
    --token-size: 30px;
    --board-gap: 0px;
    --board-pad: 3px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    font-family: 'Manrope', system-ui, sans-serif;
    color: #f7f0e2;
    background:
        radial-gradient(circle at 16% 18%, rgba(54, 191, 216, 0.18), transparent 28%),
        radial-gradient(circle at 86% 20%, rgba(232, 71, 166, 0.14), transparent 25%),
        radial-gradient(circle at 22% 88%, rgba(126, 224, 93, 0.13), transparent 24%),
        linear-gradient(180deg, #12365b 0%, var(--bg-night) 56%, #061020 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.018) 0 8px,
            transparent 8px 16px
        );
    opacity: 0.4;
}

.table-lights {
    position: fixed;
    inset: auto;
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    opacity: 0.7;
    z-index: 0;
}

.table-lights-a {
    top: -8vw;
    left: -6vw;
    background: rgba(54, 191, 216, 0.14);
}

.table-lights-b {
    right: -8vw;
    bottom: -10vw;
    background: rgba(232, 71, 166, 0.1);
}

.app {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    padding: 24px;
}

.header {
    max-width: 1480px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(64, 211, 225, 0.11), rgba(232, 71, 166, 0.04)),
        rgba(7, 21, 38, 0.58);
    border: 1px solid rgba(89, 218, 224, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 20px 50px rgba(2, 10, 18, 0.28);
    backdrop-filter: blur(18px);
}

.logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo-mark {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: block;
    object-fit: cover;
    background: #ffffff;
    padding: 4px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.7),
        0 12px 24px rgba(54, 191, 216, 0.22);
}

.logo-copy h1 {
    font-family: 'Sora', sans-serif;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.05em;
}

.accent {
    color: #38c4db;
}

.eyebrow,
.card-kicker,
.score-label-text,
.win-chance-label,
.ai-probs-label,
.game-log h4,
.win-chance-vs {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 800;
    font-size: 11px;
}

.eyebrow {
    color: rgba(207, 247, 252, 0.72);
    margin-bottom: 6px;
}

.model-chip {
    margin-left: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(54, 191, 216, 0.14);
    color: #c9fbff;
    border: 1px solid rgba(54, 191, 216, 0.28);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.model-chip::after {
    content: '↗';
    margin-left: 6px;
    opacity: 0.6;
    font-size: 11px;
}

.model-chip:hover {
    background: rgba(54, 191, 216, 0.24);
    border-color: rgba(54, 191, 216, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(54, 191, 216, 0.18);
}

.model-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.game-container {
    max-width: 1480px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(280px, 320px);
    gap: 22px;
    align-items: start;
}

.left-column,
.right-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.player-card,
.control-panel,
.game-log,
.board-stage,
.modal {
    color: var(--ink-1);
}

.player-card,
.game-log {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--paper-edge);
    background:
        linear-gradient(180deg, rgba(255, 253, 246, 0.96), rgba(244, 229, 200, 0.96)),
        var(--paper);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 18px 38px rgba(6, 16, 26, 0.24);
}

.player-card::before,
.game-log::before,
.board-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.player-card {
    padding: 20px;
}

.player-card.human::before {
    background: linear-gradient(160deg, rgba(31, 201, 125, 0.14), transparent 48%);
}

.player-card.ai::before {
    background: linear-gradient(160deg, rgba(255, 191, 51, 0.16), transparent 48%);
}

.player-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.player-avatar {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 28px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 -10px 14px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.human-avatar {
    background: linear-gradient(160deg, #52efaa, #13a86c);
}

.ai-avatar {
    background: linear-gradient(160deg, #ffd765, #ee9f1f);
}

.player-name-block {
    flex: 1;
}

.card-kicker {
    color: var(--ink-3);
    margin-bottom: 4px;
}

.player-card h3 {
    font-family: 'Sora', sans-serif;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.04em;
    margin-bottom: 4px;
}

.player-card h3.player-name {
    margin-bottom: 6px;
}

.player-name-btn {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    padding: 2px 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    transition: color 0.15s ease, transform 0.12s ease;
}

.player-name-btn:hover {
    color: var(--human-dark);
}

.player-name-btn:focus-visible {
    outline: 2px solid var(--human);
    outline-offset: 3px;
}

.player-name-edit {
    font-size: 14px;
    color: var(--ink-3);
    opacity: 0.6;
    transition: opacity 0.15s ease;
    line-height: 1;
}

.player-name-btn:hover .player-name-edit {
    opacity: 1;
}

.player-record {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.4;
    margin: 0;
}

.player-subtitle {
    font-size: 13px;
    color: var(--ink-3);
}

.score-display,
.win-chance,
.ai-probs-wrapper,
.turn-indicator {
    position: relative;
    z-index: 1;
    border-radius: 18px;
    border: 1px solid rgba(112, 65, 26, 0.16);
    background: rgba(255, 255, 255, 0.48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.score-display {
    padding: 14px;
    margin-bottom: 14px;
}

.score-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.score-label-text {
    color: var(--ink-3);
}

.score-label {
    color: var(--ink-1);
    font-size: 17px;
    font-weight: 800;
    font-family: 'IBM Plex Mono', monospace;
}

.player-card.human .score-label {
    color: var(--human-dark);
}

.player-card.ai .score-label {
    color: var(--ai-dark);
}

.score-tokens {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.scored-token {
    flex: 1;
    max-width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: rgba(255, 255, 255, 0.3);
    opacity: 0.3;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.scored-token.active {
    opacity: 1;
    transform: translateY(-1px) scale(1.04);
}

.scored-token.human-color {
    color: var(--human-dark);
}

.scored-token.human-color.active {
    background: radial-gradient(circle at 30% 30%, #59f1b2, var(--human-dark));
    box-shadow: 0 0 0 4px rgba(31, 201, 125, 0.14);
}

.scored-token.ai-color {
    color: var(--ai-dark);
}

.scored-token.ai-color.active {
    background: radial-gradient(circle at 30% 30%, #ffe17f, var(--ai-dark));
    box-shadow: 0 0 0 4px rgba(255, 191, 51, 0.16);
}

.status-pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    border-radius: 999px;
    border: 1px solid rgba(112, 65, 26, 0.15);
    background: rgba(255, 255, 255, 0.45);
    color: var(--ink-3);
    font-weight: 700;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
}

.status-pill.active {
    color: var(--ink-1);
}

.player-card.human .status-pill.active {
    border-color: rgba(31, 201, 125, 0.34);
    background: rgba(31, 201, 125, 0.12);
    color: var(--human-dark);
}

.player-card.ai .status-pill.active {
    border-color: rgba(255, 191, 51, 0.34);
    background: rgba(255, 191, 51, 0.14);
    color: #a16100;
}

.player-card .status-pill.active .status-dot {
    opacity: 1;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.32);
    animation: pulse-dot 1.2s infinite;
}

@keyframes pulse-dot {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.25);
    }
}

.game-log {
    padding: 18px;
}

/* Dice tray — sits centred BELOW the board on desktop, becomes a sticky
   bottom bar on mobile (see media query below). The play-route override
   further down sets layout/spacing details; this is the base. */
.control-panel {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

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

.dice-kbd-hint {
    color: rgba(255, 247, 232, 0.55);
    font-size: 11px;
    font-weight: 600;
    margin: 0;
    font-family: 'IBM Plex Mono', monospace;
}

.dice-kbd-hint kbd {
    display: inline-block;
    padding: 1px 6px;
    margin: 0 2px;
    border-radius: 5px;
    font-family: inherit;
    font-size: 10px;
    color: rgba(255, 247, 232, 0.85);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.dice {
    appearance: none;
    -webkit-appearance: none;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-family: 'Sora', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: #ffffff;
    background:
        radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.6), transparent 28%),
        linear-gradient(165deg, #ff9a5e, #d74e2a);
    border: 3px solid rgba(255, 255, 255, 0.58);
    box-shadow:
        inset 0 -12px 18px rgba(96, 26, 8, 0.28),
        0 18px 28px rgba(215, 78, 42, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    user-select: none;
    padding: 0;
    line-height: 1;
}

.dice:focus-visible {
    outline: none;
    box-shadow:
        inset 0 -12px 18px rgba(96, 26, 8, 0.28),
        0 0 0 4px rgba(89, 218, 224, 0.55),
        0 18px 28px rgba(215, 78, 42, 0.3);
}

/* Pulse the dice when it's the player's turn and a roll is expected */
.dice.ready {
    animation: dice-pulse 1.6s ease-in-out infinite;
}

@keyframes dice-pulse {
    0%, 100% {
        box-shadow:
            inset 0 -12px 18px rgba(96, 26, 8, 0.28),
            0 18px 28px rgba(215, 78, 42, 0.25),
            0 0 0 0 rgba(255, 154, 94, 0.5);
    }
    50% {
        box-shadow:
            inset 0 -12px 18px rgba(96, 26, 8, 0.28),
            0 18px 28px rgba(215, 78, 42, 0.32),
            0 0 0 12px rgba(255, 154, 94, 0);
    }
}

.dice:hover {
    transform: translateY(-2px) rotate(-4deg);
    box-shadow:
        inset 0 -12px 18px rgba(96, 26, 8, 0.28),
        0 22px 34px rgba(215, 78, 42, 0.34);
}

.dice:active {
    transform: scale(0.96);
}

.dice.rolling {
    pointer-events: none;
    animation: dice-shake 0.45s ease-in-out;
}

.dice.disabled {
    pointer-events: none;
    cursor: default;
    filter: grayscale(0.2) saturate(0.55);
    opacity: 0.55;
}

@keyframes dice-shake {
    0%,
    100% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(-12deg) scale(1.04);
    }
    45% {
        transform: rotate(10deg) scale(1.02);
    }
    70% {
        transform: rotate(-8deg);
    }
}

.dice-hint {
    min-height: 18px;
    color: var(--ink-3);
    font-size: 13px;
    font-weight: 700;
}

.btn {
    border: none;
    border-radius: 999px;
    padding: 12px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn:hover,
.btn:focus,
.btn:visited {
    text-decoration: none;
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    color: #ffffff;
    /* Dark surface with a thin gradient outline (drawn via two stacked
       backgrounds) and a tinted shadow. Far more readable than white-on
       -bright-gradient. */
    background:
        linear-gradient(180deg, #11304b 0%, #0a2236 100%) padding-box,
        var(--accent-grad) border-box;
    border: 1.5px solid transparent;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 28px rgba(54, 191, 216, 0.22),
        0 4px 10px rgba(0, 0, 0, 0.35);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    letter-spacing: 0.01em;
}

.btn-primary:hover {
    transform: translateY(-1px);
    background:
        linear-gradient(180deg, #173a59 0%, #0d2940 100%) padding-box,
        var(--accent-grad) border-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 14px 34px rgba(54, 191, 216, 0.32),
        0 6px 14px rgba(0, 0, 0, 0.4);
}

.btn-ghost {
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.26);
}

.btn-icon {
    font-size: 16px;
    line-height: 1;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.game-log h4 {
    color: var(--ink-2);
}

.log-entries {
    max-height: 360px;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    padding-right: 4px;
}

.log-entry {
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.45;
    font-family: 'IBM Plex Mono', monospace;
    border: 1px solid rgba(112, 65, 26, 0.12);
    background: rgba(255, 255, 255, 0.46);
    color: var(--ink-2);
}

.log-entry.human-log {
    border-left: 4px solid var(--human);
    background: linear-gradient(90deg, rgba(31, 201, 125, 0.12), rgba(255, 255, 255, 0.5));
}

.log-entry.ai-log {
    border-left: 4px solid var(--ai);
    background: linear-gradient(90deg, rgba(255, 191, 51, 0.14), rgba(255, 255, 255, 0.52));
}

.log-entry.system-log {
    border-left: 4px solid rgba(112, 65, 26, 0.24);
    color: var(--ink-3);
}

.board-stage {
    position: relative;
    overflow: hidden;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 241, 218, 0.1);
    background:
        linear-gradient(180deg, rgba(255, 253, 246, 0.1), rgba(255, 253, 246, 0.04)),
        rgba(7, 21, 33, 0.52);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 24px 64px rgba(2, 10, 18, 0.34);
    backdrop-filter: blur(16px);
}

.board-stage::before {
    background:
        radial-gradient(circle at top left, rgba(31, 201, 125, 0.12), transparent 32%),
        radial-gradient(circle at bottom right, rgba(255, 191, 51, 0.14), transparent 30%);
}

.board-stage-header {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.round-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 239, 211, 0.13);
    color: rgba(255, 247, 232, 0.86);
    font-size: 12px;
    font-weight: 800;
}

.round-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.75);
}

.human-dot {
    background: var(--human);
}

.ai-dot {
    background: var(--ai);
}

.round-vs {
    color: rgba(255, 247, 232, 0.5);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
}

.turn-indicator {
    flex-shrink: 0;
    min-width: 120px;
    padding: 8px 14px;
    text-align: center;
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    line-height: 1.2;
    color: #073e27;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 4px 10px rgba(0, 0, 0, 0.18);
}

.turn-indicator.human-turn {
    background: linear-gradient(180deg, #f6fff8 0%, #a8f2ca 100%);
    border-color: rgba(31, 201, 125, 0.7);
    color: #087044;
}

.turn-indicator.ai-turn {
    background: linear-gradient(180deg, #fff9da 0%, #ffd562 100%);
    border-color: rgba(255, 191, 51, 0.72);
    color: #7b4d00;
}

.board-shell {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 2px 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.board-shell::-webkit-scrollbar {
    display: none;
}

.board-frame {
    position: relative;
    width: max-content;
    padding: 10px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow:
        inset 0 0 0 2px rgba(42, 38, 32, 0.08),
        0 18px 30px rgba(3, 10, 17, 0.2);
}

.board-frame::before {
    display: none;
}

.board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(15, var(--cell-size));
    grid-template-rows: repeat(15, var(--cell-size));
    gap: 0;
    padding: var(--board-pad);
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(31, 31, 31, 0.14);
}

.board::before {
    content: '';
    position: absolute;
    left: calc(var(--board-pad) + (var(--cell-size) * 6));
    top: calc(var(--board-pad) + (var(--cell-size) * 6));
    width: calc(var(--cell-size) * 3);
    height: calc(var(--cell-size) * 3);
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(135deg, transparent 49.4%, rgba(20, 20, 20, 0.32) 49.6%, rgba(20, 20, 20, 0.32) 50.4%, transparent 50.6%),
        linear-gradient(45deg, transparent 49.4%, rgba(20, 20, 20, 0.32) 49.6%, rgba(20, 20, 20, 0.32) 50.4%, transparent 50.6%),
        conic-gradient(from -45deg, #ed1c24 0 25%, #ffdf00 25% 50%, #25aee4 50% 75%, #32b94a 75% 100%);
    border: 1px solid rgba(20, 20, 20, 0.35);
}

.cell {
    position: relative;
    z-index: 1;
    width: var(--cell-size);
    height: var(--cell-size);
    border-radius: 0;
    border: 1px solid rgba(42, 42, 42, 0.16);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.cell.empty {
    background: #ffffff;
    border-color: rgba(42, 42, 42, 0.1);
}

.cell.path {
    background: #ffffff;
    border-color: rgba(42, 42, 42, 0.18);
}

.cell.safe {
    background: #ffffff;
    border-color: rgba(42, 42, 42, 0.18);
}

.cell.safe::after {
    content: '★';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(58, 58, 58, 0.7);
    font-size: 22px;
    line-height: 1;
}

.cell.corner-green {
    background: #32b94a;
    border-color: rgba(31, 31, 31, 0.06);
}

.cell.corner-red {
    background: #ed1c24;
    border-color: rgba(31, 31, 31, 0.06);
}

.cell.corner-yellow {
    background: #ffdf00;
    border-color: rgba(31, 31, 31, 0.06);
}

.cell.corner-blue {
    background: #25aee4;
    border-color: rgba(31, 31, 31, 0.06);
}

.cell.yard-cell {
    background: #ffffff;
    border-color: rgba(42, 42, 42, 0.08);
}

.cell.home-run-0 {
    background: #32b94a;
    border-color: rgba(42, 42, 42, 0.18);
}

.cell.home-run-1 {
    background: #ed1c24;
    border-color: rgba(42, 42, 42, 0.18);
}

.cell.home-run-2 {
    background: #ffdf00;
    border-color: rgba(42, 42, 42, 0.18);
}

.cell.home-run-3 {
    background: #25aee4;
    border-color: rgba(42, 42, 42, 0.18);
}

.cell.home-center {
    background: transparent;
    border-color: transparent;
}

.cell.base-0,
.cell.base-1,
.cell.base-2,
.cell.base-3 {
    border-radius: 50%;
    margin: 5px;
    width: calc(var(--cell-size) - 10px);
    height: calc(var(--cell-size) - 10px);
    background: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        inset 0 0 0 3px rgba(42, 42, 42, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.12);
}

.cell.base-0 {
    outline: 3px solid #32b94a;
}

.cell.base-1 {
    outline: 3px solid #ed1c24;
}

.cell.base-2 {
    outline: 3px solid #ffdf00;
}

.cell.base-3 {
    outline: 3px solid #25aee4;
}

.cell.spawn-0 {
    box-shadow: inset 0 0 0 3px rgba(50, 185, 74, 0.28);
}

.cell.spawn-1 {
    box-shadow: inset 0 0 0 3px rgba(237, 28, 36, 0.28);
}

.cell.spawn-2 {
    box-shadow: inset 0 0 0 3px rgba(255, 223, 0, 0.35);
}

.cell.spawn-3 {
    box-shadow: inset 0 0 0 3px rgba(37, 174, 228, 0.3);
}

.token {
    position: absolute;
    z-index: 3;
    width: var(--token-size);
    height: var(--token-size);
    display: block;
    transition: left 0.35s ease, top 0.35s ease, transform 0.2s ease, filter 0.2s ease;
    pointer-events: none;
    filter: drop-shadow(0 4px 5px rgba(14, 24, 34, 0.22));
}

.token::before,
.token::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
}

.token::before {
    top: 1%;
    width: 48%;
    height: 48%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.96);
}

.token::after {
    bottom: 1%;
    width: 78%;
    height: 58%;
    border-radius: 48% 48% 34% 34% / 54% 54% 18% 18%;
    border: 2px solid rgba(255, 255, 255, 0.96);
}

.token-label {
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
    z-index: 1;
    min-width: 32%;
    height: 20%;
    padding: 0 2px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.88);
    color: #6b4b2d;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
}

.token.player-0::before,
.token.player-0::after {
    background: linear-gradient(180deg, #84e8b1 0%, #0d8c4f 50%, #043e22 100%);
    box-shadow: 0 0 0 1px rgba(8, 30, 18, 0.55);
}

.token.player-2::before,
.token.player-2::after {
    background: linear-gradient(180deg, #ffd968 0%, #b67400 50%, #5a3a00 100%);
    box-shadow: 0 0 0 1px rgba(36, 22, 0, 0.55);
}

/* Tokens the human can move on this turn — must be obviously, undeniably
   tappable. Three signals stacked: a saturated drop-shadow halo, a strong
   scale pulse, and a "ping" ring (an expanding rgba box-shadow that fades
   out) drawn on the .token's bounding box. */
.token.legal-move {
    pointer-events: all;
    cursor: pointer;
    border-radius: 50%;          /* makes the box-shadow ring circular */
    animation: pulse-legal 1.05s infinite ease-in-out;
    z-index: 50;                 /* float over neighbours so the ring isn't clipped */
}

.token.player-0.legal-move {
    filter:
        drop-shadow(0 0 8px rgba(31, 201, 125, 0.95))
        drop-shadow(0 0 16px rgba(31, 201, 125, 0.55))
        drop-shadow(0 4px 6px rgba(14, 24, 34, 0.22));
}

.token.player-2.legal-move {
    filter:
        drop-shadow(0 0 8px rgba(255, 191, 51, 0.95))
        drop-shadow(0 0 16px rgba(255, 191, 51, 0.55))
        drop-shadow(0 4px 6px rgba(14, 24, 34, 0.22));
}

@keyframes pulse-legal {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(31, 201, 125, 0.85);
    }
    50% {
        transform: scale(1.18);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 14px rgba(31, 201, 125, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .token.legal-move {
        animation: legal-static-glow 1.6s infinite ease-in-out;
    }
    @keyframes legal-static-glow {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }
}

.ai-thinking {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 191, 51, 0.12);
    color: #8a5800;
    border: 1px solid rgba(255, 191, 51, 0.22);
    font-weight: 700;
}

.ai-thinking.show {
    display: flex;
}

.thinking-dots {
    display: flex;
    gap: 4px;
}

.thinking-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: dot-pulse 1.2s infinite ease-in-out;
}

.thinking-dots span:nth-child(2) {
    animation-delay: 0.16s;
}

.thinking-dots span:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes dot-pulse {
    0%,
    80%,
    100% {
        transform: scale(0.7);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.win-chance,
.ai-probs-wrapper {
    margin-top: 14px;
    padding: 14px;
}

.win-chance-label,
.ai-probs-label {
    color: var(--ink-3);
    margin-bottom: 10px;
}

.win-chance-bar {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(112, 65, 26, 0.15);
    background: linear-gradient(90deg, rgba(31, 201, 125, 0.26), rgba(102, 166, 255, 0.26));
}

.win-chance-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffbf33 0%, #ff7a59 100%);
    border-radius: inherit;
    transition: width 0.35s ease;
    box-shadow: 0 0 16px rgba(255, 122, 89, 0.22);
}

.win-chance-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    gap: 8px;
    font-size: 12px;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
}

#winChanceAi {
    color: #b36b00;
}

#winChanceHuman {
    color: var(--human-dark);
}

.win-chance-vs {
    color: var(--ink-3);
    font-size: 10px;
}

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

.prob-row {
    display: grid;
    grid-template-columns: 30px 1fr 48px auto;
    align-items: center;
    gap: 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--ink-2);
    border-radius: 6px;
    padding: 2px 4px;
    transition: background 0.15s ease;
}

.prob-tags {
    display: flex;
    gap: 4px;
    justify-self: end;
}
.prob-tags .tag {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.4;
}
.prob-tags .tag.ai {
    background: #f09d20;
    color: #2a1500;
}

.prob-label {
    font-weight: 700;
}

.prob-bar {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(112, 65, 26, 0.1);
}

.prob-fill {
    display: block;
    height: 100%;
    background: rgba(112, 65, 26, 0.22);
    border-radius: inherit;
    transition: width 0.3s ease;
}

.prob-row.chosen .prob-label,
.prob-row.chosen .prob-pct {
    color: #965f00;
}

.prob-row.chosen .prob-fill {
    background: linear-gradient(90deg, #ffd15f, #f09d20);
}

.prob-row.illegal {
    opacity: 0.48;
}

.prob-row.illegal .prob-pct,
.prob-row.illegal .prob-label {
    text-decoration: line-through;
}

.prob-pct {
    text-align: right;
    font-weight: 700;
}

.message-area {
    position: relative;
    z-index: 1;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fef1d8;
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    line-height: 1.45;
    padding: 0 18px;
}

.message-area.flash {
    animation: msg-flash 0.5s ease;
}

@keyframes msg-flash {
    0% {
        transform: translateY(3px);
        opacity: 0.7;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(6, 15, 24, 0.72);
    backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-overlay.show {
    display: flex;
}

.modal {
    width: min(100%, 420px);
    padding: 34px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 232, 206, 0.98));
    border: 1px solid rgba(112, 65, 26, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 30px 60px rgba(0, 0, 0, 0.22);
    text-align: center;
    animation: modal-pop 0.3s ease;
}

@keyframes modal-pop {
    from {
        transform: translateY(10px) scale(0.97);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.modal-icon {
    font-size: 54px;
    margin-bottom: 12px;
}

.modal h2 {
    font-family: 'Sora', sans-serif;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -0.05em;
    margin-bottom: 8px;
}

.modal p {
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 22px;
}

.modal-stats {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: var(--human-dark);
    margin-top: -8px;
    margin-bottom: 18px;
    padding: 8px 14px;
    background: rgba(31, 201, 125, 0.1);
    border: 1px solid rgba(31, 201, 125, 0.22);
    border-radius: 999px;
    display: inline-block;
}

.modal-stats:empty {
    display: none;
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 240, 219, 0.22);
    border-radius: 999px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

@media (max-width: 1280px) {
    .game-container {
        grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(260px, 300px);
    }

    .board-stage {
        padding: 22px;
    }
}

@media (max-width: 1120px) {
    .game-container {
        grid-template-columns: 1fr;
    }

    .left-column,
    .right-column {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .game-log {
        grid-column: 1 / -1;
    }

    .board-stage-header {
        flex-direction: column;
        align-items: stretch;
    }

    .turn-indicator {
        min-width: 0;
        width: 100%;
    }
}

/* ============================================================
   MOBILE-OPTIMIZED LAYOUT (≤760px)
   - Board front-and-center
   - Dice + score as sticky bars (always visible, no scrolling away)
   - Player cards / log / AI probs collapse below board
   - Desktop layout (>760px) is fully preserved
   ============================================================ */
@media (max-width: 760px) {
    :root {
        --cell-size: min(5.6vw, 28px);
        --token-size: min(3.8vw, 19px);
    }

    body {
        /* leave space at bottom for sticky dice bar */
        padding-bottom: 96px;
    }

    .app {
        padding: 8px;
        gap: 8px;
    }

    /* Header: compact, single line, sticky */
    .header {
        padding: 8px 12px;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        position: sticky;
        top: 0;
        z-index: 50;
        margin-bottom: 8px;
        background:
            linear-gradient(180deg, rgba(64, 211, 225, 0.18), rgba(232, 71, 166, 0.08)),
            rgba(7, 21, 38, 0.92);
        backdrop-filter: blur(14px);
    }

    .logo {
        flex: 1;
        gap: 8px;
        align-items: center;
        flex-wrap: nowrap;
        min-width: 0;
    }

    .logo-mark {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }

    .logo-copy h1 {
        font-size: 16px;
        line-height: 1;
    }

    .logo-copy .eyebrow {
        display: none;
    }

    .model-chip {
        margin-left: 0;
        font-size: 10px;
        padding: 4px 8px;
        white-space: nowrap;
    }

    .header-actions .btn {
        padding: 8px 12px;
        font-size: 13px;
    }

    .btn-icon {
        font-size: 14px;
    }

    /* Mobile gameplay layout — two columns at the top for the player cards
       (50/50, side-by-side) so they take one row instead of two; the
       board-stage spans both columns underneath; dice bar is fixed at the
       viewport bottom (separate flow). */
    /* Selector matches the desktop "#play .game-container" rule so this
       wins via source order (mobile rule is also scoped). Without the
       #play prefix, the desktop rule's specificity beat ours and rows
       collapsed to 100% / 0 instead of 54px / 1fr. */
    #play .game-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Explicit rows: a fixed-height strip for player cards, and the
           board-stage flexes to fill the rest. */
        grid-template-rows: 54px minmax(0, 1fr);
        grid-template-areas:
            "human ai"
            "stage stage";
        gap: 8px;
        /* Reserve space for the fixed dice bar at the bottom so the board
           never gets cropped behind it. ~86px = bar height + safe-area inset. */
        padding-bottom: calc(86px + env(safe-area-inset-bottom));
        align-items: stretch;
    }
    .player-card.human { grid-area: human; }
    .player-card.ai { grid-area: ai; }
    .board-stage { grid-area: stage; }

    /* Override the desktop "height: 100%" on board-stage — grid handles
       sizing here, and forcing 100% breaks the row template. */
    #play .board-stage {
        height: auto;
        min-height: 0;
    }

    .board-stage {
        order: 2;
        padding: 8px;
        gap: 8px;
        /* On desktop the stage uses backdrop-filter for a glassy look,
           but that creates a containing block which traps position:fixed
           descendants. Kill it on mobile so the .control-panel can pin to
           the viewport bottom. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow: visible;
    }

    .board-stage-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 0;
    }

    .round-status {
        font-size: 12px;
        gap: 4px;
    }

    .turn-indicator {
        min-width: 0;
        width: auto;
        padding: 6px 12px;
        font-size: 13px;
    }

    .board-shell {
        padding: 0;
    }

    .board-frame {
        padding: 4px;
    }

    .board {
        margin: 0 auto;
        max-width: 100%;
    }

    /* Compact score strip combining both players, sticky just under header */
    .left-column,
    .right-column {
        display: contents;       /* let children participate in parent flex order */
    }

    /* Half-width cards on mobile — content has to be compact. Avatar +
       name on the left, score dots on the right. We drop the status pill
       (the "You vs AlphaLudo" turn indicator below already says whose
       turn it is, so the pill was duplicating info). */
    .player-card {
        padding: 6px 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .player-card.ai { padding: 6px 8px; }

    .player-card .status-pill {
        display: none;
    }

    .player-header {
        gap: 6px;
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
    }

    .player-avatar {
        width: 26px;
        height: 26px;
        font-size: 14px;
        border-radius: 10px;
    }

    .player-name-block .card-kicker,
    .player-name-block .player-subtitle,
    .player-record {
        display: none;
    }

    .player-name-block {
        min-width: 0;
    }

    .player-name-block h3 {
        font-size: 12px;
        line-height: 1.05;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .player-name-edit {
        display: none;     /* save horizontal room — profile is editable from desktop */
    }

    .score-display {
        margin: 0;
        padding: 0;
        background: transparent;
        border: none;
        flex: none;
    }

    .score-label-row {
        display: none;        /* dot-tokens are enough */
    }

    .score-tokens {
        gap: 4px;
        padding: 0;
        justify-content: flex-start;
    }

    /* Reset the desktop flex:1 + max-width so the dots stay circular instead
       of getting stretched into ovals by the parent flex container. */
    .scored-token {
        flex: none;
        width: 12px;
        height: 12px;
        max-width: none;
    }

    .status-pill {
        font-size: 10px;
        padding: 4px 8px;
    }

    /* Sticky dice action bar at bottom of viewport */
    .control-panel {
        order: 4;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        margin: 0;
        padding: 10px 16px max(10px, env(safe-area-inset-bottom));
        border-radius: 0;
        border: none;
        border-top: 1px solid rgba(89, 218, 224, 0.28);
        background:
            linear-gradient(180deg, rgba(64, 211, 225, 0.15), rgba(232, 71, 166, 0.06)),
            rgba(7, 21, 38, 0.94);
        backdrop-filter: blur(14px);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 14px;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
    }

    .control-panel .card-kicker {
        display: none;
    }

    .dice {
        width: 64px;
        height: 64px;
        font-size: 30px;
        border-radius: 20px;
    }

    .dice-meta {
        align-items: flex-start;
        text-align: left;
    }

    .dice-hint {
        font-size: 13px;
        margin: 0;
        color: rgba(255, 247, 232, 0.8);
    }

    .dice-kbd-hint {
        display: none; /* no keyboard on phones */
    }

    /* On mobile, prioritise the gameplay viewport: board + dice + score
       strip. Hide secondary panels — they're recoverable on a wider screen. */
    .game-log,
    .ai-probs-wrapper,
    .ai-thinking,
    .win-chance,
    .message-area {
        display: none;
    }

    .modal {
        padding: 16px;
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* Even smaller phones: keep dice bar usable, tighten further */
@media (max-width: 420px) {
    :root {
        --cell-size: min(5.5vw, 24px);
        --token-size: min(3.6vw, 16px);
    }

    .logo-copy h1 { font-size: 14px; }
    .model-chip { font-size: 9px; padding: 3px 6px; }
    .turn-indicator { font-size: 12px; padding: 5px 10px; }
    .player-card { padding: 6px 10px; }
    .player-name-block h3 { font-size: 12px; }
    .scored-token { width: 10px; height: 10px; }
    .dice { width: 50px; height: 50px; font-size: 24px; }
    .dice-hint { font-size: 11px; }
    .log-entries { max-height: 120px; }
}

/* ============================================================
   PROJECT CONTEXT — Lineage / Stats / Timeline / Pipeline / Lessons
   ============================================================ */
.project-context {
    max-width: 1480px;
    margin: 36px auto 0;
    padding: 36px 32px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 253, 246, 0.05), rgba(255, 253, 246, 0.02)),
        rgba(7, 21, 33, 0.46);
    border: 1px solid rgba(89, 218, 224, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 24px 64px rgba(2, 10, 18, 0.3);
    backdrop-filter: blur(14px);
    color: #e8edf2;
}

.ctx-heading {
    text-align: center;
    margin-bottom: 32px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.ctx-heading .card-kicker {
    color: rgba(207, 247, 252, 0.6);
    margin-bottom: 10px;
}

.ctx-heading h2 {
    font-family: 'Sora', sans-serif;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.045em;
    color: #fff7e2;
    margin: 0 0 14px;
    background: var(--accent-grad);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ctx-heading .ctx-sub {
    color: rgba(232, 237, 242, 0.78);
    font-size: 15px;
    line-height: 1.6;
}

.ctx-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 40px;
}

.stat-card {
    padding: 18px 14px;
    border-radius: var(--radius-sm);
    background:
        linear-gradient(180deg, rgba(255, 253, 246, 0.06), rgba(255, 253, 246, 0.02));
    border: 1px solid rgba(255, 241, 218, 0.12);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.stat-card-accent {
    background:
        linear-gradient(180deg, rgba(31, 201, 125, 0.12), rgba(31, 201, 125, 0.02));
    border-color: rgba(31, 201, 125, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 18px rgba(31, 201, 125, 0.08);
}

.stat-num {
    display: block;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -0.03em;
    color: #fff7e2;
    line-height: 1.05;
    margin-bottom: 6px;
}

.stat-num-unit {
    font-size: 18px;
    color: rgba(255, 247, 226, 0.7);
    font-weight: 700;
}

.stat-card-accent .stat-num {
    color: #5fe0a3;
}

.stat-label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(232, 237, 242, 0.62);
    line-height: 1.4;
}

.ctx-section {
    margin-top: 36px;
}

.ctx-section-header {
    margin-bottom: 18px;
}

.ctx-section-header .card-kicker {
    color: rgba(207, 247, 252, 0.55);
    margin-bottom: 6px;
}

.ctx-section-header h3 {
    font-family: 'Sora', sans-serif;
    font-size: 24px;
    color: #fff7e2;
    letter-spacing: -0.03em;
    margin: 0;
}

.ctx-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.ctx-card {
    padding: 20px;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 241, 218, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 253, 246, 0.06), rgba(255, 253, 246, 0.02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: rgba(232, 237, 242, 0.88);
    font-size: 13.5px;
    line-height: 1.6;
}

.lineage-card-feature {
    grid-column: span 1;
    border-color: rgba(54, 191, 216, 0.32);
    background:
        linear-gradient(180deg, rgba(54, 191, 216, 0.08), rgba(54, 191, 216, 0.02));
}

.lineage-tag {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.lineage-year {
    color: var(--accent);
    font-weight: 800;
}

.lineage-org {
    color: rgba(232, 237, 242, 0.55);
    text-align: right;
}

.lineage-card h3 {
    font-family: 'Sora', sans-serif;
    font-size: 22px;
    color: #fff7e2;
    letter-spacing: -0.03em;
    margin-bottom: 14px;
}

.video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 14px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    box-shadow:
        0 12px 22px rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.ctx-link {
    display: inline-flex;
    align-items: center;
    margin-top: 14px;
    padding: 10px 14px;
    min-height: 44px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid rgba(54, 191, 216, 0.3);
    background: rgba(54, 191, 216, 0.08);
    color: var(--accent);
    font-weight: 700;
    font-size: 12.5px;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.ctx-link:hover {
    background: rgba(54, 191, 216, 0.16);
    border-color: rgba(54, 191, 216, 0.5);
    transform: translateY(-1px);
}

/* Timeline strip */
.timeline-strip {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    counter-reset: timeline;
    margin: 0;
    padding: 0;
}

.timeline-strip li {
    position: relative;
    padding: 18px 16px 16px;
    border-radius: var(--radius-sm);
    background: rgba(255, 253, 246, 0.04);
    border: 1px solid rgba(255, 241, 218, 0.1);
    color: rgba(232, 237, 242, 0.78);
    font-size: 12.5px;
    line-height: 1.55;
    overflow: hidden;
}

.timeline-strip li::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: rgba(54, 191, 216, 0.4);
}

.timeline-strip li.timeline-current {
    border-color: rgba(31, 201, 125, 0.42);
    background: linear-gradient(180deg, rgba(31, 201, 125, 0.1), rgba(31, 201, 125, 0.02));
    box-shadow: 0 10px 22px rgba(31, 201, 125, 0.12);
}

.timeline-strip li.timeline-current::before {
    background: var(--human);
    box-shadow: 0 0 12px rgba(31, 201, 125, 0.55);
}

.timeline-tag {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 8px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.timeline-strip li.timeline-current .timeline-tag {
    color: var(--human);
}

.timeline-strip li strong {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    color: #fff7e2;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}

.timeline-strip li p {
    margin: 0;
}

/* Pipeline strip */
.pipeline-strip {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    counter-reset: pipeline;
}

.pipeline-strip li {
    position: relative;
    padding: 18px 14px 14px;
    border-radius: var(--radius-sm);
    background:
        linear-gradient(180deg, rgba(255, 253, 246, 0.05), rgba(255, 253, 246, 0.015));
    border: 1px solid rgba(255, 241, 218, 0.1);
    color: rgba(232, 237, 242, 0.76);
    font-size: 12.5px;
    line-height: 1.5;
}

.pipeline-step {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    color: rgba(207, 247, 252, 0.55);
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.pipeline-strip li strong {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    color: #fff7e2;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.pipeline-strip li p {
    margin: 0;
    color: rgba(232, 237, 242, 0.7);
}

/* Lessons */
.learning-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.learning-card {
    display: flex;
    flex-direction: column;
}

.learning-tag {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.learning-tag.failed {
    background: rgba(255, 117, 109, 0.16);
    color: #ff948e;
    border: 1px solid rgba(255, 117, 109, 0.32);
}

.learning-tag.worked {
    background: rgba(31, 201, 125, 0.16);
    color: #5fe0a3;
    border: 1px solid rgba(31, 201, 125, 0.32);
}

.learning-tag.insight {
    background: rgba(54, 191, 216, 0.16);
    color: #65d6e8;
    border: 1px solid rgba(54, 191, 216, 0.32);
}

.learning-card h4 {
    font-family: 'Sora', sans-serif;
    font-size: 17px;
    color: #fff7e2;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}

.learning-card p {
    margin: 0 0 10px;
}

.learning-conclusion {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 241, 218, 0.12);
    color: rgba(232, 237, 242, 0.95);
    font-style: italic;
}

.learning-conclusion::before {
    content: '→ ';
    color: var(--accent);
    font-style: normal;
    font-weight: 700;
}

.ctx-footer {
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 241, 218, 0.1);
    color: rgba(232, 237, 242, 0.55);
    font-size: 12.5px;
    line-height: 1.5;
}

.ctx-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.ctx-footer-tag {
    color: rgba(232, 237, 242, 0.7);
    font-size: 13px;
    margin-top: 4px;
}

.ctx-footer-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: rgba(232, 237, 242, 0.4);
    text-align: right;
}

/* Model info modal */
.model-info-modal {
    width: min(100%, 600px);
    text-align: left;
    padding: 32px;
    max-height: 90vh;
    overflow-y: auto;
}

.model-info-modal .card-kicker {
    color: var(--ink-3);
}

.model-info-modal h2 {
    font-family: 'Sora', sans-serif;
    font-size: 28px;
    margin: 4px 0 8px;
    text-align: left;
    letter-spacing: -0.03em;
}

.model-info-tagline {
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: left;
}

.model-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 0 0 22px;
}

.model-info-grid > div {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(112, 65, 26, 0.1);
    align-items: baseline;
}

.model-info-grid dt {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    font-weight: 800;
    line-height: 1.5;
}

.model-info-grid dd {
    color: var(--ink-1);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.model-info-grid strong {
    color: var(--human-dark);
    font-weight: 800;
}

.model-info-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ─── PROFILE MODAL ─── */
.profile-modal {
    width: min(100%, 480px);
    text-align: left;
    padding: 28px;
}

.profile-modal .card-kicker {
    color: var(--ink-3);
    margin-bottom: 4px;
}

.profile-modal h2 {
    font-family: 'Sora', sans-serif;
    font-size: 24px;
    color: var(--ink-1);
    text-align: left;
    margin: 0 0 8px;
    letter-spacing: -0.025em;
}

.profile-tagline {
    color: var(--ink-3);
    font-size: 12.5px;
    line-height: 1.5;
    margin: 0 0 18px;
    font-style: italic;
}

.profile-form {
    margin-bottom: 18px;
}

.profile-field {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    font-weight: 700;
    margin-bottom: 6px;
}

#profileNameInput {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1.5px solid rgba(112, 65, 26, 0.18);
    background: rgba(255, 255, 255, 0.65);
    color: var(--ink-1);
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 600;
    transition: border-color 0.15s ease, background 0.15s ease;
}

#profileNameInput:hover {
    background: rgba(255, 255, 255, 0.85);
}

#profileNameInput:focus {
    outline: none;
    border-color: var(--human);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(31, 201, 125, 0.18);
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}

.profile-stat {
    padding: 14px 12px;
    border-radius: 14px;
    border: 1px solid rgba(112, 65, 26, 0.14);
    background: rgba(255, 255, 255, 0.55);
    text-align: center;
}

.profile-stat-num {
    display: block;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: var(--ink-1);
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

.profile-stat:nth-child(1) .profile-stat-num {
    color: var(--human-dark);
}

.profile-stat:nth-child(2) .profile-stat-num {
    color: #b3614f;
}

.profile-stat-lbl {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
}

.profile-actions {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.btn-danger {
    color: #b3614f;
    border-color: rgba(179, 97, 79, 0.35);
}

.btn-danger:hover {
    background: rgba(255, 117, 109, 0.1);
    border-color: rgba(179, 97, 79, 0.55);
    color: #8d3925;
}

/* ─── SHARE MODAL ─── */
.share-modal {
    width: min(100%, 580px);
    text-align: left;
    padding: 28px;
    max-height: 92vh;
    overflow-y: auto;
}

.share-modal h2 {
    font-family: 'Sora', sans-serif;
    font-size: 26px;
    color: var(--ink-1);
    text-align: left;
    margin: 0 0 14px;
    letter-spacing: -0.025em;
}

.share-modal .card-kicker {
    color: var(--ink-3);
    margin-bottom: 4px;
}

.share-preview-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1200 / 630;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #0e2a44, #04111e);
    border: 1px solid rgba(112, 65, 26, 0.18);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.share-preview-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.share-preview-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 247, 226, 0.7);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.share-text-label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    font-weight: 700;
    margin-bottom: 6px;
}

.share-text-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1.5px solid rgba(112, 65, 26, 0.18);
    background: rgba(255, 255, 255, 0.65);
    color: var(--ink-1);
    font-family: 'Manrope', sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.15s ease, background 0.15s ease;
    box-sizing: border-box;
}

.share-text-input:focus {
    outline: none;
    border-color: var(--accent);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(54, 191, 216, 0.18);
}

.share-hint {
    margin: 10px 0 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-3);
    font-style: italic;
}

.share-platforms {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 18px;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 10px;
    border-radius: 12px;
    border: 1.5px solid rgba(112, 65, 26, 0.16);
    background: rgba(255, 255, 255, 0.55);
    color: var(--ink-1);
    font-family: 'Manrope', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.share-btn:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

.share-btn .share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.share-btn-native {
    grid-column: 1 / -1;
    background: linear-gradient(180deg, #11304b 0%, #0a2236 100%) padding-box,
                var(--accent-grad) border-box;
    border: 1.5px solid transparent;
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(54, 191, 216, 0.22);
}

.share-btn-native:hover {
    background: linear-gradient(180deg, #173a59 0%, #0d2940 100%) padding-box,
                var(--accent-grad) border-box;
    box-shadow: 0 12px 26px rgba(54, 191, 216, 0.32);
}

.share-btn-twitter:hover  { border-color: #000;     color: #000; }
.share-btn-linkedin:hover { border-color: #0a66c2; color: #0a66c2; }
.share-btn-whatsapp:hover { border-color: #25d366; color: #1d8541; }
.share-btn-reddit:hover   { border-color: #ff4500; color: #d63a00; }
.share-btn-copy:hover     { border-color: #36bfd8; color: #1d8a9e; }

/* Brief positive flash after a successful clipboard write. */
.share-btn.is-success {
    border-color: #1fc97d;
    color: #0c6d3c;
    background: rgba(31, 201, 125, 0.10);
}

.share-actions {
    margin-top: 4px;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.about-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

@media (max-width: 560px) {
    .share-modal { padding: 18px; }
    .share-platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .share-btn-native { grid-column: 1 / -1; }
}

/* === Mobile-grid bug fix (panels were rendering side-by-side at ≤760px) === */
@media (max-width: 760px) {
    .player-card .win-chance,
    .player-card .ai-probs-wrapper,
    .player-card .ai-thinking {
        grid-column: 1 / -1;
    }
}

/* Project-context responsive */
@media (max-width: 1280px) {
    .ctx-stats {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .timeline-strip,
    .pipeline-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ctx-grid,
    .learning-cards {
        grid-template-columns: 1fr 1fr;
    }
    .lineage-card-feature {
        grid-column: 1 / -1;
    }
    .video-embed {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 14px;
    }
}

@media (max-width: 760px) {
    .project-context {
        margin-top: 18px;
        padding: 22px 18px;
        border-radius: var(--radius);
    }
    .ctx-heading h2 {
        font-size: 24px;
    }
    .ctx-heading .ctx-sub {
        font-size: 13px;
    }
    .ctx-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .ctx-stats .stat-card-accent:last-child {
        grid-column: 1 / -1;
    }
    .ctx-section-header h3 {
        font-size: 19px;
    }
    .ctx-grid,
    .learning-cards,
    .timeline-strip,
    .pipeline-strip {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .lineage-card-feature {
        grid-column: 1 / -1;
    }
    .ctx-footer-row {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .ctx-footer-meta {
        text-align: left;
    }
    .model-info-modal {
        padding: 22px;
    }
    .model-info-grid > div {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 12px;
    }
    .stat-num {
        font-size: 24px;
    }
}

/* ════════════════════════════════════════════════════════════
   MULTI-PAGE LAYOUT — top nav + routes + page headers
   ════════════════════════════════════════════════════════════ */

/* Suppress the legacy in-page header (keeps backwards-compat with
   any cached HTML; the new layout uses .topnav). */
.app > .header { display: none; }

/* Decorative background blobs (stronger than the original
   .table-lights, used everywhere now since hero is full-bleed). */
.bg-decor {
    position: fixed;
    inset: auto;
    width: 50vw;
    height: 50vw;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    opacity: 0.55;
    z-index: 0;
}
.bg-decor-a {
    top: -16vw;
    left: -10vw;
    background: radial-gradient(circle, rgba(54, 191, 216, 0.32), transparent 60%);
}
.bg-decor-b {
    right: -10vw;
    bottom: -18vw;
    background: radial-gradient(circle, rgba(232, 71, 166, 0.22), transparent 60%);
}

/* App container — looser padding, accommodates sticky nav */
.app {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    padding: 0 0 80px;
}

main {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ─── TOP NAV ─── */
.topnav {
    position: sticky;
    top: 0;
    z-index: 60;
    width: 100%;
    background: rgba(7, 21, 38, 0.55);
    border-bottom: 1px solid rgba(89, 218, 224, 0.14);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.topnav-inner {
    max-width: 1480px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 14px 28px;
    position: relative;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(54, 191, 216, 0.18);
}

.brand-text {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #fff7e2;
    letter-spacing: -0.03em;
}

.brand-text .accent {
    color: var(--accent);
}

.nav-links {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.nav-links a {
    display: block;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    color: rgba(247, 240, 226, 0.7);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-links a:hover {
    color: #fff7e2;
    background: rgba(255, 255, 255, 0.05);
}

.nav-links a.current {
    color: #fff7e2;
    background: rgba(54, 191, 216, 0.2);
    box-shadow: inset 0 0 0 1px rgba(54, 191, 216, 0.3);
}

.nav-cta {
    padding: 10px 18px;
    font-size: 13.5px;
}

.nav-cta-icon {
    font-size: 11px;
    margin-right: 2px;
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 8px;
    width: 38px;
    height: 38px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff7e2;
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ─── ROUTE SYSTEM ─── */
.route {
    display: none;
    padding: 32px 0 64px;
    animation: route-fade 0.4s ease both;
}

.route.active {
    display: block;
}

@keyframes route-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── HOME / HERO ─── */
.hero {
    text-align: center;
    padding: 64px 24px 40px;
    max-width: 920px;
    margin: 0 auto;
}

.hero-eyebrow {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(54, 191, 216, 0.12);
    border: 1px solid rgba(54, 191, 216, 0.28);
    color: #c9fbff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    margin-bottom: 28px;
}

.hero-title {
    font-family: 'Sora', sans-serif;
    font-weight: 900;
    font-size: clamp(54px, 9vw, 108px);
    line-height: 0.96;
    letter-spacing: -0.06em;
    color: #fff7e2;
    margin: 0 0 22px;
}

.hero-title .accent {
    background: var(--accent-grad);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Prevent the rightmost glyph from being clipped when negative
       letter-spacing tightens the gradient bbox into the descender. */
    padding-right: 0.08em;
    margin-right: -0.05em;
}

.hero-tagline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(20px, 2.3vw, 26px);
    line-height: 1.3;
    color: #fff7e2;
    margin: 0 0 16px;
    letter-spacing: -0.015em;
}

.hero-sub {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(232, 237, 242, 0.78);
    max-width: 640px;
    margin: 0 auto 36px;
}

.hero-ctas {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.hero-fineprint {
    color: rgba(232, 237, 242, 0.45);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    margin: 0;
}

/* Larger button variants for hero */
.btn-large {
    padding: 14px 22px;
    font-size: 15px;
}
.btn-xl {
    padding: 16px 28px;
    font-size: 16px;
    font-weight: 800;
}
.btn-xl .btn-icon {
    font-size: 14px;
}

/* Hero stats — bigger & more confident than the .ctx-stats version */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    max-width: 1080px;
    margin: 0 auto 80px;
    padding: 0 8px;
}

.big-stat {
    padding: 22px 18px;
    border-radius: var(--radius-sm);
    text-align: center;
    background:
        linear-gradient(180deg, rgba(255, 253, 246, 0.06), rgba(255, 253, 246, 0.02));
    border: 1px solid rgba(255, 241, 218, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.big-stat-accent {
    background:
        linear-gradient(180deg, rgba(31, 201, 125, 0.14), rgba(31, 201, 125, 0.03));
    border-color: rgba(31, 201, 125, 0.32);
}

.big-stat-num {
    display: block;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 38px;
    letter-spacing: -0.04em;
    color: #fff7e2;
    line-height: 1;
    margin-bottom: 8px;
}

.big-stat-unit {
    font-size: 22px;
    color: rgba(255, 247, 226, 0.68);
    font-weight: 700;
    margin-left: 1px;
}

.big-stat-accent .big-stat-num {
    color: #6fe6ad;
}

.big-stat-lbl {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(232, 237, 242, 0.6);
    line-height: 1.5;
}

.home-section {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 8px;
}

.home-section-head {
    text-align: center;
    margin-bottom: 28px;
}

.home-section-head .card-kicker {
    color: rgba(207, 247, 252, 0.6);
    margin-bottom: 8px;
}

.home-section-head h2 {
    font-family: 'Sora', sans-serif;
    font-size: 32px;
    color: #fff7e2;
    margin: 0;
    letter-spacing: -0.03em;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.feature-card {
    display: block;
    padding: 24px;
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(255, 253, 246, 0.06), rgba(255, 253, 246, 0.02));
    border: 1px solid rgba(255, 241, 218, 0.12);
    color: rgba(232, 237, 242, 0.86);
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease, background 0.15s ease;
}

.feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(54, 191, 216, 0.5);
    background:
        linear-gradient(180deg, rgba(54, 191, 216, 0.1), rgba(255, 253, 246, 0.02));
    box-shadow: 0 18px 40px rgba(54, 191, 216, 0.15);
}

.feature-card .card-kicker {
    color: rgba(207, 247, 252, 0.6);
    margin-bottom: 8px;
}

.feature-card h3 {
    font-family: 'Sora', sans-serif;
    font-size: 22px;
    color: #fff7e2;
    margin: 0 0 12px;
    letter-spacing: -0.025em;
}

.feature-card p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* ─── PAGE HEADERS (used on play / research / lineage / about) ─── */
.page-head {
    max-width: 920px;
    margin: 0 auto 36px;
    padding: 24px 0 0;
}

.page-head .card-kicker {
    color: rgba(207, 247, 252, 0.6);
    margin-bottom: 10px;
}

.page-head h1 {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    /* Scale with viewport: stays readable on phones, doesn't get giant on
       big monitors. Lower min keeps "Eight months of iteration." on a
       single line at 360px wide. */
    font-size: clamp(28px, 5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.045em;
    color: #fff7e2;
    margin: 0 0 14px;
    text-wrap: balance;          /* nicer wrapping when it does need to wrap */
}

.page-sub {
    color: rgba(232, 237, 242, 0.76);
    font-size: 16px;
    line-height: 1.65;
    max-width: 720px;
    margin: 0;
}

.page-sub code {
    background: rgba(255, 241, 218, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: #c9fbff;
}

.page-section {
    margin: 0 auto 56px;
    max-width: 1180px;
}

.page-section-head {
    margin-bottom: 22px;
    text-align: left;
}

.page-section-head .card-kicker {
    color: rgba(207, 247, 252, 0.55);
    margin-bottom: 8px;
}

.page-section-head h2 {
    font-family: 'Sora', sans-serif;
    font-size: 28px;
    color: #fff7e2;
    margin: 0;
    letter-spacing: -0.03em;
}

.page-section-sub {
    color: rgba(207, 247, 252, 0.6);
    margin-top: 8px;
    max-width: 56ch;
    font-size: 14px;
    line-height: 1.55;
}

/* "Currently in flight" status cards on the Research page. */
.ctx-card.status-running .card-kicker { color: #4ade80; }   /* green  — running */
.ctx-card.status-running { border-left: 3px solid #4ade80; }

.ctx-card.status-planned .card-kicker { color: #facc15; }   /* amber  — queued */
.ctx-card.status-planned { border-left: 3px solid #facc15; }

.ctx-card.status-shelved .card-kicker { color: rgba(207, 247, 252, 0.55); }
.ctx-card.status-shelved { opacity: 0.85; }

/* Mech-interp finding cards on the Research page. */
.ctx-card.mechinterp-card {
    border-left: 3px solid rgba(54, 191, 216, 0.65);
}

.ctx-card.mechinterp-card .card-kicker {
    color: #36bfd8;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
}

.ctx-card-conclusion {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
    color: rgba(232, 237, 242, 0.72);
    font-size: 13px;
    font-style: italic;
}

/* Linear-probe accuracy table — left label, big % in middle, baseline right */
.probe-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.probe-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 13px;
}

.probe-label {
    color: rgba(232, 237, 242, 0.92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.probe-num {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.01em;
}

.probe-num.good { color: #4ade80; }
.probe-num.bad  { color: #facc15; }

.probe-baseline {
    color: rgba(207, 247, 252, 0.55);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .probe-list li {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "label num" "baseline baseline";
        gap: 4px 10px;
    }
    .probe-label { grid-area: label; white-space: normal; }
    .probe-num { grid-area: num; }
    .probe-baseline { grid-area: baseline; }
}

.page-cta {
    text-align: center;
    padding: 36px 24px;
    margin: 24px auto 0;
    max-width: 720px;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(31, 201, 125, 0.1), rgba(54, 191, 216, 0.05));
    border: 1px solid rgba(31, 201, 125, 0.24);
}

.page-cta h3 {
    font-family: 'Sora', sans-serif;
    font-size: 24px;
    color: #fff7e2;
    margin: 0 0 16px;
    letter-spacing: -0.025em;
}

/* ─── PLAY PAGE ─── */
/* Slim action strip at the top of the play route. The big H1 + description
   are gone — the nav already shows we're on Play, and screen real-estate
   matters more than the title here. */
.play-head {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin: 0 auto 12px;
    max-width: 1480px;
    padding: 0;
}

.play-head-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* Make the play route fit in the viewport (no page scroll) on desktop.
   Three changes lock this in: (a) suppress body scroll when play is active,
   (b) strip the global .route + .app padding for play only, (c) give #play
   a fixed height equal to viewport-minus-topnav so its children have a
   real budget to size against. */
/* Lock the html element too so any pre-existing scroll position from a
   previous route can't leave the play page partially under the sticky
   topnav. Pair this with the JS scrollTo(0) on play-route entry. */
html:has(#play.route.active),
body:has(#play.route.active) {
    overflow: hidden;
}

.app:has(#play.route.active) {
    padding-bottom: 0;
}

/* Scope to .active so the base .route { display: none } continues to hide
   the play section on other routes. (Without .active, our display:flex
   would override the global hide and Play would bleed into every tab.) */
#play.route.active {
    padding: 12px 0 8px;
    animation: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* 70px = approx topnav height. game-container's children flex from
       within this fixed height. */
    height: calc(100dvh - 70px);
}

#play .game-container {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;                /* don't push #play past its budget */
}

/* Desktop-only 3-column layout. Below 760px the mobile media query
   re-defines #play .game-container with grid-template-rows + 2 columns,
   and these scoped rules step out of the way. */
@media (min-width: 761px) {
    #play .game-container {
        align-items: stretch;        /* stretch cells to row height so board-stage fills */
        grid-template-rows: 100%;    /* row matches container height */
        grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(260px, 300px);
        gap: 16px;
    }

    #play .board-stage,
    #play .left-column,
    #play .right-column {
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    #play .left-column,
    #play .right-column {
        overflow-y: auto;            /* side panels scroll if they're too tall */
        scrollbar-width: thin;
    }

    /* Slim down the side columns so the centre of attention is the board
       on desktop. Mobile redefines these via the grid layout. */
    #play .left-column,
    #play .right-column {
        gap: 14px;
    }

    #play .player-card {
        padding: 14px 16px;
    }

    #play .game-log {
        padding: 12px 14px;
    }
}

/* Hide the inline message area on desktop play — it stole 30px and the
   game-log already records every event. (Already hidden on mobile.) */
#play .message-area {
    display: none;
}

#play .log-entries {
    max-height: 220px;
}

#play .player-header {
    margin-bottom: 10px;
}

#play .score-display {
    margin-top: 8px;
}

/* Board-stage chrome + dice tray below the board. */
.board-stage {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#play .board-shell {
    flex: 1 1 auto;
    min-height: 0;
    /* No horizontal scrolling needed now that the dice isn't beside the
       board — the board fits the column width on desktop, and on mobile we
       have a viewport-relative cell-size. */
    overflow: visible;
    padding: 0;
    align-items: center;
}

/* Below-board dice tray on desktop. Centred, transparent — board is the
   centerpiece, dice is a satellite. Mobile still uses the fixed-bottom bar
   defined in the mobile media query. */
@media (min-width: 761px) {
    .control-panel {
        align-self: center;
        margin: 0;
        padding: 8px 16px;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        background: transparent;
        border: none;
        box-shadow: none;
    }
}

/* ─── LINEAGE — featured AlphaGo card ─── */
.lineage-feature {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 28px;
    align-items: center;
    margin: 0 auto 48px;
    padding: 32px;
    max-width: 1180px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(160deg, rgba(54, 191, 216, 0.12), rgba(232, 71, 166, 0.04));
    border: 1px solid rgba(54, 191, 216, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 24px 56px rgba(2, 10, 18, 0.3);
}

.lineage-feature-meta .card-kicker {
    color: rgba(207, 247, 252, 0.65);
    margin-bottom: 10px;
}

.lineage-feature-meta h2 {
    font-family: 'Sora', sans-serif;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.035em;
    color: #fff7e2;
    margin: 0 0 18px;
}

.lineage-feature-meta p {
    color: rgba(232, 237, 242, 0.86);
    font-size: 14.5px;
    line-height: 1.65;
    margin: 0 0 12px;
}

.lineage-feature-meta p:last-child {
    margin-bottom: 0;
}

.lineage-video {
    margin-bottom: 0;
}

.lineage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 1180px;
    margin: 0 auto;
}

.lineage-card-rejected {
    border-color: rgba(255, 117, 109, 0.32);
    background:
        linear-gradient(180deg, rgba(255, 117, 109, 0.08), rgba(255, 117, 109, 0.02));
}

/* ─── ABOUT PAGE ─── */
.about-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 1180px;
    margin: 0 auto;
}

.about-card {
    padding: 24px;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 241, 218, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 253, 246, 0.05), rgba(255, 253, 246, 0.02));
    color: rgba(232, 237, 242, 0.85);
    font-size: 14px;
    line-height: 1.6;
}

.about-card .card-kicker {
    color: rgba(207, 247, 252, 0.55);
    margin-bottom: 8px;
}

.about-card h3 {
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    color: #fff7e2;
    margin: 0 0 14px;
    letter-spacing: -0.025em;
}

.about-card-wide {
    grid-column: 1 / -1;
}

.about-card-cta {
    grid-column: 1 / -1;
    text-align: center;
    background: linear-gradient(180deg, rgba(31, 201, 125, 0.1), rgba(54, 191, 216, 0.05));
    border-color: rgba(31, 201, 125, 0.28);
}

.about-card-cta h3 {
    font-size: 24px;
}

.about-card-cta p {
    margin-bottom: 18px;
    color: rgba(232, 237, 242, 0.75);
}

.about-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.about-list li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 241, 218, 0.08);
    line-height: 1.55;
}

.about-list li:last-child {
    border-bottom: none;
}

.about-list strong {
    color: #fff7e2;
    margin-right: 4px;
}

.about-list code,
.about-card code {
    font-family: 'IBM Plex Mono', monospace;
    background: rgba(255, 241, 218, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    color: #c9fbff;
    font-size: 12.5px;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 6px;
}

.about-stats > div {
    padding: 16px 12px;
    border-radius: var(--radius-sm);
    background: rgba(255, 253, 246, 0.04);
    border: 1px solid rgba(255, 241, 218, 0.1);
    text-align: center;
}

.about-stat-num {
    display: block;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 26px;
    color: #fff7e2;
    letter-spacing: -0.025em;
    margin-bottom: 4px;
}

.about-stat-lbl {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(232, 237, 242, 0.55);
    line-height: 1.4;
}

/* ─── SITE FOOTER (in About) ─── */
.site-footer {
    margin: 56px auto 0;
    padding-top: 28px;
    max-width: 1180px;
    border-top: 1px solid rgba(255, 241, 218, 0.1);
    color: rgba(232, 237, 242, 0.5);
    font-size: 13px;
    line-height: 1.6;
}

.site-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-brand {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #fff7e2;
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}

.footer-brand .accent {
    color: var(--accent);
}

.site-footer-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: rgba(232, 237, 242, 0.4);
    align-items: center;
}

.site-footer-meta a {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    min-height: 36px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(207, 247, 252, 0.85);
    text-decoration: none;
    font-weight: 700;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.site-footer-meta a:hover {
    background: rgba(54, 191, 216, 0.14);
    border-color: rgba(54, 191, 216, 0.42);
    color: var(--accent);
}

@media (max-width: 560px) {
    .site-footer-meta a {
        min-height: 44px;
        padding: 10px 16px;
    }
}

/* About page link list */
.about-links {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.about-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 253, 246, 0.04);
    border: 1px solid rgba(255, 241, 218, 0.12);
    color: rgba(232, 237, 242, 0.88);
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.4;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.about-links a:hover {
    background: rgba(54, 191, 216, 0.1);
    border-color: rgba(54, 191, 216, 0.35);
    transform: translateY(-1px);
}

.about-links a strong {
    color: #fff7e2;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    font-weight: 700;
}

.about-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff7e2;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — multi-page redesign
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1280px) {
    .hero-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lineage-feature { grid-template-columns: 1fr; }
    .lineage-feature-meta { order: 2; }
    .lineage-video { order: 1; }
    .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    main { padding: 0 16px; }
    .topnav-inner { padding: 12px 18px; }
    .nav-links { display: none; }
    .nav-links.open {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        margin: 0;
        padding: 16px;
        gap: 4px;
        background: rgba(7, 21, 38, 0.96);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(89, 218, 224, 0.18);
        animation: nav-slide 0.2s ease;
    }
    .nav-links.open a {
        font-size: 16px;
        padding: 12px 16px;
    }
    .nav-toggle { display: flex; align-items: center; }
    .nav-cta {
        padding: 8px 14px;
        font-size: 12.5px;
    }

    @keyframes nav-slide {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .hero { padding: 40px 16px 24px; }
    .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 56px;
    }
    .hero-stats .big-stat-accent:last-child { grid-column: 1 / -1; }

    .feature-grid { grid-template-columns: 1fr; }
    .lineage-grid { grid-template-columns: 1fr; }
    .about-grid { grid-template-columns: 1fr; }
    .lineage-feature { padding: 22px; gap: 18px; }
    .lineage-feature-meta h2 { font-size: 30px; }

    .play-head {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;        /* keep all 3 buttons on one row */
        gap: 8px;
        margin-bottom: 8px;
    }
    .play-head-actions {
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: nowrap;
        min-width: 0;
        flex: 1 1 auto;
    }
    /* Slim the chips on mobile so all three (model · mute · new match) fit
       on one row — the model chip can ellipsis-truncate if it has to. */
    .play-head .model-chip {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 56vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
        padding: 5px 9px;
    }
    .play-head .icon-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
        flex: none;
    }
    .play-head .btn {
        padding: 7px 12px;
        font-size: 12.5px;
        white-space: nowrap;
        flex: none;
    }
}

@media (max-width: 560px) {
    .topnav-inner { padding: 10px 14px; }
    .brand-text { font-size: 15px; }
    .brand-mark { width: 32px; height: 32px; }
    .hero { padding: 28px 8px 16px; }
    .hero-eyebrow { font-size: 10px; padding: 5px 11px; }
    .hero-sub { font-size: 14px; }
    .hero-ctas { flex-direction: column; align-items: stretch; }
    .btn-xl { padding: 14px 22px; font-size: 14.5px; }
    .home-section-head h2 { font-size: 24px; text-wrap: balance; }
    .page-head { padding-top: 12px; }
    .page-head h1 { font-size: 28px; text-wrap: balance; }
    .page-sub { font-size: 14.5px; text-wrap: pretty; }
    .page-section-head h2 { font-size: 22px; text-wrap: balance; }
    .page-section-sub { font-size: 13.5px; text-wrap: pretty; }
    .lineage-feature-meta h2 { font-size: 26px; text-wrap: balance; }
    .ctx-card h4 { font-size: 16px; text-wrap: balance; }
    .ctx-card { padding: 16px; font-size: 13.5px; }
    .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .big-stat-num { font-size: 28px; }
    .site-footer-row { flex-direction: column; align-items: flex-start; }
}

/* ════════════════════════════════════════════════════════════
   AUDIO TOGGLE + WIN/LOSS FLOURISHES
   ════════════════════════════════════════════════════════════ */

/* Small round icon button used for the mute toggle in the play header. */
.icon-btn {
    appearance: none;
    -webkit-appearance: none;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 247, 232, 0.9);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.26);
}

.icon-btn:active {
    transform: scale(0.94);
}

.icon-btn.is-muted {
    background: rgba(232, 71, 166, 0.16);
    border-color: rgba(232, 71, 166, 0.4);
    color: #ffd5ec;
}

/* ── Win confetti ───────────────────────────────────────────
   Fixed full-page overlay that doesn't block clicks. Pieces are tiny
   coloured rectangles falling from above the viewport with a sideways
   drift and rotation. */
.confetti-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 100;
}

.confetti-piece {
    position: absolute;
    top: -20px;
    border-radius: 2px;
    opacity: 0.95;
    transform: translate3d(0, 0, 0) rotate(0deg);
    animation-name: confetti-fall;
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
    animation-fill-mode: forwards;
    will-change: transform, opacity;
}

@keyframes confetti-fall {
    0%   { transform: translate3d(0, -10vh, 0) rotate(0deg);                   opacity: 0; }
    8%   { opacity: 1; }
    100% { transform: translate3d(var(--drift, 0), 110vh, 0) rotate(var(--rot, 360deg)); opacity: 0.85; }
}

/* ── Loss shake ─────────────────────────────────────────────
   A short, contained shudder of the board container. */
.board-stage.shake {
    animation: board-shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes board-shake {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(4px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* Subtle modal accent so the "you won" panel feels brighter than "you lost". */
.modal.win .modal-card,
.modal.win > * {
    box-shadow: 0 0 0 1px rgba(31, 201, 125, 0.45), 0 24px 64px rgba(31, 201, 125, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    .confetti-piece { animation: none; display: none; }
    .board-stage.shake { animation: none; }
}