:root {
    --accent: #ffcc44;
    --danger: #ff4444;
    --bg: #000;
}

/* ── Splash Overlay ──────────────────────────────────────────
   Sits above everything from the first paint. The static native
   splash (iOS LaunchScreen.storyboard / Android system SplashScreen)
   transitions seamlessly into this HTML overlay because both share
   the same #0a0a0a background and centered NOSPRITE branding. JS
   removes the .splash-active class on body once the game is
   initialized + a min-display window has passed; the overlay fades
   out via opacity transition then is fully removed.

   Design mirrors the static splash:
   - white bold sans-serif wordmark with layered green glow
   - mint tagline in monospace Courier at 65% opacity
   - subtle horizontal CRT scanlines across the surface
*/
#splash-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* Visible by default; JS removes body.splash-active to fade it out. */
    opacity: 1;
    transition: opacity 0.4s ease-out;
}
body:not(.splash-active) #splash-overlay {
    opacity: 0;
}
/* Scanline overlay matching the website's CRT effect. */
#splash-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.18) 2px,
        rgba(0, 0, 0, 0.18) 4px
    );
    pointer-events: none;
}
.splash-content {
    text-align: center;
    /* Sit slightly above center to mirror the static splash's vertical
       composition where the wordmark + tagline are centered with the
       lower half largely empty. */
    transform: translateY(-3vh);
}
.splash-wordmark {
    font-family: system-ui, -apple-system, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
    font-size: 2.6rem;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 0.4em;
    /* Matches the website hero h1 glow: tight inner halo + wide outer halo. */
    text-shadow:
        0 0 10px rgba(0, 255, 170, 0.6),
        0 0 30px rgba(0, 255, 170, 0.4),
        0 0 60px rgba(0, 255, 170, 0.2);
}
.splash-tagline {
    margin-top: 0.6rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    color: #00FFAA;
    opacity: 0.65;
    letter-spacing: 0.05em;
}
@media (max-width: 600px) {
    .splash-wordmark { font-size: 2rem; letter-spacing: 0.3em; }
    .splash-tagline { font-size: 0.7rem; }
}
@media (max-height: 500px) {
    .splash-wordmark { font-size: 1.8rem; }
    .splash-tagline { font-size: 0.65rem; }
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Kill the default Android blue/grey tap-flash on every clickable element
       (store tabs, settings rows, buttons, etc.). The tap still registers
       — only the visible flash is removed. */
    -webkit-tap-highlight-color: transparent;
}
html {
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
    height: 100%;
    height: 100dvh;
}
body {
    background: var(--bg);
    overflow: hidden;
    font-family: 'Courier New', Courier, monospace;
    color: #fff;
    overscroll-behavior: none;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    height: 100%;
    height: 100dvh;
    position: fixed;
    width: 100%;
}
canvas {
    display: block;
    touch-action: none;
}

/* ── HUD ──────────────────────────────────────────────────── */
#hud {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: calc(0.5rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) 0.5rem calc(1rem + env(safe-area-inset-left, 0px));
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    pointer-events: none;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
}
.hud-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
}
.hud-row > *:nth-child(1) { justify-self: start; }
.hud-row > *:nth-child(2) { justify-self: center; }
.hud-row > *:nth-child(3) { justify-self: end; }
#boss-display {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.6em;
    letter-spacing: 0.1em;
}
#boss-display[hidden] { display: none; }
#boss-name { color: #ff2222; font-weight: bold; }
#boss-count { color: #ffcc44; font-weight: bold; }

.hud-pause-btn {
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    transition: color 0.15s;
}
.hud-pause-btn:hover, .hud-pause-btn:active {
    color: #fff;
}
.hud-pause-icon {
    width: 1em;
    height: 1em;
    display: block;
}
.pause-label {
    font-size: 0.9em;
}

#chapter-display { color: var(--accent); }
#score-display {
    color: #fff;
    font-size: 1.05em;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}
.hud-mvp-tag {
    display: none; /* shown when body.is-mvp via rule below */
    font-size: 0.5em;
    letter-spacing: 0.18em;
    color: var(--accent);
    border: 1px solid rgba(255, 204, 68, 0.45);
    border-radius: 2px;
    padding: 0.15em 0.5em 0.18em;
    text-shadow: 0 0 6px rgba(255, 204, 68, 0.5);
    line-height: 1;
}
body.is-mvp .hud-mvp-tag { display: inline-block; }
#lives-display {
    color: #fff;
    display: inline-flex;
    align-items: baseline;
    gap: 0.3em;
}
#lives-display .armor {
    color: rgba(255,255,255,0.25);
    min-width: 1.4em;
    text-align: left;
    transition: color 0.15s;
}
#lives-display .armor.has-armor { color: #88ccff; }
#voidium-display { color: #ffcc44; }

