/* ═══════════════════════════════════════════════════════════════════════════
   SMUGGLER'S RUN
   Main Stylesheet - 16-Bit Pixel Art Theme
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&family=Silkscreen&display=swap');

/* ─────────────────────────────────────────────────────────────────────────────
   CSS Variables - Smuggler's Run Palette
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    /* Backgrounds & Environment */
    --sr-void: #0a0a12;
    --sr-steel-dark: #1a1a2e;
    --sr-steel-mid: #2d2d44;
    --sr-steel-light: #4a4a5a;

    /* Accent — Hostile */
    --sr-crimson: #cc2233;
    --sr-authority: #3344cc;
    --sr-orange: #ff6644;

    /* Accent — Friendly / Neutral */
    --sr-teal: #22aa66;
    --sr-teal-light: #44ccaa;
    --sr-amber: #ccaa33;

    /* Accent — UI / System */
    --sr-purple: #8855aa;
    --sr-gray: #aaaaaa;
    --sr-white: #ffffff;

    /* Game-specific semantic colors */
    --color-health: var(--sr-crimson);
    --color-movement: var(--sr-teal-light);
    --color-fight: var(--sr-amber);
    --color-data: var(--sr-purple);
    --color-victory: var(--sr-teal);
    --color-defeat: var(--sr-crimson);
    --color-helix: var(--sr-authority);
    --color-gang: var(--sr-crimson);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Base Styles
   ───────────────────────────────────────────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--sr-void);
    font-family: 'Silkscreen', 'VT323', monospace;
    color: var(--sr-teal-light);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    image-rendering: pixelated;
    overflow-x: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Container Styles
   ───────────────────────────────────────────────────────────────────────────── */
.game-container {
    width: 640px;
    max-width: 100%;
    background: var(--sr-void);
    border: 2px solid var(--sr-steel-light);
    position: relative;
}

/* Corner decorations on game container */
.game-container::before,
.game-container::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--sr-teal);
    z-index: 10;
}

.game-container::before { top: 0; left: 0; }
.game-container::after { top: 0; right: 0; }

.screen-container {
    width: 640px;
    max-width: 100%;
    background: var(--sr-void);
    border: 2px solid var(--sr-steel-light);
    min-height: 480px;
    display: flex;
    flex-direction: column;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Typography
   ───────────────────────────────────────────────────────────────────────────── */
.title-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 32px;
    color: var(--sr-teal);
    text-shadow: 2px 2px #000;
}

.title-text-small {
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
}

.subtitle-text {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 24px;
    color: var(--sr-teal-light);
}

