/* Tokens come from the shared kit (games/assets/infin8-ui/infin8-ui-tokens.css);
   sleddin-brand.css paints the galaxy page, menu and overlays with them. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--i8-text, #edf2ff); font: 16px/1.48 var(--i8-font, system-ui, sans-serif); }
.sleddin-page { max-width: 1700px; margin: 0 auto; padding: 13px clamp(10px, 2.5vw, 28px) 36px; }
.sled-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 65px; padding-bottom: 12px; }
.sled-topbar .brand { display: flex; gap: 12px; align-items: center; color: #f5fbff; font-size: 1.42rem; letter-spacing: .09em; font-weight: 900; text-decoration: none; }
.sled-topbar .brand b { color: var(--i8-cyan); }
.sled-topbar .brand small { display: block; color: #a5c3d2; font-size: .67rem; letter-spacing: .08em; font-weight: 550; }
.sled-topbar .infinity { color: #7be8ff; font-size: 2.8rem; font-weight: 400; line-height: 1; text-shadow: 0 0 20px #11c5f7; }
.sled-topbar nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sled-topbar nav a { color: #d1e8f3; text-decoration: none; border: 1px solid #40627b; padding: 7px 12px; border-radius: 10px; background: #102b42; }
.sled-topbar nav a:hover { background: #1d4565; }
.sled-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(235px, 296px); align-items: start; gap: 16px; }
.sled-stage { position: relative; overflow: hidden; isolation: isolate; border-radius: 19px; border: 1px solid #5287a6; background: #122f48; box-shadow: 0 14px 70px #0007, inset 0 0 80px #a8f2ff18; aspect-ratio: 16 / 9; min-height: 400px; touch-action: none; }
.sled-stage canvas { display: block; width: 100%; height: 100%; }
.sled-overlay { position: absolute; z-index: 5; inset: 0; display: grid; place-items: start center; padding: 20px; background: linear-gradient(120deg, #041326ec, #0d2d45c0 55%, #071829d9); text-align: center; overflow: auto; }
.sled-overlay[hidden] { display: none; }
.overlay-panel { max-width: 560px; max-height: 100%; overflow-y: auto; }
.sled-promo-shot { margin: 12px auto; width: min(440px, 100%); }
.sled-promo-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; }
.eyebrow { display: block; color: #8de5ff; letter-spacing: .17em; font-size: .68rem; text-transform: uppercase; font-weight: 850; }
.sled-overlay h1 { font-size: clamp(2.6rem, 6vw, 5rem); line-height: .96; margin: 14px 0; font-weight: 1000; letter-spacing: -.035em; text-shadow: 0 4px 24px #0009; }
.sled-overlay h1 em { font-style: normal; color: #76e5ff; }
.sled-overlay p { color: #d1e5ef; margin: 14px 0; }
.overlay-hint { font-size: .8rem; color: #a3cbdc !important; }
button, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
.result h2 { font-size: 3.3rem; color: #89f6ff; margin: 10px 0 0; line-height: 1; }
.sled-sidebar { display: grid; gap: 14px; }
.sled-sidebar .panel { border: 1px solid #426f88; background: linear-gradient(160deg, #132b42e8, #0a2033ed); border-radius: 16px; padding: 18px; box-shadow: 0 10px 36px #0004; }
.sled-sidebar h2 { margin: 4px 0 15px; font-size: 1.28rem; }
.sled-sidebar label { display: block; margin: 11px 0 6px; font-size: .8rem; font-weight: 750; color: #c3eafa; }
.sled-sidebar select { width: 100%; min-height: 39px; border-radius: 8px; border: 1px solid #6fa2be; background: #071e34; color: #f3fbff; padding: 8px; }
.toolbar { display: flex; gap: 8px; margin: 18px 0 13px; }
.toolbar button { flex: 1; border: 1px solid #5c93b0; background: #1d4562; color: white; border-radius: 10px; padding: 9px 7px; font-size: .76rem; font-weight: 800; }
.status { color: #9de5ff; font-size: .84rem; margin: 10px 0; }
.muted { color: #9bbacd !important; font-size: .74rem; }
.info-panel p { color: #d0e3ef; font-size: .87rem; }
.event-picker { display:block; text-align:left; font-size:.8rem; font-weight:750; color:#c3eafa; }
.event-picker select { display:block; width:100%; min-height:44px; border:1px solid #6fa2be; border-radius:8px; background:#071e34; color:#f3fbff; padding:8px; margin-top:6px; }
.cosmetic-shop { display:grid; gap:8px; }
.cosmetic-shop button { min-height:44px; border:1px solid #5c93b0; background:#1d4562; color:#f3fbff; border-radius:10px; padding:8px; text-align:left; cursor:pointer; }
/* Wardrobe states (design-system tokens): equipped, available, purchasable, locked. */
.cosmetic-shop button[data-state="equipped"] { border-color:var(--i8-success,#5ce6a5); background:rgba(92,230,165,.14); color:var(--i8-text,#edf2ff); font-weight:700; }
.cosmetic-shop button[data-state="available"] { border-color:var(--i8-cyan,#4de8ff); }
.cosmetic-shop button[data-state="purchasable"] { border-color:var(--i8-purple,#9b6dff); background:rgba(155,109,255,.16); }
.cosmetic-shop button[data-state="locked"] { border-style:dashed; border-color:var(--i8-line-soft,rgba(146,155,179,.4)); background:var(--i8-panel-alt,#151a2a); color:var(--i8-muted,#a3acc4); cursor:not-allowed; }
.cosmetic-shop button:focus-visible { outline:3px solid var(--i8-cyan,#4de8ff); outline-offset:2px; }
.sled-sidebar input[type=checkbox] { accent-color:var(--i8-cyan); width:18px; height:18px; vertical-align:middle; }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid #a5efff; outline-offset: 2px; }
@media (max-width: 1000px) { .sled-layout { grid-template-columns: 1fr; } .sled-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sled-stage { min-height: 390px; } }
@media (max-width: 650px) {
  .sleddin-page { padding: 8px 6px 24px; }
  .sled-topbar { flex-wrap: wrap; justify-content: center; }
  .sled-topbar nav { justify-content: center; gap: 7px; }
  .sled-topbar nav a { font-size: .74rem; padding: 6px 9px; }
  .sled-layout, .sled-sidebar { display: block; }
  .sled-sidebar .panel { margin: 10px 0; }
  .sled-stage { border-radius: 12px; height: min(74svh, 650px); min-height: 360px; aspect-ratio: auto; }
  .sled-overlay { padding: 13px; }
  .sled-overlay h1 { font-size: 2.6rem; }
  .overlay-panel p { font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }


/* Career readout, easily reached garage controls and browser-native full-screen ride. */
.career-summary { display: grid; gap: 7px; padding: 13px; border: 1px solid #488bad; background: #071d31; border-radius: 12px; }
.career-summary strong { color: #8ceaff; font-size: 1.13rem; }
.career-summary span { font-size: .85rem; color: #dceef7; }
.career-summary small { font-size: .75rem; color: #b1ddeb; }
.career-summary progress { display: block; width: 100%; height: 13px; accent-color: #6fe5ff; }
.finish-level { font-weight: 850; color: #a6f4ff !important; }
.finish-unlock:not(:empty) { font-weight: 850; color: #c8ffc7 !important; }
/* Desktop: the 16:9 stage never runs past the window bottom under the top bar,
   so the menu, map-loading panel and bottom HUD row stay on screen. */
@media (min-width: 651px) and (min-height: 531px) {
  .sled-stage { max-height: calc(100svh - 96px); margin-inline: auto; justify-self: center; width: 100%; }
}
/* Portrait phones: the same, under the wrapped top bar. */
@media (max-width: 650px) and (orientation: portrait) {
  .sled-stage { max-height: calc(100svh - 120px); }
}
.sled-stage:fullscreen, .sled-stage.is-expanded {
  border: 0; border-radius: 0; box-shadow: none; aspect-ratio: auto;
  width: 100vw; height: 100dvh; min-height: 0; max-height: none;
  background: #091b30;
}
.sled-stage.is-expanded { position: fixed; inset: 0; z-index: 10000; }
.sled-stage:fullscreen { width: 100%; height: 100%; }
body.sled-focus { overflow: hidden; }

@media (max-width: 900px) {
  .sled-stage { min-height: 440px; }
}
@media (max-width: 650px) {
  .sled-stage { height: min(82svh, 720px); min-height: 390px; }
  .overlay-panel { max-width: 100%; }
  .sled-overlay { padding: 9px 16px; }
  .sled-overlay h1 { font-size: clamp(2rem, 9vw, 3.6rem); }
  .sled-overlay p { margin: 8px 0; }
}

@media (max-height: 530px) and (orientation: landscape) {
  .sled-stage { height: 100svh; min-height: 260px; aspect-ratio: auto; }
  .sleddin-page { padding-top: 0; }
  .sled-overlay h1 { margin: 3px 0; }
  .sled-overlay p { margin: 5px 0; font-size: .78rem; }
  .overlay-panel { overflow-y: auto; }
}


/* Mobile-first controls: thumb travel is short, terrain remains visible above
 * controls, and the same hit targets work in fullscreen and browser mode. */
.sled-stage { -webkit-user-select:none; user-select:none; }
.sled-overlay, .sled-sidebar { -webkit-user-select:text; user-select:text; }
.sled-stage:fullscreen, .sled-stage.is-expanded {
  padding:0 !important;
  overscroll-behavior:contain;
  touch-action:none;
}
.sled-stage:fullscreen canvas, .sled-stage.is-expanded canvas {
  width:100%;height:100%;object-fit:fill;
}
.sled-remote-name { box-shadow:0 2px 6px #0007; }

@media (max-width:650px) {
  .sled-stage { border-radius:11px; }
  .sled-topbar { gap:5px; }
  .sled-topbar .brand { font-size:1.13rem; }
  .sled-overlay .overlay-panel { width:100%;padding-inline:2px; }
  .overlay-hint { font-size:.75rem !important; }
}
@media (max-width:395px) and (orientation:portrait) {
  .sled-stage { min-height:400px;height:min(78svh,700px); }
}
@media (orientation:landscape) and (max-height:530px) {
  .sled-stage, .sled-stage:fullscreen, .sled-stage.is-expanded { min-height:0;height:100dvh; }
  .sleddin-page:not(:has(.sled-stage:fullscreen)):not(:has(.sled-stage.is-expanded)) .sled-stage { height:min(100svh,530px); }
  .sled-overlay { padding:3px 14px; }
  .sled-overlay .overlay-panel { max-height:98%; }
  .sled-overlay h1 { font-size:clamp(1.6rem,5vw,2.8rem); }
}


/* Keep the two-thumb plus extra-finger GAS + BOOST/WHEELIE chords inside
 * independently captured touch zones, without browser pinch or scroll stealing a press. */
.sled-stage{ touch-action:none; overscroll-behavior:contain; }


.overlay-panel .secondary { display:block; margin:9px auto; min-height:40px; border:1px solid #6bacc8; border-radius:9px; background:#0b324a; color:#f2faff; padding:7px 15px; font-weight:800; }
.sled-stage.is-expanded { position:fixed !important; inset:0 !important; z-index:2147483647; width:100% !important; height:100dvh !important; min-height:0 !important; max-height:none !important; border-radius:0 !important; }
.sled-stage:fullscreen { width:100% !important; height:100% !important; min-height:0 !important; }
body.sled-focus { overflow:hidden !important; overscroll-behavior:none; }
html:has(body.sled-focus) { overflow:hidden; overscroll-behavior:none; }
/* Ensure the phone's effective viewport and not the scrolled page controls
 * the game stage, regardless of native Fullscreen API support. */
.sled-stage.is-expanded, .sled-stage:fullscreen {
  width:100vw !important;height:100dvh !important;
  min-height:0 !important;max-height:100dvh !important;
  aspect-ratio:auto !important;
}


/* Open Ride phone-first: gauges and display buttons share one actual flex row.
 * Never wrap. The entire rail respects Android/iOS safe areas and 320px widths. */
.open-ride-start {display:flex;gap:10px;align-items:center;justify-content:center;
  padding:10px;border:1px solid #70dcff77;border-radius:12px;background:#082b40c9;
  margin:10px auto;max-width:550px;cursor:pointer;text-align:left;color:#ebfbff;font-size:.82rem;font-weight:850;}
.open-ride-start input{width:21px;height:21px;flex:none;accent-color:#67dbfa;}
.open-ride-start small{display:block;font-weight:500;color:#b9daeb;font-size:.69rem;}
.open-ride-panel {margin:10px 0;padding:11px;border:1px solid #76d6fa6d;border-radius:12px;background:#082b4077;}
.open-ride-panel strong{font-size:.79rem;letter-spacing:.065em;color:#b6eaff;}
.open-ride-panel p{margin:6px 0;font-size:.77rem;color:#cee7f1;}
.open-ride-panel button{display:block;width:100%;min-height:43px;touch-action:manipulation;}


/* Infin8 Ride System: race information above, instruments below, clear sightline between. */
html[data-game-state="playing"] .sleddin-page{max-width:none;padding:0;}
html[data-game-state="playing"] .sled-topbar,
html[data-game-state="playing"] .sled-sidebar{display:none;}
html[data-game-state="playing"] .sled-layout{display:block;}
html[data-game-state="playing"] .sled-stage{width:100%;height:100dvh;min-height:0;max-height:none;aspect-ratio:auto;border:0;border-radius:0;}
#hud-combo{display:block;font-size:22px;font-style:italic;font-weight:950;letter-spacing:.08em;color:#4de8ff;}
.instrument-brand{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.14em;color:#aab9cf;}
.instrument-brand span:first-child{font-weight:950;color:#4de8ff;font-size:11px;}
.tachometer{position:relative;height:145px;}
.tachometer-dial{display:block;width:100%;height:145px;overflow:visible;}
.tachometer-track,.tachometer-live,.tachometer-redline{fill:none;stroke-width:7;stroke-linecap:round;}
.tachometer-track{stroke:#313c50;}
.tachometer-live{stroke:#4de8ff;transition:stroke-dashoffset .1s linear;}
.tachometer-redline{stroke:#ff708b;stroke-width:3;}
.tachometer-ticks{fill:none;stroke:#c5e5f1;stroke-width:1.5;}
.tachometer-numbers{fill:#b6c9df;font:11px system-ui;text-anchor:middle;}
.instrument-speed{position:absolute;left:0;right:0;top:58px;text-align:center;}
.instrument-speed strong{display:block;font-size:30px;line-height:1.1;font-weight:950;color:#f7fcff;letter-spacing:-.04em;}
.instrument-speed span,.instrument-rpm span{display:block;font-size:9px;letter-spacing:.16em;color:#aab9cf;}
.instrument-rpm{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);text-align:center;}
.instrument-rpm strong{display:block;font-size:16px;line-height:1.1;color:#4de8ff;}
.instrument-drive{position:absolute;right:24px;bottom:5px;font-size:17px;font-weight:900;color:#5ce6a5;}
.instrument-meters{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px;}
.instrument-meters label{font-size:8px;letter-spacing:.08em;color:#b9cbde;}
.instrument-meters meter{display:block;width:100%;height:8px;margin-top:4px;accent-color:#4de8ff;}
.instrument-meters meter::-webkit-meter-bar{background:#242b42;border:0;}
.instrument-meters meter::-webkit-meter-optimum-value{background:#4de8ff;}
.instrument-meters meter::-webkit-meter-suboptimum-value{background:#ffd479;}
/* Part condition strip: four thin bars under the meters; a part flashes once
 * as it crosses 75/50/25% so damage is noticed without reading a popup. */
.instrument-condition{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px;}
.instrument-condition span{position:relative;display:block;padding-top:7px;font-size:8px;letter-spacing:.08em;color:#b9cbde;text-align:center;}
.instrument-condition i{position:absolute;left:0;top:0;width:100%;height:4px;border-radius:2px;background:#242b42;overflow:hidden;}
.instrument-condition i::after{content:"";position:absolute;inset:0;width:var(--health,100%);background:#4de8ff;transition:width .3s;}
.instrument-condition span[data-level="used"] i::after{background:#9fe3ff;}
.instrument-condition span[data-level="worn"] i::after{background:#ffd479;}
.instrument-condition span[data-level="service"] i::after{background:#ff7a59;}
.instrument-condition span[data-level="out"] i::after{background:#ff4fd8;}
.instrument-condition span.is-alert{animation:conditionFlash .5s ease-out 3;color:#fff;}
@keyframes conditionFlash{0%,100%{filter:none}50%{filter:brightness(1.9) drop-shadow(0 0 6px #ff7a59)}}
@media(prefers-reduced-motion:reduce){.instrument-condition i::after{transition:none;}.instrument-condition span.is-alert{animation:none;outline:1px solid #ff7a59;outline-offset:2px;}}
.instrument-meters meter::-webkit-meter-even-less-good-value{background:#ff708b;}

@media(max-width:650px){
 #hud-combo{font-size:17px;}
 .instrument-brand{font-size:6px;}.instrument-brand span:first-child{font-size:9px;}
 .tachometer,.tachometer-dial{height:97px;}
 .instrument-speed{top:39px;}.instrument-speed strong{font-size:21px;}.instrument-speed span{font-size:7px;}
 .instrument-rpm{bottom:0;}.instrument-rpm strong{font-size:12px;}.instrument-rpm span{font-size:7px;}
 .instrument-drive{right:15px;bottom:3px;font-size:13px;}
 .instrument-meters{gap:8px;margin-top:5px;}.instrument-meters label{font-size:7px;}
}
/* Portrait phones and tablets: the cluster docks top-right under the race rail and the
 * freestyle chain sits beside it. The rider and both thumb decks stay clear in either
 * handedness and trick layout; nothing in the top band is a touch target. */

@media(max-width:430px) and (orientation:portrait){
 #hud-combo{font-size:15px;}
}
/* Landscape tablets: dock beside GAS/BRAKE, mirrored for left-handed play. */

@media(max-height:500px) and (orientation:landscape){
 #hud-combo{font-size:15px;}
}
@media(prefers-reduced-motion:reduce){.tachometer-live{transition:none;}}

.sled-stage[data-sled-theme="green"] .tachometer-live{stroke:#5ce6a5;}
.sled-stage[data-sled-theme="galaxy"] .tachometer-live{stroke:#b78aff;}
.sled-stage[data-redline="true"] .tachometer-live{stroke:#ff708b;}

/* Desktop racing instruments stay off the rider and the forward riding line. */


.ride-resume{position:absolute;z-index:10;left:50%;top:45%;transform:translate(-50%,-50%);min-width:200px;min-height:56px;padding:12px 24px;border:1px solid #4de8ff;border-radius:12px;background:#111522f2;color:#edf2ff;font:850 16px system-ui;box-shadow:0 8px 30px #0006;}
.ride-resume[hidden]{display:none;}


@media(max-height:500px) and (orientation:landscape) and (max-width:739px){
 .tachometer,.tachometer-dial{height:74px;}
 .instrument-speed{top:17px;}.instrument-speed strong{font-size:17px;}.instrument-speed span{font-size:6px;}
 .instrument-rpm strong{font-size:10px;}.instrument-rpm span{font-size:6px;}
 .instrument-drive{bottom:2px;right:12px;}.instrument-meters{margin-top:3px;}
}

@media(max-width:900px){
 .instrument-meters{gap:7px;}.instrument-meters label{font-size:9px;letter-spacing:0;line-height:1.2;}
 .instrument-meters meter{height:10px;margin-top:3px;}
}


/* Responsive pre-ride garage: never expand the page beyond the phone viewport. */
html[data-game-state="menu"],html[data-game-state="menu"] body{max-width:100%;overflow-x:clip;}
html[data-game-state="menu"] .sleddin-page,html[data-game-state="menu"] .sled-layout,
html[data-game-state="menu"] .sled-stage{width:100%;min-width:0;max-width:100%;}
html[data-game-state="menu"] .sled-stage{touch-action:pan-y!important;}
/* Phones and portrait tablets: a 16:9 stage would push the menu actions below the panel fold. */
@media(max-width:650px),(max-width:1000px) and (orientation:portrait){
  html[data-game-state="menu"] .sled-stage{height:min(94svh,780px);min-height:440px;}
}

/* Parts counter cards (earned-coin upgrades) inside the shell grid. */
#sled-shop-dialog .shop-item{display:grid;gap:6px;padding:12px;border:1px solid var(--i8-line-soft);border-radius:var(--i8-r-control);background:rgba(9,12,24,.6)}
#sled-shop-dialog .shop-item>strong{color:var(--i8-warning)}
#sled-shop-dialog .shop-item p{font-size:13px;line-height:1.5;margin:0;color:var(--i8-text-soft)}
#sled-shop-dialog .shop-item button{min-height:44px;width:100%}

/* In-ride telemetry floats over the snow. Each value and control reads as a
   separate instrument, without a large panel across the rider's view. */
html[data-game-state="playing"] .sled-stage .instrument-brand span:last-child{display:none;}
html[data-game-state="playing"] .sled-stage .tachometer-track{stroke:#16314caf;}
html[data-game-state="playing"] .sled-stage .tachometer-numbers{fill:#fff;paint-order:stroke;stroke:#061523;stroke-width:2px;}


/* The open-map selector and a single-context 360-degree garage. */
#mode-select[hidden],#event-select[hidden],#start-event-select[hidden]{display:none!important}
.garage-overlay[hidden]{display:none!important}
.garage-overlay{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;pointer-events:none;color:#effaff}
.garage-heading{display:flex;justify-content:space-between;gap:12px;padding:16px;background:linear-gradient(#101b2be8,transparent)}
#garage-orbit{flex:1;min-height:150px;pointer-events:auto;touch-action:none;position:relative;outline-offset:-3px}
#garage-orbit span{position:absolute;top:0;left:0;right:0;text-align:center;font-size:12px;color:#bfd4e1}
.garage-controls{pointer-events:auto;background:#101b2bf2;border-top:1px solid #4b798c;padding:12px 16px;max-height:52%;overflow:auto;text-align:center;display:grid;gap:7px}
.garage-controls p{margin:0;font-size:13px;line-height:1.4}
.garage-selector{display:flex;justify-content:center;align-items:center;gap:16px}.garage-selector strong{min-width:170px}.garage-selector button{min-width:44px;min-height:40px}
.garage-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.garage-actions button{min-height:44px}
#garage-item-buy{justify-self:center;min-height:40px}
html[data-sled-view="garage"] .sled-sidebar{display:none}
html[data-sled-view="garage"] .sled-layout{grid-template-columns:1fr}
.flag-interact{position:absolute;z-index:15;left:50%;top:28%;transform:translateX(-50%);min-height:48px;max-width:90%;background:#142b38ed;color:white;border:2px solid #fce5a4;border-radius:10px}
.flag-interact[hidden]{display:none!important}
@media(max-height:500px) and (min-width:600px){.garage-controls{position:absolute;right:0;top:0;bottom:0;width:42%;max-height:100%;padding:8px}#garage-orbit{width:58%}.garage-heading{width:58%;font-size:12px}.garage-selector{gap:5px}.garage-selector strong{min-width:0}.garage-actions button{font-size:11px}}

html[data-sled-view="main"] .sled-sidebar{display:none}
html[data-sled-view="main"] .sled-layout{grid-template-columns:1fr}

/* Three-action main menu, responsive five-map scenic picker. */
.menu-hidden-selectors[hidden]{display:none!important}
html[data-sled-view="map"] .sled-sidebar{display:none}
html[data-sled-view="map"] .sled-layout{grid-template-columns:1fr}

/* Accessible ride settings survive main menu, garage and native fullscreen. */
.sled-layout{grid-template-columns:minmax(0,1fr)}
#ride-settings-dialog .sled-sidebar{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px;max-width:100%}
#ride-settings-dialog .sled-sidebar .panel{max-width:100%;min-width:0}
#ride-settings-dialog .toolbar{display:none}
@media(max-width:650px){#ride-settings-dialog .sled-sidebar{display:block!important}#ride-settings-dialog .sled-sidebar .panel{margin:8px 0}}

.winter-attract[hidden]{display:none!important}
.winter-attract{position:absolute;inset:0;z-index:45;display:flex;align-items:flex-end;justify-content:center;padding:clamp(14px,4vw,45px);box-sizing:border-box;pointer-events:none;background:linear-gradient(0deg,#03101deb 0%,#0616299c 25%,transparent 66%)}
.attract-hero{pointer-events:auto;text-align:center;max-width:740px;width:100%;color:#f1fbff;text-shadow:0 2px 12px #071523}
.attract-hero h1{font-size:clamp(32px,6vw,72px);line-height:1.05;margin:4px 0}.attract-hero h1 em{font-style:normal;color:#82eaff}
.attract-hero p{font-size:clamp(12px,2vw,19px);letter-spacing:.09em;margin:8px}.attract-hero strong{display:block;font-size:clamp(12px,1.5vw,16px);color:#d2e6fa}
.attract-hero button{display:block;min-height:54px;min-width:min(90%,280px);margin:18px auto 8px;font-weight:800;letter-spacing:.1em}.attract-hero small{display:block;opacity:.85}
@media(max-height:540px){.winter-attract{padding:8px}.attract-hero h1{font-size:28px}.attract-hero button{margin:6px auto;min-height:44px}.attract-hero p{margin:3px}}

/* Authored world HUD: transparent overlays keep the landscape and real activity visible. */
.sled-stage{--world-cyan:#4de8ff;--world-purple:#9b6dff;--world-ink:#090b13;--world-text:#edf2ff;--whiteout:0;--weather-tint:#9fb8cc}
/* Blizzard whiteout: a themed, see-through edge vignette over the canvas only.
 * Opacity is capped well below full and the centre stays clear, so the rider
 * always keeps a readable view; HUD layers sit above it in DOM order. */
#weather-vignette{position:absolute;inset:0;pointer-events:none;opacity:var(--whiteout);
  background:radial-gradient(ellipse at 50% 56%,transparent 36%,color-mix(in srgb,var(--weather-tint) 78%,transparent) 100%);
  transition:opacity .9s ease}
@media (prefers-reduced-motion:reduce){#weather-vignette{transition:none}}
#winter-sonar,#winter-tension-panel{border-top:1px solid #4de8ff3d;margin-top:5px;padding-top:7px}
#winter-sonar meter,#winter-tension-panel meter,#winter-tension-panel progress{accent-color:var(--world-cyan);height:12px}




/* 2026-10-19: clean winter start screen and single-context performance garage.
   All styling sits above the existing live 3D canvas: no flattened mockup. */
.garage-heading{position:relative;z-index:2;pointer-events:none;align-items:center;
  padding:12px 18px;min-height:58px;box-sizing:border-box;
  background:linear-gradient(90deg,#081628f5,#10304aaa);
  border-bottom:2px solid #52c6ef}
.garage-heading strong{display:block;font-size:clamp(22px,2.8vw,33px);
  font-style:italic;font-weight:1000}
.garage-heading .eyebrow{font-size:10px}
#garage-balance{border:1px solid #d5a540;border-radius:22px;padding:6px 12px;
  background:#1d2532;font-size:clamp(12px,1.25vw,16px);font-weight:850;
  color:#ffe398}
.garage-overlay{background:linear-gradient(90deg,transparent 30%,#08182644)}
#garage-orbit{flex:1;min-height:140px}
#garage-orbit span{top:auto;bottom:8px;left:12px;right:auto;text-align:left;
  background:#081d30b8;border-radius:8px;padding:6px 10px}
.garage-controls{box-sizing:border-box;gap:10px;padding:12px;
  background:linear-gradient(160deg,#091c30f5,#07192cf8);
  border:1px solid #376c91;border-radius:14px;max-height:56%;
  scrollbar-color:#4386ad #0a1c31;text-align:left}
.garage-controls p{margin:0}
.garage-vehicle-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}
.garage-vehicle-heading .eyebrow{white-space:nowrap}
.garage-selector{gap:6px;justify-content:space-between}
.garage-selector strong{min-width:0;text-align:center;font-size:clamp(13px,1.35vw,18px)}
.garage-selector button{min-width:38px;min-height:38px;padding:5px 8px;
  border:1px solid #4fbadb;background:#0e344f;color:#def8ff;border-radius:7px}
.garage-section-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.garage-section-title strong{font-weight:950;font-style:italic;font-size:16px}
.garage-section-title small{font-size:11px;color:#a6d6e6;text-align:right}
.garage-stat-panel{background:#04152399;border:1px solid #346586;border-radius:10px;padding:10px}
#garage-stats{color:#cbe8f5;font-size:11px;line-height:1.4;margin:4px 0}
.garage-stat-bars{display:grid;gap:5px;margin-top:8px}
.garage-stat-row{display:grid;grid-template-columns:minmax(68px,85px) minmax(40px,1fr) 44px;
  align-items:center;gap:8px;font-size:11px;font-weight:750}
.garage-stat-track{background:#182d40;border:1px solid #34566b;border-radius:4px;height:9px;overflow:hidden}
.garage-stat-fill{display:block;height:100%;background:linear-gradient(90deg,#3ea7f3,#73eacb);
  transition:width .15s}
.garage-stat-value{text-align:right;font-variant-numeric:tabular-nums;color:#f5faff}
.garage-stat-value[data-delta="up"]{color:#6ff9ac}.garage-stat-value[data-delta="down"]{color:#ffc976}
.garage-item-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.garage-attachment{display:grid;grid-template-columns:24px minmax(0,1fr) auto;
  align-items:center;gap:7px;min-width:0;padding:10px 7px;
  border-radius:9px;background:#0c2941;color:#effaff;border:1px solid #32698d;
  text-align:left;min-height:57px;margin:0;cursor:pointer}
.garage-attachment:focus-visible{outline:2px solid white;outline-offset:2px}
.garage-attachment[data-preview="true"]{border-color:#8ce9ff;background:#134161;box-shadow:inset 0 0 0 1px #63c8ea55}
.garage-attachment[aria-pressed="true"]{border-color:#6addb3}
.garage-attachment .attachment-check{display:grid;place-items:center;width:22px;height:22px;
  font-size:14px;border:1px solid #7bc6ee;border-radius:4px;color:#06212a}
.garage-attachment[aria-pressed="true"] .attachment-check{background:#77ecc4}
.garage-attachment .attachment-name{font-size:12px;font-weight:800;line-height:1.3;min-width:0}
.garage-attachment .attachment-name small{display:block;color:#adcedd;font-size:10px;font-weight:500}
.garage-attachment .attachment-price{font-size:10px;font-weight:800;color:#fce3a6;white-space:nowrap}
/* Part tiers: black basic, cyan low, royal blue medium, purple high, pink rare and special. */
.garage-attachment[data-tier],#sled-shop-dialog .shop-item[data-tier]{border-left:4px solid var(--tier)}
.part-tier{display:inline-block;margin-right:5px;padding:1px 5px;border-radius:4px;background:var(--tier,#14141c);color:#fff;
  font-size:9px;font-weight:900;letter-spacing:.06em;line-height:1.4;vertical-align:1px}
[data-tier="basic"] .part-tier{box-shadow:inset 0 0 0 1px #8b8ba3}
[data-tier="low"] .part-tier{color:#04232b}
.garage-attachment[data-tier="basic"],#sled-shop-dialog .shop-item[data-tier="basic"]{border-left-color:#3a3a4a}
.sleddin-back-toast.garage-equip-notice{border-color:var(--tier,#4de8ff);box-shadow:0 0 24px color-mix(in srgb,var(--tier,#4de8ff) 55%,transparent)}
.sleddin-back-toast.garage-equip-notice[data-tier="basic"]{border-color:#8b8ba3}
.garage-item-detail{padding:8px 10px;background:#0a263a;border:1px solid #305878;border-radius:9px;
  display:grid;gap:6px}
.garage-item-selector{gap:6px}
#garage-item-description{font-size:12px;color:#daf3fc}
#garage-item-buy{justify-self:stretch;min-height:44px;margin:0}
.garage-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.garage-actions button{margin:0;min-width:0;min-height:42px;font-size:11px;padding:8px}
.garage-actions #garage-ride{grid-column:1/-1;min-height:50px;font-size:17px;color:#031d25;
  background:linear-gradient(115deg,#6ff7ca,#76ebff)}
@media(min-width:760px) and (min-height:520px){
  .garage-controls{position:absolute;top:67px;right:12px;bottom:12px;width:min(415px,42%);
    max-height:none;overflow:auto}
  #garage-orbit{width:60%;min-height:0}
  #garage-orbit span{bottom:12px}
}
@media(max-width:759px), (max-height:519px){
  .garage-controls{position:relative;flex:none;max-height:59%;overflow:auto;border-radius:0}
  .garage-vehicle-heading{flex-wrap:wrap}
  .garage-vehicle-heading .garage-selector{flex:1}
}
@media(max-width:470px){
  .garage-item-list{grid-template-columns:1fr}
  .garage-controls{max-height:62%;padding:8px}
  .garage-section-title small{font-size:10px}
}
@media(max-height:460px){
}


/* Sleddin service bay and contextual Fin Assistant maintenance hints.
   Visual condition alone never changes Three.js sled handling or speed. */
.garage-service{display:grid;gap:8px;border:1px solid #38657c;border-radius:10px;
  padding:10px;background:linear-gradient(135deg,#0a243af0,#07182bef)}
.garage-maintenance-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.garage-service-part{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;
  padding:9px;border:1px solid #376681;border-radius:8px;background:#071e32}
.garage-service-part[data-condition="warning"]{border-color:#da9c41}
.garage-service-part[data-condition="critical"],
.garage-service-part[data-condition="blown"]{border-color:#fa8565}
.garage-service-copy{display:grid;gap:2px;min-width:0}
.garage-service-copy strong{font-size:12px;color:#f5fdff}
.garage-service-copy span{font-size:10px;color:#c6e5f3;overflow-wrap:anywhere}
.garage-service-part[data-condition="blown"] .garage-service-copy span{color:#ffa688;font-weight:850}
.garage-service-meter{grid-column:1/-1;grid-row:2;height:7px;overflow:hidden;border-radius:5px;
  background:#24364d}
.garage-service-meter span{display:block;height:100%;background:linear-gradient(90deg,#219ce8,#70e6c6)}
.garage-service-part[data-condition="warning"] .garage-service-meter span{background:#f2b963}
.garage-service-part[data-condition="critical"] .garage-service-meter span,
.garage-service-part[data-condition="blown"] .garage-service-meter span{background:#f47f64}
.garage-repair-button{grid-column:2;grid-row:1;min-height:36px;min-width:90px;max-width:100%;
  font:800 11px system-ui;border-radius:7px;padding:6px 9px;
  background:#205070;color:#eefaff;border:1px solid #65bedd;cursor:pointer}
.garage-repair-button:disabled{background:#0d3040;color:#a1d6c6;opacity:.75}
.garage-fin-tip{display:grid;gap:7px;padding:10px 12px;background:#102d46;
  border:1px solid #59a7d2;border-radius:10px}
.garage-fin-tip[data-alert="critical"]{border-color:#ff9170;background:#3b2435}
.garage-fin-tip[data-alert="warning"]{border-color:#f2bd7b}
.garage-fin-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.garage-fin-heading strong{font-size:12px;color:#89efff;letter-spacing:.07em}
.garage-fin-heading #garage-fin-next{margin:0;font-size:10px;padding:7px 9px;min-height:36px}
#garage-fin-message{line-height:1.45;font-size:12px;color:#e6f8ff}
.ride-maintenance-alert[hidden]{display:none!important}
.ride-maintenance-alert{position:absolute;z-index:14;left:50%;top:17%;
  transform:translateX(-50%);width:min(500px,90%);box-sizing:border-box;
  pointer-events:none;background:#2d2025eb;color:#fff1ea;border:1px solid #ff9f69;
  box-shadow:0 8px 26px #0009;text-align:center;font-size:clamp(11px,1.4vw,15px);
  font-weight:850;padding:10px 13px;border-radius:10px}
@media(max-width:500px){
  .garage-maintenance-list{grid-template-columns:1fr}
  .garage-service{padding:8px}
}
@media(min-width:760px) and (min-height:520px){
  .garage-controls{width:min(455px,45%)}
}

/* One-time Ontario secret discovery: celebratory, dismissible and nonblocking. */
.flag-celebration[hidden]{display:none!important}
.flag-celebration{position:absolute;inset:0;z-index:48;pointer-events:none;
  display:flex;justify-content:center;align-items:center;padding:15px;background:#07152577}
.flag-celebration-card{pointer-events:auto;display:grid;justify-items:center;gap:9px;
  width:min(410px,92%);padding:clamp(18px,4vw,35px);
  background:linear-gradient(145deg,#0c2d48,#102c3a);
  color:#fff;border:2px solid #ffe5a7;border-radius:21px;
  text-align:center;box-shadow:0 20px 60px #0009,0 0 30px #2b9cff55;
  animation:flag-discovery-in .35s ease-out}
.flag-celebration-card>span{font-size:58px}
.flag-celebration-card strong{font-size:clamp(21px,3vw,32px);color:#fff6d6;font-weight:1000}
.flag-celebration-card p{margin:0;font-size:clamp(12px,1.8vw,17px)}
.flag-celebration-card b{color:#ffd366;font-size:clamp(24px,3vw,32px)}
.flag-celebration-card button{min-height:45px;width:100%;margin:4px 0 0}
@keyframes flag-discovery-in{from{opacity:0;transform:translateY(25px) scale(.94)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.flag-celebration-card{animation:none}}


/* Reference-matched 3D vehicle showroom: sled roster / large center turntable /
   category navigation, performance, upgrades, maintenance and sticky ride rail. */
html[data-sled-view="garage"] .sled-stage{height:min(92dvh,960px);min-height:530px;aspect-ratio:auto}
/* Short landscape phones: a 530 px garage stage overflowed the viewport and clipped the sticky GO RIDE rail. */
@media(max-height:559px) and (orientation:landscape){html[data-sled-view="garage"] .sled-stage{height:100dvh;min-height:0}}
.garage-overlay{isolation:isolate;overflow:hidden}
.garage-heading{z-index:5}
.garage-sled-roster{z-index:4;pointer-events:auto;display:grid;gap:7px;padding:8px;
  background:linear-gradient(135deg,#06172be8,#0a2438b8);box-sizing:border-box;
  border:1px solid #3d7197;border-radius:12px;overflow:auto;scrollbar-width:thin}
.garage-roster-card{min-width:0;display:flex;flex-direction:column;gap:0;align-items:stretch;
  justify-content:center;padding:7px 8px;min-height:69px;cursor:pointer;
  text-align:left;border:1px solid #4a7c99;border-radius:9px;
  background:linear-gradient(125deg,#0b263b,#0b1828);color:#eaf7ff}
.garage-roster-card[data-sled-color="blue"]{--sled-accent:#4abafa}
.garage-roster-card[data-sled-color="green"]{--sled-accent:#6bea95}
.garage-roster-card[data-sled-color="galaxy"]{--sled-accent:#bd8bff}
.garage-roster-card[aria-pressed="true"]{border:2px solid var(--sled-accent,#79d9f6);
  box-shadow:inset 0 0 0 1px #a8eeff33,0 0 12px #55dfff44;background:#133c4a}
.garage-roster-card:disabled{opacity:.53;cursor:not-allowed}
.garage-roster-card:focus-visible{outline:3px solid #fff;outline-offset:2px}
.garage-sled-icon{display:flex;align-items:center;justify-content:center;color:var(--sled-accent,#7ae9ff)}
.garage-sled-icon svg{width:100%;height:clamp(27px,5vw,50px);display:block}
.garage-roster-title{font-size:clamp(10px,1vw,13px);font-weight:900;line-height:1.25}
.garage-roster-title small{display:block;font-size:9px;letter-spacing:.04em;margin-top:3px;
  color:var(--sled-accent,#b0e3f4);font-weight:750}
#garage-orbit{z-index:2;cursor:grab}
#garage-orbit:active{cursor:grabbing}
#garage-model-status{position:absolute;bottom:36px;left:12px;right:12px;
  text-align:center;background:#061c2bcc;border:1px solid #547b94;border-radius:8px;
  padding:5px 8px;font-size:10px;letter-spacing:.06em;color:#e5f5ff;pointer-events:none}
.garage-controls{z-index:4;padding-bottom:8px;overscroll-behavior:contain}
.garage-category-tabs{display:flex;gap:5px;overflow-x:auto;padding:3px 1px 7px;
  scrollbar-width:thin;scroll-snap-type:x proximity}
.garage-category-tabs button{white-space:nowrap;flex:none;scroll-snap-align:start;min-height:41px;
  border:1px solid #447e9b;border-radius:8px;background:#10293d;color:#d2eefa;
  font:850 11px system-ui;letter-spacing:.025em;padding:8px 12px;cursor:pointer}
.garage-category-tabs button[aria-pressed="true"]{color:#062339;
  background:linear-gradient(110deg,#84e8ff,#70c9f1);border-color:#b7f4ff}
.garage-category-tabs button:focus-visible{outline:3px solid #fff}
.garage-controls .garage-stat-value{font-size:10px;white-space:nowrap}
.garage-stat-row{grid-template-columns:minmax(83px,96px) minmax(40px,1fr) minmax(70px,max-content)}
.garage-actions{position:sticky;bottom:-8px;z-index:6;box-sizing:border-box;
  padding:9px 2px 3px;box-shadow:0 -12px 12px #07192de8;
  background:linear-gradient(0deg,#081d30 85%,#081d30ed)}
.garage-actions button{min-height:42px}
.garage-actions #garage-ride{min-height:55px;border:1px solid #b7ffdf;
  font-weight:1000;letter-spacing:.04em;box-shadow:0 0 16px #36ed9866}
.garage-actions #garage-ride:disabled{background:#54342f;color:#ffe0ce;border-color:#a7644d;
  box-shadow:none;opacity:1}
.garage-service-part{grid-template-columns:minmax(0,1fr) minmax(110px,auto)}
.garage-service-part .garage-repair-button{font-size:11px}
.garage-attachment[data-preview="true"]:not([aria-pressed="true"]){box-shadow:inset 0 0 0 1px #6bbfe077}
@media(min-width:900px) and (min-height:560px){
  .garage-sled-roster{position:absolute;top:74px;bottom:12px;left:10px;width:150px;
    grid-template-columns:1fr;grid-auto-rows:minmax(92px,1fr);align-content:start}
  #garage-orbit{position:absolute;top:72px;bottom:12px;left:168px;
    width:calc(100% - min(455px,45%) - 192px);height:auto;min-height:0}
  .garage-controls{position:absolute;top:67px;right:12px;bottom:12px;width:min(455px,45%);
    max-height:none;overflow:auto}
}
@media(max-width:899px), (max-height:559px){
  .garage-sled-roster{position:relative;flex:none;width:100%;max-height:104px;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow-x:hidden}
  .garage-roster-card{min-height:57px;flex-direction:row;align-items:center;gap:6px}
  .garage-sled-icon{width:37%;min-width:35px}
  .garage-sled-icon svg{height:39px}
  #garage-orbit{flex:1;min-height:120px;width:100%}
  .garage-controls{position:relative;flex:none;width:100%;max-height:55%;overflow:auto;
    border-radius:0}
  .garage-vehicle-heading{display:flex;flex-wrap:nowrap}
}
@media(max-width:500px){
  .garage-sled-roster{padding:4px;max-height:72px}
  .garage-roster-card{min-height:58px;padding:4px}
  .garage-sled-icon{width:37%;min-width:27px}
  .garage-sled-icon svg{height:32px}
  .garage-roster-title{font-size:9px}
  .garage-roster-title small{font-size:8px}
  #garage-orbit span{font-size:9px;padding:4px 6px;bottom:8px}
  #garage-model-status{bottom:28px;font-size:9px;padding:3px 4px}
  .garage-controls{max-height:59%}
  .garage-category-tabs button{padding:7px 8px;font-size:10px;min-height:38px}
}

/* 2026-10-19: portrait garage selector accessibility.
   Preserve natural grid-row heights in the constrained garage scroller so
   category buttons cannot get covered by the performance section. */
.garage-controls{
  min-height:0;
  grid-auto-rows:max-content;
  align-content:start;
}
.garage-vehicle-heading,.garage-category-tabs{min-width:0}
@media(max-width:899px), (max-height:559px){
  .garage-controls{
    overflow-x:hidden;
    overflow-y:auto;
    scroll-padding-block:12px 155px;
    -webkit-overflow-scrolling:touch;
  }
  .garage-category-tabs{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    min-height:max-content;
    overflow:visible;
    padding:4px 1px 10px;
    scroll-snap-type:none;
  }
  .garage-category-tabs button{
    min-width:0;
    width:100%;
    min-height:44px;
    padding:8px 4px;
    margin:0;
    white-space:normal;
    line-height:1.2;
  }
  .garage-category-tabs button[aria-pressed="true"]{
    box-shadow:inset 0 0 0 2px #e8fbff;
  }
}
@media(max-width:500px){
  .garage-vehicle-heading{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:5px;
  }
  .garage-vehicle-heading .garage-selector{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 42px;
    gap:6px;
    width:100%;
    min-width:0;
  }
  .garage-vehicle-heading .garage-selector strong{min-width:0}
}
@media(max-width:359px){
  .garage-category-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* One compact world action dock. Safe areas keep it clear of both thumb decks. */
.sled-stage [hidden]{display:none!important}
/* GARAGE stays on the main menu: it opens the garage showroom (sled picker, parts, performance). */
html[data-game-state="menu"] #map-open{display:none}

/* Keep the actual authored 3D sled visible during in-lodge garage service. */
html[data-winter-service="true"] .garage-orbit{visibility:visible}
/* Spatial services live at the lodge; ride controls never spill their labels. */


@media(max-height:500px) and (min-width:740px) and (orientation:landscape){
  .ride-maintenance-alert{top:auto;bottom:max(8px,env(safe-area-inset-bottom))}
}


/* In-world Infin8 software storefront: real account/download access, not the
 * earned-coin sled shop or a second payment/activation service. */
.lodge-shop-dialog>h2{color:#eafcff;letter-spacing:.02em;font-size:clamp(21px,3.3vw,31px);margin:0 0 6px;}
.lodge-shop-dialog>h3{font-size:clamp(16px,2.3vw,21px);color:#8ff1ff;margin:16px 0 8px;}
.lodge-shop-lede{line-height:1.5;color:#d0ecf9;margin:0 0 12px;}
.lodge-shop-notice{padding:11px 13px;border:1px solid #386989;border-radius:9px;background:#0b2b42;color:#dcefff;line-height:1.45;}
.lodge-shop-links{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0;}
.lodge-shop-links a,.lodge-shop-product a{display:inline-flex;align-items:center;justify-content:center;
 min-height:44px;box-sizing:border-box;border:1px solid #4f97b6;border-radius:9px;padding:9px 13px;
 text-decoration:none;font-weight:750;color:#e1faff;background:#123b59;}
.lodge-shop-links a:hover,.lodge-shop-links a:focus-visible,.lodge-shop-product a:hover,.lodge-shop-product a:focus-visible{
 background:#1b5871;border-color:#90eaff;}
.lodge-shop-links a:last-child{border-color:#af85df;background:#292047;}
.lodge-shop-filters{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 14px;}
.lodge-shop-dialog .lodge-shop-filter{width:auto;min-height:42px;box-sizing:border-box;padding:8px 14px;
 background:#152f47;border:1px solid #4d8198;border-radius:20px;color:#e3f6ff;font-size:.86rem;font-weight:750;}
.lodge-shop-dialog .lodge-shop-filter[aria-pressed="true"]{background:#20637b;border-color:#80edff;color:#fff;box-shadow:0 0 0 1px #80edff;}
.lodge-shop-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0;}
.lodge-shop-catalog>.lodge-shop-notice{grid-column:1/-1;margin:0;}
.lodge-shop-product{min-width:0;padding:14px;border-radius:13px;border:1px solid #375e80;
 background:linear-gradient(145deg,#122a40,#101e39);display:grid;align-content:start;gap:8px;}
.lodge-shop-product small{color:#98e5f4;letter-spacing:.09em;font-weight:800;font-size:.71rem;}
.lodge-shop-product h4{color:#f4fcff;margin:0;font-size:clamp(17px,2.5vw,22px);}
.lodge-shop-product p{color:#d0e6ef;margin:0;font-size:.88rem;line-height:1.48;}
.lodge-shop-state{color:#b4ddec;font-size:.79rem;line-height:1.42;}
.lodge-shop-product a{margin-top:6px;justify-self:start;}
@media(max-width:670px){.lodge-shop-catalog{grid-template-columns:1fr}
 .lodge-shop-links a{flex:1 1 140px;text-align:center;font-size:.83rem;}
 .lodge-shop-product{padding:11px;gap:6px}}
@media(max-height:520px) and (orientation:landscape){
 .lodge-shop-links{gap:5px;margin:8px 0}.lodge-shop-links a{min-height:40px}}
/* Lodge shop sections: software, account allowances and Arcade unlocks. */
.lodge-shop-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 6px;}
.lodge-shop-dialog .lodge-shop-tab{width:auto;min-height:44px;box-sizing:border-box;padding:9px 15px;border-radius:12px;
 background:#152f47;border:1px solid #4d8198;color:#e3f6ff;font-weight:800;font-size:.86rem;letter-spacing:.03em;}
.lodge-shop-dialog .lodge-shop-tab[aria-selected="true"]{background:#20637b;border-color:#80edff;color:#fff;box-shadow:0 0 0 1px #80edff;}
.lodge-shop-badge{display:inline-flex;align-items:center;min-height:26px;padding:2px 10px;border-radius:999px;justify-self:start;
 font-size:.72rem;font-weight:800;letter-spacing:.05em;background:#163a52;color:#9ff0ff;border:1px solid #3f7f99;}
.lodge-shop-product[data-status="owned"] .lodge-shop-badge,.lodge-shop-product[data-status="active"] .lodge-shop-badge,
.lodge-shop-product[data-status="eligible"] .lodge-shop-badge{background:#0f4d3a;color:#8dffd1;border-color:#2fbf8a;}
.lodge-shop-product[data-status="requested"] .lodge-shop-badge{background:#3a2a5a;color:#d7b9ff;border-color:#8f6ad8;}
.lodge-shop-product[data-status="purchasable"] .lodge-shop-badge{background:#4b3a0f;color:#ffe08a;border-color:#c9a23a;}
.lodge-shop-product[data-status="coming-soon"],.lodge-shop-product[data-status="planned"]{opacity:.86;}
.lodge-shop-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.lodge-shop-dialog .lodge-shop-actions button{width:auto;min-height:44px;box-sizing:border-box;padding:9px 14px;border-radius:9px;font-weight:800;}
.lodge-shop-request{display:grid;gap:8px;grid-column:1/-1;}
.lodge-shop-request textarea{min-height:88px;width:100%;box-sizing:border-box;border-radius:9px;border:1px solid #4f97b6;
 background:#0b2238;color:#eafcff;padding:10px;font:inherit;resize:vertical;}
.lodge-shop-request small{color:#b4ddec;}
.lodge-shop-price{color:#ffe08a;font-weight:800;}
.lodge-shop-meta{color:#98e5f4;font-size:.78rem;}
@media(max-width:670px){.lodge-shop-dialog .lodge-shop-tab{flex:1 1 30%;font-size:.76rem;padding:9px 8px;text-align:center;}
 .lodge-shop-dialog .lodge-shop-actions button,.lodge-shop-actions a{flex:1 1 140px;text-align:center;}}
@media (prefers-reduced-motion: reduce){.lodge-shop-dialog .lodge-shop-tab,.lodge-shop-badge,.lodge-shop-product{transition:none;}}

/* Approved 2026 imagery and animated cosmic 3D showroom panels. */
.ecosystem-showcase-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
 gap:clamp(14px,2.5vw,26px);align-items:center;padding:clamp(12px,2vw,18px);
 border-radius:14px;border:1px solid #407799;background:linear-gradient(145deg,#0e294a,#211b46);}
.ecosystem-showcase-head img{display:block;width:100%;height:clamp(145px,18vw,260px);
 object-fit:contain;border-radius:10px;background:radial-gradient(ellipse,#463a7d66,transparent 75%);}
.ecosystem-showcase-copy{min-width:0;display:grid;gap:12px;}
.ecosystem-showcase-tag{font-size:.76rem;letter-spacing:.13em;color:#81f4ff;font-weight:900;}
.ecosystem-showcase-copy p{margin:0;color:#e2f6ff;line-height:1.55;font-size:clamp(.95rem,1.7vw,1.12rem);}
.ecosystem-showcase-features{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0;}
.ecosystem-showcase-features li{padding:12px 12px 12px 28px;min-width:0;position:relative;
 border:1px solid #2c6482;border-radius:10px;color:#e5faff;background:#0e2841e0;line-height:1.4;}
.ecosystem-showcase-features li::before{content:'✦';position:absolute;left:10px;top:11px;color:#81f4ff;}
.ecosystem-showcase-links a{transition:transform .2s ease,box-shadow .2s ease,background .2s ease;}
.ecosystem-showcase-links a:hover{transform:translateY(-2px);box-shadow:0 0 18px #37e5ff35;}
@media(max-width:670px){
 .ecosystem-showcase-head{grid-template-columns:1fr;gap:10px;}
 .ecosystem-showcase-head img{height:min(29dvh,188px);}
 .ecosystem-showcase-features{grid-template-columns:1fr;gap:7px;}
 .ecosystem-showcase-links{display:grid;grid-template-columns:1fr;}
}
@media(max-height:520px) and (orientation:landscape){
 .ecosystem-showcase-head{grid-template-columns:1fr 1fr;}
 .ecosystem-showcase-head img{height:120px;}
 .ecosystem-showcase-features{grid-template-columns:repeat(3,minmax(0,1fr));margin:9px 0;}
}
@media(prefers-reduced-motion:reduce){.ecosystem-showcase-links a{transition:none;}}

/* Curated current product families inside their in-world discovery panel. */
.ecosystem-showcase-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:16px 0;}
.ecosystem-showcase-gallery a{min-width:0;display:grid;gap:7px;padding:10px;text-align:center;text-decoration:none;
 border:1px solid #4a7796;border-radius:12px;color:#d5f7ff;background:#101f3cf2;
 transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;}
.ecosystem-showcase-gallery img{width:100%;height:106px;object-fit:contain;}
.ecosystem-showcase-gallery span{font-size:.76rem;font-weight:800;line-height:1.3;}
.ecosystem-showcase-gallery a:hover,.ecosystem-showcase-gallery a:focus-visible{border-color:#80ebff;
 box-shadow:0 0 18px #20daff3d;transform:translateY(-2px);}
@media(max-width:670px){.ecosystem-showcase-gallery{grid-template-columns:repeat(2,minmax(0,1fr));}
 .ecosystem-showcase-gallery img{height:92px;}}
@media(prefers-reduced-motion:reduce){.ecosystem-showcase-gallery a{transition:none;}
 .ecosystem-showcase-gallery a:hover{transform:none;}}

/* Physical in-world Arcade terminal: the full-size accessible screen view
   shares scoreboard data with the garage CanvasTexture and Discord feed. */
.lodge-arcade-board-dialog>h2{color:#9df1ff;font-size:clamp(21px,3vw,32px);margin:0 0 9px}
.lodge-arcade-board-dialog>p{color:#bfcde5;line-height:1.5}
.lodge-arcade-own-card{margin:14px 0;max-width:520px}
.lodge-arcade-own-card .rider-card{margin:0;overflow-wrap:anywhere}
.lodge-board-live{padding:12px 14px;border-left:3px solid #62e7ff;background:#152544;border-radius:8px;color:#defbff!important;overflow-wrap:anywhere}
.lodge-board-periods{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}
.winter-inventory-dialog .lodge-board-periods button,.lodge-board-periods a{
 display:inline-flex;justify-content:center;align-items:center;flex:1 1 125px;
 width:auto;min-height:46px;margin:0;padding:10px 14px;border:1px solid #6989b6;
 border-radius:12px;background:#102b47;color:#e2faff;font-weight:800;cursor:pointer;text-decoration:none;
}
.lodge-board-periods button[aria-pressed="true"]{background:#225e78;border-color:#6fe8ff;box-shadow:0 0 18px #62e7ff30}
.lodge-board-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lodge-board-period-label{grid-column:1/-1;margin:0 0 3px;color:#b8cbe5;font-size:.87rem}
.lodge-board-game{min-width:0;padding:14px;border:1px solid #52638f70;border-radius:13px;background:#0d1a32}
.lodge-board-game h3{margin:0 0 9px;color:#70eaff;font-size:1.06rem}
.lodge-board-game>p{margin:0;color:#b9c7dd}
.lodge-board-player{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid #667c9650}
.lodge-board-player-card{min-width:0;flex:1 1 auto}
.lodge-board-player>span{flex:0 0 auto;color:#d6c8ff;font-size:.73rem;text-align:right;max-width:45%}
.lodge-board-player .rider-identity{min-width:0}
@media(max-width:700px){.lodge-board-results{grid-template-columns:1fr}.lodge-board-player{align-items:flex-start;flex-wrap:wrap}.lodge-board-player>span{max-width:none;text-align:left}.lodge-arcade-board-dialog{max-height:calc(100dvh - 12px);padding:13px}}

/* Canonical Arcade subbrand, displayed at its native aspect ratio. */
.sled-topbar .brand .sled-arcade-brand-image{width:clamp(44px,5vw,56px);height:clamp(44px,5vw,56px);object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 0 10px #43e8ff40)}
.sled-topbar{border-bottom:1px solid rgba(91,219,255,.22)}
.sled-topbar .brand{min-width:0;letter-spacing:.045em}
.sled-topbar nav a{min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-color:#4de6ff70;transition:background-color .18s,border-color .18s,transform .18s}
.sled-topbar nav a:focus-visible{outline:3px solid #b5a4ff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.sled-topbar nav a{transition:none}}

/* Explorer gondola gate and daily missions (hub only). */
.explorer-mission-list{display:grid;gap:.6rem;margin:.6rem 0;padding:0;list-style:none}
.explorer-mission-list li{display:grid;gap:.25rem;padding:.6rem .75rem;border:1px solid #4de8ff44;border-radius:.6rem;background:#0b1224cc}
.explorer-mission-list li[data-done=true]{border-color:#5ce6a5aa;background:#0c2925cc}
.explorer-mission-list strong{color:#effbff}
.explorer-mission-list span,.explorer-mission-list small{color:#b9cde6}
.explorer-mission-list progress{width:100%;height:.55rem;accent-color:#42e0ff}

/* Boot guard and renderer fallbacks: plain colours only (no custom properties
   or color-mix) so older console/TV engines still paint a dark themed stage. */
html{background-color:#070b16}
.sled-stage canvas{background-color:#0b1a2e}
.sleddin-boot-fallback{position:absolute;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;
  background:#070b16;background:linear-gradient(160deg,#0a1630 0%,#120a2c 60%,#070b16 100%);color:#edf2ff;text-align:center}
.sleddin-boot-card{max-width:520px;padding:22px 20px;border:1px solid #4de8ff;border-radius:16px;background:#0d1a33;box-shadow:0 0 40px rgba(155,109,255,.35)}
.sleddin-boot-card h2{margin:6px 0 10px;font-size:1.3rem;line-height:1.25;color:#ffffff}
.sleddin-boot-card p{margin:0 0 10px;color:#c9d6f2;line-height:1.45}
.sleddin-boot-tag{font-size:.72rem;letter-spacing:.18em;font-weight:800;color:#4de8ff !important}
.sleddin-boot-detail{font-size:.78rem;color:#9fb0d4 !important;word-break:break-word}
.sleddin-boot-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.sleddin-boot-actions a,.sleddin-boot-actions button{min-height:44px;min-width:44px;padding:10px 18px;border-radius:10px;border:1px solid #4de8ff;background:#13284a;color:#edf2ff;font-weight:800;text-decoration:none;cursor:pointer}
.sleddin-boot-actions .sleddin-boot-primary{background:#4de8ff;color:#061227;border-color:#4de8ff}
.sleddin-boot-actions a:focus-visible,.sleddin-boot-actions button:focus-visible{outline:3px solid #ffffff;outline-offset:2px}
.graphics-reset-notice{position:absolute;left:50%;top:18%;z-index:120;transform:translateX(-50%);padding:12px 18px;border-radius:12px;border:1px solid #4de8ff;background:#0d1a33;color:#edf2ff;font-weight:800;box-shadow:0 0 30px rgba(77,232,255,.3)}
.graphics-reset-notice[hidden]{display:none}
/* Controller focus: every focusable control shows a visible themed ring when
   the last input was a gamepad (dialogs, overlays, HUD dock, selector). */
html[data-last-input="gamepad"] .sled-stage :focus,html[data-last-input="gamepad"] dialog :focus,html[data-last-input="gamepad"] .sleddin-page :focus{outline:3px solid #4de8ff;outline-offset:3px;box-shadow:0 0 0 6px rgba(155,109,255,.45)}

/* ===== Console / 10-foot layout (Xbox, PlayStation, Nintendo, TV browsers, or
   ?layout=console). Breakpoints: >=1600px wide uses the 1080p scale, 1280-1599
   the 720p scale. 5% overscan-safe margins, >=20px body copy, 28px+ HUD
   readouts, 56px targets, controller prompts, touch controls hidden, panels
   tinted with the rider's Infin8 theme (--theme-primary/--theme-secondary). */
html[data-console-layout="true"]{--console-safe-x:5vw;--console-safe-y:5vh;--console-target:56px;font-size:20px}
html[data-console-layout="true"] body{font-size:20px;line-height:1.45}
html[data-console-layout="true"] .sleddin-page{padding:var(--console-safe-y) var(--console-safe-x);box-sizing:border-box;max-width:none}
html[data-console-layout="true"] .sled-topbar{padding:0 0 12px;min-height:0}
html[data-console-layout="true"] .sled-topbar nav a{min-height:var(--console-target);display:inline-flex;align-items:center;padding:0 22px;font-size:20px}
html[data-console-layout="true"] .sled-layout{display:block}
html[data-console-layout="true"] .sled-sidebar,html[data-console-layout="true"] .sled-promo-shot{display:none!important}
html[data-console-layout="true"] .sled-stage{width:100%;max-height:calc(100vh - 2*var(--console-safe-y) - 72px);aspect-ratio:16/9;margin:0 auto;border-color:var(--theme-primary,#4de8ff);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-secondary,#9b6dff) 55%,transparent),0 14px 60px #000a}
html[data-console-layout="true"] .sled-stage button,html[data-console-layout="true"] dialog button,html[data-console-layout="true"] .sled-overlay button,html[data-console-layout="true"] .garage-overlay button,
html[data-console-layout="true"] .sled-stage select,html[data-console-layout="true"] dialog select{min-height:var(--console-target);min-width:var(--console-target);font-size:20px;padding-inline:18px}
html[data-console-layout="true"] dialog:not(.sled-popout){font-size:22px;max-width:min(1100px,90vw);max-height:90vh;border:2px solid var(--theme-primary,#4de8ff);
  background:linear-gradient(160deg,color-mix(in srgb,var(--theme-sky,#09152c) 92%,#000),#070b16);color:#f4f8ff}
html[data-console-layout="true"] dialog h2{font-size:32px}
html[data-console-layout="true"] .sled-overlay .panel,html[data-console-layout="true"] .garage-overlay{font-size:22px}
html[data-console-layout="true"] .sled-overlay h1,html[data-console-layout="true"] .sled-overlay h2{font-size:40px}
html[data-console-layout="true"] :focus{outline:4px solid var(--theme-primary,#4de8ff)!important;outline-offset:4px;box-shadow:0 0 0 8px color-mix(in srgb,var(--theme-secondary,#9b6dff) 45%,transparent)!important}
@media (max-width:1599px){
  html[data-console-layout="true"]{--console-target:52px;font-size:18px}
  html[data-console-layout="true"] body{font-size:18px}
  html[data-console-layout="true"] dialog{font-size:20px}
  html[data-console-layout="true"] .sled-overlay h1,html[data-console-layout="true"] .sled-overlay h2{font-size:32px}
}
/* Back guard toast ("press again to leave"). On TVs it and the shared controller
   hints, failure panels and loading actions stay inside the 5% title-safe area
   at 10-foot sizes; a controller-focused failure action always shows its ring. */
.sleddin-back-toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2147482100;max-width:calc(100vw - 32px);padding:10px 18px;border-radius:999px;border:1px solid var(--theme-primary,#4de8ff);background:rgba(17,21,34,.92);color:#edf2ff;font:700 15px/1.3 var(--i8-font,system-ui,"Segoe UI",sans-serif);box-shadow:0 0 24px rgba(155,109,255,.4);pointer-events:none}
.sleddin-back-toast[hidden]{display:none}
html[data-last-input="gamepad"] .sleddin-boot-actions :focus{outline:3px solid #ffffff;outline-offset:2px}
html[data-console-layout="true"] .sleddin-back-toast{bottom:calc(var(--console-safe-y) + 8px);font-size:22px;padding:14px 26px}
html[data-console-layout="true"] #gp-hints{bottom:var(--console-safe-y);max-width:calc(100vw - 2*var(--console-safe-x));font-size:20px;padding:10px 22px}
html[data-console-layout="true"] #gp-hints b{font-size:18px}
html[data-console-layout="true"] .sleddin-boot-card{max-width:min(760px,90vw);font-size:22px;padding:32px 36px}
html[data-console-layout="true"] .sleddin-boot-card h2{font-size:32px}
html[data-console-layout="true"] .sleddin-boot-actions a,html[data-console-layout="true"] .sleddin-boot-actions button,html[data-console-layout="true"] .loading-stage-actions button{display:inline-flex;align-items:center;min-height:var(--console-target);font-size:20px;padding-inline:22px}
html[data-console-layout="true"] .graphics-reset-notice{font-size:22px;padding:16px 26px}
/* Console: community dock as a 2x2 block at the right under the wildlife
   meter, leaving the left column to the player HUD and Explorer actions. */

/* ---- Mobile play (phones and tablets, iOS Safari and Android Chrome) ----
 * During play the page itself never scrolls, rubber-bands, pull-to-refreshes,
 * zooms or shows long-press callouts; the stage owns every touch. Text fields
 * stay selectable and use 16 px type so iOS does not zoom on focus. */
html[data-game-state="playing"], html[data-game-state="playing"] body { overflow: hidden; overscroll-behavior: none; }
html[data-game-state="playing"] body { touch-action: none; }
.sled-stage { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.sled-stage input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .sled-stage textarea, .sled-stage [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* Touch mode (input-mode.js, never pointer capability): 16 px fields so iOS does not zoom, 44 px targets. */
html[data-input-mode="touch"] .sled-stage input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-input-mode="touch"] .sled-stage textarea, html[data-input-mode="touch"] .sled-stage select { font-size: max(16px, 1em); }
html[data-input-mode="touch"] :is(.overlay-panel .secondary, .open-ride-panel button, .garage-selector button, .garage-category-tabs button, .garage-repair-button, .garage-fin-heading #garage-fin-next) { min-height: 44px; }
html[data-input-mode="touch"] .garage-selector button { min-width: 44px; }
/* Short landscape phones: maintenance notices sit above the centred prompt row. */
@media (max-height: 500px) and (orientation: landscape) {
  html[data-input-mode="touch"] .ride-maintenance-alert { top: auto; bottom: calc(var(--i8-safe-b, 10px) + 56px); }
}
/* Touch and narrow screens: the Arcade music button is fixed bottom-right above
   everything. It already steps aside during a ride (arcade-music-player.js
   gameCorner); the off-ride garage is a menu state, so the button covered the
   right end of GO RIDE SNOW and BACK TO MAIN MENU on a 412 px phone (live audit,
   October 23). The garage owns that corner while it is open. */
html[data-input-mode="touch"][data-sled-view="garage"] #infin8-music-widget-host { display: none !important; }
@media (max-width: 760px) {
  html[data-sled-view="garage"] #infin8-music-widget-host { display: none !important; }
}

/* ===== UI themes (Settings > Graphics & display > UI theme; settings-core.js
   uiTheme, html[data-i8-theme]). Infin8 Neon is the kit default. Every other
   palette re-issues the kit tokens so menus, the sheet, HUD chrome, toggles,
   sliders, focus rings and text all read at WCAG AA: text >= 4.5:1 and
   accent / UI components >= 3:1 against --i8-panel-solid (settings-core.test.cjs
   computes the ratios from these values). The sky theme is a separate world
   setting. Keep each palette's tokens on one declaration per theme. */
html[data-i8-theme="contrast-dark"] { color-scheme: dark; --i8-base: #000000; --i8-base-raised: #000000; --i8-panel: rgba(0, 0, 0, .96); --i8-panel-solid: #000000; --i8-panel-alt: #141414; --i8-line: #ffffff; --i8-line-soft: rgba(255, 255, 255, .55); --i8-cyan: #ffd400; --i8-cyan-bright: #ffe566; --i8-cyan-web: #ffd400; --i8-blue: #ffd400; --i8-violet: #ffffff; --i8-purple: #ffffff; --i8-purple-light: #ffffff; --i8-magenta: #ffffff; --i8-pink: #ffffff; --i8-accent: #ffd400; --i8-accent-2: #ffffff; --i8-text: #ffffff; --i8-text-soft: #f2f2f2; --i8-muted: #d0d0d0; --i8-on-neon: #000000; --i8-success: #7df59f; --i8-warning: #ffd400; --i8-danger: #ff7b7b; --i8-grad: linear-gradient(90deg, #ffd400, #ffd400); --i8-grad-diag: linear-gradient(135deg, #ffd400, #ffd400); --i8-grad-cool: linear-gradient(135deg, #ffd400, #ffd400); --i8-grad-hot: linear-gradient(135deg, #ffffff, #ffffff); --i8-grad-ring: conic-gradient(#ffd400, #ffd400); --i8-grad-chrome: linear-gradient(#ffffff, #ffffff); --i8-grad-glass: none; --i8-galaxy: #000000; --i8-glow-1: none; --i8-glow-2: none; --i8-glow-3: none; }
html[data-i8-theme="contrast-light"] { color-scheme: light; --i8-base: #ffffff; --i8-base-raised: #ffffff; --i8-panel: rgba(255, 255, 255, .97); --i8-panel-solid: #ffffff; --i8-panel-alt: #e9edf5; --i8-line: #0b1020; --i8-line-soft: rgba(11, 16, 32, .45); --i8-cyan: #0046c7; --i8-cyan-bright: #0046c7; --i8-cyan-web: #0046c7; --i8-blue: #0046c7; --i8-violet: #6a00a8; --i8-purple: #6a00a8; --i8-purple-light: #6a00a8; --i8-magenta: #6a00a8; --i8-pink: #6a00a8; --i8-accent: #0046c7; --i8-accent-2: #6a00a8; --i8-text: #0b1020; --i8-text-soft: #1f2740; --i8-muted: #3f4a63; --i8-on-neon: #ffffff; --i8-success: #0a6b36; --i8-warning: #7a4f00; --i8-danger: #b00020; --i8-grad: linear-gradient(90deg, #0046c7, #0046c7); --i8-grad-diag: linear-gradient(135deg, #0046c7, #0046c7); --i8-grad-cool: linear-gradient(135deg, #0046c7, #0046c7); --i8-grad-hot: linear-gradient(135deg, #6a00a8, #6a00a8); --i8-grad-ring: conic-gradient(#0046c7, #0046c7); --i8-grad-chrome: linear-gradient(#0b1020, #0b1020); --i8-grad-glass: none; --i8-galaxy: #ffffff; --i8-glow-1: none; --i8-glow-2: none; --i8-glow-3: none; }
html[data-i8-theme="aurora"] { color-scheme: dark; --i8-base: #04110c; --i8-base-raised: #07201a; --i8-panel: rgba(7, 32, 26, .9); --i8-panel-solid: #07201a; --i8-panel-alt: #0c2a22; --i8-line: #2a5a4a; --i8-line-soft: rgba(159, 209, 187, .3); --i8-cyan: #5ce6a5; --i8-cyan-bright: #8cf2c2; --i8-cyan-web: #5ce6a5; --i8-blue: #4fd3c4; --i8-violet: #7fd8ff; --i8-purple: #7fd8ff; --i8-purple-light: #b7ebff; --i8-magenta: #7fd8ff; --i8-pink: #a9f0d4; --i8-accent: #5ce6a5; --i8-accent-2: #7fd8ff; --i8-text: #eafff5; --i8-text-soft: #cdefdf; --i8-muted: #9fd1bb; --i8-on-neon: #04110c; --i8-success: #5ce6a5; --i8-warning: #ffd479; --i8-danger: #ff8a9e; --i8-grad: linear-gradient(90deg, #5ce6a5, #4fd3c4 50%, #7fd8ff); --i8-grad-diag: linear-gradient(135deg, #5ce6a5, #4fd3c4 50%, #7fd8ff); --i8-grad-cool: linear-gradient(135deg, #4fd3c4, #7fd8ff); --i8-grad-hot: linear-gradient(135deg, #5ce6a5, #a9f0d4); --i8-grad-ring: conic-gradient(#5ce6a5, #4fd3c4, #7fd8ff, #5ce6a5); --i8-galaxy: radial-gradient(ellipse 60% 45% at 20% 10%, rgba(92, 230, 165, .22), transparent 70%), #04110c; --i8-glow-1: 0 0 8px rgba(92, 230, 165, .35); --i8-glow-2: 0 0 14px rgba(92, 230, 165, .4); --i8-glow-3: 0 0 18px rgba(92, 230, 165, .5); }
html[data-i8-theme="ultraviolet"] { color-scheme: dark; --i8-base: #0a0614; --i8-base-raised: #130a24; --i8-panel: rgba(19, 10, 36, .9); --i8-panel-solid: #130a24; --i8-panel-alt: #1c1033; --i8-line: #3a2a5e; --i8-line-soft: rgba(179, 157, 219, .3); --i8-cyan: #c9a2ff; --i8-cyan-bright: #ddc4ff; --i8-cyan-web: #c9a2ff; --i8-blue: #a78bfa; --i8-violet: #c9a2ff; --i8-purple: #c9a2ff; --i8-purple-light: #ddc4ff; --i8-magenta: #ff6bd6; --i8-pink: #ff6bd6; --i8-accent: #c9a2ff; --i8-accent-2: #ff6bd6; --i8-text: #f3ecff; --i8-text-soft: #d9ccf5; --i8-muted: #b39ddb; --i8-on-neon: #0a0614; --i8-success: #8df0b4; --i8-warning: #ffd479; --i8-danger: #ff8aa3; --i8-grad: linear-gradient(90deg, #c9a2ff, #a78bfa 50%, #ff6bd6); --i8-grad-diag: linear-gradient(135deg, #c9a2ff, #ff6bd6); --i8-grad-cool: linear-gradient(135deg, #a78bfa, #c9a2ff); --i8-grad-hot: linear-gradient(135deg, #c9a2ff, #ff6bd6); --i8-grad-ring: conic-gradient(#c9a2ff, #ff6bd6, #c9a2ff); --i8-galaxy: radial-gradient(ellipse 60% 45% at 80% 15%, rgba(201, 162, 255, .22), transparent 70%), #0a0614; --i8-glow-1: 0 0 8px rgba(201, 162, 255, .35); --i8-glow-2: 0 0 14px rgba(201, 162, 255, .4); --i8-glow-3: 0 0 18px rgba(255, 107, 214, .4); }
html[data-i8-theme="mono"] { color-scheme: dark; --i8-base: #0b0b0b; --i8-base-raised: #111111; --i8-panel: rgba(17, 17, 17, .94); --i8-panel-solid: #111111; --i8-panel-alt: #1e1e1e; --i8-line: #5a5a5a; --i8-line-soft: rgba(255, 255, 255, .3); --i8-cyan: #ffffff; --i8-cyan-bright: #ffffff; --i8-cyan-web: #ffffff; --i8-blue: #d9d9d9; --i8-violet: #bfbfbf; --i8-purple: #bfbfbf; --i8-purple-light: #d9d9d9; --i8-magenta: #ffffff; --i8-pink: #ffffff; --i8-accent: #ffffff; --i8-accent-2: #bfbfbf; --i8-text: #f5f5f5; --i8-text-soft: #dcdcdc; --i8-muted: #b0b0b0; --i8-on-neon: #0b0b0b; --i8-success: #e6e6e6; --i8-warning: #e6e6e6; --i8-danger: #ffffff; --i8-grad: linear-gradient(90deg, #ffffff, #bfbfbf); --i8-grad-diag: linear-gradient(135deg, #ffffff, #bfbfbf); --i8-grad-cool: linear-gradient(135deg, #d9d9d9, #ffffff); --i8-grad-hot: linear-gradient(135deg, #ffffff, #bfbfbf); --i8-grad-ring: conic-gradient(#ffffff, #bfbfbf, #ffffff); --i8-grad-chrome: linear-gradient(#ffffff, #bfbfbf); --i8-grad-glass: none; --i8-galaxy: #0b0b0b; --i8-glow-1: none; --i8-glow-2: none; --i8-glow-3: none; }
/* Light theme: the page scrim and panels follow the light tokens; body text is dark. */
html[data-i8-theme="contrast-light"] body { background: #ffffff; color: var(--i8-text); }
html[data-i8-theme="contrast-light"] .sled-overlay, html[data-i8-theme="contrast-light"] .overlay-panel, html[data-i8-theme="contrast-light"] dialog:not(.sled-popout), html[data-i8-theme="contrast-light"] .garage-overlay { background: var(--i8-panel-solid); color: var(--i8-text); }
/* Non-neon themes: focus is a solid 3 px ring in the text colour with an offset, visible on any surface. */
html[data-i8-theme]:not([data-i8-theme="neon"]) :focus-visible, html[data-i8-theme]:not([data-i8-theme="neon"])[data-last-input="gamepad"] :focus { outline: 3px solid var(--i8-text) !important; outline-offset: 3px; box-shadow: 0 0 0 6px var(--i8-panel-solid) !important; }
/* Non-neon themes: toggles are a bordered track with a knob, ON filled with the accent (the neon art is galaxy-only). */
html[data-i8-theme]:not([data-i8-theme="neon"]) #ride-settings-dialog .i8-toggle { position: relative; width: 60px; height: 30px; border: 2px solid var(--i8-text); border-radius: 15px; background: var(--i8-panel-alt); box-shadow: none; }
html[data-i8-theme]:not([data-i8-theme="neon"]) #ride-settings-dialog .i8-toggle::before { content: none; }
html[data-i8-theme]:not([data-i8-theme="neon"]) #ride-settings-dialog .i8-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--i8-text); box-shadow: none; transition: transform .18s ease; }
html[data-i8-theme]:not([data-i8-theme="neon"]) #ride-settings-dialog .i8-toggle:checked { background: var(--i8-accent); border-color: var(--i8-accent); background-position: 0 0; }
html[data-i8-theme]:not([data-i8-theme="neon"]) #ride-settings-dialog .i8-toggle:checked::after { transform: translateX(30px); background: var(--i8-on-neon); }
html[data-i8-theme]:not([data-i8-theme="neon"]) #ride-settings-dialog .i8-slider { background: linear-gradient(90deg, var(--i8-accent) var(--i8-fill, 50%), var(--i8-line-soft) 0) 0 50% / 100% 8px no-repeat; }
html[data-i8-theme]:not([data-i8-theme="neon"]) #ride-settings-dialog .i8-slider::-webkit-slider-thumb { background: var(--i8-text); border: 3px solid var(--i8-panel-solid); }
html[data-i8-theme]:not([data-i8-theme="neon"]) #ride-settings-dialog .i8-slider::-moz-range-thumb { background: var(--i8-text); border: 3px solid var(--i8-panel-solid); }
html[data-i8-theme]:not([data-i8-theme="neon"]) .i8-tabs > [aria-selected="true"] { background: var(--i8-accent); color: var(--i8-on-neon); border-color: var(--i8-accent); box-shadow: none; }