@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --bg: #091116;
    --panel: #101b22;
    --panel2: #15232b;
    --ink: #f4f0e5;
    --muted: #a8b5bd;
    --cyan: #42cce0;
    --yellow: #ffc84a;
    --line: rgba(64, 84, 95, .65);
    --mono: "DM Mono", monospace;
    --display: "Barlow Condensed", Impact, sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: var(--ink);
    background: radial-gradient(ellipse at 50% -10%, #15232b 0, transparent 45%), linear-gradient(180deg, #091116, #091116 70%, #060c10);
    font-family: Inter, system-ui, sans-serif;
    min-height: 100vh
}

body:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .12;
    background-image: linear-gradient(rgba(64, 84, 95, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(64, 84, 95, .10) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(to bottom, black, transparent 80%)
}

a {
    color: inherit;
    text-decoration: none
}

.shell {
    max-width: 1400px;
    margin: auto;
    padding: 0 34px;
    position: relative
}

.topbar {
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line)
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: 1.5px
}

.brand b {
    color: var(--cyan)
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 2px solid var(--cyan);
    color: var(--yellow);
    font-weight: 900;
    transform: skew(-8deg);
    box-shadow: 3px 3px 0 #53341b
}

.scores-jump {
    font: 11px var(--mono);
    letter-spacing: 1px;
    color: #a8b5bd;
    display: flex;
    align-items: center;
    gap: 10px
}

.trophy {
    color: var(--yellow);
    font-size: 19px
}

.hero {
    text-align: center;
    padding: 57px 0 55px
}

.eyebrow,
.kicker {
    font: 11px var(--mono);
    letter-spacing: 2px;
    color: var(--cyan)
}

.live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #82d66b;
    box-shadow: 0 0 12px #82d66b;
    margin-right: 7px
}

h1 {
    font: 900 clamp(56px, 9vw, 104px)/.92 var(--display);
    letter-spacing: 3px;
    margin: 20px 0 8px;
    text-shadow: 0 4px 0 #1b2b34, 0 8px 28px #ff8b3218
}

h1 span {
    display: block;
    color: var(--yellow);
    text-shadow: 0 3px 0 #9b4d1d, 0 7px 0 #30271d, 0 12px 30px #ff8b3218
}

.tagline {
    font: 13px var(--mono);
    letter-spacing: 4px;
    color: #d5d7d2;
    margin: 23px 0 26px
}

.tagline i {
    font-style: normal;
    color: var(--cyan);
    padding: 0 7px
}

.player-form {
    display: flex;
    align-items: center;
    max-width: 510px;
    margin: auto;
    border: 1px solid #40545f;
    background: #0b1419;
    padding: 6px;
    border-radius: 12px;
    box-shadow: 0 0 0 3px #12345d55, 0 10px 40px #0005
}

.player-icon {
    padding: 0 13px;
    color: #a8b5bd;
    font-size: 19px
}

.player-form input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    color: white;
    background: transparent;
    font: 14px Inter, sans-serif;
    padding: 12px 4px
}

.player-form input::placeholder {
    color: #788891
}

.start-button {
    border: 0;
    border-radius: 7px;
    background: var(--yellow);
    color: #15130f;
    padding: 13px 17px;
    font: 800 12px var(--mono);
    letter-spacing: .6px;
    cursor: pointer;
    box-shadow: inset 0 -3px 0 #cf7628;
    transition: transform .15s, filter .15s
}

.start-button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px)
}

.start-button span {
    margin-left: 10px
}

.name-note {
    margin-top: 14px;
    color: #788891;
    font-size: 12px
}

.games-section,
.scores-section {
    padding: 20px 0 52px
}

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

.kicker {
    margin: 0 0 6px;
    font-size: 10px
}

h2 {
    font: 800 clamp(27px, 4vw, 38px)/1 var(--display);
    letter-spacing: 1px;
    margin: 0
}

.period {
    color: var(--cyan)
}

.section-count {
    font: 10px var(--mono);
    letter-spacing: 1px;
    color: #a8b5bd;
    padding-bottom: 4px
}

.cabinet-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 17px
}

.cabinet {
    --accent: var(--cyan);
    position: relative;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--accent), transparent 40%);
    border-radius: 12px 12px 7px 7px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent), #101b22 87%), #080d20 70%);
    padding: 11px 11px 13px;
    box-shadow: 0 7px 0 #05090c, 0 0 0 3px #15232b, 0 0 25px color-mix(in srgb, var(--accent), transparent 95%);
    transition: transform .18s, box-shadow .18s;
    display: flex;
    flex-direction: column
}

.cabinet:before {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 6px;
    height: 3px;
    background: var(--accent);
    border-radius: 4px;
    box-shadow: 0 0 12px var(--accent)
}

.cabinet.playable {
    cursor: pointer
}