.pixel-text {
    font-family: 'Press Start 2P', cursive;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────────────────────────── */
.btn {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    padding: 12px 24px;
    background: var(--sr-steel-mid);
    color: var(--sr-teal-light);
    border: 2px solid var(--sr-steel-light);
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
}

.btn:hover {
    background: var(--sr-teal);
    color: var(--sr-void);
}

.btn:active {
    transform: translate(2px, 2px);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-large {
    font-size: 14px;
    padding: 16px 32px;
}

.btn-small {
    font-size: 8px;
    padding: 8px 16px;
}

.btn-victory {
    border-color: var(--sr-teal);
}

.btn-victory:hover {
    background: var(--sr-teal);
    color: var(--sr-void);
}

.btn-defeat {
    border-color: var(--sr-crimson);
}

.btn-defeat:hover {
    background: var(--sr-crimson);
    color: var(--sr-void);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Title Bar
   ───────────────────────────────────────────────────────────────────────────── */
.title-bar {
    background: var(--sr-steel-dark);
    padding: 8px 16px;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    color: var(--sr-amber);
    text-shadow: 2px 2px #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--sr-steel-mid);
}

/* Audio mute toggle */
.audio-mute-btn {
    background: none;
    border: 1px solid var(--sr-steel-mid);
    color: var(--sr-gray);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    margin-left: 8px;
    flex-shrink: 0;
}
.audio-mute-btn:hover {
    color: var(--sr-amber);
    border-color: var(--sr-amber);
}
.audio-mute-btn.muted {
    color: var(--sr-steel-mid);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Panel Styles
   ───────────────────────────────────────────────────────────────────────────── */
.panel {
    background: var(--sr-void);
    border: 2px solid var(--sr-steel-mid);
    padding: 16px;
}

.panel-header {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: var(--sr-amber);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--sr-steel-mid);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Stats Display
   ───────────────────────────────────────────────────────────────────────────── */
.stats-panel {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    padding: 10px 12px;
    background: var(--sr-void);
    border-bottom: 2px solid var(--sr-steel-mid);
}

@media (max-width: 640px) {
    .stats-panel {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stat-box {
    background: var(--sr-void);
    border: 2px solid var(--sr-steel-mid);
    padding: 6px 4px;
    text-align: center;
    position: relative;
}

/* Pixel-art corner notches on stat boxes */
.stat-box::before,
.stat-box::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--sr-steel-light);
}

.stat-box::before { top: 2px; left: 2px; }
.stat-box::after { top: 2px; right: 2px; }

.stat-label {
    font-size: 12px;
    color: var(--sr-gray);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.stat-icon {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
}

.stat-value {
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;
    color: var(--sr-teal);
}

/* Segmented health bar */
.health-bar {
    display: flex;
    gap: 2px;
    justify-content: center;
    margin-bottom: 4px;
}

.health-segment {
    width: 8px;
    height: 6px;
    background: var(--sr-steel-mid);
    border: 1px solid var(--sr-steel-light);
}

.health-segment.filled {
    border-color: transparent;
}

.health-segment.tier-healthy {
    background: var(--sr-teal);
}

.health-segment.tier-mid {
    background: var(--sr-amber);
}

.health-segment.tier-critical {
    background: var(--sr-crimson);
}

.stat-value.health { color: var(--color-health); }
.stat-value.movement { color: var(--color-movement); }
.stat-value.fight { color: var(--color-fight); }
.stat-value.weapon { color: var(--sr-crimson); }
.stat-value.data { color: var(--color-data); }

.stat-sub {
    font-size: 10px;
    color: var(--sr-gray);
    margin-top: 2px;
}

.stat-box-weapon {
    border-color: var(--sr-steel-mid);
    opacity: 0.4;
}

.stat-box-weapon.equipped {
    border-color: var(--sr-crimson);
    opacity: 1;
}

/* Data stick counter — larger icon + count side by side */
.data-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.data-stick-icon {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
}

.stat-box-armor {
    border-color: var(--sr-authority);
    transition: opacity 0.3s;
}

.stat-value.armor {
    color: var(--sr-authority);
}

.stat-box-data {
    border-color: var(--sr-amber);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Progress Bar
   ───────────────────────────────────────────────────────────────────────────── */
.progress-container {
    padding: 8px 16px;
    background: var(--sr-void);
    border-bottom: 2px solid var(--sr-steel-mid);
}

.zone-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: var(--sr-teal);
    text-align: center;
    margin-bottom: 4px;
    letter-spacing: 2px;
}

.progress-label {
    font-size: 14px;
    color: var(--sr-amber);
    margin-bottom: 4px;
}

.progress-bar {
    width: 100%;
    height: 16px;
    background: var(--sr-steel-dark);
    border: 2px solid var(--sr-steel-light);
    display: flex;
    gap: 2px;
    padding: 2px;
}

.progress-segment {
    flex: 1;
    background: var(--sr-steel-mid);
}

.progress-segment.filled {
    background: var(--sr-teal);
}

.progress-segment.current {
    background: var(--sr-teal-light);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Backpack Panel
   ───────────────────────────────────────────────────────────────────────────── */
.backpack-strip {
    background: var(--sr-void);
    border: 2px solid var(--sr-steel-mid);
    border-top: none;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.backpack-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--sr-steel-dark);
    border-bottom: 2px solid var(--sr-steel-mid);
}

.backpack-label-icon {
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
}

.backpack-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    color: var(--sr-amber);
    letter-spacing: 2px;
}

.backpack-weight {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: var(--sr-steel-light);
    margin-left: auto;
    white-space: nowrap;
    transition: color 0.3s;
}

.backpack-weight.near-full {
    color: var(--sr-crimson);
    animation: weight-pulse 1s ease-in-out infinite;
}

@keyframes weight-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.backpack-slots {
    padding: 8px 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.backpack-items {
    display: flex;
    gap: 6px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: wrap;
}

.backpack-items::-webkit-scrollbar { display: none; }

.backpack-empty {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: var(--sr-steel-mid);
    letter-spacing: 1px;
    width: 100%;
    text-align: center;
    padding: 4px 0;
}

.backpack-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: var(--sr-steel-dark);
    border: 1px solid var(--sr-steel-mid);
    border-left: 3px solid var(--sr-steel-mid);
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color 0.2s, background 0.2s;
}

.backpack-item:hover {
    background: rgba(45, 45, 68, 0.8);
    border-color: var(--sr-steel-light);
}

.backpack-item-icon {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
}

.backpack-item-name {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 13px;
    color: var(--sr-gray);
}

.backpack-item-kg {
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    color: var(--sr-steel-light);
    opacity: 0.7;
}

/* Capacity bar at bottom */
.backpack-capacity-bar {
    height: 4px;
    background: var(--sr-steel-dark);
    border-top: 1px solid var(--sr-steel-mid);
}

.backpack-capacity-fill {
    height: 100%;
    background: var(--sr-teal);
    transition: width 0.4s ease, background-color 0.3s;
}

.backpack-capacity-fill.warning {
    background: var(--sr-amber);
}

.backpack-capacity-fill.critical {
    background: var(--sr-crimson);
}

/* Loot drop float animation */
.loot-float-text {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    white-space: nowrap;
    pointer-events: none;
    animation: loot-float 1.4s ease-out forwards;
    z-index: 10;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
}

.loot-float-text.loot-lost {
    color: var(--sr-crimson) !important;
}

.loot-float-text.item-used {
    animation: item-consume 0.8s ease-out forwards;
}

@keyframes loot-float {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-30px); }
}

@keyframes item-consume {
    0% { opacity: 1; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.4); }
    100% { opacity: 0; transform: translateX(-50%) scale(0.5) translateY(-20px); }
}

.backpack-strip.loot-flash {
    animation: strip-flash 0.6s ease-out;
}

@keyframes strip-flash {
    0% { border-color: var(--sr-steel-mid); }
    20% { border-color: var(--sr-amber); background: rgba(204, 170, 51, 0.08); }
    100% { border-color: var(--sr-steel-mid); background: var(--sr-void); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Log Panel
   ───────────────────────────────────────────────────────────────────────────── */
.log-panel {
    height: 150px;
    background: var(--sr-void);
    padding: 8px 16px;
    overflow-y: auto;
    font-size: 16px;
    line-height: 1.4;
    position: relative;
    border-top: 2px solid var(--sr-steel-mid);
}

/* Corner accents on log panel */
.log-panel::before,
.log-panel::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--sr-amber);
    z-index: 1;
}

.log-panel::before { top: 2px; left: 4px; }
.log-panel::after { top: 2px; right: 4px; }

.log-panel::-webkit-scrollbar {
    width: 12px;
}

.log-panel::-webkit-scrollbar-track {
    background: var(--sr-void);
    border-left: 2px solid var(--sr-steel-mid);
}

.log-panel::-webkit-scrollbar-thumb {
    background: var(--sr-steel-mid);
    border: 2px solid var(--sr-steel-light);
}

.log-entry {
    margin-bottom: 4px;
    padding-left: 8px;
    border-left: 2px solid var(--sr-steel-mid);
}

.log-entry.movement { color: var(--sr-teal-light); border-color: var(--sr-teal); }
.log-entry.combat { color: var(--sr-crimson); border-color: var(--sr-crimson); }
.log-entry.crit { color: var(--sr-amber); border-color: var(--sr-amber); font-weight: bold; }
.log-entry.helix { color: var(--sr-authority); border-color: var(--sr-authority); }
.log-entry.bribe { color: var(--sr-purple); border-color: var(--sr-purple); }
.log-entry.victory { color: var(--sr-teal); border-color: var(--sr-teal); }
.log-entry.defeat { color: var(--sr-crimson); border-color: var(--sr-crimson); }
.log-entry.system { color: var(--sr-amber); border-color: var(--sr-amber); }
.log-entry.loot { color: var(--sr-amber); border-color: var(--sr-amber); font-weight: bold; }
.log-entry.ally { color: var(--sr-teal); border-color: var(--sr-teal); }
.log-entry.zone { color: var(--sr-teal-light); border-color: var(--sr-teal-light); font-weight: bold; }

/* ─────────────────────────────────────────────────────────────────────────────
   Control Panel
   ───────────────────────────────────────────────────────────────────────────── */
.control-panel {
    padding: 12px 16px;
    background: var(--sr-steel-dark);
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.mode-control,
.speed-control {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--sr-gray);
}

.mode-control select,
.speed-control select {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 14px;
    background: var(--sr-void);
    color: var(--sr-teal-light);
    border: 2px solid var(--sr-steel-light);
    padding: 4px 8px;
    cursor: pointer;
}

.mode-control select:disabled,
.speed-control select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Game Screen
   ───────────────────────────────────────────────────────────────────────────── */
.game-screen {
    height: 200px;
    background: var(--sr-void);
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid var(--sr-steel-mid);
}

/* Station Corridor Background — dark void behind everything */
.city-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--sr-void);
    z-index: 0;
}

/* Parallax background layers — use background-position animation for seamless tiling */
.parallax-far {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    height: 160px;
    image-rendering: pixelated;
    z-index: 1;
    animation: scrollBgFar 30s linear infinite;
}

.parallax-mid {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    height: 130px;
    image-rendering: pixelated;
    z-index: 2;
    animation: scrollBgMid 18s linear infinite;
}

@keyframes scrollBgFar {
    0% { background-position-x: 0; }
    100% { background-position-x: var(--scroll-width, -1280px); }
}

@keyframes scrollBgMid {
    0% { background-position-x: 0; }
    100% { background-position-x: var(--scroll-width-mid, -600px); }
}

@keyframes scrollFloor {
    0% { background-position-x: 0; }
    100% { background-position-x: var(--scroll-width, -781px); }
}

/* Zone floor — pixel art floor tile, scrolls with far layer */
.road {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 4;
    image-rendering: pixelated;
    animation: scrollFloor 30s linear infinite;
}

