/* ============================================================
   RoboKyle: Undead Nightmare - game-only stylesheet
   Loaded on /public/game/undead-nightmare/
   Palette: extends site's brand + accent, adds dark game shell
   ============================================================ */

:root {
    --gm-bg:        #07060A;
    --gm-panel:     #14100F;
    --gm-panel-2:   #1E1715;
    --gm-line:      #37211C;
    --gm-line-soft: #241614;
    --gm-ink:       #F1E4D2;
    --gm-ink-soft:  #BFA898;
    --gm-ink-mute:  #7C6459;
    --gm-orange:    #E3552B;
    --gm-orange-hot:#FF7A3D;
    --gm-teal:      #6FBFCB;
    --gm-red:       #B4231C;
    --gm-blood:     #8E0F14;
    --gm-green:     #7BC59A;
}

/* Hell-glow behind the whole frame */
body.game-body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(70% 50% at 50% 110%, rgba(180,35,28,.28) 0%, transparent 65%),
        radial-gradient(50% 40% at 15% -10%, rgba(227,85,43,.14) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* Skip link - game.html doesn't load index.css, so it needs its own
   copy. Without a :focus rule it was parked off-screen permanently. */
.skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 100;
    background: var(--gm-ink);
    color: var(--gm-bg);
    padding: .6rem .9rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* Visible focus ring for keyboard users. */
.game-body :focus-visible {
    outline: 3px solid var(--gm-orange);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Page shell - take the whole viewport, dark chrome */
/* Grand Heist has had this from the start; Undead never did, so padding
   added to declared widths here and not there, and the two games drifted
   apart on anything with both. */
*, *::before, *::after { box-sizing: border-box; }

body.game-body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    background: var(--gm-bg);
    color: var(--gm-ink);
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.game-shell {
    flex: 1;
    display: grid;
    place-items: center;
    padding: clamp(.5rem, 1.6vw, 1.2rem);
    position: relative;
    z-index: 1;
    background:
        radial-gradient(60% 60% at 20% 15%, rgba(142,15,20,.20) 0%, transparent 55%),
        radial-gradient(50% 55% at 85% 85%, rgba(227,85,43,.16) 0%, transparent 60%),
        var(--gm-bg);
}

/* Nothing inside the frame is draggable or selectable. */
.game-frame img,
.game-frame canvas { -webkit-user-drag: none; user-select: none; }

.game-frame {
    width: 100%;
    /* The arena is 3:2, so there is no point being wider than the height
       can support: whichever axis runs out first decides. */
    max-width: min(1500px, calc((100vh - 7rem) * 1.5), calc((100dvh - 7rem) * 1.5));
    background: var(--gm-panel);
    border: 1px solid var(--gm-line);
    border-radius: 14px;
    box-shadow:
        0 0 0 1px rgba(227,85,43,.12),
        0 0 60px -12px rgba(180,35,28,.35),
        0 40px 80px -30px rgba(0,0,0,.85);
    overflow: hidden;
    position: relative;
}

/* Common screen container - swaps between menus and gameplay */
.screen {
    display: none;
    padding: clamp(1.5rem, 4vw, 3rem);
    /* No fixed floor: on a short window that pushed the game off the
       bottom of the page. The menus scroll inside the frame instead. */
    min-height: min(600px, 68vh);
}
.screen.active { display: block; }
.screen.centered { display: none; }
.screen.centered.active {
    display: grid;
    place-items: center;
    text-align: center;
}

/* ---------- Big RoboKyle title logo ----------
   'Black Ops One' is loaded via <link> in game.html: an @import sitting
   this far down the file is ignored by every browser, so the whole game
   UI was silently falling back to Impact. */

.rk-logo {
    font-family: 'Black Ops One', 'Fraunces', Impact, sans-serif;
    font-size: clamp(3rem, 9vw, 6.5rem);
    line-height: .9;
    letter-spacing: .01em;
    margin: 0 0 .3em;
    text-transform: uppercase;
    display: inline-flex;
    gap: .12em;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.5));
}
.rk-logo .robo {
    color: #F4EADA;
    -webkit-text-stroke: 2px #000;
    text-shadow:
        0 3px 0 #000,
        0 0 24px rgba(255,255,255,.18);
    transform: skew(-6deg);
}
.rk-logo .kyle {
    color: var(--gm-orange);
    -webkit-text-stroke: 2px #000;
    text-shadow:
        0 3px 0 #000,
        0 0 26px rgba(227,85,43,.6),
        0 0 60px rgba(180,35,28,.4);
    transform: skew(-6deg);
    animation: emberFlicker 3.5s ease-in-out infinite;
}
@keyframes emberFlicker {
    0%, 100% { filter: brightness(1); }
    45%      { filter: brightness(1.14); }
    55%      { filter: brightness(.94); }
}
/* Episode subtitle, sits between the logo and the tagline. */
.rk-subtitle {
    font-family: 'Black Ops One', Impact, sans-serif;
    font-size: clamp(1.05rem, 3vw, 1.9rem);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gm-ink);
    margin: -.15em 0 .85rem;
    opacity: .92;
    text-shadow:
        0 2px 0 #000,
        0 0 18px rgba(142,15,20,.65);
}

