:root {
    --primary: #00f3ff;
    --danger: #ff0055;
    --success: #00ff66;
    --warning: #ffaa00;
    --bg: #000000;
    --panel: rgba(10, 10, 25, 0.85);
    --ai-color: #b066ff;
    --ctrl-scale: 1;
    --text-scale: 1;
    color-scheme: dark;
}

/* ── Splash overlay (hides layout jumps until JS ready) ─────────── */
#splash-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000005;
    transition: opacity 0.4s ease;
}
#splash-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}
.splash-logo {
    width: min(280px, 60vw);
    opacity: 0.9;
    animation: splashPulse 2s ease-in-out infinite;
}
@keyframes splashPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

/* ── Hidden scrollbars globally (scroll still works) ───────────── */
* {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
}
*::-webkit-scrollbar {
    display: none;                  /* Chrome/Safari */
}

html {
    font-size: calc(100% * var(--text-scale, 1));
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg);
    color: white;
    font-family: 'JetBrains Mono', monospace;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}

/* ── Reading font for long text (lore, dialogues, descriptions) ────────── */
.font-reading {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    letter-spacing: 0.2px;
}

input, textarea {
    -webkit-user-select: text;
    user-select: text;
}

canvas {
    display: block;
    touch-action: none;
}

#ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ── HUD ─────────────────────────────────────────── */

#hud {
    padding: max(10px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 70%, transparent 100%);
    pointer-events: auto;
    flex-wrap: wrap;
    gap: 10px;
}

.hud-stat {
    font-size: 1rem;
    text-shadow: 0 0 5px var(--primary);
    font-weight: bold;
    display: flex;
    flex-direction: column;
}

.hud-stat span {
    font-size: 0.75rem;
    color: #aaa;
    text-shadow: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bar-container {
    width: 80px;
    height: 10px;
    background: #222;
    border: 1px solid #444;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 4px;
}

.fill-bar {
    height: 100%;
    width: 100%;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
    transition: width 0.1s linear, background-color 0.3s;
}

/* ── Flight Gauges Overlay ─────────────────────────── */

#flight-gauges {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 10;
}

/* Chassis bar (top center) */
#chassis-gauge {
    position: absolute;
    top: 50%;
    right: 37px;
    transform: translateY(-50%);
    width: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 11;
    overflow: visible;
}
.chassis-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: nowrap;
    overflow: visible;
}
.chassis-label, .chassis-value {
    font-size: 0.6rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.7), 0 1px 2px #000;
}
.chassis-label { color: #eab308; }
.chassis-value { color: #fde68a; }
.chassis-bar-bg {
    width: 8px;
    height: 22.5vh;
    min-height: 60px;
    max-height: 150px;
    background: transparent;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 3px;
}
.chassis-bar-fill {
    width: 100%;
    border-radius: 8px;
    margin-top: auto;
    background: #eab308;
    box-shadow: 0 0 8px rgba(234,179,8,0.6);
    transition: height 0.3s, background-color 0.3s;
}

/* Vertical gauges (shared) */
.v-gauge {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 12;
}
.v-gauge-value {
    font-size: 0.65rem;
    font-weight: bold;
    color: #6ee7b7;
    margin-bottom: 2px;
}
.v-gauge-track {
    width: 16px;
    height: 45vh;
    min-height: 120px;
    max-height: 300px;
    background: transparent;
    border: none;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3px;
    overflow: hidden;
}
.v-gauge-fill {
    width: 100%;
    border-radius: 8px;
    margin-top: auto;
    transition: height 0.2s, background-color 0.3s;
}
.fuel-fill {
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary);
    height: 100%;
}
.eng-fill {
    background: var(--success);
    box-shadow: 0 0 10px var(--success);
    height: 100%;
}

/* Gauge icon container */
.v-gauge-icon {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    border: 1px solid rgba(16,185,129,0.3);
    backdrop-filter: blur(8px);
    box-shadow: 0 0 15px rgba(16,185,129,0.15);
    color: #34d399;
    margin-top: 4px;
}
.v-gauge-label {
    font-size: 0.6rem;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: var(--success);
    margin-top: 2px;
    text-transform: uppercase;
}
.v-gauge-top-label {
    font-size: 0.6rem;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #f97316;
    margin-bottom: 1px;
    text-transform: uppercase;
    text-align: center;
    white-space: pre-line;
    line-height: 1.15;
}

/* Left gauge (fuel) */
.v-gauge-left {
    left: 5px;
}
.v-gauge-left .v-gauge-track {
    border-left: none;
}

/* Right gauge (engine wear + heat) */
.v-gauge-right {
    right: 5px;
}
.v-gauge-right .v-gauge-track {
    border-right: none;
}

/* Heat dial */
.heat-dial-wrap {
    border-color: rgba(255,255,255,0.05);
    box-shadow: none;
    background: rgba(0,0,0,0.6);
}
.heat-dial-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(135deg);
}
.heat-dial-icon {
    color: #34d399;
    transition: color 0.3s;
}
.heat-label {
    color: #f43f5e;
    opacity: 0.4;
    transition: opacity 0.3s;
}

/* Critical shake animation (< 15%) */
@keyframes gauge-shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-3px); }
    30% { transform: translateX(3px); }
    45% { transform: translateX(-2px); }
    60% { transform: translateX(2px); }
    75% { transform: translateX(-1px); }
    90% { transform: translateX(1px); }
}
@keyframes gauge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.v-gauge.critical .v-gauge-track {
    animation: gauge-shake 0.3s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(255, 0, 85, 0.4);
}
.v-gauge.critical .v-gauge-value {
    color: var(--danger);
    animation: gauge-pulse 0.6s ease-in-out infinite;
}
.v-gauge.critical .v-gauge-icon {
    border-color: var(--danger);
    box-shadow: 0 0 12px rgba(255, 0, 85, 0.3);
}

/* Mobile thruster overlay buttons on gauge bars */
.gauge-thruster-btn {
    position: absolute;
    top: 78%;
    transform: translateY(-50%);
    width: calc(38px * var(--ctrl-scale, 1));
    height: calc(38px * var(--ctrl-scale, 1));
    border-radius: 50%;
    border: 1.5px solid rgba(0,243,255,0.4);
    background: rgba(0,10,20,0.7);
    color: #00f3ff;
    font-size: calc(14px * var(--ctrl-scale, 1));
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 12px rgba(0,243,255,0.2);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    z-index: 20;
    transition: background 0.15s, box-shadow 0.15s;
    isolation: isolate;
}
.gauge-thruster-btn:active, .gauge-thruster-btn.active {
    background: rgba(0,243,255,0.25);
    box-shadow: 0 0 18px rgba(0,243,255,0.5);
}
.gauge-thruster-left {
    left: 50%;
    transform: translate(-50%, -50%);
}
.gauge-thruster-right {
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Heat dial stroke transitions */
#heat-dial {
    transition: stroke-dashoffset 0.2s, stroke 0.3s, filter 0.3s;
}

#cargo-type-badge {
    font-size: 0.75rem;
    margin-top: 3px;
    padding: 2px 6px;
    border-radius: 3px;
    display: none;
    font-weight: bold;
    letter-spacing: 1px;
}


.mineral-hud {
    font-size: 0.9rem;
    color: var(--warning);
    text-shadow: 0 0 5px rgba(255, 170, 0, 0.4);
}

/* ── Screen transition animations ───────────────── */

@keyframes screen-pop-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.93); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes screen-pop-out {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to   { opacity: 0; transform: translate(-50%, -50%) scale(0.93); }
}

/* ── Screens ─────────────────────────────────────── */

.screen {
    position: absolute;
    top: calc(50% + 40px);
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--panel);
    border: 1px solid var(--primary);
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.2);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    pointer-events: auto;
    backdrop-filter: blur(2px);
    min-width: 280px;
    max-width: 450px;
    width: 450px;
    max-height: calc(90vh - 80px);
    max-height: calc(90dvh - 80px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: none;
}


.screen.active {
    display: block;
    touch-action: pan-y;
    animation: screen-pop-in 0.2s ease-out;
}

.screen.screen-closing {
    display: block;
    animation: screen-pop-out 0.15s ease-in forwards;
    pointer-events: none;
}

/* ── Settings Screen (redesigned) ─────────────────── */
#screen-settings {
    overflow: hidden;
    padding: 0;
    display: none;
}

#screen-settings.active {
    display: flex;
    flex-direction: column;
    animation: screen-pop-in 0.2s ease-out;
}

#screen-settings.screen-closing {
    display: flex;
    flex-direction: column;
}

#screen-settings::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: -1;
}

/* Scanline overlay */
#screen-settings::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(0,0,0,0.12) 50%);
    background-size: 100% 4px; z-index: 30;
    border-radius: 12px;
}

.settings-header {
    padding: 14px 20px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(0, 243, 255, 0.15);
    text-align: center;
    flex-shrink: 0;
}

.settings-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary);
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.4);
}

.settings-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

.settings-group {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 14px;
}

.settings-group-danger {
    border-color: rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.04);
}

/* Settings callsign row */
.settings-callsign-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    position: relative;
}
.settings-callsign-row .callsign-input {
    flex: 1;
    min-width: 0;
}
.settings-callsign-row .flag-picker-btn {
    flex-shrink: 0;
}
.settings-callsign-row .flag-picker-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 300;
    max-height: 200px;
    overflow-y: auto;
}

.group-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(0, 243, 255, 0.6);
    border-bottom: 1px solid rgba(0, 243, 255, 0.1);
    padding-bottom: 8px;
    margin: 0 0 14px 0;
}

.group-title-danger {
    color: rgba(239, 68, 68, 0.7);
    border-bottom-color: rgba(239, 68, 68, 0.15);
}

/* Segmented controls */
.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.toggle-row:last-child { margin-bottom: 0; }

.toggle-label {
    font-size: 0.85rem;
    color: #aaddff;
    padding-right: 8px;
    text-align: left;
}

.segmented-control {
    display: flex;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 243, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
    width: 120px;
    flex-shrink: 0;
}
.segmented-control.seg-3 { width: 150px; }

.segment {
    flex: 1;
    text-align: center;
    padding: 6px 0;
    cursor: pointer;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    border-right: 1px solid rgba(0, 243, 255, 0.1);
    transition: background 0.2s, color 0.2s;
    user-select: none;
}
.segment:last-child { border-right: none; }
.segment:hover { background: rgba(0, 243, 255, 0.05); color: var(--primary); }
.segment.active {
    background: rgba(0, 243, 255, 0.2);
    color: #fff;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.5);
    box-shadow: inset 0 0 10px rgba(0, 243, 255, 0.15);
}

/* Settings buttons (v2 — inside groups) */
.settings-btn-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-settings-v2 {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font-size: 0.85rem;
    font-family: inherit;
    text-align: center;
}
.btn-settings-v2:hover { background: rgba(255, 255, 255, 0.05); color: #fff; border-color: rgba(255, 255, 255, 0.3); }

.btn-settings-warning { color: #f97316; border-color: rgba(249, 115, 22, 0.4); }
.btn-settings-warning:hover { background: rgba(249, 115, 22, 0.12); color: #fff; border-color: #f97316; }

.btn-settings-danger { color: #ef4444; border-color: rgba(239, 68, 68, 0.4); }
.btn-settings-danger:hover { background: rgba(239, 68, 68, 0.12); color: #fff; border-color: #ef4444; }

/* Footer with return button */
.settings-footer {
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(0, 243, 255, 0.15);
    flex-shrink: 0;
}

.settings-return-btn {
    width: 100%;
    padding: 12px;
    font-size: 0.95rem;
    margin: 0 !important;
}

/* Sliders inside settings groups */
.settings-group .slider-row {
    margin-bottom: 12px;
}
.settings-group .slider-row:last-of-type { margin-bottom: 14px; }

/* Radio deck inside settings */
.settings-group .radio-deck { margin-top: 4px; }

/* Language dropdown in settings — visible */
#screen-settings .lang-dropdown {
    display: block;
    margin-top: 4px;
}

/* ── Shop: two-column dashboard layout ─────────────── */

#screen-shop {
    overflow: hidden;
    padding: 0;
    width: 90%;
    max-width: 850px;
    /* Shift right of center, but clamp so right edge never leaves viewport.
       Half-width is min(45%, 425px); we keep a 10 px gutter on the right. */
    left: min(calc(50% + 10vw), max(calc(55% - 10px), calc(100% - 440px)));
}

#screen-shop.active {
    display: flex;
    flex-direction: column;
}

.shop-header {
    flex-shrink: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
    cursor: grab;
}
.shop-header.dragging { cursor: grabbing; }

.shop-header h2 {
    margin-bottom: 10px;
}

.shop-header h2 .base-id {
    display: block;
    font-size: 0.75rem;
    font-weight: normal;
    color: #8899aa;
    margin-top: 2px;
}

.shop-header .shop-info {
    margin-bottom: 10px;
}

.shop-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}


.shop-footer {
    flex-shrink: 0;
    padding-top: 10px;
    border-top: 1px solid #333;
}

.shop-footer button {
    margin: 0;
}

/* ── Accordion ─────────────────────────────────────── */

.accordion-section {
    border-bottom: 1px solid #222;
}

.accordion-section:last-child {
    border-bottom: none;
}

.accordion-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.2s;
    border-radius: 4px;
}

.accordion-header:hover {
    background: rgba(0, 243, 255, 0.05);
}

.accordion-icon {
    font-size: 0.75rem;
    color: var(--primary);
    transition: transform 0.3s ease;
    display: inline-block;
    width: 14px;
    text-align: center;
}

.accordion-section.open .accordion-icon {
    transform: rotate(90deg);
}

.accordion-title {
    font-size: 0.8rem;
    color: #aaa;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: bold;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

/* ── Master service button ──────────────────────── */

.master-service-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 12px;
    margin-bottom: 6px;
    border: 1px solid #2a8855;
    border-radius: 6px;
    background: rgba(0, 200, 80, 0.15);
    cursor: pointer;
    transition: all 0.15s;
}
.master-service-btn:not(:disabled):hover {
    border-color: #0c6;
    background: rgba(0, 200, 80, 0.15);
}
.master-service-btn.keyboard-focus {
    border-color: #0c6;
    background: rgba(0, 200, 80, 0.15);
    box-shadow: 0 0 10px rgba(0, 200, 80, 0.25);
}
.master-service-btn.active-press {
    transform: scale(0.97);
}
.master-service-btn:disabled {
    opacity: 0.35;
    cursor: default;
    border-color: #1a2233;
    background: transparent;
}
.master-service-label {
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0c6;
}
.master-service-btn:disabled .master-service-label {
    color: #556;
}
.master-service-hint {
    font-size: 0.65rem;
    color: #687;
    margin-top: 2px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: normal;
}

/* Pulse glow on master service button */
@keyframes master-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(0, 200, 80, 0.15); background: rgba(0, 200, 80, 0.15); }
    50% { box-shadow: 0 0 20px rgba(0, 200, 80, 0.5), inset 0 0 8px rgba(0, 200, 80, 0.1); background: rgba(0, 200, 80, 0.25); }
}
.master-service-pulse:not(:disabled) {
    animation: master-pulse 2s ease-in-out infinite;
}

/* Hide [End] hint on mobile */
@media (max-width: 800px) {
    .master-service-hint { display: none; }
}
.crater-mode .master-service-btn {
    display: none;
}

/* ── Maintenance row (flex) ─────────────────────── */

.maintenance-row {
    display: flex;
    gap: 8px;
    flex-direction: row;
    margin-bottom: 4px;
}

.maint-btn {
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 5px;
    margin: 0;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #1a2233;
    transition: all 0.1s;
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.maint-btn .maint-icon {
    font-size: 1.4rem;
    margin-bottom: 4px;
    text-transform: none;
    letter-spacing: 0;
}

.maint-btn .maint-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.maint-btn .maint-cost {
    font-size: 0.75rem;
    color: #aaa;
    margin-top: 3px;
    font-weight: normal;
    letter-spacing: 0;
    text-transform: none;
}

.maint-btn.keyboard-focus {
    border-color: #00f3ff;
    background: rgba(0, 243, 255, 0.1);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

.maint-btn.active-press {
    transform: scale(0.95);
}

/* ── Maintenance status bars ──────────────────────────────────────────────── */
.maint-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.maint-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease, background-color 0.4s ease;
}

button.keyboard-focus:not(:disabled):not(.btn-ad-silver):not(.btn-ad-silver-icon) {
    border-color: #00f3ff;
    background: rgba(0, 243, 255, 0.1);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

.accordion-header.keyboard-focus {
    border-color: #00f3ff;
    background: rgba(0, 243, 255, 0.12);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
    border-radius: 4px;
}

.accordion-header.active-press {
    transform: scale(0.97);
}

button.active-press:not(:disabled) {
    transform: scale(0.95);
    transition: transform 100ms ease;
}

.kb-hint {
    font-size: 0.7rem;
    color: #556;
    text-align: center;
    padding: 3px 0 6px;
    letter-spacing: 0.03em;
}

@media (max-width: 450px) {
    .maintenance-row {
        flex-direction: column;
    }
    .maint-btn {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 15px 8px;
        margin: 0;
    }
    .maint-btn .maint-icon {
        margin-bottom: 0;
        margin-right: 8px;
        font-size: 1.1rem;
    }
    .maint-btn .maint-label {
        flex: 1;
        text-align: left;
        white-space: nowrap;
    }
    .maint-btn .maint-cost {
        margin-top: 0;
        white-space: nowrap;
    }
    .maint-btn .maint-bar {
        flex-basis: 100%;
        margin-top: 6px;
    }
}

.shop-section-note {
    font-size: 0.75rem;
    color: #556;
    text-align: left;
    margin: 6px 0 4px;
}

h1, h2 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--primary);
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
}

.text-danger {
    color: var(--danger);
    text-shadow: 0 0 10px rgba(255, 0, 85, 0.5);
}

.crash-tip {
    color: var(--warning, #ffc107);
    font-size: 0.85rem;
    margin: 6px 0 2px;
    opacity: 0.9;
}

.text-success {
    color: var(--success);
    text-shadow: 0 0 10px rgba(0, 255, 102, 0.5);
}

.text-warning {
    color: var(--warning);
    text-shadow: 0 0 10px rgba(255, 170, 0, 0.5);
}

/* ── Arrest Screen ───────────────────────────────── */

.arrest-screen {
    background: rgba(15, 2, 2, 0.95) !important;
    border: 2px solid rgba(255, 51, 51, 0.6) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 50px rgba(255, 0, 0, 0.4), inset 0 0 20px rgba(255, 51, 51, 0.1) !important;
    padding: 0 !important;
    max-width: 540px;
    animation: arrest-appear 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

@keyframes arrest-appear {
    0% { transform: translate(-50%, -50%) scale(1.05); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.arrest-scanlines {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, transparent 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.3));
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 10;
}

.arrest-hazard-stripe {
    height: 6px;
    width: 100%;
    background: repeating-linear-gradient(45deg, #1a0505, #1a0505 10px, #ff3333 10px, #ff3333 20px);
    opacity: 0.8;
}

.arrest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    background: rgba(80, 10, 10, 0.4);
    border-bottom: 1px solid rgba(255, 51, 51, 0.3);
}

.arrest-override {
    color: #ff3333;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    animation: arrest-pulse 2s infinite;
}

.arrest-corp {
    color: rgba(255, 51, 51, 0.35);
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.arrest-title-block {
    text-align: center;
    padding: 28px 20px 16px;
}

.arrest-title {
    font-size: 2.8rem;
    font-weight: bold;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 15px #ff3333, 0 0 30px #ff3333;
    margin: 0 0 6px;
    animation: arrest-pulse 2s infinite;
}

@keyframes arrest-pulse {
    0%, 100% { text-shadow: 0 0 10px #ff3333; color: #ffcccc; }
    50% { text-shadow: 0 0 25px #ff3333, 0 0 40px #ff3333; color: #fff; }
}

.arrest-subtitle {
    color: #ff4444;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0;
}

.arrest-receipt {
    position: relative;
    margin: 0 20px 20px;
    padding: 16px;
    background: rgba(255, 0, 0, 0.05);
    border: 1px solid rgba(255, 51, 51, 0.2);
    border-left: 3px solid #ff3333;
    border-radius: 2px;
}

.arrest-watermark {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-size: 3.5rem;
    font-weight: bold;
    color: rgba(255, 51, 51, 0.04);
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 0.2em;
}

.arrest-receipt-header {
    font-size: 0.75rem;
    color: rgba(255, 51, 51, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-bottom: 1px solid rgba(255, 51, 51, 0.15);
    padding-bottom: 6px;
    margin-bottom: 8px;
}

.arrest-penalty-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255, 51, 51, 0.15);
    position: relative;
    z-index: 1;
}

.arrest-penalty-item:last-child { border-bottom: none; }

.arrest-penalty-icon {
    color: #ff3333;
    background: rgba(255, 51, 51, 0.1);
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 51, 51, 0.3);
    flex-shrink: 0;
    font-size: 1.2rem;
    line-height: 1;
}

.arrest-penalty-label {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.arrest-penalty-text {
    font-size: 0.85rem;
    color: #ddd;
    line-height: 1.4;
}

.arrest-penalty-text .val-red { color: #ff3333; font-weight: bold; font-size: 1rem; }
.arrest-penalty-text .val-orange { color: #ff8c00; font-weight: bold; }
.arrest-penalty-text .val-purple { color: #b066ff; font-weight: bold; }
.arrest-penalty-text .val-dim { color: #666; font-style: italic; font-size: 0.75rem; }

.arrest-footer {
    padding: 0 20px 20px;
}

.arrest-btn {
    width: 100%;
    padding: 14px;
    background: rgba(255, 51, 51, 0.1) !important;
    border: 1px solid #ff3333 !important;
    color: #ff3333 !important;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    text-shadow: 0 0 8px rgba(255, 51, 51, 0.4);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.arrest-btn:hover {
    background: #ff3333 !important;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(255, 51, 51, 0.6);
    text-shadow: none;
}

.arrest-warning {
    text-align: center;
    font-size: 0.6rem;
    color: rgba(255, 51, 51, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-top: 10px;
}

/* ── Buttons ─────────────────────────────────────── */

button {
    box-sizing: border-box;
    background: transparent;
    color: white;
    border: 1px solid var(--primary);
    padding: 10px 15px;
    font-size: 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    margin: 5px 0;
    width: 100%;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

button:hover:not(:disabled):not(.btn-ad-silver):not(.btn-ad-silver-icon) {
    background: rgba(0, 243, 255, 0.15);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.4);
}

button:active:not(:disabled) {
    transform: scale(0.95);
    transition: transform 100ms ease;
}

button:disabled:not(.btn-ad-silver):not(.btn-ad-silver-icon) {
    border-color: #555;
    color: #777;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-label-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-module-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

button:disabled .btn-module-icon {
    opacity: 0.4;
}

.btn-primary {
    background: rgba(0, 243, 255, 0.1);
    justify-content: center;
}

#btn-takeoff.takeoff-ready {
    animation: takeoff-pulse 0.4s ease-in-out infinite alternate;
}

@keyframes takeoff-pulse {
    from { box-shadow: 0 0 4px var(--accent); }
    to   { box-shadow: 0 0 16px var(--accent), 0 0 4px #fff; }
}

.btn-repair {
    border-color: var(--warning);
    color: var(--warning);
}

.btn-repair:hover:not(:disabled) {
    background: rgba(255, 170, 0, 0.15);
    box-shadow: 0 0 15px rgba(255, 170, 0, 0.4);
}

.btn-shield {
    border-color: var(--ai-color);
    color: var(--ai-color);
}

.btn-shield:hover:not(:disabled) {
    background: rgba(176, 102, 255, 0.15);
    box-shadow: 0 0 15px rgba(176, 102, 255, 0.5);
}

.btn-comp {
    border-color: #cc44ff;
    color: #cc44ff;
}

.btn-comp:hover:not(:disabled) {
    background: rgba(204, 68, 255, 0.15);
    box-shadow: 0 0 15px rgba(204, 68, 255, 0.4);
}

.btn-urgent {
    border-color: var(--warning);
    color: var(--warning);
}

.btn-urgent:hover:not(:disabled) {
    background: rgba(255, 170, 0, 0.15);
    box-shadow: 0 0 15px rgba(255, 170, 0, 0.5);
}

.btn-contraband {
    border-color: #ff4488;
    color: #ff4488;
}

.btn-contraband:hover:not(:disabled) {
    background: rgba(255, 68, 136, 0.15);
    box-shadow: 0 0 15px rgba(255, 68, 136, 0.5);
}

.btn-fragile {
    border-color: #88ffcc;
    color: #88ffcc;
}

.btn-fragile:hover:not(:disabled) {
    background: rgba(136, 255, 204, 0.15);
    box-shadow: 0 0 15px rgba(136, 255, 204, 0.5);
}

.btn-normal {
    border-color: #cccccc;
    color: #cccccc;
}

.btn-normal:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* ── Shop tooltip ────────────────────────────────── */

.shop-tooltip {
    position: fixed;
    z-index: 1000;
    max-width: 260px;
    padding: 8px 12px;
    background: rgba(8, 8, 20, 0.95);
    border: 1px solid var(--primary);
    border-radius: 6px;
    color: #ccd;
    font-size: 0.75rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: none;
    font-weight: normal;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    box-shadow: 0 0 12px rgba(0, 243, 255, 0.25);
    text-align: left;
}

.shop-tooltip.visible {
    opacity: 1;
}

/* ── Mobile: inline tooltip on shop buttons ──────── */

.mobile-tooltip-desc {
    display: block;
    width: 100%;
    font-size: 0.7rem;
    font-weight: normal;
    color: #aab;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

[data-tooltip].mobile-expanded {
    flex-direction: column;
    align-items: stretch;
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.15);
}

/* ── Mobile shop buy/info zones ──────────────────── */

.shop-zone-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.shop-zone-buy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 6px 10px;
    margin: -8px -13px -8px 0;
    background: rgba(0, 243, 255, 0.06);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 5px 5px 0;
    min-width: 70px;
}

/* Ad zone proxy inside shop button (between info and buy zones) */
.shop-zone-ad {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    margin: -8px 0;
    min-width: 70px;
    background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 45%, #94a3b8 50%, #cbd5e1 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    font-size: 1.1rem;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.7);
    animation: ad-silver-pulse 2.5s ease-in-out infinite;
}
.shop-zone-ad::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    transform: skewX(-20deg);
    animation: ad-silver-shine 3s infinite;
    pointer-events: none;
}
.shop-zone-ad:active {
    background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 45%, #cbd5e1 50%, #e2e8f0 100%);
}
.shop-zone-ad .zone-label {
    color: #0f172a;
    font-weight: 700;
}

/* Hide original ad button on mobile when zone proxy exists */
.ad-has-zone-proxy {
    display: none !important;
}

.shop-zone-buy:active {
    background: rgba(0, 243, 255, 0.15);
}

button:disabled .shop-zone-buy {
    opacity: 0.35;
    background: rgba(255, 255, 255, 0.02);
}

.zone-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #556;
    font-weight: normal;
    margin-top: 2px;
}

.shop-zone-buy .zone-label {
    color: #0af;
}

button:disabled .shop-zone-buy .zone-label {
    color: #445;
}

/* Tooltip description inside info zone */
.shop-zone-info .mobile-tooltip-desc {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 4px;
    padding-top: 4px;
}

/* When button has zones and is expanded, keep row layout */
[data-tooltip].mobile-expanded.has-shop-zones {
    flex-direction: row;
}

/* ── Shop ────────────────────────────────────────── */

.shop-info {
    margin-bottom: 15px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    text-align: left;
}

.shop-info p {
    margin: 5px 0;
    font-size: 0.9rem;
}

/* Compact station info */
.shop-info-compact {
    padding: 8px;
}
.shop-info-compact #delivery-msg:empty {
    display: none;
}

/* ── Delivery Receipt (order completion banner) ──────────────── */
.delivery-receipt {
    position: relative;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 50%, transparent 100%);
    border-left: 3px solid #10b981;
    border-radius: 4px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    overflow: hidden;
    animation: receipt-slide 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-bottom: 6px;
}
.delivery-receipt.delivery-receipt--golden {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 50%, transparent 100%);
    border-left-color: #ffd700;
}
@keyframes receipt-slide {
    0% { transform: translateX(-20px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
.delivery-receipt::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.2), transparent);
    transform: skewX(-20deg);
    animation: receipt-shine 3s infinite;
    pointer-events: none;
}
.delivery-receipt--golden::after {
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
}
@keyframes receipt-shine {
    0%, 20% { left: -100%; }
    40%, 100% { left: 200%; }
}
.delivery-receipt__icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px;
    color: #34d399;
    font-size: 1.1rem;
}
.delivery-receipt--golden .delivery-receipt__icon {
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.3);
    color: #ffd700;
}
.delivery-receipt__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.delivery-receipt__label {
    font-size: 0.6rem;
    color: #10b981;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: bold;
}
.delivery-receipt--golden .delivery-receipt__label {
    color: #ffd700;
}
.delivery-receipt__cargo {
    font-size: 0.8rem;
    color: #e2e8f0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.delivery-receipt__reward {
    flex-shrink: 0;
    font-weight: bold;
    font-size: 1.15rem;
    color: #34d399;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
    white-space: nowrap;
}
.delivery-receipt--golden .delivery-receipt__reward {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.delivery-receipt__reward-unit {
    font-size: 0.65rem;
    opacity: 0.6;
}
.shop-stat-row {
    display: flex;
    gap: 6px;
}
.shop-stat-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #334;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
}
.shop-stat-label {
    opacity: 0.6;
    font-size: 0.75rem;
}
.shop-stat-unit {
    opacity: 0.5;
    font-size: 0.75rem;
}
.shop-stat-row-secondary {
    margin-top: 4px;
    font-size: 0.8rem;
}
.shop-stat-indicator {
    flex: 1;
    text-align: center;
    padding: 2px 4px;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-terminal {
    background: #050508;
    border: 1px solid #333;
    border-left: 3px solid var(--ai-color);
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    line-height: 1.6;
    letter-spacing: 0.2px;
    color: #ccc;
    display: none;
}

.ai-terminal.active {
    display: block;
}

.ai-terminal strong {
    color: var(--ai-color);
}

.divider {
    height: 1px;
    background: #333;
    margin: 10px 0;
}

#cargo-offers-container {
    margin-bottom: 5px;
}

/* Hide shop sections when on a crater pad — keep only header + cargo info + footer */
.crater-mode .maintenance-row,
.crater-mode .kb-hint,
.crater-mode .accordion-section[data-section="upgrades"],
.crater-mode .accordion-section[data-section="debt"],
.crater-mode #mineral-sell-section,
.crater-mode #mineral-buy-section,
.crater-mode #balance-info,
.crater-mode #tp-shop-notify,
.crater-mode #tp-session-display,
.crater-mode .radio-deck,
.crater-mode #btn-fee-bypass,
.crater-mode #fee-free-badge,
.crater-mode #btn-delivery-double {
    display: none !important;
}

.crater-mode .accordion-header {
    display: none !important;
}

.crater-mode .accordion-content {
    max-height: none !important;
}

/* ── Crater-mode: hide empty right column ───────── */
.crater-mode .col-right {
    display: none !important;
}
.crater-mode .col-left {
    flex: 1 !important;
    max-width: 100% !important;
}

/* ── Mineral Market (Trade Rows) ─────────────────── */

.mineral-hold-bar {
    font-size: 0.75rem;
    color: #8899aa;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.12);
    letter-spacing: 0.06em;
}

.mineral-section-label {
    font-size: 0.7rem;
    color: #667;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 10px 0 6px;
}

.mineral-empty-msg {
    font-size: 0.8rem;
    color: #555;
    margin: 5px 0;
}

.trade-row {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid #888;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 6px;
    overflow: hidden;
    transition: background 0.2s, border-color 0.2s;
}

.trade-row.actionable {
    cursor: pointer;
}

.trade-row.actionable:hover {
    background: rgba(0, 243, 255, 0.08);
    border-top-color: rgba(0, 243, 255, 0.25);
    border-right-color: rgba(0, 243, 255, 0.25);
    border-bottom-color: rgba(0, 243, 255, 0.25);
}

.trade-row.actionable:active {
    transform: scale(0.99);
}

.trade-row.disabled {
    opacity: 0.4;
    filter: grayscale(0.7);
    cursor: default;
}

.trade-info {
    padding: 8px 10px;
    flex-grow: 1;
    min-width: 0;
}

.trade-name {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 3px;
}

.trade-label {
    font-weight: bold;
    color: #e2e8f0;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.trade-weight {
    font-size: 0.7rem;
    color: #556;
}

.trade-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.62rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.trend-badge.trend-high {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.trend-badge.trend-low {
    background: rgba(244, 63, 94, 0.15);
    color: #fb7185;
}

.trend-badge.trend-mid {
    background: rgba(136, 136, 136, 0.12);
    color: #778;
}

.trade-bought-tag {
    font-size: 0.62rem;
    color: #ff8844;
    padding: 1px 5px;
    background: rgba(255, 136, 68, 0.1);
    border-radius: 2px;
}

.trade-hint {
    font-size: 0.68rem;
    color: rgba(100, 180, 220, 0.65);
    margin-top: 2px;
    letter-spacing: 0.02em;
}

.trade-hint.text-profit {
    color: rgba(52, 211, 153, 0.7);
}

.trade-hint.text-loss {
    color: rgba(251, 113, 133, 0.7);
}

.price-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 6px 10px;
    min-width: 85px;
    background: rgba(0, 0, 0, 0.25);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.trade-row.actionable:hover .price-btn {
    background: rgba(0, 0, 0, 0.4);
}

.price-action {
    font-size: 0.65rem;
    color: #778;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.price-stock {
    color: #556;
}

.price-action-soldout {
    font-size: 0.72rem;
    color: #ff6b6b;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.8;
}

.price-value {
    font-weight: bold;
    font-size: 0.95rem;
    line-height: 1;
}

.price-value.text-income {
    color: #34d399;
    text-shadow: 0 0 8px rgba(52, 211, 153, 0.35);
}

.price-value.text-expense {
    color: #fb7185;
    text-shadow: 0 0 8px rgba(251, 113, 133, 0.35);
}

.sell-all-row {
    border-left-color: #34d399 !important;
    margin-top: 2px;
}

.sell-all-row .trade-info {
    display: flex;
    align-items: center;
}

/* ── Inventory Screen ────────────────────────────── */
.inventory-screen {
    width: 760px;
    max-width: 760px;
    top: 50%;
    max-height: calc(100vh - 80px);
    padding: 0;
    background: rgba(10, 20, 35, 0.85);
    border: 1px solid var(--primary);
    box-shadow: 0 0 25px rgba(0, 243, 255, 0.15), inset 0 0 25px rgba(0, 243, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
    font-family: 'JetBrains Mono', monospace;
}

/* Scanline overlay */
.inv-scanlines {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.12) 2px,
        rgba(0, 0, 0, 0.12) 4px
    );
    pointer-events: none;
    z-index: 2;
}

/* Header */
.inv-header {
    text-align: center;
    padding: 18px 24px 14px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.3);
}