.road-lines {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Sprites
   ───────────────────────────────────────────────────────────────────────────── */
.smuggler {
    position: absolute;
    bottom: 8px;
    left: 80px;
    width: 96px;
    height: 96px;
    z-index: 10;
}

.smuggler-sprite {
    width: 96px;
    height: 96px;
    background: url('../assets/sprites/andi/andi-run-east.png') 0 0 no-repeat;
    background-size: 576px 96px;
    animation: smugglerRun 0.6s steps(6) infinite;
    image-rendering: pixelated;
}

@keyframes smugglerRun {
    0% { background-position: 0 0; }
    100% { background-position: -576px 0; }
}

.smuggler-idle .smuggler-sprite {
    background: url('../assets/sprites/andi/andi-idle-east.png') 0 0 no-repeat;
    background-size: 384px 96px;
    animation: smugglerIdle 1.2s steps(4) infinite;
}

@keyframes smugglerIdle {
    0% { background-position: 0 0; }
    100% { background-position: -384px 0; }
}

/* Enemies */
.enemy {
    position: absolute;
    bottom: 8px;
    width: 96px;
    height: 96px;
    z-index: 9;
    display: none;
}

.gang-member {
    right: 100px;
}

.gang-sprite {
    width: 96px;
    height: 96px;
    background: url('../assets/sprites/redline-gang/redline-gang-idle-west.png') 0 0 no-repeat;
    background-size: 384px 96px;
    animation: gangIdle 1.2s steps(4) infinite;
    image-rendering: pixelated;
}

@keyframes gangIdle {
    0% { background-position: 0 0; }
    100% { background-position: -384px 0; }
}

.helix {
    right: 100px;
}

.helix-sprite {
    width: 96px;
    height: 96px;
    background: url('../assets/sprites/helix-police/helix-police-idle-west.png') 0 0 no-repeat;
    background-size: 384px 96px;
    animation: helixIdle 1.2s steps(4) infinite;
    image-rendering: pixelated;
}

@keyframes helixIdle {
    0% { background-position: 0 0; }
    100% { background-position: -384px 0; }
}

.voc-security {
    right: 100px;
}

.voc-sprite {
    width: 96px;
    height: 96px;
    background: url('../assets/sprites/voc-security/voc-security-idle-west.png') 0 0 no-repeat;
    background-size: 384px 96px;
    animation: vocIdle 1.2s steps(4) infinite;
    image-rendering: pixelated;
}

@keyframes vocIdle {
    0% { background-position: 0 0; }
    100% { background-position: -384px 0; }
}

.assassin {
    right: 100px;
}

.assassin-sprite {
    width: 96px;
    height: 96px;
    background: url('../assets/sprites/assassin/assassin-idle-west.png') 0 0 no-repeat;
    background-size: 384px 96px;
    animation: assassinIdle 1.2s steps(4) infinite;
    image-rendering: pixelated;
}

@keyframes assassinIdle {
    0% { background-position: 0 0; }
    100% { background-position: -384px 0; }
}

.severance-ally {
    right: 100px;
}

.ally-sprite {
    width: 96px;
    height: 96px;
    background: url('../assets/sprites/severance-ally/severance-ally-walk-west.png') 0 0 no-repeat;
    background-size: 576px 96px;
    animation: allyIdle 1.2s steps(6) infinite;
    image-rendering: pixelated;
}

@keyframes allyIdle {
    0% { background-position: 0 0; }
    100% { background-position: -576px 0; }
}

/* Combat flash */
.combat-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--sr-crimson);
    opacity: 0;
    pointer-events: none;
    z-index: 20;
}

.combat-flash.active {
    animation: combatFlash 0.1s steps(2);
}

@keyframes combatFlash {
    0% { opacity: 0.5; }
    100% { opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Encounter Overlay
   ───────────────────────────────────────────────────────────────────────────── */
.encounter-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 18, 0.88);
    z-index: 15;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    pointer-events: none;
}

.encounter-overlay.active {
    display: flex;
}

.encounter-header {
    text-align: center;
    margin-bottom: 4px;
}

.encounter-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    letter-spacing: 2px;
    padding: 4px 12px;
    border: 2px solid var(--sr-steel-mid);
    background: var(--sr-void);
}

.encounter-arena {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex: 1;
    position: relative;
}

.encounter-combatant {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 140px;
}

.encounter-sprite {
    width: 96px;
    height: 96px;
    image-rendering: pixelated;
}

/* Player sprite in overlay — Andi idle-east at 2x */
.encounter-player-sprite {
    background: url('../assets/sprites/andi/andi-idle-east.png') 0 0 no-repeat;
    background-size: 384px 96px;
    animation: encPlayerIdle 1.2s steps(4) infinite;
}

@keyframes encPlayerIdle {
    0% { background-position: 0 0; }
    100% { background-position: -384px 0; }
}

/* Enemy sprites in overlay — all at 2x scale */
.encounter-enemy-sprite.enemy-gang {
    background: url('../assets/sprites/redline-gang/redline-gang-idle-west.png') 0 0 no-repeat;
    background-size: 384px 96px;
    animation: encGangIdle 1.2s steps(4) infinite;
}

@keyframes encGangIdle {
    0% { background-position: 0 0; }
    100% { background-position: -384px 0; }
}

.encounter-enemy-sprite.enemy-helix {
    background: url('../assets/sprites/helix-police/helix-police-idle-west.png') 0 0 no-repeat;
    background-size: 384px 96px;
    animation: encHelixIdle 1.2s steps(4) infinite;
}

@keyframes encHelixIdle {
    0% { background-position: 0 0; }
    100% { background-position: -384px 0; }
}

.encounter-enemy-sprite.enemy-voc {
    background: url('../assets/sprites/voc-security/voc-security-idle-west.png') 0 0 no-repeat;
    background-size: 384px 96px;
    animation: encVocIdle 1.2s steps(4) infinite;
}

@keyframes encVocIdle {
    0% { background-position: 0 0; }
    100% { background-position: -384px 0; }
}

.encounter-enemy-sprite.enemy-assassin {
    background: url('../assets/sprites/assassin/assassin-idle-west.png') 0 0 no-repeat;
    background-size: 384px 96px;
    animation: encAssassinIdle 1.2s steps(4) infinite;
}

@keyframes encAssassinIdle {
    0% { background-position: 0 0; }
    100% { background-position: -384px 0; }
}

.encounter-enemy-sprite.enemy-ally {
    background: url('../assets/sprites/severance-ally/severance-ally-idle-west.png') 0 0 no-repeat;
    background-size: 384px 96px;
    animation: encAllyIdle 1.2s steps(4) infinite;
}

@keyframes encAllyIdle {
    0% { background-position: 0 0; }
    100% { background-position: -384px 0; }
}

/* Encounter icon (dead drop crate / medkit area) */
.encounter-icon {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    width: 96px;
    height: 96px;
}

/* Dead drop crate — sprite sheet animation (4 frames at 2x) */
.encounter-crate {
    width: 96px;
    height: 96px;
    image-rendering: pixelated;
    background: url('../assets/icons/encounter/crate-closed.png') 0 0 no-repeat;
    background-size: 96px 96px;
}

.encounter-crate.open {
    background-image: url('../assets/icons/encounter/crate-open.png');
    background-size: 384px 96px;
    animation: crateOpen 0.5s steps(4) forwards;
}

@keyframes crateOpen {
    0%   { background-position: 0 0; }
    100% { background-position: -384px 0; }
}

/* Safe house — sprite sheet animation (4 frames at 2x) + glow pulse */
.encounter-safehouse {
    width: 96px;
    height: 96px;
    image-rendering: pixelated;
    background: url('../assets/icons/encounter/safehouse-closed.png') 0 0 no-repeat;
    background-size: 96px 96px;
    animation: safehouseGlow 2s ease-in-out infinite;
}

.encounter-safehouse.open {
    background-image: url('../assets/icons/encounter/safehouse-open.png');
    background-size: 384px 96px;
    animation: safehouseOpen 1.4s steps(4) forwards;
}

@keyframes safehouseGlow {
    0%   { filter: drop-shadow(0 0 4px rgba(34, 170, 102, 0.3)); }
    50%  { filter: drop-shadow(0 0 12px rgba(34, 170, 102, 0.7)); }
    100% { filter: drop-shadow(0 0 4px rgba(34, 170, 102, 0.3)); }
}

@keyframes safehouseOpen {
    0%   { background-position: 0 0; filter: drop-shadow(0 0 4px rgba(34, 170, 102, 0.3)); }
    100% { background-position: -384px 0; filter: drop-shadow(0 0 16px rgba(34, 170, 102, 0.9)); }
}