.rk-tagline {
    font-family: 'Black Ops One', Impact, sans-serif;
    color: var(--gm-ink-soft);
    letter-spacing: .3em;
    font-size: .9rem;
    text-transform: uppercase;
    margin: 0 0 2rem;
    position: relative;
}
.rk-tagline::before,
.rk-tagline::after {
    content: "";
    position: absolute;
    top: 50%;
    width: clamp(20px, 8vw, 70px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gm-orange));
}
.rk-tagline::before { right: calc(100% + 14px); }
.rk-tagline::after  { left: calc(100% + 14px); transform: scaleX(-1); }

/* ---------- Menu buttons ---------- */
.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    min-width: min(320px, 90vw);
}
.menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.4rem;
    border-radius: 12px;
    border: 1px solid var(--gm-line);
    background: var(--gm-panel-2);
    color: var(--gm-ink);
    font: inherit;
    font-family: 'Black Ops One', Impact, sans-serif;
    font-size: 1.05rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: transform .1s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.menu-btn::after {
    content: "\203A";
    color: var(--gm-orange);
    font-size: 1.3rem;
    line-height: 1;
    transition: transform .15s ease;
}
.menu-btn:hover {
    background: color-mix(in oklab, var(--gm-orange) 12%, var(--gm-panel-2));
    border-color: var(--gm-orange);
    color: var(--gm-ink);
    transform: translateX(3px);
}
.menu-btn:hover::after { transform: translateX(4px); }
.menu-btn:focus-visible {
    outline: 3px solid var(--gm-orange);
    outline-offset: 3px;
}
.menu-btn.is-primary {
    background: var(--gm-orange);
    color: #08090C;
    border-color: var(--gm-orange);
}
.menu-btn.is-primary::after { color: #08090C; }
.menu-btn.is-primary:hover {
    background: var(--gm-orange-hot);
    border-color: var(--gm-orange-hot);
}
.menu-btn[disabled], .menu-btn.is-disabled {
    background: var(--gm-panel-2);
    color: var(--gm-ink-mute);
    border-color: var(--gm-line-soft);
    cursor: not-allowed;
    opacity: .75;
}
.menu-btn[disabled]:hover, .menu-btn.is-disabled:hover {
    transform: none;
    background: var(--gm-panel-2);
    border-color: var(--gm-line-soft);
}
.menu-btn .soon {
    font-size: .7rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--gm-orange) 20%, transparent);
    color: var(--gm-orange);
    letter-spacing: .12em;
}

.menu-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: none;
    border: 0;
    color: var(--gm-ink-soft);
    font: inherit;
    font-family: 'Black Ops One', Impact, sans-serif;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: .85rem;
    cursor: pointer;
    padding: .5rem 0;
    margin-bottom: 1rem;
}
.menu-back:hover { color: var(--gm-orange); }
.menu-back::before { content: "\2039"; font-size: 1.2rem; line-height: 1; }

.screen-title {
    font-family: 'Black Ops One', Impact, sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    letter-spacing: .05em;
    text-transform: uppercase;
    margin: 0 0 .3em;
    color: var(--gm-ink);
}
.screen-title .accent { color: var(--gm-orange); }
.screen-sub {
    color: var(--gm-ink-soft);
    margin: 0 0 2rem;
    max-width: 46rem;
}

