/* Infin8 Sleddin brand layer: the page, the main menu, every overlay and the
 * shared buttons, all on the Infin8 Neon UI kit tokens (games/assets/infin8-ui).
 * Loads with the menu, so it stays CSS-only plus three small WebP brand crops:
 * the chrome INFIN + glossy 8 logotype and the core banner's two nebula edges.
 * Menu pattern: big hero art with one glass panel and a vertical action list
 * (Riders Republic / Forza Horizon home screens); controller focus always shows
 * a ring (Rocket League menus). */

/* Shared Arcade shell tokens follow the kit inside Sleddin. */
html:root {
  --bg: var(--i8-base); --panel: var(--i8-panel); --panel-solid: var(--i8-panel-solid);
  --cyan: var(--i8-cyan); --purple: var(--i8-violet); --accent: var(--i8-violet);
  --text: var(--i8-text); --muted: var(--i8-muted);
  background-color: var(--i8-base);
}
body {
  background:
    url("../assets/infin8-ui/brand/galaxy-left.webp") left top / auto min(100vh, 900px) no-repeat fixed,
    url("../assets/infin8-ui/brand/galaxy-right.webp") right top / auto min(100vh, 900px) no-repeat fixed,
    var(--i8-galaxy);
  background-color: var(--i8-base);
}