/* Medkit — sprite sheet animation (4 frames at 2x) */
.encounter-medkit {
    width: 96px;
    height: 96px;
    image-rendering: pixelated;
    background: url('../assets/icons/encounter/medkit-closed.png') 0 0 no-repeat;
    background-size: 96px 96px;
}

.encounter-medkit.open {
    background-image: url('../assets/icons/encounter/medkit-open.png');
    background-size: 384px 96px;
    animation: medkitOpen 0.5s steps(4) forwards;
}

@keyframes medkitOpen {
    0%   { background-position: 0 0; }
    100% { background-position: -384px 0; }
}

/* Data stick loot icons floating up */
.loot-stick {
    position: absolute;
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
    animation: lootFloat 1s steps(10) forwards;
    bottom: 72px;
}

@keyframes lootFloat {
    0%   { opacity: 0; transform: translateY(16px) scale(0.5); }
    20%  { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 1; transform: translateY(-28px) scale(1); }
}

/* Heal particles floating up from medkit */
.heal-plus {
    position: absolute;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: var(--sr-teal);
    animation: healFloat 1s steps(10) forwards;
    pointer-events: none;
    white-space: nowrap;
}

@keyframes healFloat {
    0%   { opacity: 0; transform: translateY(8px) scale(0.6); }
    20%  { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 1; transform: translateY(-28px) scale(1); }
}

/* Sparkle particles */
.loot-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--sr-amber);
    animation: sparkle 0.6s steps(4) forwards;
    pointer-events: none;
}

@keyframes sparkle {
    0%   { opacity: 0; transform: scale(0); }
    25%  { opacity: 1; transform: scale(1.5); background: var(--sr-white); }
    50%  { opacity: 1; transform: scale(1); background: var(--sr-amber); }
    100% { opacity: 0; transform: scale(0.5); }
}

/* Dead drop overlay mode — darker amber tint */
.encounter-overlay.encounter-mode-loot {
    background: rgba(10, 10, 18, 0.92);
}

/* Ally overlay mode — teal tint */
.encounter-overlay.encounter-mode-ally {
    background: rgba(10, 18, 14, 0.88);
}

.encounter-overlay.encounter-mode-ally .encounter-vs {
    display: none;
}

/* Encounter HP bars */
.encounter-hp-bar {
    display: flex;
    gap: 2px;
    justify-content: center;
    margin-bottom: 4px;
    height: 8px;
}

.encounter-hp-segment {
    width: 10px;
    height: 8px;
    background: var(--sr-steel-mid);
    border: 1px solid var(--sr-steel-light);
}

.encounter-hp-segment.filled {
    border-color: transparent;
}

.encounter-hp-segment.tier-healthy { background: var(--sr-teal); }
.encounter-hp-segment.tier-mid { background: var(--sr-amber); }
.encounter-hp-segment.tier-critical { background: var(--sr-crimson); }
.encounter-hp-segment.tier-enemy { background: var(--sr-crimson); }

.encounter-hp-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: var(--sr-gray);
    margin-top: 2px;
}

.encounter-vs {
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;
    color: var(--sr-steel-light);
    align-self: center;
}

/* Floating damage numbers */
.damage-number {
    position: absolute;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: var(--sr-white);
    pointer-events: none;
    z-index: 16;
    animation: damageFloat 0.8s steps(8) forwards;
    white-space: nowrap;
}

.damage-number.damage-crit {
    font-size: 12px;
    color: var(--sr-amber);
}

.damage-number.damage-taken {
    color: var(--sr-crimson);
}

.damage-number.damage-heal {
    color: var(--sr-teal);
}

.damage-number.damage-armor {
    color: var(--sr-authority);
    font-size: 10px;
}

@keyframes damageFloat {
    0%   { opacity: 1; transform: translateY(0); }
    75%  { opacity: 1; transform: translateY(-32px); }
    100% { opacity: 0; transform: translateY(-40px); }
}

/* Encounter status / outcome text */
.encounter-status {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    text-align: center;
    min-height: 16px;
    margin-top: 4px;
    color: var(--sr-gray);
}

.encounter-status.outcome-victory { color: var(--sr-teal); }
.encounter-status.outcome-defeat { color: var(--sr-crimson); }
.encounter-status.outcome-mutual_death { color: var(--sr-crimson); }
.encounter-status.outcome-bribed { color: var(--sr-purple); }
.encounter-status.outcome-fled { color: var(--sr-amber); }
.encounter-status.outcome-looted { color: var(--sr-amber); }
.encounter-status.outcome-healed { color: var(--sr-teal); }
.encounter-status.outcome-run_failed { color: var(--sr-crimson); }
.encounter-status.outcome-arrested { color: var(--sr-authority); }
.encounter-status.outcome-smuggler_wins { color: var(--sr-teal); }
.encounter-status.outcome-smuggler_dead { color: var(--sr-crimson); }

/* Player choice buttons (active mode) */
.encounter-choices {
    display: none;
    gap: 8px;
    margin-top: 6px;
    pointer-events: auto;
}

.encounter-choice-btn {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    padding: 8px 12px;
    border: 2px solid var(--sr-steel-mid);
    background: var(--sr-steel-dark);
    color: var(--sr-gray);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s, filter 0.15s;
    white-space: nowrap;
}

.encounter-choice-btn.choice-bribe {
    border-color: var(--sr-purple);
    color: var(--sr-purple);
}

.encounter-choice-btn.choice-fight {
    border-color: var(--sr-crimson);
    color: var(--sr-crimson);
}

.encounter-choice-btn.choice-run {
    border-color: var(--sr-amber);
    color: var(--sr-amber);
}

.encounter-choice-btn.choice-emp {
    border-color: #00d4ff;
    color: #00d4ff;
}

.encounter-choice-btn:hover {
    background: var(--sr-void);
    filter: brightness(1.3);
}

.encounter-choice-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.encounter-choice-btn.disabled:hover {
    border-color: var(--sr-steel-mid);
    color: var(--sr-gray);
    background: var(--sr-steel-dark);
}

/* Bribe animation — data stick floats from player to enemy */
.bribe-stick {
    position: absolute;
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
    z-index: 17;
    top: 50%;
    left: 50%;
    margin-left: -12px;
    animation: bribeFloat 0.8s steps(10) forwards;
    pointer-events: none;
}

@keyframes bribeFloat {
    0%   { transform: translate(-140px, -12px) scale(1); opacity: 1; }
    30%  { transform: translate(-60px, -40px) scale(1.3); opacity: 1; }
    70%  { transform: translate(60px, -40px) scale(1.3); opacity: 1; }
    100% { transform: translate(140px, -12px) scale(0.8); opacity: 0; }
}

/* Arrest effect — Andi crouches down (5 frames at 2x) */
.encounter-player-sprite.arrested {
    background-image: url('../assets/sprites/andi/andi-arrested-east.png') !important;
    background-size: 480px 96px !important;
    background-repeat: no-repeat !important;
    animation: arrestCrouch 1s steps(5) forwards !important;
}

@keyframes arrestCrouch {
    0%   { background-position: 0 0; }
    100% { background-position: -480px 0; }
}

/* Stat value flash effects */
.flash-amber {
    animation: statFlashAmber 0.4s steps(2);
}

.flash-crimson {
    animation: statFlashCrimson 0.4s steps(2);
}

