* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow: hidden;
    background: #1a1a2e;
}

#map {
    width: 100vw;
    height: 100vh;
}

#controls {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(15, 15, 25, 0.92);
    color: #fff;
    padding: 14px 16px;
    border-radius: 10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    width: 240px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    z-index: 10;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
}

#controls h3 {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.8px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding-bottom: 8px;
    color: #E8E8F0;
}

.control-group {
    margin-bottom: 8px;
}

#controls label {
    display: block;
    margin: 0 0 2px;
    font-size: 11px;
    color: #b0b0c0;
}

#controls label span {
    color: #7EC8E3;
    font-weight: 600;
}

#controls input[type="range"] {
    width: 100%;
    height: 16px;
    margin: 0 0 2px;
    accent-color: #2E86C1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

#controls input[type="range"]::-webkit-slider-track {
    height: 4px;
    background: rgba(255,255,255,0.12);
    border-radius: 2px;
}

#controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #2E86C1;
    border: 2px solid rgba(255,255,255,0.3);
    margin-top: -5px;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(46,134,193,0.4);
}

#controls input[type="checkbox"] {
    margin-right: 6px;
    accent-color: #22B14C;
}

#controls button, #controls .view-btn {
    display: block;
    width: 100%;
    padding: 6px 0;
    margin: 4px 0 2px;
    background: rgba(46, 134, 193, 0.35);
    color: #E0E8F0;
    border: 1px solid rgba(46,134,193,0.3);
    border-radius: 5px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
}

#controls button:hover, #controls .view-btn:hover {
    background: rgba(46, 134, 193, 0.6);
    border-color: rgba(46,134,193,0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(46,134,193,0.3);
}

#controls button:active, #controls .view-btn:active {
    transform: translateY(0);
}

.view-nav {
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 8px;
}

.pod-label {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.view-btn {
    display: inline-block !important;
    width: 48% !important;
    text-align: center;
    font-size: 10px !important;
    padding: 4px 0 !important;
    margin: 2px 1% !important;
}

/* Trail legend */
.legend {
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 8px;
}

.legend-item {
    display: inline-block;
    font-size: 10px;
    color: #ccc;
    margin: 2px 6px 2px 0;
    white-space: nowrap;
}

.legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 3px;
    vertical-align: middle;
}

#attribution {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
    color: #aaa;
    font-size: 10px;
    padding: 3px 12px;
    border-radius: 4px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    z-index: 10;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

#status {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: #7EC8E3;
    font-size: 11px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    padding: 3px 12px;
    border-radius: 4px;
    z-index: 10;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

/* Scrollbar for control panel */
#controls::-webkit-scrollbar {
    width: 4px;
}
#controls::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}
#controls::-webkit-scrollbar-track {
    background: transparent;
}

/* Hide map controls when game is active */
/* Hide original map controls when game UI is present */
body:has(#game-ui-root) #controls,
body:has(#game-ui-root) #status,
body.game-active #controls,
body.game-active #status {
    display: none !important;
}

/* =========================================================================
   GAME UI — Glassmorphic Dark Theme
   ========================================================================= */

#game-ui-root {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 20;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #E8E8F0;
    font-variant-numeric: tabular-nums;
}
#game-ui-root > * { pointer-events: auto; }

/* --- Glass mixin pattern --- */
.glass {
    background: rgba(10, 12, 24, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

/* =========================================================================
   START SCREEN
   ========================================================================= */
#game-start {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 18% 24%, rgba(50, 115, 190, 0.26), transparent 26%),
        radial-gradient(circle at 82% 18%, rgba(110, 218, 255, 0.18), transparent 22%),
        radial-gradient(circle at 50% 75%, rgba(255, 255, 255, 0.06), transparent 34%),
        linear-gradient(180deg, rgba(7, 14, 28, 0.7), rgba(2, 5, 12, 0.95)),
        radial-gradient(ellipse at 50% 30%, rgba(15,25,60,0.7) 0%, rgba(5,5,15,0.92) 70%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: fadeIn 0.8s ease;
}
#game-start.hidden {
    opacity: 0;
    pointer-events: none;
    display: none;
}
.start-content {
    position: relative;
    text-align: center;
    max-width: 860px;
    width: min(92vw, 860px);
    padding: 34px 34px 28px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
        linear-gradient(135deg, rgba(7, 20, 45, 0.92), rgba(9, 12, 24, 0.96));
    border: 1px solid rgba(150, 220, 255, 0.14);
    box-shadow:
        0 28px 70px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.08);
    overflow: hidden;
}
.start-content::before,
.start-content::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.start-content::before {
    inset: auto -10% -24% 52%;
    height: 240px;
    background: radial-gradient(circle, rgba(110, 218, 255, 0.16), transparent 66%);
}
.start-content::after {
    inset: 0;
    background:
        linear-gradient(140deg, transparent 0 48%, rgba(255,255,255,0.025) 48% 49%, transparent 49% 100%),
        linear-gradient(180deg, rgba(255,255,255,0.02), transparent 24%);
}
.start-kicker,
.start-title,
.start-summary,
.start-feature-grid,
.diff-cards,
.season-picker,
.start-actions,
#game-load-section,
.start-note {
    position: relative;
    z-index: 1;
}
.start-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #CDEFFF;
    background: rgba(114, 213, 255, 0.09);
    border: 1px solid rgba(114, 213, 255, 0.16);
}
.start-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7BE0FF;
    box-shadow: 0 0 10px rgba(123, 224, 255, 0.9);
}
.start-title {
    margin-bottom: 12px;
}
.start-title h1 {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: 7px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 40px rgba(0,191,255,0.22), 0 2px 8px rgba(0,0,0,0.5);
    margin: 0;
    line-height: 1.1;
}
.start-title h2 {
    font-size: 54px;
    font-weight: 900;
    letter-spacing: 10px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #00BFFF, #00FF88);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: -4px 0 12px;
    line-height: 1.0;
}
.start-subtitle {
    font-size: 14px;
    color: #A5B9D3;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.start-summary {
    max-width: 640px;
    margin: 0 auto 22px;
    color: #D7E6F4;
    font-size: 15px;
    line-height: 1.6;
}
.start-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 auto 24px;
    text-align: left;
}
.start-feature-grid div {
    padding: 14px 14px 13px;
    border-radius: 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.start-feature-grid span {
    display: block;
    margin-bottom: 6px;
    color: #8CDFFF;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.start-feature-grid strong {
    display: block;
    color: #EAF5FF;
    font-size: 12px;
    line-height: 1.45;
}

/* Difficulty cards */
.diff-cards {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-bottom: 28px;
}
.diff-card {
    width: 200px;
    padding: 20px 16px;
    border-radius: 12px;
    background: rgba(20, 22, 40, 0.8);
    border: 2px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
}
.diff-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0,191,255,0.3);
    box-shadow: 0 8px 24px rgba(0,191,255,0.15);
}
.diff-card.selected {
    border-color: #00BFFF;
    background: rgba(0,191,255,0.1);
    box-shadow: 0 0 20px rgba(0,191,255,0.2);
}
.diff-icon {
    font-size: 32px;
    margin-bottom: 8px;
}
.diff-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}
.diff-cash {
    font-size: 13px;
    color: #00BFFF;
    font-weight: 600;
    margin-bottom: 8px;
}
.diff-desc {
    font-size: 11px;
    color: #8899AA;
    line-height: 1.4;
}

/* Season picker */
.season-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}
.season-picker label {
    font-size: 13px;
    color: #8899AA;
}
.season-picker select {
    background: rgba(20, 22, 40, 0.9);
    color: #E8E8F0;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
}
.season-picker select:focus {
    border-color: #00BFFF;
}