/* ---- Top bar ---- */
.sled-topbar .brand { color: var(--i8-text); font-family: var(--i8-font); }
.sled-topbar .brand b { background: var(--i8-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sled-topbar .brand small { color: var(--i8-muted); }
.sled-topbar nav a {
  display: inline-flex; align-items: center; min-height: var(--i8-touch); padding: 0 var(--i8-s4);
  border: 1.5px solid rgba(127, 240, 255, .45); border-radius: var(--i8-r-pill); background: rgba(12, 18, 36, .7);
  color: var(--i8-text); font: 800 var(--i8-fs-xs)/1 var(--i8-font); letter-spacing: var(--i8-track); text-transform: uppercase;
  box-shadow: var(--i8-inset), 0 0 10px rgba(77, 232, 255, .2); transition: border-color var(--i8-t-med), box-shadow var(--i8-t-med);
}
.sled-topbar nav a:hover, .sled-topbar nav a:focus-visible { background: rgba(12, 18, 36, .85); border-color: var(--i8-cyan-bright); box-shadow: var(--i8-inset), var(--i8-glow-2); }

/* ---- Stage frame: a neon rim around the world (menu and embedded play) ---- */
.sled-stage { border: 0; background: var(--i8-base); box-shadow: 0 0 0 1.5px rgba(77, 232, 255, .55), 0 0 0 3px rgba(139, 92, 246, .25), 0 18px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(139, 92, 246, .25); }
html[data-game-state="playing"] .sled-stage { box-shadow: none; }

/* ---- Overlays share one galaxy veil and one glass panel ---- */
.sled-overlay { background: linear-gradient(100deg, rgba(7, 9, 16, .94) 0%, rgba(13, 10, 34, .78) 42%, rgba(7, 9, 16, .25) 100%); color: var(--i8-text); }
.overlay-panel h2, .sled-overlay h2 { font-family: var(--i8-font); letter-spacing: .02em; }
.eyebrow { color: var(--i8-cyan); font: 800 var(--i8-fs-xs)/1.2 var(--i8-font); letter-spacing: var(--i8-track-wide); text-transform: uppercase; }

/* Buttons that are not yet kit buttons take the kit's look. */
.primary:not(.i8-btn), .secondary:not(.i8-btn) {
  min-height: var(--i8-touch); margin: 6px 4px; padding: 0 var(--i8-s5); border-radius: var(--i8-r-control);
  font: 800 var(--i8-fs-sm)/1 var(--i8-font); letter-spacing: var(--i8-track); text-transform: uppercase; color: var(--i8-on-neon);
  transition: transform var(--i8-t-fast) var(--i8-ease), box-shadow var(--i8-t-med), border-color var(--i8-t-med);
}
.primary:not(.i8-btn) { border: 1.5px solid var(--i8-cyan); background: linear-gradient(160deg, #2a6cf0, #1d3fc8 55%, #1a2a9a); box-shadow: var(--i8-inset), 0 0 14px rgba(77, 232, 255, .5); }
.secondary:not(.i8-btn) { border: 1.5px solid rgba(127, 240, 255, .5); background: rgba(12, 18, 36, .72); box-shadow: var(--i8-inset), 0 0 10px rgba(77, 232, 255, .2); }
.primary:not(.i8-btn):hover:not(:disabled), .secondary:not(.i8-btn):hover:not(:disabled) { border-color: var(--i8-purple-light); background: linear-gradient(160deg, #7a3cf0, #5b2bd8 55%, #3d1fa8); box-shadow: var(--i8-inset), 0 0 16px rgba(155, 109, 255, .6); }
.primary:not(.i8-btn):active:not(:disabled), .secondary:not(.i8-btn):active:not(:disabled) { transform: translateY(1px) scale(.98); border-color: #ff8bf0; background: linear-gradient(160deg, #d03ce8, #a81fc4 55%, #7a1aa0); }
:is(a, button, select, summary):focus-visible { outline: 3px solid var(--i8-cyan-bright); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(7, 9, 16, .85), 0 0 18px 4px rgba(230, 76, 255, .55); }

/* ---- Main menu ---- */
#start-overlay[hidden] { display: none !important; }
/* Overlaid screens rest at the top of the stage, never centred or pushed down. */
#start-overlay {
  display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--i8-s5); text-align: left;
  padding: clamp(12px, 3vw, 40px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
}
#start-overlay .menu-home-panel {
  flex: none; width: min(420px, 100%); max-width: 100%; max-height: 100%; overflow: auto; overflow-wrap: anywhere;
  padding: clamp(16px, 2.2vw, 26px); scrollbar-width: thin; scrollbar-color: var(--i8-violet) transparent;
}
#start-overlay .menu-home-panel .eyebrow { margin-bottom: var(--i8-s2); }
.sled-title { display: grid; justify-items: start; gap: 2px; margin: 0 0 var(--i8-s2); line-height: 1; }
.sled-title .i8-logotype { --i8-logo-w: 260px; }
.sled-title .sled-title__game { font: 900 clamp(30px, 4vw, 46px)/1 var(--i8-font); letter-spacing: .14em; font-style: italic; padding-left: 4px; }
#start-overlay .menu-home-panel > p { margin: var(--i8-s2) 0; color: var(--i8-text-soft); font-size: var(--i8-fs-sm); line-height: 1.45; }
#start-overlay .menu-rider-status {
  display: flex; justify-content: space-between; gap: var(--i8-s2); margin: var(--i8-s3) 0; padding: 8px 12px;
  border: 1px solid rgba(127, 240, 255, .3); border-radius: var(--i8-r-control); background: var(--i8-glass-bg-hud);
}
#start-overlay .menu-rider-status p { margin: 0; font-size: var(--i8-fs-sm); color: var(--i8-text); }
#start-overlay .menu-rider-status p + p { color: var(--i8-cyan); font-weight: 700; }
#start-overlay .shared-ride-note, #start-overlay #sled-loading-status { margin: 6px 0; color: var(--i8-muted); font-size: var(--i8-fs-xs); }

#start-overlay .menu-actions { display: grid; gap: 10px; margin: var(--i8-s4) 0 var(--i8-s2); }
#start-overlay .menu-actions .i8-btn { justify-content: center; min-height: 54px; padding: 0 44px 0 52px; font-size: var(--i8-fs-md); letter-spacing: .06em; touch-action: manipulation; }
#start-overlay .menu-actions .i8-btn::before { /* the kit glow layer stays; the icon is a mask on a span-free pseudo */
  content: ""; position: absolute; inset: 50% auto auto 16px; z-index: 1; width: 22px; height: 22px; margin-top: -11px; opacity: 1;
  background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .5)); transition: none;
}
#start-overlay #start-button { min-height: 62px; font-size: var(--i8-fs-lg); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12.5-7.5z'/%3E%3C/svg%3E"); }
#start-overlay #menu-settings { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); }
#start-overlay #map-open { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z M9 4v14 M15 6v14'/%3E%3C/svg%3E"); }
#start-overlay #garage-open { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-6 9 6v10H3z M7 20v-6h10v6'/%3E%3C/svg%3E"); }
#start-overlay .ride-guide { margin-top: var(--i8-s2); color: var(--i8-text-soft); font-size: var(--i8-fs-xs); }
#start-overlay .ride-guide summary { display: flex; align-items: center; justify-content: center; min-height: var(--i8-touch); border: 1px solid var(--i8-line-soft); border-radius: var(--i8-r-control); cursor: pointer; color: var(--i8-muted); font-weight: 700; letter-spacing: var(--i8-track); text-transform: uppercase; }
#start-overlay .ride-guide summary:hover { color: var(--i8-text); border-color: rgba(127, 240, 255, .4); }
#start-overlay .home-stage-caption { pointer-events: none; display: grid; gap: 4px; align-self: flex-end; margin-left: auto; padding: 14px; text-align: right; color: var(--i8-text); text-shadow: 0 3px 10px #000; font-size: clamp(11px, 1.3vw, 15px); }
#start-overlay .home-stage-caption strong { font: 900 clamp(18px, 2.4vw, 30px)/1.1 var(--i8-font); font-style: italic; letter-spacing: .04em; background: var(--i8-grad-chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Phones: the panel fills the stage; the CTA never hides below the fold. */
@media (max-width: 520px) {
  #start-overlay { justify-content: center; padding: 10px max(10px, env(safe-area-inset-right)) 14px max(10px, env(safe-area-inset-left)); }
  #start-overlay .menu-home-panel { width: 100%; padding: 16px; }
  #start-overlay .home-stage-caption { display: none; }
  .sled-title .i8-logotype { --i8-logo-w: 210px; }
  #start-overlay #start-button { font-size: var(--i8-fs-md); letter-spacing: .04em; }
}
/* Short phones (360x640 class): the actions follow the title so the CTA never sits below the panel fold. */
@media (max-width: 520px) and (max-height: 700px) {
  #start-overlay .menu-home-panel { display: flex; flex-direction: column; }
  #start-overlay .menu-home-panel > * { order: 2; }
  #start-overlay .menu-home-panel > .eyebrow, #start-overlay .menu-home-panel > .sled-title { order: 0; }
  #start-overlay .menu-home-panel > .menu-actions { order: 1; margin-top: var(--i8-s2); }
}
/* Short landscape screens: title left, actions right, nothing cut off. */
@media (max-height: 500px) and (orientation: landscape) {
  #start-overlay { align-items: flex-start; justify-content: center; padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
  #start-overlay .menu-home-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-auto-flow: dense; gap: 0 var(--i8-s4); width: min(760px, 100%); padding: 12px 16px; }
  #start-overlay .menu-home-panel > * { grid-column: 1; }
  #start-overlay .menu-home-panel > .menu-actions, #start-overlay .menu-home-panel > .ride-guide { grid-column: 2; }
  #start-overlay .menu-home-panel > .menu-actions { grid-row: 1 / span 6; align-self: center; margin: 0; }
  #start-overlay .menu-home-panel > p:not(.shared-ride-note):not(#sled-loading-status), #start-overlay .shared-ride-note, #start-overlay .home-stage-caption { display: none; }
  .sled-title .i8-logotype { --i8-logo-w: 190px; }
  .sled-title .sled-title__game { font-size: 28px; }
  #start-overlay .menu-actions .i8-btn { min-height: 48px; }
  #start-overlay #start-button { min-height: 54px; }
}

/* ---- Map picker, garage and results share the same glass panel ---- */
.garage-controls, #finish-overlay .overlay-panel {
  border: 0; border-radius: var(--i8-r-panel); background: var(--i8-grad-glass), var(--i8-glass-bg-strong); color: var(--i8-text);
  box-shadow: 0 0 0 1.5px rgba(77, 232, 255, .55), 0 0 0 3px rgba(139, 92, 246, .25), var(--i8-shadow);
}
.garage-heading { background: linear-gradient(90deg, rgba(7, 9, 16, .95), rgba(21, 16, 42, .7)); border-bottom: 2px solid transparent; border-image: var(--i8-grad) 1; }
.garage-heading strong { background: var(--i8-grad-chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.garage-stat-fill { background: var(--i8-grad); }
.garage-actions #garage-ride { color: #fff; border: 1.5px solid var(--i8-cyan); background: linear-gradient(160deg, #2a6cf0, #1d3fc8 55%, #1a2a9a); box-shadow: 0 0 14px rgba(77, 232, 255, .5); }

/* The kit loads with the menu, so the world HUD and thumbs stay hidden until play. */
html:not([data-game-state="playing"]) .sled-world-hud,
html:not([data-game-state="playing"]) .sled-stage .touch-controls,
html:not([data-game-state="playing"]) #winter-survival-hud { display: none !important; }

/* ==== Infin8 component set for every Sleddin screen ====
   One type system and one style per component type, on the kit tokens and the neon gear plates
   (games/assets/infin8-ui/brand/control-button-plate*). Applies to the main menu, garage, map and
   race selectors, career board, rider / settings sheet, lodge shop, missions, friends / tow dialogs,
   inventories, loading stage, results, resume and toasts. The in-ride HUD keeps sleddin-hud.css.
   - Type: "Infin8 Display" (Montserrat 700 / 800) for headings, buttons, tabs, chips and card titles in
     Infin8 cyan; Inter (var(--i8-font)) for body copy and descriptions. Lit / selected brightens the cyan.
   - Primary action: dark glass with the brand-gradient edge and a bright-cyan label.
   - Secondary action: the neon plate (unlit); toggled / selected: the lit plate. Chips and tabs: compact plates.
   - List cards (sleds, parts, events, maps, products, service parts, missions): dark glass, 1 px cyan edge;
     selected = bright edge and glow; sled cards carry their theme swatch.
   tools/Validate-Sleddin-Controls.cjs opens every surface at phone, tablet and desktop sizes. */
#game-stage, .leave-confirm-dialog, .sled-topbar, .sled-sidebar {
  --srf-plate: var(--ctl-plate, url("../assets/infin8-ui/brand/control-button-plate-galaxy.webp"));
  --srf-plate-lit: var(--ctl-plate-lit, url("../assets/infin8-ui/brand/control-button-plate-lit-galaxy.webp"));
  --srf-engrave: rgba(3, 6, 14, .92); --srf-h: 40px; --srf-fs: 12px;
}
html[data-input-mode="touch"] :is(#game-stage, .leave-confirm-dialog, .sled-topbar, .sled-sidebar) { --srf-h: 44px; }
html[data-console-layout="true"] :is(#game-stage, .leave-confirm-dialog) { --srf-h: 56px; --srf-fs: 17px; }

/* Type */
#game-stage :where(.sled-overlay, .garage-overlay, dialog, .flag-celebration, .loading-stage) :is(h1, h2, h3, h4, legend, summary, .i8-panel__title, .i8-sheet__title, .garage-section-title strong, .garage-selector strong),
.leave-confirm-dialog :is(h2, h3), :root .sled-sidebar :is(h2, h3) {
  font-family: var(--i8-font-display); font-weight: 800; color: var(--i8-cyan); letter-spacing: .04em;
}
#game-stage :where(.sled-overlay, .garage-overlay, dialog, .flag-celebration, .loading-stage) :is(p, small, li, label, output, figcaption),
.leave-confirm-dialog p { font-family: var(--i8-font); }

/* Secondary action: the neon plate. Buttons in these surfaces take it unless a rule below names another component. */
#game-stage :where(.sled-overlay, .garage-overlay, dialog, .flag-celebration, .loading-stage) button:where(:not(.i8-icon-btn)),
#game-stage .ride-resume, :root .leave-confirm-dialog button, :root .sled-sidebar button, .sled-topbar nav a {
  --srf-cap: calc(var(--srf-h) / 2);
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--srf-h); min-width: var(--srf-h); margin: 0;
  padding: 3px calc(var(--srf-cap) * .9); border: 1.5px solid transparent; border-radius: 0;
  border-image: var(--srf-plate) 0 56 fill / 0 var(--srf-cap) / 0 stretch; background: none; box-shadow: none;
  color: var(--i8-cyan); font: 700 var(--srf-fs)/1.15 var(--i8-font-display); letter-spacing: .06em; text-transform: uppercase; text-align: center;
  text-shadow: 1px 0 0 var(--srf-engrave), -1px 0 0 var(--srf-engrave), 0 1px 0 var(--srf-engrave), 0 -1px 0 var(--srf-engrave), 0 0 5px var(--i8-cyan);
  transition: filter var(--i8-t-fast), transform var(--i8-t-fast);
}
#game-stage :where(.sled-overlay, .garage-overlay, dialog, .flag-celebration, .loading-stage) .i8-btn:where(:not(.i8-btn--live))::after,
#game-stage :where(.sled-overlay, .garage-overlay, dialog, .flag-celebration, .loading-stage) .i8-btn:where(:not(.i8-btn--live))::before { opacity: 0; }
#game-stage :where(.sled-overlay, .garage-overlay, dialog, .flag-celebration, .loading-stage) button:where(:not(.i8-icon-btn)):is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"]),
.sled-topbar nav a[aria-current="page"] {
  border-image-source: var(--srf-plate-lit); color: var(--i8-cyan-bright);
  text-shadow: 1px 0 0 var(--srf-engrave), -1px 0 0 var(--srf-engrave), 0 1px 0 var(--srf-engrave), 0 -1px 0 var(--srf-engrave), 0 0 9px var(--i8-cyan-bright);
}
#game-stage :where(.sled-overlay, .garage-overlay, dialog, .flag-celebration, .loading-stage) button:where(:not(.i8-icon-btn)):hover:not(:disabled),
:root .leave-confirm-dialog button:hover, :root .sled-sidebar button:hover:not(:disabled), .sled-topbar nav a:hover, .sled-topbar nav a:focus-visible { filter: brightness(1.15); background: none; box-shadow: none; }
#game-stage :where(.sled-overlay, .garage-overlay, dialog, .flag-celebration, .loading-stage) button:where(:not(.i8-icon-btn)):active:not(:disabled) { border-image-source: var(--srf-plate-lit); filter: brightness(1.2); }
#game-stage :where(.sled-overlay, .garage-overlay, dialog, .flag-celebration, .loading-stage) button:where(:not(.i8-icon-btn)):disabled { filter: grayscale(.7) brightness(.75); opacity: .6; color: var(--i8-muted); text-shadow: none; }

/* Primary action: dark glass, brand-gradient edge, bright-cyan label (one per screen). */
#game-stage :is(.primary, .i8-btn--live, #garage-ride, #settings-launch, #map-ride, #retry-button, #ride-resume, #career-board-launch, #race-selector-launch, .loading-stage-return),
:root .leave-confirm-dialog .primary {
  --srf-cap: 0px; min-height: calc(var(--srf-h) + 8px); padding: 4px 18px; border: 2px solid transparent; border-image: none; border-radius: var(--i8-r-control);
  background: linear-gradient(160deg, rgba(16, 24, 48, .96), rgba(9, 12, 24, .97)) padding-box, var(--i8-grad) border-box;
  color: var(--i8-cyan-bright); font: 800 calc(var(--srf-fs) + 2px)/1.15 var(--i8-font-display); letter-spacing: .07em; text-transform: uppercase;
  text-shadow: 1px 0 0 var(--srf-engrave), -1px 0 0 var(--srf-engrave), 0 1px 0 var(--srf-engrave), 0 -1px 0 var(--srf-engrave), 0 0 9px var(--i8-cyan);
  box-shadow: 0 0 16px rgba(77, 232, 255, .32), 0 0 26px rgba(155, 109, 255, .22);
}
#game-stage :is(.primary, .i8-btn--live, #garage-ride, #settings-launch, #map-ride, #retry-button, #ride-resume, #career-board-launch, #race-selector-launch, .loading-stage-return):hover:not(:disabled) {
  background: linear-gradient(160deg, rgba(22, 34, 66, .97), rgba(12, 16, 32, .97)) padding-box, var(--i8-grad) border-box; filter: brightness(1.1);
}
#game-stage :is(.primary, .i8-btn--live, #garage-ride, #settings-launch, #map-ride, #retry-button, #ride-resume, #career-board-launch, #race-selector-launch, .loading-stage-return):disabled {
  opacity: .55; filter: grayscale(.6); color: var(--i8-muted); text-shadow: none; box-shadow: none;
}