.inv-header h2 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.2em;
    color: var(--primary);
    text-shadow: 0 0 8px var(--primary);
    text-transform: uppercase;
    margin: 0;
}

.inv-ship-id {
    font-size: 0.7rem;
    color: rgba(0, 243, 255, 0.5);
    letter-spacing: 0.15em;
    margin-top: 4px;
}

/* Two-column grid */
.inv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 16px 20px;
}

.inv-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
}

/* Panel blocks */
.inv-panel {
    background: rgba(0, 243, 255, 0.03);
    border: 1px solid rgba(0, 243, 255, 0.12);
    border-radius: 4px;
    padding: 12px;
}

.inv-panel-grow {
    flex: 1;
}

.inv-panel-title {
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.15);
    display: flex;
    align-items: center;
    gap: 6px;
}

.inv-icon {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Data rows */
.inv-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
    font-size: 0.8rem;
}

.inv-row-dim {
    padding-top: 5px;
    border-top: 1px solid rgba(0, 243, 255, 0.06);
}

.inv-row-dim .inv-label { color: rgba(0, 243, 255, 0.35); }
.inv-row-dim .inv-value { color: rgba(0, 243, 255, 0.6); }

.inv-row-xs {
    font-size: 0.7rem;
    margin-bottom: 4px;
}

.inv-label {
    color: rgba(0, 243, 255, 0.55);
}

.inv-label-sm {
    color: rgba(0, 243, 255, 0.6);
    font-size: 0.7rem;
    text-transform: uppercase;
}

.inv-value {
    color: var(--primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-value-big {
    font-size: 1.15rem;
    text-shadow: 0 0 5px var(--primary);
}

.inv-value-danger {
    color: var(--danger);
    font-weight: bold;
    font-size: 1.1rem;
    text-shadow: 0 0 6px var(--danger);
}

.inv-value-cleared {
    color: var(--success);
    font-weight: bold;
    text-shadow: 0 0 5px var(--success);
}

.inv-unit {
    font-size: 0.65rem;
    opacity: 0.6;
}

.inv-glow {
    text-shadow: 0 0 5px var(--primary);
}

/* Progress bar */
.inv-progress-track {
    width: 100%;
    height: 6px;
    background: rgba(0, 243, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(0, 243, 255, 0.15);
    margin-bottom: 6px;
}

.inv-progress-bar {
    height: 100%;
    background: rgba(0, 243, 255, 0.7);
    box-shadow: 0 0 8px var(--primary);
    transition: width 0.3s ease;
}

/* Hold sections */
.inv-hold-section {
    margin-bottom: 12px;
}

.inv-hold-section:last-child {
    margin-bottom: 0;
}

/* Empty state */
.inv-empty {
    border: 1px dashed rgba(0, 243, 255, 0.2);
    color: rgba(0, 243, 255, 0.3);
    background: rgba(0, 0, 0, 0.2);
    padding: 8px;
    border-radius: 4px;
    text-align: center;
    font-size: 0.75rem;
    font-style: italic;
}

/* Cargo display */
.inv-cargo-type {
    font-size: 0.8rem;
    font-weight: bold;
    color: #ddd;
    margin-bottom: 2px;
}

.inv-cargo-lore {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    color: rgba(0, 243, 255, 0.4);
    font-style: italic;
    line-height: 1.5;
    letter-spacing: 0.2px;
    margin-bottom: 4px;
}

.inv-cargo-info {
    font-size: 0.75rem;
    color: #bbb;
    padding: 1px 0;
}

/* Mineral list */
.inv-mineral-list {
    max-height: 140px;
    overflow-y: auto;
    margin-bottom: 6px;
}


.inv-mineral-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    font-size: 0.6rem;
    color: rgba(0, 243, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.1);
}

.inv-mineral-hdr-name { flex: 1; }
.inv-mineral-hdr-weight { min-width: 40px; text-align: right; }
.inv-mineral-hdr-dump { min-width: 80px; text-align: center; }

.inv-mineral-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    font-size: 0.75rem;
    color: #ccc;
    border-bottom: 1px solid rgba(0, 243, 255, 0.06);
}

.inv-mineral-item:last-child {
    border-bottom: none;
}

.inv-mineral-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 4px currentColor;
}

.inv-mineral-name { flex: 1; }

.inv-mineral-weight {
    color: rgba(0, 243, 255, 0.5);
    font-size: 0.7rem;
    min-width: 40px;
    text-align: right;
}

.inv-mineral-actions-inline {
    display: flex;
    gap: 3px;
    min-width: 80px;
    justify-content: flex-end;
}

.inv-mineral-drop {
    background: none;
    border: 1px solid rgba(255, 51, 102, 0.3);
    color: rgba(255, 51, 102, 0.7);
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
}

.inv-mineral-drop:hover {
    background: rgba(255, 51, 102, 0.1);
    border-color: var(--danger);
    color: var(--danger);
}

.inv-mineral-drop-all {
    border-color: rgba(255, 51, 102, 0.5);
    color: var(--danger);
}

/* Jettison / drop buttons */
.inv-mineral-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.inv-btn-jettison {
    flex: 1;
    background: none;
    border: 1px solid rgba(255, 51, 102, 0.3);
    color: rgba(255, 51, 102, 0.7);
    font-size: 0.7rem;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.inv-btn-jettison:hover {
    background: rgba(255, 51, 102, 0.1);
    border-color: var(--danger);
    color: var(--danger);
}

.inv-btn-jettison-all {
    border-color: rgba(255, 51, 102, 0.5);
    color: var(--danger);
}

.inv-btn-jettison-all:hover {
    background: rgba(255, 51, 102, 0.15);
}

.inv-btn-jettison-cargo {
    background: none;
    border: 1px solid rgba(255, 51, 102, 0.3);
    color: rgba(255, 51, 102, 0.7);
    font-size: 0.7rem;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 6px;
    width: 100%;
    font-family: inherit;
    transition: all 0.15s ease;
}

.inv-btn-jettison-cargo:hover {
    background: rgba(255, 51, 102, 0.1);
    border-color: var(--danger);
    color: var(--danger);
}

/* Equipment list */
.inv-equip-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.inv-equip-slot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 243, 255, 0.04);
    padding: 7px 10px;
    border-radius: 4px;
    border: 1px solid rgba(0, 243, 255, 0.1);
    font-size: 0.8rem;
}

.inv-equip-slot .inv-equip-label {
    color: #ddd;
}

.inv-equip-badges {
    display: flex;
    gap: 5px;
}

.inv-badge {
    background: rgba(0, 243, 255, 0.12);
    border: 1px solid rgba(0, 243, 255, 0.25);
    color: var(--primary);
    padding: 1px 7px;
    border-radius: 3px;
    font-size: 0.65rem;
    letter-spacing: 0.05em;
}

/* Empty equipment slot */
.inv-equip-empty {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px dashed rgba(0, 243, 255, 0.2);
    color: rgba(0, 243, 255, 0.3);
    background: rgba(0, 0, 0, 0.15);
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.inv-equip-empty span:last-child {
    font-size: 0.65rem;
}

/* Insurance special row */
.inv-equip-insurance {
    margin-top: 8px;
    border-top: 1px solid rgba(0, 243, 255, 0.1);
    padding-top: 8px;
}

.inv-equip-insurance .inv-equip-label {
    color: rgba(0, 243, 255, 0.5);
}

.inv-insurance-active {
    color: var(--success);
}

.inv-insurance-none {
    color: rgba(0, 243, 255, 0.35);
    font-style: italic;
}

/* Footer */
.inv-footer {
    padding: 12px 20px 16px;
    border-top: 1px solid rgba(0, 243, 255, 0.3);
}

.inv-btn-close {
    width: 100%;
    padding: 10px;
    background: linear-gradient(180deg, rgba(0, 243, 255, 0.08) 0%, transparent 100%);
    border: 1px solid var(--primary);
    color: var(--primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.inv-btn-close:hover {
    background: var(--primary);
    color: #000;
    box-shadow: 0 0 15px var(--primary);
}

/* Responsive: single column on mobile — .screen.inventory-screen for specificity over .screen */
@media (max-width: 768px), (pointer: coarse) {
    .screen.inventory-screen {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        transform: none;
        border-radius: 0;
        border: none;
        box-sizing: border-box;
        z-index: 50;
        padding: 0;
    }
    .inv-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px 12px;
    }
    .inv-header {
        padding: 10px 12px 8px;
    }
    .inv-header h2 {
        font-size: 1rem;
        letter-spacing: 0.12em;
    }
    .inv-ship-id {
        font-size: 0.65rem;
    }
    .inv-panel {
        padding: 8px 10px;
    }
    .inv-panel-title {
        font-size: 0.75rem;
        margin-bottom: 6px;
        padding-bottom: 4px;
    }
    .inv-row {
        font-size: 0.8rem;
    }
    .inv-footer {
        padding: 8px 12px 12px;
    }
    .inv-btn-close {
        padding: 12px;
        font-size: 0.9rem;
    }
}

/* Extra-small portrait phones (320px–380px) */
@media (max-width: 380px) {
    .screen.inventory-screen {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .inv-header {
        padding: 8px 8px 6px;
    }
    .inv-header h2 {
        font-size: 0.85rem;
        letter-spacing: 0.06em;
    }
    .inv-ship-id {
        font-size: 0.55rem;
        letter-spacing: 0.05em;
    }
    .inv-grid {
        gap: 8px;
        padding: 8px 6px;
    }
    .inv-panel {
        padding: 6px 6px;
    }
    .inv-panel-title {
        font-size: 0.68rem;
        margin-bottom: 4px;
        padding-bottom: 3px;
        gap: 4px;
    }
    .inv-row {
        font-size: 0.72rem;
        flex-wrap: wrap;
        gap: 0 6px;
    }
    .inv-value-big {
        font-size: 0.95rem;
    }
    .inv-value-danger {
        font-size: 0.9rem;
        word-break: break-all;
    }
    .inv-equip-slot,
    .inv-equip-empty {
        padding: 5px 6px;
        font-size: 0.7rem;
        gap: 4px;
    }
    .inv-equip-slot {
        flex-wrap: wrap;
    }
    .inv-equip-badges {
        gap: 3px;
        flex-wrap: wrap;
    }
    .inv-badge {
        padding: 1px 4px;
        font-size: 0.58rem;
    }
    .inv-mineral-header {
        font-size: 0.55rem;
    }
    .inv-mineral-item {
        font-size: 0.68rem;
        gap: 4px;
        padding: 2px 2px;
        flex-wrap: wrap;
    }
    .inv-mineral-hdr-dump,
    .inv-mineral-actions-inline {
        min-width: 60px;
    }
    .inv-mineral-drop {
        font-size: 0.55rem;
        padding: 1px 3px;
    }
    .inv-empty {
        font-size: 0.68rem;
        padding: 6px;
    }
    .inv-footer {
        padding: 6px 8px 10px;
    }
    .inv-btn-close {
        padding: 10px;
        font-size: 0.8rem;
    }
    .inv-label-sm {
        font-size: 0.62rem;
    }
    .inv-cargo-type {
        font-size: 0.72rem;
    }
    .inv-cargo-lore {
        font-size: 0.62rem;
    }
    .inv-cargo-info {
        font-size: 0.68rem;
    }
    /* Conditions: allow text wrapping */
    .inv-condition {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        gap: 4px 6px;
        padding: 4px 6px;
        font-size: 0.68rem;
    }
    .inv-cond-name {
        white-space: normal;
        word-break: break-word;
    }
    .inv-cond-effect {
        white-space: normal;
        word-break: break-word;
        margin-left: 0;
        width: 100%;
        font-size: 0.62rem;
    }
}

/* Landscape mobile: two columns side by side */
@media (max-width: 900px) and (orientation: landscape) and (pointer: coarse) {
    .screen.inventory-screen {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        transform: none;
        border-radius: 0;
        border: none;
        box-sizing: border-box;
        z-index: 50;
        padding: 0;
    }
    .inv-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 6px 10px;
    }
    .inv-header {
        padding: 6px 10px 4px;
    }
    .inv-header h2 {
        font-size: 0.9rem;
    }
    .inv-panel {
        padding: 6px 8px;
    }
    .inv-panel-title {
        font-size: 0.7rem;
        margin-bottom: 4px;
    }
    .inv-footer {
        padding: 4px 10px 6px;
    }
    .inv-btn-close {
        padding: 8px;
    }
}

/* ── Placement ───────────────────────────────────── */

#placement-preview {
    display: block;
    margin: 0 auto;
    border: 1px solid #333;
    border-radius: 8px;
    background: #050508;
}

.place-btns {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.place-btns button {
    flex: 1;
}

/* ── Settings Block ─────────────────────────────────── */

/* .settings-block removed — replaced by .settings-group */
.slider-row { display: flex; flex-direction: column; gap: 8px; }
.slider-header { display: flex; justify-content: space-between; font-size: 0.9rem; color: #aaddff; }
.slider-value { color: #00f3ff; font-weight: bold; }

/* Custom Range Slider */
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track {
    width: 100%; height: 6px; cursor: pointer;
    background: #1a2233; border-radius: 3px; border: 1px solid #334;
}
input[type=range]::-webkit-slider-thumb {
    height: 16px; width: 16px; border-radius: 50%;
    background: #00f3ff; cursor: pointer; -webkit-appearance: none;
    margin-top: -6px; box-shadow: 0 0 10px rgba(0, 243, 255, 0.8);
}

/* ── Mobile touch controls ─────────────────────────── */

#touch-controls {
    display: none;
    position: fixed;
    bottom: env(safe-area-inset-bottom, 0px);
    left: 0;
    width: 100%;
    height: calc(72px * var(--ctrl-scale));
    z-index: 5;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Tilt slider */
#tilt-slider {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: calc(52px * var(--ctrl-scale));
    pointer-events: auto;
    touch-action: none;
}

@media (orientation: portrait) {
    #tilt-slider {
        width: 100%;
        left: 0;
        transform: none;
        bottom: 0;
    }
}

#tilt-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

#tilt-track::before,
#tilt-track::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-50%);
}
#tilt-track::before { left: -1px; }
#tilt-track::after  { right: -1px; }

/* Center notch */
#tilt-track::before {
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 12px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.2);
}
#tilt-track::after {
    right: auto;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 3px;
}

#tilt-thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(36px * var(--ctrl-scale));
    height: calc(36px * var(--ctrl-scale));
    border-radius: 50%;
    background: rgba(0, 243, 255, 0.15);
    border: 2px solid rgba(0, 243, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: left 0.06s linear, background 0.15s, box-shadow 0.15s;
    box-shadow: 0 0 8px rgba(0, 243, 255, 0.2);
}

#tilt-thumb.active {
    background: rgba(0, 243, 255, 0.3);
    border-color: rgba(0, 243, 255, 0.8);
    box-shadow: 0 0 16px rgba(0, 243, 255, 0.5);
    transition: none;
}

#tilt-label {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    font: 0.55rem 'JetBrains Mono', monospace;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 0.1em;
    white-space: nowrap;
    pointer-events: none;
}

/* Rotation buttons (alternative to slider) */
#rotate-buttons {
    position: absolute;
    bottom: 6px;
    left: 10px;
    height: calc(72px * var(--ctrl-scale));
    display: flex;
    gap: 6px;
    pointer-events: none;
}

.rotate-btn {
    width: calc(74px * var(--ctrl-scale));
    height: calc(72px * var(--ctrl-scale));
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid rgba(0, 243, 255, 0.4);
    color: rgba(0, 243, 255, 0.8);
    font-size: calc(28px * var(--ctrl-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.rotate-btn.active {
    background: rgba(0, 243, 255, 0.15);
    border-color: rgba(0, 243, 255, 0.8);
    box-shadow: 0 0 18px rgba(0, 243, 255, 0.4);
}

/* Joystick pad (thrust + rotation combined) */
#joystick-pad {
    position: absolute;
    bottom: 4px;
    right: 10px;
    width: 55%;
    height: calc(82px * var(--ctrl-scale));
    display: flex;
    pointer-events: auto;
    touch-action: none;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 243, 255, 0.2);
    overflow: hidden;
}

.joy-half {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(26px * var(--ctrl-scale));
    color: rgba(0, 243, 255, 0.3);
    user-select: none;
    -webkit-user-select: none;
}

.joy-half-left  { border-right: 1px solid rgba(0, 243, 255, 0.08); }

/* Horizontal midline — thrust boundary */
.joy-midline {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 50%;
    height: 1px;
    background: rgba(0, 243, 255, 0.15);
    pointer-events: none;
}

/* Thrust indicator in top half */
.joy-thrust-label {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: rgba(0, 243, 255, 0.2);
    pointer-events: none;
}

#joystick-pad.joy-thrusting {
    border-color: rgba(0, 243, 255, 0.5);
}

#joystick-pad.joy-thrusting .joy-thrust-label {
    color: rgba(0, 243, 255, 0.7);
}

#joystick-pad .joy-half.active {
    background: rgba(0, 243, 255, 0.08);
}

/* Control picker overlay */
.control-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    backdrop-filter: blur(6px);
}

.control-picker-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 14px;
    max-width: 540px;
    width: 100%;
}

.control-picker-title {
    font: bold 1.05rem 'JetBrains Mono', monospace;
    color: #00f3ff;
    text-align: center;
    margin-bottom: 4px;
    letter-spacing: 0.05em;
}

.control-picker-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.control-pick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 10px 10px;
    background: rgba(5, 15, 25, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
    text-transform: none;
    letter-spacing: 0;
    font-family: 'JetBrains Mono', monospace;
    width: 100%;
    text-align: center;
}

.control-pick-card:active {
    transform: scale(0.97);
}

.control-pick-card:hover {
    border-color: rgba(0, 243, 255, 0.5);
    box-shadow: 0 0 18px rgba(0, 243, 255, 0.2);
}

.pick-card-icon {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 2px;
}

.pick-card-name {
    font-weight: bold;
    font-size: 0.95rem;
    color: #fff;
    letter-spacing: 0.04em;
}

.pick-card-desc {
    font-size: 0.72rem;
    color: rgba(200, 220, 240, 0.6);
    line-height: 1.35;
}

.pick-card-badge {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 8px;
    margin-top: 2px;
    white-space: nowrap;
}

.pick-badge-beginner {
    background: rgba(255, 200, 0, 0.15);
    color: #ffd54f;
    border: 1px solid rgba(255, 200, 0, 0.3);
}

.pick-badge-vertical {
    background: rgba(0, 200, 255, 0.1);
    color: #80deea;
    border: 1px solid rgba(0, 200, 255, 0.25);
}

.pick-badge-slider {
    background: rgba(120, 255, 120, 0.1);
    color: #a5d6a7;
    border: 1px solid rgba(120, 255, 120, 0.2);
}

.control-picker-hint {
    font: 0.68rem 'JetBrains Mono', monospace;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    margin-top: 4px;
}

/* ── Control picker: landscape phone — horizontal row ── */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {
    .control-picker-box { max-width: 700px; padding: 10px; gap: 6px; }
    .control-picker-title { font-size: 0.85rem; margin-bottom: 2px; }
    .control-picker-cards { flex-direction: row; gap: 6px; }
    .control-pick-card { padding: 8px 6px 6px; gap: 2px; }
    .pick-card-icon { font-size: 1.2rem; }
    .pick-card-name { font-size: 0.8rem; }
    .pick-card-desc { font-size: 0.62rem; }
    .pick-card-badge { font-size: 0.58rem; }
    .control-picker-hint { font-size: 0.58rem; }
}

/* ── Control picker: tablet — wider cards in row ── */
@media (pointer: coarse) and (min-width: 600px) and (min-height: 500px) {
    .control-picker-box { max-width: 680px; padding: 24px 20px; }
    .control-picker-title { font-size: 1.15rem; margin-bottom: 8px; }
    .control-picker-cards { flex-direction: row; gap: 10px; }
    .control-pick-card { padding: 16px 12px 12px; gap: 6px; }
    .pick-card-icon { font-size: 2rem; }
    .pick-card-name { font-size: 1.05rem; }
    .pick-card-desc { font-size: 0.8rem; }
    .pick-card-badge { font-size: 0.72rem; padding: 3px 10px; }
    .control-picker-hint { font-size: 0.75rem; }
}

/* ── Control picker: small phones ── */
@media (max-width: 360px) {
    .control-picker-box { padding: 12px 8px; gap: 6px; }
    .control-picker-title { font-size: 0.9rem; }
    .control-pick-card { padding: 8px 6px 6px; gap: 2px; }
    .pick-card-icon { font-size: 1.3rem; }
    .pick-card-name { font-size: 0.85rem; }
    .pick-card-desc { font-size: 0.65rem; }
    .pick-card-badge { font-size: 0.6rem; }
}

/* ── Contextual control hint (after picker) ── */
.control-hint-overlay {
    position: fixed;
    inset: 0;
    z-index: 210;
    pointer-events: auto;
}

.control-hint-bubble {
    position: fixed;
    background: rgba(0, 20, 35, 0.92);
    border: 1px solid rgba(0, 243, 255, 0.5);
    border-radius: 8px;
    padding: 8px 14px;
    font: 0.8rem 'JetBrains Mono', monospace;
    color: #c8e6ff;
    white-space: nowrap;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
    animation: control-hint-in 0.3s ease-out;
}

.control-hint-fade .control-hint-bubble {
    opacity: 0;
    transition: opacity 0.3s;
}

@keyframes control-hint-in {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Mobile-only settings button */
.btn-mobile-only {
    display: none;
}

/* Drill button (mobile) */
.touch-btn-drill {
    display: none;
    position: absolute;
    bottom: calc(80px * var(--ctrl-scale));
    left: 50%;
    transform: translateX(-50%);
    min-width: calc(120px * var(--ctrl-scale));
    height: calc(48px * var(--ctrl-scale));
    border-radius: calc(24px * var(--ctrl-scale));
    background: rgba(0, 180, 60, 0.35);
    border: 2px solid rgba(0, 255, 100, 0.5);
    font-size: calc(16px * var(--ctrl-scale));
    color: #00ff66;
    align-items: center;
    justify-content: center;
    gap: 6px;
    pointer-events: auto;
    z-index: 7;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    font-family: var(--ff);
    font-weight: 600;
    text-shadow: 0 0 6px rgba(0, 255, 100, 0.5);
    box-shadow: 0 0 12px rgba(0, 255, 100, 0.2);
    animation: drill-btn-pulse 2s ease-in-out infinite;
}

.touch-btn-drill.visible {
    display: flex;
}

.touch-btn-drill.active {
    background: rgba(0, 255, 100, 0.4);
    border-color: #00ff66;
    box-shadow: 0 0 18px rgba(0, 255, 100, 0.5);
}

@keyframes drill-btn-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(0, 255, 100, 0.2); }
    50% { box-shadow: 0 0 20px rgba(0, 255, 100, 0.4); }
}

/* Inventory button (mobile) */
.touch-btn-inventory {
    display: none;
    position: fixed;
    top: 90px;
    right: max(18px, env(safe-area-inset-right));
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 243, 255, 0.35);
    color: #fff;
    font-size: 18px;
    justify-content: center;
    align-items: center;
    z-index: 10;
    pointer-events: auto;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}
.touch-btn-inventory.visible {
    display: flex;
}

/* Thrust feedback overlay */
#thrust-indicator {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
    border: 2px solid transparent;
    transition: border-color 0.1s;
}
#thrust-indicator.active {
    border-color: rgba(255, 140, 0, 0.15);
}

/* Landscape: narrower slider, left-aligned for left thumb */
@media (orientation: landscape) and (pointer: coarse) {
    #tilt-slider { width: 33%; left: 14px; transform: none; }
}

/* Portrait: full-width joystick */
@media (orientation: portrait) and (pointer: coarse) {
    #joystick-pad { width: calc(100% - 20px); right: 10px; left: 10px; }
}

/* ── Controls side flip (right-handed layout) ─────── */
#touch-controls.controls-right #tilt-slider {
    left: auto; right: 14px; transform: none;
}
#touch-controls.controls-right #rotate-buttons {
    left: auto; right: 10px;
}
#touch-controls.controls-right #joystick-pad {
    right: auto; left: 10px;
}
@media (orientation: landscape) and (pointer: coarse) {
    #touch-controls.controls-right #tilt-slider { left: auto; right: 14px; }
}
@media (orientation: portrait) and (pointer: coarse) {
    #touch-controls.controls-right #joystick-pad { right: auto; left: 10px; }
}

/* Legacy ping-float hidden */
.ping-float { display: none !important; }

/* ── Keyboard controls bar (PC bottom) ────────────── */
#kb-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font: 0.7rem 'JetBrains Mono', monospace;
    letter-spacing: 0.05em;
    padding: 4px 0 max(4px, env(safe-area-inset-bottom));
    background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 100%);
    color: rgba(255,255,255,0.4);
    pointer-events: none;
    z-index: 50;
    display: none;
}
#kb-bar .kb-key {
    color: var(--primary);
    opacity: 0.7;
    font-weight: bold;
}
#kb-bar .kb-sep {
    margin: 0 6px;
    opacity: 0.3;
}
@media (max-width: 600px) {
    #kb-bar { display: none !important; }
}

/* ── Gamepad toast ─────────────────────────────────────────────────────── */
#gamepad-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 243, 255, 0.15);
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 8px 20px;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    font-family: 'JetBrains Mono', monospace;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 500;
}
#gamepad-toast.visible {
    opacity: 1;
}

@media (max-width: 768px), (pointer: coarse) {
    #touch-controls {
        display: block;
        z-index: 95;
    }

    .screen {
        width: 85%;
        padding: 15px;
        top: 50%;
    }

    .menu-top-bar {
        width: 85%;
    }

    .shop-header {
        padding-bottom: 8px;
    }

    .shop-body {
        padding: 0;
    }

    .shop-footer {
        padding-top: 8px;
    }

    #hud {
        padding: max(5px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 5px max(10px, env(safe-area-inset-left));
    }

    .hud-stat {
        font-size: 0.85rem;
    }

    .bar-container {
        width: 60px;
    }

    /* Hide cargo name badge on mobile — just show count (1/1, 2/2) */
    #cargo-type-badge {
        display: none !important;
    }

    /* Push storm/nav warnings below HUD info rows */
    #storm-warning {
        top: 95px;
        font-size: 1rem;
    }
}

/* ── Start / Menu screen ─────────────────────────────────────────── */

#screen-start {
    position: absolute;
    background: radial-gradient(ellipse at center, rgba(10, 15, 25, 0.92) 0%, rgba(5, 10, 18, 0.80) 60%, transparent 100%);
    border: 1px solid rgba(0, 243, 255, 0.12);
    border-top: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(0, 243, 255, 0.03);
    /* Light darken only, no blur for performance */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    min-width: 320px;
    padding: 20px 40px 30px;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
}

/* Subtle scanlines overlay */
#screen-start::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.06) 2px,
        rgba(0, 0, 0, 0.06) 4px
    );
    border-radius: inherit;
    z-index: 0;
}

.menu-poster {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    pointer-events: none;
    z-index: -1;
    border-radius: inherit;
}

/* Menu mute button */
#menu-mute {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 1.4rem;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s, text-shadow 0.2s;
    user-select: none;
    -webkit-user-select: none;
    z-index: 2;
}

#menu-mute:hover {
    opacity: 1;
    text-shadow: 0 0 12px var(--primary);
}

.menu-logo {
    display: block;
    width: 70%;
    max-width: 340px;
    height: auto;
    margin: 0 auto 6px;
    filter: drop-shadow(0 0 24px rgba(255, 160, 60, 0.45)) drop-shadow(0 0 12px rgba(0, 220, 255, 0.3));
    pointer-events: none;
}

#menu-tagline {
    font-size: clamp(0.75rem, 1.8vw, 1rem);
    color: rgba(180, 220, 255, 0.75);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-shadow: 0 0 12px rgba(0, 160, 255, 0.4);
}

#beta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    padding: 4px 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--warning);
    border: 1px solid rgba(255, 170, 0, 0.4);
    border-radius: 4px;
    background: rgba(255, 170, 0, 0.08);
    text-shadow: 0 0 8px rgba(255, 170, 0, 0.5);
    animation: betaPulse 3s ease-in-out infinite;
}

#beta-badge .beta-version {
    font-size: 0.6rem;
    color: rgba(120, 160, 200, 0.5);
    letter-spacing: 0.1em;
}

@keyframes betaPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 170, 0, 0.15); }
    50%      { box-shadow: 0 0 20px rgba(255, 170, 0, 0.3); }
}

.discord-link {
    display: inline-block;
    margin-bottom: 0;
    padding: 3px 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: #7289da;
    border: 1px solid rgba(114, 137, 218, 0.35);
    border-radius: 4px;
    text-decoration: none;
    background: rgba(114, 137, 218, 0.06);
    transition: all 0.2s;
}

.discord-link:hover {
    background: rgba(114, 137, 218, 0.15);
    box-shadow: 0 0 14px rgba(114, 137, 218, 0.35);
    color: #99aaf5;
}

.privacy-link {
    display: inline-block;
    margin-top: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    color: rgba(120, 160, 200, 0.45);
    text-decoration: none;
    transition: color 0.2s;
}

.privacy-link:hover {
    color: rgba(120, 160, 200, 0.7);
}

#screen-start .btn-primary {
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    padding: 18px 20px;
    font-size: 1.25rem;
    letter-spacing: 0.15em;
    border-width: 2px;
    background: linear-gradient(90deg, rgba(0, 243, 255, 0.08) 0%, rgba(0, 243, 255, 0.22) 50%, rgba(0, 243, 255, 0.08) 100%);
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.25), inset 0 0 18px rgba(0, 243, 255, 0.06);
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
    justify-content: center;
    margin-bottom: 0;
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
    animation: btnPulse 2.5s ease-in-out infinite;
}

/* Sweeping shimmer effect */
#screen-start .btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transform: skewX(-20deg);
    transition: 0s;
    pointer-events: none;
}
#screen-start .btn-primary:hover::after {
    left: 200%;
    transition: 0.7s ease-in-out;
}

@keyframes btnPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(0,243,255,0.25), inset 0 0 18px rgba(0,243,255,0.06); }
    50%      { box-shadow: 0 0 32px rgba(0,243,255,0.45), inset 0 0 24px rgba(0,243,255,0.12); }
}

/* ── Premium buttons (two side-by-side cards) ──────── */
#screen-start .menu-row-premium {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
}
#screen-start .btn-premium {
    position: relative;
    overflow: hidden;
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px 12px;
    font-family: 'Inter', sans-serif;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 0;
    transition: transform 0.15s, box-shadow 0.25s, border-color 0.25s;
    -webkit-tap-highlight-color: transparent;
}
#screen-start .btn-premium .premium-icon {
    font-size: 1.5rem;
    line-height: 1;
    filter: drop-shadow(0 0 6px currentColor);
}
#screen-start .btn-premium .premium-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.25;
    opacity: 0.9;
}
#screen-start .btn-premium .premium-price {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-top: 2px;
}
/* Ad-Free — silver/ice theme */
#screen-start .btn-premium-adfree {
    color: #c0d8f0;
    border: 1.5px solid rgba(160, 200, 240, 0.35);
    background: linear-gradient(160deg, rgba(100, 160, 220, 0.08) 0%, rgba(140, 200, 255, 0.18) 50%, rgba(100, 160, 220, 0.06) 100%);
    box-shadow: 0 0 18px rgba(120, 180, 240, 0.15), inset 0 0 20px rgba(120, 180, 240, 0.04);
    text-shadow: 0 0 8px rgba(140, 200, 255, 0.4);
}
#screen-start .btn-premium-adfree .premium-price {
    color: #e0efff;
}
/* Full Premium — gold/amber theme */
#screen-start .btn-premium-full {
    color: #ffd050;
    border: 1.5px solid rgba(255, 183, 0, 0.45);
    background: linear-gradient(160deg, rgba(255, 183, 0, 0.06) 0%, rgba(255, 200, 50, 0.22) 50%, rgba(255, 183, 0, 0.06) 100%);
    box-shadow: 0 0 22px rgba(255, 183, 0, 0.2), inset 0 0 20px rgba(255, 183, 0, 0.05);
    text-shadow: 0 0 10px rgba(255, 183, 0, 0.45);
    animation: btnPulseGold 3s ease-in-out infinite;
}
#screen-start .btn-premium-full .premium-price {
    color: #ffe080;
}
/* "Best value" badge */
#screen-start .premium-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    padding: 2px 8px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1a1000;
    background: linear-gradient(90deg, #ffb700, #ffd260);
    border-radius: 0 9px 0 8px;
    line-height: 1.6;
}
/* Disabled state */
#screen-start .btn-premium:disabled {
    opacity: 0.45;
    animation: none;
    filter: grayscale(0.4);
}
/* Shimmer sweep on touch */
#screen-start .btn-premium::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}
#screen-start .btn-premium:not(:disabled):active::after {
    left: 200%;
    transition: 0.5s ease-in-out;
}
#screen-start .btn-premium:not(:disabled):active {
    transform: scale(0.96);
}
#screen-start .btn-premium-adfree:not(:disabled):active {
    box-shadow: 0 0 30px rgba(120, 180, 240, 0.4), inset 0 0 20px rgba(120, 180, 240, 0.1);
    border-color: rgba(160, 200, 240, 0.7);
}
#screen-start .btn-premium-full:not(:disabled):active {
    box-shadow: 0 0 35px rgba(255, 183, 0, 0.5), inset 0 0 24px rgba(255, 183, 0, 0.12);
    border-color: rgba(255, 200, 50, 0.8);
}
@keyframes btnPulseGold {
    0%, 100% { box-shadow: 0 0 22px rgba(255,183,0,0.2), inset 0 0 20px rgba(255,183,0,0.05); }
    50%      { box-shadow: 0 0 32px rgba(255,183,0,0.35), inset 0 0 24px rgba(255,183,0,0.1); }
}