.hud-center-group {
    display: inline-flex;
    align-items: center;
    gap: 1.2em;
}

.hud-powerup[data-type="rapid_fire"] { flex-direction: row-reverse; }

#powerups-display {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.hud-powerup {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    color: rgba(255,255,255,0.25);
    transition: color 0.15s;
}
.hud-powerup.active[data-type="rapid_fire"]  { color: #ff88ff; }
.hud-powerup.active[data-type="triple_shot"] { color: #88ffaa; }
.hud-powerup-icon {
    width: 1.15em;
    height: 1.15em;
    display: block;
}
.hud-powerup .time {
    min-width: 1.8em;
    text-align: left;
    font-size: 0.9em;
}

/* ── Overlay (shared container) ───────────────────────────── */
#overlay {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
    background: #000;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    overflow-y: auto;
}
#overlay.hidden { display: none; }

.screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 480px;
    padding: 1.5rem;
    min-height: 0;
}

#screen-store {
    justify-content: flex-start;
    max-width: 100%;
    height: 100%;
    padding: 1rem 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.screen.hidden { display: none; }

/* ── Starfield Background ────────────────────────────────── */
.starfield-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 19;
    pointer-events: none;
}

/* ── Start Screen ─────────────────────────────────────────── */
.game-title {
    font-family: 'Courier New', Courier, monospace;
    font-size: 2.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-shadow: 0 0 30px rgba(255, 204, 68, 0.3), 0 0 60px rgba(255, 204, 68, 0.1);
    margin-bottom: 0.3rem;
    text-align: center;
}

.game-subtitle {
    color: #bbb;
    font-size: 0.78rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    line-height: 1.9;
    margin-bottom: 2rem;
    text-align: center;
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 260px;
    margin-bottom: 1.5rem;
}

.menu-btn {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    padding: 0.85rem 1.5rem;
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.3);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.menu-btn:hover, .menu-btn:active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(255, 204, 68, 0.05);
    box-shadow: 0 0 15px rgba(255, 204, 68, 0.15);
}

.menu-btn-secondary {
    border-color: rgba(255,255,255,0.15);
    color: #aaa;
    font-size: 0.95rem;
}

.menu-btn-secondary:hover, .menu-btn-secondary:active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(255, 204, 68, 0.05);
    box-shadow: 0 0 12px rgba(255, 204, 68, 0.15);
}

/* ── Shared Screen Title ──────────────────────────────────── */
.screen-title {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.55rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 1.4rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 204, 68, 0.3);
    width: 100%;
    max-width: 260px;
    text-align: center;
}
.screen-title.is-danger {
    color: var(--danger);
    border-bottom-color: rgba(255, 68, 68, 0.35);
}

.menu-info {
    display: flex;
    gap: 2.5rem;
    margin-bottom: 1rem;
    font-family: 'Courier New', Courier, monospace;
}
.menu-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}
.menu-info-label {
    color: #aaa;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.7rem;
}
.menu-info-value {
    color: var(--accent);
    font-size: 1.05rem;
    letter-spacing: 0.05em;
}
.menu-info-value.is-score { color: #fff; }

.nosprite-link {
    margin-top: 1.5rem;
    color: #bbb;
    font-size: 0.75rem;
    text-decoration: none;
    letter-spacing: 0.1em;
    transition: color 0.2s;
}
.nosprite-link:hover {
    color: var(--accent);
}

/* ── App Store / Play Badges (website-only; harmless in app) ─ */
.app-badges {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.1rem;
    flex-wrap: wrap;
    justify-content: center;
}
.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.85rem;
    background: #000;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 10px;
    line-height: 1;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.app-badge:hover, .app-badge:active {
    border-color: var(--accent);
    background: #0a0a0a;
}
.app-badge-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    color: #fff;
}
.app-badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
}
.app-badge-text small {
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.75;
    font-weight: 400;
}
.app-badge-text strong {
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    font-weight: 600;
}
@media (max-width: 360px) {
    .app-badges { flex-direction: column; align-items: stretch; }
    .app-badge  { justify-content: center; }
}