/* Start/Continue buttons */
.btn-start {
    display: inline-block;
    padding: 14px 48px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #0077CC, #00BFFF);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 20px rgba(0,191,255,0.3);
    font-family: inherit;
}
.btn-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(0,191,255,0.5);
}
.btn-start:active { transform: translateY(0); }
.btn-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 168px;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #DDEEFF;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}
.btn-help:hover {
    transform: translateY(-2px);
    color: #fff;
    background: rgba(255,255,255,0.1);
    border-color: rgba(140, 223, 255, 0.28);
}
.start-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 2px;
}
.start-note {
    margin-top: 16px;
    color: #9CB2CA;
    font-size: 12px;
    line-height: 1.4;
}

.btn-continue {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 24px;
    font-size: 12px;
    color: #8899AA;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}
.btn-continue:hover {
    color: #E8E8F0;
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
}

/* =========================================================================
   TOP BAR
   ========================================================================= */
#game-top-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 48px;
    display: none;
    align-items: center;
    padding: 0 12px;
    gap: 2px;
    z-index: 50;
    background: rgba(10, 12, 24, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 2px 16px rgba(0,0,0,0.4);
    font-size: 12px;
    transition: transform 0.3s ease;
}
#game-top-bar.visible { display: flex; animation: slideDown 0.4s ease; }

.bar-section {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    height: 100%;
    border-right: 1px solid rgba(255,255,255,0.06);
    white-space: nowrap;
}
.bar-section:last-child { border-right: none; }
.bar-label {
    font-size: 9px;
    color: #667788;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bar-value {
    font-weight: 600;
    font-size: 13px;
}
.bar-cash .bar-value { color: #44DD55; }
.bar-cash .bar-value.negative { color: #FF4444; }
.bar-net .bar-value.positive { color: #44DD55; }
.bar-net .bar-value.negative { color: #FF4444; }
.bar-icon { font-size: 14px; }

/* Speed controls */
.bar-speed {
    margin-left: auto;
    gap: 2px;
    padding: 0 4px;
    border-right: none;
}
.speed-btn {
    padding: 4px 8px;
    font-size: 11px;
    background: rgba(255,255,255,0.04);
    color: #667788;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
    line-height: 1;
}
.speed-btn:hover { background: rgba(255,255,255,0.08); color: #AAB; }
.speed-btn.active {
    background: rgba(0,191,255,0.2);
    color: #00BFFF;
    border-color: rgba(0,191,255,0.3);
    box-shadow: 0 0 8px rgba(0,191,255,0.15);
}
#btn-help {
    min-width: 28px;
    font-weight: 800;
    color: #D7F3FF;
}

/* =========================================================================
   RIGHT PANEL (Zone Overview)
   ========================================================================= */
#game-right-panel {
    position: fixed;
    top: 56px; right: 8px;
    width: 260px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    border-radius: 10px;
    padding: 12px;
    z-index: 40;
    display: none;
    background: rgba(10, 12, 24, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
#game-right-panel.visible { display: block; animation: slideLeft 0.4s ease; }

#game-right-panel::-webkit-scrollbar { width: 4px; }
#game-right-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.panel-heading {
    font-size: 10px;
    color: #667788;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Zone cards */
.zone-card {
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.04);
    transition: all 0.2s ease;
    cursor: pointer;
}
.zone-card:hover { background: rgba(255,255,255,0.06); }
.zone-card.locked {
    opacity: 0.5;
    border-style: dashed;
}
.zone-card.locked:hover { opacity: 0.7; }
.zone-name {
    font-size: 13px;
    font-weight: 600;
    color: #E8E8F0;
    margin-bottom: 4px;
}
.zone-stats {
    font-size: 11px;
    color: #8899AA;
    display: flex;
    gap: 12px;
}
.zone-unlock-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #FFD700;
    background: rgba(255,215,0,0.1);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}
.zone-unlock-btn:hover {
    background: rgba(255,215,0,0.2);
    box-shadow: 0 0 12px rgba(255,215,0,0.15);
}
.zone-unlock-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Quick stats */
.quick-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 11px;
    color: #8899AA;
}
.quick-stat-val { color: #E8E8F0; font-weight: 600; }
.stat-bar {
    width: 80px;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}
.stat-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #FF8C00, #FFD700);
    transition: width 0.5s ease;
}

.forecast-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 8px;
}
.forecast-strip::-webkit-scrollbar {
    height: 4px;
}
.forecast-strip::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 3px;
}
.forecast-card {
    min-width: 72px;
    padding: 8px 7px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.05);
    text-align: center;
}
.forecast-day {
    font-size: 9px;
    font-weight: 700;
    color: #9ED8FF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.forecast-icon {
    font-size: 18px;
    line-height: 1;
    margin-bottom: 4px;
}
.forecast-temps {
    color: #F1F6FB;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 3px;
}
.forecast-meta {
    color: #94A6B8;
    font-size: 9px;
    line-height: 1.35;
}
.forecast-advisories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.forecast-advisory {
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border: 1px solid rgba(255,255,255,0.06);
}
.forecast-advisory-good {
    color: #D9F5E1;
    background: rgba(52, 152, 105, 0.18);
}
.forecast-advisory-warn {
    color: #FFE8C1;
    background: rgba(214, 143, 59, 0.18);
}
.forecast-upgrade-note {
    color: #8FA2B6;
    font-size: 10px;
    line-height: 1.4;
}