/* ── Storm warning ──────────────────────────────── */
#storm-warning {
    display: none;
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.4rem;
    font-weight: bold;
    color: #ff4400;
    text-shadow: 0 0 15px rgba(255,68,0,0.8);
    letter-spacing: 0.15em;
    z-index: 100;
    text-align: center;
    pointer-events: none;
    animation: stormBlink 0.5s ease-in-out infinite;
}
@keyframes stormBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ── Radio intercept panel ─────────────────────────── */
#radio-intercept,
#radio-intercept-mission {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 90;
    pointer-events: none;
    width: auto;
    max-width: 420px;
}
#radio-intercept .radio-panel,
#radio-intercept-mission .radio-panel {
    display: flex;
    align-items: flex-start;
    background: linear-gradient(90deg, rgba(5,10,15,0.9) 0%, rgba(5,10,15,0.4) 100%);
    backdrop-filter: blur(4px);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    border-radius: 4px;
    padding: 10px 14px;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.4s ease-out;
}
#radio-intercept .radio-panel.active,
#radio-intercept-mission .radio-panel.active {
    opacity: 1;
}
/* Colored left border per faction */
#radio-intercept .radio-panel.cat-trucker, #radio-intercept-mission .radio-panel.cat-trucker { border-left: 3px solid #eab308; }
#radio-intercept .radio-panel.cat-corp, #radio-intercept-mission .radio-panel.cat-corp       { border-left: 3px solid #00f3ff; }
#radio-intercept .radio-panel.cat-system, #radio-intercept-mission .radio-panel.cat-system   { border-left: 3px solid #00f3ff; }
#radio-intercept .radio-panel.cat-rebel, #radio-intercept-mission .radio-panel.cat-rebel     { border-left: 3px solid #f43f5e; }
#radio-intercept .radio-panel.cat-makvil, #radio-intercept-mission .radio-panel.cat-makvil   { border-left: 3px solid #10b981; }
/* Equalizer */
#radio-intercept .radio-eq,
#radio-intercept-mission .radio-eq {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
    width: 20px;
    margin-top: 4px;
    flex-shrink: 0;
}
#radio-intercept .eq-bar,
#radio-intercept-mission .eq-bar {
    width: 3px;
    border-radius: 1px;
    background-color: currentColor;
    animation: radio-eq-bounce 0.5s ease-in-out infinite alternate;
}
#radio-intercept .eq-bar:nth-child(1), #radio-intercept-mission .eq-bar:nth-child(1) { animation-delay: 0.1s; height: 40%; }
#radio-intercept .eq-bar:nth-child(2), #radio-intercept-mission .eq-bar:nth-child(2) { animation-delay: 0.3s; height: 80%; }
#radio-intercept .eq-bar:nth-child(3), #radio-intercept-mission .eq-bar:nth-child(3) { animation-delay: 0.0s; height: 60%; }
#radio-intercept .eq-bar:nth-child(4), #radio-intercept-mission .eq-bar:nth-child(4) { animation-delay: 0.2s; height: 100%; }
@keyframes radio-eq-bounce { 0% { transform: scaleY(0.3); } 100% { transform: scaleY(1); } }
#radio-intercept .radio-panel:not(.active) .eq-bar,
#radio-intercept-mission .radio-panel:not(.active) .eq-bar { animation: none; height: 10%; }
/* Equalizer colors per faction */
#radio-intercept .cat-trucker .eq-bar, #radio-intercept-mission .cat-trucker .eq-bar { color: #eab308; }
#radio-intercept .cat-corp .eq-bar, #radio-intercept-mission .cat-corp .eq-bar,
#radio-intercept .cat-system .eq-bar, #radio-intercept-mission .cat-system .eq-bar   { color: #00f3ff; }
#radio-intercept .cat-rebel .eq-bar, #radio-intercept-mission .cat-rebel .eq-bar     { color: #f43f5e; }
#radio-intercept .cat-makvil .eq-bar, #radio-intercept-mission .cat-makvil .eq-bar   { color: #10b981; }
/* Body wrapper — must grow inside flex panel */
#radio-intercept .radio-body,
#radio-intercept-mission .radio-body {
    flex: 1;
    min-width: 0;
}
/* Channel header */
#radio-intercept .radio-channel,
#radio-intercept-mission .radio-channel {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 4px;
    opacity: 0.8;
}
#radio-intercept .cat-trucker .radio-channel, #radio-intercept-mission .cat-trucker .radio-channel { color: #ca8a04; }
#radio-intercept .cat-corp .radio-channel, #radio-intercept-mission .cat-corp .radio-channel,
#radio-intercept .cat-system .radio-channel, #radio-intercept-mission .cat-system .radio-channel   { color: #0891b2; }
#radio-intercept .cat-rebel .radio-channel, #radio-intercept-mission .cat-rebel .radio-channel     { color: #be123c; }
#radio-intercept .cat-makvil .radio-channel, #radio-intercept-mission .cat-makvil .radio-channel   { color: #047857; }
/* Message text */
#radio-intercept .radio-msg,
#radio-intercept-mission .radio-msg {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    color: #e2e8f0;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-break: break-word;
}
#radio-intercept .radio-sender,
#radio-intercept-mission .radio-sender {
    font-family: 'JetBrains Mono', monospace;
    font-weight: bold;
    margin-right: 6px;
    font-size: 0.85rem;
}
#radio-intercept .cat-trucker .radio-sender, #radio-intercept-mission .cat-trucker .radio-sender { color: #fde047; }
#radio-intercept .cat-corp .radio-sender, #radio-intercept-mission .cat-corp .radio-sender,
#radio-intercept .cat-system .radio-sender, #radio-intercept-mission .cat-system .radio-sender   { color: #67e8f9; }
#radio-intercept .cat-rebel .radio-sender, #radio-intercept-mission .cat-rebel .radio-sender     { color: #fb7185; }
#radio-intercept .cat-makvil .radio-sender, #radio-intercept-mission .cat-makvil .radio-sender   { color: #34d399; }

/* Raise radio above shop overlay when mentor message is active */
#radio-intercept.mentor-active,
#radio-intercept-mission.mentor-active {
    z-index: 10000;
}
/* Mentor pulse glow for onboarding messages */
#radio-intercept .radio-panel.mentor-pulse,
#radio-intercept-mission .radio-panel.mentor-pulse {
    animation: mentor-glow 0.6s ease-in-out 3;
}
@keyframes mentor-glow {
    0%, 100% { box-shadow: 0 0 0 transparent; }
    50% { box-shadow: 0 0 12px rgba(0, 204, 255, 0.6); }
}
/* Fallback for devices without shadow support */
#radio-intercept .radio-panel.mentor-pulse.no-shadows,
#radio-intercept-mission .radio-panel.mentor-pulse.no-shadows {
    animation: mentor-border 0.6s ease-in-out 3;
}
@keyframes mentor-border {
    0%, 100% { border-color: transparent; }
    50% { border-color: rgba(0, 204, 255, 0.6); }
}

/* Mobile: transparent style for radio panel */
@media (max-width: 768px), (pointer: coarse) {
    #radio-intercept .radio-panel,
    #radio-intercept-mission .radio-panel {
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 4px 8px;
    }
    /* Remove faction left borders on mobile */
    #radio-intercept .radio-panel.cat-trucker,
    #radio-intercept .radio-panel.cat-corp,
    #radio-intercept .radio-panel.cat-system,
    #radio-intercept .radio-panel.cat-rebel,
    #radio-intercept .radio-panel.cat-makvil,
    #radio-intercept-mission .radio-panel.cat-trucker,
    #radio-intercept-mission .radio-panel.cat-corp,
    #radio-intercept-mission .radio-panel.cat-system,
    #radio-intercept-mission .radio-panel.cat-rebel,
    #radio-intercept-mission .radio-panel.cat-makvil {
        border-left: none;
    }
    /* Text shadow for readability without background */
    #radio-intercept .radio-channel,
    #radio-intercept .radio-msg,
    #radio-intercept .radio-sender,
    #radio-intercept-mission .radio-channel,
    #radio-intercept-mission .radio-msg,
    #radio-intercept-mission .radio-sender {
        text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,1);
    }
}

/* ── Ship icon on Start Flight button ── */
.btn-ship-wrap {
    display: inline-block;
    position: relative;
    width: 26px;
    height: 1em;
    vertical-align: middle;
    margin-right: 0.3em;
    flex-shrink: 0;
    overflow: visible;
}
.btn-ship-icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-30%);
    width: 26px;
    height: 50px;
    display: block;
    overflow: visible;
}
.btn-ship-flame {
    opacity: 0;
    transition: opacity 0.15s;
}
#screen-start .btn-primary:hover .btn-ship-flame { opacity: 1; }

/* Gentle shimmer on individual puffs — steady stream, not pulsing */
.btn-ship-flame .puff {
    transform-origin: center;
    transform-box: fill-box;
}
#screen-start .btn-primary:hover .puff {
    animation: puffShimmer 0.3s ease-in-out infinite alternate;
}
.puff.p1  { animation-delay: 0s; }
.puff.p2  { animation-delay: 0.05s; }
.puff.p3  { animation-delay: 0.1s; }
.puff.p4  { animation-delay: 0.15s; }
.puff.p5  { animation-delay: 0.02s; }
.puff.p6  { animation-delay: 0.08s; }
.puff.p7  { animation-delay: 0.12s; }
.puff.p8  { animation-delay: 0.18s; }
.puff.p9  { animation-delay: 0.07s; }
.puff.p10 { animation-delay: 0.03s; }
.puff.p11 { animation-delay: 0.11s; }
.puff.p12 { animation-delay: 0.16s; }
.puff.p13 { animation-delay: 0.06s; }
.puff.p14 { animation-delay: 0.13s; }
.puff.p15 { animation-delay: 0s; }
.puff.p16 { animation-delay: 0.04s; }
.puff.p17 { animation-delay: 0.09s; }

@keyframes puffShimmer {
    0%   { opacity: 0.7; transform: scale(0.92); }
    100% { opacity: 1;   transform: scale(1.08); }
}

#screen-start .btn-primary:hover {
    background: linear-gradient(90deg, rgba(0, 243, 255, 0.15) 0%, rgba(0, 243, 255, 0.4) 50%, rgba(0, 243, 255, 0.15) 100%);
    box-shadow: 0 0 35px rgba(0, 243, 255, 0.5), inset 0 0 24px rgba(0, 243, 255, 0.12);
    transform: scale(1.03);
    animation: none;
}

/* ── Gamepad / keyboard navigation: move glow between buttons ── */
/* When ANY button in start menu has keyboard-focus, dim the primary btn pulse */
#screen-start:has(.keyboard-focus) .btn-primary:not(.keyboard-focus) {
    animation: none;
    box-shadow: 0 0 8px rgba(0, 243, 255, 0.1);
    background: rgba(0, 243, 255, 0.04);
}

/* Focused primary button gets strong glow (same as pulse peak) */
#screen-start .btn-primary.keyboard-focus {
    animation: none;
    background: rgba(0, 243, 255, 0.22);
    box-shadow: 0 0 36px rgba(0, 243, 255, 0.6), inset 0 0 22px rgba(0, 243, 255, 0.1);
    transform: scale(1.03);
}

/* Focused secondary buttons in start menu get visible glow */
#screen-start .btn-settings.keyboard-focus {
    border-color: rgba(0, 243, 255, 0.5);
    background: rgba(0, 243, 255, 0.1);
    color: var(--primary);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
    transform: scale(1.02);
}

#screen-start .btn-settings {
    width: auto;
    padding: 12px 40px;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(200, 230, 255, 0.7);
    justify-content: center;
    box-shadow: none;
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s, transform 0.1s;
}

.btn-icon-img {
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    object-fit: contain;
    margin-right: 0.3em;
}

#screen-start .btn-settings:hover {
    background: rgba(0, 243, 255, 0.08);
    border-color: rgba(0, 243, 255, 0.4);
    color: var(--primary);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.15);
    transform: scale(1.02);
}

#menu-copyright {
    margin-top: 4px;
    font-size: 0.65rem;
    color: rgba(120, 160, 200, 0.45);
    letter-spacing: 0.1em;
}

#menu-controls-hint {
    margin-top: 22px;
    font-size: 0.72rem;
    color: rgba(120, 160, 200, 0.45);
    letter-spacing: 0.1em;
    line-height: 1.8;
}

@media (max-width: 600px) {
    #screen-start {
        width: 100vw;
        max-width: 100vw;
        min-width: 0;
        padding: 20px 16px 24px;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-sizing: border-box;
        top: 0;
        transform: translateX(-50%);
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
    }
    #screen-start .btn-primary {
        width: 100%;
    }
    #screen-start .menu-row-game .btn-settings,
    #screen-start .menu-row-knowledge .btn-settings,
    #screen-start .menu-row-util .btn-settings {
        padding: 10px 4px;
        font-size: 0.75rem;
    }
    .menu-row-game,
    .menu-row-knowledge,
    .menu-row-util,
    .menu-row-atlas {
        gap: 6px;
    }
    .menu-news-item {
        padding: 8px 10px;
        gap: 8px;
    }
    .menu-news-text {
        font-size: 0.65rem;
    }
}

@media (max-width: 380px) {
    #screen-start {
        padding: 10px 6px 16px;
    }
    #screen-start .btn-primary {
        padding: 14px 10px;
        font-size: 1rem;
        letter-spacing: 0.08em;
    }
    #screen-start .menu-row-game .btn-settings,
    #screen-start .menu-row-knowledge .btn-settings {
        padding: 8px 4px;
        font-size: 0.65rem;
        letter-spacing: 0.03em;
    }
    #screen-start .menu-row-game #btn-academy {
        font-size: clamp(0.5rem, 2.5vw, 0.65rem);
    }
    #screen-start .menu-row-util .btn-settings {
        padding: 8px 3px;
        font-size: 0.62rem;
        letter-spacing: 0.02em;
    }
    .menu-row-game,
    .menu-row-knowledge,
    .menu-row-util,
    .menu-row-atlas {
        gap: 4px;
    }
    .menu-news-item {
        padding: 6px 8px;
        gap: 6px;
    }
    .menu-news-text {
        font-size: 0.6rem;
    }
    .menu-news-badge {
        font-size: 0.55rem;
        padding: 1px 4px;
    }
    .menu-news-header {
        padding: 4px 8px;
    }
    .menu-buttons-container {
        gap: 6px;
    }
}

/* ── Menu buttons container (flex layout) ──────────────────────── */

.menu-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

/* Game row: 2 equal columns */
.menu-row-game {
    display: flex;
    gap: 10px;
}
#screen-start .menu-row-game .btn-settings {
    flex: 1;
    min-width: 0;
    padding: 12px 8px;
    letter-spacing: 0.08em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#screen-start .menu-row-game #btn-academy {
    white-space: normal;
    text-overflow: clip;
    font-size: clamp(0.55rem, 2.8vw, 0.9rem);
    line-height: 1.2;
    overflow: visible;
}

/* Academy button pulse for new players */
#btn-academy.new-player-hint {
    animation: academyPulse 2s ease-in-out infinite;
    border-color: rgba(0, 243, 255, 0.6);
    position: relative;
    overflow: visible;
}
#btn-academy.new-player-hint::after {
    content: 'NEW';
    position: absolute;
    top: -8px;
    right: -4px;
    background: #00f3ff;
    color: #000;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    pointer-events: none;
}
@keyframes academyPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(0,243,255,0.15); }
    50%      { box-shadow: 0 0 18px rgba(0,243,255,0.45), inset 0 0 8px rgba(0,243,255,0.08); }
}

/* Tutorial skip button */
#btn-tutorial-skip {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 6px 24px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    touch-action: manipulation;
    width: auto;
    max-width: 50vw;
    box-sizing: border-box;
    white-space: nowrap;
}
#btn-tutorial-skip:active {
    background: rgba(255, 255, 255, 0.2);
}

/* ── Weekly Challenge widget (main menu) — compact single-block ───────── */
.wc-widget {
    margin-top: 10px;
    background: rgba(255,170,0,0.05);
    border: 1px solid rgba(255,170,0,0.25);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: 'JetBrains Mono', monospace;
}
.wc-row-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.wc-header-title {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    color: #ffaa00;
    opacity: 0.7;
    flex-shrink: 0;
}
.wc-name {
    font-size: 0.7rem;
    color: #fff;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wc-timer {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.4);
    flex-shrink: 0;
}
.wc-bar-wrap {
    position: relative;
    margin-bottom: 3px;
}
.wc-bar {
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
}
.wc-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff8800, #ffaa00);
    border-radius: 2px;
    transition: width 0.4s ease;
    width: 0%;
}
.wc-claim {
    position: absolute;
    inset: -6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,170,0,0.5);
    border-radius: 3px;
    background: rgba(255,170,0,0.2);
    color: #ffaa00;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s;
    text-shadow: 0 0 8px rgba(255,170,0,0.5);
    backdrop-filter: blur(2px);
}
.wc-claim:hover {
    background: rgba(255,170,0,0.35);
}
.wc-claim.wc-claimed {
    color: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.3);
    cursor: default;
    text-shadow: none;
}
.wc-row-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.6rem;
}
.wc-progress {
    color: rgba(255,255,255,0.5);
}
.wc-reward {
    color: #ffaa00;
    flex: 1;
}

/* ── Weekly Challenge HUD mini-widget ────────────────────────────────────── */
.wc-hud {
    position: fixed;
    bottom: 60px;
    left: 8px;
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,170,0,0.25);
    border-radius: 6px;
    padding: 4px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.6);
    z-index: 50;
    min-width: 100px;
    pointer-events: none;
}
.wc-hud-name {
    margin-bottom: 3px;
    color: #ffaa00;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.wc-hud-bar {
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 2px;
}
.wc-hud-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff8800, #ffaa00);
    border-radius: 2px;
    transition: width 0.4s ease;
    width: 0%;
}
.wc-hud-progress {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
}
.wc-hud.wc-hud-complete {
    border-color: rgba(0,255,100,0.4);
}
.wc-hud.wc-hud-complete .wc-hud-name {
    color: #00ff64;
}
.wc-hud.wc-hud-complete .wc-hud-bar-fill {
    background: linear-gradient(90deg, #00cc44, #00ff64);
}

/* News block (outside menu-buttons-container, needs own top margin) */
.menu-news-block {
    margin-top: 10px;
    background: rgba(0,243,255,0.03);
    border: 1px solid rgba(0,243,255,0.2);
    border-radius: 6px;
    box-shadow: inset 0 0 20px rgba(0,243,255,0.02);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.menu-news-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 12px;
    background: rgba(0,243,255,0.08);
    border-bottom: 1px solid rgba(0,243,255,0.15);
}
.menu-news-header-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Share Tech Mono', 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    color: rgba(0,243,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: bold;
}
.menu-news-header-title svg {
    width: 12px;
    height: 12px;
    stroke: rgba(0,243,255,0.6);
    animation: lore-blink 1.5s ease-in-out infinite;
}
.menu-news-header-ver {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    color: rgba(0,243,255,0.25);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.menu-news-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px dashed rgba(255,255,255,0.05);
    transition: background 0.2s;
}
.menu-news-item:last-child {
    border-bottom: none;
}
.menu-news-badge {
    flex-shrink: 0;
    font-family: 'Share Tech Mono', 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    margin-top: 1px;
    color: #10b981;
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.3);
    box-shadow: 0 0 10px rgba(16,185,129,0.2);
    animation: newsBadgePulse 2s ease-in-out infinite;
}
@keyframes newsBadgePulse {
    0%, 100% { box-shadow: 0 0 5px rgba(16,185,129,0.2); }
    50% { box-shadow: 0 0 12px rgba(16,185,129,0.5); }
}
.menu-news-text {
    font-family: 'Inter', 'Oxanium', sans-serif;
    font-size: 0.72rem;
    line-height: 1.5;
    letter-spacing: 0.2px;
    color: rgba(200,210,220,0.85);
    font-weight: 300;
    text-align: left;
}
.menu-news-text .hl {
    color: #fff;
    font-weight: 500;
}
.menu-news-text .hl-cyan {
    color: #00f3ff;
    text-shadow: 0 0 8px rgba(0,243,255,0.2);
}
/* Notification badge (envelope + unread count) shown when collapsed */
.menu-news-notif {
    display: none;
    align-items: center;
    gap: 4px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    color: #10b981;
    letter-spacing: 0.1em;
    animation: newsNotifBlink 1.2s ease-in-out infinite;
}
.menu-news-block.collapsed .menu-news-notif.has-unread {
    display: flex;
}
@keyframes newsNotifBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.menu-news-chevron {
    font-size: 0.6rem;
    color: rgba(0,243,255,0.4);
    transition: transform 0.25s ease;
}
.menu-news-block.collapsed .menu-news-chevron {
    transform: rotate(-90deg);
}
.menu-news-body {
    transition: max-height 0.3s ease, opacity 0.25s ease;
    overflow: hidden;
}
.menu-news-block.collapsed .menu-news-body {
    max-height: 0 !important;
    opacity: 0;
    pointer-events: none;
}

/* ── Archives collapsible block (Marsopedia + Achievements + Atlas) ──── */

/* Archives toggle button (inline in menu-row-util) */
.menu-archives-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    user-select: none;
}
.menu-archives-chevron {
    font-size: 0.6rem;
    color: rgba(0,243,255,0.4);
    transition: transform 0.25s ease;
}
.menu-archives-toggle-btn.collapsed .menu-archives-chevron {
    transform: rotate(-90deg);
}

/* Archives dropdown body */
.menu-archives-block {
    background: rgba(0,243,255,0.03);
    border: 1px solid rgba(0,243,255,0.15);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.menu-archives-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
    overflow: hidden;
}
.menu-archives-block.collapsed .menu-archives-body {
    max-height: 0 !important;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}
.menu-archives-block.collapsed {
    border-color: transparent;
    background: transparent;
}

/* ── Upgrade button TP badge ───────────────────────────────────────────── */
.upgrade-tp-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 0.65rem;
    color: #00f3ff;
    background: rgba(0,243,255,0.1);
    border: 1px solid rgba(0,243,255,0.3);
    border-radius: 3px;
    vertical-align: middle;
    letter-spacing: 0.08em;
}

/* ── News message count on header ──────────────────────────────────────── */
.menu-news-count {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    color: rgba(0,243,255,0.5);
    letter-spacing: 0.08em;
    margin-left: 4px;
}

/* ── Bottom links (beta badge + discord) ───────────────────────────────── */
.menu-bottom-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}

/* ── Death Crash Site Salvage Panel ──────────────────────────────────────── */

/* Salvage mode: override crater-mode to show cargo container with salvage panel */
/* 1. Override cyan border/shadow with amber theme */
#screen-shop.salvage-mode {
    border-color: #f59e0b !important;
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.2), inset 0 0 20px rgba(245, 158, 11, 0.04) !important;
}
.salvage-mode .col-right {
    display: flex !important;
    flex-direction: column;
}
.salvage-mode .col-left {
    display: none !important;
}
.salvage-mode .master-service-btn,
.salvage-mode .maintenance-row,
.salvage-mode .kb-hint,
.salvage-mode .accordion-section[data-section="minerals"],
.salvage-mode .accordion-section[data-section="upgrades"],
.salvage-mode .accordion-section[data-section="debt"],
.salvage-mode .accordion-section[data-section="drilling"],
.salvage-mode .radio-deck {
    display: none !important;
}
.salvage-mode .accordion-section[data-section="cargo"] .accordion-header {
    display: none !important;
}
.salvage-mode .accordion-section[data-section="cargo"] .accordion-content {
    max-height: none !important;
    overflow: visible !important;
}
.salvage-mode .shop-header { background: transparent !important; }
.salvage-mode .shop-footer { padding-top: 0 !important; }

.salvage-hazard {
    height: 4px;
    background: repeating-linear-gradient(-45deg, #f59e0b, #f59e0b 8px, #221100 8px, #221100 16px);
    opacity: 0.85;
}
.salvage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(245, 158, 11, 0.15);
}
.salvage-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.salvage-skull {
    font-size: 1.3rem;
    color: #f59e0b;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}
.salvage-title {
    font-family: 'Share Tech Mono', 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    font-weight: bold;
    color: #f59e0b;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.salvage-sos {
    font-size: 0.6rem;
    color: rgba(245, 158, 11, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
    font-style: italic;
}
.salvage-blinker {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 5px #ef4444;
    animation: salvage-blink 1s step-end infinite;
}
@keyframes salvage-blink { 50% { opacity: 0; } }

.salvage-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.salvage-desc {
    font-family: 'Inter', 'Oxanium', sans-serif;
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(200, 210, 220, 0.85);
    text-align: center;
}
.salvage-manifest {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    padding: 14px 14px 14px 18px;
}
.salvage-manifest::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 3px; height: 100%;
    background: #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}
.salvage-manifest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.salvage-manifest-label {
    font-size: 0.65rem;
    color: rgba(245, 158, 11, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: bold;
}
.salvage-hold-bar {
    font-size: 0.7rem;
    color: #8899aa;
    padding: 4px 0 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 6px;
}
.salvage-loot-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.35);
    padding: 10px 12px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 6px;
}
.salvage-mineral-row {
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.salvage-mineral-row:hover {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
}
.salvage-loot-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: bold;
    flex-shrink: 0;
}
.salvage-loot-cr {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    font-weight: bold;
}
.salvage-loot-name {
    flex: 1;
    font-family: 'Inter', 'Oxanium', sans-serif;
    font-size: 0.85rem;
    color: rgba(200, 210, 220, 0.9);
    min-width: 0;
}
.salvage-mineral-weight {
    font-size: 0.7rem;
    color: #667;
}
.salvage-loot-value {
    font-weight: bold;
    font-size: 1.05rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.salvage-loot-cr-val {
    color: #34d399;
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}
.salvage-check {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    flex-shrink: 0;
    transition: all 0.15s;
}
.salvage-check-on {
    background: rgba(0, 243, 255, 0.2);
    border: 1px solid rgba(0, 243, 255, 0.6);
    color: #00f3ff;
}
.salvage-check-off {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: transparent;
}
.salvage-mineral-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.salvage-empty {
    font-size: 0.8rem;
    color: #9ca3af;
    text-align: center;
    padding: 10px 0;
    font-style: italic;
}
.salvage-toggle-row {
    display: flex;
    margin-top: 6px;
}
.salvage-toggle-btn {
    flex: 1;
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: rgba(245, 158, 11, 0.7);
    font-size: 0.7rem;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.15s;
}
.salvage-toggle-btn:hover {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}
.salvage-stats {
    display: flex;
    gap: 10px;
    padding: 4px 20px 10px;
}
.salvage-stat {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(245, 158, 11, 0.15);
    border-radius: 6px;
    padding: 8px 14px;
}
.salvage-stat-label {
    font-size: 0.6rem;
    color: #667;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.salvage-stat-val {
    font-weight: bold;
    font-size: 1rem;
    color: #c8d2dc;
}
.salvage-stat-cr {
    color: #f59e0b;
}

.salvage-footer {
    padding: 4px 20px 16px;
}

.salvage-btn-launch {
    width: 100%;
    padding: 14px 20px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid #f59e0b;
    border-radius: 4px;
    color: #f59e0b;
    font-family: 'Share Tech Mono', 'JetBrains Mono', monospace;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.salvage-btn-launch:hover:not(:disabled) {
    background: #f59e0b;
    color: #000;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}
.salvage-btn-launch:disabled {
    opacity: 0.35;
    cursor: default;
    border-color: #555;
    color: #555;
}
/* Shine sweep on hover */
.salvage-btn-launch::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-20deg);
    transition: 0s;
}
.salvage-btn-launch:hover:not(:disabled)::after {
    left: 200%;
    transition: 0.5s ease-in-out;
}

/* Knowledge row: 2 equal columns (Marsopedia + Mars Atlas) */
.menu-row-knowledge {
    display: flex;
    gap: 10px;
}
#screen-start .menu-row-knowledge .btn-settings {
    flex: 1;
    min-width: 0;
    padding: 12px 8px;
    letter-spacing: 0.08em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Utility row: 3 equal columns */
.menu-row-util {
    display: flex;
    gap: 10px;
}
#screen-start .menu-row-util .btn-settings {
    flex: 1;
    min-width: 0;
    padding: 10px 6px;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Menu top bar (TP counter & language toggle at screen corners) ── */

.menu-top-bar {
    display: none;
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: min(450px, 90%);
    justify-content: space-between;
    align-items: center;
    z-index: 200;
    pointer-events: auto;
}

#screen-start.active ~ .menu-top-bar {
    display: flex;
}

.menu-top-bar .lang-dropdown {
    margin: 0;
}

/* ── Leaderboard dark background ───────────────────────────────── */

#records-start {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 243, 255, 0.15);
    border-radius: 6px;
    padding: 6px 8px;
    margin-top: 14px;
}

/* ── Help screen ────────────────────────────────── */

.help-section {
    text-align: left;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
}

.help-label {
    font-size: 0.7rem;
    color: var(--primary);
    letter-spacing: 0.15em;
    margin-bottom: 8px;
    text-shadow: 0 0 6px rgba(0, 243, 255, 0.3);
}

.help-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 12px;
    font-size: 0.82rem;
    align-items: baseline;
}

.help-key {
    color: var(--primary);
    font-weight: bold;
    font-size: 0.78rem;
    white-space: nowrap;
}

/* Touch devices: hide desktop hints, show mobile hints */
@media (pointer: coarse) {
    .help-desktop-only { display: none !important; }
    .kb-hint { display: none !important; }
    #ac-shop-hint { display: none !important; }
}
/* Mouse/keyboard devices: hide mobile-only hints */
@media (pointer: fine) {
    .help-mobile-only { display: none !important; }
}

/* ── Academy — CRT green theme ──────────────────── */

.academy-screen {
    border-color: #00cc00;
    box-shadow: 0 0 30px rgba(0, 204, 0, 0.2);
    background: rgba(0, 10, 0, 0.92);
}

.academy-screen h2 {
    color: #00ff00;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.academy-screen p {
    color: #00cc88;
}

.academy-screen button {
    border-color: #00aa00;
    color: #00ff00;
}

.academy-screen button:hover:not(:disabled) {
    background: rgba(0, 255, 0, 0.15);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
}

.academy-screen button:disabled {
    border-color: #003300;
    color: #005500;
}

#academy-hud {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    display: none;
    justify-content: space-between;
    align-items: center;
    pointer-events: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: #00ff00;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
    background: linear-gradient(180deg, rgba(0, 8, 0, 0.85) 0%, transparent 100%);
    z-index: 10;
    letter-spacing: 0.08em;
}

#academy-hud button {
    background: transparent;
    border: 1px solid #00aa00;
    color: #00ff00;
    padding: 5px 10px;
    font-size: 0.8rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    letter-spacing: 0.05em;
    pointer-events: auto;
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
}

#academy-hud button:hover {
    background: rgba(0, 255, 0, 0.15);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

/* ── Story screens ────────────────────────────────────────────────────────── */
#screen-prologue {
    border-color: var(--warning);
    box-shadow: 0 0 30px rgba(255, 170, 0, 0.2);
}
.prologue-body {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
    text-align: left;
}
.prologue-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
    margin-bottom: 12px;
}
.prologue-location::before {
    content: '◎';
    font-size: 0.75rem;
    color: #6b7280;
}
.prologue-lore {
    font-size: 0.85rem;
    color: #cbd5e1;
    line-height: 1.6;
    font-weight: 300;
    margin-bottom: 4px;
}
.prologue-debt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(90deg, rgba(255, 87, 34, 0.12) 0%, transparent 100%);
    border-left: 3px solid var(--warning);
    padding: 10px 16px;
    margin: 14px 0;
    border-radius: 0 6px 6px 0;
}
.prologue-debt-label {
    font-size: 0.6rem;
    color: rgba(255, 170, 0, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    margin-bottom: 2px;
}
.prologue-debt-amount {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    color: var(--warning);
    font-weight: 700;
    text-shadow: 0 0 12px rgba(255, 170, 0, 0.5);
}
.prologue-mission {
    font-size: 0.85rem;
    color: #cbd5e1;
    line-height: 1.6;
    font-weight: 300;
}

.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 99;
}

.modal-backdrop.active {
    display: block;
}

/* ── Ranking Notification Modal ──────────────────────────────────────────── */