/* ── Pause Screen ─────────────────────────────────────────── */
.pause-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 260px;
    margin-bottom: 1.6rem;
}
.pause-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.95rem;
    font-family: 'Courier New', Courier, monospace;
}
.pause-stat-label {
    color: #888;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.78rem;
}
.pause-stat-value { color: #fff; }
.pause-stat-value.is-voidium { color: var(--accent); }
.pause-stat-value.is-chapter { color: var(--accent); }

/* ── Tutorial Screen ──────────────────────────────────────── */
.tutorial-content {
    width: 100%;
    max-width: 340px;
    margin: 0 0 1.4rem 0;
    text-align: left;
    font-family: 'Courier New', Courier, monospace;
}
/* Each instruction is its own bordered card. Icon column is auto-sized so
   the icon never pushes outside the container; text column takes the rest. */
.tutorial-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9em;
    align-items: center;
    padding: 0.7em 0.9em;
    border: 1px solid rgba(255, 204, 68, 0.3);
    border-radius: 5px;
    margin-bottom: 0.55rem;
    background: rgba(255, 204, 68, 0.025);
}
.tutorial-icon {
    width: 2.1em;
    height: 2.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Each icon SVG sets its own colors via fill/stroke attributes to mirror
       the in-game visuals (joystick + fire = subtle white, power-ups = the
       POWERUP_COLORS palette). The pause icon uses currentColor + an
       override class to match the in-game HUD button color. */
}
.tutorial-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
/* Pause icon mirrors the in-game HUD pause button color rather than the
   tutorial's gold accent. The shape is the same; only the color differs. */
.tutorial-icon-pause {
    color: rgba(255, 255, 255, 0.55);
}
.tutorial-text {
    min-width: 0;
}
.tutorial-label {
    color: var(--accent);
    font-weight: bold;
    letter-spacing: 0.06em;
    font-size: 1rem;
    margin-bottom: 0.2rem;
}
.tutorial-desc {
    color: #bbb;
    font-size: 0.88rem;
    line-height: 1.45;
}
.tutorial-tagline {
    margin-top: 1.1rem;
    color: #888;
    font-style: italic;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-align: center;
}
/* Tutorial screen — needs its own scroll container because the 4 cards +
   title + tagline + Start button can exceed the viewport height in
   landscape (~400px). Without these overrides the inherited
   `justify-content: center` from .screen would clip the top off-screen
   with no way to scroll back up. Same pattern as #screen-store. */
#screen-tutorial {
    justify-content: flex-start;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/* Fade in when the tutorial screen becomes visible. */
#screen-tutorial:not(.hidden) {
    animation: tutorial-fade-in 0.32s ease-out;
}
@keyframes tutorial-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Game Over Screen ─────────────────────────────────────── */
.gameover-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.6rem;
    width: 100%;
    max-width: 260px;
}

.go-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
}

.go-label {
    color: #888;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.78rem;
}
.go-value { color: #fff; }
.go-voidium { color: var(--accent); }

.go-stat-chapter {
    text-align: center;
    color: var(--accent);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 204, 68, 0.2);
    width: 100%;
}

/* ── Store ─────────────────────────────────────────────────── */
.store-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 420px;
    margin: 0 auto 0.75rem;
}

.store-back-btn {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    background: none;
    border: none;
    color: #ddd;
    cursor: pointer;
    /* Generous padding here is intentional: it gives the back-arrow a
       proper ~44px touch target on mobile per Android's recommendation,
       not just a larger visual arrow. The QA report flagged this as a
       repeated tap-accuracy problem. */
    padding: 0.55rem 0.85rem;
    margin-left: -0.85rem;
    transition: color 0.15s;
}
.store-back-btn:hover, .store-back-btn:active { color: var(--accent); }

.store-title {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent);
}