.cabinet.playable:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 0 #05090c, 0 0 0 3px #15232b, 0 0 32px color-mix(in srgb, var(--accent), transparent 84%)
}

.cabinet:focus-visible {
    outline: 3px solid white;
    outline-offset: 5px
}

.cabinet-title {
    font: 800 23px/.95 var(--display);
    text-align: center;
    min-height: 49px;
    display: grid;
    place-items: center;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--accent);
    text-shadow: 0 2px 0 #000
}

.screen-frame {
    background: #060c10;
    border: 3px solid #2b3b44;
    border-radius: 8px;
    padding: 5px;
    box-shadow: inset 0 0 16px #000;
    margin: 8px 0 10px
}

.screen {
    height: 135px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    background: #101b22;
    display: grid;
    place-items: center
}

.screen svg {
    width: 100%;
    height: 100%;
    display: block
}

.cabinet-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 25px;
    margin: 0 0 9px
}

.joystick {
    height: 18px;
    width: 7px;
    background: linear-gradient(90deg, #fa3158, #a30d35);
    border-radius: 5px;
    position: relative;
    box-shadow: 0 2px 0 #5e0b29
}

.joystick:before {
    content: "";
    position: absolute;
    left: -5px;
    top: -5px;
    width: 17px;
    height: 10px;
    border-radius: 50%;
    background: #ff4d72;
    border: 1px solid #8f1739
}

.button-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 1px 0 #000, 0 0 5px color-mix(in srgb, var(--accent), transparent 45%)
}

.button-dot:nth-child(3) {
    background: var(--yellow)
}

.cabinet-tagline {
    font: 10px/1.45 var(--mono);
    text-align: center;
    color: #c2c7c7;
    min-height: 30px;
    margin-top: auto
}

.cabinet-meta {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid #2b3b44;
    color: #a8b5bd;
    font: 9px var(--mono);
    letter-spacing: .5px
}

.cabinet-meta .status {
    color: #82d66b
}

.cabinet-meta .soon {
    color: #ffc84a
}

.cabinet.disabled {
    opacity: .78
}

.cabinet.disabled:hover {
    transform: none
}

.coming-screen {
    font: 800 14px var(--display);
    letter-spacing: 2px;
    color: #788891;
    text-align: center
}

.coming-screen span {
    display: block;
    font-size: 40px;
    margin-bottom: 7px;
    color: #40545f
}

.loading-card {
    grid-column: 1/-1;
    padding: 35px;
    text-align: center;
    color: var(--muted);
    font: 12px var(--mono)
}

.scores-section {
    border-top: 1px solid var(--line);
    padding-top: 38px
}

.trophy-big {
    color: var(--yellow);
    margin-right: 8px
}

.score-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border: 1px solid #2b3b44;
    background: linear-gradient(120deg, #101b22, #091116);
    border-radius: 13px;
    padding: 18px 12px;
    box-shadow: 0 0 0 4px #101b2240
}

.score-column {
    padding: 0 13px;
    border-right: 1px solid #2b3b44;
    min-width: 0
}

.score-column:last-child {
    border-right: 0
}

.score-game {
    font: 800 16px var(--display);
    color: var(--accent);
    margin: 0 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.score-row {
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr) auto;
    gap: 5px;
    align-items: center;
    margin: 9px 0;
    font: 10px var(--mono);
    color: #c2c7c7
}

.rank {
    color: var(--accent)
}

.score-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase
}

.score-value {
    color: #f4f0e5
}

.score-empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 24px;
    color: #a8b5bd;
    font: 12px var(--mono)
}

.board-foot {
    font: 9px var(--mono);
    letter-spacing: 1px;
    text-align: center;
    color: #788891;
    margin: 21px 0 0
}

.board-foot span {
    color: var(--cyan);
    padding: 0 10px
}

footer {
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 22px 0 30px;
    color: #788891;
    font: 9px var(--mono);
    letter-spacing: 1px
}

footer b {
    color: #ff8b32
}

/* =========================================================
   HOMEPAGE TOAST NOTIFICATION
   Prominent confirmation when a player name is saved.
   ========================================================= */

.toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translate(-50%, -16px);

    width: max-content;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    padding: 17px 26px;

    background: linear-gradient(135deg, #1b2b32, #101b22);
    border: 1px solid var(--yellow);
    border-left: 5px solid var(--yellow);
    border-radius: 10px;

    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
    letter-spacing: .3px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, .55),
        0 0 22px rgba(255, 200, 74, .18);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10000;

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease;
}