.ranking-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    pointer-events: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-height: 450px) {
    .ranking-overlay {
        align-items: flex-start;
        padding: 10px 10px 120px;
    }
    .ranking-modal {
        margin-top: 5px;
    }
    .ranking-input-section {
        padding: 15px !important;
        gap: 12px !important;
    }
    .ranking-lore {
        display: none;
    }
    .ranking-title {
        font-size: 2rem !important;
    }
    .ranking-header {
        padding: 8px !important;
    }
    .ranking-callsign-input {
        font-size: 1.6rem !important;
        padding: 8px !important;
    }
    .ranking-btn-submit {
        padding: 12px !important;
    }
}
.ranking-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.4rem;
    line-height: 1;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    padding: 0;
}
.ranking-close-btn:hover,
.ranking-close-btn:active {
    color: #fff;
    border-color: var(--rank-color, #00f3ff);
    background: rgba(255, 255, 255, 0.08);
}
.ranking-modal {
    --rank-color: #00f3ff;
    --rank-glow: rgba(0, 243, 255, 0.5);
    --rank-bg: rgba(0, 243, 255, 0.05);
    width: 100%;
    max-width: 500px;
    background: rgba(10, 12, 16, 0.95);
    border: 2px solid var(--rank-color);
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.9), 0 0 30px var(--rank-glow), inset 0 0 20px var(--rank-bg);
    backdrop-filter: blur(20px);
    overflow: visible;
    position: relative;
    transform: scale(0.95);
    opacity: 0;
    animation: rankModalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes rankModalPop {
    to { transform: scale(1); opacity: 1; }
}
.ranking-modal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.2) 50%);
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 1;
    border-radius: 8px;
    overflow: hidden;
}
.ranking-header {
    background: var(--rank-bg);
    border-bottom: 1px solid var(--rank-color);
    padding: 15px;
    text-align: center;
    position: relative;
    z-index: 5;
}
.ranking-subtitle {
    font-size: 0.7rem;
    font-weight: bold;
    color: #888;
    letter-spacing: 0.3em;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.ranking-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--rank-color);
    text-shadow: 0 0 20px var(--rank-glow);
    margin: 5px 0;
    letter-spacing: 0.05em;
    font-family: 'Inter', sans-serif;
}
.ranking-category {
    font-size: 0.85rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    opacity: 0.8;
}
.ranking-position {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rank-color);
    margin-top: 8px;
    letter-spacing: 0.1em;
    font-family: 'Inter', sans-serif;
    opacity: 0.9;
}
.ranking-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 10px;
    margin-top: 8px;
}
.rank-cat {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    color: #889;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.ranking-input-section {
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 5;
}
.ranking-lore {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: #cbd5e1;
    text-align: center;
    line-height: 1.5;
    padding: 0 10px;
    margin: 0;
}
.ranking-callsign-wrapper {
    position: relative;
    width: 100%;
    max-width: 300px;
}
.ranking-callsign-label {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 12, 16, 0.95);
    padding: 0 8px;
    font-size: 10px;
    color: #556;
    letter-spacing: 0.2em;
    z-index: 3;
}
.ranking-callsign-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    color: #fff;
    font-family: inherit;
    font-size: 2.2rem;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    outline: none;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    box-sizing: border-box;
}
.ranking-callsign-input:focus {
    border-color: var(--rank-color);
    box-shadow: 0 0 15px var(--rank-glow);
    background: rgba(0, 0, 0, 0.8);
}
.ranking-callsign-input::placeholder { color: rgba(255, 255, 255, 0.1); }
.callsign-format-hint {
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: rgba(0, 255, 255, 0.5);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: -0.2rem;
    margin-bottom: 0.5rem;
}
.ranking-flag-row {
    position: relative;
    display: flex;
    justify-content: center;
}
.ranking-flag-row .flag-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    max-height: 200px;
    overflow-y: auto;
}
.ranking-btn-submit {
    width: 100%;
    padding: 16px;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    background: transparent;
    border: 2px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.4);
    border-radius: 6px;
    cursor: not-allowed;
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.ranking-btn-submit.valid {
    background: var(--rank-bg);
    border-color: var(--rank-color);
    color: var(--rank-color);
    cursor: pointer;
    box-shadow: 0 0 15px var(--rank-glow);
}
.ranking-btn-submit.valid:hover {
    background: var(--rank-color);
    color: #000;
    box-shadow: 0 0 30px var(--rank-glow);
}
/* Top-1 special effects */
@keyframes rankGlitch {
    0% { transform: translate(0) }
    20% { transform: translate(-2px, 2px) }
    40% { transform: translate(-2px, -2px) }
    60% { transform: translate(2px, 2px) }
    80% { transform: translate(2px, -2px) }
    100% { transform: translate(0) }
}
.ranking-overlay.is-top-1 .ranking-title {
    animation: rankGlitch 0.2s infinite;
    color: #fff;
    text-shadow: 2px 0 red, -2px 0 cyan, 0 0 20px #fff;
}
.ranking-overlay.is-top-1 .ranking-modal {
    border-color: #fff;
    box-shadow: 0 0 50px rgba(0, 243, 255, 0.8), inset 0 0 30px rgba(255, 0, 85, 0.5);
    animation: rankModalPop 0.4s forwards, rankPulseBorder 2s infinite;
}
@keyframes rankPulseBorder {
    0%, 100% { border-color: #00f3ff; }
    50% { border-color: #ff0055; }
}

/* Callsign registration modal — inherits .ranking-modal styles, cyan accent */
.callsign-reg-modal {
    --rank-color: #00f3ff;
    --rank-glow: rgba(0, 243, 255, 0.5);
    --rank-bg: rgba(0, 243, 255, 0.05);
}

#screen-buyout {
    border-color: var(--success);
    box-shadow: 0 0 40px rgba(0, 255, 102, 0.25);
    z-index: 100;
}

.buyout-title {
    animation: buyoutPulse 2s ease-in-out infinite;
}

@keyframes buyoutPulse {
    0%, 100% { text-shadow: 0 0 10px rgba(0, 255, 102, 0.5); }
    50%      { text-shadow: 0 0 30px rgba(0, 255, 102, 0.9), 0 0 60px rgba(0, 255, 102, 0.3); }
}

/* ── Outro / Demo Ending screen ───────────────── */

#screen-outro {
    border-color: var(--success);
    box-shadow: 0 0 40px rgba(0, 255, 102, 0.25);
}

#outro-title {
    animation: buyoutPulse 2s ease-in-out infinite;
}

.outro-stats {
    text-align: left;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    line-height: 1.7;
}

.outro-tg-link {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 16px;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s;
}
.outro-tg-link:hover {
    background: rgba(0, 243, 255, 0.1);
    box-shadow: 0 0 12px rgba(0, 243, 255, 0.3);
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.5);
}

/* Telegram link — only visible for Russian locale */
html:not([lang="ru"]) #outro-tg-link {
    display: none;
}

/* ── Phobos Escape dialog ──────────────────────── */

.phobos-escape-screen {
    border-color: #ff0055 !important;
    box-shadow: 0 0 40px rgba(255, 0, 85, 0.3), inset 0 0 60px rgba(255, 0, 85, 0.05) !important;
    background: rgba(5, 0, 8, 0.95) !important;
}

.glitch-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    font-weight: bold;
    color: #ff0055;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    text-align: center;
    margin-bottom: 15px;
    position: relative;
    animation: glitchFlicker 3s infinite;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
}

.glitch-text::before {
    top: -2px;
    color: #00f3ff;
    clip-path: inset(0 0 60% 0);
    animation: glitchShift 2s infinite linear alternate-reverse;
}

.glitch-text::after {
    top: 2px;
    color: #ff0055;
    clip-path: inset(60% 0 0 0);
    animation: glitchShift 1.5s infinite linear alternate;
}

@keyframes glitchFlicker {
    0%, 92%, 100% { opacity: 1; }
    93% { opacity: 0.7; }
    94% { opacity: 1; }
    95% { opacity: 0.4; }
    96% { opacity: 1; }
}

@keyframes glitchShift {
    0%, 80% { transform: translateX(0); }
    85% { transform: translateX(-3px); }
    90% { transform: translateX(3px); }
    95% { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}

.phobos-terminal {
    background: #050508;
    border: 1px solid #333;
    border-left: 3px solid #ff0055;
    padding: 12px;
    border-radius: 4px;
    text-align: left;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    color: #ccc;
    line-height: 1.7;
}

.phobos-sender {
    color: #ff0055;
    font-weight: bold;
    margin-bottom: 6px;
    font-size: 0.85rem;
    text-shadow: 0 0 8px rgba(255, 0, 85, 0.5);
}

#phobos-choice-buttons {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

#phobos-choice-buttons button {
    flex: 1;
    justify-content: center;
}

.btn-phobos-accept {
    border-color: var(--success) !important;
    color: var(--success) !important;
}

.btn-phobos-accept:hover:not(:disabled) {
    background: rgba(0, 255, 102, 0.15) !important;
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.4) !important;
}

.btn-phobos-refuse {
    border-color: #888 !important;
    color: #aaa !important;
}

.btn-phobos-refuse:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08) !important;
}

.btn-phobos-refuse.refused {
    border-color: var(--danger) !important;
    color: var(--danger) !important;
    background: rgba(255, 0, 85, 0.2) !important;
    box-shadow: 0 0 20px rgba(255, 0, 85, 0.4) !important;
    animation: refuseFlash 0.3s ease-out;
}

@keyframes refuseFlash {
    0% { background: rgba(255, 0, 85, 0.6); }
    100% { background: rgba(255, 0, 85, 0.2); }
}

.btn-emergency-takeoff {
    border-color: var(--danger) !important;
    color: var(--danger) !important;
    background: rgba(255, 0, 85, 0.1) !important;
    font-size: 1rem !important;
    padding: 14px !important;
    margin-top: 12px;
    justify-content: center;
    animation: emergencyPulse 1s ease-in-out infinite;
}

.btn-emergency-takeoff:hover:not(:disabled) {
    background: rgba(255, 0, 85, 0.25) !important;
    box-shadow: 0 0 25px rgba(255, 0, 85, 0.5) !important;
}

@keyframes emergencyPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 0, 85, 0.3); }
    50% { box-shadow: 0 0 25px rgba(255, 0, 85, 0.6), inset 0 0 15px rgba(255, 0, 85, 0.1); }
}

#phobos-aftermath .phobos-terminal {
    border-left-color: var(--danger);
}

#screen-phobos {
    border-color: var(--warning);
    box-shadow: 0 0 30px rgba(255, 170, 0, 0.15);
}

#buyout-progress {
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

#debt-pay-input {
    -moz-appearance: textfield;
}
#debt-pay-input::-webkit-inner-spin-button,
#debt-pay-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Records table ─────────────────────────────────────────────────────────── */
.records-title {
    font-size: 0.7rem;
    color: #556;
    letter-spacing: 0.15em;
    text-align: center;
    margin: 10px 0 4px;
    text-transform: uppercase;
}
.record-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    padding: 3px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-family: 'JetBrains Mono', monospace;
    transition: background 0.2s;
}
.record-row:hover {
    background: rgba(0, 243, 255, 0.04);
}
.record-row:last-child {
    border-bottom: none;
}
.rec-medal { min-width: 20px; }
.rec-ship  { color: var(--primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.rec-score { color: var(--warning); min-width: 56px; text-align: right; }
.rec-dist  { color: #ccd; min-width: 62px; text-align: right; }
.rec-date  { color: #556; font-size: 0.63rem; min-width: 52px; text-align: right; }
.records-empty { font-size: 0.72rem; color: #445; text-align: center; padding: 8px 0; }
.rec-mobile { width: 16px; min-width: 16px; font-size: 0.8rem; text-align: center; }
.rec-flag { min-width: 18px; font-size: 0.85rem; margin-right: 4px; }
.rec-delete-btn {
    background: rgba(255, 60, 60, 0.2);
    border: 1px solid rgba(255, 60, 60, 0.5);
    color: #f44;
    font-size: 0.6rem;
    width: 18px; height: 18px;
    cursor: pointer;
    border-radius: 3px;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.rec-delete-btn:hover { background: rgba(255, 60, 60, 0.5); color: #fff; }
.rec-globe-btn {
    background: rgba(0, 180, 255, 0.15);
    border: 1px solid rgba(0, 180, 255, 0.4);
    color: #fff;
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 4px;
    padding: 1px 4px;
    line-height: 1;
    flex-shrink: 0;
}
.rec-globe-btn:hover { background: rgba(0, 180, 255, 0.35); }
.btn-admin-mode { font-size: 0.6rem; opacity: 0.5; margin-top: 4px; }
.btn-admin-mode.admin-active { opacity: 1; border-color: var(--success); color: var(--success); }

/* ── Analytics fullscreen dashboard ────────────── */
.adm-overlay {
    position: fixed; inset: 0; z-index: 9500;
    background: rgba(8, 8, 12, 0.97); backdrop-filter: blur(8px);
    display: flex; flex-direction: column; overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    color: #ededed;
}
.adm-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px 12px; border-bottom: 1px solid #2a2a2a; flex-shrink: 0;
}
.adm-header-left { display: flex; align-items: center; gap: 12px; }
.adm-title { font-size: 0.85rem; font-weight: 700; letter-spacing: 2px; color: #888; text-transform: uppercase; }
.adm-header-center { display: flex; align-items: center; }
.adm-periods { display: flex; gap: 4px; }
.adm-period {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    color: #888; padding: 5px 16px; border-radius: 6px; cursor: pointer;
    font-size: 0.8rem; font-weight: 500; transition: all 0.15s;
}
.adm-period:hover { background: rgba(255,255,255,0.1); color: #ccc; }
.adm-period.active { background: rgba(59,130,246,0.15); border-color: #3b82f6; color: #3b82f6; }
.adm-refresh {
    background: none; border: 1px solid #444; color: #888; font-size: 1.2rem;
    cursor: pointer; padding: 2px 10px; border-radius: 6px; transition: all 0.15s;
    margin-right: 8px;
}
.adm-refresh:hover { color: #fff; border-color: #888; }
.adm-close {
    background: none; border: none; color: #666; font-size: 1.8rem;
    cursor: pointer; padding: 0 8px; line-height: 1; transition: color 0.15s;
}
.adm-close:hover { color: #fff; }

/* Tabs */
.adm-tabs {
    display: flex; gap: 0; padding: 0 24px;
    border-bottom: 1px solid #2a2a2a; flex-shrink: 0;
}
.adm-tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    color: #666; padding: 12px 20px; cursor: pointer;
    font-size: 0.85rem; font-weight: 500; transition: all 0.15s;
}
.adm-tab:hover { color: #aaa; }
.adm-tab.active { color: #ededed; border-bottom-color: #3b82f6; }

/* Content area */
.adm-content { flex: 1; overflow-y: auto; padding: 20px 24px 40px; }
.adm-loading { color: #666; text-align: center; padding: 60px 20px; font-size: 1rem; }
.adm-loading.adm-error { color: #ef4444; }

/* KPI cards */
.adm-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px; margin-bottom: 24px;
}
.adm-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px; padding: 14px 16px 8px; min-width: 0;
}
.adm-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.adm-card-label { font-size: 0.7rem; color: #888; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; }
.adm-card-val { font-size: 1.7rem; font-weight: 700; line-height: 1.2; }
.adm-trend { font-size: 0.65rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
.adm-trend-up { color: #22c55e; background: rgba(34,197,94,0.1); }
.adm-trend-down { color: #ef4444; background: rgba(239,68,68,0.1); }
.adm-trend-flat { color: #888; background: rgba(255,255,255,0.05); }
.adm-sparkline { display: block; width: 100%; height: 40px; margin-top: 8px; }
.adm-sparkline-placeholder { height: 40px; }

/* Sections */
.adm-section { margin-bottom: 24px; }
.adm-section-title {
    font-size: 0.75rem; color: #666; text-transform: uppercase; letter-spacing: 1.5px;
    font-weight: 600; margin-bottom: 12px; padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Bar rows */
.adm-bar-row { display: flex; align-items: center; gap: 12px; margin: 6px 0; font-size: 0.85rem; }
.adm-bar-label { width: 120px; text-align: right; color: #aaa; flex-shrink: 0; font-weight: 500; }
.adm-bar-track { flex: 1; height: 26px; background: rgba(255,255,255,0.04); border-radius: 6px; overflow: hidden; }
.adm-bar-fill { height: 100%; border-radius: 6px; transition: width 0.4s ease; }
.adm-bar-val { width: 120px; text-align: left; color: #aaa; flex-shrink: 0; font-size: 0.8rem; }

/* Charts */
.adm-chart-wrap { width: 100%; position: relative; }
.adm-chart-wrap canvas { width: 100%; display: block; }

/* Grid layouts */
.adm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.adm-grid-3 { display: flex; flex-direction: column; }
@media (max-width: 800px) { .adm-grid-2 { grid-template-columns: 1fr; } }

/* Tables */
.adm-table-wrap { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.adm-table thead th {
    text-align: left; color: #666; padding: 8px 10px; font-weight: 600;
    border-bottom: 1px solid #2a2a2a; white-space: nowrap; font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.adm-th.sorted { color: #3b82f6; }
.adm-table tbody td {
    padding: 8px 10px; color: #ccc; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.adm-table tbody tr:hover { background: rgba(255,255,255,0.03) !important; }
.adm-td-date { color: #888; white-space: nowrap; font-weight: 500; }
.adm-row-detail td { padding: 12px 16px; background: rgba(255,255,255,0.02); }
.adm-detail-group { margin: 4px 0; font-size: 0.8rem; color: #aaa; }
.adm-detail-group strong { color: #ccc; }

/* Error table */
.adm-err-table { font-size: 0.8rem; }
.adm-err-count { font-weight: 700; color: #ef4444; min-width: 40px; }
.adm-err-msg-full { color: #ddd; word-break: break-word; max-width: 500px; }
.adm-err-file { color: #888; white-space: nowrap; }
.adm-err-date { color: #888; white-space: nowrap; font-size: 0.75rem; }
.adm-err-row:hover { background: rgba(255,255,255,0.03); }
.adm-sort-col { cursor: pointer; white-space: nowrap; }
.adm-sort-col:hover { color: #ef4444; }
.adm-selectable { user-select: text; -webkit-user-select: text; cursor: text; }
.adm-pre {
    color: #999; font-size: 0.75rem; white-space: pre-wrap; word-break: break-all;
    margin: 4px 0; padding: 12px; background: rgba(0,0,0,0.3); border-radius: 6px;
    max-height: 300px; overflow-y: auto; user-select: text; -webkit-user-select: text;
}

/* Alerts */
.adm-alert {
    color: #f59e0b; font-size: 0.85rem; padding: 10px 14px; margin-top: 8px;
    background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2);
    border-radius: 8px; font-weight: 500;
}

/* ── Leaderboard tabs ────────────────────────────── */

.records-tabs-container { margin: 10px 0 4px; }
.records-tab-buttons { display: flex; gap: 0; margin-bottom: 6px; justify-content: center; }
.records-tab-btn {
    flex: 1;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #556;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    padding: 5px 4px;
    cursor: pointer;
    text-transform: uppercase;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
    width: auto;
    font-weight: 600;
}
.records-tab-btn:hover {
    color: rgba(0, 243, 255, 0.6);
    background: rgba(0, 243, 255, 0.03);
}
.records-tab-btn.active {
    color: var(--primary);
    border-color: rgba(0, 243, 255, 0.5);
    background: rgba(0, 243, 255, 0.05);
    text-shadow: 0 0 6px rgba(0, 243, 255, 0.3);
}
.records-tab-content { display: none; }
.records-tab-content.active { display: block; }

/* ── Friends tab ──────────────────────────────────── */

.friends-code-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px;
    margin-bottom: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: #889;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: nowrap;
}
.friends-code-value {
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.3);
    user-select: all;
    white-space: nowrap;
    flex-shrink: 0;
}
.friends-btn-action {
    background: transparent;
    border: 1px solid rgba(0, 243, 255, 0.25);
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.4;
    color: var(--primary);
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
    width: auto;
    min-width: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    text-transform: uppercase;
}
.friends-btn-action:hover {
    background: rgba(0, 243, 255, 0.1);
    border-color: rgba(0, 243, 255, 0.5);
}
.friends-add-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}
.friends-code-input {
    flex: 1;
    min-width: 0;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    color: #eef;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    padding: 5px 8px;
    text-transform: uppercase;
    text-align: center;
}
.friends-code-input::placeholder {
    color: #445;
    letter-spacing: 0.2em;
}
.friends-code-input:focus {
    outline: none;
    border-color: rgba(0, 243, 255, 0.5);
}
.friends-btn-add {
    background: rgba(0, 243, 255, 0.08);
    border: 1px solid rgba(0, 243, 255, 0.3);
    border-radius: 4px;
    color: var(--primary);
    font-size: 0.8rem;
    padding: 5px 16px;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
    width: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-weight: normal;
    letter-spacing: 0;
    text-transform: none;
}
.friends-btn-add:hover {
    background: rgba(0, 243, 255, 0.15);
}
.friends-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    padding: 3px 4px;
    margin-bottom: 4px;
    text-align: center;
}
.friends-status.ok { color: #10b981; }
.friends-status.err { color: #f43f5e; }
.friends-empty {
    text-align: center;
    padding: 20px 8px;
    color: #556;
    font-family: 'JetBrains Mono', monospace;
}
.friends-empty-icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
    opacity: 0.5;
}
.friends-empty-text {
    font-size: 0.65rem;
    line-height: 1.6;
}
.friends-self-row {
    background: rgba(0, 243, 255, 0.04);
}

/* ── Leaderboard sort bar ─────────────────────────── */

.lb-sort-bar {
    display: flex;
    gap: 2px;
    margin-bottom: 6px;
    align-items: center;
}
.lb-sort-btn {
    background: transparent;
    border: 1px solid rgba(0, 243, 255, 0.12);
    color: #8aa;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    padding: 3px 7px;
    cursor: pointer;
    text-transform: uppercase;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    white-space: nowrap;
}
.lb-sort-btn:hover {
    color: var(--primary);
    border-color: rgba(0, 243, 255, 0.3);
    background: rgba(0, 243, 255, 0.04);
}
.lb-sort-btn.active {
    color: var(--primary);
    border-color: rgba(0, 243, 255, 0.5);
    background: rgba(0, 243, 255, 0.08);
    text-shadow: 0 0 6px rgba(0, 243, 255, 0.25);
}
.lb-diff-wrap {
    position: relative;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
}
.lb-diff-wrap + .lb-diff-wrap {
    margin-left: 4px;
}
.lb-filter-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    color: #6899;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.lb-diff-toggle {
    border-style: solid;
}
.lb-diff-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    z-index: 50;
    background: rgba(8, 12, 20, 0.96);
    border: 1px solid rgba(0, 243, 255, 0.25);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    min-width: 70px;
    padding: 2px 0;
}
.lb-diff-option,
.lb-plat-option {
    background: transparent;
    border: none;
    color: #8aa;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    padding: 4px 8px;
    cursor: pointer;
    text-transform: uppercase;
    text-align: left;
    transition: color 0.15s, background 0.15s;
}
.lb-diff-option:hover,
.lb-plat-option:hover {
    color: var(--primary);
    background: rgba(0, 243, 255, 0.08);
}
.lb-diff-option.active,
.lb-plat-option.active {
    color: var(--primary);
    text-shadow: 0 0 6px rgba(0, 243, 255, 0.25);
}

/* Difficulty badges in records */
.rec-diff {
    font-size: 0.6rem;
    padding: 0 3px;
    border-radius: 2px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.05em;
}
.rec-diff-easy { color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.rec-diff-normal { color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.rec-diff-hard { color: #f43f5e; border: 1px solid rgba(244, 63, 94, 0.3); }
.rec-score-dim { color: #667; }
.rec-dist-primary { color: var(--primary); }

.records-loading {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--primary);
    text-align: center;
    padding: 12px 0;
    animation: blink-loading 1.2s ease-in-out infinite;
}
@keyframes blink-loading {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.records-error {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--danger);
    text-align: center;
    padding: 12px 0;
}
.btn-show-more {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    color: #556;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    padding: 6px 8px;
    margin-top: 2px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    transition: color 0.2s, background 0.2s;
}
.btn-show-more:hover {
    color: var(--primary);
    background: rgba(0, 243, 255, 0.05);
}

/* ── Callsign / ship name input ──────────────────── */

.callsign-block {
    margin: 10px 0 8px;
    text-align: center;
}
.callsign-block label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: #889;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.callsign-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.callsign-input {
    background: rgba(0, 10, 20, 0.8);
    border: 1px solid var(--primary);
    color: var(--primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 6px 10px;
    width: 140px;
    text-align: center;
    outline: none;
    transition: border-color 0.2s;
}
.callsign-input::placeholder { color: #335; }
.callsign-input.invalid { border-color: var(--danger); color: var(--danger); }
.callsign-hint {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #556;
    margin-top: 3px;
}
.flag-picker-btn {
    width: 36px;
    height: 36px;
    font-size: 1.3rem;
    background: rgba(0, 10, 20, 0.8);
    border: 1px solid #334;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
}
.flag-picker-btn:hover { border-color: var(--primary); }
.flag-picker-dropdown {
    position: relative;
    max-height: 180px;
    overflow-y: auto;
    background: rgba(5, 8, 18, 0.95);
    border: 1px solid #334;
    border-radius: 4px;
    margin-top: 4px;
    padding: 4px;
}
.flag-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}
.flag-option {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 4px;
    border-radius: 3px;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flag-option .fi {
    font-size: 1.2em;
}
.flag-option:hover { background: rgba(0, 243, 255, 0.15); border-color: var(--primary); }
.flag-mars {
    display: inline-block;
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    flex-shrink: 0;
    border: 1px solid #444;
    border-radius: 2px;
    image-rendering: pixelated;
}
.flag-hint {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #f0c040;
    text-shadow: 0 0 6px rgba(240, 192, 64, 0.5);
    white-space: nowrap;
    transition: opacity 0.5s;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.flag-hint-arrow {
    font-size: 1rem;
    color: #f0c040;
    text-shadow: 0 0 8px rgba(240, 192, 64, 0.6);
    animation: flag-hint-pulse 1.2s ease-in-out infinite;
}
@keyframes flag-hint-pulse {
    0%, 100% { opacity: 0.6; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(3px); }
}
@media (max-width: 600px) {
    .flag-hint {
        font-size: 0.85rem;
        color: #ffd24d;
        text-shadow: 0 0 8px rgba(255, 210, 77, 0.7);
    }
    .flag-hint-arrow {
        font-size: 1.15rem;
    }
}
.submit-rank {
    color: var(--warning);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}
.flag-separator {
    height: 1px;
    background: #223;
    margin: 4px 0;
}
.btn-submit-record {
    margin-top: 6px;
    font-size: 0.7rem !important;
    letter-spacing: 0.1em;
}
.btn-submit-record:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
.submit-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    margin-top: 4px;
    min-height: 1em;
}
.submit-status.ok { color: var(--success); }
.submit-status.fail { color: var(--danger); }
.hidden { display: none !important; }

/* ── Telemetry ───────────────────────────────────── */

.telemetry-menu-display {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    color: var(--primary);
    letter-spacing: 0.1em;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.4);
}

.telemetry-upgrade-row {
    margin-bottom: 12px;
}

.telemetry-upgrade-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    margin-bottom: 4px;
    color: #ccd;
}

.tp-pct {
    font-family: 'JetBrains Mono', monospace;
    color: var(--primary);
    font-size: 0.8rem;
}

.telemetry-bar-bg {
    width: 100%;
    height: 8px;
    background: #1a1a2e;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 5px;
}

.telemetry-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00f3ff, #00cc88);
    border-radius: 4px;
    transition: width 0.3s ease;
    box-shadow: 0 0 6px rgba(0, 243, 255, 0.4);
}

.btn-reset-upgrade {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 4px 8px;
    font-size: 0.7rem;
    background: rgba(255, 60, 60, 0.15);
    border: 1px solid rgba(255, 60, 60, 0.4);
    color: #f66;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-reset-upgrade:hover {
    background: rgba(255, 60, 60, 0.3);
}
.tp-refund-amount {
    color: #0f0;
    font-family: 'JetBrains Mono', monospace;
}

.tp-earned-line {
    font-size: 0.9rem;
    margin-top: 4px;
}

.tp-notify {
    font-size: 0.82rem;
    color: var(--primary);
    text-align: center;
    padding: 4px 8px;
    margin-bottom: 4px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.08em;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.3);
}

/* ── Debug panel ─────────────────────────────────────────────────────────── */

#debug-panel {
    position: fixed;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.78);
    color: #00f3ff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    padding: 10px 14px;
    border: 1px solid #00f3ff;
    border-radius: 4px;
    z-index: 9999;
    pointer-events: auto;
    max-width: 340px;
    line-height: 1.5;
    user-select: none;
}

#debug-panel .debug-title {
    color: #ff0055;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 6px;
    letter-spacing: 0.15em;
}

#debug-panel .debug-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

#debug-panel .debug-label { color: #888; }
#debug-panel .debug-value { color: #00ff66; }

#debug-panel .debug-section {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 243, 255, 0.2);
}

#debug-panel .debug-cheat {
    color: #ff0055;
    font-size: 11px;
}

#debug-panel .debug-cheat.off {
    color: #555;
}

#debug-levels {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

#debug-panel button {
    background: rgba(0, 243, 255, 0.12);
    color: #00f3ff;
    border: 1px solid #00f3ff;
    padding: 3px 10px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    border-radius: 2px;
}

#debug-panel button:hover {
    background: rgba(0, 243, 255, 0.3);
}

#debug-panel button.dev {
    opacity: 0.5;
    border-style: dashed;
}

/* ── Asset Catalog Overlay ───────────────────────────────────────────────── */

#asset-catalog {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.96);
    z-index: 10000;
    font-family: 'JetBrains Mono', monospace;
    color: #ccc;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
}

.catalog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.3);
    flex-shrink: 0;
}

.catalog-header h2 {
    color: #00f3ff;
    font-size: 15px;
    letter-spacing: 0.2em;
    margin: 0;
}

.catalog-close {
    background: rgba(255, 0, 85, 0.15);
    color: #ff0055;
    border: 1px solid #ff0055;
    padding: 4px 10px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    border-radius: 2px;
    width: auto;
    display: inline-block;
    margin: 0;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
}

.catalog-close:hover {
    background: rgba(255, 0, 85, 0.35);
}

.catalog-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 20px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.15);
    flex-shrink: 0;
}

.catalog-tabs button {
    background: rgba(0, 243, 255, 0.08);
    color: #00f3ff;
    border: 1px solid rgba(0, 243, 255, 0.3);
    padding: 4px 12px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    border-radius: 2px;
    width: auto;
    display: inline-block;
    margin: 0;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
}

.catalog-tabs button:hover {
    background: rgba(0, 243, 255, 0.2);
}

.catalog-tabs button.active {
    background: rgba(0, 243, 255, 0.3);
    border-color: #00f3ff;
}

.catalog-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px 40px;
}

.catalog-counter {
    color: #555;
    font-size: 11px;
    margin-bottom: 8px;
}

.catalog-section h3 {
    color: #ff0055;
    font-size: 12px;
    letter-spacing: 0.15em;
    margin: 18px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 0, 85, 0.25);
}

.catalog-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.catalog-grid-lg {
    gap: 16px;
}

.catalog-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(0, 243, 255, 0.12);
    border-radius: 4px;
    padding: 6px;
    width: 140px;
    text-align: center;
    transition: border-color 0.15s;
}

.catalog-card:hover {
    border-color: rgba(0, 243, 255, 0.5);
}

.catalog-card-lg {
    width: 212px;
}

.catalog-card canvas {
    display: block;
    margin: 0 auto 4px;
    border-radius: 2px;
}

.catalog-meta {
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
}

.catalog-id {
    color: #00f3ff;
    font-weight: bold;
    font-size: 10px;
    margin-bottom: 2px;
    word-break: break-all;
}

.catalog-dims { color: #888; }
.catalog-props { color: #666; }

/* ── Catalog Encyclopedia Detail ─────────────────────────────────────────── */

.catalog-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
}

.catalog-detail-card {
    background: rgba(5, 8, 15, 0.96);
    border: 1px solid rgba(0, 243, 255, 0.4);
    border-radius: 8px;
    max-width: 560px;
    width: 92%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 0 40px rgba(0, 243, 255, 0.1),
                inset 0 0 60px rgba(0, 243, 255, 0.02);
    font-family: 'JetBrains Mono', monospace;
}

.catalog-detail-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.2);
}

.catalog-detail-title {
    color: #00f3ff;
    font-size: 16px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.4);
}

.catalog-detail-subtitle {
    color: #666;
    font-size: 10px;
    letter-spacing: 0.1em;
    flex: 1;
}

.catalog-detail-header .catalog-close {
    margin-left: auto;
}

.catalog-detail-body {
    padding: 16px 20px 24px;
}

.catalog-detail-preview {
    text-align: center;
    margin-bottom: 16px;
}

.catalog-detail-preview canvas {
    border-radius: 4px;
    border: 1px solid rgba(0, 243, 255, 0.1);
    max-width: 100%;
    height: auto;
}

.catalog-detail-stats {
    color: #00f3ff;
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: 8px 12px;
    margin-bottom: 16px;
    background: rgba(0, 243, 255, 0.04);
    border-left: 2px solid rgba(0, 243, 255, 0.3);
    border-radius: 0 2px 2px 0;
}

.catalog-detail-lore {
    font-family: 'Inter', sans-serif;
    color: #aab;
    font-size: 14px;
    line-height: 1.85;
    white-space: pre-line;
    letter-spacing: 0.2px;
}

.catalog-card-clickable {
    cursor: pointer;
    position: relative;
}

.catalog-card-clickable::after {
    content: '\2139';
    position: absolute;
    top: 4px;
    right: 6px;
    color: rgba(0, 243, 255, 0.3);
    font-size: 12px;
    transition: color 0.15s;
}

.catalog-card-clickable:hover::after {
    color: rgba(0, 243, 255, 0.8);
}

.catalog-card-clickable:hover {
    border-color: rgba(0, 243, 255, 0.7);
    box-shadow: 0 0 12px rgba(0, 243, 255, 0.15);
}

@media (max-width: 500px) {
    .catalog-detail-card {
        max-width: 95%;
        border-radius: 6px;
    }
    .catalog-detail-preview canvas {
        max-width: 240px;
    }
    .catalog-detail-lore {
        font-size: 11px;
        line-height: 1.6;
    }
}

/* ── Marsopedia Overlay ─────────────────────────────────────────────────── */

#marsopedia-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.96);
    z-index: 9999;
    color: #ccc;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
}

.marsopedia-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.3);
    flex-shrink: 0;
}

.marsopedia-header h2 {
    color: #00f3ff;
    font-size: 15px;
    letter-spacing: 0.2em;
    margin: 0;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
}

.marsopedia-close {
    background: rgba(255, 0, 85, 0.15);
    color: #ff0055;
    border: 1px solid #ff0055;
    padding: 4px 10px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    border-radius: 2px;
    width: auto;
    display: inline-block;
    margin: 0;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
}

.marsopedia-close:hover {
    background: rgba(255, 0, 85, 0.35);
}

.marsopedia-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 20px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.15);
    flex-shrink: 0;
}

.marsopedia-tabs button {
    background: rgba(0, 243, 255, 0.08);
    color: #00f3ff;
    border: 1px solid rgba(0, 243, 255, 0.3);
    padding: 6px 16px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    border-radius: 2px;
    width: auto;
    display: inline-block;
    margin: 0;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.marsopedia-tabs button:hover {
    background: rgba(0, 243, 255, 0.2);
}

.marsopedia-tabs button.active {
    background: rgba(0, 243, 255, 0.3);
    border-color: #00f3ff;
}

.marsopedia-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 40px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

#marsopedia-overlay canvas {
    touch-action: pan-y;
}

.marsopedia-section h3 {
    color: #ff0055;
    font-size: 12px;
    letter-spacing: 0.15em;
    margin: 18px 0 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 0, 85, 0.25);
    text-transform: uppercase;
}