/* ---------- Map selector cards ---------- */
.map-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 720px) { .map-grid { grid-template-columns: 1fr; } }

.map-card {
    background: var(--gm-panel-2);
    border: 1px solid var(--gm-line);
    border-radius: 14px;
    padding: 0;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, border-color .15s ease;
}
.map-card:hover {
    transform: translateY(-2px);
    border-color: var(--gm-orange);
}
.map-card:focus-visible {
    outline: 3px solid var(--gm-orange);
    outline-offset: 3px;
}
.map-thumb {
    aspect-ratio: 5 / 3;
    display: block;
    border-bottom: 1px solid var(--gm-line);
}
.map-card h4 {
    font-family: 'Black Ops One', Impact, sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 1.05rem;
    margin: 1rem 1.1rem .3rem;
    color: var(--gm-ink);
}
.map-card p {
    font-size: .9rem;
    color: var(--gm-ink-soft);
    margin: 0 1.1rem 1.1rem;
}
.map-card .diff {
    display: inline-block;
    margin: 0 1.1rem 1rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: color-mix(in oklab, var(--gm-teal) 25%, transparent);
    color: var(--gm-teal);
    border: 1px solid color-mix(in oklab, var(--gm-teal) 40%, transparent);
    font-family: 'Black Ops One', Impact, sans-serif;
}
.map-card .diff.hard { background: color-mix(in oklab, var(--gm-orange) 25%, transparent); color: var(--gm-orange); border-color: color-mix(in oklab, var(--gm-orange) 40%, transparent); }
.map-card .diff.brutal { background: color-mix(in oklab, var(--gm-red) 25%, transparent); color: var(--gm-red); border-color: color-mix(in oklab, var(--gm-red) 40%, transparent); }

/* ---------- Settings ---------- */
.settings-grid {
    display: grid;
    gap: 1rem;
    max-width: 520px;
}
.setting {
    background: var(--gm-panel-2);
    border: 1px solid var(--gm-line);
    border-radius: 12px;
    padding: 1rem 1.2rem;
}
.setting > label {
    display: block;
    font-family: 'Black Ops One', Impact, sans-serif;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .82rem;
    color: var(--gm-ink);
    margin-bottom: .6rem;
}
.setting input[type="range"] {
    width: 100%;
    accent-color: var(--gm-orange);
}
.setting .seg {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
}
.setting .seg label {
    flex: 1;
    min-width: 5rem;
}
.setting .seg input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.setting .seg span {
    display: block;
    text-align: center;
    padding: .55rem .8rem;
    border-radius: 8px;
    background: var(--gm-panel);
    border: 1px solid var(--gm-line);
    color: var(--gm-ink-soft);
    font-size: .88rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    font-family: 'Black Ops One', Impact, sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.setting .seg label:hover span { color: var(--gm-ink); border-color: var(--gm-orange); }
.setting .seg input[type="radio"]:checked + span {
    background: var(--gm-orange);
    color: #08090C;
    border-color: var(--gm-orange);
}
.setting .seg input[type="radio"]:focus-visible + span {
    outline: 3px solid var(--gm-orange);
    outline-offset: 3px;
}

.controls-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem 1.2rem;
    color: var(--gm-ink-soft);
    max-width: 560px;
    font-size: .95rem;
}
.controls-grid kbd {
    display: inline-block;
    padding: .12rem .5rem;
    background: var(--gm-panel-2);
    border: 1px solid var(--gm-line);
    border-bottom-width: 2px;
    border-radius: 6px;
    color: var(--gm-ink);
    font-family: ui-monospace, Consolas, monospace;
    font-size: .82rem;
    margin-right: .35rem;
}

/* ---------- Multiplayer stub ---------- */
.stub-note {
    background: color-mix(in oklab, var(--gm-orange) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--gm-orange) 35%, transparent);
    color: var(--gm-ink);
    padding: 1.2rem 1.4rem;
    border-radius: 12px;
    max-width: 520px;
    margin: 0 auto;
    text-align: left;
}
.stub-note strong {
    color: var(--gm-orange);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-family: 'Black Ops One', Impact, sans-serif;
    font-size: .8rem;
    display: block;
    margin-bottom: .4rem;
}