.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* Keep the notification comfortable on smaller screens. */
@media (max-width: 650px) {
    .toast {
        top: 16px;
        max-width: calc(100vw - 24px);
        padding: 14px 18px;
        font-size: 13px;
    }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .toast {
        transition: none;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

@media(max-width:1050px) {
    .cabinet-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .score-board {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 22px
    }

    .score-column:nth-child(3) {
        border-right: 0
    }

    .score-column:nth-child(4) {
        padding-top: 15px;
        border-top: 1px solid #2b3b44
    }

    .score-column:nth-child(5) {
        padding-top: 15px;
        border-top: 1px solid #2b3b44
    }
}

@media(max-width:650px) {
    .shell {
        padding: 0 17px
    }

    .topbar {
        height: 66px
    }

    .brand {
        font-size: 19px
    }

    .scores-jump {
        font-size: 9px;
        gap: 5px
    }

    .hero {
        padding: 44px 0 40px
    }

    .eyebrow {
        font-size: 9px;
        letter-spacing: 1.5px
    }

    .tagline {
        font-size: 11px;
        letter-spacing: 2px
    }

    .player-form {
        padding: 5px
    }

    .player-icon {
        padding: 0 8px
    }

    .player-form input {
        font-size: 12px
    }

    .start-button {
        font-size: 10px;
        padding: 13px 10px
    }

    .section-heading {
        align-items: start;
        flex-direction: column
    }

    .section-count {
        padding: 0
    }

    .cabinet-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px
    }

    .cabinet {
        padding: 9px
    }

    .cabinet-title {
        font-size: 21px
    }

    .screen {
        height: 112px
    }

    .cabinet-tagline {
        font-size: 9px
    }

    .score-board {
        grid-template-columns: 1fr 1fr;
        gap: 0;
        padding: 12px 8px
    }

    .score-column {
        padding: 12px 9px;
        border-bottom: 1px solid #2b3b44
    }

    .score-column:nth-child(odd) {
        border-right: 1px solid #2b3b44
    }

    .score-column:nth-child(even) {
        border-right: 0
    }

    .score-column:nth-child(3) {
        border-right: 1px solid #2b3b44
    }

    .score-column:nth-child(4) {
        padding-top: 12px
    }

    .score-column:nth-child(5) {
        grid-column: 1/-1;
        border-right: 0;
        border-bottom: 0
    }

    .score-game {
        font-size: 15px
    }

    .score-row {
        font-size: 9px;
        grid-template-columns: 14px minmax(0, 1fr) auto;
        gap: 4px
    }

    .board-foot {
        line-height: 1.8
    }

    footer {
        font-size: 8px;
        line-height: 1.8
    }

    footer span:last-child {
        text-align: right
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important
    }
}

/* =========================================================
   STAR SNACKER — GAME-SPECIFIC STYLES
   Uses the shared Retro Modern palette while preserving the
   game's original layout, dimensions, and interaction styling.

   Add class="star-snacker-page" to Star Snacker's <body>.
   These rules are scoped so they do not affect other pages.
   ========================================================= */

/*body.star-snacker-page {
    display: grid;
    place-items: center;
    padding: 14px;
    background: radial-gradient(ellipse at 50% 0%,
            #15232b 0%,
            #101b22 55%,
            #060c10 100%);
}*/

.star-snacker-page .shell {
    width: min(100%, 520px);
}

.star-snacker-page header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 2px 10px;
}

.star-snacker-page .logo {
    font-size: clamp(23px, 5vw, 32px);
    font-weight: 1000;
    letter-spacing: -1.5px;
}

.star-snacker-page .logo span {
    color: var(--yellow);
}

.star-snacker-page .tag {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.star-snacker-page .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.star-snacker-page .stat {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
}

.star-snacker-page .stat small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.star-snacker-page .stat strong {
    font-size: 21px;
    line-height: 1.3;
}

.star-snacker-page .gamebox {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    max-height: 70vh;
    border: 1px solid var(--line-strong);
    border-radius: 22px;
    background: var(--bg-deep);
    box-shadow: 0 18px 60px rgb(0 0 0 / 45%);
}

.star-snacker-page canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.star-snacker-page .overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgb(6 12 16 / 78%);
    text-align: center;
    backdrop-filter: blur(5px);
}

.star-snacker-page .overlay.hidden {
    display: none;
}

.star-snacker-page .card {
    max-width: 330px;
}

.star-snacker-page .eyebrow {
    color: var(--yellow);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
}

.star-snacker-page .card h1 {
    margin: 12px 0;
    font-size: clamp(32px, 8vw, 48px);
    line-height: 0.98;
    letter-spacing: -2px;
}

.star-snacker-page .card p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.star-snacker-page .btn {
    border: 0;
    border-radius: 999px;
    padding: 14px 24px;
    background: var(--orange);
    color: #15130f;
    font-size: 15px;
    font-weight: 1000;
    cursor: pointer;
    box-shadow: 0 6px 0 #9b4d1d;
    touch-action: manipulation;
}

.star-snacker-page .btn:hover {
    background: var(--orange-hover, #ffa34f);
}

.star-snacker-page .btn:active {
    transform: translateY(3px);
    box-shadow: 0 3px 0 #9b4d1d;
}

.star-snacker-page .help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    color: var(--muted);
    font-size: 12px;
}