.marsopedia-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.marsopedia-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(0, 243, 255, 0.12);
    border-radius: 4px;
    padding: 8px;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.marsopedia-card canvas {
    display: block;
    margin: 0 auto 4px;
    border-radius: 2px;
    max-width: 100%;
}

.marsopedia-card-clickable {
    cursor: pointer;
}

.marsopedia-card-clickable:hover {
    border-color: rgba(0, 243, 255, 0.7);
    box-shadow: 0 0 12px rgba(0, 243, 255, 0.15);
}

.marsopedia-card-title {
    color: #00f3ff;
    font-size: 13px;
    font-weight: bold;
    margin-top: 4px;
    letter-spacing: 0.05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Marsopedia Tech Layout (sidebar + content) ──────────────────────────── */

.marsopedia-tech-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
    height: 100%;
}

.marsopedia-sidebar {
    width: 200px;
    border-right: 1px solid rgba(0, 243, 255, 0.15);
    padding: 12px 0;
    flex-shrink: 0;
    overflow-y: auto;
}

.marsopedia-sidebar button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    color: #888;
    border: none;
    border-left: 2px solid transparent;
    padding: 10px 16px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
    font-weight: normal;
    border-radius: 0;
}

.marsopedia-sidebar button:hover {
    color: #00f3ff;
    background: rgba(0, 243, 255, 0.04);
}

.marsopedia-sidebar button.active {
    color: #00f3ff;
    border-left-color: #00f3ff;
    background: rgba(0, 243, 255, 0.06);
}

.marsopedia-tech-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 40px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/* ── Marsopedia Detail Card ──────────────────────────────────────────────── */

.marsopedia-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
}

.marsopedia-detail-card {
    background: rgba(5, 8, 15, 0.96);
    border: 1px solid rgba(0, 243, 255, 0.4);
    border-radius: 8px;
    max-width: 560px;
    width: 92%;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    box-shadow: 0 0 40px rgba(0, 243, 255, 0.1),
                inset 0 0 60px rgba(0, 243, 255, 0.02);
}

.marsopedia-detail-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.2);
}

.marsopedia-detail-title {
    color: #00f3ff;
    font-size: 18px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.4);
}

.marsopedia-detail-subtitle {
    color: #888;
    font-size: 13px;
    flex-basis: 100%;
}

.marsopedia-detail-body {
    padding: 16px 20px 20px;
}

.marsopedia-detail-preview {
    text-align: center;
    margin-bottom: 12px;
}

.marsopedia-detail-preview canvas {
    border-radius: 4px;
    border: 1px solid rgba(0, 243, 255, 0.1);
    max-width: 100%;
}

.marsopedia-detail-stats {
    color: #ffaa00;
    font-size: 13px;
    padding: 8px 0;
    border-top: 1px solid rgba(0, 243, 255, 0.1);
    border-bottom: 1px solid rgba(0, 243, 255, 0.1);
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.marsopedia-detail-lore {
    font-family: 'Inter', sans-serif;
    color: #aaa;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.2px;
    white-space: pre-line;
}

/* ── Marsopedia Responsive ───────────────────────────────────────────────── */

@media (max-width: 768px) {
    .marsopedia-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    .marsopedia-card canvas {
        width: 100%;
        aspect-ratio: 1;
        height: auto;
    }
    .marsopedia-sidebar {
        width: 160px;
    }
}

@media (max-width: 600px) {
    .marsopedia-header h2 {
        font-size: 12px;
        letter-spacing: 0.1em;
    }
    .marsopedia-tabs button {
        font-size: 10px;
        padding: 5px 10px;
    }
    .marsopedia-body {
        padding: 12px 12px 30px;
    }
    .marsopedia-grid {
        gap: 8px;
    }
    .marsopedia-card {
        padding: 6px;
    }
    .marsopedia-card canvas {
        width: 100%;
        aspect-ratio: 1;
        height: auto;
    }
    .marsopedia-card-title {
        font-size: 10px;
    }
    .marsopedia-tech-layout {
        flex-direction: column;
    }
    .marsopedia-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(0, 243, 255, 0.15);
        display: flex;
        overflow-x: auto;
        padding: 4px 8px;
        flex-shrink: 0;
    }
    .marsopedia-sidebar button {
        white-space: nowrap;
        border-left: none;
        border-bottom: 2px solid transparent;
        padding: 8px 12px;
    }
    .marsopedia-sidebar button.active {
        border-left-color: transparent;
        border-bottom-color: #00f3ff;
    }
    .marsopedia-tech-content {
        padding: 12px 12px 30px;
    }
    .marsopedia-detail-card {
        max-width: 95%;
        border-radius: 6px;
    }
    .marsopedia-detail-preview canvas {
        max-width: 240px;
    }
    .marsopedia-detail-lore {
        font-size: 12px;
        line-height: 1.6;
    }
}

@media (max-width: 400px) {
    .marsopedia-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .marsopedia-card {
        padding: 4px;
    }
    .marsopedia-card-title {
        font-size: 9px;
    }
    .marsopedia-tabs button {
        font-size: 10px;
        padding: 4px 8px;
    }
}

/* ── Marsopedia Menu Button ──────────────────────────────────────────────── */

.btn-marsopedia {
    width: 100%;
}

/* ── Mars Atlas Overlay — Nav-Com UI ─────────────────────────────────────── */

#mars-atlas-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    font-family: 'JetBrains Mono', monospace;
    color: #00f3ff;
    overflow: hidden;
    pointer-events: auto;
}

/* Map fills entire overlay */
#mars-atlas-map {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #111;
}

/* Hide default Leaflet controls — we use custom ones */
#mars-atlas-overlay .leaflet-control-zoom,
#mars-atlas-overlay .leaflet-control-attribution { display: none !important; }

/* Vignette — edge darkening */
.mars-atlas-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.7) 100%);
    z-index: 2;
    pointer-events: none;
}

/* Scanlines — old monitor effect */
.mars-atlas-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0,0,0,0.08) 2px,
        rgba(0,0,0,0.08) 4px
    );
    z-index: 3;
    pointer-events: none;
}

/* Reticle — center crosshair */
.mars-atlas-reticle {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100px; height: 100px;
    z-index: 4;
    pointer-events: none;
}
.mars-atlas-reticle::before,
.mars-atlas-reticle::after {
    content: '';
    position: absolute;
    background: rgba(0, 243, 255, 0.25);
}
.mars-atlas-reticle::before { top: 50%; left: 0; right: 0; height: 1px; }
.mars-atlas-reticle::after  { left: 50%; top: 0; bottom: 0; width: 1px; }
.mars-atlas-reticle-center {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 8px; height: 8px;
    border: 1px solid #00f3ff;
    border-radius: 50%;
    box-shadow: 0 0 5px #00f3ff;
}
.mars-atlas-reticle-corner {
    position: absolute;
    width: 12px; height: 12px;
    border-color: rgba(0, 243, 255, 0.4);
    border-style: solid;
    border-width: 0;
}
.mars-atlas-reticle-corner.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.mars-atlas-reticle-corner.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.mars-atlas-reticle-corner.bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.mars-atlas-reticle-corner.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* Glass panel base */
#mars-atlas-overlay .glass-panel {
    background: rgba(5, 10, 16, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 243, 255, 0.3);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

/* UI layer — above map, vignette, scanlines */
.mars-atlas-ui {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

/* ─ Header ─ */
.mars-atlas-header {
    flex-shrink: 0;
    pointer-events: auto;
    border-top: none;
    border-left: none;
    border-right: none;
    display: flex;
    flex-direction: column;
}

.mars-atlas-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.15);
}

.mars-atlas-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mars-atlas-title-icon {
    font-size: 18px;
    filter: grayscale(1) brightness(2);
}

.mars-atlas-title {
    color: #00f3ff;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-shadow: 0 0 8px #00f3ff;
    margin: 0;
}

.mars-atlas-subtitle {
    font-size: 10px;
    color: rgba(0, 243, 255, 0.45);
    letter-spacing: 0.1em;
    margin-left: 8px;
    font-weight: normal;
}

.mars-atlas-close {
    background: none;
    border: none;
    color: #ff0055;
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
}
.mars-atlas-close:hover {
    background: rgba(255, 0, 85, 0.15);
    color: #ff4488;
}

/* ─ Tabs ─ */
.mars-atlas-tabs {
    display: flex;
    flex-shrink: 0;
}

.mars-atlas-tab {
    padding: 8px 20px;
    border: none;
    border-right: 1px solid rgba(0, 243, 255, 0.15);
    background: none;
    color: rgba(0, 243, 255, 0.45);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mars-atlas-tab:hover {
    color: #00f3ff;
    background: rgba(0, 243, 255, 0.05);
}
.mars-atlas-tab.active {
    color: #fff;
    background: rgba(0, 243, 255, 0.12);
    text-shadow: 0 0 8px #00f3ff;
    box-shadow: inset 0 -2px 0 #00f3ff;
}
.mars-atlas-tab-icon {
    font-size: 14px;
}

/* ─ Zoom Controls ─ */
.mars-atlas-controls {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: auto;
    z-index: 11;
}

.mars-atlas-zoom-btn {
    width: 40px; height: 40px;
    display: flex; justify-content: center; align-items: center;
    background: rgba(5, 10, 16, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 243, 255, 0.3);
    color: #00f3ff;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'JetBrains Mono', monospace;
}
.mars-atlas-zoom-btn:first-child { border-radius: 4px 4px 0 0; }
.mars-atlas-zoom-btn:last-child  { border-radius: 0 0 4px 4px; border-top: none; }
.mars-atlas-zoom-btn:hover {
    background: rgba(0, 243, 255, 0.2);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

/* ─ Spacer ─ */
.mars-atlas-spacer { flex: 1; }

/* ─ Footer (Telemetry) ─ */
.mars-atlas-footer {
    flex-shrink: 0;
    pointer-events: auto;
    border-bottom: none;
    border-left: none;
    border-right: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 20px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mars-atlas-coords {
    display: flex;
    gap: 16px;
    align-items: center;
    color: rgba(0, 243, 255, 0.5);
}
.mars-atlas-coords-icon {
    color: rgba(0, 243, 255, 0.6);
    font-size: 14px;
}
.mars-atlas-coords b {
    color: #00f3ff;
    font-weight: normal;
}

.mars-atlas-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(0, 243, 255, 0.35);
}
.mars-atlas-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #00f3ff;
    animation: mars-atlas-pulse 2s ease-in-out infinite;
}
@keyframes mars-atlas-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 4px #00f3ff; }
    50% { opacity: 0.4; box-shadow: none; }
}

.mars-atlas-scale {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(0, 243, 255, 0.5);
}
.mars-atlas-scale-bar {
    width: 80px;
    height: 1px;
    background: rgba(0, 243, 255, 0.5);
    position: relative;
}
.mars-atlas-scale-tick {
    position: absolute;
    width: 1px;
    height: 7px;
    top: -3px;
    background: rgba(0, 243, 255, 0.5);
}
.mars-atlas-scale-tick.left  { left: 0; }
.mars-atlas-scale-tick.right { right: 0; }
.mars-atlas-scale-label {
    font-size: 10px;
    color: rgba(0, 243, 255, 0.4);
}

/* ─ Mobile adaptations ─ */
@media (max-width: 600px) {
    .mars-atlas-tabs { flex-wrap: wrap; }
    .mars-atlas-tab { padding: 6px 10px; font-size: 10px; }
    .mars-atlas-footer { flex-wrap: wrap; gap: 4px; padding: 4px 10px; font-size: 10px; }
    .mars-atlas-status { display: none; }
    .mars-atlas-reticle { width: 60px; height: 60px; }
}

/* ── Port Fee Receipt ────────────────────────────────────────────────────── */

.port-fee-receipt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #8899aa;
    background: rgba(15, 18, 30, 0.7);
    border: 1px dashed #334;
    padding: 8px 10px;
    margin: 6px 0;
    line-height: 1.6;
    white-space: pre;
    text-shadow: 0 0 3px rgba(136,153,170,0.3);
    overflow-x: auto;
}
.port-fee-receipt .receipt-header {
    color: #667;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.65rem;
}
.port-fee-receipt .receipt-item {
    color: #cc6644;
}
.port-fee-receipt .receipt-total {
    color: #ff4400;
    font-weight: bold;
}
.port-fee-receipt .receipt-debt {
    color: #ff0055;
    font-size: 0.7rem;
}
.port-fee-receipt .receipt-dead {
    color: #556;
    font-style: italic;
}
.port-fee-receipt .receipt-toggle {
    display: block;
    cursor: pointer;
    color: #ff4400;
    font-weight: bold;
    font-size: 0.75rem;
    white-space: pre;
    user-select: none;
}
.port-fee-receipt .receipt-toggle:hover {
    color: #ff6633;
}
.port-fee-receipt .receipt-body {
    overflow: hidden;
    transition: max-height 0.4s ease;
}

/* ── Mars Radio Deck ───────────────────────────────────────────────────────── */

.radio-deck {
    background: #0a0e14;
    border: 1px solid #334455;
    border-radius: 8px;
    padding: 12px;
    display: flex; flex-direction: column; gap: 12px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 1);
    margin-bottom: 20px;
}

/* Terminal Screen */
.radio-screen {
    background: #031005;
    border: 1px solid #00ff66;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    box-shadow: 0 0 10px rgba(0, 255, 102, 0.1);
    overflow: hidden;
}
.radio-title {
    font-size: 0.65rem;
    color: #008833;
    letter-spacing: 2px;
    margin-bottom: 5px;
}
.radio-marquee-wrap {
    overflow: hidden;
    white-space: nowrap;
    height: 1.3em;
}
.radio-marquee {
    display: inline-block;
    color: #00ff66;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    font-weight: bold;
    text-shadow: 0 0 5px #00ff66;
    animation: radio-scroll 10s linear infinite;
}
.radio-marquee.stopped {
    animation: none;
}
@keyframes radio-scroll {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* Player Controls (one horizontal row) */
.radio-controls {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.control-btn {
    flex: 1;
    background: #111822;
    border: 1px solid #2a3545;
    color: #8899aa;
    padding: 8px 0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.85rem;
}
.control-btn:hover {
    background: #1a2533;
    border-color: #00f3ff;
    color: #00f3ff;
}
.control-btn:active {
    background: rgba(0, 243, 255, 0.1);
}
.control-btn.active {
    background: #002211;
    border-color: #00ff66;
    color: #00ff66;
}

/* Playlist & Scrollbar */
.playlist {
    max-height: 120px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px;
    padding-right: 5px;
}

/* Track Items */
.track-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: transparent;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.track-item:hover:not(.locked) {
    background: rgba(255, 255, 255, 0.05);
}
.track-item.selected {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(0, 243, 255, 0.05);
}
.track-item.playing {
    background: rgba(0, 255, 102, 0.1);
    border-color: rgba(0, 255, 102, 0.3);
    color: #00ff66;
}
.track-item.locked {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.track-info {
    display: flex;
    align-items: center;
    gap: 8px;
}
.track-tag {
    font-size: 0.6rem;
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid #445;
    color: #889;
}
.playing .track-tag {
    border-color: #00ff66;
    color: #00ff66;
}

/* ── Track Find Notification ─────────────────────────────────────────────── */

.track-find-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    justify-content: center;
    align-items: center;
}

.track-find-overlay.visible {
    display: flex;
    pointer-events: auto;
    animation: track-find-in 0.4s ease-out;
}

.track-find-overlay.hiding {
    animation: track-find-out 0.6s ease-in forwards;
}

.track-find-content {
    background: rgba(0, 10, 0, 0.92);
    border: 1px solid #33ff66;
    border-radius: 8px;
    padding: 16px 24px;
    max-width: 440px;
    text-align: center;
    box-shadow: 0 0 30px rgba(51, 255, 102, 0.3), inset 0 0 20px rgba(51, 255, 102, 0.05);
}

#track-find-text {
    color: #33ff66;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    text-shadow: 0 0 6px rgba(51, 255, 102, 0.5);
}

@keyframes track-find-in {
    0%   { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes track-find-out {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.9) translateY(-20px); }
}

/* ── Lore block in track-find notification ─────────────────────────────────── */

.track-find-lore {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(51, 255, 102, 0.3);
    text-align: left;
    font-family: 'JetBrains Mono', monospace;
}
.track-find-lore .lore-divider {
    color: #33aa44;
    font-size: 0.65rem;
    letter-spacing: 2px;
    opacity: 0.5;
    overflow: hidden;
    white-space: nowrap;
}
.track-find-lore .lore-scan-status {
    color: #ffaa00;
    font-size: 0.7rem;
    letter-spacing: 1px;
    margin: 4px 0 2px;
    animation: lore-blink 1.5s ease-in-out 2;
}
.track-find-lore .lore-source {
    color: #33ff66;
    font-size: 0.7rem;
    margin-bottom: 2px;
}
.track-find-lore .lore-author {
    color: #44aa55;
    font-size: 0.65rem;
    font-style: italic;
    margin-bottom: 8px;
    opacity: 0.7;
}
.track-find-lore .lore-body {
    color: #33dd55;
    font-size: 0.75rem;
    line-height: 1.5;
    text-shadow: 0 0 4px rgba(51, 221, 85, 0.3);
    white-space: pre-wrap;
    max-height: 160px;
    overflow-y: auto;
}

@keyframes lore-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.track-find-takeoff-hint {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed rgba(51, 255, 102, 0.3);
    color: #33ff66;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-align: center;
    animation: lore-blink 1.5s ease-in-out infinite;
}

.track-find-takeoff-hint.track-find-takeoff-btn {
    margin-top: 18px;
    padding: 12px 32px;
    background: rgba(51, 255, 102, 0.12);
    border: 1px solid #33ff66;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: takeoff-pulse 0.4s ease-in-out infinite alternate;
}

/* ── Ice Lens Discovery Overlay ────────────────────────────────────────────── */

.ice-discovery-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: radial-gradient(ellipse at center, rgba(0,40,60,0.92) 0%, rgba(0,0,0,0.96) 100%);
    justify-content: center;
    align-items: center;
    animation: track-find-in 0.4s ease-out;
}
.ice-discovery-overlay.visible {
    display: flex;
}
.ice-discovery-overlay.hiding {
    animation: track-find-out 0.6s ease-in forwards;
}

.ice-discovery-content {
    max-width: 420px;
    padding: 28px 24px;
    text-align: center;
    font-family: 'JetBrains Mono', 'Oxanium', monospace;
}

.ice-discovery-title {
    color: #00f3ff;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 0 12px rgba(0,243,255,0.6);
    margin-bottom: 18px;
}

.ice-discovery-body {
    color: #88ccdd;
    font-size: 0.8rem;
    line-height: 1.7;
    white-space: pre-wrap;
    text-shadow: 0 0 4px rgba(136,204,221,0.3);
    max-height: 200px;
    overflow-y: auto;
}

.ice-discovery-hint {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px dashed rgba(0,243,255,0.3);
    color: #00f3ff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-align: center;
    animation: lore-blink 1.5s ease-in-out infinite;
}

.ice-discovery-hint.ice-discovery-takeoff-btn {
    margin-top: 18px;
    padding: 12px 32px;
    background: rgba(0,243,255,0.12);
    border: 1px solid #00f3ff;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: takeoff-pulse 0.4s ease-in-out infinite alternate;
}

/* ── Drill Tutorial Overlay ───────────────────────────────────────────────── */

.drill-tutorial-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    background: rgba(0,0,0,0.82);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: track-find-in 0.3s ease-out;
}

.drill-tutorial-content {
    max-width: 320px;
    padding: 24px 20px;
    text-align: center;
    font-family: 'JetBrains Mono', 'Oxanium', monospace;
    background: rgba(0,30,40,0.9);
    border: 1px solid rgba(0,243,255,0.3);
    border-radius: 10px;
}

.drill-tutorial-title {
    color: #00f3ff;
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(0,243,255,0.5);
    margin-bottom: 14px;
}

.drill-tutorial-body {
    color: #aaddee;
    font-size: 0.78rem;
    line-height: 1.8;
    white-space: pre-wrap;
    text-shadow: 0 0 3px rgba(170,221,238,0.2);
    margin-bottom: 16px;
}

.drill-tutorial-btn {
    background: rgba(0,243,255,0.15);
    border: 1px solid #00f3ff;
    border-radius: 6px;
    color: #00f3ff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 10px 28px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.drill-tutorial-btn:hover {
    background: rgba(0,243,255,0.25);
}

/* ── Shop Layout Wrapper (two-column dashboard) ───────────────────────────── */

.shop-layout {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    gap: 0;
}

#screen-shop .col-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 15px 18px;
}

#screen-shop .col-right {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    overflow-y: auto;
    padding: 15px 18px;
    border-left: 1px solid #333;
}

#screen-shop .col-right .shop-body {
    overflow-y: auto;
}

/* Pin radio to bottom of right column */
#screen-shop .radio-deck {
    margin-top: auto;
}

/* Bottom bar for landscape mobile — hidden by default */
.shop-bottom-bar {
    display: none;
}


/* ── Compact Radio Layout (in shop) ──────────────────────────────────────── */

.radio-compact {
    padding: 10px;
    gap: 8px;
}

.radio-compact .radio-top-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.radio-compact .radio-top-row .radio-screen {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
}

.radio-compact .radio-top-row .radio-controls {
    flex-shrink: 0;
    display: flex;
    gap: 4px;
}

.radio-compact .control-btn {
    flex: none;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 0.8rem;
}

/* Playlist hidden by default, shown via toggle */
.radio-compact .playlist {
    display: none;
    max-height: 150px;
    overflow-y: auto;
    margin-top: 5px;
    border-top: 1px solid #2a3545;
    padding-top: 5px;
}

.radio-compact .playlist.open {
    display: flex;
}

/* ── Mobile: radio player — screen on top as full-width strip ──────────── */
@media (max-width: 800px) {
    .radio-compact .radio-top-row {
        flex-direction: column;
        gap: 6px;
    }
    .radio-compact .radio-top-row .radio-screen {
        width: 100%;
        padding: 6px 10px;
    }
    .radio-compact .radio-top-row .radio-controls {
        width: 100%;
        justify-content: center;
        gap: 6px;
    }
}

/* ── Mobile: stack to single column ──────────────────────────────────────── */

@media (max-width: 800px) {
    #screen-shop {
        max-width: 100%;
        width: 98%;
        overflow-y: auto;
        left: 50%;
    }
    .shop-layout {
        flex-direction: column;
        flex: 0 0 auto;
        overflow: visible;
    }
    #screen-shop .col-left {
        flex: 0 0 auto;
        max-width: 100%;
        overflow-y: visible;
    }
    #screen-shop .col-right {
        overflow-y: visible;
        border-left: none;
        border-top: 1px solid #333;
    }
}

/* ── Small screens: full-width shop (phones only) ───── */
@media (pointer: coarse) and (max-width: 767px), (max-height: 700px) and (max-width: 767px) {
    #screen-shop {
        max-width: 98vw !important;
        width: 98vw !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        touch-action: pan-y;
        overscroll-behavior: contain;
    }

    /* Flex column layout: scrollable content + pinned bottom bar */
    #screen-shop.active {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #screen-shop .shop-layout {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #screen-shop .shop-bottom-bar {
        display: flex;
        flex-shrink: 0;
        gap: 8px;
        padding: 8px 12px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        border-top: 1px solid #333;
        background: rgba(5, 10, 20, 0.95);
    }

    #screen-shop .shop-bottom-bar .master-service-btn,
    #screen-shop .shop-bottom-bar .btn-primary {
        flex: 1;
        margin: 0;
        min-height: 44px;
    }

    .shop-header { cursor: default !important; }
}

/* ── Tablet touch: compact resizable shop + touch drag ───── */
@media (pointer: coarse) and (min-width: 768px) {
    #screen-shop {
        width: 90%;
        max-width: 850px;
        overflow-y: auto;
        touch-action: none;
    }
    .shop-header {
        cursor: grab !important;
    }
    .shop-header.dragging { cursor: grabbing !important; }
}

/* ── Fullscreen Toggle Button ──────────────────────────────────────────────── */

.btn-fullscreen {
    justify-content: center;
}

.btn-fullscreen.is-fullscreen {
    border-color: var(--success);
    color: var(--success);
}

.btn-fullscreen.is-fullscreen:hover:not(:disabled) {
    background: rgba(0, 255, 102, 0.15);
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.4);
}

/* ── Landscape Mobile Adaptive Layout ──────────────────────────────────────── */

@media (max-height: 600px) and (orientation: landscape) {

    /* General screens: wider for landscape phones */
    .screen {
        max-width: 90vw;
        width: 90vw;
        max-height: 90vh;
        padding: 12px;
        padding-top: max(12px, env(safe-area-inset-top));
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    .menu-top-bar {
        width: 90vw;
    }

    /* === SETTINGS SCREEN: compact in landscape === */
    /* Settings screen: compact in landscape */
    .settings-header h2 {
        font-size: 0.95rem;
    }
    .settings-content {
        padding: 10px;
        gap: 10px;
    }
    .settings-group { padding: 10px; }

    /* === SHOP SCREEN: landscape tweaks === */
    #screen-shop {
        padding: 0;
    }

    #screen-shop.active {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #screen-shop .col-left {
        flex: 0 0 auto;
        max-width: 100%;
        overflow-y: visible;
        padding: 12px;
    }

    #screen-shop .col-left .shop-header {
        flex-shrink: 0;
        padding-bottom: 8px;
    }

    #screen-shop .col-left .shop-footer {
        padding-top: 8px;
    }

    #screen-shop .col-right {
        flex: 0 0 auto;
        overflow-y: visible;
        border-left: none;
        border-top: 1px solid #333;
        padding: 12px;
    }

    /* Bottom bar: fixed action buttons at the bottom */
    #screen-shop .shop-bottom-bar {
        display: flex;
        flex-shrink: 0;
        gap: 8px;
        padding: 8px 12px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        border-top: 1px solid #333;
        background: rgba(5, 10, 20, 0.95);
    }

    #screen-shop .shop-bottom-bar .master-service-btn,
    #screen-shop .shop-bottom-bar .btn-primary {
        flex: 1;
        margin: 0;
        min-height: 44px;
    }

    #screen-shop .shop-layout {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* HUD: more compact in landscape */
    #hud {
        gap: 6px;
    }

    /* Base info dialog: compact in landscape */
    #base-info-box {
        max-height: 80vh;
        overflow-y: auto;
        padding: 14px 18px;
        font-size: 0.78rem;
    }
}

/* ── Base info dialog ──────────────────────────────────────────────────── */
#base-info-dialog {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    align-items: center;
    justify-content: center;
    z-index: 160;
    backdrop-filter: blur(4px);
}
#base-info-box {
    background: #0a0d0a;
    border: 1px solid #00f3ff;
    box-shadow: 0 0 20px rgba(0,243,255,0.15);
    max-width: 420px;
    padding: 22px 28px;
    border-radius: 6px;
    color: #ccd;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
    max-height: 90vh;
    overflow-y: auto;
}

/* ── Academy instruction dialog ────────────────────────────────────────── */
#academy-instruction {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.78);
    align-items: center;
    justify-content: center;
    z-index: 200;
    pointer-events: auto;
}
#academy-instruction-box {
    background: #000d00;
    border: 2px solid #00cc00;
    padding: 24px 32px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 20px rgba(0,255,0,0.3);
    font-family: 'JetBrains Mono', monospace;
    max-height: 90vh;
    overflow-y: auto;
}
#ac-instruction-text {
    color: #00ff00;
    font-size: 0.85rem;
    line-height: 1.6;
    white-space: pre-wrap;
    text-align: left;
    margin: 0 0 20px 0;
}
@media (max-height: 600px) and (orientation: landscape) {
    #academy-instruction-box {
        max-height: 80vh;
        padding: 14px 18px;
    }
    #ac-instruction-text {
        font-size: 0.75rem;
        line-height: 1.4;
        margin: 0 0 12px 0;
    }
}

/* ── Small embed: width ≤ 960px (itch.io) ───────────────────────────────── */

@media (max-width: 960px) {
    .screen {
        width: min(90%, 450px);
    }
}

/* ── Small embed: height ≤ 550px (itch.io 960×540, 800×450) ─────────────── */

@media (max-height: 550px) {
    .screen {
        top: 50%;
        max-height: calc(95vh - 20px);
        padding: 12px;
    }

    #screen-start {
        padding: 10px 20px 15px;
    }
    .menu-logo {
        max-width: 200px;
        margin-bottom: 2px;
    }
    #menu-tagline {
        margin-bottom: 8px;
        font-size: 0.75rem;
    }
    #beta-badge {
        margin-bottom: 0;
        padding: 2px 10px;
        font-size: 0.65rem;
    }
    .discord-link {
        margin-bottom: 0;
        padding: 2px 10px;
        font-size: 0.6rem;
    }
    .menu-buttons-container {
        gap: 6px;
        margin-top: 6px;
    }
    #screen-start .btn-primary {
        padding: 10px 12px;
        font-size: 1rem;
    }
    #screen-start .menu-row-game .btn-settings,
    #screen-start .menu-row-knowledge .btn-settings {
        padding: 8px 6px;
        font-size: 0.75rem;
    }
    #screen-start .menu-row-util .btn-settings {
        padding: 6px 4px;
        font-size: 0.7rem;
    }
    .records-tabs-container {
        margin: 4px 0 2px;
    }
    #menu-controls-hint {
        display: none;
    }
    h1, h2 {
        margin-bottom: 8px;
        font-size: 1rem;
    }

    #hud {
        padding: 3px 8px;
        gap: 4px;
    }
    .hud-stat {
        font-size: 0.75rem;
    }
    .bar-container {
        width: 50px;
        height: 6px;
    }

    #screen-shop .col-left { padding: 8px 10px; gap: 8px; }
    #screen-shop .col-right { padding: 8px 10px; gap: 6px; }
    .shop-header h2 { margin-bottom: 4px; }
    .maintenance-row { gap: 4px; }
    .maint-btn { padding: 6px 4px; font-size: 0.7rem; }
    .maint-btn .maint-icon { font-size: 1.1rem; margin-bottom: 2px; }

    .callsign-block { margin: 4px 0; }

    .help-section { margin-bottom: 6px; padding: 6px 8px; }
    .help-grid { font-size: 0.72rem; gap: 3px 8px; }

    .npc-dialog-content { padding: 12px 16px; max-width: 380px; }
    .track-find-content { padding: 10px 16px; max-width: 400px; }

    #academy-instruction > div {
        padding: 14px 18px !important;
        max-width: 360px !important;
    }
    #academy-shop > div {
        padding: 14px 18px !important;
        max-width: 380px !important;
    }
}

/* ── Tiny embed: height ≤ 460px (itch.io 800×450) ───────────────────────── */

@media (max-height: 460px) {
    .screen {
        max-height: calc(98vh - 10px);
        padding: 8px;
        border-radius: 8px;
    }
    #screen-start {
        padding: 6px 15px 10px;
    }
    .menu-logo {
        max-width: 150px;
    }
    #menu-tagline {
        margin-bottom: 4px;
        font-size: 0.65rem;
    }
    #beta-badge {
        margin-bottom: 0;
        padding: 1px 8px;
        font-size: 0.55rem;
    }
    .discord-link {
        display: none;
    }
    .menu-buttons-container {
        gap: 4px;
        margin-top: 4px;
    }
    #screen-start .btn-primary {
        padding: 8px 10px;
        font-size: 0.9rem;
    }
    #screen-start .menu-row-game .btn-settings,
    #screen-start .menu-row-knowledge .btn-settings {
        padding: 6px 4px;
        font-size: 0.7rem;
    }
    #screen-start .menu-row-util .btn-settings {
        padding: 6px 4px;
        font-size: 0.68rem;
    }
    .menu-top-bar {
        position: fixed;
        top: 4px;
        left: 50%;
        transform: translateX(-50%);
        width: 90vw;
        margin-bottom: 0;
    }
    #hud {
        padding: 2px 6px;
        gap: 3px;
    }
    .hud-stat { font-size: 0.7rem; }
    .hud-stat span { font-size: 0.6rem; }
    .bar-container { width: 40px; height: 5px; }

    .shop-layout { flex-direction: column; flex: 0 0 auto; overflow: visible; }
    #screen-shop .col-left { flex: 0 0 auto; max-width: 100%; }
    #screen-shop .col-right {
        overflow-y: visible;
        border-left: none;
        border-top: 1px solid #333;
    }
    #screen-shop { max-width: 450px; overflow-y: auto; }

    .npc-dialog-content { padding: 10px 12px; max-width: 350px; }
    #npc-dialog-text { font-size: 0.78rem; line-height: 1.4; }
    .track-find-content { padding: 8px 12px; max-width: 360px; }

    #academy-instruction > div {
        padding: 8px 12px !important;
        max-width: 340px !important;
    }
    #academy-instruction pre {
        font-size: 0.7rem !important;
        line-height: 1.3 !important;
        margin: 0 0 8px 0 !important;
        max-height: 200px;
        overflow-y: auto;
    }
    #academy-shop > div {
        padding: 10px 12px !important;
        max-width: 360px !important;
    }
}