.pulse-hero {
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 10px;
    background:
        radial-gradient(circle at top left, rgba(109, 191, 255, 0.18), transparent 46%),
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.06);
}
.pulse-kicker {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #9ED8FF;
    margin-bottom: 4px;
}
.pulse-title {
    font-size: 15px;
    font-weight: 700;
    color: #F4F8FC;
    margin-bottom: 6px;
}
.pulse-copy {
    font-size: 11px;
    line-height: 1.45;
    color: #C7D4E2;
}
.pulse-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.pulse-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #DBE8F3;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.06);
}
.pulse-note {
    margin-bottom: 8px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
}
.pulse-note-good {
    border-color: rgba(58, 167, 109, 0.28);
    background: rgba(58, 167, 109, 0.08);
}
.pulse-note-warn {
    border-color: rgba(255, 160, 70, 0.28);
    background: rgba(255, 160, 70, 0.08);
}
.pulse-note-bad {
    border-color: rgba(214, 85, 85, 0.28);
    background: rgba(214, 85, 85, 0.08);
}
.pulse-note-label {
    font-size: 10px;
    font-weight: 700;
    color: #E9F0F6;
    margin-bottom: 4px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.pulse-note-text {
    font-size: 10px;
    line-height: 1.45;
    color: #C7D4E2;
}

.module-card {
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
}
.module-card-simple { opacity: 0.78; }
.module-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: rgba(255,255,255,0.08);
}
.module-card-hospitality::before { background: linear-gradient(180deg, #E2B25E, #9A5A44); }
.module-card-snowmaking::before { background: linear-gradient(180deg, #77D5FF, #4B8FD6); }
.module-card-grooming::before { background: linear-gradient(180deg, #F08B55, #A63B2D); }
.module-card-lifts::before { background: linear-gradient(180deg, #D8DDE5, #7B818A); }
.module-card-lessonsRentals::before { background: linear-gradient(180deg, #F2D27B, #6D98F0); }
.module-card-guestServices::before { background: linear-gradient(180deg, #95D7BF, #4F89A5); }
.module-card-financeMarketing::before { background: linear-gradient(180deg, #8ED694, #E3C765); }
.module-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.module-title-wrap {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.module-art {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    flex: 0 0 auto;
}
.module-art-large {
    width: 42px;
    height: 42px;
    border-radius: 11px;
}
.module-art-svg {
    width: 28px;
    height: 28px;
    display: block;
}
.module-art-large .module-art-svg {
    width: 34px;
    height: 34px;
}
.module-name {
    font-size: 12px;
    font-weight: 600;
    color: #E8E8F0;
    min-width: 0;
}
.module-mode-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #9ED8FF;
    background: rgba(46,134,193,0.18);
    border: 1px solid rgba(46,134,193,0.24);
    border-radius: 999px;
    padding: 2px 6px;
}
.module-desc {
    font-size: 10px;
    color: #7F90A3;
    line-height: 1.35;
    margin-bottom: 6px;
}
.module-status-line {
    font-size: 10px;
    color: #C9D3DE;
    line-height: 1.4;
    margin-bottom: 8px;
}
.module-actions {
    display: flex;
    gap: 6px;
}
.module-btn {
    flex: 1 1 0;
    padding: 5px 6px;
    font-size: 10px;
    font-weight: 600;
    color: #B9C7D6;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}
.module-btn.active {
    color: #FFF7E5;
    background: rgba(46,134,193,0.30);
    border-color: rgba(46,134,193,0.35);
}
.module-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.module-manage-btn {
    flex: 1.2 1 0;
}

/* Accordion */
.accordion-header {
    font-size: 11px;
    color: #667788;
    cursor: pointer;
    padding: 8px 0 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 8px;
    user-select: none;
    transition: color 0.2s;
}
.accordion-header:hover { color: #AAB; }
.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.accordion-body.open { max-height: 500px; }
.accordion-body .control-group { margin-bottom: 6px; }
.accordion-body label { font-size: 10px; color: #8899AA; display: block; margin-bottom: 2px; }
.accordion-body label span { color: #7EC8E3; font-weight: 600; }
.accordion-body input[type="range"] {
    width: 100%; height: 14px; accent-color: #2E86C1;
    -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.accordion-body input[type="range"]::-webkit-slider-track { height: 3px; background: rgba(255,255,255,0.1); border-radius: 2px; }
.accordion-body input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%;
    background: #2E86C1; border: 2px solid rgba(255,255,255,0.2); margin-top: -4px; cursor: pointer;
}

/* Camera view buttons */
.view-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 0;
}
.cam-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding: 5px 4px;
    background: rgba(46, 134, 193, 0.25);
    color: #C0D0E0;
    border: 1px solid rgba(46,134,193,0.2);
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
}
.cam-btn:hover {
    background: rgba(46, 134, 193, 0.5);
    border-color: rgba(46,134,193,0.4);
    color: #FFF;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(46,134,193,0.25);
}
.cam-btn:active { transform: translateY(0); }

/* =========================================================================
   LEFT DETAIL PANEL
   ========================================================================= */
#game-detail-panel {
    position: fixed;
    top: 56px; left: 8px;
    width: 300px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    border-radius: 10px;
    padding: 14px;
    z-index: 40;
    transform: translateX(-320px);
    transition: transform 0.3s ease;
    background: rgba(10, 12, 24, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
#game-detail-panel.visible { transform: translateX(0); }

#game-detail-panel::-webkit-scrollbar { width: 4px; }
#game-detail-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.detail-close {
    position: absolute;
    top: 8px; right: 8px;
    width: 24px; height: 24px;
    background: rgba(255,255,255,0.06);
    border: none; border-radius: 50%;
    color: #667788; font-size: 14px;
    cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    transition: all 0.2s;
    font-family: inherit;
}
.detail-close:hover { background: rgba(255,255,255,0.12); color: #E8E8F0; }

.detail-header {
    margin-bottom: 12px;
    padding-right: 28px;
}
.module-detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.detail-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}
.detail-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-easy { background: rgba(34,177,76,0.2); color: #44DD55; }
.badge-intermediate { background: rgba(63,72,204,0.2); color: #6688FF; }
.badge-advanced { background: rgba(50,50,50,0.5); color: #CCC; }
.badge-expert { background: rgba(200,0,0,0.2); color: #FF4444; }
.detail-badge-module {
    background: rgba(46,134,193,0.22);
    color: #9ED8FF;
}

.module-grounding {
    margin: 12px 0 10px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(46,134,193,0.12);
    border: 1px solid rgba(46,134,193,0.18);
    color: #D5E6F6;
    font-size: 11px;
    line-height: 1.45;
}
.module-grounding-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #9ED8FF;
    margin-bottom: 4px;
}
.module-detail-summary {
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    background: rgba(255,255,255,0.04);
    color: #D3DDE8;
    font-size: 11px;
    line-height: 1.4;
}
.module-detail-toolbar {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.module-detail-note {
    margin-bottom: 12px;
    color: #90A2B6;
    font-size: 11px;
    line-height: 1.45;
}
.module-control-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.module-control {
    padding: 10px 10px 8px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
}
.module-control-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.module-control-label {
    color: #E8EEF5;
    font-size: 11px;
    font-weight: 600;
}
.module-control-value {
    color: #9ED8FF;
    font-size: 11px;
    font-weight: 700;
}
.detail-slider {
    width: 100%;
    height: 16px;
    accent-color: #2E86C1;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}
.detail-slider:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}
.detail-slider::-webkit-slider-track {
    height: 4px;
    background: rgba(255,255,255,0.12);
    border-radius: 3px;
}
.detail-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    margin-top: -4px;
    border-radius: 50%;
    background: #8FD5FF;
    border: 2px solid rgba(18,28,44,0.95);
}

/* Snow depth bar */
.snow-bar-container {
    margin: 10px 0;
}
.snow-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #8899AA;
    margin-bottom: 4px;
}
.snow-bar {
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}
.snow-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #4488FF, #00BFFF, #00FFAA);
    transition: width 0.5s ease;
}
.detail-subpanel {
    margin: 12px 0;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.06);
}
.detail-subpanel-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #9ED8FF;
    margin-bottom: 8px;
}
.detail-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}
.detail-mini-stat {
    padding: 7px 6px;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    text-align: center;
}
.detail-mini-stat span {
    display: block;
    color: #8FA2B6;
    font-size: 9px;
    margin-bottom: 3px;
}
.detail-mini-stat strong {
    color: #EFF5FB;
    font-size: 12px;
}
.detail-subpanel-copy {
    color: #BFCDDD;
    font-size: 10px;
    line-height: 1.45;
}

/* Toggle switches */
.detail-toggles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
}
.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    font-size: 12px;
}
.toggle-label { color: #AAB; }
.toggle-switch {
    position: relative;
    width: 36px; height: 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    padding: 0;
}
.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #667788;
    transition: all 0.2s;
}
.toggle-switch.on { background: rgba(0,191,255,0.3); }
.toggle-switch.on::after { left: 18px; background: #00BFFF; }

/* Action buttons in detail panel */
.detail-action {
    display: block;
    width: 100%;
    padding: 8px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    border: 1px solid;
}
.action-groom {
    color: #FFD700;
    background: rgba(255,215,0,0.08);
    border-color: rgba(255,215,0,0.15);
}
.action-groom:hover { background: rgba(255,215,0,0.15); }
.action-upgrade {
    color: #00BFFF;
    background: rgba(0,191,255,0.08);
    border-color: rgba(0,191,255,0.15);
}
.action-upgrade:hover { background: rgba(0,191,255,0.15); }
.detail-action:disabled { opacity: 0.4; cursor: not-allowed; }

/* Lift level dots */
.lift-level {
    display: flex;
    gap: 4px;
    margin: 6px 0;
}
.level-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
}
.level-dot.filled {
    background: #00BFFF;
    border-color: #00BFFF;
    box-shadow: 0 0 6px rgba(0,191,255,0.4);
}

/* =========================================================================
   EVENT MODAL
   ========================================================================= */
#game-event-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
}
#game-event-modal.visible { display: flex; animation: fadeIn 0.3s ease; }

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal-content {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 460px;
    padding: 28px;
    border-radius: 14px;
    text-align: center;
    background: rgba(15, 18, 35, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
    animation: modalSlideUp 0.35s ease;
}
.modal-icon {
    font-size: 48px;
    margin-bottom: 8px;
}
.modal-content h2 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.modal-content p {
    font-size: 13px;
    color: #AAB;
    line-height: 1.5;
    margin-bottom: 20px;
}
.modal-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.modal-choice {
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #E8E8F0;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}
.modal-choice:hover {
    background: rgba(0,191,255,0.1);
    border-color: rgba(0,191,255,0.3);
    transform: translateY(-1px);
}

/* =========================================================================
   SEASON SUMMARY / OFF-SEASON
   ========================================================================= */
.game-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 5, 15, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow-y: auto;
}
.game-overlay.hidden { display: none; }
.help-card {
    width: min(920px, 94vw);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    padding: 24px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(114, 213, 255, 0.16), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
        linear-gradient(135deg, rgba(7, 20, 45, 0.96), rgba(9, 12, 24, 0.98));
    border: 1px solid rgba(150, 220, 255, 0.14);
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.help-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 18px;
}
.help-kicker {
    margin-bottom: 8px;
    color: #8CDFFF;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.help-head h2 {
    color: #F5FBFF;
    font-size: 30px;
    line-height: 1.05;
}
.help-close-btn {
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: #EAF6FF;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}
.help-close-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(140, 223, 255, 0.22);
}
.help-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.help-section {
    padding: 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
}
.help-section h3 {
    margin-bottom: 8px;
    color: #F5FBFF;
    font-size: 15px;
}
.help-section p {
    color: #C8DCEC;
    font-size: 13px;
    line-height: 1.55;
}
.help-footer {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.summary-content, .offseason-content {
    text-align: center;
    max-width: 600px;
    width: 90%;
    padding: 20px 0;
}
.summary-content h1, .offseason-content h1 {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
}
.summary-subtitle {
    font-size: 14px;
    color: #667788;
    margin-bottom: 28px;
}

/* Stats grid */
.summary-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 28px;
}
.summary-stat {
    padding: 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.04);
}
.summary-stat-label {
    font-size: 10px;
    color: #667788;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.summary-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #E8E8F0;
}
.summary-stat-value.profit { color: #44DD55; }
.summary-stat-value.loss { color: #FF4444; }

/* Upgrade grid (off-season) */
.upgrade-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 20px 0;
    text-align: left;
}
.upgrade-card {
    padding: 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: all 0.2s ease;
}
.upgrade-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(0,191,255,0.2); }
.upgrade-card.purchased { opacity: 0.4; cursor: default; border-color: rgba(68,221,85,0.2); }
.upgrade-card.purchased:hover { background: rgba(255,255,255,0.03); }
.upgrade-name { font-size: 12px; font-weight: 600; color: #E8E8F0; margin-bottom: 2px; }
.upgrade-desc { font-size: 10px; color: #8899AA; margin-bottom: 6px; }
.upgrade-cost { font-size: 12px; font-weight: 600; color: #FFD700; }
.upgrade-card.purchased .upgrade-cost { color: #44DD55; }

.btn-next-season {
    display: inline-block;
    padding: 12px 36px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(135deg, #0077CC, #00BFFF);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(0,191,255,0.3);
}
.btn-next-season:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,191,255,0.4); }

/* =========================================================================
   TOAST NOTIFICATIONS
   ========================================================================= */
#game-toasts {
    position: fixed;
    bottom: 20px;
    right: 16px;
    z-index: 70;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
    max-width: 300px;
}
.toast {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    animation: toastIn 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
    background: rgba(15, 18, 35, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    color: #E8E8F0;
}
.toast.removing { animation: toastOut 0.3s ease forwards; }
.toast-milestone { border-left: 3px solid #FFD700; }
.toast-good { border-left: 3px solid #44DD55; }
.toast-bad { border-left: 3px solid #FF4444; }
.toast-info { border-left: 3px solid #00BFFF; }

/* =========================================================================
   ANIMATIONS
   ========================================================================= */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideDown { from { transform: translateY(-48px); } to { transform: translateY(0); } }
@keyframes slideLeft { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes modalSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toastIn { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100px); } }
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } }

/* =========================================================================
   TUBING HILL
   ========================================================================= */
.tubing-panel-card {
    padding: 12px;
    border-radius: 10px;
    background:
        radial-gradient(circle at top right, rgba(116, 201, 255, 0.18), transparent 48%),
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.06);
}
.tubing-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: start;
    margin-bottom: 8px;
}
.tubing-panel-title {
    color: #F2F7FB;
    font-size: 15px;
    font-weight: 700;
}
.tubing-panel-copy {
    color: #C5D4E3;
    font-size: 11px;
    line-height: 1.45;
    margin-bottom: 10px;
}
.tubing-panel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.tubing-panel-tags span,
.tubing-schematic-badge,
.tubing-schematic-road,
.tubing-hub-promenade span,
.tubing-schematic-callout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.tubing-panel-tags span {
    color: #D9EAF6;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.05);
}
.tubing-panel-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}
.tubing-panel-stats div,
.tubing-detail-grid div,
.tubing-placeholder-grid div,
.tubing-result-stat {
    padding: 8px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.04);
}
.tubing-panel-stats span,
.tubing-detail-grid span,
.tubing-placeholder-grid span,
.tubing-result-stat span {
    display: block;
    color: #8EA3B8;
    font-size: 9px;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tubing-panel-stats strong,
.tubing-detail-grid strong,
.tubing-placeholder-grid strong,
.tubing-result-stat strong {
    color: #F4F9FD;
    font-size: 11px;
    line-height: 1.35;
}
.tubing-primary-btn,
.tubing-secondary-btn,
.tubing-icon-btn,
.dispatch-btn {
    font-family: inherit;
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: all 0.2s ease;
}
.tubing-primary-btn {
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    color: #F7FBFF;
    background: linear-gradient(135deg, #2A8FD3, #72D5FF);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
}
.tubing-primary-btn:hover,
.dispatch-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(30, 117, 174, 0.2);
}
.tubing-primary-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.tubing-secondary-btn,
.tubing-icon-btn {
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    color: #D7E4EF;
    font-size: 11px;
    font-weight: 600;
}
.tubing-sound-btn {
    min-width: 86px;
}
.tubing-sound-btn.muted {
    color: #93AABD;
    background: rgba(255,255,255,0.03);
}
.tubing-weather-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    border-radius: 999px;
    color: #EAF6FF;
    background: rgba(77, 161, 214, 0.22);
    border: 1px solid rgba(77, 161, 214, 0.22);
    font-size: 10px;
    font-weight: 700;
    min-height: 24px;
}
#tubing-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
}
#tubing-overlay.hidden {
    display: none;
}
.tubing-shell {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 26px;
}
.tubing-shell-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, rgba(101, 175, 224, 0.20), transparent 34%),
        linear-gradient(180deg, rgba(8, 12, 26, 0.72), rgba(5, 8, 18, 0.88));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.tubing-shell-panel {
    position: relative;
    width: min(1220px, 100%);
    min-height: 100%;
    border-radius: 22px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at top right, rgba(135, 203, 246, 0.16), transparent 28%),
        linear-gradient(180deg, rgba(10, 18, 34, 0.96), rgba(8, 14, 28, 0.96));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.tubing-shell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.tubing-shell-title-wrap {
    flex: 1 1 auto;
    min-width: 0;
}
.tubing-shell-kicker,
.tubing-lane-kicker,
.tubing-placeholder-kicker {
    display: block;
    color: #8FCFFF;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}
.tubing-shell-title {
    color: #F1F7FD;
    font-size: 26px;
    font-weight: 700;
}
.tubing-shell-note {
    color: #BFD0E2;
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 14px;
}
.tubing-stage {
    flex: 1 1 auto;
    min-height: 0;
}
.tubing-hub,
.tubing-play-shell {
    height: 100%;
}
.tubing-hub-board {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.95fr);
    gap: 16px;
    height: 100%;
}
.tubing-schematic,
.tubing-hub-sidebar,
.tubing-placeholder,
.tubing-result-card,
.dispatch-board {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    overflow: hidden;
}
.tubing-schematic {
    display: flex;
    flex-direction: column;
    padding: 18px;
    background:
        radial-gradient(circle at 70% 10%, rgba(190, 229, 255, 0.18), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}
.tubing-schematic-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: end;
    margin-bottom: 10px;
}
.tubing-schematic-badge {
    color: #0F4C71;
    background: rgba(120, 220, 248, 0.82);
    margin-bottom: 8px;
}
.tubing-schematic-road {
    color: #FFF3E7;
    background: rgba(140, 91, 55, 0.55);
    border: 1px solid rgba(255,255,255,0.08);
}
.tubing-schematic-title {
    color: #F5F9FD;
    font-size: 18px;
    font-weight: 700;
}
.tubing-weather-strip {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    margin-bottom: 14px;
    background: rgba(255,255,255,0.04);
    color: #D8E4EF;
    font-size: 11px;
}
.tubing-weather-strip strong {
    max-width: 70%;
    text-align: right;
    color: #F4F9FD;
}
.tubing-hub-promenade {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.tubing-hub-promenade span {
    color: #E5F4FF;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.05);
}
.tubing-schematic-map {
    position: relative;
    flex: 1 1 auto;
    min-height: 460px;
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 10%, rgba(255,255,255,0.55), transparent 20%),
        linear-gradient(180deg, rgba(197, 224, 244, 0.92), rgba(110, 157, 196, 0.95)),
        linear-gradient(135deg, #84A9C6, #D3E7F6);
}
.tubing-schematic-map::before {
    content: '';
    position: absolute;
    inset: 26% 0 12% 0;
    background:
        radial-gradient(circle at 6% 42%, rgba(71, 111, 86, 0.9) 0 8px, transparent 9px),
        radial-gradient(circle at 12% 54%, rgba(63, 98, 76, 0.88) 0 8px, transparent 9px),
        radial-gradient(circle at 88% 36%, rgba(77, 119, 92, 0.9) 0 8px, transparent 9px),
        radial-gradient(circle at 94% 62%, rgba(63, 98, 76, 0.88) 0 8px, transparent 9px),
        radial-gradient(circle at 80% 74%, rgba(68, 107, 84, 0.86) 0 8px, transparent 9px);
    opacity: 0.95;
    pointer-events: none;
}
.tubing-schematic-skyline {
    position: absolute;
    inset: 0 0 auto 0;
    height: 40%;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,0.55), transparent 10%),
        linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
}
.tubing-schematic-ridge {
    position: absolute;
    inset: 0 0 auto 0;
    height: 38%;
}
.tubing-schematic-ridge::before {
    content: '';
    position: absolute;
    inset: 4% 0 0;
    background:
        linear-gradient(180deg, rgba(182, 177, 166, 0.92), rgba(165, 157, 146, 0.92)),
        linear-gradient(180deg, rgba(37, 68, 89, 0.20), transparent 34%),
        radial-gradient(circle at 25% 45%, rgba(255,255,255,0.75), transparent 12%),
        radial-gradient(circle at 55% 31%, rgba(255,255,255,0.65), transparent 10%),
        radial-gradient(circle at 76% 42%, rgba(255,255,255,0.58), transparent 9%);
    clip-path: polygon(0 74%, 12% 48%, 23% 58%, 37% 30%, 50% 44%, 63% 26%, 75% 50%, 100% 35%, 100% 100%, 0 100%);
}
.tubing-schematic-roadbed {
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: 9%;
    height: 16%;
    background:
        linear-gradient(180deg, rgba(141, 128, 120, 0.94), rgba(122, 109, 102, 0.96));
    clip-path: polygon(0 72%, 15% 54%, 34% 66%, 54% 46%, 74% 66%, 100% 56%, 100% 100%, 0 100%);
}
.tubing-schematic-roadbed::before {
    content: '';
    position: absolute;
    inset: 28% 0 auto;
    height: 6px;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.74) 0 18px, transparent 18px 34px);
    opacity: 0.8;
}
.tubing-schematic-parking {
    position: absolute;
    right: 6%;
    bottom: 15%;
    width: 18%;
    height: 14%;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(73, 86, 102, 0.96), rgba(49, 61, 74, 0.96));
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.12);
}
.tubing-schematic-parking::before {
    content: 'P  P  P';
    position: absolute;
    inset: 18% auto auto 14%;
    color: rgba(255,255,255,0.7);
    font-size: 18px;
    letter-spacing: 18px;
}
.tubing-schematic-parking::after {
    content: '';
    position: absolute;
    inset: 48% 10% 16%;
    background:
        linear-gradient(90deg, #D87E4F 0 12%, transparent 12% 18%, #6DA8D6 18% 30%, transparent 30% 36%, #F2D27B 36% 48%, transparent 48% 54%, #B5C8D6 54% 66%, transparent 66% 72%, #EAA4C4 72% 84%, transparent 84% 90%, #88CBAE 90% 100%);
    border-radius: 8px;
}
.tubing-schematic-carpet {
    position: absolute;
    right: 18%;
    top: 23%;
    width: 4.4%;
    height: 42%;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(90, 182, 220, 0.92), rgba(53, 131, 175, 0.94));
    transform: rotate(8deg);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.16);
}
.tubing-schematic-carpet::before {
    content: '';
    position: absolute;
    inset: 8% 24%;
    background:
        repeating-linear-gradient(180deg, rgba(239, 248, 255, 0.96) 0 18px, transparent 18px 38px);
}
.tubing-schematic-lanes {
    position: absolute;
    inset: 12% 8% 18% 8%;
    background:
        linear-gradient(90deg, transparent 0, transparent 6%, rgba(255,255,255,0.46) 6%, rgba(255,255,255,0.46) 9%, transparent 9%, transparent 18%, rgba(255,255,255,0.42) 18%, rgba(255,255,255,0.42) 21%, transparent 21%, transparent 33%, rgba(255,255,255,0.48) 33%, rgba(255,255,255,0.48) 36%, transparent 36%, transparent 52%, rgba(255,255,255,0.44) 52%, rgba(255,255,255,0.44) 55%, transparent 55%, transparent 68%, rgba(255,255,255,0.50) 68%, rgba(255,255,255,0.50) 71%, transparent 71%, transparent 84%, rgba(255,255,255,0.46) 84%, rgba(255,255,255,0.46) 87%, transparent 87%),
        linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.14));
    clip-path: polygon(7% 0, 94% 0, 89% 100%, 13% 100%);
    opacity: 0.9;
    box-shadow: inset 0 0 0 8px rgba(255,255,255,0.12);
}
.tubing-schematic-lodge {
    position: absolute;
    left: 11%;
    right: 9%;
    bottom: 7%;
    height: 14%;
    border-radius: 22px 22px 10px 10px;
    background: linear-gradient(180deg, rgba(118, 82, 53, 0.95), rgba(78, 51, 35, 0.96));
    box-shadow: 0 12px 20px rgba(30, 25, 21, 0.18);
}
.tubing-schematic-lodge::after {
    content: '';
    position: absolute;
    inset: 26% 14% 18%;
    background:
        repeating-linear-gradient(90deg, rgba(249, 218, 174, 0.95) 0 9%, transparent 9% 15%);
}
.tubing-schematic-lodge::before {
    content: '';
    position: absolute;
    inset: -18% 8% auto;
    height: 28%;
    background: linear-gradient(180deg, #5B3C2E, #3B241B);
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.tubing-schematic-arch {
    position: absolute;
    left: 33%;
    bottom: 26%;
    width: 16%;
    height: 12%;
    border-radius: 60px 60px 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0E597D;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 1px;
    background: linear-gradient(180deg, rgba(124, 226, 252, 0.96), rgba(88, 194, 232, 0.96));
    box-shadow: 0 10px 16px rgba(23, 81, 112, 0.2);
}
.tubing-schematic-firepit {
    position: absolute;
    left: 16%;
    bottom: 17%;
    width: 11%;
    height: 11%;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(255, 204, 118, 0.95), rgba(221, 97, 39, 0.85) 36%, rgba(84, 48, 29, 0.9) 60%);
    box-shadow: 0 0 18px rgba(255, 151, 80, 0.32);
}
.tubing-schematic-crowd {
    position: absolute;
    left: 10%;
    right: 9%;
    bottom: 18%;
    height: 9%;
    background:
        radial-gradient(circle at 11% 60%, #3D5568 0 7px, transparent 8px),
        radial-gradient(circle at 20% 56%, #6A7683 0 7px, transparent 8px),
        radial-gradient(circle at 30% 60%, #975A4F 0 7px, transparent 8px),
        radial-gradient(circle at 58% 52%, #597190 0 7px, transparent 8px),
        radial-gradient(circle at 70% 58%, #D69D58 0 7px, transparent 8px),
        radial-gradient(circle at 82% 54%, #4A6771 0 7px, transparent 8px),
        radial-gradient(circle at 90% 58%, #E58F62 0 7px, transparent 8px);
    opacity: 0.95;
}
.tubing-schematic-callout {
    position: absolute;
    color: #F6FBFF;
    background: rgba(12, 28, 42, 0.72);
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 2;
}
.tubing-callout-lodge { left: 10%; bottom: 24%; }
.tubing-callout-carpet { right: 10%; top: 20%; }
.tubing-callout-snack { left: 24%; bottom: 24%; }
.tubing-hotspot {
    position: absolute;
    width: 124px;
    min-height: 72px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: linear-gradient(180deg, rgba(8, 16, 28, 0.74), rgba(8, 16, 28, 0.9));
    color: #F5FBFF;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(13, 18, 29, 0.16);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.tubing-hotspot::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 14px 0 0 14px;
    background: var(--lane-accent, #8FD6FF);
}
.tubing-hotspot.selected {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(12, 20, 31, 0.24);
}
.tubing-hotspot.locked {
    opacity: 0.62;
}
.tubing-hotspot span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
}
.tubing-hotspot small {
    font-size: 10px;
    color: #DCEBFA;
}
.tubing-hub-sidebar {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tubing-hub-mini-stats,
.tubing-detail-note-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.tubing-hub-mini-stats div,
.tubing-note-card {
    padding: 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.05);
}
.tubing-hub-mini-stats span,
.tubing-note-card span {
    display: block;
    color: #8FA8BE;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.tubing-hub-mini-stats strong,
.tubing-note-card strong {
    color: #EDF6FD;
    font-size: 11px;
    line-height: 1.4;
}
.tubing-sidebar-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: end;
}
.tubing-sidebar-head h3,
.tubing-detail-head h3,
.tubing-placeholder h2 {
    color: #F5FBFF;
    font-size: 18px;
    font-weight: 700;
}
.tubing-sidebar-stats {
    color: #9FBDD8;
    font-size: 11px;
}
.tubing-lane-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tubing-lane-card {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
    color: #D6E4F1;
    text-align: left;
    cursor: pointer;
}
.tubing-lane-card strong,
.tubing-lane-card span {
    display: block;
}
.tubing-lane-card strong {
    font-size: 13px;
    color: #F2F8FD;
    margin-bottom: 4px;
}
.tubing-lane-card span:last-child {
    font-size: 10px;
    line-height: 1.4;
}
.tubing-lane-card em {
    display: block;
    margin-top: 8px;
    color: #87BFE4;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}
.tubing-lane-card.selected {
    border-color: rgba(98, 180, 235, 0.42);
    background: rgba(58, 116, 162, 0.20);
}
.tubing-lane-card.locked {
    opacity: 0.7;
}
.tubing-detail-card,
.tubing-placeholder {
    padding: 16px;
}
.tubing-detail-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
    margin-bottom: 10px;
}
.tubing-detail-card p,
.tubing-placeholder p,
.tubing-result-card p {
    color: #CCDCE9;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 12px;
}
.tubing-detail-copy {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(121, 199, 242, 0.10);
    border: 1px solid rgba(121, 199, 242, 0.14);
    color: #DDECF7;
    font-size: 11px;
    line-height: 1.45;
}
.tubing-detail-grid,
.tubing-placeholder-grid,
.tubing-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.tubing-lock-copy,
.tubing-result-best,
.tubing-result-unlocks {
    margin-top: 10px;
    color: #B2C7DA;
    font-size: 11px;
    line-height: 1.4;
}
.tubing-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    background:
        radial-gradient(circle at top right, rgba(157, 213, 255, 0.18), transparent 24%),
        rgba(255,255,255,0.03);
}
.tubing-placeholder-mark {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    margin-bottom: 16px;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.34), transparent 28%),
        linear-gradient(135deg, var(--lane-accent, #8FD6FF), rgba(255,255,255,0.16));
}
.tubing-lane-hud {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.lane-hud-pill {
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}
.lane-hud-pill span {
    display: block;
    font-size: 9px;
    color: #91A8BD;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
}
.lane-hud-pill strong {
    color: #F3F9FD;
    font-size: 14px;
}
.tubing-run-canvas {
    width: 100%;
    max-height: calc(100vh - 300px);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: #DDEFFF;
}
.tubing-mini-canvas {
    width: 100%;
    max-height: calc(100vh - 300px);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: #DDEFFF;
}
.tubing-bowling-canvas {
    background: linear-gradient(180deg, #B4DAF3, #E0EEF8);
}
.tubing-play-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
}
.tubing-inline-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.tubing-inline-badges span {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #DCEAF6;
    font-size: 10px;
    font-weight: 700;
}
.lane-tip {
    color: #BFD0E0;
    font-size: 11px;
    line-height: 1.45;
}
.dispatch-board {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
    gap: 0;
    min-height: 480px;
}
.dispatch-track {
    position: relative;
    padding: 22px;
    background:
        linear-gradient(180deg, rgba(220, 238, 249, 0.96), rgba(157, 198, 224, 0.96));
}
.dispatch-track-sky {
    position: absolute;
    inset: 0 0 auto 0;
    height: 34%;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0)),
        radial-gradient(circle at 18% 24%, rgba(255,255,255,0.45), transparent 10%);
}
.dispatch-track-ridge {
    position: absolute;
    inset: 12% 0 auto 0;
    height: 22%;
    background:
        linear-gradient(180deg, rgba(179, 173, 163, 0.9), rgba(160, 152, 142, 0.9));
    clip-path: polygon(0 74%, 14% 46%, 28% 62%, 46% 30%, 60% 49%, 77% 32%, 100% 44%, 100% 100%, 0 100%);
}
.dispatch-track-lodge {
    position: absolute;
    left: 8%;
    bottom: 12%;
    width: 24%;
    height: 18%;
    border-radius: 16px 16px 8px 8px;
    background: linear-gradient(180deg, rgba(123, 86, 58, 0.96), rgba(78, 50, 33, 0.96));
}
.dispatch-track-lodge::before {
    content: '';
    position: absolute;
    inset: -26% 10% auto;
    height: 34%;
    background: linear-gradient(180deg, #5D3D2E, #3F241B);
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.dispatch-track-lodge::after {
    content: '';
    position: absolute;
    inset: 34% 16% 18%;
    background:
        repeating-linear-gradient(90deg, rgba(248, 216, 168, 0.98) 0 10%, transparent 10% 17%);
}
.dispatch-track-snack,
.dispatch-track-carpet {
    position: absolute;
    z-index: 2;
    color: #F6FBFF;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(11, 31, 46, 0.7);
    border: 1px solid rgba(255,255,255,0.12);
}
.dispatch-track-snack {
    left: 9%;
    bottom: 34%;
}
.dispatch-track-base {
    position: absolute;
    left: 6%;
    right: 12%;
    bottom: 0;
    height: 24%;
    background:
        linear-gradient(180deg, rgba(168, 154, 141, 0.85), rgba(144, 132, 120, 0.92));
    clip-path: polygon(0 44%, 22% 28%, 42% 42%, 62% 16%, 82% 40%, 100% 22%, 100% 100%, 0 100%);
}
.dispatch-track-corrals {
    position: absolute;
    left: 34%;
    right: 32%;
    bottom: 9%;
    height: 20%;
}
.dispatch-corral {
    position: absolute;
    bottom: 0;
    width: 28%;
    height: 86%;
    border-radius: 16px 16px 0 0;
    border: 4px solid rgba(255,255,255,0.55);
    border-bottom: none;
    background:
        repeating-linear-gradient(180deg, rgba(255,255,255,0.18) 0 18px, transparent 18px 32px);
}
.corral-1 { left: 0; }
.corral-2 { left: 36%; }
.corral-3 { right: 0; }
.dispatch-track-tubes {
    position: absolute;
    right: 14%;
    bottom: 12%;
    width: 12%;
    height: 12%;
    background:
        radial-gradient(circle at 18% 70%, #FF845A 0 16%, transparent 17%),
        radial-gradient(circle at 40% 32%, #6BB9E7 0 16%, transparent 17%),
        radial-gradient(circle at 68% 68%, #F0D178 0 16%, transparent 17%),
        radial-gradient(circle at 82% 28%, #91D1AE 0 16%, transparent 17%);
}
.dispatch-track-attendants {
    position: absolute;
    left: 33%;
    right: 26%;
    bottom: 9%;
    height: 10%;
    background:
        radial-gradient(circle at 7% 75%, #365B72 0 7px, transparent 8px),
        radial-gradient(circle at 27% 60%, #D36B4F 0 7px, transparent 8px),
        radial-gradient(circle at 50% 78%, #5A8096 0 7px, transparent 8px),
        radial-gradient(circle at 71% 64%, #E1A25F 0 7px, transparent 8px),
        radial-gradient(circle at 93% 74%, #476671 0 7px, transparent 8px);
}
.dispatch-track-carpet {
    right: 18%;
    top: 13%;
}
.dispatch-track-line {
    position: absolute;
    left: 22%;
    right: 18%;
    top: 11%;
    bottom: 8%;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.22));
    box-shadow: inset 0 0 0 8px rgba(90, 135, 170, 0.22);
}
.dispatch-track-line::before {
    content: '';
    position: absolute;
    inset: 8% 18%;
    background:
        repeating-linear-gradient(180deg, rgba(127, 190, 223, 0.22) 0 22px, transparent 22px 40px);
}
.dispatch-track-line::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 12%;
    height: 7%;
    background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.48));
    border-radius: 12px;
}
.dispatch-merge-label {
    position: absolute;
    top: 18px;
    left: 28px;
    color: #32516C;
    font-size: 12px;
    font-weight: 700;
}
.dispatch-river {
    position: absolute;
    inset: 0;
}
.dispatch-rider {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF885A, #FFFFFF);
    border: 2px solid rgba(37, 72, 98, 0.4);
}
.dispatch-lanes {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(255,255,255,0.02);
}
.dispatch-lane-card {
    padding: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
}
.dispatch-lane-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #D8E7F4;
    font-size: 12px;
    margin-bottom: 4px;
}
.dispatch-lane-subhead {
    color: #8BA7BE;
    font-size: 10px;
    margin-bottom: 10px;
}
.dispatch-queue {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 26px;
    margin-bottom: 12px;
}
.dispatch-guest-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #EFF7FF;
    border: 2px solid rgba(84, 129, 163, 0.42);
}
.dispatch-btn {
    width: 100%;
    padding: 9px 10px;
    border-radius: 10px;
    color: #F5FBFF;
    background: linear-gradient(135deg, #4B92C9, #7FD4F1);
    font-size: 11px;
    font-weight: 700;
}
.dispatch-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.tubing-result {
    position: absolute;
    inset: 92px 24px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 12, 23, 0.64);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 18px;
}
.tubing-result.hidden {
    display: none;
}
.tubing-result-card {
    width: min(520px, 100%);
    padding: 24px;
    background:
        radial-gradient(circle at top right, rgba(134, 211, 255, 0.14), transparent 22%),
        rgba(10, 20, 35, 0.96);
}
.tubing-result-snow {
    height: 32px;
    margin: -8px -8px 14px;
    background:
        radial-gradient(circle at 12% 50%, rgba(255,255,255,0.9) 0 14px, transparent 15px),
        radial-gradient(circle at 38% 58%, rgba(255,255,255,0.88) 0 16px, transparent 17px),
        radial-gradient(circle at 64% 52%, rgba(255,255,255,0.92) 0 14px, transparent 15px),
        radial-gradient(circle at 86% 50%, rgba(255,255,255,0.85) 0 12px, transparent 13px);
    opacity: 0.9;
}
.tubing-result-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.9px;
}
.tubing-rank-gold { background: rgba(255, 215, 0, 0.18); color: #FFD76C; }
.tubing-rank-silver { background: rgba(202, 219, 232, 0.18); color: #D9E8F7; }
.tubing-rank-bronze { background: rgba(205, 144, 91, 0.18); color: #E9B17E; }
.tubing-rank-finisher { background: rgba(95, 163, 211, 0.18); color: #9FD8FF; }
.tubing-result-card h3 {
    color: #F5FBFF;
    font-size: 24px;
    margin-bottom: 6px;
}
.tubing-result-primary {
    color: #92DBFF;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}
.tubing-result-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.tubing-result-actions .tubing-secondary-btn,
.tubing-result-actions .tubing-primary-btn {
    width: auto;
    flex: 1 1 0;
}

@media (max-width: 980px) {
    .tubing-shell {
        padding: 12px;
    }
    .tubing-shell-panel {
        padding: 14px;
    }
    .tubing-hub-board,
    .dispatch-board {
        grid-template-columns: 1fr;
    }
    .tubing-schematic-map {
        min-height: 340px;
    }
    .tubing-lane-hud {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .tubing-play-footer,
    .tubing-result-actions {
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .tubing-shell-title {
        font-size: 22px;
    }
    .tubing-hotspot {
        width: 94px;
        min-height: 62px;
        padding: 8px;
    }
    .tubing-panel-stats,
    .tubing-hub-mini-stats,
    .tubing-detail-note-grid,
    .tubing-detail-grid,
    .tubing-placeholder-grid,
    .tubing-result-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   TUTORIAL HINTS
   ========================================================================= */
.tutorial-hint {
    position: fixed;
    z-index: 95;
    max-width: 320px;
    padding: 16px 18px 14px;
    border-radius: 12px;
    background: rgba(0, 30, 60, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0,191,255,0.25);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(0,191,255,0.1);
    animation: hintAppear 0.4s ease;
    pointer-events: auto;
}
.tutorial-hint::before {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    background: rgba(0, 30, 60, 0.95);
    border: 1px solid rgba(0,191,255,0.25);
    transform: rotate(45deg);
}
/* Arrow positions */
.tutorial-hint.arrow-top::before {
    top: -7px; left: 24px;
    border-right: none; border-bottom: none;
}
.tutorial-hint.arrow-bottom::before {
    bottom: -7px; left: 24px;
    border-left: none; border-top: none;
}
.tutorial-hint.arrow-right::before {
    right: -7px; top: 16px;
    border-left: none; border-bottom: none;
}
.tutorial-hint.arrow-left::before {
    left: -7px; top: 16px;
    border-right: none; border-top: none;
}
.tutorial-hint-step {
    font-size: 9px;
    color: #00BFFF;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    margin-bottom: 6px;
}
.tutorial-hint-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.3;
}
.tutorial-hint-body {
    font-size: 12px;
    color: #99AABB;
    line-height: 1.5;
    margin-bottom: 12px;
}
.tutorial-hint-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tutorial-btn-got-it {
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: rgba(0,191,255,0.25);
    border: 1px solid rgba(0,191,255,0.35);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}
.tutorial-btn-got-it:hover {
    background: rgba(0,191,255,0.4);
    box-shadow: 0 0 12px rgba(0,191,255,0.2);
}
.tutorial-btn-skip {
    font-size: 10px;
    color: #556677;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s;
}
.tutorial-btn-skip:hover { color: #8899AA; }

/* Pulsing highlight ring for pointed-at elements */
.tutorial-highlight {
    box-shadow: 0 0 0 3px rgba(0,191,255,0.4), 0 0 16px rgba(0,191,255,0.2) !important;
    border-radius: 6px;
}
@keyframes hintAppear {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.tutorial-hint.removing {
    animation: hintDisappear 0.25s ease forwards;
}
@keyframes hintDisappear {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-8px); }
}

/* =========================================================================
   SNOW EFFECT OVERLAY
   ========================================================================= */
#snow-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 25;
}

/* =========================================================================
   CHART WINDOWS
   ========================================================================= */
#chart-windows-container {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 35;
}

.chart-window {
    position: absolute;
    border-radius: 10px;
    overflow: hidden;
    min-width: 280px;
    min-height: 180px;
    resize: both;
    display: flex;
    flex-direction: column;
    background: rgba(10, 14, 28, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 191, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 191, 255, 0.2);
}

.chart-win-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    cursor: grab;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
    background: rgba(255, 255, 255, 0.02);
}
.chart-win-titlebar:active { cursor: grabbing; }

.chart-win-title {
    font-size: 11px;
    font-weight: 600;
    color: #E8E8F0;
    letter-spacing: 0.5px;
}

.chart-win-controls {
    display: flex;
    gap: 4px;
}

.chart-win-btn {
    width: 20px; height: 20px;
    border-radius: 4px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: #667788;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: all 0.15s;
    line-height: 1;
    padding: 0;
}
.chart-win-btn:hover { background: rgba(255, 255, 255, 0.12); color: #E8E8F0; }
.chart-win-close:hover { background: rgba(255, 68, 68, 0.2); color: #FF6666; }

.chart-win-body {
    flex: 1;
    padding: 8px;
    min-height: 0;
    position: relative;
}
.chart-win-body canvas {
    width: 100% !important;
    height: 100% !important;
}

.chart-window.minimized .chart-win-body { display: none; }
.chart-window.minimized {
    height: auto !important;
    min-height: 0;
    resize: none;
}

/* Chart Picker Modal */
.chart-picker {
    position: fixed;
    border-radius: 12px;
    padding: 16px;
    width: 520px;
    max-width: 90vw;
    background: rgba(10, 14, 28, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0, 191, 255, 0.2);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 191, 255, 0.3);
    animation: modalSlideUp 0.25s ease;
}

.chart-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #E8E8F0;
}

.chart-picker-close {
    background: none;
    border: none;
    color: #667788;
    font-size: 20px;
    cursor: pointer;
    font-family: inherit;
    padding: 0 4px;
    line-height: 1;
}
.chart-picker-close:hover { color: #E8E8F0; }

.chart-picker-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.chart-picker-card {
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: all 0.2s ease;
}
.chart-picker-card:hover {
    background: rgba(0, 191, 255, 0.08);
    border-color: rgba(0, 191, 255, 0.25);
    transform: translateY(-1px);
}
.chart-picker-card.disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.chart-picker-icon { font-size: 22px; margin-bottom: 4px; }
.chart-picker-name { font-size: 12px; font-weight: 600; color: #E8E8F0; margin-bottom: 2px; }
.chart-picker-desc { font-size: 10px; color: #8899AA; line-height: 1.3; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 768px) {
    .start-content {
        width: min(94vw, 860px);
        padding: 24px 18px 22px;
        border-radius: 20px;
    }
    .start-feature-grid,
    .help-grid {
        grid-template-columns: 1fr;
    }
    .diff-cards { flex-direction: column; align-items: center; }
    .diff-card { width: 100%; max-width: 280px; }
    .start-actions {
        flex-direction: column;
    }
    .btn-start,
    .btn-help {
        width: 100%;
        max-width: 320px;
    }
    .start-title h1 { font-size: 28px; }
    .start-title h2 { font-size: 36px; letter-spacing: 6px; }
    #game-right-panel { width: 220px; }
    #game-detail-panel { width: 260px; }
    .summary-stats { grid-template-columns: 1fr; }
    .upgrade-grid { grid-template-columns: 1fr; }
    .help-card {
        padding: 18px;
        border-radius: 18px;
    }
    .help-head {
        flex-direction: column;
    }
}
@media (max-width: 480px) {
    #controls { width: 200px; padding: 10px 12px; font-size: 11px; }
    #controls h3 { font-size: 13px; }
    .pod-btn { font-size: 9px !important; }
    .bar-section { padding: 0 6px; }
    .bar-label { display: none; }
    .start-kicker {
        font-size: 10px;
        letter-spacing: 1.2px;
    }
    .start-summary {
        font-size: 14px;
    }
    .start-feature-grid div,
    .help-section {
        padding: 13px;
    }
    #game-right-panel { width: 200px; font-size: 11px; }
    #game-detail-panel { width: 100vw; left: 0; border-radius: 0; }
}