.star-snacker-page .help b {
    color: var(--ink);
}

.star-snacker-page .pill {
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    white-space: nowrap;
}

.star-snacker-page .firebtn {
    padding: 9px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--panel-raised, #15232b);
    color: var(--ink);
    font-weight: 900;
    cursor: pointer;
    touch-action: manipulation;
}

.star-snacker-page .tiny {
    margin: 10px 2px 0;
    color: var(--muted-dark, #788891);
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
}

.star-snacker-page .arcade-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 2px 12px;
    font: 10px var(--mono, monospace);
}

.star-snacker-page .back-link,
.star-snacker-page .tiny a {
    color: var(--cyan);
    text-decoration: none;
}

.star-snacker-page .arcade-player {
    color: var(--muted);
    letter-spacing: 0.5px;
}

.star-snacker-page .arcade-player strong {
    color: var(--yellow);
}

.star-snacker-page .quit-btn {
    margin-left: 8px;
    padding: 7px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--panel-raised, #15232b);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.star-snacker-page .quit-btn:disabled {
    opacity: 0.55;
    cursor: wait;
}

.star-snacker-page .save-status {
    min-height: 15px;
    margin: 0 2px 8px;
    color: var(--yellow);
    font: 10px var(--mono, monospace);
    text-align: center;
}

@media (max-height: 700px) {
    .star-snacker-page .gamebox {
        max-height: 58vh;
    }

    .star-snacker-page .stat {
        padding: 6px 10px;
    }

    .star-snacker-page .stat strong {
        font-size: 18px;
    }

    /* =========================================================
   STAR SNACKER — targeted styling fixes
   Keep these rules at the end of styles.css.
   ========================================================= */

    /* Restore the game window border and shadow. */
    .star-snacker-page .gamebox {
        border: 1px solid var(--line-strong, #40545f);
        box-shadow: 0 18px 60px rgb(0 0 0 / 45%);
    }

    /* Keep the primary game button visible before hover. */
    .star-snacker-page .btn {
        border: 0;
        background: linear-gradient(135deg,
                var(--orange, #ff8b32),
                var(--yellow, #ffc84a));
        color: #15130f;
        opacity: 1;
        box-shadow: 0 6px 0 #a95320;
        -webkit-appearance: none;
        appearance: none;
    }

    /* Preserve a clear hover state. */
    .star-snacker-page .btn:hover {
        background: linear-gradient(135deg,
                var(--orange-hover, #ffa34f),
                var(--yellow, #ffc84a));
        color: #15130f;
    }

    /* Preserve the original pressed-button behaviour. */
    .star-snacker-page .btn:active {
        transform: translateY(3px);
        box-shadow: 0 3px 0 #a95320;
    }

}

/* =========================================================
   SHARED GAME PAGE SYSTEM
   Use these classes for every game; game-specific CSS should
   be limited to the canvas/game mechanics, not page chrome.
   ========================================================= */
.game-page .shell {
    max-width: 1100px;
    padding-top: 24px;
    padding-bottom: 28px;
}

.game-page .game-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 18px;
    font: 11px var(--mono);
    font-weight: 800;
}

.game-page .game-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.game-page .back-link,
.game-page .scores-jump {
    color: var(--cyan);
    letter-spacing: .5px;
}

.game-page .back-link:hover,
.game-page .scores-jump:hover {
    color: var(--yellow);
}

.game-page .game-player {
    color: var(--muted);
    white-space: nowrap;
}

.game-page .game-player strong,
.game-page .game-player b {
    color: var(--yellow);
}

.game-page .game-quit,
.game-page .game-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel2);
    color: var(--ink);
    padding: 10px 13px;
    font: 700 11px var(--mono);
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
}

.game-page .game-quit:hover,
.game-page .game-button-secondary:hover {
    background: #20323c;
    border-color: var(--cyan);
}

.game-page .game-quit:disabled {
    opacity: .55;
    cursor: wait;
}

.game-page .game-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 18px;
}

.game-page .game-heading h1 {
    font: 900 clamp(38px, 7vw, 64px)/.95 var(--display);
    letter-spacing: 1px;
    margin: 0 0 8px;
}

.game-page .game-heading h1 span {
    display: inline;
    color: var(--yellow);
    text-shadow: none;
}

.game-page .game-subtitle {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.game-page .game-badge {
    flex: none;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--cyan);
    background: var(--panel);
    font: 10px var(--mono);
    white-space: nowrap;
}

.game-page .game-stats {
    display: flex;
    gap: 10px;
    margin: 0 0 12px;
}

.game-page .game-stat {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: linear-gradient(145deg, var(--panel2), var(--panel));
}

.game-page .game-stat small {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font: 10px var(--mono);
    letter-spacing: 1px;
}

.game-page .game-stat strong {
    font: 800 22px var(--display);
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* Keep the game viewport sized independently of the canvas intrinsic size.
   Star Snacker uses a 400×500 playfield, so its frame must stay portrait. */
.game-page .game-window {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: 70vh;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid #40545f;
    border-radius: 12px;
    background: #070d18;
    box-shadow: 0 0 0 4px #15232b, 0 18px 50px #0007;
}

.game-page .game-window canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.game-page .game-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    padding: clamp(14px, 4vw, 32px);
    text-align: center;
    background: rgba(5, 12, 22, .86);
    backdrop-filter: blur(3px);
}

.game-page .game-overlay[hidden],
.game-page .game-overlay.hidden {
    display: none;
}

.game-page .game-overlay-card {
    width: min(100%, 520px);
    padding: clamp(18px, 4vw, 30px);
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(21, 35, 43, .97), rgba(9, 17, 22, .97));
    box-shadow: 0 18px 50px #0008;
}

.game-page .game-eyebrow {
    color: var(--cyan);
    font: 10px var(--mono);
    letter-spacing: 2px;
}

.game-page .game-overlay-card h2 {
    margin: 10px 0;
    color: var(--ink);
    font: 900 clamp(30px, 6vw, 48px)/.98 var(--display);
    letter-spacing: .5px;
}

.game-page .game-overlay-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}

.game-page .game-button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 22px;
    border: 0;
    border-radius: 8px;
    background: var(--yellow);
    color: #15130f;
    font: 800 12px var(--mono);
    letter-spacing: .4px;
    cursor: pointer;
    box-shadow: inset 0 -3px 0 #cf7628;
    transition: transform .15s, filter .15s;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
}