/* ── Language dropdown ──────────────────────────────────────────────────── */

.lang-dropdown {
    position: relative;
    display: inline-block;
    margin: 6px 0;
}

.lang-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #1a2233;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: opacity 0.2s, background 0.2s;
}

.lang-dropdown-trigger:hover {
    background: rgba(0, 0, 0, 0.7);
}

.lang-arrow {
    font-size: 0.6rem;
    color: var(--primary);
    opacity: 0.7;
}

.lang-dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    min-width: 140px;
    margin-top: 4px;
    background: rgba(8, 12, 20, 0.95);
    border: 1px solid rgba(0, 243, 255, 0.2);
    border-radius: 4px;
    padding: 4px 0;
    backdrop-filter: blur(6px);
}

.lang-dropdown.open .lang-dropdown-list {
    display: block;
}

.lang-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    padding: 6px 12px;
    cursor: pointer;
    text-align: left;
    opacity: 0.7;
    transition: background 0.15s, opacity 0.15s;
}

.lang-dropdown-item:hover {
    background: rgba(0, 243, 255, 0.08);
    opacity: 1;
}

.lang-dropdown-item.lang-active {
    opacity: 1;
    background: rgba(0, 243, 255, 0.12);
}

/* Globe icon in language trigger */
.lang-globe {
    font-size: 1em;
    line-height: 1;
}

.lang-current-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── NPC Dialog (Doctor Rust encounter) ────────────────────────────────── */

#npc-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    pointer-events: auto;
}

.npc-dialog-content {
    background: rgba(10, 15, 10, 0.92);
    border: 1px solid var(--success);
    border-radius: 12px;
    padding: 20px 24px;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    width: 90%;
    box-shadow: 0 0 30px rgba(0, 255, 100, 0.15),
                inset 0 0 40px rgba(0, 255, 100, 0.03);
}

.npc-dialog-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.npc-dialog-text-col {
    flex: 1;
    min-width: 0;
}

.npc-portrait-frame {
    flex-shrink: 0;
    width: 100px;
    height: 140px;
    border: 1px solid var(--success);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 12px rgba(0, 255, 100, 0.3),
                inset 0 0 8px rgba(0, 255, 100, 0.1);
    position: relative;
}

.npc-portrait {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
}

.npc-portrait-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        transparent 0px, transparent 2px,
        rgba(0, 255, 100, 0.03) 2px, rgba(0, 255, 100, 0.03) 4px
    );
    pointer-events: none;
}

/* ── Lina Dune amber theme ─────────────────────────────────────────────────── */

#npc-dialog.npc-lina .npc-dialog-content {
    border-color: #d4a020;
    box-shadow: 0 0 30px rgba(212, 160, 32, 0.15),
                inset 0 0 40px rgba(212, 160, 32, 0.03);
}

#npc-dialog.npc-lina .npc-dialog-header {
    color: #d4a020;
    text-shadow: 0 0 8px #d4a020;
}

#npc-dialog.npc-lina .npc-portrait-frame {
    border-color: #d4a020;
    box-shadow: 0 0 12px rgba(212, 160, 32, 0.3),
                inset 0 0 8px rgba(212, 160, 32, 0.1);
}

#npc-dialog.npc-lina .npc-portrait-frame::after {
    background: repeating-linear-gradient(
        transparent 0px, transparent 2px,
        rgba(212, 160, 32, 0.03) 2px, rgba(212, 160, 32, 0.03) 4px
    );
}

#npc-dialog.npc-lina #npc-dialog-reward {
    color: #d4a020;
    text-shadow: 0 0 10px rgba(212, 160, 32, 0.5);
}

#npc-dialog.npc-lina #btn-npc-accept {
    border-color: #d4a020;
}

.npc-dialog-header {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--success);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
    text-shadow: 0 0 8px var(--success);
}

#npc-dialog-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    line-height: 1.7;
    letter-spacing: 0.2px;
    color: #ccd;
    margin: 0 0 8px 0;
    white-space: pre-line;
}

#npc-dialog-reward {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--success);
    text-shadow: 0 0 10px rgba(0, 255, 100, 0.5);
    text-align: center;
    margin: 8px 0 0;
    letter-spacing: 0.1em;
}

/* ── NPC Dialog — Mobile ────────────────────────────────────────────────── */

@media (max-width: 400px) {
    .npc-dialog-body {
        flex-direction: column;
        align-items: center;
    }
    .npc-portrait-frame {
        width: 80px;
        height: 112px;
    }
}

/* ── Welcome Dialog (first base visit) ─────────────────────────────────── */

#welcome-dialog {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 160;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    pointer-events: auto;
}

.welcome-dialog-content {
    position: relative;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    background: rgba(5, 12, 20, 0.95);
    border: 1px solid rgba(0, 243, 255, 0.4);
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 243, 255, 0.05);
    display: flex;
    flex-direction: column;
    animation: wd-appear 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    overscroll-behavior: contain;
}

@keyframes wd-appear {
    0% { transform: scale(0.95) translateY(10px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.wd-scanlines {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.15));
    background-size: 100% 4px;
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
}

.wd-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.2);
    background: rgba(0, 243, 255, 0.06);
}

.wd-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wd-icon-terminal {
    color: #00f3ff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    font-weight: bold;
}

.wd-title {
    font-family: 'JetBrains Mono', monospace;
    color: #00f3ff;
    font-size: 0.95rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-shadow: 0 0 10px #00f3ff;
    margin: 0;
}

.wd-sys-tag {
    font-size: 0.6rem;
    color: rgba(0, 243, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: bold;
    font-family: 'JetBrains Mono', monospace;
}

.wd-body {
    position: relative;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    flex: 1 1 auto;
    min-height: 0;
}

.wd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.wd-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    flex-shrink: 0;
    font-size: 1rem;
    border: 1px solid currentColor;
    opacity: 0.8;
}

.wd-icon-fee    { color: #f43f5e; background: rgba(244, 63, 94, 0.1); }
.wd-icon-repair { color: #38bdf8; background: rgba(56, 189, 248, 0.1); }
.wd-icon-cargo  { color: #34d399; background: rgba(52, 211, 153, 0.1); }
.wd-icon-module { color: #a855f7; background: rgba(168, 85, 247, 0.1); }
.wd-icon-tech   { color: #eab308; background: rgba(234, 179, 8, 0.1); }

.wd-item-text {
    font-size: 0.82rem;
    color: #bbc;
    font-family: 'JetBrains Mono', monospace;
}

.wd-item-fee em    { color: #f43f5e; font-style: normal; font-weight: bold; }
.wd-item-repair em { color: #38bdf8; font-style: normal; font-weight: bold; }
.wd-item-cargo em  { color: #34d399; font-style: normal; font-weight: bold; }
.wd-item-module em { color: #a855f7; font-style: normal; font-weight: bold; }
.wd-item-tech em   { color: #eab308; font-style: normal; font-weight: bold; }

.wd-luck {
    margin-top: 12px;
    margin-bottom: 4px;
    color: #00f3ff;
    font-size: 0.82rem;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.wd-luck::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 1.1em;
    background-color: #00f3ff;
    vertical-align: middle;
    margin-left: 4px;
    animation: wd-blink 1s step-end infinite;
}

@keyframes wd-blink { 50% { opacity: 0; } }

.wd-footer {
    position: relative;
    padding: 4px 16px 16px;
}

.wd-btn {
    width: 100%;
    padding: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid #10b981;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

.wd-btn:hover {
    background: #10b981;
    color: #000;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

.wd-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    transition: 0s;
}

.wd-btn:hover::after {
    left: 200%;
    transition: 0.5s ease-in-out;
}

@media (max-width: 400px) {
    .welcome-dialog-content { max-width: 350px; }
    .wd-header { padding: 8px 12px; }
    .wd-body { padding: 10px 12px; gap: 6px; }
    .wd-item { padding: 7px 8px; gap: 8px; }
    .wd-icon { width: 28px; height: 28px; font-size: 0.85rem; }
    .wd-item-text { font-size: 0.75rem; }
    .wd-title { font-size: 0.8rem; }
    .wd-footer { padding: 4px 12px 12px; }
}
@media (max-height: 600px) and (orientation: landscape) {
    .welcome-dialog-content { max-height: 85vh; }
    .wd-header { padding: 6px 12px; }
    .wd-body { padding: 8px 12px; gap: 4px; }
    .wd-item { padding: 5px 8px; gap: 6px; }
    .wd-icon { width: 26px; height: 26px; font-size: 0.8rem; }
    .wd-item-text { font-size: 0.72rem; }
    .wd-footer { padding: 4px 12px 8px; }
}

/* ── First-Game Welcome Dialog ───────────────────────────────────────────── */

#first-game-dialog {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 210;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    pointer-events: auto;
}

.first-game-dialog-content {
    position: relative;
    width: 90%;
    max-width: 420px;
    background: rgba(5, 12, 20, 0.96);
    border: 1px solid rgba(255, 160, 40, 0.5);
    border-radius: 10px;
    box-shadow: 0 0 50px rgba(255, 120, 0, 0.15), inset 0 0 30px rgba(255, 160, 40, 0.04);
    display: flex;
    flex-direction: column;
    animation: fg-appear 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

@keyframes fg-appear {
    0% { transform: scale(0.9) translateY(20px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.fg-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 160, 40, 0.25);
    background: rgba(255, 160, 40, 0.06);
}

.fg-icon {
    color: #ffa028;
    font-size: 1.1rem;
    text-shadow: 0 0 8px rgba(255, 160, 40, 0.6);
}

.fg-title {
    font-family: 'JetBrains Mono', monospace;
    color: #ffa028;
    font-size: 0.95rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-shadow: 0 0 10px rgba(255, 160, 40, 0.5);
    margin: 0;
}

.fg-body {
    padding: 20px 18px;
}

.fg-text {
    font-size: 0.85rem;
    color: #ccd;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.7;
    margin: 0;
}

.fg-text em {
    color: #ffa028;
    font-style: normal;
    font-weight: bold;
}

.fg-footer {
    padding: 4px 18px 18px;
}

.fg-btn {
    width: 100%;
    padding: 13px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.05rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #ffa028;
    background: rgba(255, 160, 40, 0.1);
    border: 1px solid #ffa028;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

.fg-btn:hover {
    background: #ffa028;
    color: #000;
    box-shadow: 0 0 20px rgba(255, 160, 40, 0.5);
}

.fg-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    transition: 0s;
}

.fg-btn:hover::after {
    left: 200%;
    transition: 0.5s ease-in-out;
}

@media (max-width: 400px) {
    .first-game-dialog-content { max-width: 320px; }
    .fg-header { padding: 10px 14px; }
    .fg-body { padding: 14px 14px; }
    .fg-text { font-size: 0.78rem; }
    .fg-footer { padding: 4px 14px 14px; }
}

/* ── Game Over: Rate Prompt ─────────────────────────────────────────────── */
.go-rate-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    margin: 0 16px 8px;
    background: rgba(255, 183, 3, 0.08);
    border: 1px solid rgba(255, 183, 3, 0.2);
    border-radius: 10px;
}
.go-rate-text {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    font-family: 'Inter', sans-serif;
}
.go-btn-rate {
    background: linear-gradient(180deg, #ffb703 0%, #fb8500 100%) !important;
    color: #000 !important;
    border: 1px solid #ffb703 !important;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 6px;
    white-space: nowrap;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(251, 133, 0, 0.3);
    transition: transform 0.15s;
}
.go-btn-rate:active { transform: scale(0.95); }

/* ── Settings: Rate button accent (legacy, replaced by .rate-banner) ──── */

/* ── Review Prompt Dialog ───────────────────────────────────────────────── */

/* ── Review Prompt (star rating modal) ───────────────────────────────────── */
#review-prompt-dialog {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    z-index: 9500;
    pointer-events: auto;
    touch-action: none;
}

#review-prompt-dialog .rp-dialog-content {
    position: relative;
    width: 90%;
    max-width: 400px;
    background: rgba(12, 10, 15, 0.95);
    border: 1px solid rgba(255, 183, 3, 0.3);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.9), 0 0 40px rgba(0,0,0,0.4);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: rp-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#review-prompt-dialog .rp-dialog-content::before {
    content: ''; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%);
    width: 200px; height: 100px;
    background: #ffb703; filter: blur(60px); opacity: 0.15;
    pointer-events: none; z-index: -1;
}

@keyframes rp-pop {
    0% { transform: scale(0.9) translateY(20px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.rp-icon-wrap {
    width: 48px; height: 48px;
    background: rgba(255, 183, 3, 0.1);
    border: 1px solid rgba(255, 183, 3, 0.3);
    border-radius: 14px;
    display: flex; justify-content: center; align-items: center;
    margin-bottom: 12px;
    box-shadow: 0 0 15px rgba(255, 183, 3, 0.15);
}

.rp-icon-star {
    width: 24px; height: 24px;
    fill: #f59e0b; stroke: #f59e0b; opacity: 0.9;
}

#review-prompt-dialog .rp-title {
    font-family: 'Inter', 'JetBrains Mono', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    margin: 0 0 4px;
    text-shadow: 0 2px 10px rgba(255,255,255,0.2);
}

#review-prompt-dialog .rp-desc {
    font-size: 0.85rem;
    color: #9ca3af;
    text-align: center;
    line-height: 1.5;
    margin: 0;
    white-space: pre-line;
}

/* Interactive stars */
.rp-stars {
    display: flex;
    gap: 8px;
    margin: 16px 0;
    position: relative;
    z-index: 2;
}

.rp-star-btn {
    background: none; border: none; cursor: pointer;
    padding: 4px;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.rp-star-btn svg {
    width: 38px; height: 38px;
    fill: transparent;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 1.5;
    transition: all 0.2s ease;
}

.rp-star-btn.active svg {
    fill: #ffb703;
    stroke: #ffb703;
    filter: drop-shadow(0 0 12px rgba(255, 183, 3, 0.5));
}

.rp-star-btn:active { transform: scale(0.8); }
.rp-star-btn.pop { animation: rp-star-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

@keyframes rp-star-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Submit button (hidden until stars selected) */
.rp-btn-submit {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    margin-bottom: 8px;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    font-family: 'Inter', 'JetBrains Mono', sans-serif;
}

.rp-btn-submit.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.rp-btn-submit.state-good {
    background: linear-gradient(180deg, #ffb703 0%, #fb8500 100%);
    border: 1px solid #ffb703;
    color: #000;
    box-shadow: 0 10px 25px rgba(251, 133, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

.rp-btn-submit.state-good::after {
    content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    transform: skewX(-20deg); animation: rp-btn-shine 3s infinite;
}

@keyframes rp-btn-shine {
    0%, 20% { left: -150%; }
    40%, 100% { left: 200%; }
}

.rp-btn-submit.state-bad {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Cancel / Later button (subtle) */
.rp-btn-cancel {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s;
}

.rp-btn-cancel:hover { color: rgba(255, 255, 255, 0.7); }

/* Google Play icon float */
.rp-gp-icon { animation: rp-float-icon 2s ease-in-out infinite; }
@keyframes rp-float-icon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@media (max-width: 400px) {
    #review-prompt-dialog .rp-dialog-content { max-width: 300px; padding: 18px 14px; }
    .rp-star-btn svg { width: 32px; height: 32px; }
}

/* ── Tutorial Dialog ─────────────────────────────────────────────────────── */

#tutorial-dialog {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 170;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    pointer-events: auto;
}

.tutorial-dialog-content {
    position: relative;
    width: 90%;
    max-width: 420px;
    background: rgba(5, 12, 20, 0.95);
    border: 1px solid rgba(0, 243, 255, 0.4);
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 243, 255, 0.05);
    display: flex;
    flex-direction: column;
    animation: wd-appear 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.tut-dlg-text {
    font-size: 0.85rem;
    color: #bbc;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.5;
    margin: 0;
}

.tut-dlg-text em {
    color: #00f3ff;
    font-style: normal;
    font-weight: bold;
}

@media (max-width: 400px) {
    .tutorial-dialog-content { max-width: 320px; }
    .tut-dlg-text { font-size: 0.78rem; }
}

#debug-help {
    margin-top: 8px;
    font-size: 0.65rem;
    color: #668;
    line-height: 1.6;
    font-family: 'JetBrains Mono', monospace;
}

/* ── Performance Profiler ─────────────────────────────────────────────── */

#debug-perf {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 243, 255, 0.2);
}

.debug-perf-title {
    color: #ff0055;
    font-weight: bold;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.debug-perf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
    margin-top: 4px;
}

.debug-perf-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #aaa;
    cursor: pointer;
    user-select: none;
}

.debug-perf-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border: 1px solid #00f3ff;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    flex-shrink: 0;
}

.debug-perf-toggle input[type="checkbox"]:checked {
    background: #ff0055;
    border-color: #ff0055;
}

.debug-perf-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.debug-perf-actions button {
    flex: 1;
    background: rgba(0, 243, 255, 0.12);
    color: #00f3ff;
    border: 1px solid #00f3ff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    padding: 3px 8px;
    cursor: pointer;
    border-radius: 2px;
}

.debug-perf-actions button:hover {
    background: rgba(0, 243, 255, 0.3);
}

#debug-perf-results {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
    max-height: 200px;
    overflow-y: auto;
}

#debug-perf-results table {
    width: 100%;
    border-collapse: collapse;
}

#debug-perf-results th {
    color: #888;
    text-align: left;
    font-weight: normal;
    padding: 1px 4px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.15);
}

#debug-perf-results td {
    padding: 1px 4px;
    color: #ccc;
}

.perf-bar {
    display: inline-block;
    height: 8px;
    border-radius: 1px;
    min-width: 1px;
}

.perf-bar.high { background: #ff0055; }
.perf-bar.medium { background: #ffaa00; }
.perf-bar.low { background: #00ff66; }

.profiling-pulse {
    animation: profiling-blink 0.8s ease-in-out infinite;
}

@keyframes profiling-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── Vehicle Mission HUD ─────────────────────────────────────────────────── */
#vehicle-hud {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    align-items: center;
    background: rgba(10,10,25,0.85);
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid rgba(0,243,255,0.25);
    z-index: 100;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #ccc;
}
.vhud-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.vhud-label {
    color: #00f3ff;
    font-size: 10px;
    min-width: 52px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.vhud-bar-bg {
    width: 80px;
    height: 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}
.vhud-bar {
    height: 100%;
    width: 100%;
    background: #00ff66;
    border-radius: 3px;
    transition: width 0.15s, background-color 0.3s;
}
.vhud-speed {
    color: #00f3ff;
    font-size: 12px;
    min-width: 60px;
    text-align: center;
}

/* ── Difficulty selector (prologue screen) ──────────────────────────────── */
.difficulty-selector {
    display: flex;
    gap: 6px;
    margin: 10px 0 6px;
    justify-content: center;
}
.difficulty-btn {
    flex: 1;
    max-width: 160px;
    padding: 8px 6px;
    border: 2px solid #2a2a3a;
    border-radius: 8px;
    background: rgba(10,12,18,0.9);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.difficulty-btn:hover { border-color: var(--primary); }
.difficulty-btn.selected {
    border-color: var(--primary);
    box-shadow: 0 0 12px rgba(0,243,255,0.3);
}
.difficulty-name {
    font-size: 0.85rem;
    font-weight: bold;
    color: #eef;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.difficulty-rate {
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: bold;
}
.difficulty-desc {
    font-size: 0.6rem;
    color: #889;
    line-height: 1.3;
}

/* ── Ship design selector (prologue screen) ────────────────────────────── */
.ship-design-selector {
    display: flex;
    gap: 8px;
    margin: 12px 0 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) rgba(10,12,18,0.5);
}
.ship-design-selector::-webkit-scrollbar {
    height: 6px;
}
.ship-design-selector::-webkit-scrollbar-track {
    background: rgba(10,12,18,0.5);
    border-radius: 3px;
}
.ship-design-selector::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 3px;
}
.ship-design-card {
    flex: 0 0 auto;
    width: 120px;
    padding: 8px;
    border: 2px solid #2a2a3a;
    border-radius: 8px;
    background: rgba(10,12,18,0.9);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s, opacity 0.2s;
    position: relative;
}
.ship-design-card:hover:not(.locked) {
    border-color: var(--primary);
}
.ship-design-card.selected {
    border-color: var(--primary);
    box-shadow: 0 0 12px rgba(0,243,255,0.3);
}
.ship-design-card.locked {
    opacity: 0.5;
    cursor: pointer;
    filter: grayscale(0.8);
    transition: opacity 0.25s, filter 0.25s, border-color 0.2s;
}
.ship-design-card.locked:hover {
    opacity: 0.7;
    filter: grayscale(0.5);
    border-color: #556;
}
.ship-design-lock {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.9rem;
    z-index: 2;
}
.ship-design-lock-hint {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: #aab;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    padding: 4px;
    z-index: 1;
    background: rgba(5,8,14,0.75);
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s;
}
.ship-design-card.locked:hover .ship-design-lock-hint,
.ship-design-card.locked:active .ship-design-lock-hint {
    opacity: 1;
}
.ship-design-card.locked:hover .ship-design-lock {
    opacity: 0;
}
.ship-design-preview {
    width: 60px;
    height: 60px;
    margin: 0 auto 6px;
}
.ship-design-preview canvas {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}
.ship-design-name {
    font-size: 0.7rem;
    color: var(--primary);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ship-design-desc {
    font-size: 0.6rem;
    color: #778;
    line-height: 1.3;
}
.ship-design-card.selected .ship-design-name {
    color: #fff;
}
@media (max-width: 540px) {
    .ship-design-card { width: 100px; padding: 6px; }
    .ship-design-preview { width: 48px; height: 48px; }
}

/* ── Ship lock dialog ──────────────────────────────────────────────────── */
.ship-lock-dialog-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.15s ease-out;
}
.ship-lock-dialog-box {
    background: #0c0e14;
    border: 1px solid #2a2a3a;
    border-radius: 12px;
    padding: 24px 28px;
    text-align: center;
    max-width: 280px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.ship-lock-dialog-icon { font-size: 1.8rem; margin-bottom: 8px; }
.ship-lock-dialog-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}
.ship-lock-dialog-desc {
    font-size: 0.65rem;
    color: #667;
    margin-bottom: 12px;
}
.ship-lock-dialog-divider {
    height: 1px;
    background: #2a2a3a;
    margin: 0 auto 12px;
    width: 60%;
}
.ship-lock-dialog-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    color: #889;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}
.ship-lock-dialog-hint {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: #ffcc00;
    margin-bottom: 16px;
    line-height: 1.4;
}
.ship-lock-dialog-close {
    background: transparent;
    border: 1px solid #334;
    color: #aab;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    padding: 6px 24px;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: border-color 0.2s, color 0.2s;
}
.ship-lock-dialog-close:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ── Base Widget (Menu) ─────────────────────────────────────────────────── */
#base-widget {
    width: 100%; max-width: 800px; margin: 12px auto;
    border: 1px solid #1a1412; border-radius: 8px;
    background: #0c0a09; overflow: hidden; cursor: pointer;
    box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}
.base-widget-stage { padding: 0; }
.base-widget-canvas-wrap { width: 100%; height: 200px; position: relative; overflow: hidden; }
#base-widget-canvas { width: 100%; height: 200px; display: block; }

/* Card area below canvas */
.bw-card {
    padding: 14px 20px 10px; font-family: 'JetBrains Mono', monospace;
    background: linear-gradient(180deg, #0e0b09 0%, #0c0a08 100%);
}
.bw-card-title {
    color: #00f3ff; font-size: 0.82rem; font-weight: bold;
    letter-spacing: 0.18em; text-shadow: 0 0 8px rgba(0,243,255,0.3);
    text-transform: uppercase;
}
.bw-card-desc {
    color: #667; font-size: 0.72rem; margin-top: 4px; line-height: 1.5;
    letter-spacing: 0.03em;
}

/* Status row with progress bar */
.bw-status-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 12px; padding: 6px 12px;
    background: rgba(255,255,255,0.02); border: 1px solid #1a1a1a; border-radius: 4px;
}
.bw-status-label { color: #556; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; }
.bw-status-text { color: #00f3ff; font-size: 0.7rem; letter-spacing: 0.05em; }
.bw-progress-track {
    width: 100%; height: 4px; background: #1a1a1a; border-radius: 2px; margin-top: 6px; overflow: hidden;
}
.bw-progress-bar {
    height: 100%; background: linear-gradient(90deg, #00f3ff, #00a8b5); border-radius: 2px;
    transition: width 0.4s ease;
}

/* Material cards grid */
.bw-materials-label {
    color: #556; font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
    letter-spacing: 0.12em; margin-top: 12px; margin-bottom: 6px;
}
.bw-materials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bw-mat-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; border: 1px solid #1a1a1a; border-radius: 4px;
    background: rgba(255,255,255,0.015); font-size: 0.7rem;
}
.bw-mat-card.bw-mat-ok { border-color: rgba(0,243,255,0.25); }
.bw-mat-card.bw-mat-warn { border-color: rgba(255,80,60,0.3); }
.bw-mat-icon { margin-right: 6px; font-size: 0.75rem; }
.bw-mat-name { color: #aab; letter-spacing: 0.05em; }
.bw-mat-card.bw-mat-ok .bw-mat-name { color: #00f3ff; }
.bw-mat-card.bw-mat-warn .bw-mat-name { color: #ff6644; }
.bw-mat-val { color: #667; font-size: 0.68rem; margin-left: auto; }
.bw-mat-card.bw-mat-ok .bw-mat-val { color: #00f3ff; }

/* Unlock enter button */
.base-widget-enter {
    display: block; margin: 12px auto 4px; padding: 8px 24px; width: 100%;
    background: rgba(0,243,255,0.06); color: #00f3ff; border: 1px solid rgba(0,243,255,0.3);
    font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 0.12em;
    border-radius: 4px; cursor: pointer; transition: 0.2s;
    animation: bw-pulse 2s infinite;
}
.base-widget-enter:hover { background: rgba(0,243,255,0.15); box-shadow: 0 0 12px rgba(0,243,255,0.2); }
@keyframes bw-pulse { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 8px rgba(0,243,255,0.2)} }

/* Active base summary */
.bw-active-header { display: flex; justify-content: space-between; align-items: center; }
.bw-stage-badge {
    color: #556; font-family: 'JetBrains Mono', monospace; font-size: 0.6rem;
    letter-spacing: 0.1em; border: 1px solid #222; border-radius: 3px;
    padding: 2px 8px; text-transform: uppercase;
}
.bw-active-resources {
    display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px;
    color: #8a9; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem;
}
.bw-voice {
    color: #556; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem;
    padding: 6px 0 4px; font-style: italic;
}

/* Settlement ticker (scrolling text) */
.base-widget-ticker {
    width: 100%; overflow: hidden; position: relative;
    height: 18px; margin-top: 8px;
    border-top: 1px solid rgba(0,243,255,0.08);
}
.base-widget-ticker-inner {
    display: inline-block; white-space: nowrap;
    font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: rgba(0,243,255,0.35);
    letter-spacing: 0.06em; line-height: 18px;
    animation: bw-ticker 40s linear infinite;
    padding-left: 100%;
}
@keyframes bw-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* ── Inventory: active conditions (event cards) ── */
.inv-conditions-list { display: flex; flex-direction: column; gap: 6px; }
.inv-condition {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px; border-radius: 4px; font-size: 0.75rem;
    border: 1px solid rgba(255,255,255,0.08);
}
.inv-cond-threat { background: rgba(255,60,40,0.12); border-color: rgba(255,60,40,0.25); }
.inv-cond-opportunity { background: rgba(40,220,80,0.12); border-color: rgba(40,220,80,0.25); }
.inv-cond-icon { font-size: 1rem; flex-shrink: 0; }
.inv-cond-name { color: #ddd; font-weight: bold; white-space: nowrap; }
.inv-cond-effect { color: rgba(255,255,255,0.55); margin-left: auto; white-space: nowrap; font-size: 0.7rem; }

/* ── Inventory: disabled base panel ── */
.inv-panel-disabled { opacity: 0.35; pointer-events: none; }

/* ── Base Screen ────────────────────────────────────────────────────────── */
#screen-base { background: #030201; }
.base-hud {
    padding: 10px 16px; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: #aab;
    border-bottom: 1px solid #2a110a; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.base-canvas-wrap { width: 100%; height: 300px; background: linear-gradient(180deg, #1a0e08 0%, #0d0603 60%, #060302 100%); display: flex; justify-content: center; }
#base-canvas { width: 100%; max-width: 800px; height: 300px; }
.base-content { padding: 12px 16px; min-height: 100px; color: #ccd; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; }
.base-actions { display: flex; gap: 8px; padding: 10px 16px; justify-content: center; flex-wrap: wrap; }
.base-actions .btn-settings { font-size: 0.78rem; padding: 6px 14px; }

/* Base build catalog cards */
.base-build-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-top: 10px; }
.base-build-card {
    background: rgba(255,255,255,0.03); border: 1px solid #2a2a2a; border-radius: 4px; padding: 8px;
    cursor: pointer; transition: 0.15s;
}
.base-build-card:hover { border-color: #00f3ff; background: rgba(0,243,255,0.04); }
.base-build-card.locked { opacity: 0.4; cursor: not-allowed; }
.base-build-card-name { color: #00f3ff; font-size: 0.78rem; font-weight: bold; margin-bottom: 4px; }
.base-build-card-cost { color: #facc15; font-size: 0.7rem; }
.base-build-card-time { color: #8a9; font-size: 0.65rem; }

/* Ground Line section in shop */
.groundline-section {
    margin-top: 12px; padding: 10px 14px; border: 1px solid #5c2020;
    border-radius: 4px; background: rgba(40, 10, 10, 0.5);
}
.groundline-title { color: #ff4444; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; font-weight: bold; }
.groundline-subtitle { color: #aa6666; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; }
.groundline-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.groundline-input { width: 80px; background: #1a0a0a; border: 1px solid #5c2020; color: #ff8888; padding: 4px 8px; font-family: 'JetBrains Mono', monospace; border-radius: 3px; }
.groundline-send { background: rgba(255, 50, 50, 0.1); border: 1px solid #ff4444; color: #ff4444; padding: 4px 12px; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; cursor: pointer; border-radius: 3px; }
.groundline-send:hover { background: rgba(255, 50, 50, 0.25); }
.groundline-commission { color: #aa8866; font-size: 0.7rem; margin-top: 4px; font-family: 'JetBrains Mono', monospace; }
.groundline-progress { margin: 6px 0; padding: 6px 8px; border: 1px dashed #5c4020; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; background: rgba(60,30,10,0.3); }
.groundline-minerals-list { display: flex; flex-direction: column; gap: 4px; }
.groundline-mineral-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; }
.groundline-pulse { animation: groundline-glow 2s ease-in-out infinite; }
@keyframes groundline-glow { 0%,100% { text-shadow: 0 0 4px #ff4444; } 50% { text-shadow: 0 0 12px #ff6666, 0 0 20px #ff222244; } }

/* ── Flight Gauges: responsive adjustments ─────────────────────────────── */

/* Small screens (portrait mobile) */
@media (max-width: 480px) {
    .v-gauge-left { left: 5px; }
    .v-gauge-right { right: 5px; }
    .v-gauge { top: 55%; }
    #chassis-gauge { top: 55%; }
    .v-gauge-track { width: 10px; min-height: 100px; }
    .v-gauge-icon { width: 30px; height: 30px; }
    .v-gauge-icon svg { width: 13px; height: 13px; }
    .v-gauge-value { font-size: 0.55rem; }
    .v-gauge-label { font-size: 0.5rem; }
    #chassis-gauge { right: 33px; width: 4px; }
    .chassis-label, .chassis-value { font-size: 0.5rem; }
    .chassis-bar-bg { width: 4px; min-height: 50px; }
}

/* Landscape on mobile — shorter gauges */
@media (max-height: 480px) and (orientation: landscape) {
    .v-gauge-track { max-height: 150px; min-height: 80px; }
    .v-gauge-left { left: 5px; }
    .v-gauge-right { right: 5px; }
    .chassis-bar-bg { max-height: 75px; min-height: 40px; }
    #chassis-gauge { right: 37px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVENT CARDS SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Event Cards — Compact Tactical Display ─────────────────────────────── */
.event-cards-screen {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 16px;
    overflow: visible;
    width: 90vw !important;
    max-width: 700px !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: calc(90vh - 40px) !important;
    box-sizing: border-box;
}
.event-cards-screen:not(.active) { display: none !important; }

/* Header — minimal */
.ec-header { text-align: center; margin-bottom: 12px; position: relative; z-index: 20; }
.ec-title {
    font-size: 1rem; color: var(--primary); letter-spacing: 0.2em;
    text-transform: uppercase; font-weight: bold;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.5);
    margin: 0;
}

/* Cards wrapper — row on desktop, column on mobile */
.ec-cards-wrapper {
    display: flex; gap: 16px;
    justify-content: center; align-items: flex-start;
    margin-bottom: 16px; width: 100%;
}

/* 3D card container — playing card proportions (5:7) */
.ec-card-container {
    width: 100%; max-width: 300px; aspect-ratio: 5 / 7;
    position: relative; z-index: 10;
    perspective: 1200px;
}
.ec-card-inner {
    position: relative; width: 100%; height: 100%;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-font-smoothing: antialiased;
}

/* Spin animation */
@keyframes ec-fast-spin-reveal {
    0%   { transform: rotateY(0deg) scale(1) translateY(0);      animation-timing-function: ease-in; }
    15%  { transform: rotateY(1080deg) scale(1.05) translateY(-5px); animation-timing-function: linear; }
    55%  { transform: rotateY(4680deg) scale(1.05) translateY(-5px); animation-timing-function: cubic-bezier(0.1, 0.95, 0.3, 1.05); }
    100% { transform: rotateY(5220deg) scale(1) translateY(0); }
}

.ec-card-container.ec-flipped .ec-card-inner {
    animation: ec-fast-spin-reveal 2.5s forwards;
    box-shadow: none !important;
}
.ec-card-container.ec-delay-flip.ec-flipped .ec-card-inner {
    animation: ec-fast-spin-reveal 2.5s forwards 0.2s;
}

/* Card faces */
.ec-card-face {
    position: absolute; inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 6px; overflow: hidden;
    display: flex; flex-direction: column;
}
/* translateZ separation fixes Firefox SVG bleed-through with backface-visibility */
.ec-card-back { transform: translateZ(-1px); }
.ec-card-front { transform: rotateY(180deg) translateZ(1px); }

/* Scanlines on front */
.ec-card-front::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px);
    z-index: 1;
}

/* --- THREAT (BAD) CARD --- */
.ec-card-bad .ec-card-back {
    background: linear-gradient(135deg, #220505 0%, #0a0101 100%);
    border: 1px solid rgba(255, 51, 68, 0.3);
    box-shadow: inset 0 0 30px rgba(255, 51, 68, 0.1);
}
.ec-front-bad {
    background: rgba(15, 2, 2, 0.95);
    border: 1px solid #ff3344;
    box-shadow: 0 0 15px rgba(255, 51, 68, 0.5), inset 0 0 15px rgba(255, 51, 68, 0.5);
}

/* --- OPPORTUNITY (GOOD) CARD --- */
.ec-card-good .ec-card-back {
    background: linear-gradient(135deg, #022215 0%, #010a06 100%);
    border: 1px solid rgba(0, 255, 157, 0.3);
    box-shadow: inset 0 0 30px rgba(0, 255, 157, 0.1);
}
.ec-front-good {
    background: rgba(0, 15, 10, 0.95);
    border: 1px solid #00ff9d;
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.4), inset 0 0 15px rgba(0, 255, 157, 0.4);
}

/* Mars logo on back — SMALL */
.ec-mars-logo {
    position: absolute; top: 45%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 80px; z-index: 1;
}

/* Grid background */
.ec-grid-bg {
    position: absolute; inset: 0; opacity: 0.15; z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 15px 15px;
}

/* Back label */
.ec-back-label {
    position: absolute; top: 14px; left: 0; width: 100%;
    text-align: center; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.4em; font-weight: bold;
    z-index: 2;
}
.ec-back-label-bad { color: rgba(255, 51, 68, 0.6); }
.ec-back-label-good { color: rgba(0, 255, 157, 0.6); }

/* Encrypted/Unknown label */
.ec-encrypted {
    position: absolute; bottom: 20px; left: 12px; right: 12px;
    text-align: center; font-size: 11px; font-weight: bold; letter-spacing: 0.2em;
    border: 1px solid; background: rgba(0,0,0,0.8);
    padding: 5px 0; border-radius: 4px; z-index: 2;
}
.ec-encrypted-bad { color: rgba(255, 51, 68, 0.8); border-color: rgba(255, 51, 68, 0.4); }
.ec-encrypted-good { color: rgba(0, 255, 157, 0.8); border-color: rgba(0, 255, 157, 0.4); }

/* Front header — slim inline bar */
.ec-front-header {
    padding: 6px 12px; display: flex;
    align-items: center; justify-content: center; gap: 6px;
    position: relative;
}
.ec-front-header-bad {
    background: rgba(255, 51, 68, 0.15);
    border-bottom: 1px solid rgba(255, 51, 68, 0.3);
}
.ec-front-header-good {
    background: rgba(0, 255, 157, 0.15);
    border-bottom: 1px solid rgba(0, 255, 157, 0.3);
}
.ec-front-label {
    font-weight: bold; letter-spacing: 0.2em;
    text-transform: uppercase; font-size: 10px;
}
.ec-front-header-bad .ec-front-label { color: #ff3344; }
.ec-front-header-good .ec-front-label { color: #00ff9d; }

/* Front body — centered, large text */
.ec-front-body {
    flex-grow: 1; padding: 10px 16px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
}
.ec-card-name {
    font-size: 1.15rem; font-weight: bold; color: #fff;
    text-transform: uppercase; letter-spacing: 0.12em;
    margin: 0 0 6px; line-height: 1.2;
}
.ec-card-name-bad { text-shadow: 0 0 8px rgba(255, 51, 68, 0.8); }
.ec-card-name-good { text-shadow: 0 0 8px rgba(0, 255, 157, 0.8); }

.ec-card-lore {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem; color: #e8d8a0; font-style: italic;
    margin: 0; line-height: 1.5; letter-spacing: 0.2px;
}

/* Effect footer — full-width bottom bar */
.ec-effect-footer {
    width: 100%; padding: 8px 12px;
    text-align: center; margin-top: auto;
    box-sizing: border-box;
}
.ec-effect-footer-bad {
    background: rgba(255, 51, 68, 0.1);
    border-top: 1px solid rgba(255, 51, 68, 0.3);
}
.ec-effect-footer-good {
    background: rgba(0, 255, 157, 0.08);
    border-top: 1px solid rgba(0, 255, 157, 0.3);
}

.ec-effect-label {
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.2em; font-weight: bold; margin-bottom: 2px;
}
.ec-effect-label-bad { color: #ff3344; }
.ec-effect-label-good { color: #00ff9d; }

.ec-effect-text {
    font-size: 0.85rem; color: #ddd; font-weight: bold;
    overflow-wrap: break-word; word-wrap: break-word;
}

/* Buttons — full-width action style */
.ec-btn-scan {
    background: rgba(0, 243, 255, 0.08);
    border: 1px solid rgba(0, 243, 255, 0.4);
    color: var(--primary);
    padding: 12px 32px; font-size: 0.95rem; font-weight: bold;
    text-transform: uppercase; letter-spacing: 0.2em;
    text-align: center;
    display: flex; justify-content: center; align-items: center;
    border-radius: 4px; cursor: pointer;
    transition: all 0.3s;
    position: relative; overflow: hidden; z-index: 20;
    font-family: inherit;
    width: 100%; max-width: 500px;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.1);
}
.ec-btn-scan:hover {
    background: rgba(0, 243, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.4);
    border-color: var(--primary);
}

.ec-btn-accept {
    background: rgba(0, 243, 255, 0.08);
    border: 1px solid rgba(0, 243, 255, 0.4);
    color: var(--primary);
    padding: 12px 32px; font-size: 0.95rem; font-weight: bold;
    text-transform: uppercase; letter-spacing: 0.2em;
    text-align: center;
    display: flex; justify-content: center; align-items: center;
    border-radius: 4px; cursor: pointer;
    transition: all 0.5s;
    position: relative; overflow: hidden; z-index: 20;
    font-family: inherit;
    width: 100%; max-width: 500px;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.1);
    margin-top: 10px; min-width: 200px;
    opacity: 0; pointer-events: none; transform: translateY(10px);
}
.ec-btn-accept:hover {
    background: rgba(0, 243, 255, 0.15);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.4);
}
.ec-btn-accept.ec-visible {
    opacity: 1; pointer-events: auto; transform: translateY(0);
}

/* Mobile — fullscreen, no scroll */
@media (max-width: 768px) {
    .event-cards-screen {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        padding: 12px !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        justify-content: space-between;
        overflow: hidden;
    }
    .ec-header { margin-bottom: 8px; }
    .ec-title { font-size: 0.85rem; letter-spacing: 0.15em; }
    .ec-cards-wrapper {
        gap: 10px;
        margin-bottom: 8px;
        flex: 1;
        min-height: 0;
    }
    .ec-card-container {
        max-width: none;
        aspect-ratio: auto;
        flex: 1;
    }
    .ec-card-name { font-size: 1rem; letter-spacing: 0.08em; }
    .ec-card-lore { font-size: 0.7rem; }
    .ec-effect-text { font-size: 0.85rem; }
    .ec-effect-footer { padding: 6px 8px; }
    .ec-effect-label { font-size: 9px; }
    .ec-btn-scan, .ec-btn-accept {
        padding: 10px 20px; font-size: 0.85rem;
        flex-shrink: 0;
    }
}
/* Mobile portrait — cards stacked */
@media (max-width: 768px) and (orientation: portrait) {
    .ec-cards-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
}
/* Mobile landscape — cards side by side */
@media (max-width: 768px) and (orientation: landscape) {
    .ec-cards-wrapper {
        flex-direction: row;
        align-items: stretch;
    }
    .ec-card-container { height: 100%; }
}
/* Landscape mobile — tighter spacing, wider cards */
@media (max-height: 500px) {
    .event-cards-screen {
        padding: 4px 8px !important;
        max-height: 100vh !important;
        height: 100vh !important;
        justify-content: center;
    }
    .ec-header { margin-bottom: 2px; }
    .ec-title { font-size: 0.7rem; }
    .ec-cards-wrapper {
        gap: 6px; margin-bottom: 4px;
        flex: 1; min-height: 0;
        flex-direction: row; align-items: stretch;
    }
    .ec-card-container {
        max-width: none;
        aspect-ratio: auto;
        flex: 1;
    }
    .ec-card-inner { height: 100%; }
    .ec-card-face { height: 100%; }
    .ec-front-header { padding: 2px 6px; }
    .ec-front-label { font-size: 9px; }
    .ec-front-body { padding: 4px 8px; flex-grow: 1; min-height: 0; justify-content: center; }
    .ec-card-name { font-size: 0.8rem; margin-bottom: 2px; }
    .ec-card-lore { font-size: 0.6rem; }
    .ec-encrypted { bottom: 8px; font-size: 10px; padding: 2px 0; }
    .ec-effect-footer { padding: 3px 6px; }
    .ec-effect-text { font-size: 0.7rem; }
    .ec-effect-label { font-size: 9px; }
    .ec-btn-scan, .ec-btn-accept {
        padding: 6px 16px; font-size: 0.7rem;
        flex-shrink: 0; margin-top: 2px;
    }
}

/* ── Ad reward buttons ────────────────────────────────────────────────────── */

.btn-ad-reward {
    background: rgba(255, 204, 0, 0.12);
    border: 1px solid rgba(255, 204, 0, 0.5);
    color: #ffcc00;
    padding: 10px 24px; font-size: 0.9rem; font-weight: bold;
    text-transform: uppercase; letter-spacing: 0.1em;
    border-radius: 4px; cursor: pointer;
    font-family: inherit;
    transition: all 0.3s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; max-width: 400px;
    box-sizing: border-box;
    margin: 6px auto;
}
.btn-ad-reward:hover {
    background: rgba(255, 204, 0, 0.22);
    box-shadow: 0 0 12px rgba(255, 204, 0, 0.3);
}

/* ── Silver ad buttons (shiny gradient with sweep animation) ──────────────── */
@keyframes ad-silver-shine {
    0%, 20% { left: -100%; }
    40%, 100% { left: 200%; }
}
@keyframes ad-silver-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(203, 213, 225, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.6); }
    50%      { box-shadow: 0 0 18px rgba(203, 213, 225, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.8); }
}
.btn-ad-silver {
    background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 45%, #94a3b8 50%, #cbd5e1 100%);
    border: 1px solid #ffffff;
    color: #0f172a;
    padding: 8px 18px; font-size: 0.85rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.08em;
    border-radius: 4px; cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    box-sizing: border-box;
    position: relative; overflow: hidden;
    box-shadow: 0 0 15px rgba(203, 213, 225, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.8);
    animation: ad-silver-pulse 2.5s ease-in-out infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, box-shadow;
    transform: translateZ(0);
}
.btn-ad-silver::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    transform: skewX(-20deg); transition: 0s;
    animation: ad-silver-shine 3s infinite;
    pointer-events: none;
}
.btn-ad-silver:hover {
    background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 45%, #cbd5e1 50%, #e2e8f0 100%);
    box-shadow: 0 0 25px rgba(203, 213, 225, 0.7), inset 0 2px 5px #fff;
    transform: translateY(-1px) translateZ(0);
}
.btn-ad-silver:active {
    transform: translateY(1px) translateZ(0);
    box-shadow: 0 0 10px rgba(203, 213, 225, 0.4);
}
.btn-ad-silver:disabled {
    opacity: 0.3; pointer-events: none; animation: none;
}
.btn-ad-silver:disabled::after { animation: none; }

/* Silver inline icon button (next to shield buy) */
.btn-ad-silver-icon {
    background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 45%, #94a3b8 50%, #cbd5e1 100%);
    border: 1px solid #ffffff;
    color: #0f172a;
    padding: 4px 10px; font-size: 0.8rem; font-weight: 800;
    border-radius: 4px; cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    flex-shrink: 0;
    width: auto;
    min-width: 70px;
    margin: 0;
    align-self: stretch;
    position: relative; overflow: hidden;
    box-shadow: 0 0 12px rgba(203, 213, 225, 0.3), inset 0 2px 3px rgba(255, 255, 255, 0.7);
    animation: ad-silver-pulse 2.5s ease-in-out infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, box-shadow;
    transform: translateZ(0);
}
.btn-ad-silver-icon::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    transform: skewX(-20deg);
    animation: ad-silver-shine 3s infinite;
    pointer-events: none;
}
.btn-ad-silver-icon:hover {
    background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 45%, #cbd5e1 50%, #e2e8f0 100%);
    box-shadow: 0 0 20px rgba(203, 213, 225, 0.6), inset 0 2px 4px #fff;
}

/* Maintenance button in ad mode (can't afford repair) */
.maint-btn.maint-btn-ad {
    border-color: rgba(203, 213, 225, 0.6) !important;
    animation: ad-silver-pulse 2.5s ease-in-out infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, box-shadow;
    transform: translateZ(0);
}
.maint-btn.maint-btn-ad .maint-cost {
    color: #c0c8dc !important;
}

/* Fee bypass button in shop */
.btn-fee-bypass {
    width: 100%; max-width: 400px;
    margin: 6px auto;
}
.btn-delivery-double {
    width: 100%;
    margin: 6px 0 2px;
    font-size: 0.8rem;
    padding: 8px 14px;
}
.fee-free-badge {
    color: #c0c8dc; font-size: 0.75rem; font-weight: bold;
    text-align: center; margin: 4px 0;
    letter-spacing: 0.05em;
}

/* Drill double minerals button */
.drill-btn-ad-double {
    width: 100%; margin-top: 8px;
    font-size: 0.85rem;
}

/* Event cards reroll button (shiny silver) */
.ec-btn-reroll {
    background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 45%, #94a3b8 50%, #cbd5e1 100%);
    border: 1px solid #ffffff;
    color: #0f172a;
    padding: 10px 28px; font-size: 0.85rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.15em;
    border-radius: 4px; cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    width: 100%; max-width: 500px;
    box-sizing: border-box;
    margin-top: 8px;
    display: none; /* shown after cards revealed */
    position: relative; overflow: hidden;
    box-shadow: 0 0 15px rgba(203, 213, 225, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.8);
    animation: ad-silver-pulse 2.5s ease-in-out infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, box-shadow;
    transform: translateZ(0);
}
.ec-btn-reroll::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    transform: skewX(-20deg);
    animation: ad-silver-shine 3s infinite;
    pointer-events: none;
}
.ec-btn-reroll:hover {
    background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 45%, #cbd5e1 50%, #e2e8f0 100%);
    box-shadow: 0 0 25px rgba(203, 213, 225, 0.7), inset 0 2px 5px #fff;
    transform: translateY(-1px);
}
.ec-btn-reroll:active { transform: translateY(1px); }
.ec-btn-reroll.ec-visible {
    display: flex; justify-content: center; align-items: center;
}

/* Cancel threat button on the threat card (shiny silver) */
.ec-btn-cancel-threat {
    display: none;
    background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 45%, #94a3b8 50%, #cbd5e1 100%);
    border: 1px solid #ffffff;
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
    margin: 6px auto 2px;
    transition: all 0.2s ease;
    text-align: center;
    width: 90%;
    position: relative; overflow: hidden;
    box-shadow: 0 0 12px rgba(203, 213, 225, 0.3), inset 0 2px 3px rgba(255, 255, 255, 0.7);
    animation: ad-silver-pulse 2.5s ease-in-out infinite;
}
.ec-btn-cancel-threat::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    transform: skewX(-20deg);
    animation: ad-silver-shine 3s infinite;
    pointer-events: none;
}
.ec-btn-cancel-threat:hover {
    background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 45%, #cbd5e1 50%, #e2e8f0 100%);
    box-shadow: 0 0 20px rgba(203, 213, 225, 0.6), inset 0 2px 4px #fff;
    transform: translateY(-1px);
}
.ec-btn-cancel-threat:active { transform: translateY(1px); }
.ec-btn-cancel-threat.ec-visible {
    display: block;
}

/* Arrest ad button */
.arrest-btn-ad {
    max-width: 320px;
    margin-bottom: 8px;
}

/* Sponsor popup (base milestones) */
.ad-sponsor-popup {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto;
}
.ad-sponsor-content {
    background: rgba(10, 18, 30, 0.95);
    border: 1px solid rgba(192, 200, 220, 0.35);
    border-radius: 8px;
    padding: 24px 28px;
    max-width: 360px; width: 90%;
    text-align: center;
}
.ad-sponsor-icon {
    font-size: 2rem; margin-bottom: 10px;
}
.ad-sponsor-text {
    color: #ccd; font-size: 0.9rem; line-height: 1.5; margin-bottom: 16px;
}
.ad-sponsor-buttons {
    display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.ad-sponsor-buttons .btn-small {
    font-size: 0.75rem; padding: 6px 16px; opacity: 0.7;
}

@media (max-width: 768px) {
    .ec-btn-reroll {
        padding: 8px 16px; font-size: 0.75rem;
        margin-top: 4px;
    }
}

/* ========================================== */
/* UI THEMES FOR BASES (FACTIONS)             */
/* ========================================== */

/* 1. ARESCORP (Corporate) - Default */
#screen-shop.theme-ares {
    --theme-main: #00f3ff;
    --theme-glow: rgba(0, 243, 255, 0.4);
    --theme-dim: rgba(0, 243, 255, 0.15);
    --theme-bg: rgba(0, 243, 255, 0.05);
    --theme-text-muted: #80c9cc;
}

/* 2. SCIENTIFIC (Research) */
#screen-shop.theme-sci {
    --theme-main: #b066ff;
    --theme-glow: rgba(176, 102, 255, 0.4);
    --theme-dim: rgba(176, 102, 255, 0.15);
    --theme-bg: rgba(176, 102, 255, 0.05);
    --theme-text-muted: #c2a3e0;
}

/* 3. INDUSTRIAL (Mining) */
#screen-shop.theme-ind {
    --theme-main: #ffaa00;
    --theme-glow: rgba(255, 170, 0, 0.4);
    --theme-dim: rgba(255, 170, 0, 0.15);
    --theme-bg: rgba(255, 170, 0, 0.05);
    --theme-text-muted: #cca366;
}

/* 4. HIDDEN (Underground / True Red) */
#screen-shop.theme-hid {
    --theme-main: #ff3366;
    --theme-glow: rgba(255, 51, 102, 0.4);
    --theme-dim: rgba(255, 51, 102, 0.15);
    --theme-bg: rgba(255, 51, 102, 0.05);
    --theme-text-muted: #cc8095;
}

/* 5. ABANDONED (Derelict) */
#screen-shop.theme-abd {
    --theme-main: #64748b;
    --theme-glow: rgba(100, 116, 139, 0.15);
    --theme-dim: rgba(100, 116, 139, 0.2);
    --theme-bg: rgba(100, 116, 139, 0.05);
    --theme-text-muted: #828c99;
}

/* ── Theme utility classes ──────────────────────────── */
.text-theme-accent { color: var(--theme-main); text-shadow: 0 0 8px var(--theme-glow); }
.text-theme-muted  { color: var(--theme-text-muted); }
.border-theme      { border-color: var(--theme-dim); }
.bg-theme-panel    { background: var(--theme-bg); border: 1px solid var(--theme-dim); }

.btn-theme {
    background: var(--theme-bg);
    border: 1px solid var(--theme-dim);
    color: var(--theme-main);
    transition: all 0.2s ease;
}
.btn-theme:hover:not(:disabled) {
    background: var(--theme-dim);
    border-color: var(--theme-main);
    box-shadow: 0 0 15px var(--theme-glow);
    color: #fff;
}

/* ── Shop screen theme overrides ──────────────────── */
/* Window border and glow */
#screen-shop[class*="theme-"] {
    border-color: var(--theme-main);
    box-shadow: 0 0 30px var(--theme-glow);
}

/* Headings inside shop */
#screen-shop[class*="theme-"] h2 {
    color: var(--theme-main);
    text-shadow: 0 0 10px var(--theme-glow);
}

/* Base ID subtitle */
#screen-shop[class*="theme-"] .shop-header h2 .base-id {
    color: var(--theme-text-muted);
}

/* Balance credits color */
#screen-shop[class*="theme-"] #shop-credits {
    color: var(--theme-main);
}

/* Buttons inside shop */
#screen-shop[class*="theme-"] button:not(.btn-repair):not(.btn-shield):not(.btn-comp):not(.btn-urgent):not(.btn-contraband):not(.btn-fragile):not(.btn-normal):not(.master-service-btn):not(.control-btn):not(.maint-btn):not(.btn-ad-silver):not(.btn-ad-silver-icon):not([style*="border-color"]) {
    border-color: var(--theme-main);
}
#screen-shop[class*="theme-"] button:disabled:not(.btn-repair):not(.btn-shield):not(.btn-comp):not(.btn-urgent):not(.btn-contraband):not(.btn-fragile):not(.btn-normal):not(.master-service-btn):not(.control-btn):not(.maint-btn):not(.btn-ad-silver):not(.btn-ad-silver-icon):not([style*="border-color"]) {
    border-color: #555;
    color: #777;
    box-shadow: none;
}
#screen-shop[class*="theme-"] button:not(.btn-repair):not(.btn-shield):not(.btn-comp):not(.btn-urgent):not(.btn-contraband):not(.btn-fragile):not(.btn-normal):not(.master-service-btn):not(.control-btn):not(.maint-btn):not(.btn-ad-silver):not(.btn-ad-silver-icon):not([style*="border-color"]):hover:not(:disabled) {
    background: var(--theme-dim);
    box-shadow: 0 0 15px var(--theme-glow);
}
#screen-shop[class*="theme-"] .btn-primary {
    background: var(--theme-bg);
}

/* Accordion elements */
#screen-shop[class*="theme-"] .accordion-icon {
    color: var(--theme-main);
}
#screen-shop[class*="theme-"] .accordion-header:hover {
    background: var(--theme-bg);
}

/* Keyboard focus inside shop */
#screen-shop[class*="theme-"] button.keyboard-focus:not(:disabled):not(.btn-ad-silver):not(.btn-ad-silver-icon) {
    border-color: var(--theme-main);
    background: var(--theme-dim);
    box-shadow: 0 0 10px var(--theme-glow);
}
#screen-shop[class*="theme-"] .maint-btn.keyboard-focus {
    border-color: var(--theme-main);
    background: var(--theme-dim);
    box-shadow: 0 0 10px var(--theme-glow);
}
#screen-shop[class*="theme-"] .accordion-header.keyboard-focus {
    border-color: var(--theme-main);
    background: var(--theme-dim);
    box-shadow: 0 0 10px var(--theme-glow);
}

/* Shop tooltip */
#screen-shop[class*="theme-"] ~ .shop-tooltip,
.shop-tooltip {
    border-color: var(--theme-main, var(--primary));
    box-shadow: 0 0 12px var(--theme-glow, rgba(0, 243, 255, 0.25));
}

/* Mineral hold bar separator */
#screen-shop[class*="theme-"] .mineral-hold-bar {
    border-bottom-color: var(--theme-dim);
}

/* Telemetry session color */
#screen-shop[class*="theme-"] #tp-session-display {
    color: var(--theme-text-muted);
}