/* ===== Fullscreen ===== */
.fs-btn {
    position: absolute; top: .6rem; right: .6rem; z-index: 60;
    display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
    background: rgba(10,13,19,.82); border: 1px solid var(--gm-line);
    border-radius: 6px; padding: .3rem .55rem; color: var(--gm-ink-soft, #b9a99b);
    font-family: inherit; font-size: .62rem;
    letter-spacing: .12em; text-transform: uppercase;
    transition: border-color .14s, color .14s, background .14s;
}
.fs-btn:hover { border-color: var(--gm-accent, #E3552B); color: var(--gm-accent, #E3552B); }
.fs-btn svg { width: 13px; height: 13px; }

/* ===== Fullscreen =====
   The frame becomes the screen and lays its active child out as a column.
   The arena then takes the whole area at the monitor's own aspect ratio,
   and the canvas resizes its backing store to match, so fullscreen shows
   more of the world rather than magnifying the same picture. */
.game-frame.is-fullscreen,
.game-frame:fullscreen,
.game-frame.is-maxed {
    border-radius: 0; border: 0; box-shadow: none;
    width: 100vw; height: 100vh; height: 100dvh;
    max-width: none;
    display: flex; flex-direction: column;
}
.game-frame.is-maxed { position: fixed; inset: 0; z-index: 999; }

.game-frame.is-fullscreen .screen.active,
.game-frame:fullscreen .screen.active,
.game-frame.is-maxed .screen.active {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Hold the menus in a centred column. Without this every list and
       heading stretches the full width of the display and the eye has to
       travel from one corner to the other. */
    padding-inline: max(clamp(1.5rem, 4vw, 3rem), calc((100% - 1180px) / 2));
    /* And centre that column vertically, or a short menu sits in the top
       third of a 1080 tall screen with a void under it. "safe" so a menu
       taller than the display still scrolls from its top rather than
       having the top clipped off. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;
}
/* The arena is not a menu: it fills. Scoped to .active, because .screen is
   display:none until then and an unscoped display:block here put the arena
   on screen underneath every menu. */
.game-frame.is-fullscreen #screen-play.active,
.game-frame:fullscreen #screen-play.active,
.game-frame.is-maxed #screen-play.active {
    display: block;
}
.game-frame.is-fullscreen .screen.centered.active,
.game-frame:fullscreen .screen.centered.active,
.game-frame.is-maxed .screen.centered.active {
    display: grid;
    place-items: center;
    align-content: center;
}
.game-frame.is-fullscreen #screen-play.active,
.game-frame:fullscreen #screen-play.active,
.game-frame.is-maxed #screen-play.active {
    aspect-ratio: auto;
    padding: 0;
    overflow: hidden;
}

/* Short windows: the site strip goes first. */
@media (max-height: 620px) {
    .back-strip { display: none; }
}

/* ---------- Gameplay screen ---------- */
#screen-play {
    padding: 0;
    position: relative;
    background: #0a0d13;
    /* Windowed, the arena keeps a 3:2 shape so the frame has a height to
       take. In fullscreen this is dropped and the canvas takes the screen's
       own shape, which is the whole point of fullscreen. */
    aspect-ratio: 3 / 2;
    min-height: 0;
}
#gameCanvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #0a0d13;
    cursor: crosshair;
}