.game-page .game-button-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.game-page .game-button-primary:active {
    transform: translateY(1px);
}

.game-page .game-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    color: var(--muted);
    font: 11px var(--mono);
    line-height: 1.7;
}

.game-page .game-help strong {
    color: var(--ink);
}

.game-page .game-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--muted);
    font: 10px var(--mono);
}

.game-page .game-fire {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel2);
    color: var(--ink);
    padding: 9px 14px;
    font: 800 11px var(--mono);
    cursor: pointer;
    touch-action: manipulation;
}

.game-page .game-fire:hover {
    border-color: var(--cyan);
}

.game-page .save-status {
    min-height: 17px;
    margin: 8px 0;
    color: var(--yellow);
    font: 11px var(--mono);
}

.game-page .game-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
    color: #788891;
    font: 10px var(--mono);
}

.game-page .game-footer b {
    color: var(--yellow);
}

.game-page .touch-controls {
    display: none;
    justify-content: center;
    gap: 12px;
    margin: 16px 0;
}

.game-page .touch-controls button {
    width: 60px;
    height: 50px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--panel2);
    color: var(--ink);
    font: 700 20px var(--mono);
    cursor: pointer;
    touch-action: manipulation;
}

.game-page .touch-controls button:active {
    border-color: var(--cyan);
    background: #20323c;
}

.game-page .instructions {
    margin: 14px 0 0;
    text-align: center;
    color: var(--muted);
    font: 10px/2 var(--mono);
}

@media(max-width:650px) {
    .game-page .shell {
        padding: 16px 16px 24px
    }

    .game-page .game-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px
    }

    .game-page .game-stats {
        gap: 6px
    }

    .game-page .game-stat {
        padding: 9px 10px
    }

    .game-page .game-stat strong {
        font-size: 19px
    }

    .game-page .game-topbar {
        align-items: flex-start
    }

    .game-page .game-quit {
        padding: 8px 9px
    }

    .game-page .game-footer {
        flex-direction: column;
        text-align: center
    }

    .game-page .touch-controls {
        display: flex;
    }
}

/* Correct per-game viewport proportions. Do not force every game into the
   same aspect ratio: Star Snacker is portrait (400x500), Pixel Jumper is
   landscape (800x450). Height limits scale the viewport width as well, so
   the frame never gets squashed or crops the playfield on short screens. */
.game-page.star-snacker-page .game-window {
    /*width: min(100%, 400px, calc(70vh * 4 / 5));*/
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: none;
}

.game-page.pixel-jumper-page .game-window {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: none;
}

.game-page .game-window canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;
}


/* =========================================================
   CABINET COLOUR THEMES
   Visual styling only: gameplay logic and scoring are unchanged.
   Colours match the home-page cabinet identities.
   ========================================================= */
.game-page.pixel-jumper-page {
    --cyan: #30ddfb;
    --yellow: #30ddfb;
    --line: rgba(48, 221, 251, .28);
    --panel: #0c1b2a;
    --panel2: #102637;
}

.game-page.pixel-jumper-page .game-heading h1 span,
.game-page.pixel-jumper-page .game-player strong,
.game-page.pixel-jumper-page .game-stat strong,
.game-page.pixel-jumper-page .game-eyebrow,
.game-page.pixel-jumper-page .game-badge,
.game-page.pixel-jumper-page .back-link,
.game-page.pixel-jumper-page .game-footer b {
    color: #30ddfb;
}