/* ── Achievement toast ────────────────────────────────────────────────────── */

.achievement-toast {
    position: fixed;
    top: -140px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px 14px 16px;
    background: rgba(6, 18, 30, 0.94);
    border: 1px solid rgba(0, 243, 255, 0.35);
    border-radius: 10px;
    box-shadow: 0 0 24px rgba(0, 243, 255, 0.18), inset 0 0 12px rgba(0, 243, 255, 0.06);
    transition: top 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
    max-width: 480px;
    width: max-content;
}
.achievement-toast.visible {
    top: 18px;
}
.achievement-toast-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}
.achievement-toast-icon svg {
    display: block;
}
.achievement-toast-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.achievement-toast-header {
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    color: #00f3ff;
    text-transform: uppercase;
    font-family: 'Share Tech Mono', monospace;
}
.achievement-toast-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.achievement-toast-desc {
    font-size: 0.78rem;
    font-style: italic;
    color: rgba(0, 243, 255, 0.6);
    line-height: 1.35;
    border-left: 2px solid rgba(0, 243, 255, 0.3);
    padding-left: 8px;
    margin-top: 2px;
}

@media (max-width: 520px) {
    .achievement-toast {
        max-width: calc(100vw - 24px);
        padding: 10px 14px 10px 12px;
        gap: 10px;
    }
    .achievement-toast-icon { width: 36px; height: 36px; }
    .achievement-toast-icon svg { width: 36px; height: 36px; }
    .achievement-toast-name { font-size: 0.9rem; }
    .achievement-toast-desc { font-size: 0.7rem; }
}

/* ── Achievement list overlay ─────────────────────────────────────────────── */

#achievement-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.85);
    pointer-events: auto;
    padding: 20px;
}

.ach-window {
    width: 100%;
    max-width: 900px;
    height: 80vh;
    max-height: 800px;
    background: rgba(10, 15, 25, 0.85);
    border: 1px solid rgba(0, 243, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.9), inset 0 0 30px rgba(0, 243, 255, 0.05);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.achievement-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.3);
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-shrink: 0;
}
.achievement-header-info {
    flex: 1;
    min-width: 0;
}
.achievement-header h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 0.2em;
    color: #00f3ff;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.4);
    white-space: nowrap;
}
.achievement-header .counter {
    font-size: 0.75rem;
    color: #94a3b8;
    letter-spacing: 0.15em;
    margin-top: 4px;
    white-space: nowrap;
}
.achievement-header .counter span {
    color: #fff;
    font-weight: bold;
}
.achievement-close {
    flex-shrink: 0;
    width: auto;
    display: inline-flex;
    justify-content: center;
    margin: 0;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 243, 255, 0.2);
    color: rgba(0, 243, 255, 0.5);
    font-size: 18px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.2s;
    line-height: 1;
}
.achievement-close:hover {
    color: #00f3ff;
    background: rgba(0, 243, 255, 0.1);
}

/* Tabs */
.ach-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(0, 243, 255, 0.2);
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ach-tab {
    width: auto;
    display: inline-block;
    margin: 0;
    padding: 10px 20px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    transition: all 0.2s;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: normal;
    letter-spacing: 0.1em;
    font-family: 'Share Tech Mono', monospace;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: none;
    justify-content: center;
}
.ach-tab:hover {
    color: #fff;
    background: rgba(0, 243, 255, 0.05);
}
.ach-tab.active {
    color: #00f3ff;
    border-bottom-color: #00f3ff;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.2);
}

/* Scroll area */
.achievement-list {
    flex-grow: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Achievement row */
.ach-row {
    display: flex;
    align-items: stretch;
    min-height: 64px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    transition: all 0.2s ease;
    overflow: hidden;
}
.ach-row:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Unlocked state */
.ach-row.unlocked {
    background: rgba(0, 243, 255, 0.05);
    border-color: rgba(0, 243, 255, 0.2);
    border-left: 4px solid var(--ach-color, #00f3ff);
}
.ach-row.unlocked:hover {
    background: rgba(0, 243, 255, 0.1);
    border-color: rgba(0, 243, 255, 0.4);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.1);
}

/* Secret state */
.ach-row.secret {
    border-left: 4px solid rgba(255, 51, 102, 0.5);
}

/* Icon box */
.ach-icon-box {
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}
.unlocked .ach-icon-box {
    border-right-color: rgba(0, 243, 255, 0.2);
}

/* Icon shapes */
.ach-icon-shape {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}
.ach-icon-locked {
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.2);
}
.ach-icon-unlocked {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(0, 243, 255, 0.15);
    box-shadow: inset 0 0 10px #00f3ff;
    color: #00f3ff;
}
.ach-icon-secret {
    border-color: rgba(255, 51, 102, 0.3);
    color: rgba(255, 51, 102, 0.3);
}

/* Content block */
.ach-content {
    padding: 12px 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.ach-title {
    font-size: 1rem;
    font-weight: bold;
    color: #94a3b8;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.unlocked .ach-title {
    color: #fff;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.4);
}
.ach-lore {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: #7a8a9e;
    font-style: italic;
    line-height: 1.4;
    word-break: break-word;
}
.unlocked .ach-lore {
    color: #94a3b8;
}
.ach-hint {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: #4a5568;
    margin-top: 2px;
    letter-spacing: 0.02em;
    line-height: 1.3;
}
.unlocked .ach-hint {
    color: #64748b;
}

/* Achievement progress bar */
.ach-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.ach-progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    max-width: 160px;
}
.ach-progress-fill {
    height: 100%;
    background: rgba(0, 243, 255, 0.5);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.ach-progress-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    color: #4a5568;
    white-space: nowrap;
}

.secret .ach-title {
    color: #475569;
}
.secret .ach-lore {
    font-family: 'Share Tech Mono', monospace;
    font-style: normal;
    letter-spacing: 0.1em;
    color: rgba(255, 51, 102, 0.4);
    opacity: 0.5;
}

/* Badge column */
.ach-badge-col {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    width: 100px;
    flex-shrink: 0;
}
.unlocked .ach-badge-col {
    border-left-color: rgba(0, 243, 255, 0.1);
}
.ach-tier-badge {
    font-size: 0.6rem;
    padding: 4px 8px;
    border-radius: 3px;
    border: 1px solid currentColor;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.5);
}

/* Rarity colors */
.ach-tier-bronze  { color: #cd7f32; }
.ach-tier-silver  { color: #94a3b8; }
.ach-tier-gold    { color: #fbbf24; box-shadow: 0 0 10px rgba(251, 191, 36, 0.2); }
.ach-tier-epic    { color: #a855f7; box-shadow: 0 0 15px rgba(168, 85, 247, 0.3); }
.ach-tier-locked  { color: rgba(255, 255, 255, 0.2); border-style: dashed; }
.ach-tier-secret  { color: rgba(255, 255, 255, 0.2); border-style: dashed; border-color: rgba(255, 51, 102, 0.2); }

/* Gold unlocked overrides */
.ach-row.unlocked[data-rarity="gold"] {
    border-left-color: #fbbf24;
}
.ach-row.unlocked[data-rarity="gold"] .ach-icon-unlocked {
    background: rgba(251, 191, 36, 0.15);
    box-shadow: inset 0 0 10px rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}
.ach-row.unlocked[data-rarity="gold"] .ach-title {
    color: #fbbf24;
    text-shadow: none;
}

/* Platinum/Epic unlocked overrides */
.ach-row.unlocked[data-rarity="platinum"] {
    border-left-color: #a855f7;
}
.ach-row.unlocked[data-rarity="platinum"] .ach-icon-box {
    border-right-color: rgba(168, 85, 247, 0.2);
}
.ach-row.unlocked[data-rarity="platinum"] .ach-icon-unlocked {
    background: rgba(168, 85, 247, 0.15);
    box-shadow: inset 0 0 10px rgba(168, 85, 247, 0.4);
    color: #a855f7;
}
.ach-row.unlocked[data-rarity="platinum"] .ach-title {
    color: #c084fc;
    text-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}

/* Mobile responsive — tablets */
@media (max-width: 600px) {
    #achievement-overlay { padding: 10px; }
    .ach-window { height: 92vh; max-height: none; }
    .ach-row { min-height: 56px; }
    .ach-icon-box { width: 50px; }
    .ach-icon-shape { width: 28px; height: 28px; font-size: 12px; }
    .ach-badge-col { width: 72px; padding: 8px; }
    .ach-tier-badge { font-size: 0.55rem; padding: 3px 5px; }
    .ach-tab { padding: 8px 14px; font-size: 0.7rem; }
    .achievement-header { padding: 14px 16px; }
    .achievement-header h2 { font-size: 1rem; letter-spacing: 0.15em; }
    .achievement-header .counter { font-size: 0.65rem; }
    .achievement-list { padding: 10px 12px; gap: 6px; }
    .ach-content { padding: 10px 12px; }
    .ach-title { font-size: 0.88rem; }
    .ach-lore { font-size: 0.72rem; }
}

/* Mobile responsive — phones (≤ 480px) */
@media (max-width: 480px) {
    #achievement-overlay { padding: 0; }
    .ach-window {
        height: 100vh;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        border: none;
    }
    .ach-row { min-height: 50px; }
    .ach-icon-box { width: 42px; }
    .ach-icon-shape { width: 24px; height: 24px; }
    .ach-badge-col { width: 62px; padding: 6px; }
    .ach-tier-badge { font-size: 0.55rem; padding: 2px 5px; letter-spacing: 0.05em; }
    .ach-tab { padding: 8px 10px; font-size: 0.65rem; letter-spacing: 0.05em; }
    .achievement-header { padding: 12px 14px; gap: 10px; }
    .achievement-header h2 { font-size: 0.9rem; letter-spacing: 0.1em; white-space: normal; }
    .achievement-header .counter { font-size: 0.6rem; }
    .achievement-list { padding: 8px; gap: 5px; }
    .ach-content { padding: 8px 10px; }
    .ach-title { font-size: 0.82rem; margin-bottom: 2px; }
    .ach-lore { font-size: 0.68rem; line-height: 1.3; }
    .achievement-close { padding: 6px 10px; font-size: 16px; }
}

/* Mobile responsive — small phones (≤ 360px / 320px) */
@media (max-width: 360px) {
    .ach-icon-box { width: 36px; }
    .ach-icon-shape { width: 20px; height: 20px; }
    .ach-badge-col { width: 54px; padding: 4px; }
    .ach-tier-badge { font-size: 0.5rem; padding: 2px 3px; }
    .ach-tab { padding: 7px 8px; font-size: 0.58rem; }
    .achievement-header h2 { font-size: 0.8rem; letter-spacing: 0.08em; }
    .achievement-header .counter { font-size: 0.55rem; letter-spacing: 0.06em; }
    .ach-content { padding: 6px 8px; }
    .ach-title { font-size: 0.75rem; }
    .ach-lore { font-size: 0.6rem; }
    .achievement-close { padding: 5px 8px; font-size: 14px; }
}

/* Mars Atlas row (full-width single button) */
.menu-row-atlas {
    display: flex;
    gap: 10px;
}
#screen-start .menu-row-atlas .btn-settings {
    flex: 1;
    min-width: 0;
    padding: 12px 8px;
    letter-spacing: 0.08em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 480px) {
    #screen-start .menu-row-atlas .btn-settings {
        padding: 8px 6px;
        font-size: 0.75rem;
    }
}
@media (max-width: 380px) {
    #screen-start .menu-row-atlas .btn-settings {
        padding: 6px 4px;
        font-size: 0.7rem;
    }
}

/* ── Golden Contract ──────────────────────────────── */

.btn-golden-contract {
    border-color: #ffd700 !important;
    color: #ffd700 !important;
    position: relative;
    overflow: hidden;
    background: rgba(255, 215, 0, 0.06);
}

.btn-golden-contract:hover:not(:disabled) {
    background: rgba(255, 215, 0, 0.15);
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.5);
}