.store-voidium-display {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    font-family: 'Courier New', Courier, monospace;
}
.store-voidium-label {
    color: #aaa;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.store-voidium-value {
    color: var(--accent);
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.store-tabs {
    display: flex;
    gap: 0;
    width: 100%;
    max-width: 420px;
    margin: 0 auto 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.store-tab {
    flex: 1;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.75rem 0.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #bbb;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    text-align: center;
}

.store-tab:hover { color: #bbb; }
.store-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.store-grid {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding-bottom: 1rem;
}

.store-item {
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 3px solid rgba(255,255,255,0.04);
    padding: 0.75rem;
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    align-items: center;
    background: rgba(255,255,255,0.02);
    border-radius: 3px;
    transition: border-color 0.15s, background 0.15s;
}

.store-preview {
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.5);
    border-radius: 3px;
}

.store-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.store-item.equipped {
    border-color: rgba(255, 204, 68, 0.2);
    border-left-color: var(--accent);
    background: rgba(255, 204, 68, 0.04);
}

/* ── Support tab: landing-page hero, demo, sections ─────────── */
.support-hero {
    text-align: center;
    padding: 0.6rem 0.5rem 0.4rem;
}
.support-hero-title {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.45rem;
    letter-spacing: 0.06em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
    text-shadow: 0 0 14px rgba(255, 204, 68, 0.35);
    line-height: 1.1;
}
.support-hero-sub {
    font-size: 0.88rem;
    color: #ddd;
    line-height: 1.5;
    letter-spacing: 0.02em;
}
.support-mvp-badge {
    display: inline-block;
    margin: 0.7rem auto 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    color: var(--accent);
    padding: 0.25rem 0.85rem 0.28rem 0.95rem;
    border: 1px solid rgba(255, 204, 68, 0.5);
    border-radius: 2px;
    text-shadow: 0 0 10px rgba(255, 204, 68, 0.45);
    box-shadow: 0 0 14px rgba(255, 204, 68, 0.18);
}
.support-demo-wrap {
    margin: 0.6rem 0 0.4rem;
    border: 1px solid rgba(255, 204, 68, 0.25);
    border-radius: 4px;
    box-shadow: 0 0 24px rgba(255, 204, 68, 0.08) inset;
    overflow: hidden;
    background: #0a0a14;
}
.support-demo-canvas {
    display: block;
    width: 100%;
    /* Match the canvas's internal logical aspect ratio so it doesn't
       horizontally stretch on wide containers, which would distort the
       ship + thrust silhouette. */
    aspect-ratio: 600 / 220;
    /* Override the global `canvas { touch-action: none; }` rule (which is
       there for the gameplay canvas). The support demo is purely visual
       with no touch handlers, so let vertical scroll pass through when
       the player's finger lands on it. Otherwise touching the demo
       freezes the Support page mid-scroll. */
    touch-action: pan-y;
}
.support-section-title {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    color: #aaa;
    text-transform: uppercase;
    text-align: center;
    margin: 1rem 0 0.55rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(255, 204, 68, 0.12);
}
.support-perks {
    padding: 0.5rem 0.9rem 0.7rem;
    border: 1px dashed rgba(255, 204, 68, 0.22);
    border-radius: 3px;
    background: rgba(255, 204, 68, 0.03);
}
.support-perks-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.84rem;
    color: #ddd;
    line-height: 1.75;
}
.support-perks-list li::before {
    content: '◆ ';
    color: var(--accent);
    font-size: 0.65em;
}
.support-about {
    font-size: 0.84rem;
    color: #cfcfcf;
    line-height: 1.65;
    padding: 0.4rem 0.2rem 0.55rem;
    font-style: italic;
}
.support-about p {
    margin: 0;
}
.support-foot-note {
    margin-top: 0.4rem;
    text-align: center;
    font-size: 0.7rem;
    color: #999;
    font-style: italic;
    letter-spacing: 0.04em;
}

/* ── Browser-only tip CTA + honor unlock ─────────────────────── */
.support-browser-tip {
    margin: 0.3rem 0 0.4rem;
    padding: 0.85rem 0.9rem 0.95rem;
    border: 1px solid rgba(255, 204, 68, 0.25);
    border-radius: 4px;
    background: rgba(255, 204, 68, 0.04);
    text-align: center;
}
.support-browser-helper {
    font-size: 0.82rem;
    color: #cfcfcf;
    line-height: 1.5;
    margin-bottom: 0.7rem;
    font-style: italic;
}
.support-browser-tip-btn {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    color: #14110a;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 3px;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(255, 204, 68, 0.35);
    transition: transform 0.08s ease, box-shadow 0.15s ease;
}
.support-browser-tip-btn:hover,
.support-browser-tip-btn:focus {
    box-shadow: 0 0 22px rgba(255, 204, 68, 0.55);
    transform: translateY(-1px);
}
.support-browser-tip-btn:active {
    transform: translateY(0);
}
.support-browser-honor-btn {
    display: inline-block;
    margin-top: 0.85rem;
    padding: 0.5rem 1.05rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    color: var(--accent);
    background: transparent;
    border: 1px dashed rgba(255, 204, 68, 0.5);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.support-browser-honor-btn:hover,
.support-browser-honor-btn:focus {
    background: rgba(255, 204, 68, 0.08);
}
.support-browser-honor-note {
    margin-top: 0.55rem;
    font-size: 0.7rem;
    color: #888;
    font-style: italic;
    line-height: 1.45;
    letter-spacing: 0.02em;
}
.tier-card {
    align-items: stretch;
    padding: 0.65rem 0.75rem;
}
.tier-card .tier-price {
    flex-shrink: 0;
    width: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.15rem;
    color: var(--accent);
    letter-spacing: 0.02em;
    border-right: 1px solid rgba(255, 204, 68, 0.15);
    padding-right: 0.5rem;
    text-shadow: 0 0 8px rgba(255, 204, 68, 0.25);
}
.mvp-perks {
    margin-top: 0.3rem;
    padding: 0.8rem 0.9rem 0.75rem;
    border: 1px dashed rgba(255, 204, 68, 0.22);
    border-radius: 3px;
    background: rgba(255, 204, 68, 0.03);
}
.mvp-perks-title {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.55rem;
}
.mvp-perks-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.82rem;
    color: #ddd;
    line-height: 1.7;
}
.mvp-perks-list li::before {
    content: '◆ ';
    color: var(--accent);
    font-size: 0.65em;
}
.mvp-perks-note {
    margin-top: 0.65rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 0.72rem;
    color: #999;
    font-style: italic;
    letter-spacing: 0.03em;
}

/* ── MVP visuals — driven by body.is-mvp toggle ─────────────── */
.mvp-badge {
    display: none;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.3em;
    color: var(--accent);
    padding: 0.18rem 0.7rem;
    border: 1px solid rgba(255, 204, 68, 0.4);
    border-radius: 2px;
    margin: 0 auto 0.8rem;
    text-shadow: 0 0 10px rgba(255, 204, 68, 0.5);
    box-shadow: 0 0 12px rgba(255, 204, 68, 0.12);
}
body.is-mvp .mvp-badge { display: inline-block; }
body.is-mvp #score-display,
body.is-mvp #voidium-display {
    text-shadow: 0 0 8px rgba(255, 204, 68, 0.55), 0 0 2px rgba(255, 204, 68, 0.35);
}