.game-page.pixel-jumper-page .game-window {
    border-color: #207e91;
    box-shadow: 0 0 0 4px #102637, 0 0 24px #30ddfb18, 0 18px 50px #0007;
}

.game-page.pixel-jumper-page .game-button-primary {
    background: #30ddfb;
    box-shadow: inset 0 -3px 0 #167e98;
    color: #06151b;
}

.game-page.pixel-jumper-page .game-quit:hover,
.game-page.pixel-jumper-page .game-fire:hover,
.game-page.pixel-jumper-page .touch-controls button:active {
    border-color: #30ddfb;
}

.game-page.star-snacker-page {
    --cyan: #ff4d78;
    --yellow: #ff4d78;
    --line: rgba(255, 77, 120, .28);
    --panel: #1b101e;
    --panel2: #281522;
}

.game-page.star-snacker-page .game-heading h1 span,
.game-page.star-snacker-page .game-player strong,
.game-page.star-snacker-page .game-stat strong,
.game-page.star-snacker-page .game-eyebrow,
.game-page.star-snacker-page .game-badge,
.game-page.star-snacker-page .back-link,
.game-page.star-snacker-page .game-footer b {
    color: #ff4d78;
}

.game-page.star-snacker-page .game-window {
    border-color: #91334f;
    box-shadow: 0 0 0 4px #281522, 0 0 24px #ff4d7818, 0 18px 50px #0007;
}

.game-page.star-snacker-page .game-button-primary {
    background: #ff4d78;
    box-shadow: inset 0 -3px 0 #a72d50;
    color: #200913;
}

.game-page.star-snacker-page .game-quit:hover,
.game-page.star-snacker-page .game-fire:hover {
    border-color: #ff4d78;
}

.game-page.block-puzzle-page {
    --cyan: #36f5aa;
    --yellow: #36f5aa;
    --line: rgba(54, 245, 170, .28);
    --panel: #0c1d22;
    --panel2: #102b2c;
}

.game-page.block-puzzle-page .game-heading h1 span,
.game-page.block-puzzle-page .game-player strong,
.game-page.block-puzzle-page .game-stat strong,
.game-page.block-puzzle-page .game-eyebrow,
.game-page.block-puzzle-page .game-badge,
.game-page.block-puzzle-page .back-link,
.game-page.block-puzzle-page .game-footer b {
    color: #36f5aa;
}

.game-page.block-puzzle-page .game-window {
    border-color: #217c60;
    box-shadow: 0 0 0 4px #102b2c, 0 0 24px #36f5aa18, 0 18px 50px #0007;
}

.game-page.block-puzzle-page .game-button-primary {
    background: #36f5aa;
    box-shadow: inset 0 -3px 0 #17845c;
    color: #061b13;
}

.game-page.block-puzzle-page .game-quit:hover,
.game-page.block-puzzle-page .game-fire:hover,
.game-page.block-puzzle-page .touch-controls button:active {
    border-color: #36f5aa;
}


/* =========================================================
   MINE MAZE — shared game-page structure with original palette
   and square viewport retained.
   ========================================================= */