/* Golden shimmer sweep */
.btn-golden-contract::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 215, 0, 0.12) 40%,
        rgba(255, 235, 100, 0.25) 50%,
        rgba(255, 215, 0, 0.12) 60%,
        transparent 100%
    );
    animation: goldenShimmer 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes goldenShimmer {
    0%   { left: -100%; }
    100% { left: 200%; }
}

/* ── Golden contract menu preview ────────────────── */

.golden-contract-preview {
    margin: 4px auto 6px;
    padding: 6px 16px;
    max-width: 320px;
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.55);
    text-align: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    color: #ffd700;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 1.5px;
    transition: background 0.2s, box-shadow 0.2s;
}

.golden-contract-preview:hover {
    background: rgba(255, 215, 0, 0.12);
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.4);
}

.golden-contract-preview::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 215, 0, 0.1) 40%,
        rgba(255, 235, 100, 0.22) 50%,
        rgba(255, 215, 0, 0.1) 60%,
        transparent 100%
    );
    animation: goldenShimmer 4s ease-in-out infinite;
    pointer-events: none;
}

/* ── Golden completion dialog ────────────────────── */

.golden-completion-dialog {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    animation: fadeIn 0.3s ease;
}

.golden-completion-content {
    max-width: 340px;
    padding: 20px 24px;
    background: #0d1117;
    border: 1px solid #ffd700;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.2);
}

.golden-completion-tag {
    color: #ffd700;
    font-size: 0.85rem;
    letter-spacing: 2px;
    font-weight: bold;
    margin-bottom: 12px;
}

.golden-completion-text {
    color: #c9a84c;
    font-size: 0.85rem;
    line-height: 1.5;
    font-style: italic;
    margin: 0 0 14px;
}

.golden-completion-tomorrow {
    color: #ffd700;
    font-size: 0.8rem;
    margin: 0 0 16px;
    opacity: 0.8;
}

.golden-completion-btn {
    padding: 8px 32px;
    border: 1px solid #ffd700;
    border-radius: 4px;
    background: rgba(255, 215, 0, 0.1);
    color: #ffd700;
    font-size: 0.85rem;
    cursor: pointer;
    letter-spacing: 1px;
}

.golden-completion-btn:hover {
    background: rgba(255, 215, 0, 0.25);
}

/* Exclude golden contract button from shop theme overrides */
#screen-shop[class*="theme-"] .btn-golden-contract {
    border-color: #ffd700 !important;
    color: #ffd700 !important;
}

#screen-shop[class*="theme-"] .btn-golden-contract:hover:not(:disabled) {
    background: rgba(255, 215, 0, 0.15) !important;
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.5) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Game Over (Death) Menu — redesigned
   ══════════════════════════════════════════════════════════════════════════════ */

#screen-gameover.screen-gameover {
    --go-red: #ef4444;
    --go-red-glow: rgba(239, 68, 68, 0.5);
    --go-red-dim: rgba(239, 68, 68, 0.15);
    --go-amber: #f59e0b;
    --go-panel-bg: rgba(15, 5, 5, 0.95);

    background: var(--go-panel-bg);
    border: 2px solid var(--go-red);
    box-shadow: 0 20px 60px rgba(0,0,0,0.9), 0 0 20px var(--go-red-dim), inset 0 0 40px var(--go-red-dim);
    border-radius: 6px;
    padding: 0;
    text-align: left;
    animation: go-appear 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    width: 92vw;
    max-width: 500px;
}
#screen-gameover.screen-gameover.active {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
}

@keyframes go-appear {
    0%   { transform: translate(-50%, -50%) scale(1.05); opacity: 0; filter: contrast(150%); }
    100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; filter: contrast(100%); }
}

/* Scanlines overlay */
.go-scanlines {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, transparent 50%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.25));
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

/* Hazard stripes */
.go-hazard-stripes {
    height: 6px;
    width: 100%;
    flex-shrink: 0;
    background: repeating-linear-gradient(
        -45deg,
        var(--go-red),
        var(--go-red) 10px,
        #220000 10px,
        #220000 20px
    );
}

/* Header */
.go-header {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
    background: rgba(127, 29, 29, 0.25);
}
.go-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6rem;
    color: var(--go-red);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: bold;
}
.go-pulse-dot {
    width: 7px; height: 7px;
    background: var(--go-red);
    border-radius: 50%;
    animation: go-pulse 1.2s ease-in-out infinite;
    box-shadow: 0 0 5px var(--go-red);
    flex-shrink: 0;
}
@keyframes go-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}
.go-header-right {
    font-size: 0.6rem;
    color: rgba(239, 68, 68, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* Main content area */
.go-main {
    position: relative;
    z-index: 1;
    padding: 20px 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    flex: 1 1 auto;
    min-height: 0;
}

/* Title block */
.go-title-block {
    text-align: center;
}
.go-title {
    font-size: 1.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--go-red);
    text-shadow: 0 0 15px var(--go-red-glow), 0 0 30px var(--go-red-glow);
    margin: 0;
    animation: go-title-glitch 3s infinite;
}
@keyframes go-title-glitch {
    0%, 100% { transform: translate(0); text-shadow: 0 0 15px var(--go-red-glow); }
    20%      { transform: translate(-1px, 1px); }
    21%      { transform: translate(1px, -1px); text-shadow: 2px 0 #00f3ff, -2px 0 var(--go-red); }
    22%      { transform: translate(0); text-shadow: 0 0 15px var(--go-red-glow); }
}
.go-subtitle {
    font-size: 0.65rem;
    color: rgba(239, 68, 68, 0.5);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Diagnostic (death reason) */
.go-diagnostic {
    background: rgba(239, 68, 68, 0.05);
    border-left: 3px solid var(--go-red);
    border-right: 1px solid rgba(239, 68, 68, 0.2);
    border-top: 1px solid rgba(239, 68, 68, 0.2);
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
    padding: 10px 12px;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.go-diagnostic-label {
    font-size: 0.6rem;
    color: rgba(239, 68, 68, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.go-diagnostic-reason {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fecaca;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.go-diagnostic-icon {
    color: var(--go-red);
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* Stats grid */
.go-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.go-stat-cell {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(127, 29, 29, 0.3);
    border-radius: 4px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.go-stat-tp {
    grid-column: 1 / -1;
}
.go-stat-label {
    font-size: 0.6rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 3px;
}
.go-stat-value {
    font-size: 1.15rem;
    font-weight: bold;
    color: #e5e7eb;
}
.go-stat-rating {
    color: var(--go-amber);
    filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.5));
}
.go-stat-tp-val {
    font-size: 0.9rem;
    color: var(--primary);
}
.go-stat-unit {
    font-size: 0.65rem;
    color: #6b7280;
}

/* AI tip box */
.go-tip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 10px 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.go-tip-icon {
    background: rgba(245, 158, 11, 0.15);
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}
.go-tip-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.go-tip-label {
    font-size: 0.6rem;
    color: var(--go-amber);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: bold;
}
.go-tip-text {
    font-size: 0.8rem;
    color: #d1d5db;
    font-style: italic;
    line-height: 1.5;
    font-family: 'Inter', 'JetBrains Mono', sans-serif;
}

/* Delta vs previous run */
.go-run-delta {
    text-align: center;
    font-size: 0.75rem;
    color: #9ca3af;
    padding: 2px 16px 6px;
    letter-spacing: 0.03em;
}
.go-delta-label {
    color: #6b7280;
    margin-right: 4px;
}
.go-delta-item {
    white-space: nowrap;
}
.go-delta-sep {
    margin: 0 6px;
    color: #4b5563;
}
.go-delta-up {
    color: #10b981;
    font-weight: 600;
}
.go-delta-down {
    color: #ef4444;
    font-weight: 600;
}

/* Motivator slot */
.go-motivator {
    text-align: center;
    padding: 10px 16px;
    margin: 4px 20px 0;
    border-radius: 6px;
    background: rgba(0, 243, 255, 0.06);
    border: 1px solid rgba(0, 243, 255, 0.15);
    animation: go-motivator-pulse 2.5s ease-in-out infinite;
}
.go-motivator--close {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    animation: go-motivator-pulse-red 2s ease-in-out infinite;
}
.go-motivator-icon {
    margin-right: 6px;
    font-size: 1rem;
}
.go-motivator-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e5e7eb;
}
.go-motivator--close .go-motivator-text {
    color: #fca5a5;
}
.go-motivator-bar {
    margin-top: 6px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.go-motivator-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #00f3ff, #06b6d4);
    transition: width 0.6s ease-out;
}
@keyframes go-motivator-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(0, 243, 255, 0.1); }
    50% { box-shadow: 0 0 16px rgba(0, 243, 255, 0.2); }
}
@keyframes go-motivator-pulse-red {
    0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.15); }
    50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); }
}

/* Footer (action buttons) */
.go-footer {
    position: relative;
    z-index: 1;
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.go-btn {
    width: 100%;
    padding: 12px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: bold;
    font-family: inherit;
    font-size: 0.85rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* Resurrect ad button on game-over */
.go-btn-resurrect {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    font-size: 0.9rem;
    margin-bottom: 4px;
}
.go-btn-resurrect span {
    display: inline;
    white-space: normal;
    overflow: visible;
}

/* Restart button (primary) */
.go-btn-restart {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid var(--go-red);
    color: var(--go-red);
    box-shadow: inset 0 0 10px rgba(239, 68, 68, 0.15);
    font-size: 1rem;
    padding: 14px;
}
.go-btn-restart:hover {
    background: var(--go-red);
    color: #000;
    box-shadow: 0 0 20px var(--go-red-glow);
}
.go-btn-restart::after {
    content: '';
    position: absolute; top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: 0s;
}
.go-btn-restart:hover::after {
    left: 200%;
    transition: 0.6s ease-in-out;
}

/* Secondary row */
.go-btn-row {
    display: flex;
    gap: 8px;
}

/* Upgrade button */
.go-btn-upgrade {
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: var(--go-amber);
    font-size: 0.75rem;
    flex: 1;
}
.go-btn-upgrade:hover {
    background: rgba(245, 158, 11, 0.15);
    border-color: var(--go-amber);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.25);
}

/* Menu button (tertiary) */
.go-btn-menu {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.75rem;
    flex-shrink: 0;
    width: auto;
    min-width: 90px;
}
.go-btn-menu:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

/* Callsign / records inside gameover — keep existing styles but override context */
#screen-gameover .callsign-block { text-align: center; }
#screen-gameover .shop-info { display: none; }

/* Mobile adjustments for game-over */
@media (max-width: 480px) {
    #screen-gameover.screen-gameover { width: 96vw; }
    .go-main { padding: 14px 14px 8px; gap: 10px; }
    .go-footer { padding: 0 14px 14px; }
    .go-title { font-size: 1.3rem; }
    .go-stat-value { font-size: 1rem; }
    .go-btn-restart { padding: 12px; font-size: 0.9rem; }
    .go-btn-upgrade, .go-btn-menu { font-size: 0.7rem; padding: 10px 8px; }
    .go-diagnostic-reason { font-size: 0.72rem; }
    .go-header { padding: 6px 12px; }
}
@media (max-height: 500px) {
    .go-main { gap: 8px; }
    .go-title { font-size: 1.2rem; }
    .go-stats-grid { gap: 4px; }
    .go-stat-cell { padding: 6px; }
}

/* ── RTL Support (Arabic) ────────────────────────────────────────────────────── */
[dir="rtl"] {
    direction: rtl;
    font-size: 120%;
}
[dir="rtl"] .maint-btn .maint-label,
[dir="rtl"] .shop-section-note,
[dir="rtl"] .help-section,
[dir="rtl"] .outro-stats,
[dir="rtl"] .catalog-meta,
[dir="rtl"] .rec-ship,
[dir="rtl"] .adm-bar-val {
    text-align: right;
}
[dir="rtl"] .lang-dropdown-list {
    left: 0;
    right: auto;
}
[dir="rtl"] .rec-ship {
    text-align: right;
}
[dir="rtl"] .modal-content,
[dir="rtl"] .settings-panel,
[dir="rtl"] .help-content {
    text-align: right;
}
[dir="rtl"] .maint-btn .maint-bar {
    order: -1;
    margin-top: 0;
    margin-bottom: 6px;
}
[dir="rtl"] input[type="range"] {
    direction: ltr;
}
[dir="rtl"] .lang-dropdown-trigger {
    flex-direction: row-reverse;
}

/* Game controls must stay LTR — prevent RTL auto-mirroring from swapping
   rotation buttons, joystick halves, tilt slider, and keyboard hints */
[dir="rtl"] #touch-controls,
[dir="rtl"] #kb-bar {
    direction: ltr;
}

/* ── Welcome Back Dialog (return from background) ─────────────────────────── */

#welcome-back-dialog {
    position: fixed;
    inset: 0;
    z-index: 195;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: wbFadeIn 0.3s ease-out;
}
#welcome-back-dialog.active {
    display: flex;
}
.wb-content {
    width: 90%;
    max-width: 380px;
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 12px;
    background: rgba(20, 12, 4, 0.92);
    overflow: hidden;
    animation: wbPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wb-sysbar {
    padding: 8px 14px;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: rgba(251, 191, 36, 0.5);
    background: rgba(120, 60, 0, 0.1);
    border-bottom: 1px solid rgba(251, 191, 36, 0.12);
}
.wb-body {
    padding: 24px 20px 20px;
    text-align: center;
}
.wb-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: #fbbf24;
    letter-spacing: 0.1em;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
    margin-bottom: 6px;
}
.wb-subtitle {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 4px;
}
.wb-away-time {
    font-size: 0.75rem;
    color: rgba(251, 191, 36, 0.45);
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}
.wb-stats {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}
.wb-stat {
    flex: 1;
    padding: 10px 6px;
    border: 1px solid rgba(251, 191, 36, 0.12);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wb-stat-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.wb-stat-value {
    font-size: 0.95rem;
    color: #fbbf24;
    font-weight: bold;
}
.wb-resume {
    width: 100%;
    padding: 14px;
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 8px;
    background: rgba(251, 191, 36, 0.08);
    color: #fbbf24;
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}
.wb-resume:hover,
.wb-resume:active {
    background: rgba(251, 191, 36, 0.18);
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
}
@keyframes wbFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes wbPopIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ── Resume Countdown Overlay (3-2-1 after welcome-back) ──────────────────── */

#resume-countdown-overlay {
    position: fixed;
    inset: 0;
    z-index: 196;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
}
#resume-countdown-overlay.active {
    display: flex;
}
.rc-number {
    font-size: 6rem;
    font-weight: bold;
    color: #fbbf24;
    text-shadow: 0 0 30px rgba(251, 191, 36, 0.5), 0 0 60px rgba(251, 191, 36, 0.2);
    letter-spacing: 0.05em;
    animation: rcPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
}
@keyframes rcPop {
    0%   { transform: scale(1.6); opacity: 0; }
    50%  { opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ── Daily Login Reward Dialog ─────────────────────────────────────────────── */

#daily-reward-dialog {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: flex-start;
    justify-content: center;
    background: rgba(2, 4, 8, 0.85);
    backdrop-filter: blur(8px);
    pointer-events: auto;
    animation: dailyFadeIn 0.4s ease-out;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 0;
}

#daily-reward-dialog.active {
    display: flex;
}

@keyframes dailyFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes dailyModalPop {
    0%   { transform: scale(0.95) translateY(10px); opacity: 0; filter: brightness(1.5); }
    100% { transform: scale(1) translateY(0); opacity: 1; filter: brightness(1); }
}

@keyframes dailyPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
}

@keyframes dailyShimmer {
    0%   { left: -100%; }
    100% { left: 200%; }
}

@keyframes dailyStarGlow {
    0%, 100% { text-shadow: 0 0 10px rgba(251, 191, 36, 0.8), 0 0 30px rgba(251, 191, 36, 0.3); }
    50%      { text-shadow: 0 0 20px rgba(251, 191, 36, 1), 0 0 50px rgba(251, 191, 36, 0.5); }
}

@keyframes dailyFadeOut {
    to { opacity: 0; }
}

@keyframes dailyClaimExit {
    to { opacity: 0; transform: scale(0.9); }
}

/* ── Modal panel ─────────────────────────────────────────────────────────── */

.daily-reward-content {
    width: 90%;
    max-width: 480px;
    background: rgba(8, 12, 18, 0.95);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9),
                inset 0 0 40px rgba(251, 191, 36, 0.05);
    position: relative;
    overflow: hidden;
    animation: dailyModalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    margin: auto 0;
    flex-shrink: 0;
}

/* Scanlines */
.daily-reward-scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15) 50%);
    background-size: 100% 4px;
    z-index: 0;
}

/* ── System header bar ───────────────────────────────────────────────────── */

.daily-reward-sysbar {
    position: relative;
    z-index: 1;
    padding: 8px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(251, 191, 36, 0.15);
    background: rgba(120, 60, 0, 0.12);
}

.daily-reward-sysbar-left {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    color: rgba(251, 191, 36, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
}

.daily-reward-sysbar-right {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    color: rgba(100, 116, 139, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* ── Main body ───────────────────────────────────────────────────────────── */

.daily-reward-body {
    position: relative;
    z-index: 1;
    padding: 24px 28px 20px;
    text-align: center;
}

/* Star icon */
.daily-reward-star {
    font-size: 2.2rem;
    color: #fbbf24;
    animation: dailyStarGlow 2s ease-in-out infinite;
    margin-bottom: 6px;
}

.daily-reward-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.daily-reward-subtitle {
    font-size: 0.85rem;
    color: rgba(156, 163, 175, 0.9);
    letter-spacing: 0.02em;
    margin-bottom: 16px;
}

/* ── Day badge ───────────────────────────────────────────────────────────── */

.daily-reward-day-badge {
    margin-bottom: 16px;
}

.daily-reward-day {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 4px;
    padding: 4px 16px;
}

/* ── Loot cards ──────────────────────────────────────────────────────────── */

.daily-reward-loot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.daily-reward-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    overflow: hidden;
}

/* Colored top accent line */
.daily-reward-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
}

.daily-reward-card-cr::before {
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
}

.daily-reward-card-tp::before {
    background: #00f3ff;
    box-shadow: 0 0 10px #00f3ff;
}

/* Card icon circle */
.daily-reward-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 2px;
}

.daily-reward-card-icon-cr {
    color: #34d399;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.daily-reward-card-icon-tp {
    color: #22d3ee;
    background: rgba(0, 243, 255, 0.12);
    border: 1px solid rgba(0, 243, 255, 0.3);
}

.daily-reward-credits {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    color: #10b981;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.daily-reward-tp {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    color: #00f3ff;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.4);
}

.daily-reward-card-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    color: rgba(100, 116, 139, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ── Timeline streak ─────────────────────────────────────────────────────── */

.daily-reward-timeline {
    position: relative;
    padding: 16px 6px 28px;
    margin-bottom: 16px;
}

.daily-reward-timeline-line {
    position: absolute;
    top: 30px;
    left: 18px;
    right: 18px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.daily-reward-timeline-progress {
    position: absolute;
    top: 30px;
    left: 18px;
    height: 2px;
    background: #fbbf24;
    box-shadow: 0 0 8px #fbbf24;
    z-index: 2;
    width: 0;
    transition: width 0.6s ease-out;
}

.daily-reward-streak {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 3;
}

/* Day node */
.day-node {
    width: 32px;
    height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #0a0f16;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    position: relative;
    transition: all 0.3s ease;
}

.day-node-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
}

.day-node-reward {
    position: absolute;
    bottom: -18px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    color: #475569;
    letter-spacing: 0.1em;
}

/* Past (collected) day */
.day-node.past {
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.08);
}

.day-node.past .day-node-label {
    color: rgba(251, 191, 36, 0.6);
}

.day-node.past .day-node-reward {
    color: rgba(251, 191, 36, 0.4);
}

/* Current day (active) */
.day-node.current {
    border-color: #fbbf24;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
    transform: scale(1.15);
}

.day-node.current .day-node-label {
    color: #fbbf24;
    font-weight: 700;
}

.day-node.current .day-node-reward {
    color: #fbbf24;
    text-shadow: 0 0 5px rgba(251, 191, 36, 0.5);
}

/* Day 7 special (big reward) */
.day-node.day-7 {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.1);
    width: 36px;
    height: 36px;
}

.day-node.day-7 .day-node-label {
    color: #a855f7;
    font-size: 0.9rem;
}

.day-node.day-7 .day-node-reward {
    color: #a855f7;
    font-weight: 700;
}

.day-node.day-7.current {
    border-color: #a855f7;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
    background: rgba(168, 85, 247, 0.15);
}

/* ── Claim button ─────────────────────────────────────────────────────────── */

.daily-reward-claim {
    width: 100%;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid #fbbf24;
    border-radius: 4px;
    padding: 14px 24px;
    cursor: pointer;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Shimmer sweep */
.daily-reward-claim::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    transition: 0s;
    pointer-events: none;
}

.daily-reward-claim:hover {
    background: #fbbf24;
    color: #000;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.5);
}

.daily-reward-claim:hover::after {
    left: 200%;
    transition: 0.6s ease-in-out;
}

.daily-reward-claim:active {
    transform: scale(0.97);
}

/* ── Claimed state ───────────────────────────────────────────────────────── */

.daily-reward-claim.claimed-btn {
    background: #10b981;
    border-color: #10b981;
    color: #000;
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);
    pointer-events: none;
}

#daily-reward-dialog.claimed .daily-reward-content {
    animation: dailyClaimExit 0.4s ease-in forwards;
}

#daily-reward-dialog.claimed {
    animation: dailyFadeOut 0.4s 0.1s ease-in forwards;
}

/* ── Mobile adjustments ───────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .daily-reward-body {
        padding: 18px 16px 16px;
    }
    .daily-reward-star {
        font-size: 1.8rem;
    }
    .daily-reward-title {
        font-size: 1.15rem;
    }
    .daily-reward-loot {
        gap: 8px;
    }
    .daily-reward-card {
        padding: 10px 6px;
    }
    .daily-reward-credits,
    .daily-reward-tp {
        font-size: 1.1rem;
    }
    .day-node {
        width: 28px;
        height: 28px;
    }
    .day-node-label {
        font-size: 0.65rem;
    }
    .day-node.day-7 {
        width: 32px;
        height: 32px;
    }
    .daily-reward-claim {
        padding: 12px 16px;
        font-size: 1rem;
    }
}

/* ── Settings: version info ──────────────────────────────────────────────── */
.settings-version-info {
    text-align: center;
    padding: 8px 0 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: rgba(120, 160, 200, 0.3);
}

/* ── Settings: community links ───────────────────────────────────────────── */
.btn-community-link {
    text-decoration: none;
    color: inherit;
}

/* ── Settings v2: list-row layout ────────────────────────────────────────── */
.settings-group.settings-group-list {
    padding: 0 !important;
}
.group-header-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(0, 243, 255, 0.6);
    background: rgba(0, 243, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ghv2-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.list-row {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    background: transparent;
    color: #cbd5e1;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    width: 100%;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
}
.list-row:last-child { border-bottom: none; }
button.list-row:hover, button.list-row:active {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}
.list-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.row-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    color: #94a3b8;
    flex-shrink: 0;
    transition: all 0.2s;
}
button.list-row:hover .row-icon {
    background: rgba(0, 243, 255, 0.1);
    color: var(--primary);
}
.list-row-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.list-row-chevron {
    color: #475569;
    flex-shrink: 0;
    transition: color 0.2s;
}
button.list-row:hover .list-row-chevron {
    color: var(--primary);
}

/* ── Settings v2: social grid ────────────────────────────────────────────── */
.social-grid {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.btn-social {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 6px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    border: 1px solid transparent;
}
.btn-discord {
    background: rgba(88, 101, 242, 0.15);
    border-color: rgba(88, 101, 242, 0.4);
    color: #a5b4fc;
}
.btn-discord:hover {
    background: rgba(88, 101, 242, 0.3);
    color: #fff;
    border-color: #5865F2;
}
.btn-telegram {
    background: rgba(34, 158, 217, 0.15);
    border-color: rgba(34, 158, 217, 0.4);
    color: #7dd3fc;
}
.btn-telegram:hover {
    background: rgba(34, 158, 217, 0.3);
    color: #fff;
    border-color: #229ED9;
}

/* ── Settings v2: rate banner ────────────────────────────────────────────── */
button.rate-banner {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    flex-shrink: 0;
    gap: 8px;
    width: 100%;
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.15) 0%, rgba(20, 10, 0, 0.8) 100%);
    border: 1px solid #fbbf24;
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5), inset 0 0 20px rgba(251, 191, 36, 0.15);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
    font-family: inherit;
    color: #fbbf24;
}
button.rate-banner:hover, button.rate-banner:active {
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 20px rgba(251, 191, 36, 0.4), inset 0 0 20px rgba(251, 191, 36, 0.15);
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.25) 0%, rgba(20, 10, 0, 0.8) 100%);
}
button.rate-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-20deg);
    animation: rate-shine 4s infinite;
    pointer-events: none;
}
@keyframes rate-shine {
    0%, 20% { left: -100%; }
    40%, 100% { left: 200%; }
}
.rate-banner .rate-star-row {
    display: block !important;
    width: 100%;
    color: #fbbf24;
    font-size: 1.4rem;
    letter-spacing: 0.15em;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.4));
    line-height: 1.2;
}
.rate-banner .rate-banner-title {
    display: block !important;
    width: 100%;
    font-weight: 700;
    color: #fbbf24;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}
.rate-banner .rate-banner-sub {
    display: block !important;
    width: 100%;
    font-size: 0.68rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1;
}

/* ── Mars Quiz overlay ──────────────────────────────────────────────────── */
#quiz-overlay {
    position: fixed;
    inset: 0;
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.4);
    z-index: 160;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

.quiz-modal {
    position: relative;
    width: 90%;
    max-width: 460px;
    background: rgba(8, 12, 18, 0.95);
    border: 1px solid #00f3ff;
    box-shadow: 0 20px 60px rgba(0,0,0,0.9), inset 0 0 40px rgba(0, 243, 255, 0.2);
    padding: 2px;
    animation: quiz-boot 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: border-color 0.3s, box-shadow 0.3s;
}

@keyframes quiz-boot {
    0%   { transform: scaleY(0.01) scaleX(0.8); opacity: 0; filter: brightness(2); }
    50%  { transform: scaleY(1.1) scaleX(1); opacity: 1; }
    100% { transform: scaleY(1) scaleX(1); opacity: 1; filter: brightness(1); }
}

/* Corner brackets */
.quiz-bracket {
    position: absolute; width: 15px; height: 15px;
    border-color: #00f3ff; border-style: solid; border-width: 0;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2); z-index: 20;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.quiz-b-tl { top: -2px; left: -2px; border-top-width: 2px; border-left-width: 2px; }
.quiz-b-tr { top: -2px; right: -2px; border-top-width: 2px; border-right-width: 2px; }
.quiz-b-bl { bottom: -2px; left: -2px; border-bottom-width: 2px; border-left-width: 2px; }
.quiz-b-br { bottom: -2px; right: -2px; border-bottom-width: 2px; border-right-width: 2px; }

/* Scanlines */
.quiz-scanlines {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(0,0,0,0.15) 50%);
    background-size: 100% 4px; z-index: 5;
}

/* Inner content */
.quiz-inner {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 243, 255, 0.2);
    padding: 16px 24px;
    position: relative; z-index: 10;
}

/* Signal header */
.quiz-signal-header {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid rgba(0, 243, 255, 0.3);
    padding-bottom: 8px; margin-bottom: 12px;
}
.quiz-signal-title {
    display: flex; align-items: center; gap: 8px;
}
.quiz-signal-icon { font-size: 1rem; }
.quiz-header-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem; font-weight: bold;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: #00f3ff;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.5);
}
.quiz-live-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem; font-weight: bold;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: #ef4444;
    display: flex; align-items: center; gap: 6px;
    animation: quiz-pulse 1.5s ease-in-out infinite;
}
.quiz-live-dot {
    width: 6px; height: 6px; background: #ef4444;
    border-radius: 50%; display: inline-block;
}
@keyframes quiz-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Timer bar */
.quiz-timer-labels {
    display: flex; justify-content: space-between;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem; color: rgba(100,120,140,0.7);
    text-transform: uppercase; letter-spacing: 0.15em;
    margin-bottom: 3px;
}
.quiz-timer-bar-wrap {
    width: 100%; height: 4px;
    background: rgba(0, 243, 255, 0.1);
    margin-bottom: 16px; overflow: hidden;
}
.quiz-timer-bar {
    height: 100%; width: 100%;
    background: #00f3ff;
    box-shadow: 0 0 10px #00f3ff;
    transform-origin: left;
    transition: none;
}
.quiz-timer-bar.quiz-timer-active {
    animation: quiz-drain 20s linear forwards;
}
@keyframes quiz-drain {
    0%   { transform: scaleX(1); background: #00f3ff; box-shadow: 0 0 10px #00f3ff; }
    50%  { background: #f59e0b; box-shadow: 0 0 10px #f59e0b; }
    100% { transform: scaleX(0); background: #ef4444; box-shadow: 0 0 10px #ef4444; }
}

/* Segment label */
.quiz-segment-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem; color: rgba(0, 243, 255, 0.35);
    text-transform: uppercase; letter-spacing: 0.15em;
    text-align: center; margin-bottom: 4px;
}

/* Question */
.quiz-question {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem; line-height: 1.45;
    color: #e2e8f0;
    text-align: center;
    margin-bottom: 18px;
}

/* Answer buttons */
.quiz-answers {
    display: flex; flex-direction: column;
    gap: 8px; margin-bottom: 14px;
}
.quiz-answer-btn {
    width: 100%;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    padding: 12px 16px;
    background: rgba(0, 243, 255, 0.03);
    border: 1px solid rgba(0, 243, 255, 0.2);
    border-radius: 4px;
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex; align-items: center;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.quiz-answer-prefix {
    color: #00f3ff; margin-right: 12px;
    font-weight: bold; transition: color 0.2s;
}
.quiz-answer-btn:hover:not(.quiz-disabled) {
    background: rgba(0, 243, 255, 0.1);
    border-color: #00f3ff; color: #fff;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
    padding-left: 24px;
}
.quiz-answer-btn.quiz-disabled {
    cursor: default; pointer-events: none;
}
.quiz-answer-btn.quiz-correct {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981; color: #fff;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
    opacity: 1;
}
.quiz-answer-btn.quiz-correct .quiz-answer-prefix { color: #10b981; }
.quiz-answer-btn.quiz-wrong {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444; color: #fff;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
    opacity: 1;
}
.quiz-answer-btn.quiz-wrong .quiz-answer-prefix { color: #ef4444; }
.quiz-answer-btn.quiz-dimmed {
    opacity: 0.35;
}

/* Result text */
.quiz-result {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem; text-align: center;
    min-height: 1.4em; margin-bottom: 10px;
}
.quiz-result-correct { color: #10b981; }
.quiz-result-wrong { color: #ef4444; }

/* Skip / Close button */
.quiz-skip-btn {
    display: block; width: 100%;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem; padding: 10px;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer; letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: all 0.2s;
}
.quiz-skip-btn:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff; background: rgba(255, 255, 255, 0.05);
}

/* Modal state: correct */
.quiz-modal.quiz-state-correct {
    border-color: #10b981;
    box-shadow: 0 20px 60px rgba(0,0,0,0.9), inset 0 0 40px rgba(16, 185, 129, 0.2);
}
.quiz-modal.quiz-state-correct .quiz-bracket {
    border-color: #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

/* Modal state: wrong */
.quiz-modal.quiz-state-wrong {
    border-color: #ef4444;
    box-shadow: 0 20px 60px rgba(0,0,0,0.9), inset 0 0 40px rgba(239, 68, 68, 0.2);
    animation: quiz-shake 0.4s;
}
.quiz-modal.quiz-state-wrong .quiz-bracket {
    border-color: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}
@keyframes quiz-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* Fade-out transition */
.quiz-modal.quiz-fadeout {
    opacity: 0; transform: scale(0.9);
    transition: opacity 0.4s, transform 0.4s;
}

/* Landscape phone */
@media (max-height: 500px) and (orientation: landscape) {
    .quiz-inner { padding: 10px 16px; }
    .quiz-signal-header { margin-bottom: 6px; padding-bottom: 4px; }
    .quiz-timer-bar-wrap { margin-bottom: 8px; }
    .quiz-question { font-size: 0.78rem; margin-bottom: 10px; }
    .quiz-answers { gap: 5px; margin-bottom: 8px; }
    .quiz-answer-btn { padding: 8px 12px; font-size: 0.72rem; }
    .quiz-skip-btn { padding: 6px; font-size: 0.62rem; }
}

/* Small portrait phone */
@media (max-width: 380px) {
    .quiz-inner { padding: 12px 14px; }
    .quiz-question { font-size: 0.8rem; }
    .quiz-answer-btn { padding: 10px 12px; font-size: 0.72rem; }
}