.store-item-name {
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    color: #eee;
}
.store-item.equipped .store-item-name { color: var(--accent); }

.store-item-desc {
    font-size: 0.8rem;
    color: #aaa;
    line-height: 1.4;
}

.store-stats {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.3rem 0;
}

.stat-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: #aaa;
}

.stat-row span {
    width: 2rem;
    text-align: right;
}

.stat-bar {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.1);
    overflow: hidden;
}

.stat-fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.3s;
}

.stat-fill.spd { background: #cc8800; }
.stat-fill.rot { background: #ddaa11; }
.stat-fill.thr { background: #eebb22; }
.stat-fill.fir { background: #ffcc44; }
.stat-fill.armor { background: #ffdd66; }

.store-divider {
    text-align: center;
    color: #aaa;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    padding: 0.6rem 0 0.15rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: 0.3rem;
}

.store-btn {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    padding: 0.5rem 0.85rem;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0.2rem;
    align-self: flex-start;
    border-radius: 3px;
    white-space: nowrap;
}

.store-btn:hover:not(:disabled) {
    background: rgba(255, 204, 68, 0.1);
    box-shadow: 0 0 10px rgba(255, 204, 68, 0.15);
}

.store-btn:disabled {
    color: #888;
    border-color: #333;
    cursor: default;
}

.vi-sym {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 0.62em;
    position: relative;
    top: -0.35em;
    line-height: 1;
    margin-right: 0.22em;
    letter-spacing: -0.02em;
}

/* ── Settings Screen ──────────────────────────────────── */
#screen-settings {
    justify-content: flex-start;
    max-width: 100%;
    height: 100%;
    padding: 1rem 1rem;
    overflow-y: auto;
}
.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 420px;
    margin: 0 auto 1rem;
}
.settings-header-spacer { width: 3rem; }
.settings-body {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding-bottom: 2rem;
}
.settings-section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.settings-section-title {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    color: var(--accent);
    text-transform: uppercase;
    margin: 0 0 0.3rem 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Wrap-capable: when a control on the right (e.g. the orientation
       segmented control with three options) is too wide to fit alongside
       the label on a narrow phone in portrait, it drops to its own line
       below the label instead of clipping. The row-gap kicks in only when
       wrapping actually happens. Wide screens / landscape continue to
       render label + control inline on a single line. */
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.65rem 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    cursor: pointer;
}
.settings-label { color: #ddd; }
.settings-row-slider { flex-wrap: wrap; }
.settings-range {
    flex: 1 1 140px;
    accent-color: var(--accent);
}
.settings-range-value {
    font-size: 0.9rem;
    color: #aaa;
    min-width: 3rem;
    text-align: right;
}
.settings-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 22px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.settings-toggle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #aaa;
    border-radius: 50%;
    transition: left 0.15s, background 0.15s;
}
.settings-toggle:checked {
    background: rgba(255, 204, 68, 0.25);
    border-color: var(--accent);
}
.settings-toggle:checked::before {
    left: 24px;
    background: var(--accent);
}
.settings-segmented {
    display: inline-flex;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 3px;
    overflow: hidden;
}
.settings-segmented button {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.88rem;
    letter-spacing: 0.05em;
    background: none;
    border: none;
    border-right: 1px solid rgba(255,255,255,0.1);
    color: #aaa;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.settings-segmented button:last-child { border-right: none; }
.settings-segmented button.active {
    background: rgba(255, 204, 68, 0.25);
    color: var(--accent);
}
.settings-danger .settings-section-title { color: #ff4444; }
.settings-danger-btn {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    background: none;
    border: 1px solid rgba(255, 68, 68, 0.5);
    color: #ff6666;
    padding: 0.7rem 1.1rem;
    border-radius: 3px;
    cursor: pointer;
    align-self: flex-start;
    transition: all 0.15s;
}
.settings-danger-btn:hover {
    background: rgba(255, 68, 68, 0.1);
    color: #ff9999;
}

.noscript-msg {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #aaa;
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    text-align: center;
    padding: 2rem;
    z-index: 100;
}

/* ── Virtual Touch Controls ──────────────────────────────── */
.touch-controls {
    display: none;
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 15;
}

.touch-controls.active {
    display: block;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* Floating joystick zone: invisible touch surface covering the lower-left
   ~half of the screen (above the HUD region). Touches here spawn the floating
   joystick base at the touch point. */
.touch-joystick-zone {
    position: fixed;
    top: 100px;       /* clear HUD pause button + score row */
    left: 0;
    bottom: 0;
    width: 50%;
    pointer-events: auto;
    touch-action: none;
}
.touch-joystick {
    /* position: fixed so style.left/top in JS uses raw viewport coordinates,
       matching touch event clientX/clientY. Hidden by default; the JS adds
       .active to show + position the base when the player first touches. */
    position: fixed;
    width: calc(100px * var(--touch-scale, 1));
    height: calc(100px * var(--touch-scale, 1));
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.03);
    pointer-events: none;  /* zone receives touches; this is just the visual */
    touch-action: none;
    opacity: 0;
    transition: opacity 0.18s ease-out;
}
.touch-joystick.active {
    opacity: 1;
}

/* Joystick "ghost": a placeholder shown when the floating joystick isn't
   active. Same diameter and same edge-spacing (60px bottom / 40px side) as
   the fire button, so the two read as a level, parallel pair. Inherits
   safe-area padding from .touch-controls (position: absolute). */
.touch-joystick-ghost {
    position: absolute;
    bottom: 60px;
    left: 40px;
    width: calc(100px * var(--touch-scale, 1));
    height: calc(100px * var(--touch-scale, 1));
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.03);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.18s ease-out;
}
.touch-joystick-ghost-thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(48px * var(--touch-scale, 1));
    height: calc(48px * var(--touch-scale, 1));
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.3);
}
.touch-joystick-ghost.hidden {
    opacity: 0;
}

.touch-joystick-thumb {
    position: absolute;
    width: calc(48px * var(--touch-scale, 1));
    height: calc(48px * var(--touch-scale, 1));
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.3);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: background 0.1s;
}

.touch-joystick.active .touch-joystick-thumb {
    background: rgba(255,255,255,0.25);
}

.touch-btn {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    touch-action: none;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    font-weight: bold;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    user-select: none;
    -webkit-user-select: none;
    opacity: 1;
    transition: opacity 0.18s ease-out;
}

.touch-btn.active {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.4);
}