@keyframes statFlashAmber {
    0%, 50% { color: var(--sr-amber); transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes statFlashCrimson {
    0%, 50% { color: var(--sr-crimson); transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Menu Styles
   ───────────────────────────────────────────────────────────────────────────── */
.menu-list {
    list-style: none;
    text-align: center;
}

.menu-list li {
    margin: 16px 0;
}

.menu-cursor {
    color: var(--sr-teal);
    animation: blink 0.5s steps(1) infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Utility Classes
   ───────────────────────────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

.color-teal { color: var(--sr-teal-light); }
.color-purple { color: var(--sr-purple); }
.color-amber { color: var(--sr-amber); }
.color-green { color: var(--sr-teal); }
.color-red { color: var(--sr-crimson); }
.color-blue { color: var(--sr-authority); }
.color-gray { color: var(--sr-gray); }

.hidden { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   Auth UI
   ───────────────────────────────────────────────────────────────────────────── */
.auth-bar {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-bar .username {
    color: var(--sr-teal);
}

.auth-bar a, .auth-bar button {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 14px;
    color: var(--sr-teal-light);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.auth-bar a:hover, .auth-bar button:hover {
    color: var(--sr-amber);
}

.auth-bar #admin-link {
    color: var(--sr-crimson);
}

.prestige-badge {
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    color: var(--sr-amber);
    background: var(--sr-steel-dark);
    border: 1px solid var(--sr-amber);
    padding: 2px 6px;
    letter-spacing: 1px;
}

.credits-badge {
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    color: var(--sr-purple);
    background: var(--sr-steel-dark);
    border: 1px solid var(--sr-purple);
    padding: 2px 6px;
    letter-spacing: 1px;
}

.flux-badge {
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    color: var(--sr-teal-light);
    background: var(--sr-steel-dark);
    border: 1px solid var(--sr-teal-light);
    padding: 2px 6px;
    letter-spacing: 1px;
}

.wallet-badge {
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    color: var(--sr-teal);
    background: var(--sr-steel-dark);
    border: 1px solid var(--sr-teal);
    padding: 2px 6px;
    letter-spacing: 1px;
}

.wallet-setup-btn {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    padding: 4px 10px;
    color: var(--sr-teal);
    border: 1px solid var(--sr-teal);
    background: var(--sr-void);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.wallet-setup-btn:hover {
    background: var(--sr-teal);
    color: var(--sr-void);
}

.wallet-setup-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wallet-setup-btn:disabled:hover {
    background: var(--sr-void);
    color: var(--sr-teal);
}

.reveal-onchain {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: var(--sr-teal);
    margin-top: 14px;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.inv-wallet-info {
    text-align: center;
    margin-bottom: 12px;
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: var(--sr-teal);
}

.inv-wallet-link {
    color: var(--sr-teal-light);
    text-decoration: none;
    word-break: break-all;
}

.inv-wallet-link:hover {
    text-decoration: underline;
}

.auth-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 18, 0.9);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-modal {
    background: var(--sr-void);
    border: 2px solid var(--sr-steel-light);
    padding: 24px;
    width: 380px;
    max-width: 90%;
    position: relative;
}

.auth-modal h2 {
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;
    color: var(--sr-teal);
    text-align: center;
    margin-bottom: 20px;
}

.auth-modal .close-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 24px;
    color: var(--sr-gray);
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.auth-modal .close-btn:hover {
    color: var(--sr-crimson);
}

.auth-form label {
    display: block;
    font-size: 14px;
    color: var(--sr-gray);
    margin-bottom: 4px;
    margin-top: 12px;
}

.auth-form input {
    width: 100%;
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 18px;
    padding: 8px;
    background: var(--sr-void);
    color: var(--sr-teal-light);
    border: 2px solid var(--sr-steel-mid);
    outline: none;
}

.auth-form input:focus {
    border-color: var(--sr-teal);
}

.auth-form .submit-btn {
    width: 100%;
    margin-top: 20px;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    padding: 12px;
    background: var(--sr-steel-mid);
    color: var(--sr-teal-light);
    border: 2px solid var(--sr-steel-light);
    cursor: pointer;
    text-transform: uppercase;
}

.auth-form .submit-btn:hover {
    background: var(--sr-teal);
    color: var(--sr-void);
}

.auth-form .submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.auth-toggle {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    color: var(--sr-gray);
}

.auth-toggle a {
    color: var(--sr-teal-light);
    cursor: pointer;
    text-decoration: underline;
}

.auth-toggle a:hover {
    color: var(--sr-amber);
}

.auth-error {
    color: var(--sr-crimson);
    font-size: 14px;
    margin-top: 8px;
    text-align: center;
    min-height: 18px;
}

.auth-google-btn {
    width: 100%;
    margin-top: 12px;
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 18px;
    padding: 10px;
    background: var(--sr-void);
    color: var(--sr-gray);
    border: 2px solid var(--sr-steel-mid);
    cursor: pointer;
    text-align: center;
}

.auth-google-btn:hover {
    border-color: var(--sr-teal-light);
    color: var(--sr-teal-light);
}

.auth-divider {
    text-align: center;
    margin: 16px 0;
    color: var(--sr-steel-light);
    font-size: 14px;
    position: relative;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background: var(--sr-steel-mid);
}

.auth-divider::before { left: 0; }
.auth-divider::after { right: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   Chain Victory Overlay
   ───────────────────────────────────────────────────────────────────────────── */
.chain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 18, 0.92);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.chain-overlay-content {
    background: var(--sr-steel-dark);
    border: 3px solid var(--sr-teal);
    max-width: 500px;
    width: 90%;
    padding: 24px;
    box-shadow: 0 0 30px rgba(34, 170, 102, 0.2);
}

.chain-overlay-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    color: var(--sr-teal);
    text-align: center;
    margin-bottom: 20px;
    text-shadow: 0 0 8px rgba(34, 170, 102, 0.4);
}

.chain-run-summary {
    margin-bottom: 20px;
}

.chain-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--sr-steel-mid);
}

.chain-stat-label {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 14px;
    color: var(--sr-gray);
}

.chain-stat-value {
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    color: var(--sr-teal-light);
}

.chain-stat-value.chain-mult {
    color: var(--sr-amber);
}

.chain-stat-row.chain-cumulative {
    border-bottom: 2px solid var(--sr-teal);
    padding: 8px 0;
}

.chain-stat-row.chain-cumulative .chain-stat-label {
    color: var(--sr-teal);
}

.chain-stat-row.chain-cumulative .chain-stat-value {
    font-size: 16px;
    color: var(--sr-amber);
}

.chain-stat-row.chain-risk .chain-stat-label {
    color: var(--sr-crimson);
    opacity: 0.8;
}

.chain-risk-value {
    color: var(--sr-crimson) !important;
    opacity: 0.8;
}

/* ── Chain Action Buttons ── */
.chain-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 16px;
}

.btn-lock-in {
    background: var(--sr-teal) !important;
    color: var(--sr-void) !important;
    font-family: 'Press Start 2P', cursive;
    font-size: 11px;
    padding: 12px 24px;
    border: 2px solid var(--sr-teal);
    cursor: pointer;
}

.btn-lock-in:hover {
    background: var(--sr-teal-light) !important;
    box-shadow: 0 0 12px rgba(34, 170, 102, 0.4);
}

.btn-push-on {
    background: var(--sr-steel-dark) !important;
    color: var(--sr-amber) !important;
    font-family: 'Press Start 2P', cursive;
    font-size: 11px;
    padding: 12px 24px;
    border: 2px solid var(--sr-amber);
    cursor: pointer;
}

.btn-push-on:hover {
    background: var(--sr-steel-mid) !important;
    box-shadow: 0 0 12px rgba(204, 170, 51, 0.3);
}

/* ── Contract Cards ── */
.chain-contracts-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: var(--sr-amber);
    text-align: center;
    margin-bottom: 12px;
}

.contract-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contract-card {
    background: var(--sr-void);
    border: 2px solid var(--sr-steel-mid);
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.contract-card:hover {
    border-color: var(--sr-teal);
    box-shadow: 0 0 12px rgba(34, 170, 102, 0.2);
}

.contract-zone {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: var(--sr-teal-light);
    margin-bottom: 6px;
}

.contract-description {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 14px;
    color: var(--sr-gray);
    margin-bottom: 6px;
}

.contract-buff {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 13px;
    color: var(--sr-teal);
    margin-bottom: 2px;
}

.contract-nerf {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 13px;
    color: var(--sr-crimson);
    margin-bottom: 4px;
}

.contract-difficulty {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: var(--sr-steel-light);
    margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Chain Backpack Review (in chain victory overlay)
   ───────────────────────────────────────────────────────────────────────────── */
.chain-backpack {
    margin-bottom: 16px;
    border: 1px solid var(--sr-steel-mid);
    padding: 10px;
}

.chain-backpack-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: var(--sr-amber);
    text-align: center;
    margin-bottom: 8px;
}

.chain-backpack-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chain-backpack-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    background: var(--sr-void);
    border: 1px solid var(--sr-steel-mid);
}

.chain-bp-icon {
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
}

.chain-bp-name {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 14px;
    color: var(--sr-gray);
    flex: 1;
}

.chain-bp-kg {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: var(--sr-steel-light);
}

.chain-bp-discard {
    font-size: 8px !important;
    padding: 2px 6px !important;
    color: var(--sr-crimson) !important;
    border-color: var(--sr-crimson) !important;
    background: var(--sr-void) !important;
}

.chain-bp-discard:hover {
    background: var(--sr-crimson) !important;
    color: var(--sr-void) !important;
}

.chain-backpack-weight {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: var(--sr-steel-light);
    text-align: right;
    margin-top: 6px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Sable's Black Market Shop
   ───────────────────────────────────────────────────────────────────────────── */

.sable-shop {
    margin-bottom: 16px;
    border: 1px solid var(--sr-purple);
    background: rgba(10, 10, 18, 0.85);
    padding: 0;
}

.sable-shop-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(136, 85, 170, 0.15);
    border-bottom: 1px solid var(--sr-purple);
}

.sable-sprite {
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    background: url('../assets/sprites/sable/sable-idle-south.png') 0 0 no-repeat;
    background-size: 192px 48px;
    animation: sable-breathe 2s steps(4) infinite;
    flex-shrink: 0;
}

@keyframes sable-breathe {
    from { background-position: 0 0; }
    to { background-position: -192px 0; }
}

.sable-shop-info {
    flex: 1;
}

.sable-shop-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: var(--sr-purple);
    margin: 0 0 6px;
}

.sable-credits-display {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sable-credits-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: var(--sr-steel-light);
}

.sable-credits-value {
    font-family: 'Press Start 2P', cursive;
    font-size: 11px;
    color: var(--sr-amber);
}

.sable-credits-earned {
    padding: 6px 12px;
    text-align: center;
    border-bottom: 1px solid var(--sr-steel-mid);
    background: rgba(204, 170, 51, 0.08);
    animation: credits-flash 0.8s ease-out;
}

@keyframes credits-flash {
    0% { background: rgba(204, 170, 51, 0.3); }
    100% { background: rgba(204, 170, 51, 0.08); }
}

.credits-earned-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    color: var(--sr-amber);
}

.sable-shop-items {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sable-item-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--sr-void);
    border: 1px solid var(--sr-steel-mid);
    border-left: 3px solid var(--sr-purple);
    transition: opacity 0.15s;
}