/* HUD overlay */
.hud {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Anchored to the corners, with the inset growing a little on a wide
       display rather than the whole HUD being pulled toward the middle. */
    padding: clamp(.8rem, 1.6vh, 1.3rem) clamp(1rem, 1.6vw, 2.2rem);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 1rem;
    font-family: 'Black Ops One', Impact, sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.hud .box {
    background: rgba(8,9,12,.7);
    border: 1px solid var(--gm-line);
    border-radius: 10px;
    padding: .55rem .8rem;
    color: var(--gm-ink);
    font-size: .85rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.hud .box .k {
    display: block;
    font-size: .65rem;
    color: var(--gm-ink-mute);
    letter-spacing: .18em;
    margin-bottom: .1rem;
}
.hud .box .v { font-size: 1rem; }
.hud .box .v .accent { color: var(--gm-orange); }
.hud-l { justify-self: start; display: flex; gap: .5rem; flex-wrap: wrap; }
.hud-c { justify-self: center; }
.hud-r { justify-self: end; display: flex; gap: .5rem; flex-wrap: wrap; }
.health-bar {
    width: 180px;
    height: 10px;
    background: rgba(255,255,255,.08);
    border: 1px solid var(--gm-line);
    border-radius: 999px;
    overflow: hidden;
    margin-top: .3rem;
}
.health-bar > i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--gm-orange), var(--gm-orange-hot));
    transition: width .15s ease;
}
.sprint-bar {
    width: 180px;
    height: 6px;
    background: rgba(255,255,255,.08);
    border: 1px solid var(--gm-line);
    border-radius: 999px;
    overflow: hidden;
    margin-top: .3rem;
}
.sprint-bar > i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--gm-teal), #A6E4EE);
    transition: width .08s linear;
}

/* Combo streak (top-center under wave) */
.combo {
    position: absolute;
    left: 50%;
    top: 5.2rem;
    transform: translateX(-50%);
    display: none;
    padding: .45rem .9rem;
    background: rgba(8,9,12,.7);
    border: 1px solid var(--gm-orange);
    border-radius: 999px;
    color: var(--gm-orange);
    font-family: 'Black Ops One', Impact, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .85rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    animation: comboPulse .25s ease-out;
}
.combo.show { display: inline-flex; gap: .6rem; align-items: baseline; }
.combo .combo-num { font-size: 1.4rem; color: var(--gm-orange-hot); }
.combo .combo-x { font-size: .8rem; margin-left: .1rem; color: var(--gm-ink-soft); }
.combo .combo-label { font-size: .72rem; color: var(--gm-ink-soft); letter-spacing: .18em; }
@keyframes comboPulse {
    0% { transform: translateX(-50%) scale(1.25); }
    100% { transform: translateX(-50%) scale(1); }
}