.touch-fire {
    /* Fire button matches joystick base diameter for balanced thumb ergonomics. */
    width: calc(100px * var(--touch-scale, 1));
    height: calc(100px * var(--touch-scale, 1));
}
/* Invisible hit-zone extension: peripheral taps still register as a fire press.
   Helps when iOS coordinate translation puts the touch slightly outside the
   visual circle. Visual remains the 100x100 circle. */
.touch-fire::before {
    content: '';
    position: absolute;
    inset: -25px;
    border-radius: 50%;
}

/* No engaged-state opacity rules: each control now handles its own
   visibility independently. The ghost hides when the joystick is active
   (.hidden); the floating joystick shows only when active; the fire
   button uses its .active class for pressed-state styling. Cross-dimming
   between controls caused confusing visual coupling. */

/* ── Accessibility ───────────────────────────────────────── */
/* Large HUD scales the heads-up-display ~25% above the base size so score,
   lives, chapter, and power-up timers are readable at a glance for
   low-vision players. Recalibrated in v1.0.6 alongside the base HUD bump
   so the Large toggle stays a meaningful step up. */
body.large-hud #hud {
    font-size: 1.18rem;
}
body.large-hud .hud-row {
    gap: 1rem;
}
body.large-hud .hud-powerup-icon {
    width: 1.4em;
    height: 1.4em;
}
body.large-hud .hud-pause-icon {
    width: 1.2em;
    height: 1.2em;
}