.sable-item-card.sable-item-disabled {
    opacity: 0.4;
}

.sable-item-icon {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.sable-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sable-item-name {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 13px;
    color: var(--sr-gray);
}

.sable-item-desc {
    font-family: 'VT323', monospace;
    font-size: 12px;
    color: var(--sr-steel-light);
}

.sable-item-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.sable-item-price {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: var(--sr-amber);
}

.sable-item-kg {
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    color: var(--sr-steel-light);
}

.sable-buy-btn {
    font-family: 'Press Start 2P', cursive !important;
    font-size: 8px !important;
    padding: 4px 10px !important;
    background: var(--sr-purple) !important;
    color: var(--sr-white) !important;
    border: 1px solid var(--sr-purple) !important;
    cursor: pointer;
    flex-shrink: 0;
    transition: box-shadow 0.15s;
}

.sable-buy-btn:hover:not(:disabled) {
    box-shadow: 0 0 8px rgba(136, 85, 170, 0.5);
}

.sable-buy-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.sable-shop-weight {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: var(--sr-steel-light);
    text-align: right;
    padding: 4px 12px 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Safe House Overlay
   ───────────────────────────────────────────────────────────────────────────── */
.checkpoint-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 18, 0.88);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 900;
}

.checkpoint-content {
    background: var(--sr-steel-dark);
    border: 3px solid var(--sr-teal);
    max-width: 440px;
    width: 90%;
    padding: 20px;
    box-shadow: 0 0 24px rgba(34, 170, 102, 0.15);
}

.checkpoint-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;
    color: var(--sr-teal);
    text-align: center;
    margin-bottom: 16px;
    text-shadow: 0 0 8px rgba(34, 170, 102, 0.4);
}

.checkpoint-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    max-height: 240px;
    overflow-y: auto;
}

.checkpoint-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--sr-void);
    border: 1px solid var(--sr-steel-mid);
    border-left: 3px solid var(--sr-steel-mid);
}

.checkpoint-item-icon {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.checkpoint-item-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.checkpoint-item-name {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 14px;
    color: var(--sr-gray);
}

.checkpoint-item-desc {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 12px;
    color: var(--sr-steel-light);
}

.checkpoint-item-kg {
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    color: var(--sr-steel-light);
}

.checkpoint-use-btn {
    font-size: 9px !important;
    padding: 4px 10px !important;
    background: var(--sr-teal) !important;
    color: var(--sr-void) !important;
    border-color: var(--sr-teal) !important;
    flex-shrink: 0;
}

.checkpoint-use-btn:hover {
    background: var(--sr-teal-light) !important;
    box-shadow: 0 0 8px rgba(34, 170, 102, 0.4);
}

.checkpoint-auto-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    color: var(--sr-steel-light);
    opacity: 0.6;
    flex-shrink: 0;
}

.checkpoint-weight {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: var(--sr-steel-light);
    text-align: right;
    margin-bottom: 12px;
}

#checkpoint-continue {
    display: block;
    width: 100%;
    font-family: 'Press Start 2P', cursive;
    font-size: 11px;
    padding: 10px;
    background: var(--sr-steel-dark);
    color: var(--sr-teal-light);
    border: 2px solid var(--sr-teal);
    cursor: pointer;
}

#checkpoint-continue:hover {
    background: var(--sr-steel-mid);
    box-shadow: 0 0 12px rgba(34, 170, 102, 0.2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Equipment Overlay (Pre-Chain Loadout + Break Check)
   ───────────────────────────────────────────────────────────────────────────── */

.equip-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 18, 0.94);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
}

.equip-overlay-content {
    background: var(--sr-steel-dark);
    border: 3px solid var(--sr-amber);
    max-width: 520px;
    width: 92%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
    box-shadow: 0 0 30px rgba(204, 170, 51, 0.15);
}

.equip-overlay-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    color: var(--sr-amber);
    text-align: center;
    margin-bottom: 16px;
    text-shadow: 0 0 8px rgba(204, 170, 51, 0.4);
}

/* ── Equipment Slots ── */
.equip-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.equip-slot {
    flex: 1 1 45%;
    min-width: 140px;
    background: var(--sr-void);
    border: 2px solid var(--sr-steel-mid);
    padding: 8px;
}