/* Main menu actions are 54 px tall: their plate caps follow. */
#game-stage #start-overlay .menu-actions .i8-btn:not(.i8-btn--live) { --srf-cap: 27px; }

/* Chips and tabs: compact plates; the selected chip is lit. */
#game-stage :is(.garage-category-tabs, .race-selector-tabs, .lodge-shop-tabs, .lodge-board-periods, .i8-tabs) > button {
  flex: none; width: auto; min-width: 0; white-space: nowrap; padding-inline: calc(var(--srf-cap) * .75); font-size: max(11px, calc(var(--srf-fs) - 1px));
}
/* Equal-width tab rows (race selector, lodge shop) wrap a long label onto two lines inside the plate. */
#game-stage :is(.race-selector-tabs, .lodge-shop-tabs) > button { flex: 1 1 0; white-space: normal; line-height: 1.1; padding-inline: calc(var(--srf-cap) * .6); }

/* List cards: dark glass, 1 px cyan edge; selected = bright edge and glow. */
#game-stage :is(.garage-roster-card, .garage-attachment, .career-event, .shop-item, .lodge-shop-product, .garage-service-part, .explorer-mission-list > li, .garage-stat-panel, .garage-item-detail, .garage-fin-tip) {
  position: relative; border: 1px solid rgba(77, 232, 255, .42); border-image: none; border-radius: 12px; padding: 8px 10px;
  background: linear-gradient(160deg, rgba(20, 28, 52, .84), rgba(9, 12, 24, .9)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  color: var(--i8-text-soft); font: 500 12px/1.35 var(--i8-font); letter-spacing: normal; text-transform: none; text-align: left; text-shadow: none; filter: none;
}
#game-stage :is(.garage-roster-card, .garage-attachment, .career-event):is([aria-pressed="true"], [aria-selected="true"], [data-preview="true"]) {
  border-color: var(--i8-cyan-bright); box-shadow: inset 0 0 0 1px rgba(127, 240, 255, .35), 0 0 16px rgba(77, 232, 255, .45);
  background: linear-gradient(160deg, rgba(28, 44, 84, .9), rgba(12, 16, 34, .92));
}
#game-stage :is(.garage-roster-card, .garage-attachment, .career-event):hover:not(:disabled) { border-color: var(--i8-cyan); filter: brightness(1.08); }
#game-stage :is(.garage-roster-card, .garage-attachment, .career-event):disabled { opacity: .55; }
#game-stage :is(.garage-roster-title, .attachment-name, .career-event:not(.race-option), .race-option > span, .shop-item :is(h3, h4, strong), .lodge-shop-product h4, .garage-service-copy strong, .explorer-mission-list > li > strong) {
  font-family: var(--i8-font-display); font-weight: 700; color: var(--i8-cyan); letter-spacing: .03em;
}
#game-stage :is(.garage-roster-card, .garage-attachment, .career-event)[aria-pressed="true"] :is(.garage-roster-title, .attachment-name, strong) { color: var(--i8-cyan-bright); }
#game-stage :is(.garage-roster-title small, .attachment-name small, .race-option > small, .garage-service-copy span) { font-family: var(--i8-font); font-weight: 500; color: var(--i8-muted); }
#game-stage .attachment-price { font-family: var(--i8-font-display); color: var(--i8-warning); }
#game-stage .garage-attachment .attachment-check { border-color: rgba(77, 232, 255, .55); color: var(--i8-cyan); }
#game-stage .garage-attachment[aria-pressed="true"] .attachment-check { background: var(--i8-cyan); color: var(--i8-base); }
#game-stage .garage-stat-fill { background: var(--i8-grad); }
#game-stage .garage-stat-track { border-color: rgba(77, 232, 255, .3); background: rgba(9, 12, 24, .8); }
/* Theme swatch: the sled's own livery colour (data.js), top-right of its card. */
#game-stage .garage-roster-card::after { content: ""; position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--sled-accent, var(--i8-cyan)); box-shadow: 0 0 8px var(--sled-accent, var(--i8-cyan)); }
#game-stage .garage-roster-card[data-sled-color="arctic"] { --sled-accent: #9fe3ff; }
#game-stage .garage-roster-card[data-sled-color="ultraviolet"] { --sled-accent: #7b3fe4; }
#game-stage .garage-roster-card[data-sled-color="aurora"] { --sled-accent: #3ee6b5; }
#game-stage .garage-roster-card[data-sled-color="solar-flare"] { --sled-accent: #ff8a3d; }
#game-stage .garage-roster-card[data-sled-color="electric-rose"] { --sled-accent: #ff4fa3; }
#game-stage .garage-roster-card .garage-sled-icon { color: var(--sled-accent, var(--i8-cyan)); }