.game-page.mine-maze-page {
    --ink: #f4f7ff;
    --muted: #aab6cb;
    --cyan: #c66bff;
    --yellow: #c66bff;
    --line: #503367;
    --panel: #21162f;
    --panel2: #21162f;
    display: grid;
    place-items: center;
    padding: 14px;
    background: radial-gradient(ellipse at 50% 0%, #30203e 0%, #171222 48%, #080d15 100%);
    color: #f4f7ff;
    font-family: ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.game-page.mine-maze-page .shell {
    width: min(100%, 620px);
    max-width: 620px;
    padding: 0;
}

.game-page.mine-maze-page .game-heading h1 span,
.game-page.mine-maze-page .game-player strong,
.game-page.mine-maze-page .game-stat strong,
.game-page.mine-maze-page .game-eyebrow,
.game-page.mine-maze-page .back-link,
.game-page.mine-maze-page .game-footer b {
    color: #c66bff;
}

.game-page.mine-maze-page .game-heading h1 span {
    text-shadow: none;
}

.game-page.mine-maze-page .game-heading {
    margin-bottom: 14px;
}

.game-page.mine-maze-page .game-subtitle {
    color: #aab6cb;
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 900;
}

.game-page.mine-maze-page .game-topbar {
    margin-bottom: 18px;
}

.game-page.mine-maze-page .game-quit {
    border-color: #503367;
    border-radius: 8px;
    background: #21162f;
    color: #f4f7ff;
}

.game-page.mine-maze-page .game-quit:hover {
    background: #352344;
    border-color: #c66bff;
}

.game-page.mine-maze-page .game-stats {
    gap: 8px;
    margin-bottom: 10px;
}

.game-page.mine-maze-page .game-stat {
    padding: 8px 12px;
    border-color: #503367;
    border-radius: 13px;
    background: #21162f;
}

.game-page.mine-maze-page .game-stat small {
    color: #9eafc8;
    font-size: 9px;
    letter-spacing: 1.5px;
}

.game-page.mine-maze-page .game-stat strong {
    color: #f4f7ff;
    font: 800 21px/1.35 Inter, system-ui, sans-serif;
}

.game-page.mine-maze-page .game-window {
    aspect-ratio: 1 / 1;
    max-height: none;
    border: 1px solid #8050a5;
    border-radius: 20px;
    background: #101a29;
    box-shadow: 0 18px 60px #0008;
}

.game-page.mine-maze-page .game-overlay {
    padding: 22px;
    background: #08111de0;
    backdrop-filter: blur(5px);
}

.game-page.mine-maze-page .game-overlay-card {
    width: min(100%, 390px);
    padding: 25px 22px;
    border-color: #66508f;
    border-radius: 22px;
    background: #191426ed;
    box-shadow: 0 20px 70px #0005;
}

.game-page.mine-maze-page .game-eyebrow {
    font-size: 10px;
    letter-spacing: .2em;
    font-weight: 900;
    color: #b99aff;
}

.game-page.mine-maze-page .game-overlay-card h2 {
    color: #eee7ff;
    font-size: clamp(29px, 7vw, 44px);
    letter-spacing: -.05em;
    line-height: .98;
    margin: 13px 0;
    font-weight: 900;
}

.game-page.mine-maze-page .game-overlay-card p {
    color: #c5b8df;
    font-size: 13px;
    line-height: 1.55;
}

.game-page.mine-maze-page .game-button-primary {
    background: #b85cff;
    box-shadow: inset 0 -3px 0 #71349b;
    color: #28200f;
}

.game-page.mine-maze-page .game-button-primary:hover {
    filter: brightness(1.04);
}

.game-page.mine-maze-page .mine-maze-actions {
    display: flex;
    justify-content: center;
    gap: 9px;
    flex-wrap: wrap;
}

.game-page.mine-maze-page .mine-maze-secondary {
    border: 1px solid #3c506a;
    border-radius: 999px;
    background: #202f43;
    color: #e8f0fb;
    padding: 13px 18px;
    font-weight: 1000;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 0 #101a28;
}

.game-page.mine-maze-page .mine-maze-help {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 11px;
    color: #aab6cb;
    font-size: 11px;
}

.game-page.mine-maze-page .mine-maze-help b {
    color: #dce6f4;
}

.game-page.mine-maze-page .mine-maze-controls {
    display: none;
    grid-template-columns: repeat(3, 48px);
    grid-template-rows: repeat(2, 42px);
    gap: 5px;
    justify-content: center;
    margin: 12px auto 0;
}

.game-page.mine-maze-page .mine-maze-controls button {
    border: 1px solid #344a63;
    border-radius: 11px;
    background: #17263a;
    color: #f5f7fc;
    font-size: 18px;
    font-weight: 900;
    touch-action: manipulation;
}

.game-page.mine-maze-page .mine-maze-controls button:active {
    background: #344b63;
}

.game-page.mine-maze-page .mine-maze-controls .up {
    grid-column: 2;
    grid-row: 1;
}

.game-page.mine-maze-page .mine-maze-controls .left {
    grid-column: 1;
    grid-row: 2;
}

.game-page.mine-maze-page .mine-maze-controls .down {
    grid-column: 2;
    grid-row: 2;
}

.game-page.mine-maze-page .mine-maze-controls .right {
    grid-column: 3;
    grid-row: 2;
}

.game-page.mine-maze-page .mine-maze-status {
    color: #c66bff;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-top: 6px;
}

.game-page.mine-maze-page .game-footer {
    margin-top: 12px;
    padding-top: 12px;
    color: #71839a;
}

@media (pointer: coarse) {
    .game-page.mine-maze-page .mine-maze-controls {
        display: grid;
    }

    .game-page.mine-maze-page .mine-maze-help .mine-maze-desktop {
        display: none;
    }
}

@media (max-width: 480px) {
    .game-page.mine-maze-page .game-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .game-page.mine-maze-page .game-nav {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 420px) {
    .game-page.mine-maze-page {
        padding: 9px;
    }

    .game-page.mine-maze-page .game-stat {
        padding: 7px 9px;
    }

    .game-page.mine-maze-page .game-stat strong {
        font-size: 18px;
    }

    .game-page.mine-maze-page .mine-maze-help {
        font-size: 10px;
    }
}

/* =========================================================
   RIVER RUSH — shared game-page structure with original
   orange/gold palette and portrait 4:5 viewport retained.
   ========================================================= */
.game-page.river-rush-page {
    --ink: #e8fbf7;
    --muted: #c8b58f;
    --cyan: #ffb638;
    --yellow: #ffb638;
    --line: #765323;
    --panel: #302516;
    --panel2: #0b2831;
}

.game-page.river-rush-page .shell {
    width: min(100%, 760px);
    max-width: 760px;
    padding: 18px 16px 30px;
}

.game-page.river-rush-page .game-heading {
    margin-bottom: 16px;
}

.game-page.river-rush-page .game-heading h1 span {
    color: #ffb638;
    text-shadow: none;
}

.game-page.river-rush-page .game-heading h1 span {
    color: #ffb638;
    text-shadow: none;
}

.game-page.river-rush-page .game-subtitle {
    color: #c8b58f;
    font-size: 10px;
    letter-spacing: .2em;
    font-weight: 800;
    margin-top: 8px;
}

.game-page.river-rush-page .game-player {
    color: #c8b58f;
    font-size: 11px;
    letter-spacing: .08em;
}

.game-page.river-rush-page .game-player strong,
.game-page.river-rush-page .back-link,
.game-page.river-rush-page .game-eyebrow,
.game-page.river-rush-page .game-stat strong,
.game-page.river-rush-page .game-footer b {
    color: #ffb638;
}

.game-page.river-rush-page .game-quit {
    margin-left: 10px;
    border-color: #765323;
    background: #302516;
    color: #e8fbf7;
    border-radius: 12px;
    padding: 10px 13px;
    font-weight: 800;
}

.game-page.river-rush-page .game-quit:hover {
    border-color: #ffb638;
}

.game-page.river-rush-page .game-badge {
    border-color: #765323;
    color: #ffb638;
}

.game-page.river-rush-page .game-stats {
    gap: 10px;
    margin-bottom: 12px;
}

.game-page.river-rush-page .game-stat {
    background: #0b2831;
    border-color: #5c4527;
    border-radius: 14px;
    padding: 11px 13px;
}

.game-page.river-rush-page .game-stat small {
    color: #c8b58f;
    font-size: 9px;
    letter-spacing: .16em;
}

.game-page.river-rush-page .game-stat strong {
    font: 900 clamp(18px, 4vw, 25px) Inter, system-ui, sans-serif;
}

.game-page.river-rush-page .game-window {
    aspect-ratio: 4 / 5;
    max-height: none;
    border-color: #a66d20;
    border-radius: 20px;
    background: #082a35;
    box-shadow: 0 18px 60px #0003;
    touch-action: none;
}

.game-page.river-rush-page .game-overlay {
    padding: 20px;
    background: linear-gradient(180deg, #061d26a8, #061d26df);
}

.game-page.river-rush-page .game-overlay-card {
    width: min(100%, 390px);
    padding: 25px 22px;
    border-color: #3b7277;
    border-radius: 22px;
    background: #092832ed;
    box-shadow: 0 20px 70px #0005;
}

.game-page.river-rush-page .game-eyebrow {
    font-size: 10px;
    letter-spacing: .2em;
    font-weight: 900;
}

.game-page.river-rush-page .game-overlay-card h2 {
    color: #e8fbf7;
    font-size: clamp(29px, 7vw, 44px);
    letter-spacing: -.05em;
    line-height: .98;
    margin: 13px 0;
    font-weight: 900;
}

.game-page.river-rush-page .game-overlay-card p {
    color: #b9d7d8;
    font-size: 13px;
    line-height: 1.55;
}

.game-page.river-rush-page .game-button-primary {
    background: #ffb638;
    box-shadow: inset 0 -3px 0 #a16b0f;
    color: #05252c;
    border: 0;
    padding: 13px 20px;
    border-radius: 12px;
    margin-top: 5px;
    min-width: 160px;
}

.game-page.river-rush-page .river-rush-tip {
    font-size: 11px;
    margin-bottom: 0;
}

.game-page.river-rush-page .river-rush-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #c8b58f;
    font-size: 11px;
    margin: 12px 2px;
}

.game-page.river-rush-page .river-rush-pads {
    display: flex;
    gap: 8px;
}

.game-page.river-rush-page .river-rush-pads button {
    width: 54px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid #765323;
    background: #302516;
    color: #e8fbf7;
    font-size: 18px;
    font-weight: 900;
    touch-action: manipulation;
}

.game-page.river-rush-page .river-rush-status {
    color: #ffb638;
    text-align: center;
    margin: 0 0 8px;
    min-height: 18px;
}

.game-page.river-rush-page .game-footer {
    margin-top: 20px;
}

@media (max-width: 650px) {
    .game-page.river-rush-page .shell {
        padding: 12px 10px 24px;
    }

    .game-page.river-rush-page .game-badge {
        display: none;
    }

    .game-page.river-rush-page .game-overlay-card {
        padding: 20px 16px;
    }

    .game-page.river-rush-page .river-rush-help {
        font-size: 10px;
    }

    .game-page.river-rush-page .game-quit {
        padding: 8px;
        margin-left: 4px;
    }
}