.equip-slot.pending-change {
    border-color: var(--sr-amber) !important;
    box-shadow: 0 0 6px rgba(255, 191, 0, 0.3);
}

.equip-slot.pending-remove {
    border-color: var(--sr-crimson) !important;
    box-shadow: 0 0 6px rgba(255, 50, 50, 0.3);
}

.equip-slot-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: var(--sr-steel-light);
    margin-bottom: 4px;
    text-transform: uppercase;
}

.equip-slot-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.equip-slot-default {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 14px;
    color: var(--sr-steel-light);
    opacity: 0.5;
}

.equip-slot-name {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 14px;
}

.equip-slot-stats {
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    color: var(--sr-gray);
}

.equip-unequip-btn {
    font-size: 7px !important;
    padding: 2px 6px !important;
    color: var(--sr-crimson) !important;
    border-color: var(--sr-crimson) !important;
    background: var(--sr-void) !important;
    align-self: flex-start;
    margin-top: 2px;
}

.equip-unequip-btn:hover {
    background: var(--sr-crimson) !important;
    color: var(--sr-void) !important;
}

/* ── Stat Summary ── */
.equip-stat-summary {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 14px;
    padding: 8px;
    background: var(--sr-void);
    border: 1px solid var(--sr-steel-mid);
}

.equip-stat {
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    color: var(--sr-teal-light);
}

.stat-penalty {
    color: var(--sr-crimson) !important;
}

/* ── Inventory Grid ── */
.equip-inventory {
    margin-bottom: 14px;
}

.equip-inv-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: var(--sr-amber);
    margin-bottom: 8px;
}

.equip-inv-title span {
    font-size: 8px;
    color: var(--sr-steel-light);
    margin-left: 6px;
}

.equip-inv-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
}

.equip-inv-empty {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 13px;
    color: var(--sr-steel-light);
    opacity: 0.6;
    text-align: center;
    padding: 12px;
}

.equip-item-card {
    background: var(--sr-void);
    padding: 8px;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.equip-item-card:hover {
    box-shadow: 0 0 10px rgba(204, 170, 51, 0.2);
}

.equip-card-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 3px;
}

.equip-card-level {
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    padding: 1px 4px;
    background: var(--sr-steel-mid);
}

.equip-card-name {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 14px;
    color: var(--sr-gray);
    margin-bottom: 3px;
}

.equip-card-stats {
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    color: var(--sr-gray);
    margin-bottom: 3px;
}

.equip-card-condition {
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    color: var(--sr-steel-light);
}

/* ── Station Clearance Levels (Rarity Borders) ── */

/* LEVEL 1 — Common: thin circuit trace in steel */
.clearance-common {
    border: 2px solid var(--sr-steel-light);
}
.clearance-common .equip-slot-name,
.clearance-common .equip-card-name {
    color: var(--sr-gray);
}
.clearance-common .equip-card-level {
    color: var(--sr-steel-light);
    border: 1px solid var(--sr-steel-light);
    background: transparent;
}

/* LEVEL 2 — Uncommon: double trace in teal */
.clearance-uncommon {
    border: 2px solid var(--sr-teal);
    box-shadow: inset 0 0 0 1px var(--sr-teal);
}
.clearance-uncommon .equip-slot-name,
.clearance-uncommon .equip-card-name {
    color: var(--sr-teal-light);
}
.clearance-uncommon .equip-card-level {
    color: var(--sr-teal);
    border: 1px solid var(--sr-teal);
    background: rgba(34, 170, 102, 0.1);
}

/* LEVEL 3 — Rare: triple trace with node dots in purple */
.clearance-rare {
    border: 2px solid var(--sr-purple);
    box-shadow: inset 0 0 0 1px var(--sr-purple), 0 0 6px rgba(136, 85, 170, 0.2);
}
.clearance-rare .equip-slot-name,
.clearance-rare .equip-card-name {
    color: #bb88dd;
}
.clearance-rare .equip-card-level {
    color: var(--sr-purple);
    border: 1px solid var(--sr-purple);
    background: rgba(136, 85, 170, 0.15);
}

/* LEVEL 4 — Legendary: full circuit border in amber with glow */
.clearance-legendary {
    border: 2px solid var(--sr-amber);
    box-shadow: inset 0 0 0 1px var(--sr-amber), 0 0 10px rgba(204, 170, 51, 0.3);
    animation: clearance-glow 2s ease-in-out infinite alternate;
}
.clearance-legendary .equip-slot-name,
.clearance-legendary .equip-card-name {
    color: var(--sr-amber);
    text-shadow: 0 0 4px rgba(204, 170, 51, 0.3);
}
.clearance-legendary .equip-card-level {
    color: var(--sr-amber);
    border: 1px solid var(--sr-amber);
    background: rgba(204, 170, 51, 0.15);
}

@keyframes clearance-glow {
    from { box-shadow: inset 0 0 0 1px var(--sr-amber), 0 0 8px rgba(204, 170, 51, 0.2); }
    to   { box-shadow: inset 0 0 0 1px var(--sr-amber), 0 0 16px rgba(204, 170, 51, 0.5); }
}

/* ── Equipment Overlay Actions ── */
.equip-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* ── Break Check Results ── */
.break-check-results {
    margin-bottom: 16px;
}

.break-check-none {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 14px;
    color: var(--sr-steel-light);
    text-align: center;
    padding: 16px;
}

.break-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    margin-bottom: 4px;
    background: var(--sr-void);
    border: 1px solid var(--sr-steel-mid);
}

.break-check-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.break-survived .break-check-icon {
    color: var(--sr-teal);
}

.break-destroyed .break-check-icon {
    color: var(--sr-crimson);
}

.break-check-name {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 14px;
    flex: 1;
}

.break-check-condition {
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    color: var(--sr-steel-light);
}

.break-check-status {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    flex-shrink: 0;
}

.break-survived .break-check-status {
    color: var(--sr-teal);
}

.break-destroyed .break-check-status {
    color: var(--sr-crimson);
}

.break-destroyed .break-check-name {
    text-decoration: line-through;
    opacity: 0.6;
}

/* ── Equipment Art ── */
.item-art-sm {
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
    border-radius: 2px;
    margin-bottom: 4px;
}

.item-art-thumb {
    width: 52px;
    height: 52px;
    image-rendering: pixelated;
    border-radius: 2px;
    margin-bottom: 4px;
    display: block;
}

.capsule-art {
    width: 100%;
    max-width: 160px;
    height: auto;
    image-rendering: pixelated;
    display: block;
    margin: 0 auto 10px;
}

.reveal-art {
    width: 128px;
    height: 128px;
    image-rendering: pixelated;
    margin: 0 auto 12px;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HUB LAYOUT SYSTEM
   Full-viewport pages (home, shop, policy) — replaces screen-container
   ═══════════════════════════════════════════════════════════════════════════ */

body.sr-hub-body {
    display: block;
    align-items: initial;
    justify-content: initial;
    padding: 0;
    min-height: 100vh;
}

.sr-section {
    width: 100%;
    padding: 60px 24px;
}

.sr-section-inner {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.sr-section--dark { background: var(--sr-void); }
.sr-section--panel { background: var(--sr-steel-dark); }

.sr-section--hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 0;
}

.sr-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sr-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .sr-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .sr-grid-3,
    .sr-grid-2 { grid-template-columns: 1fr; }
    .sr-section { padding: 40px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SR NAV BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.sr-nav {
    position: sticky;
    top: 0;
    z-index: 500;
    width: 100%;
    background: rgba(10, 10, 18, 0.96);
    border-bottom: 2px solid var(--sr-steel-mid);
    display: flex;
    align-items: center;
    padding: 0 24px;
    height: 56px;
    backdrop-filter: blur(4px);
    gap: 24px;
}

.sr-nav-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.sr-nav-logo-img {
    height: 28px;
    width: auto;
    image-rendering: pixelated;
}

.sr-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: center;
}

.sr-nav-link {
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    color: var(--sr-gray);
    text-decoration: none;
    padding: 8px 12px;
    background: none;
    border: 2px solid transparent;
    cursor: pointer;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.sr-nav-link:hover,
.sr-nav-link.active {
    color: var(--sr-teal-light);
    border-bottom-color: var(--sr-teal);
}

.sr-nav-play {
    color: var(--sr-void);
    background: var(--sr-teal);
    border-color: var(--sr-teal);
}

.sr-nav-play:hover {
    background: var(--sr-teal-light);
    border-color: var(--sr-teal-light);
    color: var(--sr-void);
}

.sr-nav-more {
    position: relative;
}

.sr-nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--sr-steel-dark);
    border: 2px solid var(--sr-steel-mid);
    min-width: 160px;
    flex-direction: column;
    z-index: 600;
}