/* High Contrast bumps saturation + contrast across the entire UI so similar
   hues separate more clearly. Applied to body (not just the canvas) so it
   reaches every screen: settings danger red, gold accents, power-up colors,
   menus, the HUD, tutorial cards, and gameplay. Conservative (no hue
   rotation) so the brand palette still reads correctly. Real per-CVD-type
   calibration (palette swaps, daltonization) is a candidate for v1.0.7 as
   a separate "Color-Blind Mode" setting.

   `will-change: filter` is also kept on the canvas so Android WebView
   composites the filter reliably for the most filter-sensitive surface.
   Filter strength is sized so the effect is unmistakable on Android
   displays (which tend to render filters more subtly than iPhone). */
canvas#game {
    will-change: filter;
}
body.high-contrast {
    filter: saturate(1.4) contrast(1.18) brightness(1.025);
}

/* Reduced motion: the reducedMotion setting is also gated in game.js
   (skip shake + hitstop). No CSS-only motion to subdue at this layer,
   but kept here as a hook for future CSS-driven animation toggles. */

/* ── Mobile portrait adjustments ────────────────────────── */
@media (max-width: 600px) {
    #hud {
        gap: 0.25rem;
        padding: calc(0.4rem + env(safe-area-inset-top, 0px)) calc(0.7rem + env(safe-area-inset-right, 0px)) 0.4rem calc(0.7rem + env(safe-area-inset-left, 0px));
    }
    .hud-row { gap: 0.5rem; }
    .hud-center-group { gap: 0.5em; }

    .game-title {
        font-size: 2rem;
        letter-spacing: 0.1em;
    }
    .game-subtitle {
        font-size: 0.82rem;
        margin-bottom: 1.2rem;
    }
    .menu-btn {
        font-size: 0.95rem;
        padding: 0.72rem 1.1rem;
    }
    .screen-title {
        font-size: 1.2rem;
    }
    .store-title {
        font-size: 1rem;
        letter-spacing: 0.2em;
    }
    #overlay {
        padding: calc(0.5rem + env(safe-area-inset-top, 0px)) calc(0.5rem + env(safe-area-inset-right, 0px)) calc(0.5rem + env(safe-area-inset-bottom, 0px)) calc(0.5rem + env(safe-area-inset-left, 0px));
    }
}

/* ── Very small screens / short landscape ──────────────── */
@media (max-height: 500px) {
    .game-title {
        font-size: 1.45rem;
        margin-bottom: 0.2rem;
    }
    .game-subtitle {
        font-size: 0.75rem;
        margin-bottom: 0.8rem;
    }
    .menu-buttons {
        gap: 0.4rem;
        margin-bottom: 0.8rem;
    }
    .menu-btn {
        padding: 0.55rem 0.85rem;
        font-size: 0.88rem;
    }
    .screen {
        padding: 0.8rem;
    }
    .screen-title {
        font-size: 1.1rem;
        margin-bottom: 0.8rem;
        padding-bottom: 0.3rem;
    }
    .pause-stats { margin-bottom: 0.8rem; gap: 0.3rem; }
    .gameover-stats {
        gap: 0.3rem;
        margin-bottom: 1rem;
    }
    .go-stat { font-size: 0.85rem; }
}

