/* Three close relatives of the original HUD language. Vehicle-specific colors remain intact. */
#hud-theme-atmosphere { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.23; transition:opacity .55s ease,filter .55s ease; }
.hud-theme-switch { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; width:100%; box-sizing:border-box; margin:8px 0 12px; padding:8px; border:1px solid rgba(220,244,255,.24); border-radius:12px; background:linear-gradient(135deg,rgba(34,41,49,.82),rgba(7,11,16,.9)); backdrop-filter:blur(22px); box-shadow:0 10px 30px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.12); color:#fff; }
.hud-theme-caption { grid-column:1/-1; font:600 11px var(--font-family),sans-serif; letter-spacing:.08em; color:var(--hud-muted); padding:1px 3px 3px; white-space:nowrap; }
.hud-theme-choice { min-width:0; border:1px solid transparent; border-radius:9px; background:transparent; color:#bbcad1; font:650 11px var(--font-family),sans-serif; white-space:nowrap; padding:8px 3px; cursor:pointer; transition:color .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease; }
.hud-theme-choice:hover { color:#fff; background:rgba(255,255,255,.08); }
.hud-theme-choice[aria-pressed="true"] { color:var(--hud-accent); border-color:rgba(var(--hud-accent-rgb),.45); background:rgba(var(--hud-accent-rgb),.15); box-shadow:0 0 16px rgba(var(--hud-accent-rgb),.16),inset 0 1px 0 rgba(255,255,255,.13); }
.hud-theme-choice:focus-visible { outline:2px solid var(--hud-accent); outline-offset:2px; }
body[data-hud-theme="neon"] { --hud-accent:#00dff6; --hud-accent-rgb:0,223,246; --hud-secondary:#ff2b8c; --hud-muted:#a5bdc8; --hud-line:rgba(135,224,237,.24); }
body[data-hud-theme="aurora"] { --hud-accent:#9be7dd; --hud-accent-rgb:155,231,221; --hud-secondary:#b3a0f2; --hud-muted:#b9bbd0; --hud-line:rgba(203,219,239,.25); }
body[data-hud-theme="telemetry"] { --hud-accent:#eac28c; --hud-accent-rgb:234,194,140; --hud-secondary:#80c8d6; --hud-muted:#b8bbbf; --hud-line:rgba(230,213,180,.23); }
body[data-hud-theme] #mode-toggle-wrapper { border-color:var(--hud-line); box-shadow:0 8px 28px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.09); }
body[data-hud-theme] .mode-opt.active, body[data-hud-theme] #btn-sort-rank.active, body[data-hud-theme] #btn-sort-league.active { background:var(--hud-accent); border-color:var(--hud-accent); color:#0b141b; box-shadow:0 0 18px rgba(var(--hud-accent-rgb),.35); }
body[data-hud-theme] #g-search-input:focus { outline:1px solid rgba(var(--hud-accent-rgb),.65); background:rgba(var(--hud-accent-rgb),.09); }
body[data-hud-theme] .garage-item.compare-selected { border-color:var(--hud-accent) !important; box-shadow:0 0 12px rgba(var(--hud-accent-rgb),.24); }
body[data-hud-theme] .g-score { color:var(--hud-accent); text-shadow:0 0 10px rgba(var(--hud-accent-rgb),.38); }
body[data-hud-theme] #ranking-stage { background:rgba(10,14,19,.95) !important; }
body[data-hud-theme] #ranking-stage::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.45; }
body[data-hud-theme] #btn-radar-toggle { color:var(--hud-accent); border-color:rgba(var(--hud-accent-rgb),.48); background:rgba(var(--hud-accent-rgb),.12); }
body[data-hud-theme] #btn-radar-toggle:hover { box-shadow:0 0 24px rgba(var(--hud-accent-rgb),.26); }
body[data-hud-theme] .glass-panel { border-color:rgba(var(--hud-accent-rgb),.32); }
body[data-hud-theme="neon"] #hud-theme-atmosphere { background:repeating-linear-gradient(112deg,transparent 0 128px,rgba(0,211,242,.09) 129px,transparent 131px),radial-gradient(ellipse at 83% 82%,rgba(230,22,114,.23),transparent 52%); mask-image:linear-gradient(0deg,#000,transparent 75%); }
body[data-hud-theme="neon"] #ranking-stage::before { background:linear-gradient(130deg,transparent 30%,rgba(0,216,242,.08) 51%,transparent 70%); }
body[data-hud-theme="neon"] .glass-panel { box-shadow:var(--glass-shadow),0 0 26px rgba(0,207,242,.11); }
body[data-hud-theme="aurora"] #hud-theme-atmosphere { opacity:.32; background:radial-gradient(ellipse 55% 75% at 20% 72%,rgba(83,211,207,.29),transparent 75%),radial-gradient(ellipse 55% 75% at 82% 28%,rgba(156,118,242,.25),transparent 75%); filter:blur(28px); animation:hud-aurora-drift 16s ease-in-out infinite alternate; }
body[data-hud-theme="aurora"] #ranking-stage { background:linear-gradient(135deg,rgba(19,29,40,.95),rgba(18,20,35,.97)) !important; }
body[data-hud-theme="aurora"] #ranking-stage::before { background:radial-gradient(ellipse at 16% 72%,rgba(75,190,187,.13),transparent 56%),radial-gradient(ellipse at 87% 30%,rgba(133,110,212,.15),transparent 48%); }
body[data-hud-theme="aurora"] .glass-panel { box-shadow:var(--glass-shadow),0 0 38px rgba(142,198,225,.17); border-color:rgba(211,227,248,.48); }
body[data-hud-theme="telemetry"] #hud-theme-atmosphere { opacity:.18; background:linear-gradient(rgba(214,225,231,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(214,225,231,.17) 1px,transparent 1px),radial-gradient(circle at 80% 80%,rgba(218,170,103,.22),transparent 52%); background-size:52px 52px,52px 52px,100% 100%; mask-image:linear-gradient(115deg,transparent 22%,#000 100%); }
body[data-hud-theme="telemetry"] #ranking-stage { background:rgba(12,18,23,.97) !important; }
body[data-hud-theme="telemetry"] #ranking-stage::before { background:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:48px 48px; }
body[data-hud-theme="telemetry"] .glass-panel { box-shadow:var(--glass-shadow),0 0 20px rgba(224,182,117,.12); border-color:rgba(224,197,154,.43); }
body.theme-car-transition[data-hud-theme="neon"] .glass-panel .content-wrapper { animation:hud-neon-card .66s cubic-bezier(.16,1,.3,1) both; }
body.theme-car-transition[data-hud-theme="aurora"] .glass-panel .content-wrapper { animation:hud-aurora-card .85s cubic-bezier(.16,1,.3,1) both; }
body.theme-car-transition[data-hud-theme="telemetry"] .glass-panel .content-wrapper { animation:hud-telemetry-card .66s cubic-bezier(.16,1,.3,1) both; }
body.theme-car-transition[data-hud-theme="neon"] .glass-panel::after { content:""; position:absolute; inset:0 auto 0 0; width:30%; z-index:3; background:linear-gradient(108deg,transparent,rgba(159,244,255,.12),transparent); transform:translateX(-160%); animation:hud-panel-sheen .82s ease-out both; pointer-events:none; }
body.theme-car-transition[data-hud-theme="telemetry"] .glass-panel .progress-track::after { content:""; position:absolute; top:0; bottom:0; width:2px; z-index:3; background:rgba(252,222,177,.7); box-shadow:0 0 8px rgba(252,222,177,.5); animation:hud-track-scan .92s cubic-bezier(.16,1,.3,1) both; pointer-events:none; }
/* A single pass on changed content keeps the card legible between selections. */
body.theme-car-transition[data-hud-theme="neon"] .glass-panel .progress-bar::after { content:""; position:absolute; top:0; right:0; width:24px; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.76)); border-radius:inherit; animation:hud-neon-chase .65s ease-out both; }
body.theme-car-transition[data-hud-theme="neon"] .glass-panel .rank-score, body.theme-car-transition[data-hud-theme="neon"] .glass-panel .stat-val { animation:hud-number-flip .62s cubic-bezier(.16,1,.3,1) both; transform-origin:50% 70%; }
body.theme-car-transition[data-hud-theme="aurora"] .glass-panel::after { content:""; position:absolute; inset:-25%; z-index:3; pointer-events:none; background:linear-gradient(112deg,transparent 40%,rgba(224,255,252,.11) 50%,transparent 60%); transform:translateX(-90%); animation:hud-aurora-sheen 1.2s ease-out both; }
body[data-hud-theme="telemetry"] .rank-bar-area { background:repeating-linear-gradient(90deg,rgba(232,214,179,.14) 0 1px,transparent 1px 24px) left 50% / 100% 20px no-repeat; }
body[data-hud-theme="telemetry"].mode-rank .rank-item:nth-child(-n+12) { animation:hud-rank-finish .56s cubic-bezier(.16,1,.3,1) both; animation-delay:var(--hud-row-delay,0ms); }
body[data-hud-theme="telemetry"] .radar-chart-area svg line { animation:hud-radar-axis .72s ease-out both; transform-origin:center; }
body[data-hud-theme="telemetry"] .radar-chart-area svg line:nth-of-type(2) { animation-delay:70ms; }
body[data-hud-theme="telemetry"] .radar-chart-area svg line:nth-of-type(3) { animation-delay:140ms; }
body[data-hud-theme="telemetry"] .radar-chart-area svg line:nth-of-type(4) { animation-delay:210ms; }
body[data-hud-theme="telemetry"] .radar-chart-area svg line:nth-of-type(5) { animation-delay:280ms; }
body[data-hud-theme="telemetry"] .radar-chart-area svg line:nth-of-type(6) { animation-delay:350ms; }
body[data-hud-theme="telemetry"] .radar-chart-area svg line:nth-of-type(7) { animation-delay:420ms; }
@keyframes hud-neon-card { from { opacity:.38; transform:translateY(9px); filter:brightness(1.25); } to { opacity:1; transform:translateY(0); filter:brightness(1); } }
@keyframes hud-aurora-card { from { opacity:.35; transform:translateY(6px); filter:blur(4px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
@keyframes hud-telemetry-card { from { opacity:.32; transform:translateX(7px); } to { opacity:1; transform:translateX(0); } }
@keyframes hud-panel-sheen { 0% { transform:translateX(-160%); } 100% { transform:translateX(450%); } }
@keyframes hud-track-scan { from { left:0; opacity:.8; } to { left:100%; opacity:0; } }
@keyframes hud-neon-chase { from { opacity:.8; transform:translateX(-150%); } to { opacity:0; transform:translateX(15%); } }
@keyframes hud-number-flip { from { opacity:.45; transform:perspective(360px) rotateX(-38deg); } to { opacity:1; transform:perspective(360px) rotateX(0); } }
@keyframes hud-aurora-sheen { from { opacity:0; transform:translateX(-90%); } 35% { opacity:1; } to { opacity:0; transform:translateX(90%); } }
@keyframes hud-rank-finish { from { opacity:.45; transform:translateX(-14px); } to { opacity:1; transform:translateX(0); } }
@keyframes hud-radar-axis { from { opacity:0; } to { opacity:1; } }
@keyframes hud-aurora-drift { from { transform:translate3d(-1.5%,1%,0) scale(1.03); } to { transform:translate3d(1.5%,-1%,0) scale(1.07); } }
@media (max-width:768px) { #panel-config .hud-theme-switch { margin-bottom:14px; } }
@media (prefers-reduced-motion:reduce) { #hud-theme-atmosphere, body.theme-car-transition .glass-panel .content-wrapper,body.theme-car-transition .glass-panel::after,body.theme-car-transition .glass-panel .progress-track::after,body.theme-car-transition .glass-panel .progress-bar::after,body.theme-car-transition .glass-panel .rank-score,body.theme-car-transition .glass-panel .stat-val,body[data-hud-theme="telemetry"].mode-rank .rank-item,body[data-hud-theme="telemetry"] .radar-chart-area svg line { animation:none !important; transition:none !important; } }

/* The theme controls now scroll with the edit panel; navigation retains its safe area. */
@media (max-width:768px) {
    :root { --hud-mobile-nav-h:58px; }
    #mobile-bottom-nav {
        bottom:calc(8px + env(safe-area-inset-bottom)) !important;
        min-height:var(--hud-mobile-nav-h) !important;
        max-width:calc(100vw - 14px) !important;
        box-sizing:border-box !important;
    }
    #center-stage.mobile-expanded-view { padding-bottom:calc(150px + env(safe-area-inset-bottom)) !important; }
    body.mode-compare #center-stage.mobile-expanded-view { padding-bottom:calc(170px + env(safe-area-inset-bottom)) !important; }
    #ext-expand-btn { bottom:calc(var(--hud-mobile-nav-h) + 76px + env(safe-area-inset-bottom)) !important; }
    #btn-radar-toggle { bottom:calc(var(--hud-mobile-nav-h) + 76px + env(safe-area-inset-bottom)) !important; }
}

/* Portrait correction: maintain the classic scaled card and its animations. */
@media (max-width:768px) {
    :root { --mobile-scale:calc(100vw / 440px) !important; --glass-width:380px !important; --glass-height:calc((380px / var(--ratio-w)) * var(--ratio-h)) !important; }
    #center-stage { box-sizing:border-box !important; height:var(--mobile-stage-height, 100dvh) !important; min-height:0 !important; bottom:auto !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain; padding-bottom:calc(var(--mobile-bottom-pad, 220px) + env(safe-area-inset-bottom)) !important; }
    #center-stage.mobile-expanded-view, body.mode-compare #center-stage.mobile-expanded-view { padding-bottom:calc(var(--mobile-bottom-pad, 240px) + env(safe-area-inset-bottom)) !important; }
    .glass-panel, .panel-pane, .content-wrapper { max-width:100% !important; }
    .panel-pane, .content-wrapper { min-width:0 !important; }
    .car-title, .stat-name, .ex-label, .ex-val { overflow-wrap:anywhere; }
    .panel, .garage-panel, .panel-right-help { box-sizing:border-box !important; height:100dvh !important; max-height:100dvh !important; overflow-x:hidden !important; padding-bottom:calc(120px + env(safe-area-inset-bottom)) !important; }
    .panel input, .panel select, .panel .control-row > * { min-width:0; }
    #ranking-stage { height:100dvh !important; }
    #mobile-bottom-nav { width:max-content !important; max-width:calc(100vw - 14px) !important; }
}