.sr-nav-dropdown.open { display: flex; }

.sr-nav-dropdown a {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: var(--sr-gray);
    text-decoration: none;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sr-steel-mid);
}

.sr-nav-dropdown a:last-child { border-bottom: none; }
.sr-nav-dropdown a:hover { color: var(--sr-amber); background: var(--sr-void); }

.sr-nav-auth {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 9px;
}

.sr-nav-auth a,
.sr-nav-auth button {
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    color: var(--sr-teal-light);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    padding: 4px 8px;
}

.sr-nav-auth a:hover,
.sr-nav-auth button:hover { color: var(--sr-amber); }

.sr-nav-sep { color: var(--sr-steel-mid); }

.sr-nav-username {
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    color: var(--sr-teal);
}

.sr-nav-badge {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    padding: 2px 6px;
    border: 1px solid var(--sr-steel-mid);
}

.sr-nav-badge-cr { color: var(--sr-amber); border-color: var(--sr-amber); }
.sr-nav-badge-fx { color: var(--sr-teal-light); border-color: var(--sr-teal-light); }

.sr-nav-mute {
    font-size: 16px;
    color: var(--sr-steel-light);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.sr-nav-mute:hover { color: var(--sr-teal-light); }
.sr-nav-mute.muted { opacity: 0.4; }

.sr-nav-hamburger {
    display: none;
    background: none;
    border: 1px solid var(--sr-steel-mid);
    color: var(--sr-gray);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    margin-left: auto;
}

@media (max-width: 768px) {
    .sr-nav { padding: 0 16px; gap: 12px; }
    .sr-nav-hamburger { display: block; }
    .sr-nav-links {
        display: none;
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        background: var(--sr-steel-dark);
        border-bottom: 2px solid var(--sr-steel-mid);
        flex-direction: column;
        align-items: stretch;
        padding: 8px 0;
        z-index: 500;
    }
    .sr-nav-links.open { display: flex; }
    .sr-nav-link {
        font-size: 8px;
        padding: 12px 24px;
        border: none;
    }
    .sr-nav-play {
        margin: 4px 16px;
        text-align: center;
    }
    .sr-nav-auth { display: none; }
    .sr-nav-links.open .sr-nav-mobile-auth { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SR FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.sr-footer {
    background: var(--sr-steel-dark);
    border-top: 2px solid var(--sr-steel-mid);
    padding: 32px 24px;
}

.sr-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.sr-footer-copy {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    color: var(--sr-steel-light);
}

.sr-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
}

.sr-footer-links a {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 14px;
    color: var(--sr-gray);
    text-decoration: none;
}

.sr-footer-links a:hover { color: var(--sr-teal-light); }

.sr-footer-contact {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 13px;
    color: var(--sr-steel-light);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO SECTION (index.html)
   ═══════════════════════════════════════════════════════════════════════════ */

.sr-hero-bg {
    position: absolute;
    inset: 0;
    background: url('../assets/title/title-bg.jpg') center center / cover no-repeat;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.sr-hero-vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(0,0,0,0.6) 0%,
        rgba(0,0,0,0.1) 30%,
        rgba(0,0,0,0.1) 60%,
        rgba(0,0,0,0.85) 100%);
    pointer-events: none;
}

.sr-hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 24px;
}

.sr-hero-logo {
    width: 560px;
    max-width: 85vw;
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    margin-bottom: 48px;
}

.sr-hero-cta {
    display: inline-block;
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;
    padding: 20px 48px;
    letter-spacing: 2px;
    color: var(--sr-void);
    background: var(--sr-teal);
    border: 2px solid var(--sr-teal);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.sr-hero-cta:hover {
    background: var(--sr-teal-light);
    border-color: var(--sr-teal-light);
}

.sr-hero-scroll-hint {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 13px;
    color: var(--sr-steel-light);
    opacity: 0.6;
    z-index: 10;
    animation: heroScrollPulse 2s ease-in-out infinite;
}

@keyframes heroScrollPulse {
    0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
    50% { opacity: 0.8; transform: translateX(-50%) translateY(4px); }
}

/* Feature cards */
.sr-feature-card {
    background: var(--sr-void);
    border: 2px solid var(--sr-steel-mid);
    padding: 32px 24px;
    text-align: center;
    transition: border-color 0.2s;
}

.sr-feature-card:hover {
    border-color: var(--sr-teal);
}

.sr-feature-icon {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
    margin: 0 auto 16px;
}

.sr-feature-card h3 {
    font-family: 'Press Start 2P', cursive;
    font-size: 11px;
    color: var(--sr-amber);
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.sr-feature-card p {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 15px;
    line-height: 1.8;
    color: var(--sr-gray);
}

/* Lore section */
.sr-lore-text {
    max-width: 680px;
    margin: 0 auto 24px;
    text-align: center;
}

.sr-lore-text p {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 16px;
    line-height: 2;
    color: var(--sr-gray);
    margin-bottom: 8px;
}

.sr-lore-text .faction-helix { color: #5566dd; }
.sr-lore-text .faction-voc { color: var(--sr-orange); }
.sr-lore-text .accent { color: var(--sr-amber); }

/* ═══════════════════════════════════════════════════════════════════════════
   POLICY PAGES
   ═══════════════════════════════════════════════════════════════════════════ */

.sr-policy-doc {
    max-width: 760px;
    margin: 0 auto;
}

.sr-policy-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 20px;
    color: var(--sr-amber);
    margin-bottom: 8px;
}

.sr-policy-date {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 14px;
    color: var(--sr-steel-light);
    margin-bottom: 40px;
}

.sr-policy-doc h2 {
    font-family: 'Press Start 2P', cursive;
    font-size: 11px;
    color: var(--sr-teal);
    margin: 32px 0 12px;
    letter-spacing: 1px;
}

.sr-policy-doc p,
.sr-policy-doc li {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 16px;
    line-height: 1.9;
    color: var(--sr-gray);
    margin-bottom: 12px;
}

.sr-policy-doc ul {
    padding-left: 24px;
    margin-bottom: 16px;
}

.sr-policy-doc a {
    color: var(--sr-teal-light);
}

/* Capsule shop hub layout overrides */
.sr-capsule-hub .capsule-cards {
    max-width: none;
}

.sr-capsule-hub .your-capsules-section,
.sr-capsule-hub .buy-flux-section {
    max-width: none;
}

.capsule-card-desc {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 13px;
    color: var(--sr-steel-light);
    line-height: 1.7;
    margin-bottom: 10px;
}

.capsule-stripe-note {
    font-family: 'Silkscreen', 'VT323', monospace;
    font-size: 12px;
    color: var(--sr-steel-light);
    text-align: center;
    margin-top: 16px;
    padding: 10px;
    border-top: 1px solid var(--sr-steel-mid);
}