/* Panels and dialogs share one glass and one edge. */
#game-stage :is(.garage-controls, .overlay-panel, dialog:not(.i8-sheet)), .leave-confirm-dialog {
  border: 1px solid rgba(77, 232, 255, .45); border-radius: var(--i8-r-panel); background: var(--i8-grad-glass), var(--i8-glass-bg-strong); color: var(--i8-text);
}
#game-stage .garage-heading { background: linear-gradient(90deg, rgba(7, 9, 16, .95), rgba(21, 16, 42, .72)); }
/* Garage heading: eyebrow and title on one compact row at every size; the vehicle row wraps in narrow panels;
   service parts stack their copy, meter and repair button. */
#game-stage .garage-heading { align-items: center; min-height: 0; padding: 8px 16px; }
#game-stage .garage-heading > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
#game-stage .garage-heading .eyebrow { margin: 0; }
#game-stage .garage-heading strong { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.1; }
#game-stage .garage-vehicle-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#game-stage .garage-vehicle-heading .garage-selector { display: grid; grid-template-columns: var(--srf-h) minmax(0, 1fr) var(--srf-h); flex: 1 1 220px; gap: 6px; min-width: 0; }
#game-stage .garage-vehicle-heading .garage-selector strong { min-width: 0; text-align: center; }
#game-stage .garage-maintenance-list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
#game-stage .garage-service-part { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
#game-stage .garage-service-part > * { grid-column: 1; grid-row: auto; }
#game-stage .garage-service-part .garage-repair-button { width: 100%; }
#game-stage .garage-service-copy span { overflow-wrap: normal; }
#game-stage #garage-balance { border-color: rgba(255, 212, 121, .6); background: rgba(9, 12, 24, .8); font-family: var(--i8-font-display); }
#game-stage :is(#garage-orbit > span, #garage-model-status) {
  border: 1px solid rgba(77, 232, 255, .35); background: rgba(7, 9, 16, .72); color: var(--i8-cyan); font: 700 11px/1.2 var(--i8-font-display); letter-spacing: .05em;
}
#game-stage #garage-orbit > span { top: auto; bottom: 8px; left: 10px; right: auto; max-width: calc(100% - 20px); padding: 3px 8px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#game-stage #garage-model-status { top: 8px; bottom: auto; left: 50%; right: auto; max-width: calc(100% - 20px); padding: 3px 8px; border-radius: 999px; transform: translateX(-50%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Toasts and notices: the same glass, Inter copy. */
:is(.sleddin-back-toast, #game-stage .ride-maintenance-alert, #game-stage .graphics-reset-notice) { border: 1px solid rgba(77, 232, 255, .45); background: rgba(9, 12, 24, .92); color: var(--i8-text); font-family: var(--i8-font); }

/* ---- Garage layouts ----
   The 3D sled renders at the stage centre, so every layout keeps the preview band across the middle. */
/* Phones and tablets in portrait: heading, a horizontal sled row, the preview (at least 40 % of the
   height), a short scrolling parts panel, and a sticky action bar with safe-area padding. */
@media (max-width: 899px) and (orientation: portrait) {
  #game-stage .garage-overlay { --garage-bar-h: calc(var(--srf-h) * 2 + 34px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; padding-bottom: var(--garage-bar-h); }
  #game-stage .garage-heading { flex: none; min-height: 0; padding: 6px 12px; }
  #game-stage .garage-heading strong { font-size: 20px; }
  #game-stage .garage-sled-roster {
    position: relative; flex: none; display: flex; gap: 8px; width: 100%; max-height: none; padding: 4px 10px; overflow-x: auto; overflow-y: hidden;
    border: 0; border-radius: 0; background: linear-gradient(180deg, rgba(7, 9, 16, .7), rgba(7, 9, 16, 0)); scroll-snap-type: x proximity; scrollbar-width: none;
  }
  #game-stage .garage-roster-card { flex: 0 0 auto; width: 138px; min-height: 52px; flex-direction: row; align-items: center; gap: 6px; padding: 6px 18px 6px 8px; scroll-snap-align: start; }
  #game-stage .garage-sled-icon { width: 34px; min-width: 34px; }
  #game-stage .garage-sled-icon svg { height: 26px; }
  #game-stage .garage-roster-title { font-size: 11px; line-height: 1.2; white-space: normal; overflow-wrap: normal; }
  #game-stage .garage-roster-title small { font-size: 10px; margin-top: 2px; }
  #game-stage #garage-orbit { flex: 1 1 auto; min-height: 26%; width: 100%; }
  /* Parts and repairs get about half the screen so whole cards show and scroll. */
  #game-stage .garage-controls { position: static; flex: 1 1 auto; width: 100%; min-height: 36%; max-height: 52%; padding: 8px 10px 10px; overflow-x: hidden; overflow-y: auto; border-width: 1px 0 0; border-radius: 16px 16px 0 0; }
  #game-stage .garage-category-tabs { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 2px 0 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
  #game-stage .garage-category-tabs > button { scroll-snap-align: start; }
  #game-stage .garage-item-list { grid-template-columns: minmax(0, 1fr); }
  #game-stage .garage-actions {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, rgba(7, 9, 16, .98) 75%, rgba(7, 9, 16, .86)); box-shadow: 0 -10px 18px rgba(7, 9, 16, .8);
  }
  #game-stage .garage-actions > button { min-width: 0; white-space: normal; line-height: 1.1; padding-inline: 8px; }
  #game-stage .garage-actions #garage-ride { grid-column: 1 / -1; }
}
/* Landscape phones: preview on the left, the panel on the right with its own sticky action bar. */
@media (max-height: 559px) and (orientation: landscape) {
  #game-stage .garage-overlay { display: grid; grid-template-columns: minmax(0, 1fr) min(40%, 340px); grid-template-rows: auto auto minmax(0, 1fr); }
  #game-stage .garage-heading { grid-column: 1 / -1; min-height: 0; padding: 6px 12px; }
  #game-stage .garage-heading strong { font-size: 20px; }
  #game-stage .garage-sled-roster { grid-column: 1; grid-row: 2; position: relative; display: flex; gap: 8px; width: auto; max-height: none; padding: 4px 8px; overflow-x: auto; overflow-y: hidden; border: 0; border-radius: 0; background: none; scrollbar-width: none; }
  #game-stage .garage-roster-card { flex: 0 0 auto; width: 132px; min-height: 52px; flex-direction: row; align-items: center; gap: 6px; padding: 5px 18px 5px 8px; }
  #game-stage .garage-sled-icon { width: 30px; min-width: 30px; }
  #game-stage .garage-sled-icon svg { height: 22px; }
  #game-stage .garage-roster-title { font-size: 11px; line-height: 1.2; }
  #game-stage .garage-roster-title small { font-size: 10px; }
  #game-stage #garage-orbit { grid-column: 1; grid-row: 3; width: auto; min-height: 0; }
  #game-stage .garage-controls { grid-column: 2; grid-row: 2 / span 2; position: relative; width: auto; max-height: none; margin: 0 8px 8px 0; overflow-y: auto; border-radius: 14px; }
  #game-stage .garage-category-tabs { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
  #game-stage .garage-item-list { grid-template-columns: minmax(0, 1fr); }
  #game-stage .garage-actions { position: sticky; bottom: -8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 0 calc(4px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, rgba(9, 12, 24, .98) 80%, rgba(9, 12, 24, .85)); box-shadow: 0 -10px 14px rgba(9, 12, 24, .85); }
  #game-stage .garage-actions > button { min-width: 0; white-space: normal; line-height: 1.1; padding-inline: 6px; }
  #game-stage .garage-actions #garage-ride { grid-column: 1 / -1; }
}
/* Desktop keeps its two-pane garage with the same components. */
@media (min-width: 900px) and (min-height: 560px) {
  #game-stage .garage-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #game-stage .garage-actions > button { min-width: 0; white-space: normal; line-height: 1.1; padding-inline: 8px; }
  #game-stage .garage-actions #garage-ride { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  #game-stage :where(.sled-overlay, .garage-overlay, dialog, .flag-celebration, .loading-stage) button, .leave-confirm-dialog button { transition: none; transform: none !important; }
}

