/* Headlines: Unbounded (OFL). Body and labels: Montserrat (OFL). Copied from the shop fonts; the app never loads from the shop folder. */
@font-face { font-family: Unbounded; font-style: normal; font-weight: 700; font-display: swap; src: url('./assets/fonts/unbounded-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Unbounded; font-style: normal; font-weight: 700; font-display: swap; src: url('./assets/fonts/unbounded-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Unbounded; font-style: normal; font-weight: 900; font-display: swap; src: url('./assets/fonts/unbounded-latin-ext-900-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Unbounded; font-style: normal; font-weight: 900; font-display: swap; src: url('./assets/fonts/unbounded-latin-900-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 400; font-display: swap; src: url('./assets/fonts/montserrat-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 400; font-display: swap; src: url('./assets/fonts/montserrat-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 600; font-display: swap; src: url('./assets/fonts/montserrat-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 600; font-display: swap; src: url('./assets/fonts/montserrat-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 700; font-display: swap; src: url('./assets/fonts/montserrat-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 700; font-display: swap; src: url('./assets/fonts/montserrat-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Decal lettering fonts (lib/fonts.js and the font picker). */
@font-face { font-family: "Saira Condensed"; src: url('./fonts/SairaCondensed-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: "Russo One"; src: url('./fonts/RussoOne-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: Orbitron; src: url('./fonts/Orbitron[wght].ttf') format('truetype'); font-display: swap; }

/* Apexio brand tokens (shop "ROUND 3" look): near-black, ONE racing-red accent, liquid-glass panels. */
:root {
  color-scheme: dark;
  --bg: #0B0A14;
  --card: #17121B;
  --card-2: #241A22;
  --text: #FFFFFF;
  --muted: #A9A4B2;
  --accent: #E10600;
  --accent-hi: #FF2A1A;
  --accent-lo: #C20500;
  --glass: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 55%, rgba(225,6,0,.14));
  --glass-line: rgba(255,255,255,.2);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 18px 40px -22px rgba(225,6,0,.55);
  --data: #FF5A50;
  --ink: #FFFFFF;
  --ink-muted: rgba(255,255,255,.72);
  --studio: #0B0A14;
  --error: #FF8A80;
  --radius: 20px;
  --hud: calc(56px + env(safe-area-inset-top, 0px));
  --display: Unbounded, "Arial Black", sans-serif;
  --body: Montserrat, Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--body);
}
body:has(#boot:not([hidden])) { overflow: hidden; }
/* Skewed headlines lean past their box; keep that lean from creating a horizontal scroll. */
main { overflow-x: clip; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  background: var(--card);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, opacity .16s ease;
}
button:disabled { opacity: .4; cursor: not-allowed; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; line-height: .92; text-transform: uppercase; letter-spacing: -.01em; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: fixed; top: -100px; left: 16px; z-index: 120; padding: 12px; border-radius: 12px; background: var(--accent); color: var(--ink); font-weight: 700; }
.skip:focus { top: 10px; }

/* Buttons: flat pills. Orange = the one call to action. */
.primary, .secondary, .ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; }
.primary { background: var(--accent); color: var(--ink); }
.secondary { background: var(--card); color: var(--text); }
.ghost { background: transparent; color: var(--text); }
.full { width: 100%; margin-top: 12px; }
.muted, .hint { color: var(--muted); }
.hint { font-size: 14px; line-height: 1.5; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Labels: 11px, uppercase, wide tracking. */
.kicker, .eyebrow { display: flex; align-items: center; gap: 10px; color: var(--muted); font: 700 11px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.badge { display: inline-block; padding: 3px 8px; border-radius: 999px; background: #FFFFFF1A; color: var(--text); font: 700 10px/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }

/* Slanted bars motif (parallelograms, same slant as the type). */
.bars { display: inline-flex; gap: 4px; flex-shrink: 0; }
.bars i { display: block; width: 16px; height: 4px; background: var(--accent); transform: skewX(-24deg); }

/* ===== Splash ===== */
.boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  overflow: hidden;
  padding: calc(48px + env(safe-area-inset-top, 0px)) 24px calc(28px + env(safe-area-inset-bottom, 0px));
  background: #000;
  transition: opacity .45s ease;
}
.boot.is-leaving { opacity: 0; pointer-events: none; }
.boot-top { display: grid; justify-items: center; gap: 12px; text-align: center; animation: fade-in .6s ease both; }
.boot-brand { display: flex; align-items: center; gap: clamp(10px, 3vw, 20px); }
.boot-brand .bars i { width: clamp(20px, 6vw, 32px); height: clamp(5px, 1.4vw, 7px); }
.boot-word { font: 900 clamp(34px, 11vw, 76px)/1 var(--display); letter-spacing: .02em;  }
.boot-title { font: 700 11px/1 var(--body); letter-spacing: .34em; text-transform: uppercase; }
.boot-car { position: relative; align-self: center; width: min(100vw, 820px, 120vh); margin: 0 -24px; }
.boot-car img { position: relative; z-index: 1; display: block; width: 100%; height: auto; animation: car-in 1s var(--ease) .15s both; }
.boot-smoke { position: absolute; pointer-events: none; mix-blend-mode: screen; background: url('./assets/art/smoke-texture.webp') center / cover no-repeat; }
.boot-smoke-back { inset: -45% -30% -25%; opacity: .75; -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); animation: smoke 9s ease-in-out infinite alternate; }
.boot-smoke-front { z-index: 2; left: -20%; right: -20%; bottom: -25%; height: 70%; opacity: .8; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); animation: smoke 7s ease-in-out infinite alternate-reverse; }
.boot-bottom { display: grid; justify-items: center; gap: 10px; width: min(320px, 100%); }
.boot-progress { position: relative; width: 100%; height: 2px; overflow: hidden; background: #FFFFFF26; }
.boot-progress span { position: absolute; inset: 0 auto 0 0; width: var(--progress, 0%); background: var(--accent); transition: width .4s ease; }
.boot-status { min-height: 1.4em; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.boot-start { width: 100%; min-height: 52px; opacity: 0; transition: opacity .3s ease; }
.boot-ready .boot-start { opacity: 1; animation: pulse 1.8s ease-in-out .3s infinite; }
.boot-note { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 50% { opacity: .78; } }
@keyframes smoke { from { translate: -3% 0; } to { translate: 3% -2%; } }
@keyframes car-in { from { opacity: 0; translate: -8% 0; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }

/* ===== Top bar ===== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--hud);
  padding: env(safe-area-inset-top, 0px) max(8px, calc((100vw - 1560px) / 2)) 0;
  background: var(--bg);
}
.brand { display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 6px; text-decoration: none; }
.brand svg { width: 26px; height: 28px; color: var(--accent); }
.brand span { font: 900 16px/1 var(--display); letter-spacing: .04em;  }
.garage-nav { display: none !important; }
.header-label { display: none; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.account-nav { display: flex; align-items: center; gap: 4px; min-width: 0; }
.back-shop { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.is-authenticated .back-shop { display: none; }
@media (max-width: 999px) { .is-authenticated .brand span { display: none; } }
.icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 44px; height: 44px; padding: 0; background: transparent; color: var(--text); font-size: 0; }
.icon-button .label { display: none; }
#account-button::before { content: ""; width: 20px; height: 20px; flex-shrink: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E") center / contain no-repeat; }

#notice {
  position: fixed;
  top: calc(var(--hud) + 8px);
  left: 50%;
  z-index: 40;
  width: min(560px, calc(100% - 24px));
  translate: -50% 0;
  padding: 14px 16px 14px 20px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: inset 4px 0 var(--accent);
  color: var(--text);
  font-size: 15px;
  overflow-wrap: anywhere;
  pointer-events: none;
}
#notice[data-kind=error] { box-shadow: inset 4px 0 var(--error); }

/* ===== Studio scene: the plate covers its box, the car sits on the plate's own floor =====
   Car rectangles come from data/stage-layout.json (percent of the 1536x1024 / 1024x1536 plate).
   The scene is capped so the car always fits (96% of the box); any leftover band sits at the
   top, where the plate fades into the studio wall colour. */
.car-stage, .login-showroom { container: scene / size; overflow: hidden; background: linear-gradient(180deg, #F3F2F6, #E9E8EE); }
.scene {
  --w: min(max(100cqw, 150cqh), 134cqw, 237cqh);
  --h: calc(var(--w) / 1.5);
  position: absolute;
  left: calc(50cqw - var(--w) / 2);
  top: clamp(min(0px, 100cqh - var(--h)), calc(var(--car-y, 56cqh) - var(--w) * .398), max(0px, 100cqh - var(--h)));
  width: var(--w);
  height: var(--h);
  background: var(--plate-wide, none) center / 100% 100% no-repeat;
  transform-origin: 50% 59.7%;
  scale: var(--car-zoom, 1);
  transition: scale .25s cubic-bezier(.2, .8, .2, 1);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 95%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 6%, #000 95%, transparent);
}
.scene-car { position: absolute; left: 14.193%; top: 29.297%; width: 71.615%; height: 60.84%; isolation: isolate; line-height: 0; }
.scene-car img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Contact shadow under the tyres (car-relative, so it follows every plate and zoom). */
.scene-car::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 4%;
  right: 6%;
  top: 60%;
  bottom: -4%;
  border-radius: 50%;
  transform: rotate(-11deg);
  background:
    radial-gradient(ellipse 44% 26% at 52% 58%, #000000A6, #0000004D 55%, transparent 100%),
    radial-gradient(ellipse 50% 50% at 50% 50%, #00000040, transparent 100%);
  filter: blur(5px);
  pointer-events: none;
}
@container scene (aspect-ratio < 1) {
  .scene {
    --w: min(max(100cqw, 66.667cqh), 102.4cqw, 169cqh);
    --h: calc(var(--w) * 1.5);
    top: clamp(min(0px, 100cqh - var(--h)), calc(var(--car-y, 58cqh) - var(--w) * .95), max(0px, 100cqh - var(--h)));
    background-image: var(--plate-tall, none);
    transform-origin: 50% 63.3%;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
  }
  .scene-car { left: 3.125%; top: 45.573%; width: 93.75%; height: 35.417%; }
}

/* ===== Login ===== */
.login-layout { display: grid; grid-template-rows: auto auto; min-height: 100vh; min-height: 100dvh; padding-top: var(--hud); }
.login-showroom { position: relative; height: clamp(400px, 60dvh, 640px); }
.login-showroom .scene-car img { animation: car-in .5s var(--ease) both; }
.intro { position: absolute; z-index: 2; top: 20px; left: 16px; right: 16px; color: var(--ink); }
.intro .eyebrow { color: var(--ink); margin-bottom: 14px; }
.intro h1 { display: flex; flex-direction: column; font-size: clamp(46px, 15vw, 72px);  }
.intro > p:last-child { display: none; max-width: 420px; margin-top: 18px; color: var(--ink-muted); font-size: 16px; }
.is-authenticated .intro { display: none; }
.showroom-tag { position: absolute; z-index: 2; left: 16px; bottom: 44px; display: flex; align-items: baseline; gap: 8px; color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.showroom-tag b { font: 900 16px/1 var(--display); letter-spacing: 0;  }
.login-panel { position: relative; z-index: 3; padding: 0 12px calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--bg); }
.login-card { margin-top: -28px; padding: 24px 18px 22px; border-radius: var(--radius); background: var(--card); }
.login-card .kicker { justify-content: space-between; }
.login-card h2 { margin-top: 12px; font-size: 26px;  }
.login-lead { margin: 12px 0 18px; color: var(--muted); font-size: 15px; }
.login-tabs, .preview-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg); }
.login-tabs button, .preview-tabs button { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; background: transparent; color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.login-tabs [aria-selected=true], .preview-tabs [aria-selected=true] { background: var(--accent); color: var(--ink); }
form > label, .step-panel > label { display: block; margin: 20px 0 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
input:not([type=checkbox]):not([type=color]), select {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  background: var(--card-2);
  color: var(--text);
  padding: 10px 16px;
  font-size: 16px;
}
.step-panel input:not([type=checkbox]):not([type=color]), .step-panel select { background: var(--card); }
input::placeholder { color: #8A8A90; opacity: 1; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
input[type=color] { width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 12px; }
input[aria-invalid=true] { box-shadow: inset 0 -2px var(--error) !important; }
form .hint { margin: 10px 0 16px; }
form > .primary { width: 100%; min-height: 52px; }
#code { text-transform: uppercase; letter-spacing: .2em; font-weight: 700; }
#otp { letter-spacing: .3em; font-weight: 700; }
#otp-form { margin-top: 20px; }
.test-box { padding: 14px; background: #FFF3CD; color: #654800; border-radius: 12px; margin: 14px 0; overflow-wrap: anywhere; color-scheme: light; }

/* ===== Garage: one full-screen game shell ===== */
#studio { position: relative; }
.game-shell {
  position: relative;
  display: grid;
  grid-template-areas: "stage" "sheet" "bottom";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 0px auto;
  height: 100vh;
  height: 100dvh;
  min-height: 540px;
  padding-top: var(--hud);
  overflow: hidden;
  background: var(--bg);
  transition: grid-template-rows .34s var(--ease), grid-template-columns .34s var(--ease);
}
body.sheet-open .game-shell { grid-template-rows: minmax(0, 1fr) min(48dvh, 420px) auto; }
.studio-toolbar { position: absolute; z-index: 25; top: env(safe-area-inset-top, 0px); left: 58px; right: 100px; height: 56px; display: flex; align-items: center; min-width: 0; }
.garage-heading { width: 100%; min-width: 0; }
.studio-toolbar #design-name { display: block; min-height: 44px; height: 44px; padding: 0 8px; border-radius: 8px; background: transparent; font: 700 16px/1.1 var(--body); text-overflow: ellipsis; }
.studio-toolbar #design-name:focus { background: var(--card); }
.studio-toolbar #save-status { margin-top: -6px; padding-left: 8px; color: var(--muted); font-size: 11px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.preview-panel { grid-area: stage; position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.preview-panel .panel-heading { position: absolute; z-index: 6; top: 12px; left: 12px; }
.preview-tabs button { flex: 0 0 auto; padding-inline: 14px; color: #FFFFFFB3; }
.long { display: none; }
#car-preview { position: absolute; inset: 0; }
.car-stage { position: absolute; inset: 0; }
#car-image { aspect-ratio: 1200 / 680; filter: drop-shadow(0 2px 3px #0000002E); }
.car-art { animation: car-in .4s var(--ease) both; }
/* Zone livery: a 1200x680 stage (photo pixel space) scaled onto the image by --livery-scale. */
.car-art #car-overlay { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.stage-title { position: absolute; z-index: 4; top: 72px; left: 16px; right: 16px; color: var(--ink); pointer-events: none; }
.stage-word { font: 900 clamp(28px, 9vw, 44px)/.92 var(--display); text-transform: uppercase;  overflow-wrap: break-word; }
.car-model { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.car-model::before { content: ""; width: 36px; height: 4px; flex-shrink: 0; background: linear-gradient(90deg, var(--accent) 16px, transparent 16px 20px, var(--accent) 20px); transform: skewX(-24deg); }
.stage-hud { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; }
.stage-hud > span { color: var(--ink-muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.stage-hud strong { display: block; color: var(--ink); font-size: 15px; letter-spacing: 0; text-transform: none; }
.stage-caption { position: absolute; z-index: 4; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 180px); padding: 7px 12px 7px 10px; border-radius: 10px; background: var(--bg); color: var(--text); font-size: 10px; font-weight: 700; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; }
.caption-text > span { display: block; white-space: nowrap; }
body.sheet-open .caption-text > span { display: inline; }
body.sheet-open .caption-text > span + span::before { content: "· "; }
body.sheet-open .stage-caption { max-width: none; padding-block: 5px; bottom: 8px; }
.live-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--data); }
.garage-view-controls { position: absolute; z-index: 5; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--bg); }
.garage-view-controls output { display: none; padding: 0 6px 0 12px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.garage-view-controls button { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: transparent; }
.garage-view-controls .label { display: none; }
body.sheet-open :is(.stage-hud, .garage-view-controls, .car-model) { display: none; }
body.sheet-open .stage-word { font-size: clamp(18px, 5.6vw, 28px); }
body.sheet-open .stage-title { top: 66px; }
.preview-note, .mini-sheet { display: none; }
#sheet-preview { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 70px 12px 16px; background: var(--bg); }
#sheet-preview .preview-note { display: block; color: var(--muted); font-size: 13px; }
.sheet-pages { display: grid; gap: 16px; margin-top: 12px; }
.sheet-pages > svg { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto; border-radius: 4px; background: white; color-scheme: light; }

/* Step sheet (phone) / side panel (desktop) */
.editor-panel {
  grid-area: sheet;
  position: relative;
  z-index: 8;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg);
  transition: visibility 0s linear .34s;
}
body.sheet-open .editor-panel { visibility: visible; transition-delay: 0s; }
.sheet-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; padding: 10px 8px 0 18px; touch-action: none; cursor: grab; }
.sheet-grip { position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; translate: -50% 0; border-radius: 4px; background: #FFFFFF33; }
.sheet-close { width: 44px; padding: 0; background: var(--card); }
/* Track-line progress: white line, numbered turns, current turn orange with a magenta data dot. */
.mini-track { position: relative; display: flex; justify-content: space-between; width: min(200px, 60%); margin: 0; padding: 0; list-style: none; }
.mini-track::before { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 3px; translate: 0 -50%; border-radius: 3px; background: var(--text); }
.mini-track li { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--text); font-size: 9px; font-weight: 700; letter-spacing: .02em; }
body[data-editor-step="1"] .mini-track li:nth-child(1),
body[data-editor-step="2"] .mini-track li:nth-child(2),
body[data-editor-step="3"] .mini-track li:nth-child(3),
body[data-editor-step="4"] .mini-track li:nth-child(4) { background: var(--accent); box-shadow: none; color: var(--ink); }
body[data-editor-step="1"] .mini-track li:nth-child(1)::after,
body[data-editor-step="2"] .mini-track li:nth-child(2)::after,
body[data-editor-step="3"] .mini-track li:nth-child(3)::after,
body[data-editor-step="4"] .mini-track li:nth-child(4)::after { content: ""; position: absolute; top: -3px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--data); }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.step-panel { padding: 14px 16px 24px; }
.step-panel h2 { margin-top: 10px; font-size: clamp(40px, 12vw, 56px);  }
.step-panel > .muted { margin: 12px 0 18px; font-size: 15px; }
.step-navigation { display: none; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 16px; }
#step-count { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; white-space: nowrap; }
.step-navigation button { min-width: 112px; }

/* Selection cards: #1C1C1E, no borders; the chosen card gets an orange bar at the bottom. */
.car-choice, .pattern-choice { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--card); text-align: left; }
.car-choice::after, .pattern-choice::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: transparent; transition: background-color .16s ease; }
:is(.car-choice, .pattern-choice)[aria-pressed=true]::after { background: var(--accent); }
.car-options { display: flex; gap: 10px; margin: 0 -16px; padding: 0 16px 6px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; overscroll-behavior-x: contain; scrollbar-width: none; }
.car-choice { flex: 0 0 min(76%, 280px); scroll-snap-align: start; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px 16px; }
.car-choice img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 680; object-fit: contain; }
.car-text { min-width: 0; }
.car-choice strong { display: block; font: 900 16px/1.05 var(--display); text-transform: uppercase;  }
.car-choice small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pattern-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pattern-choice { min-width: 0; padding: 8px 8px 12px; }
.pattern-choice svg { display: block; width: 100%; height: 56px; border-radius: 10px; }
.pattern-choice span { display: block; padding: 10px 4px 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
#seed { margin-top: 14px; }
.colour-slot { margin: 10px 0; padding: 14px 12px; border-radius: var(--radius); background: var(--card); }
.colour-label { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; color: var(--text); font-size: 11px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.step-panel > .colour-label { margin-top: 20px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.swatch { min-width: 44px; min-height: 44px; padding: 5px; border-radius: 50%; background: transparent; aspect-ratio: 1; }
.swatch span { display: block; width: 100%; height: 100%; min-height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px #FFFFFF26; }
.swatch[aria-pressed=true] { box-shadow: inset 0 0 0 2px var(--accent); }
.check { display: flex !important; align-items: center; gap: 12px; min-height: 44px; margin-top: 16px; font-size: 15px; }
.check input[type=checkbox] { width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; flex-shrink: 0; accent-color: var(--accent); }
.field-error { margin-top: 8px; color: var(--error); font-size: 14px; }

/* Game menu: flat black bar, thin line icons, orange bar above the active item. */
.game-bottom {
  grid-area: bottom;
  position: relative;
  z-index: 9;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bg);
}
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps button, .garage-jump {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 62px;
  padding: 8px 2px 6px;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.steps button svg, .garage-jump svg { width: 22px; height: 22px; stroke-width: 1.4; }
.steps button::before { content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; translate: -50% 0; background: transparent; transition: background-color .2s ease; }
.steps [aria-selected=true] { color: var(--text); }
.steps [aria-selected=true]::before { background: var(--accent); }

/* ===== Data screens below the garage ===== */
.garage-pages { max-width: 1320px; margin: 0 auto; padding: 0 16px; }
.screen-title { margin-top: 18px; font-size: clamp(36px, 11vw, 96px);  overflow-wrap: break-word; }
.screen-title > span { display: block; }
.title-number { color: var(--accent); }
.data-screen, .finish-screen { padding: 56px 0 8px; scroll-margin-top: 0; }
.data-layout { display: grid; gap: 28px; margin-top: 32px; }
.track-panel { min-width: 0; }
.track-map { display: block; width: 100%; max-width: 520px; height: auto; overflow: visible; }
.track-line { fill: none; stroke: var(--text); stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
.track-start { stroke: var(--accent); stroke-width: 4; }
.sector { fill: var(--data); }
.track-marker circle { fill: var(--bg); stroke: var(--text); stroke-width: 1.5; }
.track-marker text { fill: var(--text); font: 700 9px var(--body); letter-spacing: .02em; text-anchor: middle; }
.track-marker .marker-dot { display: none; fill: var(--data); stroke: none; }
.track-label { fill: var(--muted); font: 700 7px var(--body); letter-spacing: .14em; text-anchor: middle; }
body[data-editor-step="1"] .track-marker[data-n="1"] circle,
body[data-editor-step="2"] .track-marker[data-n="2"] circle,
body[data-editor-step="3"] .track-marker[data-n="3"] circle,
body[data-editor-step="4"] .track-marker[data-n="4"] circle { fill: var(--accent); stroke: var(--accent); }
body[data-editor-step="1"] .track-marker[data-n="1"] .marker-dot,
body[data-editor-step="2"] .track-marker[data-n="2"] .marker-dot,
body[data-editor-step="3"] .track-marker[data-n="3"] .marker-dot,
body[data-editor-step="4"] .track-marker[data-n="4"] .marker-dot { display: block; fill: var(--data); stroke: var(--bg); stroke-width: 2; }
body[data-editor-step="1"] .track-marker[data-n="1"] text,
body[data-editor-step="2"] .track-marker[data-n="2"] text,
body[data-editor-step="3"] .track-marker[data-n="3"] text,
body[data-editor-step="4"] .track-marker[data-n="4"] text { fill: var(--ink); }
.track-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.track-legend span { display: inline-flex; align-items: center; gap: 8px; }
.track-legend span::before { content: ""; width: 14px; height: 4px; background: var(--accent); }
.track-legend span + span::before { width: 8px; height: 8px; border-radius: 50%; background: var(--data); }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.stat-tile { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 148px; padding: 18px 16px 16px; border-radius: var(--radius); background: var(--card); }
.stat-tile svg { width: 24px; height: 24px; fill: none; stroke: var(--text); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.stat-tile strong { margin-top: auto; padding-top: 18px; font: 800 clamp(24px, 7.5vw, 32px)/1 var(--display); overflow-wrap: anywhere; }
.stat-tile span { margin-top: 8px; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; }
#stat-save { font-size: clamp(16px, 5vw, 24px); }
.stat-tile:has(#stat-save)::after { content: ""; position: absolute; top: 20px; right: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.stat-tile:has(#stat-save[data-state=ok])::after { background: var(--data); }
.stat-tile:has(#stat-save[data-state=error])::after { background: var(--error); }
.data-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.data-actions button { flex: 1 1 140px; }
.finish-actions { display: grid; gap: 10px; margin-top: 32px; }
.action-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 168px; padding: 20px; border-radius: var(--radius); background: var(--card); text-align: left; }
.action-card svg { width: 28px; height: 28px; stroke-width: 1.4; margin-bottom: auto; }
.action-card strong { margin-top: 24px; font: 900 26px/1 var(--display); text-transform: uppercase;  }
.action-card > span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.action-primary { background: var(--accent); color: var(--ink); }
.action-primary > span { color: #FFFFFFCC; }
.finish-price { margin-top: 20px; font-size: 17px; font-weight: 600; }
.finish-note { margin-top: 6px; color: var(--muted); font-size: 14px; }
.designs-section { padding: 64px 0 8px; scroll-margin-top: 0; }
.designs-section .panel-heading { align-items: end; margin-bottom: 20px; }
/* Mixed case on purpose: the collection title is a section name, not a screen headline. */
.designs-section h2 { margin-top: 14px; font-size: clamp(28px, 8vw, 48px); text-transform: none;  }
#design-count { display: inline-block; margin-left: 8px; color: var(--accent); font: 800 .5em/1 var(--display); vertical-align: middle; white-space: nowrap; }
.design-grid { display: grid; gap: 10px; }
.empty-state { grid-column: 1 / -1; border-radius: var(--radius); padding: 32px 20px; background: var(--card); color: var(--muted); text-align: center; font-size: 15px; }
.design-card { min-width: 0; overflow: hidden; border-radius: var(--radius); background: var(--card); }
.design-thumb { display: block; width: calc(100% - 16px); height: 112px; margin: 8px 8px 0; padding: 16px; border-radius: 12px; background: var(--bg); }
.design-thumb > svg { width: 100%; height: 100%; border-radius: 6px; }
.design-details { padding: 14px 16px 16px; }
.design-details h3 { font-size: 16px; line-height: 1.1; overflow-wrap: anywhere;  }
.design-details p { margin: 8px 0 14px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.design-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.design-actions button { min-width: 44px; padding: 8px 10px; background: var(--card-2); font-size: 13px; }
.design-actions button[data-action=open] { background: var(--accent); color: var(--ink); }
.help { padding: 64px 0 56px; scroll-margin-top: 0; }
.help h2 { margin-top: 14px; font-size: clamp(30px, 9vw, 56px);  }
.help > div { display: grid; gap: 10px; margin-top: 24px; }
.help > div > p { position: relative; padding: 18px 16px 18px 70px; border-radius: var(--radius); background: var(--card); color: var(--muted); font-size: 15px; }
.help > div b { position: absolute; left: 16px; top: 18px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--text); color: var(--text); font-size: 11px; }
.help strong { display: block; margin-bottom: 6px; color: var(--text); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
footer { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 24px; padding: 20px max(16px, calc((100vw - 1288px) / 2)) calc(20px + env(safe-area-inset-bottom, 0px)); background: #000; color: var(--muted); font-size: 13px; }
footer .brand-text { color: var(--text); font: 900 11px var(--display); letter-spacing: .1em; }
footer a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
dialog { width: calc(100% - 24px); max-width: 480px; max-height: 90dvh; overflow: auto; padding: 22px; border: 0; border-radius: var(--radius); background: var(--card); color: var(--text); }
dialog::backdrop { background: #000000C7; }
dialog input:not([type=checkbox]):not([type=color]) { background: var(--card-2); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog-heading h2 { font-size: 20px; line-height: 1.05;  }
.dialog-heading button { flex-shrink: 0; width: 44px; padding: 0; }
dialog > p { margin-top: 14px; color: var(--muted); font-size: 15px; }
#scanner-wrap { max-width: 100%; overflow: hidden; margin-top: 12px; }
#scanner { width: 100%; }
#scanner video { max-width: 100%; }
#scanner a { display: inline-flex; align-items: center; min-height: 44px; }

/* ===== Pattern rotation (step WZÓR) ===== */
.rotate-block { margin-top: 22px; padding: 14px 12px 12px; border-radius: var(--radius); background: var(--card); }
.rotate-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rotate-head label { margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.rotate-head output { color: var(--accent); font: 800 22px/1 var(--display); }
.step-panel input[type=range]:not([type=checkbox]):not([type=color]) { display: block; min-height: 44px; margin: 6px 0 4px; padding: 0; background: transparent; accent-color: var(--accent); cursor: pointer; }
.angle-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.angle-choice { min-height: 44px; min-width: 44px; border-radius: 12px; background: var(--card-2); color: var(--text); font-weight: 700; }
.angle-choice[aria-pressed=true] { background: var(--accent); color: var(--ink); }
.rotate-block .hint { margin-top: 10px; }

/* ===== Tryb Pro ===== */
.game-bottom { grid-template-columns: minmax(0, 4fr) minmax(0, 1fr) minmax(0, 1fr); }
.pro-open span { color: var(--accent); }
.pro-open::before { content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; translate: -50% 0; background: transparent; }
.pro-open[aria-pressed=true] { color: var(--text); }
.pro-open[aria-pressed=true]::before { background: var(--accent); }
.pro-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--accent); color: var(--ink); font: 900 11px/1 var(--display); letter-spacing: .06em;  }
.pro-banner { position: absolute; z-index: 7; left: 12px; right: 12px; bottom: 64px; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--bg); color: var(--text); box-shadow: inset 4px 0 var(--accent); font-size: 13px; font-weight: 600; line-height: 1.3; }
.pro-banner span { flex: 1; min-width: 0; }
body.sheet-open .pro-banner { bottom: 48px; font-size: 12px; }
.pro-banner button { flex-shrink: 0; min-height: 44px; padding: 0 14px; }
body[data-editor-step="pro"] .car-stage { cursor: pointer; }
/* Selected sticker: glow along its real shape (mask/clip + outline), scale-aware, slow pulse. */
.livery-glow.is-selected { filter: drop-shadow(0 0 calc(1.5px / var(--livery-scale, 1)) #FF2A1A) drop-shadow(0 0 calc(2px / var(--livery-scale, 1)) #FF2A1A) drop-shadow(0 0 calc(6px / var(--livery-scale, 1)) #FF2A1A) drop-shadow(0 0 calc(14px / var(--livery-scale, 1)) rgba(255, 40, 20, .75)); animation: livery-pulse 1.6s ease-in-out infinite; }
.livery-glow.is-hover { opacity: .75; filter: drop-shadow(0 0 calc(3px / var(--livery-scale, 1)) rgba(255, 40, 20, .55)) drop-shadow(0 0 calc(7px / var(--livery-scale, 1)) rgba(255, 40, 20, .3)); }
@keyframes livery-pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
body[data-editor-step="pro"] .step-navigation { display: none !important; }
.pro-card, .pro-owned { margin: 8px 0 18px; padding: 16px 14px; border-radius: var(--radius); background: var(--card); }
.pro-owned { box-shadow: inset 4px 0 var(--accent); font-size: 15px; }
.pro-price { font-size: 15px; }
.pro-price strong { display: block; margin-bottom: 4px; color: var(--accent); font: 900 30px/1 var(--display); }
.pro-card .hint { margin-top: 10px; }
.pro-consent { align-items: flex-start !important; font-size: 14px !important; line-height: 1.45; }
.pro-consent span { padding-top: 4px; }
.pro-subtitle { margin: 22px 0 6px; font-size: 16px;  overflow-wrap: anywhere; }
.pro-pieces { display: grid; gap: 8px; margin-top: 12px; }
.pro-piece { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--card); color: var(--text); text-align: left; }
.pro-piece[aria-pressed=true] { box-shadow: inset 0 0 0 2px var(--accent); }
.pro-thumb { display: grid; place-items: center; width: 76px; height: 44px; padding: 4px; border-radius: 8px; background: #FFFFFF; overflow: hidden; }
.pro-thumb svg { display: block; width: 100%; height: auto; max-height: 100%; }
.pro-piece-text { min-width: 0; }
.pro-piece strong { display: block; font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
.pro-piece small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pro-piece small[data-state=custom] { color: var(--accent); }
.pro-editor { margin-top: 18px; padding: 4px 14px 16px; border-radius: var(--radius); background: var(--card); }
.pro-editor > label:not(.check) { display: block; margin: 16px 0 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.pro-editor select { background: var(--card-2) !important; }
.pro-colours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 10px; }
.pro-colours .colour-label { flex-direction: column; align-items: flex-start; margin: 0; }
.pro-editor .rotate-head { margin-top: 8px; }
.pro-lock-note { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius); background: var(--card); box-shadow: inset 4px 0 var(--accent); font-size: 15px; }
.action-card:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 360px) {
  .step-panel { padding-inline: 12px; }
  .car-options { margin-inline: -12px; padding-inline: 12px; }
  .colour-slot { padding-inline: 8px; }
  .studio-toolbar { left: 52px; right: 96px; }
  .steps button, .garage-jump { letter-spacing: .06em; }
  .stat-tile { padding: 16px 12px 14px; }
}

@media (min-width: 640px) {
  .login-panel { padding-inline: 24px; }
  .login-card { width: 100%; max-width: 520px; margin: -40px auto 0; padding: 28px; }
  .intro { left: 28px; top: 28px; }
  .intro > p:last-child { display: block; }
  .showroom-tag { left: 28px; }
  .studio-toolbar { left: 64px; right: 110px; }
  .studio-toolbar #design-name { font-size: 18px; }
  .stage-title { left: 24px; top: 76px; }
  .preview-panel .panel-heading { left: 24px; }
  .long { display: inline; }
  .stage-caption { left: 24px; bottom: 20px; }
  .garage-view-controls { right: 24px; bottom: 20px; }
  .garage-view-controls output { display: inline; }
  .car-choice { flex-basis: 250px; }
  .pattern-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .step-panel { padding-inline: 24px; }
  .steps button, .garage-jump { font-size: 11px; }
  .garage-pages { padding-inline: 28px; }
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .finish-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .design-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .design-actions { grid-template-columns: repeat(4, auto); justify-content: start; }
  .help > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== Desktop ===== */
@media (min-width: 1000px) {
  :root { --hud: calc(64px + env(safe-area-inset-top, 0px)); }
  .site-header { padding-inline: max(20px, calc((100vw - 1560px) / 2)); }
  .brand span { font-size: 18px; }
  .header-label { display: flex; margin-right: auto; margin-left: 20px; }
  .is-authenticated .header-label { display: none; }
  .icon-button { width: auto; padding: 0 16px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
  .icon-button .label { display: inline; }

  .login-layout { grid-template-columns: minmax(0, 1fr) minmax(420px, 34%); grid-template-rows: none; height: 100vh; height: 100dvh; min-height: 640px; }
  .login-showroom { height: auto; }
  .intro { top: 48px; left: 48px; }
  .intro h1 { font-size: clamp(72px, 7.4vw, 120px); }
  .showroom-tag { left: 48px; bottom: 40px; }
  .login-panel { display: flex; align-items: center; padding: 32px; overflow-y: auto; }
  .login-card { margin: auto 0; max-width: none; padding: 32px 28px; }
  .login-card h2 { font-size: 30px; }

  .game-shell { grid-template-areas: "stage sheet" "bottom bottom"; grid-template-columns: minmax(0, 1fr) 0px; grid-template-rows: minmax(0, 1fr) auto; min-height: 600px; }
  body.sheet-open .game-shell { grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: minmax(0, 1fr) auto; }
  .studio-toolbar { top: env(safe-area-inset-top, 0px); left: 196px; right: 320px; height: 64px; }
  .studio-toolbar #design-name { font-size: 20px; }
  .preview-panel .panel-heading { left: auto; right: 24px; top: 20px; }
  .stage-title, body.sheet-open .stage-title { top: 28px; left: 32px; right: 320px; }
  .stage-word, body.sheet-open .stage-word { font-size: clamp(44px, 4.6vw, 80px); }
  body.sheet-open :is(.stage-hud, .garage-view-controls, .car-model) { display: flex; }
  .garage-view-controls .label { display: inline; padding-right: 8px; }
  #preview-reset { width: auto; padding: 0 12px; border-radius: 999px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
  .preview-note { display: block; position: absolute; z-index: 4; left: 50%; bottom: 26px; translate: -50% 0; max-width: 34%; color: var(--ink-muted); font-size: 12px; line-height: 1.4; text-align: center; }
  .preview-note strong { color: var(--ink); }
  body.sheet-open .preview-note { display: none; }
  #sheet-preview { padding: 80px 24px 24px; }
  .editor-panel { border-radius: 0; }
  .editor-panel > * { width: 400px; }
  .sheet-head { cursor: default; padding: 16px 12px 0 24px; }
  .sheet-grip { display: none; }
  .step-panel { padding: 16px 24px 24px; }
  .step-panel h2 { font-size: 56px; }
  .step-navigation { display: flex; padding-inline: 24px; }
  .car-options { display: grid; margin: 0; padding: 0; overflow: visible; }
  .car-choice { flex-direction: row; align-items: center; gap: 14px; padding: 10px 16px 12px 10px; }
  .car-choice img { width: 132px; flex-shrink: 0; }
  .pattern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .game-bottom { grid-template-columns: auto auto auto; justify-content: center; gap: 0; padding-inline: 20px; }
  .pro-banner { left: 32px; right: auto; bottom: 84px; max-width: min(560px, calc(100% - 64px)); }
  .steps { display: flex; }
  .steps button, .garage-jump { width: 116px; min-height: 66px; font-size: 11px; }
  .garage-pages { padding-inline: 40px; }
  .data-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-actions { max-width: 640px; }
  .finish-actions { max-width: 960px; }
  .action-card { min-height: 220px; padding: 28px; }
  .action-card strong { font-size: 36px; }
  .design-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  body.sheet-open .game-shell { grid-template-columns: minmax(0, 1fr) 420px; }
  .editor-panel > * { width: 420px; }
  .design-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .design-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (hover: hover) {
  .primary:not(:disabled):hover { background: var(--accent-hi); }
  .secondary:not(:disabled):hover, .sheet-close:hover, .design-actions button:not([data-action=open]):not(:disabled):hover { background: var(--card-2); }
  .ghost:not(:disabled):hover, .icon-button:hover, .garage-view-controls button:not(:disabled):hover { background: #FFFFFF14; }
  .steps button:not([aria-selected=true]):hover, .garage-jump:hover, .login-tabs button:not([aria-selected=true]):hover, .preview-tabs button:not([aria-selected=true]):hover { color: var(--text); }
  .car-choice:hover, .pattern-choice:hover, .action-card:not(.action-primary):not(:disabled):hover { background: #242427; }
  .action-primary:not(:disabled):hover { background: var(--accent-hi); }
  a:hover { color: var(--text); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .boot-start { opacity: 1; }
}

/* =====================================================================
   Apexio brand layer ("ROUND 3" of the shop): liquid glass on near-black,
   one racing-red accent, Unbounded titles, Montserrat text. Visual only.
   ===================================================================== */
html { background: #0B0A14; }
body { background: radial-gradient(70% 50% at 100% 0%, rgba(225,6,0,.16), transparent 70%), radial-gradient(60% 40% at 0% 100%, rgba(225,6,0,.12), transparent 70%), #0B0A14; font-family: var(--body); }
::selection { background: rgba(225,6,0,.55); color: #fff; }
h1, h2, h3 { line-height: 1.04; letter-spacing: 0; }
.kicker, .eyebrow { color: rgba(255,255,255,.62); letter-spacing: .18em; }
.bars i { background: var(--accent); box-shadow: 0 0 10px rgba(225,6,0,.8); }
.hint, .muted { color: rgba(255,255,255,.62); }

/* Floating blurred red glow blobs (cheap radial gradients, no filter) */
.ax-glow { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255,40,20,.55) 0%, rgba(225,6,0,.22) 45%, rgba(225,6,0,0) 100%); animation: ax-float 16s ease-in-out infinite alternate; }
.ax-glow.g1 { width: 340px; height: 340px; left: -14%; top: 40px; }
.ax-glow.g2 { width: 300px; height: 300px; right: -16%; top: 38%; animation-duration: 20s; animation-delay: -6s; opacity: .8; }
.ax-glow.g3 { width: 320px; height: 320px; left: -10%; bottom: 8%; animation-duration: 18s; animation-delay: -10s; opacity: .7; }
@keyframes ax-float { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.12); } 100% { transform: translate(-30px, 24px) scale(.92); } }
.garage-pages { position: relative; isolation: isolate; }
.garage-pages > :not(.ax-glow) { position: relative; z-index: 1; }
.login-layout { position: relative; isolation: isolate; overflow: hidden; }
.login-layout > :not(.ax-glow) { position: relative; z-index: 1; }

/* ---- Buttons: shop language ---- */
.primary, .secondary, .ghost { border-radius: 4px; font-family: var(--body); font-weight: 700; font-size: 13px; letter-spacing: .14em; padding: 10px 22px; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
.primary { background: linear-gradient(145deg, var(--accent-hi), var(--accent-lo)); color: #fff; box-shadow: 0 12px 26px -12px rgba(225,6,0,.9), inset 0 1px 0 rgba(255,255,255,.3); }
.primary:not(:disabled):active { transform: translateY(1px); }
.secondary { background: var(--glass); border: 1px solid var(--glass-line); color: #fff; -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
.ghost { color: #fff; }
.primary:disabled { background: linear-gradient(145deg, #5a1511, #3d0d0b); box-shadow: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #FF5A50; outline-offset: 2px; }
.full { margin-top: 14px; }

/* Chips as glass pills */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.2); color: #fff; font: 700 10px/1.2 var(--body); letter-spacing: .14em; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #FF5A50; box-shadow: 0 0 8px #E10600; }

/* ---- Inputs ---- */
input:not([type=checkbox]):not([type=color]):not([type=range]), select { border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background-color: rgba(255,255,255,.06); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); transition: border-color .2s, box-shadow .2s; }
.step-panel input:not([type=checkbox]):not([type=color]):not([type=range]), .step-panel select, .pro-editor select, dialog input:not([type=checkbox]):not([type=color]) { background-color: rgba(255,255,255,.06) !important; }
input:not([type=checkbox]):not([type=color]):not([type=range]):focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(225,6,0,.28); outline: none; }
input::placeholder { color: rgba(255,255,255,.4); }
select option { background: #14090c; color: #fff; }
input[aria-invalid=true] { box-shadow: inset 0 -2px var(--error) !important; }
input[type=color]::-webkit-color-swatch { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
form > label, .step-panel > label, .pro-editor > label:not(.check) { color: rgba(255,255,255,.62); letter-spacing: .16em; }
.check input[type=checkbox], input[type=range] { accent-color: var(--accent); }
.test-box { border-radius: 14px; }

/* ---- Header ---- */
.site-header { background: rgba(11,10,20,.72); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: 0 1px 0 rgba(225,6,0,.25); }
.brand { gap: 0; padding: 0 4px; }
.brand-logo { display: block; width: clamp(120px, 34vw, 170px); height: auto; aspect-ratio: 1905 / 189; }
.brand-mark { display: none; width: 26px; height: 28px; color: var(--accent); filter: drop-shadow(0 0 8px rgba(225,6,0,.7)); }
@media (max-width: 999px) {
  .is-authenticated .brand-logo { display: none; }
  .is-authenticated .brand-mark { display: block; }
  .header-label { display: flex; }
  .is-authenticated .header-label { display: none; }
  .header-label .hl-name { display: none; }
  .back-shop { padding: 0 6px; font-size: 10px; letter-spacing: .08em; }
}
@media (max-width: 380px) { .brand-logo { width: 104px; } .back-shop { font-size: 9.5px; } }
.header-label { color: rgba(255,255,255,.7); }
.back-shop { color: rgba(255,255,255,.75); border-radius: 4px; }
.pro-badge { border-radius: 4px; background: linear-gradient(145deg, var(--accent-hi), var(--accent-lo)); color: #fff; box-shadow: 0 6px 14px -6px rgba(225,6,0,.9); }
#notice { border-radius: 16px; background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04)), rgba(20,9,12,.88); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 4px 0 var(--accent), 0 20px 40px -18px rgba(0,0,0,.8); }
#notice[data-kind=error] { box-shadow: inset 4px 0 var(--error), 0 20px 40px -18px rgba(0,0,0,.8); }

/* ---- Splash ---- */
.boot { background: radial-gradient(70% 50% at 50% 62%, rgba(225,6,0,.38), transparent 70%), radial-gradient(60% 40% at 50% 0%, rgba(225,6,0,.18), transparent 70%), #0B0A14; }
.boot-brand img { display: block; width: min(76vw, 420px); height: auto; filter: drop-shadow(0 6px 24px rgba(225,6,0,.45)); }
.boot-title { font: 900 12px/1 var(--display); letter-spacing: .4em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.boot-smoke { opacity: .35 !important; filter: hue-rotate(-30deg) saturate(2.5); }
.boot-progress { height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); }
.boot-progress span { background: linear-gradient(90deg, var(--accent-lo), var(--accent-hi)); box-shadow: 0 0 12px rgba(225,6,0,.9); }
.boot-start { min-height: 56px; }
.boot-status, .boot-note { color: rgba(255,255,255,.6); }

/* ---- Stage: dark showroom, drama from light (red glow under the car) ---- */
.car-stage, .login-showroom { background: radial-gradient(55% 38% at 50% var(--car-y, 60%), rgba(225,6,0,.5), transparent 72%), radial-gradient(90% 40% at 50% 100%, rgba(225,6,0,.22), transparent 70%), linear-gradient(180deg, #0B0A14 0%, #14090c 62%, #1b0a0e 100%); }
.scene { background: none !important; -webkit-mask-image: none; mask-image: none; }
.scene-car::before { background: radial-gradient(ellipse 46% 24% at 52% 58%, rgba(255,40,20,.55), rgba(225,6,0,.22) 55%, transparent 100%), radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 100%); filter: blur(10px); }
#car-image { filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
.intro h1 { font-size: clamp(46px, 14vw, 72px); text-shadow: 0 8px 36px rgba(0,0,0,.6); }
.intro > p:last-child { color: rgba(255,255,255,.75); }
.showroom-tag b { color: #fff; }
.stage-word { text-shadow: 0 6px 30px rgba(0,0,0,.6); }
.car-model::before { background: linear-gradient(90deg, var(--accent) 16px, transparent 16px 20px, var(--accent) 20px); box-shadow: 0 0 10px rgba(225,6,0,.8); }
.stage-hud > span { color: rgba(255,255,255,.62); }
.stage-caption, .garage-view-controls, .pro-banner { background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04)), rgba(11,10,20,.6); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.stage-caption { border-radius: 999px; padding-inline: 14px; }
.live-dot { background: #FF5A50; box-shadow: 0 0 8px #E10600; }
.pro-banner { border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 14px 30px -14px rgba(225,6,0,.7); }
.preview-note { color: rgba(255,255,255,.7); }
#sheet-preview { background: #0B0A14; }

/* ---- Tabs as glass pills ---- */
.login-tabs, .preview-tabs { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.login-tabs button, .preview-tabs button { color: rgba(255,255,255,.75); font-size: 11px; letter-spacing: .12em; }
.login-tabs [aria-selected=true], .preview-tabs [aria-selected=true] { background: linear-gradient(145deg, var(--accent-hi), var(--accent-lo)); color: #fff; box-shadow: 0 8px 18px -8px rgba(225,6,0,.9), inset 0 1px 0 rgba(255,255,255,.35); }

/* ---- Login card: liquid glass ---- */
.login-panel { background: transparent; }
.login-card { border-radius: 24px; background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 50%, rgba(225,6,0,.16)), rgba(20,9,12,.55); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 30px 70px -30px rgba(0,0,0,.8), 0 0 60px -14px rgba(225,6,0,.4); }
.login-card h2 { font-size: clamp(22px, 6.4vw, 28px); line-height: 1.1; }
.login-lead { color: rgba(255,255,255,.7); }
#scanner-wrap { border-radius: 14px; }

/* ---- Editor sheet / side panel ---- */
.game-shell { background: transparent; }
.editor-panel { border-radius: 24px 24px 0 0; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 40%, rgba(225,6,0,.08)), rgba(14,8,12,.82); border: 1px solid rgba(255,255,255,.18); border-bottom: 0; -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 -20px 50px -20px rgba(225,6,0,.35); }
.sheet-grip { background: rgba(255,255,255,.35); }
.sheet-close { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.step-panel h2 { font-size: clamp(32px, 10vw, 44px); }
.step-panel > .muted { color: rgba(255,255,255,.65); }
.mini-track::before { background: rgba(255,255,255,.35); height: 2px; }
.mini-track li { background: #14090c; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); color: #fff; }
body[data-editor-step="1"] .mini-track li:nth-child(1), body[data-editor-step="2"] .mini-track li:nth-child(2), body[data-editor-step="3"] .mini-track li:nth-child(3), body[data-editor-step="4"] .mini-track li:nth-child(4) { background: linear-gradient(145deg, var(--accent-hi), var(--accent-lo)); box-shadow: 0 0 14px rgba(225,6,0,.85); color: #fff; }
body[data-editor-step="1"] .mini-track li:nth-child(1)::after, body[data-editor-step="2"] .mini-track li:nth-child(2)::after, body[data-editor-step="3"] .mini-track li:nth-child(3)::after, body[data-editor-step="4"] .mini-track li:nth-child(4)::after { display: none; }
#step-count { color: rgba(255,255,255,.6); }

/* ---- Selection cards: glass, selected = red border + glow ---- */
.car-choice, .pattern-choice, .colour-slot, .rotate-block, .pro-card, .pro-owned, .pro-editor, .pro-piece, .pro-lock-note, .stat-tile, .action-card, .design-card, .help > div > p, .empty-state { border: 1px solid rgba(255,255,255,.14); background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 55%, rgba(225,6,0,.08)), rgba(20,9,12,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.car-choice::after, .pattern-choice::after { display: none; }
:is(.car-choice, .pattern-choice, .pro-piece)[aria-pressed=true] { border-color: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px var(--accent), 0 12px 30px -10px rgba(225,6,0,.75); background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 55%, rgba(225,6,0,.22)), rgba(30,9,12,.7); }
.car-choice strong { font-size: 15px; line-height: 1.12; }
.car-choice small, .pattern-choice span, .pro-piece small, .design-details p { color: rgba(255,255,255,.62); }
.pro-piece small[data-state=custom] { color: #FF5A50; }
.pattern-choice span { letter-spacing: .1em; }
.swatch span { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.swatch[aria-pressed=true] { box-shadow: inset 0 0 0 2px #fff, 0 0 14px rgba(225,6,0,.9); }
.angle-choice { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); }
.angle-choice[aria-pressed=true] { background: linear-gradient(145deg, var(--accent-hi), var(--accent-lo)); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -8px rgba(225,6,0,.9); }
.rotate-head output { color: #FF5A50; }
.pro-price strong { color: #FF5A50; text-shadow: 0 0 24px rgba(225,6,0,.6); }
.pro-owned, .pro-lock-note { border-left: 1px solid rgba(255,255,255,.14); box-shadow: inset 4px 0 var(--accent), inset 0 1px 0 rgba(255,255,255,.16); }
.pro-thumb { background: #fff; }
.field-error { color: var(--error); }

/* ---- Bottom menu: glass bar, red active mark ---- */
.game-bottom { background: rgba(11,10,20,.78); border-top: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 -1px 0 rgba(225,6,0,.25); padding-bottom: env(safe-area-inset-bottom, 0px); }
.steps button, .garage-jump { color: rgba(255,255,255,.62); font-family: var(--body); letter-spacing: .1em; }
.steps [aria-selected=true], .pro-open[aria-pressed=true] { color: #fff; }
.steps button::before, .pro-open::before { height: 3px; border-radius: 0 0 3px 3px; }
.steps [aria-selected=true]::before, .pro-open[aria-pressed=true]::before { background: var(--accent); box-shadow: 0 6px 16px rgba(225,6,0,.9); }
.steps [aria-selected=true] svg, .pro-open[aria-pressed=true] svg { color: #FF5A50; }
.pro-open span { color: #FF5A50; }

/* ---- Data screens ---- */
.data-screen, .finish-screen { position: relative; }
.screen-title { font-size: clamp(30px, 9.4vw, 72px); line-height: 1.04; }
.title-number { color: var(--accent); text-shadow: 0 0 30px rgba(225,6,0,.55); }
.track-line { stroke: rgba(255,255,255,.9); }
.track-marker circle { fill: #14090c; stroke: rgba(255,255,255,.7); }
.track-marker text, .track-label { font-family: var(--body); }
.track-label { fill: rgba(255,255,255,.55); }
.sector { fill: #FF5A50; }
body[data-editor-step="1"] .track-marker[data-n="1"] circle, body[data-editor-step="2"] .track-marker[data-n="2"] circle, body[data-editor-step="3"] .track-marker[data-n="3"] circle, body[data-editor-step="4"] .track-marker[data-n="4"] circle { fill: var(--accent); stroke: #FF5A50; filter: drop-shadow(0 0 6px rgba(225,6,0,.9)); }
body[data-editor-step="1"] .track-marker[data-n="1"] .marker-dot, body[data-editor-step="2"] .track-marker[data-n="2"] .marker-dot, body[data-editor-step="3"] .track-marker[data-n="3"] .marker-dot, body[data-editor-step="4"] .track-marker[data-n="4"] .marker-dot { fill: #fff; stroke: #14090c; }
.track-legend { color: rgba(255,255,255,.6); }
.track-legend span + span::before { background: #fff; }
.stat-tile svg { stroke: #FF5A50; }
.stat-tile span { color: rgba(255,255,255,.62); }
.stat-tile:has(#stat-save)::after { background: #FF5A50; box-shadow: 0 0 8px #E10600; }
.stat-tile:has(#stat-save[data-state=ok])::after { background: #4ADE80; box-shadow: 0 0 8px #4ADE80; }
.action-card strong { font-size: clamp(20px, 6vw, 26px); line-height: 1.1; }
.action-card > span { color: rgba(255,255,255,.62); }
.action-card svg { color: #FF5A50; }
.action-primary { border-color: rgba(255,255,255,.22); background: linear-gradient(145deg, rgba(255,42,26,.95), rgba(176,5,0,.95)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 20px 44px -16px rgba(225,6,0,.8); }
.action-primary svg { color: #fff; }
.action-primary > span { color: rgba(255,255,255,.85); }
.finish-price { font-weight: 600; }
.finish-note { color: rgba(255,255,255,.62); }
.designs-section h2 { font-size: clamp(24px, 7vw, 40px); text-transform: uppercase; }
#design-count { color: #FF5A50; }
.design-thumb { border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.design-details h3 { font-size: 15px; }
.design-actions button { border-radius: 4px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.design-actions button[data-action=open] { background: linear-gradient(145deg, var(--accent-hi), var(--accent-lo)); border-color: transparent; color: #fff; }
.help h2 { font-size: clamp(26px, 8vw, 48px); }
.help > div > p { color: rgba(255,255,255,.7); }
.help > div b { background: linear-gradient(145deg, var(--accent-hi), var(--accent-lo)); box-shadow: 0 8px 16px -8px rgba(225,6,0,.9); color: #fff; }
.help strong { color: #fff; }
footer { background: linear-gradient(180deg, #0B0A14, #000); border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.62); }
footer .brand-text { letter-spacing: .12em; }
footer a { color: #fff; }
dialog { border-radius: 24px; background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 50%, rgba(225,6,0,.16)), rgba(20,9,12,.92); border: 1px solid rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 30px 80px -20px rgba(225,6,0,.5); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
dialog::backdrop { background: rgba(5,3,8,.8); }
dialog > p { color: rgba(255,255,255,.7); }
.dialog-heading h2 { font-size: 18px; line-height: 1.15; }

@media (hover: hover) {
  .primary:not(:disabled):hover, .action-primary:not(:disabled):hover { background: linear-gradient(145deg, #ff4a3a, #d10600); transform: translateY(-1px); box-shadow: 0 16px 32px -12px rgba(225,6,0,1), inset 0 1px 0 rgba(255,255,255,.4); }
  .secondary:not(:disabled):hover { background: var(--glass); border-color: rgba(255,255,255,.4); }
  .car-choice:hover, .pattern-choice:hover, .action-card:not(.action-primary):not(:disabled):hover { background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 55%, rgba(225,6,0,.16)), rgba(20,9,12,.6); border-color: rgba(255,255,255,.3); }
}
@media (max-width: 999px) {
  .editor-panel { -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
}
@media (min-width: 1000px) {
  .editor-panel { border-radius: 0; border-top: 0; border-right: 0; box-shadow: inset 1px 0 0 rgba(255,255,255,.25), -20px 0 60px -30px rgba(225,6,0,.4); }
  .ax-glow.g1 { width: 520px; height: 520px; left: -6%; }
  .ax-glow.g2 { width: 460px; height: 460px; right: -6%; }
  .ax-glow.g3 { width: 480px; height: 480px; }
  .step-panel h2 { font-size: 44px; }
  .brand-logo { width: 170px; }
}
@media (max-width: 999px) {
  .site-header { gap: 4px; padding-inline: 6px; }
  .header-label { min-width: 0; gap: 0; }
  .header-label .badge { padding: 4px 8px; font-size: 9px; letter-spacing: .1em; }
  .brand-logo { width: 112px; }
  .back-shop { padding: 0 4px; font-size: 9.5px; letter-spacing: .06em; }
}
/* icon-only ghost buttons keep their glyph (the shop-style padding would squeeze it to 0) */
.sheet-close, .garage-view-controls button:not(#preview-reset), .dialog-heading button, .icon-button { padding: 0; }
.studio-toolbar #design-name { border: 0; background: transparent; box-shadow: none; border-radius: 8px; font-family: var(--body); font-weight: 700; }
.studio-toolbar #design-name:focus { background: rgba(255,255,255,.1) !important; border: 0; box-shadow: 0 0 0 2px var(--accent); }
.studio-toolbar #save-status { color: rgba(255,255,255,.6); }
@media (max-width: 999px) { .stage-title { top: 84px; } body.sheet-open .stage-title { top: 80px; } }

/* ---- Bright track stage (owner request): sunlit circuit behind the car, dark text on top, soft ground shadow ---- */
.car-stage, .login-showroom { background:
  linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.15) 30%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 82%, rgba(240,238,240,.55) 100%),
  url(assets/tlo-tor-jasne.webp) center 62% / cover no-repeat, #e9e8ea; }
@media (max-width: 999px) { .car-stage, .login-showroom { background-image:
  linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.15) 30%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 82%, rgba(240,238,240,.55) 100%),
  url(assets/tlo-tor-jasne-900.webp); } }
.car-stage .stage-word, .login-showroom .stage-word, .car-stage .intro h1, .login-showroom .intro h1, .intro h1 { color: #15151E; text-shadow: 0 2px 18px rgba(255,255,255,.7); }
.car-stage .stage-hud > span, .stage-hud > span { color: rgba(21,21,30,.6); }
.car-stage .stage-hud strong, .stage-hud strong { color: #15151E; }
.intro > p:last-child { color: rgba(21,21,30,.72); }
.showroom-tag, .showroom-tag b { color: #15151E; }
.scene-car::before { background: radial-gradient(ellipse 46% 16% at 52% 66%, rgba(0,0,0,.42), rgba(0,0,0,.14) 60%, transparent 100%), radial-gradient(ellipse 40% 22% at 52% 60%, rgba(225,6,0,.18), transparent 100%); filter: blur(8px); }
#car-image { filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); }

/* ---- Per-car bright track (same scene the real car was generated in, with the car removed) ---- */
body[data-car-bg="blue-thunder-8750"] :is(.car-stage, .login-showroom) { background-image: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.1) 28%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 82%, rgba(240,238,240,.5) 100%), url(assets/tor-blue.webp); }
body[data-car-bg="venom-green-8747"] :is(.car-stage, .login-showroom) { background-image: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.1) 28%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 82%, rgba(240,238,240,.5) 100%), url(assets/tor-green.webp); }
body[data-car-bg="neon-phantom-8701"] :is(.car-stage, .login-showroom) { background-image: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.1) 28%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 82%, rgba(240,238,240,.5) 100%), url(assets/tor-neon.webp); }
@media (max-width: 999px) {
  body[data-car-bg="blue-thunder-8750"] :is(.car-stage, .login-showroom) { background-image: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.1) 28%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 82%, rgba(240,238,240,.5) 100%), url(assets/tor-blue-900.webp); }
  body[data-car-bg="venom-green-8747"] :is(.car-stage, .login-showroom) { background-image: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.1) 28%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 82%, rgba(240,238,240,.5) 100%), url(assets/tor-green-900.webp); }
  body[data-car-bg="neon-phantom-8701"] :is(.car-stage, .login-showroom) { background-image: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.1) 28%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 82%, rgba(240,238,240,.5) 100%), url(assets/tor-neon-900.webp); }
}
:is(.car-stage, .login-showroom) { background-position: center 70%; background-size: cover; transition: background-image .3s; }

/* ---- Neon street-circuit backgrounds (racing game cover style), per car; replaces the bright track ---- */
body[data-car-bg] .car-stage, .car-stage { background: url(assets/neon-blue.webp) center 62% / cover no-repeat, #1a0b2e; }
body[data-car-bg="venom-green-8747"] .car-stage { background-image: url(assets/neon-green.webp); }
body[data-car-bg="neon-phantom-8701"] .car-stage { background-image: url(assets/neon-neon.webp); }
@media (max-width: 999px) {
  body[data-car-bg] .car-stage, .car-stage { background-image: url(assets/neon-blue-900.webp); }
  body[data-car-bg="venom-green-8747"] .car-stage { background-image: url(assets/neon-green-900.webp); }
  body[data-car-bg="neon-phantom-8701"] .car-stage { background-image: url(assets/neon-neon-900.webp); }
}
.car-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(180deg, rgba(10,6,24,.55) 0%, rgba(10,6,24,.1) 30%, rgba(10,6,24,0) 60%, rgba(10,6,24,.35) 100%); }
.car-stage .stage-word, .intro h1, .login-showroom .intro h1 { color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.6); }
.stage-hud > span, .car-stage .stage-hud > span { color: rgba(255,255,255,.7); }
.stage-hud strong, .car-stage .stage-hud strong { color: #fff; }
.intro > p:last-child { color: rgba(255,255,255,.85); }
.showroom-tag, .showroom-tag b { color: #fff; }
.scene-car::before { background: radial-gradient(ellipse 46% 16% at 52% 66%, rgba(0,0,0,.55), rgba(0,0,0,.2) 60%, transparent 100%), radial-gradient(ellipse 46% 26% at 52% 60%, rgba(200,60,255,.25), transparent 100%); filter: blur(8px); }

/* Login: racing-game style cover with the real three cars, brand logo and the year on top */
body[data-car-bg] .login-showroom, .login-showroom { background: linear-gradient(180deg, rgba(12,6,30,.15) 0%, rgba(12,6,30,0) 45%, rgba(12,6,30,.85) 100%), url(assets/okladka-2026.webp) center bottom / cover no-repeat, #1a0b2e; }
.login-showroom .scene, .login-showroom .showroom-tag { display: none; }
.cover-brand { position: absolute; z-index: 3; left: 50%; top: clamp(18px, 4vh, 44px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(78%, 480px); pointer-events: none; }
.cover-brand img { width: 100%; height: auto; filter: drop-shadow(0 6px 22px rgba(0,0,0,.55)); }
.cover-brand b { font: 900 clamp(34px, 7vw, 64px)/1 Unbounded, 'Head', Arial, sans-serif; letter-spacing: .04em; color: #fff; font-style: italic; text-shadow: 0 0 24px rgba(225,6,0,.75), 0 6px 26px rgba(0,0,0,.6); }
.login-showroom .intro { position: absolute; z-index: 3; left: clamp(20px, 3vw, 48px); right: clamp(20px, 3vw, 48px); bottom: clamp(20px, 4vh, 44px); top: auto; }
.login-showroom .intro h1 { font-size: clamp(36px, 9vw, 64px); }
@media (min-width: 1000px) {
  body[data-car-bg] .login-showroom, .login-showroom { background-image: linear-gradient(180deg, rgba(12,6,30,.35) 0%, rgba(12,6,30,0) 35%, rgba(12,6,30,0) 55%, rgba(12,6,30,.85) 100%), url(assets/okladka-2026-szeroka.webp); background-position: center 70%; }
  .cover-brand { top: 26px; width: min(46%, 440px); }
  .cover-brand b { font-size: clamp(30px, 3.4vw, 52px); }
}
@media (min-width: 1000px) {
  body[data-car-bg] .login-showroom, .login-showroom { background-image: linear-gradient(180deg, rgba(12,6,30,.3) 0%, rgba(12,6,30,0) 30%, rgba(12,6,30,0) 48%, rgba(12,6,30,.7) 72%, rgba(12,6,30,.95) 100%), url(assets/okladka-2026-szeroka.webp); background-size: auto 100%, auto 92%; background-position: center, center 30%; background-repeat: no-repeat; background-color: #1b1430; }
}