/* Minimap (bottom-left) */
.minimap-wrap {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    padding: 6px;
    background: rgba(8,9,12,.7);
    border: 1px solid var(--gm-line);
    border-radius: 10px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.minimap-wrap canvas {
    display: block;
    width: 180px;
    height: 120px;
    border-radius: 6px;
    image-rendering: -webkit-optimize-contrast;
}

/* Hint text (bottom-right) */
.hint {
    position: absolute;
    right: 1rem;
    bottom: 1.2rem;
    padding: .45rem .8rem;
    background: rgba(8,9,12,.55);
    border: 1px solid var(--gm-line-soft);
    border-radius: 999px;
    color: var(--gm-ink-mute);
    font-family: 'Black Ops One', Impact, sans-serif;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .7rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
}
@media (max-width: 720px) {
    .minimap-wrap canvas { width: 130px; height: 88px; }
    .hint { display: none; }
}

.wave-banner {
    position: absolute;
    left: 50%; top: 30%;
    transform: translate(-50%, -50%);
    font-family: 'Black Ops One', Impact, sans-serif;
    text-transform: uppercase;
    color: var(--gm-orange);
    font-size: clamp(2rem, 6vw, 4rem);
    letter-spacing: .1em;
    text-shadow: 0 4px 0 #000, 0 8px 24px rgba(227,107,62,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.wave-banner.show { opacity: 1; }
.wave-banner .sub {
    display: block;
    font-size: .3em;
    color: var(--gm-ink-soft);
    letter-spacing: .3em;
    margin-top: .3em;
}

/* Pause + game-over overlays */
.overlay {
    position: absolute;
    inset: 0;
    background: rgba(8,9,12,.85);
    display: none;
    place-items: center;
    text-align: center;
    padding: 2rem;
    z-index: 5;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.overlay.active { display: grid; }
.overlay h2 {
    font-family: 'Black Ops One', Impact, sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: clamp(2rem, 6vw, 3.5rem);
    color: var(--gm-orange);
    margin: 0 0 .3em;
    text-shadow: 0 4px 0 #000;
}
.overlay .stats {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin: 1rem 0 2rem;
    flex-wrap: wrap;
}
.overlay .stat {
    background: var(--gm-panel-2);
    border: 1px solid var(--gm-line);
    border-radius: 10px;
    padding: .8rem 1.2rem;
    min-width: 130px;
    font-family: 'Black Ops One', Impact, sans-serif;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.overlay .stat .k { font-size: .7rem; color: var(--gm-ink-mute); letter-spacing: .18em; display: block; margin-bottom: .3rem; }
.overlay .stat .v { font-size: 1.6rem; color: var(--gm-orange); }
.overlay .buttons { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }

/* Back-to-site strip below the game frame */
.back-strip {
    padding: 1.1rem 1rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.4rem;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}
.back-strip a {
    color: var(--gm-ink-mute);
    text-decoration: none;
    font-family: 'Black Ops One', Impact, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .76rem;
    transition: color .15s ease;
}
.back-strip a:first-child { color: var(--gm-teal); }
.back-strip a:hover { color: var(--gm-orange); }

/* Small screens */
@media (max-width: 620px) {
    .screen { min-height: auto; padding: 1.25rem; }
    .hud { grid-template-columns: 1fr; gap: .4rem; padding: .6rem .8rem; }
    .hud-l, .hud-r { justify-self: stretch; }
    .health-bar { width: 100%; }
}

/* ---------- "How to play" sub-headings ---------- */
.controls-head {
    font-family: 'Black Ops One', Impact, sans-serif;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .82rem;
    color: var(--gm-orange);
    margin: 1.6rem 0 .7rem;
}
.controls-head:first-of-type { margin-top: 1rem; }

/* ============================================================
   TOUCH CONTROLS
   Hidden by default. site.js puts `is-touch` on <html>, and game.js
   adds `touch-mode` to the frame while a round is running - both must
   be true before the pads appear, so a desktop mouse never sees them.
   ============================================================ */
.touch-ui { display: none; }

html.is-touch .game-frame.touch-mode .touch-ui {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 4;              /* above the HUD, below the overlays (z-index 5) */
    pointer-events: none;    /* children opt back in individually */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* ---------- Thumb sticks ---------- */
.tc-stick {
    position: absolute;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    width: 128px;
    height: 128px;
    pointer-events: auto;
    touch-action: none;
}
.tc-move { left: calc(1rem + env(safe-area-inset-left, 0px)); }
.tc-aim  { right: calc(1rem + env(safe-area-inset-right, 0px)); }

.tc-stick-base {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(30,23,21,.55), rgba(10,9,12,.4));
    border: 2px solid rgba(227,85,43,.35);
    display: grid;
    place-items: center;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.tc-stick-label {
    font-family: 'Black Ops One', Impact, sans-serif;
    font-size: .6rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gm-ink-mute);
    opacity: .8;
    pointer-events: none;
}
.tc-stick-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,122,61,.95), rgba(180,35,28,.85));
    border: 2px solid rgba(241,228,210,.35);
    box-shadow: 0 6px 18px rgba(0,0,0,.6);
    pointer-events: none;
    transition: transform .08s linear, opacity .15s ease;
}
.tc-stick.is-active .tc-stick-base { border-color: rgba(227,85,43,.75); }
.tc-stick.is-active .tc-stick-label { opacity: 0; }

/* ---------- Weapon slots ---------- */
.tc-weapons {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    gap: .4rem;
    pointer-events: auto;
}
.tc-wpn {
    width: 52px;
    min-height: 52px;
    border-radius: 12px;
    background: rgba(20,16,15,.72);
    border: 1px solid var(--gm-line);
    color: var(--gm-ink-soft);
    font-family: 'Black Ops One', Impact, sans-serif;
    font-size: .95rem;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    padding: .35rem .2rem;
    cursor: pointer;
    touch-action: manipulation;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.tc-wpn span {
    font-size: .5rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gm-ink-mute);
}
.tc-wpn.is-active {
    border-color: var(--gm-orange);
    color: var(--gm-orange);
    background: rgba(227,85,43,.18);
}
.tc-wpn.is-active span { color: var(--gm-orange); }
.tc-wpn.is-empty { opacity: .38; }

/* ---------- Utility buttons ---------- */
.tc-btn {
    border-radius: 50%;
    background: rgba(20,16,15,.72);
    border: 1px solid var(--gm-line);
    color: var(--gm-ink-soft);
    font-family: 'Black Ops One', Impact, sans-serif;
    letter-spacing: .06em;
    display: grid;
    place-items: center;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.tc-btn:active { border-color: var(--gm-orange); color: var(--gm-orange); }

.tc-utils {
    position: absolute;
    top: calc(.6rem + env(safe-area-inset-top, 0px));
    right: calc(.6rem + env(safe-area-inset-right, 0px));
    display: flex;
    flex-direction: column;
    gap: .4rem;
    pointer-events: auto;
    z-index: 2;              /* clear of the HUD score box */
}
.tc-utils .tc-btn { width: 42px; height: 42px; font-size: .9rem; }

.tc-sprint {
    position: absolute;
    left: calc(1rem + env(safe-area-inset-left, 0px));
    bottom: calc(9.5rem + env(safe-area-inset-bottom, 0px));
    width: 58px;
    height: 58px;
    font-size: .72rem;
}
.tc-sprint.is-active { border-color: var(--gm-teal); color: var(--gm-teal); }
.tc-sprint.is-spent  { opacity: .4; }

/* ---------- Layout tweaks while touch controls are live ---------- */
html.is-touch .game-frame.touch-mode .hud {
    padding: .5rem .7rem;
    font-size: .78rem;
}
html.is-touch .game-frame.touch-mode .hint { display: none; }
html.is-touch .game-frame.touch-mode .minimap-wrap canvas { width: 104px; height: 70px; }

/* Small phones: shrink the pads so they never swallow the arena. */
@media (max-width: 560px) {
    .tc-stick { width: 104px; height: 104px; }
    .tc-stick-knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
    .tc-wpn { width: 44px; min-height: 46px; font-size: .85rem; }
    .tc-sprint { width: 50px; height: 50px; font-size: .62rem; bottom: calc(8rem + env(safe-area-inset-bottom, 0px)); }
    .tc-utils .tc-btn { width: 38px; height: 38px; }
}

/* Landscape phones are short: pull everything tighter to the edges. */
@media (max-height: 460px) and (orientation: landscape) {
    .tc-stick { width: 96px; height: 96px; bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); }
    .tc-stick-knob { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
    .tc-sprint { bottom: calc(7rem + env(safe-area-inset-bottom, 0px)); }
    .tc-weapons { bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Rotate-to-landscape nudge ---------- */
.rotate-note {
    display: none;
    margin: .9rem auto 0;
    max-width: 32rem;
    text-align: center;
    background: rgba(30,23,21,.6);
    border: 1px solid var(--gm-line);
    border-radius: 10px;
    padding: .6rem .9rem;
    color: var(--gm-ink-soft);
    font-size: .8rem;
    line-height: 1.5;
}
html.is-touch.is-portrait .rotate-note { display: block; }

/* ---------- Menus on small screens ---------- */
@media (max-width: 620px) {
    .game-shell { padding: .6rem; }
    .game-frame { border-radius: 10px; }
    .menu-btn { width: 100%; min-height: 48px; }
    .menu-list { width: min(100%, 320px); margin-inline: auto; }
    .map-card { min-height: 48px; }
    .overlay { padding: 1.1rem; }
    .overlay .stats { gap: .6rem; }
    .overlay .stat { min-width: 92px; padding: .6rem .7rem; }
    .overlay .stat .v { font-size: 1.2rem; }
    .overlay .buttons { flex-direction: column; width: min(100%, 260px); margin-inline: auto; }
    .overlay .buttons .menu-btn { min-width: 0 !important; width: 100%; }
    .settings-grid { gap: 1rem; }
    .setting .seg { flex-wrap: wrap; }
    .setting .seg span { min-height: 44px; display: inline-flex; align-items: center; }
    .setting input[type="range"] { height: 32px; }
    .controls-grid { grid-template-columns: 1fr; }
    .back-strip { gap: .3rem 1rem; padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* Coarse pointers: kill hover transforms that stick after a tap. */
@media (hover: none) {
    .menu-btn:hover { transform: none; }
    .map-card:hover { transform: none; }
}

/* ============================================================
   TOUCH-MODE PLAY LAYOUT
   With two thumb sticks pinned to the bottom corners, the default HUD
   furniture collides: the minimap sits under the move stick and the
   utility cluster lands on the score box. This block re-flows the
   whole play screen for touch, and sizes the arena so the round always
   fits on screen without the page scrolling.
   ============================================================ */

/* --- Fit the arena to the viewport ---
   The canvas keeps its 3:2 ratio and is sized by whichever axis runs
   out first: width in portrait, height in landscape. The reserved
   5.5rem covers the shell padding, the back strip and the rotate note. */
html.is-touch .game-frame.touch-mode #screen-play {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    /* First line is the fallback: site.js keeps --vh in sync with the
       real visible height, which older Safari needs because it has no
       dvh unit (and would drop the whole declaration). */
    height: min(calc(var(--vh, 1vh) * 100 - 5.5rem), calc((100vw - 1.2rem) / 1.5));
    height: min(calc(100dvh - 5.5rem), calc((100vw - 1.2rem) / 1.5));
}
html.is-touch .game-frame.touch-mode #gameCanvas {
    width: auto;
    height: 100%;
    max-width: 100%;
    cursor: default;
}

/* --- Compact HUD row: never let it stack down the left edge --- */
html.is-touch .game-frame.touch-mode .hud {
    grid-template-columns: 1fr auto 1fr;
    gap: .4rem;
    align-items: start;
}
html.is-touch .game-frame.touch-mode .hud-l { justify-self: start; }
html.is-touch .game-frame.touch-mode .hud-r { justify-self: end; }
html.is-touch .game-frame.touch-mode .hud .box {
    padding: .35rem .5rem;
    font-size: .7rem;
    border-radius: 8px;
}
html.is-touch .game-frame.touch-mode .hud .box .v { font-size: .85rem; }
html.is-touch .game-frame.touch-mode .hud .box .k { font-size: .55rem; margin-bottom: 0; }
html.is-touch .game-frame.touch-mode .health-bar,
html.is-touch .game-frame.touch-mode .sprint-bar {
    width: 96px;
    height: 7px;
}

/* --- Utility cluster: top-left, tucked under the health box --- */
html.is-touch .game-frame.touch-mode .tc-utils {
    right: auto;
    bottom: auto;
    left: calc(.6rem + env(safe-area-inset-left, 0px));
    top: 5.4rem;
    flex-direction: row;
}

/* --- Minimap: top-right, clear of the aim stick and the score box --- */
html.is-touch .game-frame.touch-mode .minimap-wrap {
    left: auto;
    bottom: auto;
    right: calc(.6rem + env(safe-area-inset-right, 0px));
    top: 5.4rem;
    padding: 4px;
}

/* --- Combo badge drops below the wave box, which is shorter now --- */
html.is-touch .game-frame.touch-mode .combo {
    top: 4rem;
    padding: .3rem .6rem;
    font-size: .72rem;
}
html.is-touch .game-frame.touch-mode .combo .combo-num { font-size: 1.05rem; }
html.is-touch .game-frame.touch-mode .combo .combo-label { display: none; }

/* --- Wave banner sits above the sticks --- */
html.is-touch .game-frame.touch-mode .wave-banner { top: 38%; }

/* Very short landscape phones: reclaim the second HUD row. */
@media (max-height: 420px) and (orientation: landscape) {
    html.is-touch .game-frame.touch-mode .minimap-wrap { display: none; }
    html.is-touch .game-frame.touch-mode .tc-utils { top: 4.4rem; }
}

/* Portrait phones: the arena is short and wide, so the sticks would
   cover most of it. Hide the minimap and keep the pads slim. */
@media (max-width: 620px) and (orientation: portrait) {
    html.is-touch .game-frame.touch-mode .minimap-wrap { display: none; }
}

/* The frame goes edge-to-edge while playing on a phone. */
@media (max-width: 620px) {
    html.is-touch .game-frame.touch-mode {
        border-radius: 8px;
    }
}