/* Community-first landing label replaces the old in-air backflip capture.
 * A genuine world screenshot can replace this after live scene verification. */
.village-scene-hero{display:flex;flex-direction:column;justify-content:center;align-items:center;
min-height:230px;gap:11px;padding:24px;text-align:center;color:#effaff;border-radius:12px;
border:1px solid #4de8ff;background:radial-gradient(ellipse at 10% 10%,#15506b 0,transparent 43%),
radial-gradient(ellipse at 80% 20%,#512c80 0,transparent 50%),linear-gradient(150deg,#091728,#132e44)}
.village-scene-hero strong{font:900 clamp(24px,3.5vw,42px)/1.1 system-ui;letter-spacing:.08em}
.village-scene-hero span{font:750 13px system-ui;letter-spacing:.09em;color:#75f1ff}
.village-scene-hero small{font:500 14px system-ui;color:#d3d9ed}

/* The hero is the actual rendered village (camera framing in game.js).
   This original Infin8 logo is the lightweight fallback until world boot. */
#sled-menu-poster{object-fit:contain;object-position:center;
  background:radial-gradient(ellipse at 20% 10%,#164963 0,transparent 43%),
  radial-gradient(ellipse at 85% 10%,#3f2569 0,transparent 48%),#081426;
  padding:clamp(26px,7vw,94px);box-sizing:border-box}
html[data-village-hero-ready="true"] #sled-menu-poster{display:none!important}