/* ── Touch devices ─────────────────────────────────────── */

@media (pointer: fine) {
    .touch-controls { display: none !important; }
}

/* ── Landscape / tablet: larger touch controls, pulled inward from edges ── */
@media (pointer: coarse) and (min-width: 601px) {
    .touch-joystick {
        /* Size only — position is set dynamically by JS (floating model).
           No !important on bottom/left here; that would override the
           JS-set inline position and the joystick wouldn't track touches. */
        width: calc(120px * var(--touch-scale, 1));
        height: calc(120px * var(--touch-scale, 1));
    }
    .touch-joystick-thumb {
        width: calc(60px * var(--touch-scale, 1));
        height: calc(60px * var(--touch-scale, 1));
    }
    .touch-joystick-ghost {
        /* Match fire button size + offset for visual symmetry. The 74px
           left mirrors fire's 74px right; 40px bottom matches fire's bottom. */
        width: calc(120px * var(--touch-scale, 1));
        height: calc(120px * var(--touch-scale, 1));
        bottom: 40px;
        left: 74px;
    }
    .touch-joystick-ghost-thumb {
        width: calc(60px * var(--touch-scale, 1));
        height: calc(60px * var(--touch-scale, 1));
    }
    .touch-fire {
        /* !important is needed here because the fire button has an inline
           style="bottom:60px;right:40px;" set in JS, which would otherwise
           win over these landscape-mode position overrides. */
        width: calc(120px * var(--touch-scale, 1));
        height: calc(120px * var(--touch-scale, 1));
        font-size: 1.1rem;
        bottom: 40px !important;
        right: 74px !important;
    }
}

/* Hide all scrollbars across the entire UI. Scroll still works (touch swipe,
   mouse wheel, trackpad, keyboard) — the bar is just visually hidden.
   Cleaner with the vector / retro aesthetic.

   Note: iOS WebView is stubborn about scrollbar suppression. The aggressive
   combination below (display:none + width/height 0 + transparent + appearance
   reset on the scrollbar AND its track + thumb pseudo-elements) covers the
   landscape scrollbar that was leaking through despite the normal rule. */
html, body, #overlay, .screen,
#screen-store, #screen-tutorial,
.settings-body, .store-grid,
* {
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE / Edge legacy */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#overlay::-webkit-scrollbar,
.screen::-webkit-scrollbar,
#screen-store::-webkit-scrollbar,
#screen-tutorial::-webkit-scrollbar,
.settings-body::-webkit-scrollbar,
.store-grid::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    -webkit-appearance: none !important;
}
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-corner {
    display: none !important;
    background: transparent !important;
    -webkit-appearance: none !important;
}

/* ── Fullscreen toggle ──────────────────────────────────────
   Same circular chip used in Iron Clash (.hud-fullscreen from
   shared-game.css), styled here in Rift Drifter's gold accent
   instead of the mint default. Pinned to the bottom-right corner
   so it never overlaps the HUD readouts (score, wave, lives)
   anchoring the top of the screen. */
.hud-fullscreen {
    position: fixed;
    bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    right: calc(1rem + env(safe-area-inset-right, 0px));
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #444;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    color: #888;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, color 0.2s;
    z-index: 1000;
}
.hud-fullscreen:hover,
.hud-fullscreen:focus-visible {
    border-color: var(--accent);
    background: rgba(255, 204, 68, 0.08);
    box-shadow: 0 0 10px rgba(255, 204, 68, 0.25);
    color: var(--accent);
    outline: none;
}
.hud-fullscreen svg {
    width: 14px;
    height: 14px;
}
/* Icon swap via class toggle on the button (more reliable than
   the `hidden` attribute inside flex containers). */
.hud-fullscreen .icon-exit { display: none; }
.hud-fullscreen.is-fullscreen .icon-enter { display: none; }
.hud-fullscreen.is-fullscreen .icon-exit { display: block; }
/* Splash overlay sits above everything (z-index 9999) so the
   fullscreen button stays hidden until the game is ready. */