/* Design system "Premium motorsport": graphite surfaces, one signal-amber accent, condensed display type,
   thin lines, small radii. Class colours appear only as thin stripes and badges. */
:root {
  --bg: #0b0c0f;
  --card: #14161b;
  --card2: #1c1f25;
  --line: #262a31;
  --line2: #343943;
  --text: #eceef2;
  --muted: #8b919c;
  --accent: #f5b301;
  --accent-ink: #1c1500;
  --accent-soft: #f5b30122;
  --blue: var(--accent);
  --blue2: #0057b7;
  --yellow: var(--accent);
  --green: #2fbf71;
  --red: #e5484d;
  --r: 10px;
  --r-sm: 6px;
  --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-disp: 'Fira Sans Condensed', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 500 14.5px/1.4 var(--f-body); -webkit-font-smoothing: antialiased; }
body { overscroll-behavior: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; -webkit-user-select: none; user-select: none; }
[data-act] { -webkit-user-select: none; user-select: none; }
input { font: inherit; color: var(--text); background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; width: 100%; outline: none; }
input:focus { border-color: var(--accent); }
#app { max-width: 520px; margin: 0 auto; min-height: 100vh; padding-bottom: calc(78px + var(--safe-b)); }
.i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.disp, .big, .balance, .top h1, .h2, .btn, .result-name, .speed, .gear { font-family: var(--f-disp); }

/* header */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px; background: linear-gradient(var(--bg) 78%, transparent); }
.top h1 { flex: 1; min-width: 0; margin: 0; font-size: 25px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { position: relative; width: 40px; height: 40px; flex: none; }
.avatar svg { position: absolute; inset: 0; }
.avatar .face { position: absolute; inset: 5px; border-radius: 50%; background: var(--card2); display: flex; align-items: center; justify-content: center; font: 700 15px var(--f-disp); color: var(--text); }
.avatar .lvl { position: absolute; right: -4px; bottom: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 4px; background: var(--accent); color: var(--accent-ink); border: 2px solid var(--bg); font: 700 10.5px/14px var(--f-disp); text-align: center; }
.iconbtn { position: relative; width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); font-size: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 4px; background: var(--accent); font: 700 10.5px/17px var(--f-disp); color: var(--accent-ink); text-align: center; }
.balance { background: var(--card); border: 1px solid var(--line); padding: 8px 11px; border-radius: var(--r-sm); font-size: 16px; font-weight: 600; letter-spacing: .3px; white-space: nowrap; color: var(--accent); }

main { padding: 0 16px; }
.loading { color: var(--muted); text-align: center; padding: 60px 0; }

/* tab bar: docked, flat, accent marks the active tab */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; padding: 0 max(8px, calc(50% - 252px)) var(--safe-b); background: #0e1014f2; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.tabs button { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 0 9px; font-size: 21px; color: var(--muted); }
.tabs button span { font: 600 10.5px var(--f-disp); letter-spacing: .6px; text-transform: uppercase; }
.tabs button.on { color: var(--accent); }
.tabs button.on::before { content: ''; position: absolute; top: -1px; left: 28%; right: 28%; height: 2px; background: var(--accent); }
.dot { position: absolute; top: 7px; right: calc(50% - 16px); width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* basics */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin-bottom: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 8px; }
.wrap { flex-wrap: wrap; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.tiny { font-size: 11px; }
.big { font-size: 34px; font-weight: 700; letter-spacing: .3px; line-height: 1.1; }
.h2 { font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin: 20px 2px 9px; display: flex; justify-content: space-between; align-items: center; }
.grow { flex: 1; min-width: 0; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.center { text-align: center; }
.mt { margin-top: 10px; }
.mt2 { margin-top: 16px; }
.win { color: var(--green); }
.lose { color: var(--red); }
.empty { text-align: center; color: var(--muted); padding: 28px 10px; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; word-break: break-all; }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; text-align: center; transition: transform .08s, opacity .2s, background .2s; }
.btn:active { transform: scale(.985); }
.btn[disabled] { opacity: .35; pointer-events: none; }
.btn.ghost { background: var(--card2); color: var(--text); border: 1px solid var(--line); }
.btn.outline { background: transparent; border: 1px solid var(--line2); color: var(--text); }
.btn.yellow { background: var(--accent); color: var(--accent-ink); }
.btn.red { background: transparent; border: 1px solid #5a2427; color: #ff8a8e; }
.btn.green { background: var(--green); color: #04220f; }
.btn.sm { padding: 8px 12px; font-size: 13.5px; letter-spacing: .5px; width: auto; display: inline-flex; white-space: nowrap; }
.btns { display: flex; gap: 8px; }
.btns > * { flex: 1; }

/* Segmented control (the one definition; v1/v2/v3 copies merged here): a recessed track, the active segment raised
   with a yellow underline. A second level under it (market) is plain underlined tabs — see «.mk-kinds + .seg». */
.seg { display: flex; gap: 2px; margin-bottom: 12px; padding: 4px; border: 0; border-radius: 14px; background: #0e131b; box-shadow: inset 0 0 0 1px #ffffff0d, inset 0 2px 6px #0006; }
.seg button { flex: 1; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 4px 8px; border-radius: 10px;
  font: 700 16px var(--f-disp); letter-spacing: .3px; color: var(--muted); }
.seg button.on { background: linear-gradient(180deg, #2b3446, #222a39); color: var(--text); box-shadow: inset 0 1px 0 #ffffff1a, inset 0 -2px 0 var(--accent), 0 4px 10px -4px #000; }

.progress { height: 4px; border-radius: 2px; background: var(--card2); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .3s; }
.progress.gold > i { background: var(--accent); }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 4px; background: var(--card2); border: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.cls { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 3px; font: 700 11.5px var(--f-disp); color: #101010; }
.dots { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.dots span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 6px; border-radius: 3px; background: var(--card2); color: #c4c9d2; }
.dots span::before { content: ''; width: 6px; height: 6px; border-radius: 1px; background: var(--c); }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
/* One filter chip everywhere (garage, market cars/parts/plates, collection, sorting): 32px, condensed, accent when on. */
.chips button { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border: 0; border-radius: 9px; background: #0e131b;
  box-shadow: inset 0 0 0 1px #ffffff10; font: 700 14px var(--f-disp); letter-spacing: .2px; color: #c3cad6; white-space: nowrap; }
.chips button.on { color: var(--accent-ink); background: var(--accent); box-shadow: none; }

/* car art */
.art { display: flex; align-items: center; justify-content: center; }
.art img, .art svg { width: 100%; height: 100%; object-fit: contain; }
.glow { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c, #fff) 70%, transparent)); }

/* garage grid: class shown as a thin left stripe */
/* minmax(0, 1fr): columns stay equal even when a car name is long (plain 1fr grows to fit the text). */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.car { position: relative; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--c, var(--line2)); border-radius: var(--r-sm); padding: 8px 10px 10px; text-align: left; overflow: hidden; min-height: 150px; }
.car::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 100px; background: radial-gradient(ellipse 70% 60% at 50% 75%, #ffffff0d, transparent 70%); pointer-events: none; }
/* Rarity tint: the whole card takes the class colour (--c), strongest behind the car, fading to graphite at the bottom.
   Without color-mix support the declaration is dropped and the plain card background stays. */
.car[style*="--c"] {
  background:
    radial-gradient(95% 70% at 50% 36%, color-mix(in srgb, var(--c) 32%, transparent), transparent 72%),
    linear-gradient(165deg, color-mix(in srgb, var(--c) 30%, #14161b) 0%, color-mix(in srgb, var(--c) 10%, #14161b) 55%, #111317 100%);
  border-color: color-mix(in srgb, var(--c) 50%, transparent);
  border-left-color: var(--c);
}
.car.r3, .car.r4, .car.r5 { box-shadow: 0 0 22px -8px var(--c); }
.car.sel { outline: 2px solid var(--accent); outline-offset: -1px; }
.car .art { height: 82px; margin: 12px 0 4px; position: relative; }
.car .nm { font: 600 15px/1.15 var(--f-disp); letter-spacing: .2px; }
.car .meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.car .tl { position: absolute; top: 8px; left: 8px; }
.car .tr { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.car .new { background: var(--accent); color: var(--accent-ink); font: 700 10px var(--f-disp); letter-spacing: .6px; padding: 2px 5px; border-radius: 3px; }
.car .status { position: absolute; top: 58px; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 4px 10px; font: 700 11px var(--f-disp); letter-spacing: .6px; text-transform: uppercase; box-shadow: 0 4px 14px #0008; }
.car .status .i { width: 13px; height: 13px; }
.car.listed .art { opacity: .4; filter: saturate(.4); }
.chip.mine { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.confirm { position: fixed; inset: 0; z-index: 60; background: #000b; display: flex; align-items: center; justify-content: center; padding: 16px; }
.confirm-card { width: 100%; max-width: 360px; background: #15171c; border: 1px solid var(--line2); border-radius: 14px; padding: 18px 16px 14px; box-shadow: 0 20px 50px #000a; animation: up .18s ease-out; }
.confirm-text { font-size: 15px; line-height: 1.45; text-align: center; margin-bottom: 14px; }
.slot { border: 1px dashed var(--line2); border-radius: var(--r-sm); min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-size: 12.5px; background: transparent; }
.slot.buy { border-style: solid; border-color: #4a3c10; background: var(--accent-soft); color: var(--accent); }
.slot b { color: var(--text); font-family: var(--f-disp); font-size: 15px; }
.tank { display: flex; gap: 3px; margin-top: 6px; }
.tank i { flex: 1; height: 3px; border-radius: 1px; background: #2a2f37; }
.tank i.on { background: var(--accent); }

/* Ukrainian plate */
/* Proportions measured from a real plate photo: black frame at the very edge, 4.75 : 1 frame, blue strip 0.42·h, capitals 0.66·frame,
   wide gaps between the "AA | 1234 | BC" groups. Width is fixed; the text is fitted into it by JS
   (fitPlate in app.js), so every plate looks the same whatever font the device has. */
.plate { --c: #fff; --h: 26px; position: relative; display: inline-flex; align-items: stretch; flex: none;
  height: var(--h); width: calc(var(--h) * 4.47); padding: calc(var(--h) * .05);
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 60%, #e6e6e6 100%); border: 1px solid #7d7d7d; border-radius: calc(var(--h) * .12);
  box-shadow: inset 0 1px 0 #fff, 0 2px 8px #0007; overflow: hidden; vertical-align: middle; }
.plate::before { content: ''; position: absolute; inset: calc(var(--h) * .012); border: max(1px, calc(var(--h) * .034)) solid #141414; border-radius: calc(var(--h) * .1); pointer-events: none; z-index: 2; }
.plate .ua { width: calc(var(--h) * .37); flex: none; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: calc(var(--h) * .12) 0 calc(var(--h) * .07); background: linear-gradient(180deg, #2f6fe6, #1a4fc0); border-radius: calc(var(--h) * .07) 0 0 calc(var(--h) * .07);
  color: #fff; font: 700 calc(var(--h) * .2)/1 Arial, sans-serif; letter-spacing: .02em; }
.plate .ua i { display: block; width: calc(var(--h) * .27); height: calc(var(--h) * .18); background: linear-gradient(#0057b7 50%, #ffd500 50%); }
.plate .tx { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 0 calc(var(--h) * .15) 0 calc(var(--h) * .09); overflow: hidden; }
.plate .txi { display: inline-flex; align-items: center; gap: calc(var(--h) * .14); white-space: pre; color: #111;
  font-family: 'DIN 1451', 'DIN Condensed', 'Roboto Condensed', 'Arial Narrow', sans-serif-condensed, Arial, sans-serif; font-weight: 700;
  font-size: calc(var(--h) * var(--plate-fs, .92)); line-height: var(--plate-lh, 1.15); letter-spacing: calc(var(--h) * .035);
  position: relative; top: calc(var(--plate-dy, 0) * 1em - var(--h) * .004); transform: scaleX(var(--sx, 1)); transform-origin: center; text-rendering: geometricPrecision; }
.plate .g { display: inline-flex; }
.plate.lg { --h: 62px; }
.plate.sm { --h: 18px; box-shadow: 0 1px 3px #0006; }
.plate.sm .ua { padding-top: calc(var(--h) * .16); font-size: 0; }

/* sheet */
.modal { position: fixed; inset: 0; z-index: 20; background: #000c; display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; background: #101216; border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; padding: 10px 16px calc(22px + var(--safe-b)); animation: up .22s ease-out; }
.sheet::before { content: ''; display: block; width: 36px; height: 3px; border-radius: 2px; background: var(--line2); margin: 0 auto 10px; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; min-height: 32px; }
.sheet-head h3 { flex: 1; margin: 0; font: 700 19px var(--f-disp); letter-spacing: .5px; text-transform: uppercase; text-align: center; }
.sheet-head .x, .sheet-head .bk { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--card2); border: 1px solid var(--line); font-size: 16px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.sheet-head .bk { background: none; border: 0; color: var(--accent); width: auto; font: 600 14px var(--f-disp); letter-spacing: .5px; text-transform: uppercase; gap: 2px; }
.spacer { width: 32px; flex: none; }

.toast { position: fixed; left: 50%; transform: translateX(-50%); top: 14px; z-index: 40; max-width: calc(100% - 32px); background: #1a1d23; border: 1px solid var(--line2); border-left: 3px solid var(--accent); padding: 11px 16px; border-radius: var(--r-sm); font-weight: 600; box-shadow: 0 10px 30px #000a; text-align: center; }
.toast.err { border-left-color: var(--red); }

/* stats */
.stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; text-align: center; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.stat.four { grid-template-columns: repeat(4, 1fr); }
.stat div { background: var(--card); padding: 10px 2px; }
.stat b { display: block; font: 600 17px var(--f-disp); letter-spacing: .3px; }
.stat span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.list { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 12px; }
.li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); width: 100%; text-align: left; }
.li:first-child { border-top: 0; }
.li b { font-weight: 700; }
.li > b, .li > .center > b, .rival .center > b { font-family: var(--f-disp); font-size: 15.5px; font-weight: 600; letter-spacing: .3px; }
.li .ic { width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--card2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 19px; flex: none; color: var(--text); }
.li .mini { width: 78px; height: 40px; flex: none; }
.li .chev { color: var(--muted); display: inline-flex; }
.li.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }

/* car sheet */
.hero { position: relative; height: 150px; margin: 4px 0 6px; }
.hero .art { height: 100%; }
.hero .plate-on { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); }

/* cases */
.picker { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); font: 600 15px var(--f-disp); letter-spacing: .5px; text-transform: uppercase; }
.picker .i { color: var(--accent); }
.stage { position: relative; height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 6px 0 10px; background: radial-gradient(ellipse 60% 45% at 50% 70%, #ffffff0a, transparent 70%); }
.stage .art { width: 100%; height: 150px; }
.stage .q { font-size: 54px; color: #3a3f48; display: inline-flex; }
.silhouette { opacity: .18; filter: grayscale(1) brightness(.6); }
.reel-wrap { position: relative; overflow: hidden; width: 100%; height: 130px; }
.reel { display: flex; gap: 8px; padding: 10px 0; will-change: transform; }
.reel .car { flex: none; width: 130px; min-height: 0; padding: 6px; }
.reel .car .art { height: 58px; margin: 12px 0 2px; }
.reel-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1px; background: var(--blue); box-shadow: 0 0 12px var(--blue); }
.result-name { font-size: 26px; font-weight: 700; letter-spacing: .3px; text-align: center; text-transform: uppercase; }
.multi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.multi > div { min-width: 0; }
.multi .car { min-height: 0; padding: 6px; width: 100%; }
.multi .car .art { height: 58px; margin: 14px 0 2px; }
/* Small result tiles keep only what matters: class, NEW, picture, name, value. */
.multi .car .tr .chip { display: none; }
.multi .car .tl, .multi .car .tr { top: 6px; }
.multi .car .tl { left: 6px; }
.multi .car .tr { right: 6px; }
.multi .car .nm { font-size: 12.5px; }
.multi .car .meta { font-size: 10.5px; flex-wrap: nowrap; }
.multi .car .meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.multi .car .meta > b { font-size: 12px !important; white-space: nowrap; }
.dropsell { width: 100%; margin-top: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 4px; border-radius: var(--r-sm); background: var(--card2); border: 1px solid var(--line); color: var(--text); font: 600 12.5px var(--f-disp); letter-spacing: .4px; }
.dropsell .i { width: 14px; height: 14px; color: var(--accent); }
.slot.armed { border-style: solid; border-color: #e53935; background: #3a1517; color: #ff8f93; animation: armpulse .6s ease-in-out infinite alternate; }
.slot.armed b { color: #fff; }
a.armed { color: #ff8f93 !important; }
.dropsell.armed, .btn.armed { background: #c62828; border-color: #e53935; color: #fff; animation: armpulse .6s ease-in-out infinite alternate; }
@keyframes armpulse { to { box-shadow: 0 0 0 3px #e5393555; } }
.dropsell.done { background: transparent; border-color: transparent; color: var(--muted); text-transform: uppercase; font-size: 11px; }
.multi .sold .car { opacity: .35; filter: grayscale(1); pointer-events: none; }
.toggle { width: 44px; height: 24px; border-radius: 12px; background: #2a2f37; position: relative; flex: none; transition: background .2s; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle.on { background: var(--accent); }
.toggle.on::after { background: var(--accent-ink); }
.toggle.on::after { transform: translateX(20px); }

/* race */
.carpick { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.carpick::-webkit-scrollbar { display: none; }
.carpick .car { flex: none; width: 128px; min-height: 0; padding: 8px; }
.carpick .car .art { height: 56px; margin: 10px 0 2px; }
.rival { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 14px; border-top: 1px solid var(--line); }
.rival:first-child { border-top: 0; }
.rival .mini { width: 84px; height: 42px; flex: none; }
.diff { font: 600 11px var(--f-disp); letter-spacing: .6px; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; border: 1px solid; }
.diff.easy { color: #4cd38a; border-color: #1f4a33; }
.diff.mid { color: #f2c14e; border-color: #4a3c14; }
.diff.hard { color: #ff7a7f; border-color: #4f2226; }
.racebox { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.racebox b { font-family: var(--f-disp); }
.lane { position: relative; height: 44px; margin: 6px 0; }
.lane .bar { position: absolute; left: 70px; right: 0; top: 30px; height: 3px; border-radius: 1px; background: #262a31; }
.lane .bar i { display: block; height: 100%; width: 0; border-radius: 1px; background: var(--accent); }
.lane.rv .bar i { background: #8b919c; }
.lane .who { position: absolute; left: 70px; top: 2px; font-size: 13px; font-weight: 700; }
.lane .hp { position: absolute; right: 0; top: 2px; font-size: 11px; color: var(--muted); }
.lane .mini { position: absolute; left: 0; top: 2px; width: 62px; height: 36px; }
.marks { display: flex; justify-content: space-between; margin-left: 70px; font-size: 10px; color: var(--muted); }
.tree { display: flex; justify-content: center; gap: 12px; margin: 14px 0; }
.tree i { width: 30px; height: 30px; border-radius: 50%; background: #262c36; box-shadow: inset 0 -3px 0 #0005; }
.tree i.amber { background: #ffc400; box-shadow: 0 0 18px #ffc400; }
.tree i.green { background: var(--green); box-shadow: 0 0 22px var(--green); }
.tree i.red { background: var(--red); box-shadow: 0 0 18px var(--red); }
.dash { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.speed { font-size: 34px; font-weight: 700; min-width: 86px; }
.speed small { font: 600 11px var(--f-body); color: var(--muted); }
.tacho { flex: 1; height: 12px; border-radius: 2px; background: #1b1e24; position: relative; overflow: hidden; }
.tacho .zone { position: absolute; top: 0; bottom: 0; left: 82%; width: 12%; background: #1d4a32; }
.tacho .redz { position: absolute; top: 0; bottom: 0; left: 94%; right: 0; background: #4f2226; }
.tacho .needle { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--accent); }
.gear { font-size: 32px; font-weight: 700; min-width: 34px; text-align: center; }
.gear small { display: block; font: 600 10px var(--f-body); color: var(--muted); }
.racebtn { height: 80px; font-size: 28px; letter-spacing: 2px; border-radius: var(--r-sm); }
.racebtn.gas { background: var(--green); color: #04220f; }
.racebtn.wait { background: #1d2129; color: #8b919c; box-shadow: inset 0 0 0 1.5px #3a2a2a; font-size: 20px; }
.racebtn.nudge { animation: nudge .35s; }
@keyframes nudge { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.racebtn.shift { background: var(--accent); color: var(--accent-ink); }.qchip { font: 600 11px var(--f-disp); letter-spacing: .4px; padding: 3px 7px; border-radius: 3px; border: 1px solid; }
.q-perfect { color: #4cd38a; border-color: #1f4a33; }
.q-good { color: var(--text); border-color: var(--line2); }
.q-early, .q-late { color: #f2c14e; border-color: #4a3c14; }
.q-miss { color: #ff7a7f; border-color: #4f2226; }
.flash { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 26px; font-weight: 900; pointer-events: none; animation: flash .7s ease-out forwards; text-shadow: 0 2px 12px #000; }
@keyframes flash { from { opacity: 1; transform: translate(-50%, -50%) scale(.8); } to { opacity: 0; transform: translate(-50%, -110%) scale(1.15); } }

/* menu */
.menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { position: relative; text-align: left; padding: 14px; border-radius: var(--r-sm); min-height: 92px; background: var(--card); border: 1px solid var(--line); transition: border-color .2s; }
.tile:active { border-color: var(--line2); }
.tile b { display: block; font: 600 17px var(--f-disp); letter-spacing: .4px; text-transform: uppercase; margin-top: 10px; }
.tile span { font-size: 11.5px; color: var(--muted); }
.tile .ic { font-size: 22px; color: var(--accent); display: inline-flex; }
.tile.wide { grid-column: span 2; min-height: 0; display: flex; align-items: center; gap: 12px; }
.tile.wide b { margin: 0; }
.tile .badge { top: 10px; right: 10px; }

/* rewards */
.days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.day { background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 4px; text-align: center; position: relative; }
.day small { display: block; font: 600 10px var(--f-disp); color: var(--muted); letter-spacing: .8px; }
.day .e { font-size: 20px; margin: 4px 0 2px; color: var(--text); display: flex; justify-content: center; }
.day b { font: 600 12px var(--f-disp); display: block; letter-spacing: .3px; }
.day.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.day.today .e { color: var(--accent); }
.day.done { opacity: .4; }
.day.big { grid-column: span 2; background: linear-gradient(135deg, #2a2208, var(--card2) 70%); border-color: #4a3c10; }
.ring { position: relative; width: 84px; height: 84px; margin: 0 auto; }
.ring .face { position: absolute; inset: 8px; border-radius: 50%; background: var(--card2); display: flex; align-items: center; justify-content: center; font: 700 30px var(--f-disp); color: var(--text); }
.ring .lvl { position: absolute; right: 0; bottom: 0; width: 28px; height: 28px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); border: 3px solid #101216; font: 700 13px/22px var(--f-disp); text-align: center; }

/* leaderboard */
.lb { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--line); width: 100%; text-align: left; }
.lb:first-child { border-top: 0; }
.lb .pl { width: 26px; text-align: center; font: 700 15px var(--f-disp); color: var(--muted); }
.lb b { font-family: var(--f-disp); font-weight: 600; font-size: 15px; }
.lb.me { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.mybar { position: sticky; bottom: calc(72px + var(--safe-b)); background: #1a1d23; border: 1px solid var(--line2); border-left: 3px solid var(--accent); border-radius: var(--r-sm); padding: 11px 14px; display: flex; gap: 10px; font: 600 15px var(--f-disp); letter-spacing: .3px; }
.prizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 10px; background: var(--line); border-radius: var(--r-sm); overflow: hidden; }
.prizes div { background: var(--card2); padding: 8px 2px; text-align: center; font: 600 12px var(--f-disp); }
.prizes div span { display: block; font-size: 16px; margin-bottom: 2px; color: var(--accent); }
.prizes div span.medal { display: flex; margin: 0 auto 4px; font-size: 13px; color: #111; }

/* effects */
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 30; }
.fx-flash { position: fixed; inset: 0; pointer-events: none; z-index: 29; opacity: 0; animation: fxFlash ease-out forwards; }
@keyframes fxFlash { 15% { opacity: var(--o); } to { opacity: 0; } }
.fx-shake { animation: fxShake ease-in-out; }
@keyframes fxShake { 10%, 90% { transform: translate(-1px, 1px); } 20%, 80% { transform: translate(3px, -2px); } 30%, 50%, 70% { transform: translate(-4px, 2px); } 40%, 60% { transform: translate(4px, -1px); } }
.reveal-wrap { position: relative; width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; }
.reveal-wrap .art { position: relative; z-index: 1; }
.fx-rays { position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 55%, transparent) 0deg 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 0%, #0008 35%, transparent 68%); mask: radial-gradient(circle, #000 0%, #0008 35%, transparent 68%);
  animation: fxSpin 9s linear infinite, fxRaysIn .6s ease-out; opacity: .7; }
.fx-rays.strong { width: 480px; height: 480px; margin: -240px 0 0 -240px; opacity: 1; animation-duration: 5s, .6s; }
@keyframes fxSpin { to { transform: rotate(360deg); } }
@keyframes fxRaysIn { from { transform: scale(.3); opacity: 0; } }
.reveal { animation: fxReveal .7s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes fxReveal { from { transform: scale(.4) translateY(30px); opacity: 0; filter: brightness(4) blur(6px); } 60% { filter: brightness(1.6) blur(0); } }
.pop { animation: fxPop .5s .25s cubic-bezier(.2, 1.5, .4, 1) both; }
.pop2 { animation: fxPop .5s .4s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes fxPop { from { transform: scale(.6); opacity: 0; } }
.shimmer { background: linear-gradient(100deg, var(--text) 30%, var(--c, #ffd500) 45%, #fff 50%, var(--c, #ffd500) 55%, var(--text) 70%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fxShimmer 2.2s linear infinite; }
@keyframes fxShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.flip-in { animation: fxFlip .55s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes fxFlip { from { transform: perspective(500px) rotateY(90deg) scale(.8); opacity: 0; } }
.rare .car, .car.rare { box-shadow: 0 0 18px -4px var(--c); border-color: var(--c); }
.reel-wrap.spinning .reel .car { filter: blur(1.4px); }
.reel-wrap.slowing .reel .car { filter: none; transition: filter .4s; }
.reel .car.winner { transform: scale(1.08); box-shadow: 0 0 26px -2px var(--c); border-color: var(--c) !important; transition: transform .3s cubic-bezier(.2, 1.5, .4, 1), box-shadow .3s; z-index: 2; }
.reel-wrap::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, var(--bg), transparent 18%, transparent 82%, var(--bg)); }
.reel-wrap.spinning::after { animation: fxPulse .5s ease-in-out infinite alternate; }
@keyframes fxPulse { to { box-shadow: 0 0 22px 2px var(--blue); } }
/* plate reels */
.preel { display: inline-block; height: calc(var(--plate-lh, 1.15) * 1em); overflow: hidden; vertical-align: top; clip-path: inset(0); contain: paint; position: relative; text-align: left; }
.preel .pstrip { display: flex; flex-direction: column; will-change: transform; }
.preel .pstrip span { height: calc(var(--plate-lh, 1.15) * 1em); line-height: inherit; }
/* split-flap cells while a plate is being generated: whole glyphs only, never clipped */
.plate .flipc { display: inline-block; text-align: center; }
.plate .flipc.flip { animation: plateFlip .09s ease-out; }
.plate .flipc.landed.flip { animation: plateLand .28s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes plateFlip { from { transform: scaleY(.55); opacity: .55; } }
@keyframes plateLand { from { transform: scaleY(.4) translateY(-6%); opacity: .4; } 60% { transform: scaleY(1.08); } }
.plate.tension { animation: fxTension .35s ease-in-out infinite alternate; }
@keyframes fxTension { from { box-shadow: 0 0 0 0 var(--c); } to { box-shadow: 0 0 26px 4px var(--c); transform: scale(1.02); } }
.plate.lit { box-shadow: 0 0 30px 2px var(--c); border-color: var(--c); animation: fxPlate .7s cubic-bezier(.2, 1.5, .4, 1); position: relative; }
.plate.lit::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, #ffffffaa 50%, transparent 65%); background-size: 250% 100%; animation: fxSweep 1.6s ease-in-out .3s infinite; pointer-events: none; }
@keyframes fxPlate { from { transform: scale(.85); } }
@keyframes fxSweep { from { background-position: 150% 0; } to { background-position: -150% 0; } }

/* upgrade */
.gauge { position: relative; width: 220px; height: 220px; margin: 6px auto 4px; }
.gauge svg { width: 100%; height: 100%; }
.gauge .needle { position: absolute; left: 50%; top: 50%; width: 4px; height: 96px; margin-left: -2px; margin-top: -96px; background: linear-gradient(#fff, #fff0); border-radius: 2px; transform-origin: 50% 100%; box-shadow: 0 0 10px #fff8; }
.gauge .needle::before { content: ''; position: absolute; left: -6px; top: -4px; border: 8px solid transparent; border-bottom: 12px solid #fff; border-top: 0; }
.gauge .center { position: absolute; inset: 52px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.gauge .center b { font-size: 30px; font-weight: 900; }
.gauge .center .art { width: 90px; height: 46px; }
.up-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.up-pair .side { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px; text-align: center; min-height: 92px; }
.up-pair .side .art { height: 44px; }
/* casino */
.bet { display: flex; gap: 6px; align-items: center; }
.bet input { flex: 1; text-align: center; font-weight: 800; }
.bet button { flex: none; padding: 11px 10px; border-radius: var(--r-sm); background: var(--card2); border: 1px solid var(--line); font: 600 13px var(--f-disp); letter-spacing: .4px; text-transform: uppercase; }
.bet input { font-family: var(--f-disp); font-size: 17px; letter-spacing: .4px; }
.crashbox { position: relative; height: 220px; border-radius: var(--r); background: linear-gradient(0deg, #ffffff06 1px, transparent 1px) 0 0 / 100% 44px, radial-gradient(circle at 15% 100%, #2a2208, var(--card) 65%); border: 1px solid var(--line); overflow: hidden; }
.crashbox .mult { font-family: var(--f-disp); }
.crashbox svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.crashbox .mult { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font-size: 48px; font-weight: 900; text-shadow: 0 2px 16px #000; }
.crashbox .mult.lost { color: var(--red); }
.crashbox .mult.won { color: var(--green); }
.crashbox .sub { position: absolute; left: 0; right: 0; top: 62%; text-align: center; font-size: 13px; color: var(--muted); }
.crashbox .rocket { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px #f5b30133, 0 0 18px var(--accent); transform: translate(-50%, -50%); font-size: 0; }
.hist { display: flex; gap: 5px; overflow-x: auto; margin: 8px 0; scrollbar-width: none; }
.hist span { flex: none; font: 600 12.5px var(--f-disp); letter-spacing: .3px; padding: 3px 8px; border-radius: 3px; border: 1px solid #4f2226; color: #ff7a7f; }
.hist span.hi { border-color: #1f4a33; color: #4cd38a; }
.hist span i { font-style: normal; font-weight: 600; opacity: .6; margin-left: 4px; }
.hist span.muted { background: var(--card2); color: var(--muted); }
.mgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 10px 0; }
.mcell { aspect-ratio: 1; border-radius: var(--r-sm); background: linear-gradient(160deg, #20242b, #16181d); border: 1px solid var(--line2); font-size: 26px; display: flex; align-items: center; justify-content: center; transition: transform .12s; }
.mcell:active { transform: scale(.94); }
.mcell.safe { background: linear-gradient(160deg, #0f3a22, #0b2a19); border-color: #22c55e; animation: fxPop .35s cubic-bezier(.2, 1.5, .4, 1); }
.mcell.mine { background: linear-gradient(160deg, #4a1218, #2c0b0f); border-color: #ef4444; }
.mcell.boom { animation: fxShake .5s; box-shadow: 0 0 20px #ef4444; }
.mcell.dim { opacity: .45; }
.rwrap { position: relative; overflow: hidden; height: 74px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.rwrap::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1px; background: var(--yellow); box-shadow: 0 0 12px var(--yellow); }
.rwrap::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, var(--card), transparent 20%, transparent 80%, var(--card)); }
.rstrip { display: flex; gap: 6px; padding: 9px 0; will-change: transform; }
.rnum { flex: none; width: 56px; height: 56px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; color: #fff; }
.rnum.red, .rcell.red { background: #c1121f; }
.rnum.black, .rcell.black { background: #1f242d; }
.rnum.green, .rcell.green { background: #15803d; }
.rnum.hit { box-shadow: 0 0 0 3px var(--yellow), 0 0 22px var(--yellow); }
.rboard { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 8px; }
.rcell { position: relative; padding: 9px 0; border-radius: 8px; font-weight: 800; font-size: 13px; text-align: center; color: #fff; }
.rcell.zero { grid-column: span 6; }
.rcell .stake, .rout .stake { position: absolute; top: -6px; right: -4px; background: var(--yellow); color: #111; font-size: 9.5px; font-weight: 900; padding: 1px 4px; border-radius: 6px; z-index: 1; }
.rcell.won, .rout.won { outline: 2px solid var(--yellow); }
.routs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.rout { position: relative; padding: 11px 0; border-radius: 10px; background: var(--card2); font-weight: 800; font-size: 13px; text-align: center; }
.rout.red { background: #7f1d1d; }
.rout.black { background: #111827; border: 1px solid #2b3445; }
.slotbox { display: flex; justify-content: center; gap: 10px; padding: 16px; border-radius: var(--r); background: radial-gradient(circle at 50% 0%, #2a2208, var(--card) 70%); border: 1px solid var(--line); }
.sreel { width: 84px; height: 96px; border-radius: var(--r-sm); background: linear-gradient(#0b0c0f, #1c1f25 30%, #1c1f25 70%, #0b0c0f); border: 1px solid var(--line2); overflow: hidden; clip-path: inset(0 round 6px); }
.sreel .sstrip { display: flex; flex-direction: column; will-change: transform; }
.sreel .sstrip span { height: 96px; display: flex; align-items: center; justify-content: center; font-size: 50px; }
.sreel.win { border-color: var(--yellow); box-shadow: 0 0 22px var(--yellow); }
.paytable { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.paytable div { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; display: flex; justify-content: space-between; font-size: 13px; }
.winline { text-align: center; font: 700 24px var(--f-disp); letter-spacing: .4px; min-height: 30px; margin-top: 10px; }
.gauge .center b { font-family: var(--f-disp); font-weight: 700; }
.rnum, .rcell, .rout { font-family: var(--f-disp); }
.rnum { border-radius: var(--r-sm); }
.rcell { border-radius: 4px; }
.rout { border-radius: var(--r-sm); text-transform: uppercase; letter-spacing: .5px; }
.up-pair .side { border-radius: var(--r-sm); }

.cc { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 18px; padding: 0 4px; border-radius: 3px; border: 1px solid var(--line2); font: 600 11px var(--f-disp); letter-spacing: .8px; color: var(--text); background: var(--card2); }
.cc.sm { min-width: 22px; height: 16px; font-size: 10px; }
.flag-emb { display: inline-block; width: 1.35em; height: 1.35em; border-radius: 50%; overflow: hidden; vertical-align: -0.3em; flex: none;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.18), 0 1px 4px rgba(0,0,0,.4); }
.flag-emb svg { display: block; width: 100%; height: 100%; }
.ic > .flag-emb { width: 26px; height: 26px; }
.medal { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 4px; font: 700 13px var(--f-disp); color: #111; }
.medal.m1 { background: #f5b301; }
.medal.m2 { background: #c4c9d2; }
.medal.m3 { background: #c98a52; }
.logo { font: 800 15px var(--f-disp); letter-spacing: 1.5px; }
.trade-side { background: var(--card2); border-radius: 12px; padding: 4px 10px; }
.trade-side h4 { margin: 8px 0 2px; font-size: 12px; color: var(--muted); }
.trade-side .li { padding: 8px 0; }
/* trade hall & rooms */
.chatbox { padding: 10px; }
.chat { max-height: 280px; min-height: 90px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; overscroll-behavior: contain; }
.msg { background: var(--card2); border-radius: 12px 12px 12px 4px; padding: 6px 10px; max-width: 85%; align-self: flex-start; overflow-wrap: anywhere; }
.msg b { color: var(--accent); font-weight: 700; margin-right: 6px; }
.msg.me { align-self: flex-end; background: #2a2410; border-radius: 12px 12px 4px 12px; }
.msg.me b { display: none; }
.msg .t { color: var(--muted); font-size: 10.5px; margin-left: 8px; white-space: nowrap; }
.msg.sys { align-self: center; background: none; color: var(--muted); font-size: 12px; text-align: center; padding: 2px 6px; }
.chat-empty { margin: auto; }
.chatin { flex-wrap: nowrap; }
.chatin input { flex: 1; padding: 10px 12px; }
.chatin .btn { flex: none; height: 42px; }
.minis { gap: 4px; margin-top: 4px; flex-wrap: nowrap; }
.li .minis .mini { width: 54px; height: 28px; }
.li.invited { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.roomback { width: 100%; text-align: left; border-color: var(--accent); background: var(--accent-soft); }
.chip.ready { background: #12301f; color: #6fe3a2; border-color: #1d4a31; }
.waiting b { display: block; margin-top: 10px; }
.spinner { width: 34px; height: 34px; margin: 4px auto 0; border-radius: 50%; border: 3px solid var(--line2); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.right { text-align: right; }
/* case battles */
.bgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bhead { display: flex; justify-content: space-between; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; min-width: 0; transition: border-color .3s, box-shadow .3s; }
.bhead span { font-size: 18px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.bhead.won { border-color: var(--green); box-shadow: 0 0 18px -6px var(--green); }
.bhead.won b::after { content: ' 👑'; }
.bdrop { min-height: 0; padding: 6px 8px 8px; }
.bdrop .art { height: 54px; margin: 18px 0 2px; }
.bdrop .nm { font-size: 13px; }
.bdrop .meta b { color: var(--text); font-size: 13px; }
.bdrop .q { display: none; }
.bdrop.hid { background: var(--card2) !important; border-color: var(--line) !important; box-shadow: none !important; }
.bdrop.hid > :not(.q) { visibility: hidden; }
.bdrop.hid .q { display: grid; place-items: center; position: absolute; inset: 0; font: 800 34px var(--f-disp); color: var(--line2); }
.bcell { min-width: 0; display: flex; flex-direction: column; }
.warnbox { border-color: #7a4a10; background: #2a1d08; }
.warnbox b { color: var(--accent); display: block; margin-bottom: 4px; }
.chip.lose { background: #3a1517; color: #ff8f93; border-color: #5a2326; }
.countdown { position: fixed; left: 50%; top: 42%; z-index: 15; transform: translate(-50%, -50%); font: 800 140px/1 var(--f-disp); color: var(--accent); text-shadow: 0 6px 40px #000c, 0 0 40px #f5b30155; pointer-events: none; }
.countdown.go { animation: countdown .9s ease-out forwards; }
@keyframes countdown { 0% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.7); opacity: 0; } }

/* =====================================================================================================   Minimal theme (v2): pure black, iOS-style grey cards, system font, no caps, one amber button per screen,
   floating pill tab bar. It only overrides the rules above, so deleting this block brings back the v1 look
   (full v1 copy: design-backup/v1-amber).
   ============================================================================================================ */
:root {
  --bg: #000; --card: #1c1c1e; --card2: #2c2c2e; --line: #2c2c2e; --line2: #3a3a3c; --muted: #8e8e93; --text: #f2f2f7;
  --r: 14px; --r-sm: 12px;
  --f-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-disp: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
html, body { font: 400 15px/1.4 var(--f-body); }
#app { padding-bottom: calc(96px + var(--safe-b)); }

/* header: big sentence-case title, round grey pills */
.top { background: var(--bg); padding: 14px 16px 10px; }
.top h1 { font-size: min(28px, 6.6vw); font-weight: 700; letter-spacing: -.3px; text-transform: none; }
.iconbtn { border-radius: 50%; border: 0; background: var(--card); width: 36px; height: 36px; }
.balance { border: 0; background: var(--card); border-radius: 999px; padding: 8px 13px; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--text); }
.badge, .avatar .lvl { border-radius: 999px; }

/* floating pill tab bar, text only */
.tabs { left: 50%; right: auto; bottom: calc(12px + var(--safe-b)); transform: translateX(-50%); width: auto; max-width: calc(100% - 24px); padding: 4px; gap: 2px;
  background: #121214e6; border: 1px solid var(--line2); border-radius: 999px; }
.tabs button { flex: none; padding: 8px 11px; font-size: 0; gap: 0; border-radius: 999px; border: 1px solid transparent; }
.tabs button .i { display: none; }
.tabs button span { font: 500 12.5px var(--f-body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.tabs button.on { background: var(--card2); border-color: #f2f2f7; }
.tabs button.on span { color: var(--text); font-weight: 600; }
.tabs button.on::before { display: none; }
.tabs .dot { top: 4px; right: 4px; }

/* basics */
.card, .list { border: 0; border-radius: var(--r); }
.li { border-top: .5px solid var(--line); }
.li .ic { border: 0; border-radius: 8px; background: var(--card2); }
.h2 { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; margin: 22px 4px 8px; }
.big { font-weight: 700; letter-spacing: -.5px; }
.btn { border-radius: var(--r-sm); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 16px; }
.btn.sm { font-size: 14px; letter-spacing: 0; border-radius: 10px; }
.btn.ghost { background: var(--card2); border: 0; }
.btn.outline { border-color: var(--line2); }
.btn.red { border-color: #4a2224; }
input { background: var(--card); border: 1px solid transparent; border-radius: var(--r-sm); }
input:focus { border-color: var(--line2); }

/* iOS segmented control */
.chip { border: 0; border-radius: 6px; letter-spacing: 0; }
.dots span { border-radius: 6px; }
.dots span::before { border-radius: 50%; }
.cls { border-radius: 5px; font-family: var(--f-body); }
.toggle { background: #39393d; width: 50px; height: 30px; border-radius: 999px; }
.toggle::after { width: 26px; height: 26px; top: 2px; left: 2px; }
.toggle.on { background: #34c759; }
.toggle.on::after { background: #fff; }

/* garage cards: see the v3 «Нічний паддок» block at the end */
.car .nm { font: 600 14.5px/1.2 var(--f-body); letter-spacing: 0; }
.car .meta { font-size: 12px; }
.car .new, .car .status { font-family: var(--f-body); letter-spacing: 0; text-transform: none; border-radius: 999px; }
.slot { border: 1px dashed var(--line2); border-radius: var(--r); font-size: 13px; }
.slot.buy { border: 0; background: var(--card); }
.slot b { font-family: var(--f-body); }

/* bottom sheets and dialogs */
.modal { background: #000a; }
.sheet { background: var(--card); border: 0; border-radius: 16px 16px 0 0; }
.sheet::before { background: #48484a; width: 40px; height: 5px; border-radius: 3px; }
.sheet-head h3 { font: 600 17px var(--f-body); letter-spacing: 0; text-transform: none; }
.sheet-head .x { border: 0; border-radius: 50%; background: var(--card2); }
.sheet-head .bk { font: 500 15px var(--f-body); letter-spacing: 0; text-transform: none; }
.confirm-card { background: var(--card); border: 0; }
.sheet .list, .sheet .card, .sheet .stat, .sheet input, .sheet .trade-side { background: var(--card2); }
.sheet .li .ic, .sheet .btn.ghost { background: #3a3a3c; }
.toast { border-radius: 999px; }

/* the rest of the caps go away too */
.picker { border: 0; border-radius: 999px; font: 600 15px var(--f-body); letter-spacing: 0; text-transform: none; padding: 9px 16px; }
.result-name { text-transform: none; letter-spacing: -.3px; font-family: var(--f-body); }
.stat span, .dropsell.done, .diff, .bet button, .rout { text-transform: none; letter-spacing: 0; }
.stat { border: 0; }
.bet button { border: 0; font-family: var(--f-body); border-radius: 10px; }
.disp { font-family: var(--f-body); letter-spacing: -.2px; }

/* parts: a rounded tile tinted by tier (or the part photo from public/parts) */
.part { --s: 56px; width: var(--s); height: var(--s); flex: none; border-radius: calc(var(--s) * .26); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: calc(var(--s) * .46);
  background: radial-gradient(circle at 30% 22%, color-mix(in srgb, var(--c, #8e8e93) 55%, transparent), color-mix(in srgb, var(--c, #8e8e93) 14%, #1c1c1e) 72%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #8e8e93) 45%, transparent); }
.part .i { width: 1em; height: 1em; stroke-width: 1.7; filter: drop-shadow(0 2px 6px #0008); }
.part img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 3px 8px #000a); }
.part.sm { --s: 46px; }
/* Part photos: a light studio tile so dark metal reads; an empty slot is dimmed, an installed part glows in its tier colour. */
.part.photo { background: radial-gradient(circle at 50% 38%, #4a4e58, #24272e 78%); box-shadow: inset 0 0 0 1px #ffffff14; }
.part.photo { align-self: center; height: var(--s); min-height: var(--s); overflow: hidden; }
.part.photo img { flex: none; width: calc(var(--s) * .94); height: calc(var(--s) * .94); filter: drop-shadow(0 2px 4px #0009) contrast(1.08) brightness(1.12); }
.part.photo.empty img { opacity: .5; filter: grayscale(.7) brightness(.95); }
.part.photo.on { background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c) 45%, #4a4e58), #24272e 80%); box-shadow: inset 0 0 0 1.5px var(--c), 0 0 10px color-mix(in srgb, var(--c) 40%, transparent); }
.part.lg { --s: 76px; }
.li > .part.sm { margin: -2px 0; }

/* workshop: part chooser, case cards, drops */
.ptypes { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 12px; padding: 2px 16px 4px; scrollbar-width: none; }
.ptypes::-webkit-scrollbar { display: none; }
.ptype { flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.ptype .part { transition: transform .15s; }
.ptype.on { color: var(--text); font-weight: 600; }
.ptype.on .part { box-shadow: 0 0 0 2px #f2f2f7; transform: scale(1.05); }
.pcases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pcase { background: var(--card); border-radius: var(--r-sm); padding: 10px 11px; display: flex; flex-direction: column; gap: 7px; text-align: left; border: 1px solid transparent; min-width: 0; }
.pcase b { font-weight: 600; font-size: 13.5px; line-height: 1.2; }
.multi.parts.one { grid-template-columns: minmax(0, 170px); justify-content: center; }
.multi.parts.one .pcard .art { height: 90px !important; }
.multi.parts.one .part { --s: 92px; }
.multi.parts.one .pcard .nm { font-size: 16px; }
.multi.parts.one .pcard .meta { font-size: 12px; }
.pcase .pprice { font-size: 13px; color: var(--muted); }
.pcase.on .pprice { color: var(--text); }
.pcase.on { border-color: #f2f2f7; background: var(--card2); }
.pcase[disabled] { opacity: .4; }
.tierbar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; gap: 2px; }
.tierbar i { display: block; min-width: 3px; }
.pstage { height: 170px; margin: 12px 0; }
.pcard .art { height: 64px !important; margin: 16px 0 6px !important; }
.reel .pcard .art { height: 60px !important; margin: 14px 0 4px !important; }
.pcard .nm { text-align: center; }
.multi.parts .pcard { text-align: center; }
.multi.parts .pcard .meta { justify-content: center; display: block; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.multi .sold .pcard { opacity: .35; filter: grayscale(1); }

/* iOS-style banners sliding down from the top (invites, rewards to claim) */
#banners { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 45; display: flex; flex-direction: column; gap: 8px; padding: 0 max(10px, calc(50% - 250px)); pointer-events: none; }
.banner { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 22px; touch-action: none;
  background: rgba(30, 32, 38, .82); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
  transform: translateY(-140%); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.25, .35, 1), opacity .3s; }
.banner.in { transform: translateY(0); opacity: 1; }
.banner.out { transform: translateY(-140%); opacity: 0; transition: transform .3s ease-in, opacity .25s; }
.banner .mi { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 21px; flex: none; background: var(--c); }
.banner .grow { min-width: 0; cursor: pointer; }
.banner .grow b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner .grow .small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner .bbtns { display: flex; gap: 6px; flex: none; }
.banner .bbtns .btn { width: auto; padding: 0 12px; min-height: 34px; border-radius: 999px; font-size: 13px; }

/* two-line button: the action, and the amount under it (keeps half-width buttons from wrapping mid-phrase) */
.btn.btn2 { flex-direction: column; gap: 1px; padding-top: 9px; padding-bottom: 9px; line-height: 1.15; }
.btn.btn2 > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn.btn2 > small { font-size: 12.5px; font-weight: 600; opacity: .7; white-space: nowrap; }

/* luck: shown on the case screen after a run of bad drops */
.luckbar { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 12px; border-radius: 14px; text-align: center;
  background: linear-gradient(90deg, #30d15822, #30d15811); border: 1px solid #30d15844; }
.luckbar span { color: #4ade80; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.luckbar small { color: var(--muted); font-size: 11.5px; }
.chip.luck { color: #4ade80; }

/* drift */
.dhud { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; margin-bottom: 6px; }
.dhud small { display: block; font-size: 10.5px; color: var(--muted); letter-spacing: .5px; }
.dhud b { font: 800 22px/1.1 var(--f-disp); }
.dtrack { position: relative; height: 290px; margin-top: 10px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 120%, #2a2d34, #121418 70%); border: 1px solid var(--line); }
.dtrack canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dsign { z-index: 2; } .dmsg { z-index: 2; }
.droad { position: absolute; left: -50%; right: -50%; bottom: 34px; height: 4px; opacity: .55;
  background: repeating-linear-gradient(90deg, #fff 0 34px, transparent 34px 80px); animation: droad .5s linear infinite; }
@keyframes droad { to { transform: translateX(-80px); } }
.dsign { position: absolute; top: 10px; left: 0; right: 0; text-align: center; font: 800 15px var(--f-disp); letter-spacing: 1px; color: var(--accent); }
.dcar { position: absolute; left: 50%; bottom: 30px; width: 230px; margin-left: -115px; transform-origin: 50% 80%; transition: transform .05s linear; }
.dcar .art { width: 100%; }
.dcar.spin { animation: dspin .7s ease-in-out; }
@keyframes dspin { 50% { transform: perspective(700px) rotateY(180deg) rotateZ(-10deg); } }
#dSmoke i { position: absolute; bottom: 30px; width: 46px; height: 46px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #e8eaedcc, #e8eaed00 70%); animation: dpuff .9s ease-out forwards; }
@keyframes dpuff { from { transform: translateX(0) scale(calc(var(--s) * .5)); opacity: .9; } to { transform: translateX(var(--dx)) translateY(-26px) scale(calc(var(--s) * 2.2)); opacity: 0; } }
.dmsg { position: absolute; top: 40%; left: 0; right: 0; text-align: center; font: 800 26px var(--f-disp); opacity: 0; text-shadow: 0 4px 18px #000c; pointer-events: none; }
.dmsg.pop { animation: dmsg 1s ease-out; }
@keyframes dmsg { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: scale(1.1); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-18px); } }
.dgauge { position: relative; height: 16px; margin-top: 14px; border-radius: 8px; background: #2a2d34; overflow: hidden; }
.dgauge .dz { position: absolute; top: 0; bottom: 0; background: #22c55e88; }
.dgauge .di { position: absolute; top: 0; bottom: 0; background: #4ade80; }
.dgauge .dr { position: absolute; top: 0; bottom: 0; right: 0; background: #ef4444aa; }
.dgauge i { position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px #fff; }
#dGas.on { transform: scale(.97); filter: brightness(1.15); }

/* long page titles (e.g. «Досягнення») get a smaller font instead of being cut off */
.top h1.long { font-size: min(22px, 5.4vw); }

/* achievements: round badges coloured by the highest tier claimed */
.badges { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 6px; }
.badge-a { position: relative; width: 52px; height: 52px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #0b0c0f; background: radial-gradient(circle at 35% 30%, #fff8, transparent 55%), var(--tc);
  box-shadow: 0 0 0 2px #0008, 0 0 0 3.5px var(--tc), 0 6px 18px -4px var(--tc); }
.badge-a.lg { width: 60px; height: 60px; font-size: 28px; }
.badge-a.off { --tc: #2a2d34; color: #6b7280; box-shadow: 0 0 0 2px #0008, 0 0 0 3.5px #3a3e47; background: #22252b; }
.badge-a .tn { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font: 800 9.5px/1 var(--f-disp); padding: 2px 5px; border-radius: 6px; background: #0b0c0f; color: var(--tc); border: 1px solid var(--tc); white-space: nowrap; }
.badge-a.ready::after { content: ''; position: absolute; top: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; background: #ff3b30; border: 2px solid var(--bg); }
.badge-cell { text-align: center; font-size: 10.5px; color: var(--muted); line-height: 1.2; }
.badge-cell b { display: block; margin-top: 9px; color: var(--text); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ach-row { display: flex; gap: 14px; align-items: center; }
.ach-row .grow { min-width: 0; }
.ach-dots { display: flex; gap: 4px; margin-top: 4px; }
.ach-dots i { width: 18px; height: 5px; border-radius: 3px; background: #2f333b; }

/* admin gift window */
.gift { padding: 6px 4px 4px; }
.gift .hero .art { max-width: 300px; margin: 0 auto; }
.gift-ic { width: 92px; height: 92px; margin: 10px auto 12px; border-radius: 26px; display: flex; align-items: center; justify-content: center; font-size: 52px; color: #fff;
  background: var(--c, #ff9f0a); box-shadow: 0 10px 40px -6px var(--c, #ff9f0a); animation: giftPop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.gift-ic .flag-emb { width: 64px; height: 64px; }
.gift-sum { font: 800 38px/1.1 var(--f-disp); animation: giftPop .6s .1s cubic-bezier(.2, 1.6, .4, 1) both; }
.gift-plate { margin: 26px auto 6px; display: flex; justify-content: center; transform: scale(1.4); }
.gift-part { margin: 12px auto; display: flex; justify-content: center; }
.gift-note { margin: 14px auto 0; max-width: 340px; padding: 12px 14px; border-radius: 16px; background: var(--card2); font-size: 15px; line-height: 1.4; white-space: pre-wrap; text-align: left; }
@keyframes giftPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* several small reels at once (×3 / ×6 opening) */
.reel-wrap.mini { height: 86px; margin-bottom: 4px; }
.reel-wrap.mini .reel { gap: 6px; padding: 5px 0; }
.reel-wrap.mini .reel .car { width: 96px; padding: 4px 5px; border-radius: 10px; }
.reel-wrap.mini .reel .car .art { height: 40px !important; margin: 12px 0 1px !important; }
.reel-wrap.mini .reel .car .nm { font-size: 10.5px; }
.reel-wrap.mini .reel .car .tl { top: 4px; left: 4px; transform: scale(.85); transform-origin: top left; }
.reel-wrap.mini .part { --s: 34px; }

/* market: dealer block */
.dealer-head { margin-bottom: 8px; }
.dealer-head b { font-weight: 600; }
.chip.deal { background: #12301f; color: #6fe3a2; }

/* menu as grouped lists (TABS.menu) */
.mgroup { margin: 18px 4px 6px; font-size: 13px; color: var(--muted); }
.mgroup:first-child { margin-top: 4px; }
.menu-list .li { padding: 11px 14px; gap: 12px; }
.menu-list .mi { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; flex: none; background: var(--c); }
.menu-list .li b { font-weight: 500; font-size: 15.5px; font-family: var(--f-body); letter-spacing: 0; }
.menu-list .sub { color: var(--muted); font-size: 13px; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.menu-list .cnt { background: #ff3b30; color: #fff; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.menu-list .chev { color: #48484a; }

/* ---------- seasons, pass, VIP, shop, what's new ---------- */
.diff.train { color: #6cc4ff; border-color: #1d3d55; }
.season-card { display: block; width: 100%; text-align: left; margin-bottom: 14px; border-color: #4a3c10; background: linear-gradient(135deg, #2a2208, var(--card) 65%); }
.vipchip { color: var(--accent); border-color: #4a3c10; background: #2a2208; }
.prow { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 6px; align-items: stretch; margin-bottom: 6px; }
.prow.head { font: 600 11px var(--f-disp); letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin: 16px 0 6px; }
.prow.head span { display: flex; align-items: center; gap: 4px; }
.plvl { display: flex; align-items: center; justify-content: center; font: 700 14px var(--f-disp); color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); }
.prow.reached .plvl { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.prow.cur .plvl { box-shadow: 0 0 0 2px var(--accent-soft); }
.pcell { display: flex; align-items: center; gap: 6px; padding: 8px; min-height: 44px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 12px; line-height: 1.25; }
.pcell .i { color: var(--muted); }
.pcell.ready { border-color: var(--accent); background: linear-gradient(135deg, #2a2208, var(--card) 70%); }
.pcell.ready .i { color: var(--accent); }
.pcell.done { opacity: .45; }
.pcell.lock { opacity: .55; }
.season-car { border-color: #1d3d55; background: radial-gradient(ellipse at 50% 30%, #12304a, var(--card) 70%); }
.offer { border-color: #4a2a7a; background: linear-gradient(135deg, #24133d, var(--card) 70%); }
.offer-list, .vip-list { display: grid; gap: 6px; margin-top: 10px; font-size: 13px; }
.offer-list span, .vip-list span { display: flex; align-items: center; gap: 8px; }
.offer-list .i, .vip-list .i { color: var(--accent); }
.vip-card { border-color: #4a3c10; background: linear-gradient(135deg, #2a2208, var(--card) 70%); }
.story { position: fixed; inset: 0; z-index: 100; background: radial-gradient(ellipse at 50% 35%, #2a2208, #0b0c0f 70%); display: flex; flex-direction: column; padding: 14px 18px calc(22px + var(--safe-b)); max-width: 520px; margin: 0 auto; }
.story-bars { display: flex; gap: 4px; }
.story-bars i { flex: 1; height: 3px; border-radius: 2px; background: #ffffff2a; }
.story-bars i.done, .story-bars i.on { background: var(--accent); }
.story-skip { align-self: flex-end; margin-top: 10px; padding: 6px 10px; border-radius: 6px; background: #ffffff14; font-size: 13px; color: var(--muted); }
.story-body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 14px; }
.story-ic { font-size: 64px; color: var(--accent); display: flex; filter: drop-shadow(0 0 24px #f5b30166); }
.story-title { font-size: 30px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.story-text { font-size: 16px; color: #c9ced6; max-width: 360px; }

/* ---------- case hooks: reel prices, key fragments, visible guarantee ---------- */
.reel .car .price { font: 700 11px var(--f-disp); letter-spacing: .3px; margin-top: 1px; }
.reel-wrap.mini .reel .car .price { font-size: 10px; }
.reel .car.r3 .price, .reel .car.r4 .price { text-shadow: 0 0 10px currentColor; }
.hooks { display: grid; gap: 10px; }
.hook .row { font-size: 13px; }
.hook .row b { font-family: var(--f-disp); font-size: 15px; }
.frag-bar { height: 6px; margin: 6px 0; background: var(--card2); border-radius: 3px; overflow: hidden; }
.frag-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .5s; }
/* live feed of everyone's rare drops */
.feed { overflow: hidden; margin: -4px -16px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.feed-track { display: flex; gap: 28px; width: max-content; animation: feed 60s linear infinite; padding-left: 16px; }
.feed:hover .feed-track { animation-play-state: paused; }
@keyframes feed { to { transform: translateX(-50%); } }
.fi { white-space: nowrap; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.fi .fm { color: var(--c); font-weight: 700; }
.dayc { color: var(--accent); border-color: #4a3c10; background: #2a2208; }

/* ============================================================================================================
   v3 «Нічний паддок»: an asphalt-blue night garage. Every car stands under a spotlight on a floor lit in its class
   colour; timing-board yellow is the only accent; titles and numbers are a slanted condensed face (Fira Sans
   Condensed, self-hosted), body text stays Manrope. Overrides v1/v2 above; delete this block to go back to v2.
   Cheap-phone rules: no backdrop blur, no animated filters or big shadows in loops, motion off with reduced motion.
   ============================================================================================================ */
:root {
  --bg: #0b0f16;          /* asphalt at night */
  --bg-hi: #131a27;       /* floodlight wash at the top of the screen */
  --card: #141a24;        /* pit wall */
  --card2: #1c2330;       /* raised surface */
  --card3: #262f3f;       /* pressed / active */
  --line: #232c3b;
  --line2: #33405a;
  --text: #eef1f6;
  --muted: #8a94a7;
  --accent: #ffc400;      /* timing-board yellow */
  --accent-hi: #ffd84d;
  --accent-ink: #1a1300;
  --accent-soft: #ffc4001f;
  --green: #2fd27a;
  --red: #ff4d5a;
  --r: 14px; --r-sm: 10px;
  --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-disp: 'Fira Sans Condensed', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;
  --slant: skewX(-8deg);
  --tabs-h: 64px;
}
html, body { font: 500 14.5px/1.4 var(--f-body); }
body { background: radial-gradient(120% 340px at 50% -60px, var(--bg-hi), var(--bg) 70%) no-repeat, var(--bg); }
#app { padding-bottom: calc(var(--tabs-h) + 24px + var(--safe-b)); }

/* header: slanted condensed title like a livery number, balance as a yellow readout */
.top { background: linear-gradient(var(--bg) 72%, #0b0f1600); padding: 12px 16px 12px; }
.top h1 { font: 800 27px/1.05 var(--f-disp); letter-spacing: .2px; transform: var(--slant); transform-origin: left center; padding-right: 6px; }
.top h1.long { font-size: 22px; }
.iconbtn { width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); }
.balance { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 10px 7px 9px; color: var(--accent); font: 700 16.5px/1.2 var(--f-disp); letter-spacing: .2px; display: inline-flex; align-items: center; gap: 5px; }
.balance::before { content: ''; width: 6px; height: 13px; background: var(--accent); transform: skewX(-14deg); border-radius: 1px; }
.avatar .face { background: var(--card2); }
.avatar .lvl, .badge { border-radius: 4px; font-family: var(--f-disp); font-weight: 800; }
.avatar .lvl { border-color: var(--bg); }

/* bottom bar: docked, solid (no blur — cheap phones), icons back; «Кейси» is the raised main action */
.tabs { left: 0; right: 0; bottom: 0; transform: none; width: auto; max-width: none; border-radius: 0; gap: 0; border: 0; border-top: 1px solid var(--line);
  padding: 4px max(6px, calc(50% - 254px)) calc(4px + var(--safe-b)); background: #0e131b; backdrop-filter: none; -webkit-backdrop-filter: none; }
.tabs button { flex: 1; min-width: 0; padding: 7px 0 5px; font-size: 23px; gap: 3px; border: 0; border-radius: 0; color: var(--muted); }
.tabs button .i { display: block; }
.tabs button span { font: 600 11.5px var(--f-disp); letter-spacing: .3px; color: inherit; }
.tabs button.on { background: none; border: 0; color: var(--accent); }
.tabs button.on span { color: var(--accent); font-weight: 700; }
.tabs button.on::before { display: block; content: ''; position: absolute; top: -5px; left: 32%; right: 32%; height: 3px; background: var(--accent); transform: skewX(-24deg); border-radius: 1px; }
.tabs button[data-tab="cases"] .i { box-sizing: content-box; width: 26px; height: 26px; padding: 8px 12px; margin: -22px 0 0; border-radius: 12px; color: var(--accent-ink);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent)); box-shadow: 0 0 0 4px #0e131b, 0 8px 18px -6px #ffc40088; }
.tabs button[data-tab="cases"].on::before { display: none; }
.tabs button[data-tab="cases"]:not(.on) span { color: var(--text); }
.tabs .dot { top: 6px; right: calc(50% - 17px); border: 2px solid #0e131b; width: 10px; height: 10px; }
.mybar { bottom: calc(var(--tabs-h) + 8px + var(--safe-b)); }

/* type: section labels and numbers in the condensed face */
.h2 { font: 600 15px var(--f-disp); letter-spacing: .2px; color: var(--muted); margin: 22px 2px 9px; }
.big { font: 800 40px/1.05 var(--f-disp); letter-spacing: 0; transform: var(--slant); transform-origin: left; }
.disp { font-family: var(--f-disp); letter-spacing: .2px; }
.card, .list { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: inset 0 1px 0 #ffffff07; }
.li { border-top: 1px solid var(--line); }
.li .ic { background: var(--card2); border-radius: var(--r-sm); }
.chip { background: var(--card2); border: 0; border-radius: 5px; font-weight: 600; }

/* class badge: a slanted plate in the class colour */
.cls { border-radius: 3px; transform: skewX(-10deg); font: 800 12px/1 var(--f-disp); min-width: 21px; height: 19px; color: #0b0f16; box-shadow: inset 0 -2px 0 #0003; }

/* buttons: yellow with a lit top edge; sentence case in the condensed face */
.btn { font: 700 17.5px/1.15 var(--f-disp); letter-spacing: .3px; border-radius: 12px; padding: 14px; }
.btn, .btn.yellow { background: linear-gradient(180deg, var(--accent-hi), var(--accent) 55%, #f0b000); color: var(--accent-ink); box-shadow: inset 0 1px 0 #fff9, inset 0 -2px 0 #0002; }
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 #fff6; }
.btn.ghost { background: var(--card2); color: var(--text); border: 1px solid var(--line2); box-shadow: none; }
.btn.outline { background: transparent; color: var(--text); border: 1px solid var(--line2); box-shadow: none; }
.btn.red { background: transparent; color: #ff8a92; border: 1px solid #5a2430; box-shadow: none; }
.btn.green { background: var(--green); box-shadow: inset 0 1px 0 #fff6; }
.btn.sm { font-size: 15px; padding: 8px 13px; border-radius: 9px; }
.btn[disabled] { opacity: .4; }
/* A blocked main action (garage full, not enough money) wears hazard stripes instead of a faded yellow. */
#view > .btn[disabled]:not([data-act]) { opacity: 1; background: repeating-linear-gradient(-45deg, #241f10 0 12px, #18150c 12px 24px); color: #c9ad5a; border: 1px solid #3a3115; box-shadow: none; font-size: 16px; }
.btn.btn2 > small { font-family: var(--f-disp); font-size: 13.5px; }

/* segmented control: dark track, the active segment raised with a yellow underline */
.toggle { background: var(--card3); }
.toggle.on { background: var(--accent); }
.toggle.on::after { background: var(--accent-ink); }
.progress { height: 6px; border-radius: 3px; background: var(--card3); }
.progress > i { background: linear-gradient(90deg, #f0a800, var(--accent-hi)); border-radius: 3px; }

/* ---------- car cards: a bay in the paddock, the car on a pool of light in its class colour ---------- */
.car { background: var(--card); border: 0; border-radius: 12px; padding: 9px 11px 11px; box-shadow: inset 0 0 0 1px var(--line); }
.car::before { display: none; }
.car[style*="--c"] {
  background:
    radial-gradient(64% 17% at 50% var(--fy, 49%), color-mix(in srgb, var(--c) 55%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, var(--card)) 0%, var(--card) 62%);
  border: 0; border-left: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), inset 0 -3px 0 color-mix(in srgb, var(--c) 85%, transparent);
}
.car.r0[style*="--c"] {
  background: radial-gradient(64% 16% at 50% var(--fy, 49%), #9aa4b236, transparent 72%), var(--card);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 -3px 0 #9aa4b255;
}
.car.r3[style*="--c"], .car.r4[style*="--c"], .car.r5[style*="--c"] {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), inset 0 -3px 0 var(--c), 0 6px 22px -10px var(--c);
}
.car.sel[style*="--c"], .car.sel { box-shadow: inset 0 0 0 2px var(--accent), inset 0 -3px 0 var(--accent), 0 0 0 3px var(--accent-soft); }
.car .art { position: relative; }
.grid .car .art img, .carpick .car .art img, .multi .car .art img { filter: drop-shadow(0 5px 4px #0009); }
.car .nm { font: 600 16px/1.15 var(--f-disp); letter-spacing: .2px; }
.car .meta { font-size: 12px; }
.car .meta > b.disp { font: 700 16px var(--f-disp) !important; letter-spacing: .2px; }
.car .tl { top: 9px; left: 10px; }
.car .tr .chip { background: #0b0f16aa; }
.car .new { border-radius: 4px; font: 800 11px var(--f-disp); letter-spacing: .4px; transform: skewX(-10deg); }
.grid .car { min-height: 168px; --fy: 55%; }
.grid .car .art { height: 86px; margin: 14px 0 6px; }
.slot { border: 1px dashed var(--line2); border-radius: 12px; background: #141a2466; min-height: 168px; font-family: var(--f-disp); font-size: 14px; }
.slot.buy { border: 1px solid #4a3c10; background: linear-gradient(180deg, #2a2208, var(--card)); color: var(--accent); }
.slot b { font: 700 17px var(--f-disp); }
.tank i { height: 4px; border-radius: 1px; background: var(--card3); transform: skewX(-20deg); }
.tank i.on { background: var(--accent); }

/* ---------- case screen: a showroom spotlight over the reel / the drop ---------- */
.picker { background: var(--card); border: 1px solid var(--line); border-radius: 12px; font: 700 17px var(--f-disp); letter-spacing: .2px; padding: 9px 14px; }
.stage { height: 250px; background: none; isolation: isolate; }
.stage::before { content: ''; position: absolute; z-index: -1; top: -18px; left: 50%; width: 330px; height: calc(100% + 18px); transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, transparent, #ffffff10 28%, color-mix(in srgb, var(--c, #ffffff) 10%, transparent) 72%, transparent);
  clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%); }
.stage::after { content: ''; position: absolute; z-index: -1; left: 4%; right: 4%; bottom: 6px; height: 54px; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--c, #8a94a7) 30%, transparent), transparent 70%); }
.stage.lit::after { background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--c) 55%, transparent), transparent 70%); }

/* Car case screen (#stage only; the parts case keeps the plain cone above): a night showroom like the season car.
   ::before = haze + neon arc (a halo above the reel / behind the drop) + a ceiling rail with two mirrored lamps
   (one static SVG, the right lamp is a mirrored <use>); ::after = the floor: neon horizon line, glow, perspective grid.
   Idle it is yellow neon on violet haze; a drop (.lit, --c = best class colour) recolours neon and haze.
   No filters, no transforms: everything is static gradients; only opacity animates (pulse, reveal flare). */
#stage { --neon: #ffc400; --haze: #5b3df0; --arc-y: 224px; --arc-rx: 215px; --arc-ry: 205px; --hy: 206px; }
#stage.lit { --neon: var(--c); --haze: color-mix(in srgb, var(--c) 70%, #5b3df0); --arc-y: 160px; --arc-rx: 174px; --arc-ry: 141px; --hy: 128px; }
/* a new spin keeps .lit/--c of the last drop on #stage (only its content is swapped): back to the idle colours */
#stage.lit:has(> .reel-wrap) { --neon: #ffc400; --haze: #5b3df0; --arc-y: 224px; --arc-rx: 215px; --arc-ry: 205px; --hy: 206px; }
#stage::before { content: ''; position: absolute; z-index: -1; top: -8px; left: -16px; right: -16px; width: auto; height: 300px; transform: none; clip-path: none; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='390' height='240' viewBox='0 0 390 240'%3E%3Cdefs%3E %3ClinearGradient id='b' x1='0' y1='11' x2='0' y2='226' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff8e1' stop-opacity='.55'/%3E%3Cstop offset='.45' stop-color='%23eef2ff' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%23eef2ff' stop-opacity='0'/%3E%3C/linearGradient%3E %3ClinearGradient id='k' x1='-8' y1='0' x2='8' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2311161d'/%3E%3Cstop offset='.45' stop-color='%234a5664'/%3E%3Cstop offset='1' stop-color='%23151b23'/%3E%3C/linearGradient%3E %3Cg id='l'%3E%3Crect x='25' y='3' width='10' height='4' rx='1' fill='%232c3542'/%3E%3Cpath d='M30 6V11' stroke='%232c3542' stroke-width='2.6'/%3E %3Cg transform='translate(30 16) rotate(-57.3)'%3E%3Cpath d='M-13 11L13 11L60 226L-60 226Z' fill='url(%23b)' opacity='0.16'/%3E%3Cpath d='M-8 11L8 11L40 226L-40 226Z' fill='url(%23b)' opacity='0.26'/%3E%3Cpath d='M-4 11L4 11L20 226L-20 226Z' fill='url(%23b)' opacity='0.34'/%3E %3Cpath d='M-10 2V-6A10 6 0 0 1 10 -6V2' fill='none' stroke='%232c3542' stroke-width='2'/%3E%3Ccircle cx='-10' cy='1' r='1.6' fill='%2355606e'/%3E%3Ccircle cx='10' cy='1' r='1.6' fill='%2355606e'/%3E %3Crect x='-7.5' y='-9' width='15' height='17' rx='3.5' fill='url(%23k)'/%3E%3Crect x='-9' y='6' width='18' height='4.5' rx='1.6' fill='%23232b35'/%3E %3Ccircle cy='11' r='11' fill='%23fff3c4' opacity='.1'/%3E%3Ccircle cy='11' r='6' fill='%23fff3c4' opacity='.22'/%3E%3Cellipse cy='10.6' rx='7.4' ry='2.2' fill='%23fffbea'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E %3Crect x='10' y='0' width='370' height='4.5' rx='2' fill='%231c232d'/%3E%3Cpath d='M10 5H380' stroke='%238494ff' stroke-opacity='.35' stroke-width='.6'/%3E %3Cuse xlink:href='%23l'/%3E%3Cuse xlink:href='%23l' transform='translate(390 0) scale(-1 1)'/%3E%3C/svg%3E") 50% 0 / 390px 240px no-repeat,
    radial-gradient(var(--arc-rx) var(--arc-ry) at 50% 100%, transparent calc(100% - 2.2px), color-mix(in srgb, var(--neon) 40%, #fff) calc(100% - 1.4px), var(--neon) calc(100% - .8px), transparent 100%) 0 0 / 100% var(--arc-y) no-repeat,
    radial-gradient(var(--arc-rx) var(--arc-ry) at 50% 100%, transparent calc(100% - 9px), color-mix(in srgb, var(--neon) 22%, transparent) calc(100% - 1px), transparent calc(100% + 6px)) 0 0 / 100% var(--arc-y) no-repeat,
    radial-gradient(70% 46% at 50% 44%, color-mix(in srgb, var(--haze) 42%, transparent), color-mix(in srgb, var(--haze) 14%, transparent) 55%, transparent 80%);
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
#stage::after { content: ''; position: absolute; z-index: -1; top: var(--hy); bottom: auto; left: -16px; right: -16px; height: 74px; pointer-events: none;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--neon) 85%, transparent) 22% 78%, transparent) 0 0 / 100% 1.5px no-repeat,
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--neon) 30%, transparent) 50%, transparent) 0 -5px / 100% 11px no-repeat,
    radial-gradient(48% 70% at 50% 0, color-mix(in srgb, var(--neon) 22%, transparent), transparent 75%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='90' viewBox='0 0 390 90'%3E%3Cpath d='M41.0 0L-449 90M52.0 0L-403 90M63.0 0L-357 90M74.0 0L-311 90M85.0 0L-265 90M96.0 0L-219 90M107.0 0L-173 90M118.0 0L-127 90M129.0 0L-81 90M140.0 0L-35 90M151.0 0L11 90M162.0 0L57 90M173.0 0L103 90M184.0 0L149 90M195.0 0L195 90M206.0 0L241 90M217.0 0L287 90M228.0 0L333 90M239.0 0L379 90M250.0 0L425 90M261.0 0L471 90M272.0 0L517 90M283.0 0L563 90M294.0 0L609 90M305.0 0L655 90M316.0 0L701 90M327.0 0L747 90M338.0 0L793 90M349.0 0L839 90M0 2H390M0 5H390M0 9H390M0 14H390M0 20H390M0 28H390M0 38H390M0 51H390M0 68H390M0 89H390' stroke='%238494ff' stroke-opacity='.5' stroke-width='.7' fill='none'/%3E%3C/svg%3E") 50% 0 / 390px 90px no-repeat;
  -webkit-mask-image: radial-gradient(62% 120% at 50% 0, #000 45%, transparent 100%); mask-image: radial-gradient(62% 120% at 50% 0, #000 45%, transparent 100%);
  animation: cbPulse 3.6s ease-in-out infinite; }
/* ×3/×6: reels and tiles fill the stage, so the floor goes under the bottom edge */
#stage.lit:has(> .reel-wrap.mini), #stage:has(> .reel-wrap.mini) { --hy: calc(100% - 24px); }
#stage.lit:has(> .multi) { --hy: calc(100% - 37px); --arc-y: 224px; --arc-rx: 215px; --arc-ry: 205px; }
#stage.lit:has(.art.reveal)::before, #stage.lit:has(.multi .flip-in)::before { animation: cbFlare .9s ease-out both; }
@keyframes cbPulse { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
@keyframes cbFlare { 0% { opacity: .25; } 35% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #stage::before, #stage::after { animation: none !important; } }

/* the reel: cards on a strip, a yellow gate marks where it stops */
.reel-wrap { height: 154px; }
.reel { gap: 8px; padding: 14px 0; }
.reel .car { width: 132px; padding: 7px 8px 9px; border-radius: 11px; }
.reel .car .art { height: 68px; margin: 12px 0 4px; }
.reel .car .nm { font-size: 13.5px; }
.reel .car .price { font: 700 13px var(--f-disp); }
.reel-wrap::after { top: 0; bottom: 0; width: 22px; margin-left: -11px; background: var(--accent); box-shadow: none;
  clip-path: polygon(0 0, 100% 0, calc(50% + 1.5px) 13px, calc(50% + 1.5px) calc(100% - 13px), 100% 100%, 0 100%, calc(50% - 1.5px) calc(100% - 13px), calc(50% - 1.5px) 13px); z-index: 4; }
.reel-wrap.spinning::after { animation: none; }
.reel-wrap.spinning .reel .car { filter: none; }   /* no per-card blur while spinning: too heavy on cheap phones */
.reel .car.winner { transform: translateY(-5px) scale(1.08);
  box-shadow: inset 0 0 0 2px var(--c), inset 0 -4px 0 var(--c), 0 14px 30px -8px var(--c) !important; }
.reel .car.winner.r3, .reel .car.winner.r4, .reel .car.winner.r5 { animation: winPulse .9s ease-out 2; }
@keyframes winPulse { 50% { transform: translateY(-7px) scale(1.12); } }
.reel-wrap.mini { height: 96px; }
.reel-wrap.mini::after { width: 16px; margin-left: -8px; clip-path: polygon(0 0, 100% 0, calc(50% + 1px) 9px, calc(50% + 1px) calc(100% - 9px), 100% 100%, 0 100%, calc(50% - 1px) calc(100% - 9px), calc(50% - 1px) 9px); }
.reel-wrap.mini .reel { padding: 8px 0; }

/* the drop: car on a lit floor, name slanted like a livery */
.reveal-wrap { height: 160px; }
.reveal-wrap::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: 0; height: 34px; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--c, #fff) 70%, transparent), transparent 72%); }
.reveal-wrap .art img { filter: drop-shadow(0 8px 6px #000b); }
.reveal-wrap .art img.glow { filter: drop-shadow(0 8px 6px #000b) drop-shadow(0 0 16px color-mix(in srgb, var(--c) 60%, transparent)); }
.result-name { font: 800 31px/1.05 var(--f-disp); letter-spacing: .2px; transform: var(--slant); margin-top: 4px; }
.result-name.pop { animation: nameIn .5s .25s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes nameIn { from { transform: var(--slant) translateX(-24px); opacity: 0; } }
.stage .chip { font-family: var(--f-disp); font-size: 13px; letter-spacing: .2px; }
.reveal-wrap.r3 ~ .result-name, .reveal-wrap.r4 ~ .result-name, .reveal-wrap.r5 ~ .result-name { text-shadow: none; }
.multi { gap: 7px; }
.multi .car .art { height: 58px; margin: 16px 0 3px; }
.dropsell { background: var(--card); border: 1px solid var(--line); font: 700 13.5px var(--f-disp); border-radius: 8px; }
.hook .row b { font: 700 16px var(--f-disp); }
.frag-bar { height: 6px; background: var(--card3); }
.frag-bar i { background: linear-gradient(90deg, #f0a800, var(--accent-hi)); }
.feed { border-bottom-color: var(--line); }

/* ---------- car sheet: the car under a spotlight, stats as a timing board ---------- */
.sheet { background: #10151e; border-top: 1px solid var(--line2); border-radius: 18px 18px 0 0; }
.sheet .list, .sheet .card, .sheet .stat, .sheet input, .sheet .trade-side { background: var(--card); }
.sheet .li .ic, .sheet .btn.ghost { background: var(--card2); }
.sheet-head h3 { font: 800 21px/1.1 var(--f-disp); letter-spacing: .2px; transform: var(--slant); }
.sheet-head .x { background: var(--card2); border-radius: 10px; }
.hero { height: 170px; isolation: isolate; }
.hero::before { content: ''; position: absolute; z-index: -1; top: -14px; left: 50%; width: 300px; height: calc(100% + 14px); transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, transparent, #ffffff0e 30%, color-mix(in srgb, var(--c, #fff) 12%, transparent) 75%, transparent); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); }
.hero::after { content: ''; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: 2px; height: 30px; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--c, #fff) 55%, transparent), transparent 72%); }
.hero .art img { filter: drop-shadow(0 8px 6px #000b); }
.stat { background: var(--line); border: 1px solid var(--line); border-radius: 12px; }
.stat div { background: var(--card); padding: 11px 2px 9px; }
.stat b { font: 700 18px/1.15 var(--f-disp); letter-spacing: .1px; white-space: nowrap; }
.stat span { font-size: 11px; text-transform: none; letter-spacing: 0; }

/* ---------- races ---------- */
.carpick { gap: 8px; }
.carpick .car { width: 136px; padding: 8px 9px 10px; }
.carpick .car .art { height: 58px; margin: 12px 0 4px; }
.carpick .car .nm { font-size: 14.5px; }
.carpick .car .meta { font-size: 11px; }
.carpick .car .meta > b.disp { font-size: 14px !important; white-space: nowrap; }
.carpick .car .meta > span { white-space: nowrap; }
.rival { padding: 12px 14px; border-top: 1px solid var(--line); }
.rival .center b.win { font: 700 17px var(--f-disp); white-space: nowrap; }
.rival .center { flex: none; }
.diff { font: 700 12px var(--f-disp); border-radius: 4px; letter-spacing: .3px; transform: skewX(-8deg); display: inline-block; }

/* ---------- leaderboard: the podium rows carry their medal colour ---------- */
.lb { padding: 12px 14px; }
.lb .pl { width: 30px; font: 800 17px var(--f-disp); transform: var(--slant); }
.lb b { font: 700 17px var(--f-disp); }
.lb:has(.m1) { background: linear-gradient(90deg, #ffc40024, transparent 70%); }
.lb:has(.m2) { background: linear-gradient(90deg, #c4c9d21c, transparent 70%); }
.lb:has(.m3) { background: linear-gradient(90deg, #c98a521f, transparent 70%); }
.lb.me { box-shadow: inset 3px 0 0 var(--accent); }
.medal { border-radius: 4px; transform: skewX(-10deg); font: 800 14px var(--f-disp); width: 24px; height: 24px; }
.prizes { background: var(--line); border-radius: 10px; }
.prizes div { background: var(--card2); font: 700 13.5px var(--f-disp); padding: 9px 2px; white-space: nowrap; }
.mybar { background: var(--card2); border: 1px solid var(--line2); border-left: 0; border-radius: 12px; box-shadow: inset 4px 0 0 var(--accent), 0 10px 26px -8px #000; font: 700 17px var(--f-disp); }

/* ---------- season pass: the premium lane is gold, reached levels light up ---------- */
.season-card { border: 1px solid #4a3c10; background: linear-gradient(120deg, #2b2309, var(--card) 60%); }
.season-car { border: 1px solid #1d3d55; background: radial-gradient(70% 55% at 50% 45%, #13304a, var(--card) 75%); }
.season-car > b { font: 800 22px/1.15 var(--f-disp) !important; transform: var(--slant); display: inline-block; }
.prow { grid-template-columns: 36px 1fr 1fr; }
.prow.head { font: 700 13px var(--f-disp); letter-spacing: .3px; text-transform: none; }
.plvl { font: 800 16px var(--f-disp); border-radius: 8px; background: var(--card); border: 1px solid var(--line); }
.prow.reached .plvl { transform: skewX(-8deg); }
.pcell { border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-size: 12.5px; font-weight: 600; }
.prow > .pcell:last-child { background: linear-gradient(135deg, #261f0b, var(--card) 75%); border-color: #3b3112; }
.prow > .pcell:last-child .i { color: #c9a640; }
.pcell.ready { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pcell.lock { opacity: .7; }
.pcell.done { opacity: .4; }

/* ---------- store & menu ---------- */
.offer { border: 1px solid #4a2a7a; background: linear-gradient(135deg, #26143f, var(--card) 70%); }
.vip-card { border: 1px solid #4a3c10; background: linear-gradient(135deg, #2b2309, var(--card) 70%); }
.offer b.disp, .vip-card b.disp { transform: var(--slant); display: inline-block; }
.menu-list .li b { font: 600 17px var(--f-disp); letter-spacing: .2px; }
.menu-list .mi { border-radius: 9px; }
.mgroup { font: 600 15px var(--f-disp); letter-spacing: .2px; }
.toast { border-radius: 12px; background: var(--card2); border: 1px solid var(--line2); border-left: 0; box-shadow: inset 4px 0 0 var(--accent), 0 10px 30px #000a; font-family: var(--f-disp); font-size: 16px; }
.toast.err { box-shadow: inset 4px 0 0 var(--red), 0 10px 30px #000a; }
.banner { background: #1a2130f2; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* motion is decoration here: switch the loops off for people who ask for less */
@media (prefers-reduced-motion: reduce) {
  .feed-track, .fx-rays, .shimmer, .reel .car.winner, .result-name.pop, .pop, .pop2, .flip-in, .reveal { animation: none !important; }
  .reel { transition-duration: 1ms !important; }
}

/* fixes after the first screenshot pass */
.multi .car .meta > b.disp { font-size: 13.5px !important; }
.multi .car .meta > span { font-size: 10.5px; }
.pcase { background: var(--card); border: 1px solid var(--line); }
.pcase.on { border-color: var(--accent); background: linear-gradient(180deg, #2a2208, var(--card)); box-shadow: inset 0 0 0 1px var(--accent); }
.pcase b { font: 700 16px var(--f-disp); }
.pcase .pprice { font: 600 14px var(--f-disp); }
.ptype.on { color: var(--accent); }
.ptype.on .part { box-shadow: 0 0 0 2px var(--accent); }
.stat.four b { font-size: 16.5px; }
.hero::after { bottom: 16px; }
/* a main action that is only busy (case spinning) goes neutral instead of a muddy yellow */
#view > .btn[disabled][data-act] { opacity: 1; background: var(--card2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line2); }

/* ---------- UX pass (audit 2-ux): names, inputs, disabled states, narrow screens ---------- */
/* car names: up to two lines instead of «Lamborghini Ave…» */
.clamp2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: break-word; }
.li > .grow { min-width: 0; }
.car .nm.clamp2 { line-height: 1.12; min-height: 2.24em; display: -webkit-box; align-content: end; }
.multi .car .nm.clamp2, .reel .car .nm.clamp2 { min-height: 0; }
/* inputs inside cards were the same colour as the card: give them a well and a border */
.card input, .card select, .sheet input, .sheet select { background: var(--bg); border: 1px solid var(--line2); }
.card input:focus, .sheet input:focus, .card select:focus { border-color: var(--accent); }
select { -webkit-appearance: none; appearance: none; width: 100%; font: inherit; color: var(--text); border-radius: var(--r-sm); padding: 12px 36px 12px 12px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238c96a8' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center; border: 1px solid var(--line2); }
.fld { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.fld + input { margin-top: 0; }
/* disabled = grey, never a muddy yellow that reads as tappable */
.btn[disabled], .btn.yellow[disabled], .btn.red[disabled] { opacity: 1; background: var(--card2) !important; color: var(--muted) !important; box-shadow: inset 0 0 0 1px var(--line2) !important; text-shadow: none; }
/* garage: one tile for all free places instead of a wall of empty ones */
.slot.free { min-height: 0; padding: 18px 10px; gap: 2px; }
.slot.free b { font-size: 22px; color: var(--text); }
.slot.free .tiny { color: var(--accent); margin-top: 4px; }
/* rivals: text column may shrink and wrap, the prize column keeps its size */
.rival .grow { min-width: 0; }
.rival .grow > .small.ellipsis { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.rival .grow > .row { flex-wrap: wrap; row-gap: 4px; }
.rival > .center { flex: none; max-width: 40%; text-align: right; }
/* space between the case stage / result and the ×N switch */
.stage + .seg, .multi + .seg, .pstage { margin-top: 14px; }
@media (max-width: 360px) {
  .top { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .top h1 { font-size: 22px; }
  .top h1.long { font-size: 18px; }
  .balance { font-size: 14.5px; padding: 6px 8px; }
  .iconbtn { width: 34px; height: 34px; }
  .rival { gap: 8px; padding: 12px 10px; }
  .rival .mini { width: 64px; height: 34px; }
  .li { gap: 10px; padding-left: 12px; padding-right: 12px; }
  .li .mini { width: 60px; height: 32px; }
  /* a car row inside a card next to a button (PvP «Змінити»): no room for the picture, keep the name readable */
  .card .list .li:has(> .btn) > .mini { display: none; }
  .rival .center b.win { font-size: 15px; }
  .multi .car .meta > span:first-child { display: none; }
  .multi .car .meta { justify-content: flex-end; }
}
/* ===== newbie: first-steps hint card + highlighted target (app.js paintGuide) ===== */
.guide { margin: 0 0 12px; padding: 10px 12px 12px; border-radius: var(--r-sm, 12px); background: linear-gradient(135deg, #2a2208, var(--card2)); border: 1px solid #f5b30155; animation: guideIn .35s ease-out; }
.guide-dots { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.guide-dots i { width: 16px; height: 4px; border-radius: 2px; background: #ffffff22; }
.guide-dots i.done { background: #34c759; }
.guide-dots i.on { background: var(--accent); }
.guide-dots span { margin-left: 6px; flex: 1; text-transform: uppercase; letter-spacing: .5px; }
.guide-x { padding: 2px 4px; color: var(--muted); font-size: 14px; display: inline-flex; }
.guide-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.guide-row[data-act] { cursor: pointer; }
.guide-row .small { color: #c9ced6; }
.guide-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; transform: rotate(90deg); animation: guideNudge 1.2s ease-in-out infinite; }
.guide-row[data-act] .guide-ic { transform: none; }
.guide-claim { width: 100%; max-width: 100%; box-sizing: border-box; margin-top: 10px; }
.guide-hi { position: relative; z-index: 1; outline: 2px solid var(--accent); outline-offset: 3px; animation: guidePulse 1.4s ease-in-out infinite; }
.tabs button.guide-hi { color: var(--accent); }
/* inside a clipped list / the tab bar the ring goes inward */
.tabs button.guide-hi, .rival.guide-hi { animation-name: guidePulseIn; }
.rival.guide-hi { border-radius: 12px; }
@keyframes guidePulse { 0%, 100% { outline-color: #f5b301; outline-offset: 2px; } 50% { outline-color: #f5b30144; outline-offset: 6px; } }
@keyframes guidePulseIn { 0%, 100% { outline-color: #f5b301; outline-offset: -2px; } 50% { outline-color: #f5b30155; outline-offset: -5px; } }
@keyframes guideNudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 3px; } }
@keyframes guideIn { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .guide, .guide-ic, .guide-hi { animation: none; } }
/* first steps as a slim pill (~36 px) that expands on tap; it replaced the ~150 px card on every page */
.guide.pill { margin: 0 0 10px; padding: 0; overflow: hidden; }
.guide-bar { display: flex; align-items: stretch; }
.guide-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; text-align: left; color: var(--text); }
.guide.pill .guide-dots { flex: none; gap: 3px; }
.guide.pill .guide-dots i { width: 10px; height: 4px; }
.guide-t { flex: 1; min-width: 0; font: 600 13.5px/1.2 var(--f-disp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guide-t b { color: var(--accent); margin-right: 2px; }
.guide-to { color: var(--accent); }
.guide-to .i { vertical-align: -2px; margin-right: 2px; }
.guide-chev { flex: none; display: inline-flex; color: var(--muted); font-size: 15px; transition: transform .2s; }
.guide-main[data-act="guideToggle"] .guide-chev { transform: rotate(90deg); }
.guide.open .guide-chev { transform: rotate(-90deg) !important; }
.guide-gift { flex: none; display: inline-flex; align-items: center; gap: 3px; margin: 5px 6px 5px 0; padding: 0 9px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 12.5px var(--f-disp); }
.guide-more { padding: 0 12px 10px; }
.guide-more .small { color: #c9ced6; }
.guide-off { margin-top: 6px; padding: 0; color: var(--muted); font-size: 12px; text-decoration: underline; }
/* the tab to go to gets a small pulsing dot, not the ring + yellow that looked like a second active tab */
.tabs button.guide-hi { outline: none; animation: none; color: inherit; }
.tabs button.guide-hi::after { content: ''; position: absolute; top: 4px; left: calc(50% + 10px); width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); animation: guideDot 1.4s ease-in-out infinite; }
@keyframes guideDot { 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .tabs button.guide-hi::after { animation: none; } }
/* reward / event banners slide in under the header, never over the title and the balance */
#banners { top: calc(env(safe-area-inset-top, 0px) + 66px); }
/* header avatar: the Telegram photo, or two letters in the body font — never a lone letter that reads as a class */
.avatar .face { font: 600 12.5px var(--f-body); letter-spacing: -.2px; overflow: hidden; }
.avatar .face.photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* honest value: what a sale actually gives, next to the value */
.drop-sell { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 4px; font-size: 13px; color: var(--muted); }
.drop-sell > span:first-child { display: inline-flex; align-items: center; gap: 4px; }
.drop-sell b { color: var(--text); font: 700 15px var(--f-disp); }
.drop-sell .xmult { font-size: 12.5px; }
.multi-sum b small { font: 600 12.5px var(--f-body); color: var(--muted); }
.car .meta.sellp { margin-top: 1px; font-size: 11px; text-align: right; color: var(--muted); }
.stat .val .sellp { display: block; margin-top: 1px; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.garage-h small.sellp { font: 500 12px var(--f-body); color: var(--muted); }
.ptype-tag { display: block; font-size: 9.5px; line-height: 1.1; color: #8a94a7; text-align: center; }
.pcard .meta.ptype-tag { font-size: 10.5px; color: #ff9f0a; }
/* ---------- weekly route (Завдання → Тиждень) and the comeback window ---------- */
.wk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wk-day { aspect-ratio: 1; max-width: 40px; margin: 0 auto; width: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--card2); border: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--muted); }
.wk-day.on { background: var(--accent); border-color: var(--accent); color: #111; font-size: 16px; }
.wk-day.today { box-shadow: 0 0 0 2px var(--accent-soft); border-color: var(--accent); }
.wk-track { position: relative; padding-bottom: 18px; }
.wk-track .progress { height: 6px; border-radius: 3px; }
.wk-mark { position: absolute; top: 9px; transform: translateX(-50%); font-size: 10.5px; font-weight: 700; color: var(--muted); }
.wk-mark:last-child { transform: translateX(-100%); }
.wk-chest { align-items: center; gap: 12px; }
.wk-chest .wk-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 21px; background: var(--card2); color: var(--muted); }
.wk-chest.ready { border-color: var(--accent); }
.wk-chest.ready .wk-ic { background: var(--accent); color: #111; }
.cb-list { display: grid; gap: 8px; text-align: left; max-width: 300px; margin-left: auto; margin-right: auto; }
.cb-list > div { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--card2); font-size: 14px; }

/* ============================================================================================================
   d1 «Світло класу»: premium pass over the core loop (cases → reel → drop → garage → car sheet).
   One idea carries it: every class has its own lighting rig, like cars on a motor-show stand.
     D — a dim work lamp: matte steel, no halo.         C — a cold blue edge light.
     B — purple neon on the floor.                      A — gold: a polished metal frame and a warm halo.
     S — red: the metal frame, a hot halo and the strongest floor light.
   Surfaces get a lit top edge and a soft drop so they sit above the asphalt. Motion is transform/opacity only,
   no blur, and everything that loops stops under prefers-reduced-motion.
   ============================================================================================================ */
:root {
  --t-xs: 11px; --t-sm: 12.5px; --t-md: 14.5px; --t-lg: 17px; --t-xl: 22px; --t-2xl: 30px;
  --edge: inset 0 1px 0 #ffffff12;
  --drop: 0 12px 24px -16px #000;
  --surf: linear-gradient(180deg, #171e2b, #121823);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.2, 1.45, .4, 1);
}

/* ---------- press states: everything tappable answers the finger ---------- */
.btn, .car, .slot, .picker, .ptile, .iconbtn, .dropsell, .chips button, .seg button, .gsort, .toggle { transition: transform .14s var(--ease), box-shadow .2s, background-color .2s, opacity .2s; }
.btn:active, .slot:active, .picker:active, .ptile:active, .iconbtn:active, .dropsell:active, .gsort:active { transform: scale(.97); }
button.car:active { transform: scale(.965); }
.chips button:active, .seg button:active { transform: scale(.94); }
.li { transition: background-color .15s; }
button.li:active { background-color: #ffffff08; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- car tiles: a lit bay per class ---------- */
.car[style*="--c"] {
  background:
    radial-gradient(56% 13% at 50% var(--fy, 52%), color-mix(in srgb, var(--c) 62%, transparent), transparent 76%),
    radial-gradient(90% 46% at 50% 0%, color-mix(in srgb, var(--c) 20%, transparent), transparent 72%),
    linear-gradient(180deg, #171e2b, #0f141d 78%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, #ffffff08), inset 0 1px 0 #ffffff14, inset 0 -3px 0 color-mix(in srgb, var(--c) 80%, transparent), var(--drop);
}
.car.r0[style*="--c"] {   /* D: work lamp — steel, no colour cast */
  background: radial-gradient(52% 11% at 50% var(--fy, 52%), #a7b0bd2e, transparent 76%), linear-gradient(180deg, #161b24, #10141b 78%);
  box-shadow: inset 0 0 0 1px #ffffff0d, inset 0 1px 0 #ffffff0f, inset 0 -2px 0 #9aa4b240, var(--drop);
}
.car.r0 .nm { color: #d5dae2; }
.car.r2[style*="--c"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 42%, transparent), inset 0 1px 0 #ffffff18, inset 0 -3px 0 var(--c), 0 10px 22px -14px color-mix(in srgb, var(--c) 70%, #000); }
.car.r3[style*="--c"], .car.r4[style*="--c"], .car.r5[style*="--c"] {
  background:
    radial-gradient(60% 15% at 50% var(--fy, 52%), color-mix(in srgb, var(--c) 78%, transparent), transparent 76%),
    radial-gradient(100% 55% at 50% 0%, color-mix(in srgb, var(--c) 30%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, #171e2b), #0f141d 78%);
  box-shadow: inset 0 -3px 0 var(--c), 0 12px 26px -12px color-mix(in srgb, var(--c) 80%, #000);
}
.car.r4[style*="--c"] { box-shadow: inset 0 -3px 0 var(--c), 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent), 0 14px 32px -10px var(--c); }
/* A/S: a polished metal frame (one static masked layer, not repainted while scrolling) */
.car.r3::before, .car.r4::before, .car.r5::before { content: ''; display: block; position: absolute; inset: 0; top: 0; height: auto; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: linear-gradient(155deg, #ffffffd9 0%, var(--c) 20%, color-mix(in srgb, var(--c) 30%, #000) 50%, var(--c) 80%, #ffffffb3 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.reel .car::before { display: none !important; }   /* 46 cards in motion: keep them cheap */
.car.r3 .meta > b.disp, .car.r4 .meta > b.disp, .car.r5 .meta > b.disp { color: color-mix(in srgb, var(--c) 45%, #fff) !important; }
.car .cls { box-shadow: inset 0 -2px 0 #0003, 0 2px 6px -2px #000; }
.car.r3 .cls, .car.r4 .cls, .car.r5 .cls { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000)) !important; }
.car .tr .chip { background: #0b0f16b3; box-shadow: inset 0 0 0 1px #ffffff0f; color: #aab3c2; }
.car .new { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); box-shadow: 0 2px 8px -2px #ffc40088; }
.car.sel[style*="--c"], .car.sel { box-shadow: inset 0 0 0 2px var(--accent), inset 0 -3px 0 var(--accent), 0 0 0 3px var(--accent-soft) !important; }

/* ---------- cases: case card, live feed ---------- */
.casebar { display: flex; gap: 8px; align-items: stretch; margin-top: 2px; }
.picker { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 9px 12px 9px 9px; text-align: left; text-transform: none;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c, #ffc400) 16%, transparent), transparent 60%), var(--surf); border: 0; border-radius: 14px;
  box-shadow: inset 0 0 0 1px #ffffff10, var(--edge), var(--drop); }
.picker-ic { flex: none; width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px;
  color: var(--c, var(--accent)); background: color-mix(in srgb, var(--c, #ffc400) 16%, #0e131b); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #ffc400) 40%, transparent), inset 0 1px 0 #ffffff1a; }
.picker-ic .i { color: inherit; }
.picker-ic .flag-emb { width: 28px; height: 28px; }
.picker-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.picker-tx > b { font: 800 19px/1.05 var(--f-disp); letter-spacing: .1px; transform: var(--slant); transform-origin: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 4px; }
.picker-sub .chip.dayc { padding: 2px 6px; font: 700 11.5px var(--f-disp); }
.picker-chev { flex: none; color: var(--muted); display: inline-flex; transform: rotate(90deg); font-size: 18px; }
.casebar .iconbtn { width: 48px; height: auto; border-radius: 14px; font-size: 21px; background: var(--surf); border: 0; box-shadow: inset 0 0 0 1px #ffffff10, var(--edge), var(--drop); color: var(--muted); }
.odds { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.odds-bar { display: flex; gap: 1.5px; width: 66px; height: 5px; border-radius: 3px; overflow: hidden; flex: none; background: #0b0f16; }
.odds-bar i { display: block; height: 100%; min-width: 2px; }
.odds-top { font: 700 12.5px var(--f-disp); letter-spacing: .2px; white-space: nowrap; }
.feed { margin: -4px -16px 12px; padding: 7px 0; border-bottom: 0; background: linear-gradient(90deg, #ffffff03, #ffffff08, #ffffff03); box-shadow: inset 0 -1px 0 var(--line); }
.feed-track { gap: 10px; }
.fi { padding: 3px 9px 3px 7px; border-radius: 999px; background: #0e131b; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); font-size: 12px; }
.fi b { font-weight: 700; color: #cdd3dd; }
.fi .cls { min-width: 17px; height: 15px; font-size: 10.5px; }

/* ---------- stage & reel ---------- */
.stage { margin: 8px 0 6px; }
.stage::after { height: 64px; bottom: 0; }
.reel-wrap { background: linear-gradient(180deg, transparent 6px, #ffffff07 6px 7px, transparent 7px calc(100% - 7px), #ffffff07 calc(100% - 7px) calc(100% - 6px), transparent calc(100% - 6px)); }
.reel .car { border-radius: 12px; }
.reel .car .nm { font: 600 13.5px/1.15 var(--f-disp); }
.reel .car .price { font: 800 13.5px var(--f-disp); letter-spacing: .2px; }
.reel .car.r3 .price, .reel .car.r4 .price { text-shadow: none; }
.reel .car.r3[style*="--c"], .reel .car.r4[style*="--c"], .reel .car.r5[style*="--c"] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 75%, #fff3), inset 0 -3px 0 var(--c); }
.reel-wrap::after { filter: drop-shadow(0 0 5px #ffc400a0); transition: background-color .3s; }
.reel-wrap.mini::after { filter: none; }
/* the stop: the strip dims, the winner stays lit, a rare winner recolours the gate */
.reel .car { transition: opacity .45s var(--ease); }
.reel-wrap.stopped .reel .car:not(.winner) { opacity: .32; }
.reel-wrap.stopped.r2::after, .reel-wrap.stopped.r3::after, .reel-wrap.stopped.r4::after, .reel-wrap.stopped.r5::after { background: var(--c); filter: drop-shadow(0 0 7px var(--c)); }
.reel .car.winner { transform: translateY(-6px) scale(1.1); }
.reel-wrap.mini .reel .car.winner { transform: translateY(-2px) scale(1.06); }
.reel-wrap.mini { height: 98px; margin-bottom: 6px; }
.reel-wrap.mini .reel .car .price { font-size: 11px; }

/* ---------- the drop: hierarchy by class ---------- */
.reveal-wrap { height: 172px; }
.reveal-wrap::after { left: 10%; right: 10%; height: 30px; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--c, #fff) 55%, transparent), transparent 72%); }
.reveal-wrap.r0::after { background: radial-gradient(50% 50% at 50% 50%, #9aa4b240, transparent 72%); }
.reveal-wrap.r2::after { left: 4%; right: 4%; height: 36px; }
.reveal-wrap.r3::after, .reveal-wrap.r4::after, .reveal-wrap.r5::after { left: -4%; right: -4%; height: 44px; bottom: -4px; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--c) 90%, #fff), color-mix(in srgb, var(--c) 40%, transparent) 40%, transparent 72%); }
.result-name { font-size: 28px; margin-top: 6px; }
.result-name.r0 { font-size: 25px; color: #dfe4ec; }
.result-name.r2 { font-size: 30px; }
.result-name.r3, .result-name.r4, .result-name.r5 { font-size: 34px; }
.newtag { display: inline-flex; align-items: center; gap: 5px; margin: 2px auto 0; padding: 3px 10px 3px 8px; border-radius: 5px; transform: var(--slant);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: var(--accent-ink); font: 800 13.5px/1.2 var(--f-disp); letter-spacing: .2px; box-shadow: 0 4px 14px -4px #ffc40099; }
.newtag.pop { animation: tagIn .5s .55s var(--spring) both; }
@keyframes tagIn { from { transform: var(--slant) translateY(8px) scale(.6); opacity: 0; } }
.rarity-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rarity-row .chip { height: 26px; padding: 0 9px; font: 600 13.5px var(--f-disp); letter-spacing: .2px; background: #0e131b; box-shadow: inset 0 0 0 1px #ffffff10; color: #c3cad6; }
.rarity-row .chip.frag { color: var(--accent); }
/* rarity stamp: the class letter on a slanted plate + the class name, in the class light */
.stamp { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding-right: 10px; border-radius: 5px; overflow: hidden; transform: skewX(-10deg);
  font: 700 14.5px/1 var(--f-disp); letter-spacing: .2px; color: color-mix(in srgb, var(--c) 55%, #fff);
  background: color-mix(in srgb, var(--c) 16%, #0e131b); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.stamp b { align-self: stretch; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 0 6px; background: var(--c); color: #0b0f16; font: 800 15px/1 var(--f-disp); box-shadow: inset 0 -2px 0 #0003; }
.stamp.r0 { color: #c3cad6; background: #141a24; box-shadow: inset 0 0 0 1px #ffffff14; }
.stamp.r3, .stamp.r4, .stamp.r5 { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent), 0 0 18px -4px color-mix(in srgb, var(--c) 80%, transparent); }
.stamp.r3 b, .stamp.r4 b, .stamp.r5 b { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 35%, #fff), var(--c) 50%, color-mix(in srgb, var(--c) 65%, #000)); }
/* S and above: a light sweep runs across the stamp a few times, like a flashbulb on chrome */
.stamp.r4, .stamp.r5 { position: relative; }
.stamp.r4::after, .stamp.r5::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, #ffffffa6 50%, transparent); transform: translateX(-130%); animation: stampSweep 2.4s .9s var(--ease) 3; }
@keyframes stampSweep { 0% { transform: translateX(-130%); } 45%, 100% { transform: translateX(330%); } }
.drop-value { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 13px; }
.drop-value b { font: 800 22px/1 var(--f-disp); color: var(--text); letter-spacing: .2px; font-variant-numeric: tabular-nums; }
.xmult { align-self: center; padding: 2px 7px; border-radius: 5px; font: 800 13.5px/1.2 var(--f-disp); background: #ffffff0d; color: var(--muted); transform: skewX(-10deg); }
.xmult.up { background: #2fd27a1f; color: #4be08f; box-shadow: inset 0 0 0 1px #2fd27a55; }
#stage.lit { margin-bottom: 4px; height: auto; min-height: 250px; padding-bottom: 6px; }
.picker .picker-chev .i { color: var(--muted); }
.cases-list .odds-top { display: none; }

/* ×3 / ×6: equal tiles, the sell button joined to its car, the best drop raised */
.multi { gap: 8px; }
.multi .dcell { display: flex; flex-direction: column; min-width: 0; }
.multi .dcell > .car { flex: 1; border-radius: 12px 12px 4px 4px; }
.multi .dcell > .car .meta > span:first-child { display: none; }
.multi .dcell > .car .meta { justify-content: flex-end; }
.multi .car .nm { font-size: 13.5px; }
.multi .dcell .dropsell { margin-top: 4px; border-radius: 4px 4px 10px 10px; height: 32px; background: #0e131b; border: 0; box-shadow: inset 0 0 0 1px #ffffff12; font: 700 13.5px var(--f-disp); }
.multi .dcell .dropsell .i { color: var(--muted); }
.multi .dcell .dropsell.armed { background: #c62828; color: #fff; }
.multi .dcell .dropsell.done { box-shadow: none; background: transparent; }
.multi .dcell.best > .car { transform: translateY(-3px); }
.multi .dcell.best.flip-in { animation-name: fxFlipBest; }
@keyframes fxFlipBest { from { transform: perspective(500px) rotateY(90deg) scale(.8); opacity: 0; } 70% { transform: scale(1.06); } }
.multi .rare .car, .multi .car.rare { border-color: transparent; }
.multi .dcell.r0 > .car .art img { opacity: .85; }
.multi-sum { align-self: stretch; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 12px 2px 0; font-size: 13px; color: var(--muted); }
.multi-sum b { font: 800 18px var(--f-disp); color: var(--text); letter-spacing: .2px; white-space: nowrap; }
.multi-sum .newc { color: var(--accent); }
.multi.n6 .car .art { height: 52px; margin: 18px 0 3px; }

/* ×N switch and the open button */
.btn.opencase { position: relative; overflow: hidden; min-height: 58px; gap: 10px; font-size: 19px; border-radius: 14px; isolation: isolate;
  box-shadow: inset 0 1px 0 #fffb, inset 0 -3px 0 #0002, 0 10px 24px -12px #ffc400aa; }
.opencase .oc-p { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; background: #1a130014; box-shadow: inset 0 0 0 1px #1a130022; font-weight: 800; white-space: nowrap; }
.opencase .oc-p s { font-weight: 600; opacity: .55; font-size: .8em; }
.opencase .oc-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.btn.opencase:not([disabled])::after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, #ffffff8c 50%, transparent); transform: translateX(-120%) skewX(-18deg); animation: ocSheen 4.2s 1.2s var(--ease) infinite; }
@keyframes ocSheen { 0% { transform: translateX(-120%) skewX(-18deg); } 28%, 100% { transform: translateX(330%) skewX(-18deg); } }
.btn.opencase[disabled] .oc-p { background: #ffffff08; box-shadow: none; }
#view > .btn.opencase[disabled]:not([data-act]), #view > .btn[disabled]:not([data-act]) { min-height: 58px; border-radius: 14px; }
.btns.mt > .btn { min-height: 52px; }

/* hooks: key fragments as pips, the guarantee bar in its class colour */
.card.hooks { background: var(--surf); border: 0; box-shadow: inset 0 0 0 1px #ffffff0d, var(--edge), var(--drop); gap: 14px; padding: 14px 14px 13px; }
.hook-t { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; }
.hook-t .i { color: var(--muted); }
.hook .row b { font: 800 18px var(--f-disp); }
.hook .row b small { font-size: 13px; color: var(--muted); font-weight: 700; }
.pips { display: flex; gap: 4px; margin: 8px 0 7px; }
.pips i { flex: 1; height: 8px; border-radius: 2px; background: #0b0f16; box-shadow: inset 0 0 0 1px #ffffff12; transform: skewX(-20deg); }
.pips i.on { background: linear-gradient(180deg, var(--accent-hi), #f0a800); box-shadow: 0 0 8px -1px #ffc40088; }
.frag-bar.pity { height: 8px; margin: 8px 0 0; background: #0b0f16; box-shadow: inset 0 0 0 1px #ffffff12; overflow: visible; }
.frag-bar.pity i { position: relative; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 35%, #0b0f16), var(--c)); box-shadow: 0 0 10px -2px var(--c); }
.frag-bar.pity i::after { content: ''; position: absolute; right: -1px; top: -3px; bottom: -3px; width: 3px; border-radius: 2px; background: #fff; box-shadow: 0 0 6px var(--c); }
.fastrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 2px 4px; padding: 4px 0; font-weight: 600; font-size: 14px; }
.fastrow > span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fastrow .i { color: var(--muted); }
.fastrow small { color: var(--muted); font-weight: 500; font-size: 12px; }

/* case picker sheet */
.cases-list .li { gap: 12px; }
.cases-list .li .ic { color: var(--c); background: color-mix(in srgb, var(--c) 14%, #0e131b); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.cases-list .li .ic .i { color: inherit; }
.cases-list .li > .grow > b { font: 700 17px var(--f-disp); letter-spacing: .1px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cases-list .odds { margin-top: 5px; }
.cases-list .odds-bar { width: 96px; }
.cases-list .dots { margin-top: 3px; gap: 8px; }
.cases-list .dots span { padding: 0; background: none; font: 600 11.5px var(--f-disp); color: var(--muted); gap: 4px; }
.cases-list .li > .center b { font: 800 17px var(--f-disp); }
.cases-list .li.on { background: linear-gradient(90deg, #ffc40018, transparent 70%); box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- garage ---------- */
.card.income { position: relative; overflow: hidden; border: 0; padding: 14px 14px 12px;
  background: radial-gradient(120% 90% at 0% 0%, #ffc40014, transparent 55%), var(--surf); box-shadow: inset 0 0 0 1px #ffffff0f, var(--edge), var(--drop); }
.income .row.small > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.income .row.small .i { color: var(--accent); }
.income .rate b { color: var(--text); font: 700 15px var(--f-disp); }
.income .big { margin-top: 4px; font-size: 42px; color: var(--accent-hi); font-variant-numeric: tabular-nums; text-shadow: 0 0 24px #ffc40033; }
.progress.cap { position: relative; height: 8px; background: #0b0f16; box-shadow: inset 0 0 0 1px #ffffff10; }
.progress.cap::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 2px), #0b0f16 calc(12.5% - 2px) 12.5%); }
.income .btn { min-height: 50px; }
.cap-line { margin-top: 7px; font-size: 12.5px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.cap-line b { color: var(--accent-hi); font-weight: 700; }
.income.full .progress.cap i { box-shadow: 0 0 10px #ffc40066; }
.cap-up { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid #ffffff0d; text-align: center; }
.cap-up .tiny { display: block; margin-bottom: 7px; }
.income .cap-up .btn { min-height: 36px; width: 100%; justify-content: center; color: var(--muted); }
.income .cap-up .btn .i { color: var(--accent); }
.income.full .cap-up { display: block; }
.income.full .cap-more { display: none; }
.car .meta.inc { display: flex; align-items: center; gap: 3px; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.car .meta.inc .i { color: var(--accent); font-size: 12px; }
.car .meta.inc small { font-weight: 500; color: var(--muted); }
.car .meta.inc.off { color: var(--muted); font-weight: 500; opacity: .75; }
.stat .inc-off b { color: var(--muted); }
.inc-note { margin: 8px 2px 0; font-size: 12.5px; line-height: 1.4; }
.inc-note.off { color: var(--muted); padding: 9px 11px; border-radius: 10px; background: #ffffff08; box-shadow: inset 0 0 0 1px #ffffff0d; }
.inc-note.off b { color: var(--text); font-weight: 600; }
.garage-h b { color: var(--text); }
.gfilter { margin: -2px -16px 8px; padding: 2px 16px; }
.gfilter button i { width: 8px; height: 12px; border-radius: 1.5px; background: var(--c); transform: skewX(-14deg); }
.gfilter button small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.gfilter button.on small { color: #1a130099; }
.gfilter button.on i { box-shadow: 0 0 0 1.5px #1a1300; }
.gsort { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 9px; background: #0e131b; box-shadow: inset 0 0 0 1px #ffffff10; color: var(--muted); font: 700 13.5px var(--f-disp); white-space: nowrap; }
.gsort .i { font-size: 15px; }
.sellbar { margin: 0 0 10px; }
.sellbar .btn.sm { height: 32px; padding: 0 11px; font-size: 14px; border-radius: 9px; gap: 5px; }
.sellbar .btn.sm .i { color: var(--muted); }
.grid { gap: 9px; }
.grid .car .nm { font-size: 16px; }
.slot.free { min-height: 168px; padding: 16px 10px; gap: 6px; border: 1.5px dashed #33405a; border-radius: 12px; color: var(--muted);
  background: repeating-linear-gradient(-45deg, transparent 0 14px, #ffffff04 14px 28px), #0e131b80; }
.slot.free b { font: 700 15px/1.2 var(--f-disp); color: var(--text); text-align: center; }
.slot.free .tiny { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font: 700 13px var(--f-disp); margin-top: 0; }
.slot-plus { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: var(--accent); box-shadow: inset 0 0 0 1.5px #ffc40066; background: #ffc4000d; margin-bottom: 2px; }
.slot.buy { min-height: 168px; gap: 6px; border: 0; border-radius: 12px; background: radial-gradient(90% 70% at 50% 0%, #ffc4001f, transparent 70%), var(--surf); box-shadow: inset 0 0 0 1px #4a3c10, var(--drop); color: var(--accent); font: 600 14px var(--f-disp); }
.slot.buy b { color: var(--text); font: 800 18px var(--f-disp); padding: 3px 10px; border-radius: 7px; background: #0b0f16; box-shadow: inset 0 0 0 1px #ffffff12; }
.slot.buy.armed { background: #3a1517; box-shadow: inset 0 0 0 1px #e53935; }

/* ---------- car sheet ---------- */
.sheet-tags { margin-top: -2px; }
.hero { height: 176px; margin: 4px 0 10px; }
.hero .art img, .hero .art svg { object-position: center 78%; }
.hero::after { left: 2%; right: 2%; bottom: 14px; height: 46px;
  background: radial-gradient(closest-side, transparent 86%, #ffffff17 88%, transparent 91%), radial-gradient(closest-side, color-mix(in srgb, var(--c, #fff) 48%, transparent), color-mix(in srgb, var(--c, #fff) 10%, transparent) 70%, transparent); }
.hero.r0::after { background: radial-gradient(closest-side, transparent 86%, #ffffff12 88%, transparent 91%), radial-gradient(closest-side, #9aa4b238, transparent); }
.hero.r3::after, .hero.r4::after { background: radial-gradient(closest-side, transparent 86%, color-mix(in srgb, var(--c) 60%, #fff3) 88%, transparent 91%), radial-gradient(closest-side, color-mix(in srgb, var(--c) 75%, transparent), color-mix(in srgb, var(--c) 18%, transparent) 70%, transparent); }
.hero .plate-on { bottom: -4px; }
.sheet .stat { background: #ffffff0a; border: 0; border-radius: 12px; gap: 1px; box-shadow: inset 0 0 0 1px #ffffff0d; }
.sheet .stat div { background: #0e131b; padding: 12px 2px 10px; }
.sheet .stat b { font: 800 19px/1.1 var(--f-disp); font-variant-numeric: tabular-nums; }
.sheet .stat b em { font-style: normal; font-size: 11.5px; margin-left: 2px; vertical-align: 5px; }
.sheet .stat .val b { color: var(--accent-hi); }
.sheet .stat span { font-size: 11px; color: var(--muted); }
.tune-h b { color: var(--text); }
.ptile .part { align-self: flex-start; }
.tune { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.ptile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; border-radius: 12px; text-align: left; min-width: 0;
  background: var(--surf); box-shadow: inset 0 0 0 1px #ffffff0f, var(--edge); }
.ptile.on { background: radial-gradient(90% 60% at 20% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%), var(--surf); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), var(--edge), inset 0 -2px 0 color-mix(in srgb, var(--c) 70%, transparent); }
.ptile.empty { background: #0e131b; box-shadow: inset 0 0 0 1px #ffffff0a; }
.ptile.empty .ptile-tx b { color: #c3cad6; }
.ptile-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; width: 100%; }
.ptile-tx b { font: 700 15.5px/1.15 var(--f-disp); letter-spacing: .1px; }
.ptile-tx span { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptile.on .ptile-tx span { color: color-mix(in srgb, var(--c) 40%, #dfe4ec); }
.ptile-tier { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; font: 700 13px var(--f-disp); }
.ptile-tier .cls { min-width: 18px; height: 17px; font-size: 11px; }
.ptile-add { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); box-shadow: inset 0 0 0 1px #ffffff1f; font-size: 14px; }
.ptile .part.sm { --s: 48px; }
.sheet .list .li .ic { background: #0e131b; }

/* ---------- narrow phones (320–360) ---------- */
@media (max-width: 360px) {
  .picker-tx > b { font-size: 17px; }
  .picker-ic { width: 36px; height: 36px; font-size: 19px; }
  .casebar .iconbtn { width: 42px; }
  .odds-bar { width: 48px; }
  .btn.opencase { font-size: 17px; gap: 6px; padding-left: 10px; padding-right: 10px; }
  .opencase .oc-p { padding: 3px 7px; }
  .result-name.r3, .result-name.r4, .result-name.r5 { font-size: 29px; }
  .income .big { font-size: 34px; }
  .gsort { padding: 0 8px; font-size: 12.5px; }
  .gfilter button { padding: 0 9px; }
  .ptile { padding: 9px; }
  .ptile-tx b { font-size: 14.5px; }
  .sheet .stat b { font-size: 16px; }
  .multi .car .nm { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn.opencase::after, .newtag.pop, .multi .dcell.best.flip-in, .stamp::after { animation: none !important; }
  .stamp::after { display: none; }
  .btn.opencase::after { display: none; }
  .reel .car { transition: none; }
}
/* ===== Market: parts & plates (x-market) — kind tabs, plate search, item rows, «вигідна ціна» chip ===== */
.seg.mk-kinds { margin-bottom: 8px; }
.seg.mk-kinds button .i { font-size: 16px; }
.mk-search { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.mk-search input, .mk-search select { padding: 10px 12px; min-width: 0; }
.mk-search select { padding-right: 30px; text-overflow: ellipsis; }
.mk-item { align-items: center; }
.mk-item > .grow { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-item > .grow > .chip.deal { align-self: flex-start; margin-top: 3px; }
.mk-item > .btn { flex: none; min-width: 76px; }
.mk-plate { gap: 10px; padding-left: 12px; padding-right: 12px; }
.mk-plate > .plate { --h: 20px; width: 90px; }
.chip.deal .i { font-size: 12px; }
@media (max-width: 360px) { .mk-plate > .plate { width: 80px; } .mk-search { grid-template-columns: 1fr; } }
/* ===== «Дрифт 2.0»: drift screen, track of the day, final breakdown (only .d2 / .dmap / .dlegend / .dhow / .dsum / .dbreak / .ddots) ===== */
.dtcard .dmap { display: block; width: 100%; height: auto; margin-top: 8px; }
.dmap .dm-road { fill: none; stroke: #3a3e47; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.dmap .dm-c { fill: none; stroke-width: 7; stroke-linecap: round; }
.dmap .dm-c.fast { stroke: #38bdf8; } .dmap .dm-c.mid { stroke: #f5b301; } .dmap .dm-c.hair { stroke: #f87171; }
.dmap text { font: 700 10px var(--f-disp); fill: var(--text); text-anchor: middle; }
.dmap .dm-s { fill: #4ade80; } .dmap .dm-f { fill: #f4f4f5; stroke: #111; stroke-width: 1.5; }
.dlegend { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.dlegend .dk { font-size: 11px; padding: 3px 7px; border-radius: 6px; background: var(--card2); border-left: 3px solid; color: var(--muted); white-space: nowrap; }
.dlegend .dk b { color: var(--text); }
.dk.fast, .ddots .k-fast { border-color: #38bdf8; } .dk.mid, .ddots .k-mid { border-color: #f5b301; } .dk.hair, .ddots .k-hair { border-color: #f87171; }
.dhow { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.dhow > b { color: var(--text); font-family: var(--f-disp); font-size: 15px; }
.dhow p { margin: 6px 0 0; }
.dhow p b { color: var(--text); }

.d2 .dhud em { margin-left: 5px; font: 700 13px var(--f-disp); font-style: normal; color: #4ade80; }
.d2 #dCombo { display: inline-block; }
.d2 #dCombo.pop { animation: dcombo .45s ease-out; color: var(--accent); }
@keyframes dcombo { 40% { transform: scale(1.35); } }
.ddots { display: flex; gap: 5px; justify-content: center; margin-top: 12px; }
.ddots i { width: 30px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font: 700 13px var(--f-disp); font-style: normal;
  color: var(--muted); background: var(--card2); border-bottom: 3px solid; transition: background-color .2s, color .2s; }
.ddots i.now { color: var(--text); box-shadow: 0 0 0 1.5px var(--text) inset; }
.ddots i.g-perfect { background: #facc15; color: #1a1400; box-shadow: none; }
.ddots i.g-clean { background: #22c55e; color: #04220f; box-shadow: none; }
.ddots i.g-weak { background: #78591a; color: #fde68a; box-shadow: none; }
.ddots i.g-spin, .ddots i.g-wide { background: #7f1d1d; color: #fecaca; box-shadow: none; }
.d2 .dtrack { height: min(340px, 44vh); margin-top: 8px; background: #17241b; }
.d2 .dsign { top: 8px; font-size: 14px; text-shadow: 0 2px 8px #000c; }
.d2 .dmsg { top: 34%; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.d2 .dmsg b { font: 800 30px/1 var(--f-disp); }
.d2 .dmsg small { font: 700 15px var(--f-disp); color: #fff; opacity: .9; }
.d2 .dspd { position: absolute; left: 10px; bottom: 8px; z-index: 2; font: 700 13px var(--f-disp); color: #fff; padding: 2px 7px; border-radius: 6px; background: #0009; }
.d2 .dgauge .dz, .d2 .dgauge .di { transition: left .25s, width .25s; }
.d2 #dGas { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

.dfinal { font: 900 34px var(--f-disp); }
.dsum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dsum > div { text-align: center; padding: 9px 4px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.dsum b { display: block; font: 800 19px var(--f-disp); }
.dsum small { font-size: 10.5px; color: var(--muted); }
.dbreak { display: grid; gap: 6px; margin-bottom: 4px; }
.drow { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.drow::before { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--w); background: currentColor; opacity: .8; }
.drow.g-perfect { color: #facc15; } .drow.g-clean { color: #4ade80; } .drow.g-weak { color: #fbbf24; } .drow.g-spin { color: #f87171; } .drow.g-wide { color: #fb923c; }
.drow .grow { min-width: 0; color: var(--text); }
.drow .grow b { font-size: 14px; }
.drow em { font: 700 10.5px var(--f-disp); font-style: normal; letter-spacing: .3px; margin-left: 4px; padding: 1px 5px; border-radius: 4px; border: 1px solid currentColor; }
.drow.g-perfect em { color: #facc15; } .drow.g-clean em { color: #4ade80; } .drow.g-weak em { color: #fbbf24; } .drow.g-spin em { color: #f87171; } .drow.g-wide em { color: #fb923c; }
.drow .dn { flex: none; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font: 800 13px var(--f-disp); color: var(--text); background: var(--card2); border-left: 3px solid; }
.drow .dn.k-fast { border-color: #38bdf8; } .drow .dn.k-mid { border-color: #f5b301; } .drow .dn.k-hair { border-color: #f87171; }
.drow .dp { text-align: right; color: var(--text); }
.drow .dp b { display: block; font: 800 16px var(--f-disp); }
.drow .dp small { font-size: 11px; color: var(--muted); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .d2 #dCombo.pop { animation: none; }
  .d2 .dmsg.pop { animation: dmsg-fade 1s linear; }
  .d2 .dgauge .dz, .d2 .dgauge .di, .ddots i { transition: none; }
}
@keyframes dmsg-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* ============================================================================================================
   d2 «Ліцензія»: everything d1 did not reach, in the same paddock language — races, drift entry, workshop, plates,
   market, trade rooms, leaderboard, pass, store, menu, achievements, collection, quests, rewards, banners, toasts,
   empty states — plus the player card («Ліцензія пілота»), the one loud element of this pass.
   Rules of the pass: one icon-tile look everywhere (tinted by meaning, never iOS colours); small car pictures stand
   on a floor lit in their class colour, as on the big cards; dashed «empty bay» for anything empty; surfaces use the
   d1 --surf/--edge/--drop. Motion is transform/opacity only; loops stop under prefers-reduced-motion.
   ============================================================================================================ */

/* ---------- icon tiles: one look for menu rows, banners, list icons, quests, store ---------- */
.menu-list .mi, .banner .mi, .ic.tint, .q-ic, .wk-chest .wk-ic, .ev-ic, .dealer-head .ic {
  color: color-mix(in srgb, var(--c, #8a94a7) 72%, #fff);
  background: color-mix(in srgb, var(--c, #8a94a7) 15%, #0e131b);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #8a94a7) 38%, transparent), inset 0 1px 0 #ffffff14;
}
.ic.tint { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex: none; border: 0; }
.li .ic { border: 0; color: #c3cad6; background: #0e131b; box-shadow: inset 0 0 0 1px #ffffff10, inset 0 1px 0 #ffffff10; }
.li .ic.tint, .li .ev-ic { color: color-mix(in srgb, var(--c, #8a94a7) 72%, #fff); }
.ev-ic { font-size: 18px; }
.li.on { background: linear-gradient(90deg, #ffc40018, transparent 70%); box-shadow: inset 3px 0 0 var(--accent); }
.avatar svg, .ring { color: var(--accent); }

/* ---------- empty states: a dashed empty bay (same as the free garage slot) with an icon and the next step ---------- */
.empty-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 22px 18px 20px; margin-bottom: 12px; border-radius: var(--r);
  border: 1.5px dashed #2a3446; background: repeating-linear-gradient(-45deg, transparent 0 14px, #ffffff03 14px 28px), #0e131b99; }
.empty-ic { width: 46px; height: 46px; margin-bottom: 6px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; color: var(--muted); background: #141a24; box-shadow: inset 0 0 0 1.5px #ffffff14; }
.empty-box > b { font: 700 17px/1.2 var(--f-disp); color: var(--text); }
.empty-box > span:not(.empty-ic) { max-width: 300px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.empty-box .btn { margin-top: 10px; }
.sheet .empty-box { background: #0e131b; }
.empty, .card.empty { font-size: 13.5px; color: var(--muted); }

/* ---------- toast: a full-width pill at the top with a status icon, springs in ---------- */
.toast { left: 16px; right: 16px; top: calc(env(safe-area-inset-top, 0px) + 10px); transform: none; max-width: 488px; margin: 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 9px; border: 0; border-radius: 14px; text-align: left; background: #1a2130; font: 600 15px/1.25 var(--f-disp);
  box-shadow: inset 0 0 0 1px #ffffff17, inset 0 1px 0 #ffffff12, 0 16px 34px -10px #000; }
.toast.err { box-shadow: inset 0 0 0 1px #ff4d5a59, inset 0 1px 0 #ffffff12, 0 16px 34px -10px #000; }
.toast.in { animation: toastIn .34s var(--spring) both; }
@keyframes toastIn { from { transform: translateY(-14px) scale(.96); opacity: 0; } }
.toast-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; background: var(--accent); color: var(--accent-ink); }
.toast.err .toast-ic { background: var(--red); color: #fff; }
.toast-tx { min-width: 0; }
.toast-tx .i { color: var(--accent); }

/* ---------- banners: compact, and several fold into a stack under the newest («ще N» unfolds) ---------- */
#banners { gap: 6px; }
.banner { gap: 10px; padding: 8px 8px 8px 9px; border: 0; border-radius: 16px; background: #1a2130;
  box-shadow: inset 0 0 0 1px #ffffff17, inset 0 1px 0 #ffffff12, 0 14px 30px -10px #000d;
  transition: transform .45s cubic-bezier(.2, 1.25, .35, 1), opacity .3s, translate .32s var(--ease), scale .32s var(--ease); }
.banner .mi { width: 34px; height: 34px; border-radius: 10px; font-size: 18px; }
.banner .grow b { font: 700 15px/1.2 var(--f-disp); letter-spacing: .1px; }
.banner .grow .small { font-size: 12px; line-height: 1.3; }
.banner .bbtns .btn { min-height: 32px; padding: 0 12px; border-radius: 10px; font-size: 14.5px; }
.banner:not(.behind) { position: relative; z-index: 6; }
#banners.stacked:not(.open) .banner.behind { position: absolute; top: 0; left: max(10px, calc(50% - 250px)); right: max(10px, calc(50% - 250px)); z-index: calc(5 - var(--i));
  translate: 0 calc(var(--i) * 7px); scale: calc(1 - var(--i) * .045); pointer-events: none; height: 50px; overflow: hidden; }
#banners.stacked:not(.open) .banner.behind.in { opacity: calc(1 - var(--i) * .28); }
#banners.stacked:not(.open) .banner.behind > * { opacity: 0; }
.bmore { pointer-events: auto; align-self: flex-end; display: inline-flex; align-items: center; gap: 2px; margin: 2px 6px 0 0; padding: 4px 6px 4px 10px; border-radius: 999px;
  background: #1a2130; color: var(--text); font: 700 12.5px var(--f-disp); box-shadow: inset 0 0 0 1px #ffffff1c, 0 6px 14px -6px #000; }
#banners.stacked:not(.open) .bmore { margin-top: 16px; }
.bmore .i { transform: rotate(90deg); width: 14px; height: 14px; transition: transform .2s; }
#banners.open .bmore .i { transform: rotate(-90deg); }

/* ---------- small car pictures on a lit floor (lists, market, rivals, race lanes) ---------- */
.mini.art.lit { position: relative; isolation: isolate; }
.mini.art.lit::after { content: ''; position: absolute; z-index: -1; left: 2%; right: 2%; bottom: 0; height: 42%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 55%, color-mix(in srgb, var(--c) 58%, transparent), transparent 72%); }
.mini.art.lit.r0::after { background: radial-gradient(50% 50% at 50% 55%, #9aa4b238, transparent 72%); }
.mini.art.lit img { filter: drop-shadow(0 3px 2px #000a); }

/* ---------- races: rival bays with a difficulty rail, fuel as pips, the race screen as a timing board ---------- */
.list.rivals { display: grid; gap: 8px; overflow: visible; background: none; border: 0; box-shadow: none; }
.rivals .rival { position: relative; overflow: hidden; border: 0; border-radius: 14px; padding: 10px 12px 10px 12px; background: var(--surf);
  box-shadow: inset 0 0 0 1px #ffffff0d, var(--edge), var(--drop); transition: transform .14s var(--ease); }
.rivals .rival:active { transform: scale(.98); }
.rivals .rival::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 2px 2px 0; background: var(--dc, #8a94a7); }
.rival.d-easy { --dc: #4cd38a; } .rival.d-mid { --dc: #f2c14e; } .rival.d-hard { --dc: #ff7a7f; } .rival.d-train { --dc: #6cc4ff; }
.rivals .rival .grow > b { font: 700 16px var(--f-disp); }
.rivals .rival .center b.win { font: 800 18px var(--f-disp); }
.fuelcard, .xpcard { background: var(--surf); border: 0; box-shadow: inset 0 0 0 1px #ffffff0d, var(--edge), var(--drop); }
.fuel-n, .xpcard .row > b { font: 800 20px/1 var(--f-disp); font-variant-numeric: tabular-nums; }
.fuel-n small, .xpcard .row > b small { font-size: 13px; color: var(--muted); font-weight: 700; }
.pips.fuel { gap: 3px; margin: 9px 0 8px; }
.pips.fuel i { height: 10px; }
.dstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border-radius: 10px; background: #ffffff0a; }
.dstats div { padding: 8px 4px 7px; text-align: center; background: #0e131b; }
.dstats b { display: block; font: 800 16px/1.15 var(--f-disp); }
.dstats span { font-size: 11px; color: var(--muted); }

.racebox { border: 0; border-radius: 16px; padding: 12px 14px 10px; background: var(--surf); box-shadow: inset 0 0 0 1px #ffffff0d, var(--edge), var(--drop); }
.rb-board { display: flex; justify-content: space-between; margin: -2px -4px 10px; padding: 8px 12px 7px; border-radius: 10px; background: #070a10; box-shadow: inset 0 0 0 1px #ffffff0d, inset 0 2px 8px #000; }
.rb-board small { display: block; font-size: 11px; color: var(--muted); }
.rb-board b { font: 800 28px/1.05 var(--f-disp); letter-spacing: .5px; font-variant-numeric: tabular-nums; color: var(--accent-hi); }
.rb-board .right b { color: var(--text); }
.rb-board b.win { color: var(--green); } .rb-board b.lose { color: var(--red); }
.lane .who { right: 64px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 15px var(--f-disp); }
.lane .bar { top: 30px; height: 6px; border-radius: 3px; background: #0b0f16; box-shadow: inset 0 0 0 1px #ffffff0d; }
.lane .bar i { border-radius: 3px; background: linear-gradient(90deg, #f0a800, var(--accent-hi)); }
.lane.rv .bar i { background: linear-gradient(90deg, #5b6577, #aab3c2); }
.marks { font-family: var(--f-disp); font-size: 11px; }
.tree { width: max-content; margin: 14px auto; gap: 10px; padding: 10px 14px; border-radius: 999px; background: #070a10; box-shadow: inset 0 0 0 1px #ffffff12, inset 0 3px 8px #000; }
.tree i { width: 32px; height: 32px; background: radial-gradient(circle at 40% 35%, #2b3342, #151a23); box-shadow: inset 0 0 0 1px #ffffff10; }
.tree i.amber { background: radial-gradient(circle at 40% 35%, #fff3b0, #ffc400 45%, #d99a00); box-shadow: 0 0 18px #ffc400aa; }
.tree i.green { background: radial-gradient(circle at 40% 35%, #c9ffe0, #2fd27a 45%, #16a35a); box-shadow: 0 0 22px #2fd27aaa; }
.tree i.red { background: radial-gradient(circle at 40% 35%, #ffd0d4, #ff4d5a 45%, #c8202e); box-shadow: 0 0 18px #ff4d5aaa; }
.dash { border: 0; border-radius: 16px; background: var(--surf); box-shadow: inset 0 0 0 1px #ffffff0d, var(--edge), var(--drop); }
.speed { font: 800 36px/1 var(--f-disp); font-variant-numeric: tabular-nums; }
.tacho { height: 14px; border-radius: 4px; background: #070a10; box-shadow: inset 0 0 0 1px #ffffff0d; }
.tacho .needle { background: linear-gradient(90deg, #f0a800, var(--accent-hi)); }
.gear { font: 800 34px/1 var(--f-disp); }
.racebtn { height: 82px; border-radius: 16px; font: 800 30px/1 var(--f-disp); letter-spacing: .4px; }
.racebtn.gas { background: linear-gradient(180deg, #5ff0a0, var(--green) 55%, #1fb866); color: #032312; box-shadow: inset 0 1px 0 #fff9, inset 0 -3px 0 #0002, 0 10px 24px -12px #2fd27aaa; }
.racebtn.wait { background: repeating-linear-gradient(-45deg, #1b2130 0 14px, #161b27 14px 28px); color: #8a94a7; box-shadow: inset 0 0 0 1px #33405a; font-size: 21px; }
.racebtn.shift { background: linear-gradient(180deg, var(--accent-hi), var(--accent) 55%, #f0b000); }

/* race result: the verdict under a light, the money on a readout, both runs as a timing sheet */
.rhero { --rc: #2fd27a; position: relative; overflow: hidden; margin: 2px 0 12px; padding: 18px 12px 16px; border-radius: 16px; text-align: center;
  background: radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--rc) 24%, transparent), transparent 70%), var(--surf);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 35%, transparent), var(--edge), var(--drop); }
.rhero.lose { --rc: #ff4d5a; }
.rhero-tag { display: inline-block; margin-bottom: 6px; padding: 2px 9px; border-radius: 999px; background: #0b0f16; color: var(--muted); font: 700 12px var(--f-disp); }
.rhero-t { font: 800 44px/1 var(--f-disp); transform: var(--slant); color: color-mix(in srgb, var(--rc) 78%, #fff); }
.rhero-sub { margin-top: 7px; font-size: 13.5px; color: var(--muted); }
.rhero-sub b { font-family: var(--f-disp); color: var(--text); }
.rhero-amt { display: inline-block; margin: 12px auto 5px; padding: 6px 14px; border-radius: 10px; background: #070a10; box-shadow: inset 0 0 0 1px #ffffff0f;
  font: 800 26px/1.1 var(--f-disp); font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--rc) 82%, #fff); }
.rsheet .li { align-items: center; }
.rsheet .rtime { font: 800 17px var(--f-disp); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rsheet .li.won { background: linear-gradient(90deg, #2fd27a10, transparent 60%); }
.rbar { height: 5px; margin-top: 7px; overflow: hidden; border-radius: 3px; background: #0b0f16; }
.rbar i { display: block; height: 100%; border-radius: 3px; background: #5b6577; }
.rsheet .li.won .rbar i { background: linear-gradient(90deg, #1f8f55, var(--green)); }
.rshifts { border: 0; background: var(--surf); box-shadow: inset 0 0 0 1px #ffffff0d; }
.qchip { border-radius: 6px; background: #0e131b; font: 700 12.5px var(--f-disp); }

/* ---------- workshop: tier pills and a «ready to merge» tag ---------- */
.dots.tiers { gap: 5px; margin-top: 6px; }
.dots.tiers span { gap: 5px; padding: 2px 7px; border-radius: 6px; background: #0e131b; color: #c3cad6; font: 600 12.5px var(--f-disp); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.dots.tiers span::before { width: 6px; height: 10px; border-radius: 1px; transform: skewX(-14deg); }
.dots.tiers span b { color: var(--text); font-weight: 800; }
.mergetag { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 7px; transform: skewX(-8deg);
  background: #ffc4001a; color: var(--accent); font: 800 13.5px var(--f-disp); box-shadow: inset 0 0 0 1px #ffc40066; }
.mergetag .i { width: 14px; height: 14px; }

/* ---------- plates: the plate on a lit stand, odds as strips, region codes as small plates ---------- */
.plate-stand { position: relative; isolation: isolate; display: flex; justify-content: center; margin: 2px 0 4px; padding: 34px 0 30px; }
.plate-stand::before { content: ''; position: absolute; z-index: -1; top: -12px; left: 50%; width: 320px; height: calc(100% + 12px); transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, transparent, #ffffff0e 30%, color-mix(in srgb, var(--c, #ffffff) 12%, transparent) 75%, transparent); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); }
.plate-stand::after { content: ''; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: 4px; height: 40px; pointer-events: none;
  background: radial-gradient(closest-side, transparent 86%, #ffffff14 88%, transparent 91%), radial-gradient(closest-side, color-mix(in srgb, var(--c, #8a94a7) 42%, transparent), transparent); }
.plate-res .big { font-size: 38px; }
.plate-res .stamp { margin-top: 2px; }
.regcode { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 60px; padding: 4px 8px 3px 15px; border-radius: 7px;
  background: linear-gradient(180deg, #fff, #e6e6e6); color: #111; box-shadow: inset 0 0 0 1.5px #141414, 0 2px 6px #0007; transition: transform .14s var(--ease); }
.regcode:active { transform: scale(.95); }
.regcode::before { content: ''; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 6px; border-radius: 2px; background: linear-gradient(#0057b7 50%, #ffd500 50%); }
.regcode b { font: 800 16px/1 'DIN 1451', 'DIN Condensed', 'Roboto Condensed', var(--f-disp); letter-spacing: .6px; }
.regcode small { font: 700 10.5px/1.15 var(--f-disp); color: #555; }
.regcode.on { box-shadow: inset 0 0 0 1.5px #141414, 0 0 0 2.5px var(--accent), 0 4px 12px -2px #ffc40088; }
.regcode.sm { min-width: 0; margin-left: auto; padding: 3px 7px 3px 14px; }
.regcode.sm b { font-size: 14px; }
.reg-row > .grow b { font-weight: 600; }
.plates-list .li { gap: 10px; }
.prow2 .on-car { color: #c3cad6; }
.prow2 .on-car .i { color: var(--accent); }

/* ---------- market & trades ---------- */
.lot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 5px; }
.lot-meta .chip { padding: 2px 6px; font-size: 11px; }
.lot-meta .seller { margin-right: 2px; font-size: 11.5px; color: var(--muted); }
.chip.bidc { color: var(--text); }
.chip.timec { color: var(--accent); }
.chip.timec .i { width: 12px; height: 12px; }
.dealer-head { border: 0; background: radial-gradient(120% 90% at 0% 0%, #ffc40012, transparent 60%), var(--surf); box-shadow: inset 0 0 0 1px #4a3c1066, var(--edge), var(--drop); }
.dealer-head .grow > .row b { font: 700 16.5px var(--f-disp); }
.dealer-head .ic { width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 21px; flex: none; }
.trade-side { padding: 6px 12px 10px; border-radius: 14px; background: var(--surf); box-shadow: inset 0 0 0 1px #ffffff0d; }
.trade-side input { background: var(--bg); border: 1px solid var(--line2); }
.trade-side input:focus { border-color: var(--accent); }
.trade-side h4 { margin: 6px 0 4px; color: var(--muted); font: 700 14px var(--f-disp); }
.chatbox { background: var(--surf); border: 0; box-shadow: inset 0 0 0 1px #ffffff0d, var(--edge); }
.msg { background: #0e131b; box-shadow: inset 0 0 0 1px #ffffff0a; }
.msg.me { background: #2a2208; box-shadow: inset 0 0 0 1px #4a3c1066; }

/* ---------- leaderboard: a podium for the top three, initials for everyone ---------- */
.lb-head { border: 0; background: var(--surf); box-shadow: inset 0 0 0 1px #ffffff0d, var(--edge), var(--drop); }
.lb-head .disp { display: inline-block; font-size: 19px; transform: var(--slant); }
.podium { display: grid; grid-template-columns: 1fr 1.12fr 1fr; align-items: end; gap: 8px; margin: 6px 0 12px; }
.pod { --mc: #c4c9d2; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; transition: transform .14s var(--ease); }
.pod:active { transform: scale(.96); }
.pod.p1 { --mc: #ffc400; } .pod.p3 { --mc: #c98a52; }
.pod-ava { position: relative; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 800 22px var(--f-disp); color: var(--text);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--mc) 30%, #263042), #121823 75%); box-shadow: inset 0 0 0 2px var(--mc), 0 0 0 3px #0b0f16, 0 10px 20px -10px var(--mc); }
.pod.p1 .pod-ava { width: 64px; height: 64px; font-size: 27px; }
.pod-ava .lb-vip { position: absolute; top: -10px; left: 50%; margin: 0; transform: translateX(-50%); font-size: 16px; }
.pod > b { max-width: 100%; margin-top: 6px; font: 700 14.5px/1.2 var(--f-disp); }
.pod.me > b { color: var(--accent); }
.pod-val { font: 800 14px var(--f-disp); color: var(--muted); white-space: nowrap; }
.pod.p1 .pod-val { color: var(--accent-hi); }
.pod-step { align-self: stretch; display: flex; justify-content: center; height: 46px; margin-top: 6px; padding-top: 10px; border-radius: 12px 12px 4px 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 24%, #171e2b), #0f141d); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mc) 40%, transparent), inset 0 1px 0 #ffffff1a; }
.pod.p1 .pod-step { height: 70px; }
.pod.p3 .pod-step { height: 34px; padding-top: 6px; }
.lb-ava { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 800 14px var(--f-disp); color: #c3cad6;
  background: #0e131b; box-shadow: inset 0 0 0 1px #ffffff14; }
.lb-ava.on { box-shadow: inset 0 0 0 1.5px var(--green); }
.lb.me .lb-ava { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.lb .pl { width: 26px; }
.lb.me { background: linear-gradient(90deg, #ffc4001c, transparent 70%); }
.lb-vip { display: inline-flex; margin-left: 4px; vertical-align: -1px; color: var(--accent); }

/* ---------- season pass, store ---------- */
.prow.cur .plvl { box-shadow: 0 0 0 2px var(--accent), 0 0 14px -2px #ffc40088; }
.pcell { background: #0e131b; }
.notice { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; color: var(--muted); background: #0e131b; box-shadow: inset 0 0 0 1px #ffffff0d; }
.notice .i { margin-top: 1px; }
.stars-n { font: 800 26px/1 var(--f-disp); color: var(--accent-hi); }

/* ---------- menu & settings ---------- */
.menu-list .li { padding: 10px 12px; }
.menu-list .mi { width: 34px; height: 34px; border-radius: 10px; font-size: 18px; }
.menu-list .cnt { background: var(--red); border-radius: 6px; transform: skewX(-8deg); font: 800 12.5px var(--f-disp); }
.menu-list .chev { color: #4a5568; }
.settings .li { align-items: center; }
.settings .grow .tiny { margin-top: 2px; line-height: 1.35; }
.settings .grow b.disp { font-size: 17px; letter-spacing: .4px; }

/* ---------- achievements: rows inside one list, badges in metal ---------- */
.list > .card.ach-row { margin: 0; padding: 12px 14px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.list > .card.ach-row:first-child { border-top: 0; }
.badge-a.off { background: radial-gradient(circle at 35% 30%, #262f3f, #141a24); box-shadow: 0 0 0 2px #0b0f16, 0 0 0 3.5px #2b3446; color: #5d6778; }
.badge-a.ready::after { background: var(--red); }
.badge-a.off.ready { color: var(--accent); box-shadow: 0 0 0 2px #0b0f16, 0 0 0 3.5px var(--accent), 0 6px 18px -6px #ffc40088; }
.ach-dots i { height: 6px; border-radius: 2px; transform: skewX(-20deg); background: #0b0f16; box-shadow: inset 0 0 0 1px #ffffff12; }

/* ---------- collection: a summary ring with class bars, country chips with counts, 3-across tiles by class ---------- */
.coll-sum { display: flex; align-items: center; gap: 14px; border: 0; background: var(--surf); box-shadow: inset 0 0 0 1px #ffffff0d, var(--edge), var(--drop); }
.coll-ring { position: relative; flex: none; width: 84px; height: 84px; color: var(--accent); }
.coll-ring svg { display: block; width: 100%; height: 100%; }
.coll-ring > b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 25px var(--f-disp); }
.coll-ring > b small { font-size: 13px; color: var(--muted); }
.coll-sum .disp { font-size: 18px; transform: var(--slant); display: inline-block; }
.cbars { display: grid; gap: 5px; margin-top: 8px; }
.cbar { display: grid; grid-template-columns: 22px 1fr 46px; align-items: center; gap: 8px; font: 700 12.5px var(--f-disp); }
.cbar .cls, .cgroup-h .cls { min-width: 18px; height: 15px; font-size: 10.5px; }
.cbar > i, .cgroup-h > i { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: #0b0f16; box-shadow: inset 0 0 0 1px #ffffff0d; }
.cbar > i > b, .cgroup-h > i > b { display: block; height: 100%; border-radius: 3px; background: var(--c); }
.cbar > span:last-child { text-align: right; }
.cbar small { color: var(--muted); }
.h2 .gsort { height: 28px; font-size: 13px; }
.cchips button { display: inline-flex; align-items: center; gap: 6px; }
.cchips small { display: inline-flex; font-size: 11.5px; color: var(--muted); }
.cchips small .i { width: 13px; height: 13px; }
.cchips button.full small { color: var(--green); }
.cchips button.on small { color: #1a130099; }
.cgroup { margin-top: 16px; }
.cgroup-h { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px; margin: 0 2px 8px; font: 700 15.5px var(--f-disp); }
.cgroup-h > span:last-child { font-size: 13.5px; color: var(--muted); }
.cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ctile { position: relative; min-width: 0; padding: 6px 7px 7px; border-radius: 10px;
  background: radial-gradient(60% 14% at 50% 56%, color-mix(in srgb, var(--c) 50%, transparent), transparent 76%), linear-gradient(180deg, #171e2b, #0f141d 80%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, #ffffff08), inset 0 -2px 0 color-mix(in srgb, var(--c) 70%, transparent); }
.ctile.r0 { background: radial-gradient(60% 14% at 50% 56%, #9aa4b22a, transparent 76%), linear-gradient(180deg, #161b24, #10141b 80%); box-shadow: inset 0 0 0 1px #ffffff0d, inset 0 -2px 0 #9aa4b240; }
.ctile .art { height: 44px; margin: 2px 0 4px; }
.ctile .art img { filter: drop-shadow(0 3px 2px #0009); }
.ctile b { display: block; font: 600 12.5px/1.15 var(--f-disp); }
.ctile > span { display: block; margin-top: 1px; font-size: 10.5px; color: var(--muted); }
.ctile.off { background: #0e131b; box-shadow: inset 0 0 0 1px #ffffff0a; }
.ctile.off b { color: #5d6778; }
.cgroup-done { padding: 12px; border-radius: 10px; text-align: center; font: 700 14px var(--f-disp); color: var(--green); background: #2fd27a10; box-shadow: inset 0 0 0 1px #2fd27a33; }

/* ---------- quests: a status tile, the task, a bar and the count ---------- */
.qcard { display: flex; align-items: flex-start; gap: 12px; border: 0; background: var(--surf); box-shadow: inset 0 0 0 1px #ffffff0d, var(--edge), var(--drop); }
.q-ic { --c: #8a94a7; flex: none; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; }
.qcard.ready { box-shadow: inset 0 0 0 1px #ffc40066, var(--edge), 0 10px 24px -14px #ffc40088; }
.qcard.ready .q-ic { --c: #ffc400; }
.qcard.done { opacity: .6; }
.qcard.done .q-ic { --c: #2fd27a; }
.qcard > .grow { display: flex; flex-direction: column; gap: 8px; }
.qcard > .grow > .row:first-child { align-items: flex-start; }
.qcard > .grow > .row:first-child b { line-height: 1.25; }
.q-n { white-space: nowrap; font: 800 15px var(--f-disp); }
.q-n small { font-size: 12px; color: var(--muted); }
.q-rw .i { color: var(--accent); }
.wk-day { font-family: var(--f-disp); font-weight: 700; }

/* ---------- rewards: day tiles; the big days are no longer skewed by the generic .big ---------- */
.day { border: 0; border-radius: 10px; background: #0e131b; box-shadow: inset 0 0 0 1px #ffffff0d; }
.day small { font-family: var(--f-disp); font-size: 11.5px; letter-spacing: .2px; }
.day.done .e { color: var(--green); }
.day.today { background: linear-gradient(180deg, #2a2208, #0e131b); box-shadow: inset 0 0 0 2px var(--accent), 0 0 16px -4px #ffc40088; }
.day.big { transform: none; font: inherit; letter-spacing: 0; line-height: 1.4; background: linear-gradient(135deg, #2b2309, #0e131b 75%); box-shadow: inset 0 0 0 1px #4a3c10; }
.day.big b { font: 700 12.5px var(--f-disp); }
.reward-res { border: 0; background: radial-gradient(80% 60% at 50% 0%, #2fd27a1c, transparent 70%), var(--surf); box-shadow: inset 0 0 0 1px #2fd27a40, var(--edge), var(--drop); }
.rr-ic { width: 52px; height: 52px; margin: 2px auto 8px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 20px -8px #ffc400aa; }
.rr-name { display: block; margin: 4px 0 2px; font-size: 18px; }
.rr-text { margin-top: 4px; font: 800 20px/1.2 var(--f-disp); }

/* ---------- the player card: «Ліцензія пілота» ---------- */
.licence { position: relative; isolation: isolate; overflow: hidden; padding: 12px 14px; border-radius: 18px;
  background:
    radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 60%),
    repeating-linear-gradient(135deg, #ffffff05 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #1a2231, #0f141d 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, #ffffff10), inset 0 1px 0 #ffffff1c, 0 18px 40px -18px color-mix(in srgb, var(--c) 65%, #000); }
.licence.r3::before, .licence.r4::before, .licence.r5::before { content: ''; position: absolute; inset: 0; z-index: 2; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(155deg, #ffffffd9 0%, var(--c) 20%, color-mix(in srgb, var(--c) 30%, #000) 50%, var(--c) 80%, #ffffffb3 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.lic-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px dashed #ffffff17; font-size: 11.5px; color: var(--muted); }
.lic-brand { font: 800 13px var(--f-disp); letter-spacing: 1px; color: var(--accent); transform: var(--slant); }
.lic-kind { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lic-id { padding: 2px 7px; border-radius: 5px; background: #0b0f16; box-shadow: inset 0 0 0 1px #ffffff12; font: 700 12px var(--f-disp); color: #c3cad6; white-space: nowrap; }
.lic-who { display: flex; align-items: center; gap: 12px; }
.lic-who > .grow { min-width: 0; }
.lic-ava { position: relative; flex: none; width: 76px; height: 76px; color: var(--accent); }
.lic-ava svg { position: absolute; inset: 0; }
.lic-ava .face { position: absolute; inset: 9px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 800 28px var(--f-disp); color: var(--text);
  border: 2.5px solid var(--c); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 35%, #263042), #121823 75%); }
.licence.r3 .lic-ava .face, .licence.r4 .lic-ava .face, .licence.r5 .lic-ava .face { border-color: transparent;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 35%, #263042), #121823 75%) padding-box, linear-gradient(155deg, #fff, var(--c) 30%, #000 55%, var(--c) 80%, #fff) border-box; }
.lic-ava .lvl { position: absolute; right: -2px; bottom: 1px; min-width: 26px; height: 22px; padding: 0 5px; border-radius: 5px; transform: skewX(-10deg); text-align: center;
  background: var(--accent); color: var(--accent-ink); font: 800 13px/22px var(--f-disp); box-shadow: 0 0 0 3px #121823; }
.lic-name { padding-right: 6px; font: 800 23px/1.1 var(--f-disp); transform: var(--slant); transform-origin: left; }
.lic-sub { margin-top: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lic-stamps { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.lstamp { --bc: #c3cad6; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: 5px; transform: skewX(-8deg); white-space: nowrap;
  font: 700 12px var(--f-disp); color: var(--bc); background: color-mix(in srgb, var(--bc) 12%, #0b0f16); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 45%, transparent); }
.lstamp .i { width: 13px; height: 13px; }
.lstamp.vip { --bc: #ffc400; }
.lstamp.legacy { --bc: #7ee8fa; }
.lic-bays { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 6px; margin: 12px 0 10px; }
.lic-bays.n1 { grid-template-columns: 1fr; }
.lic-bays.n2 { grid-template-columns: 1.4fr 1fr; }
.lbay { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 4px 7px 6px; border-radius: 11px;
  background: radial-gradient(60% 16% at 50% 60%, color-mix(in srgb, var(--c) 60%, transparent), transparent 76%), linear-gradient(180deg, #151c28, #0b0f16 85%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, #ffffff08), inset 0 -2px 0 color-mix(in srgb, var(--c) 75%, transparent); }
.lbay.r0 { background: radial-gradient(60% 16% at 50% 60%, #9aa4b22e, transparent 76%), linear-gradient(180deg, #151c28, #0b0f16 85%); box-shadow: inset 0 0 0 1px #ffffff0d, inset 0 -2px 0 #9aa4b240; }
.lbay .art { height: 44px; }
.lbay.main .art { height: 58px; }
.lbay .art img { filter: drop-shadow(0 4px 3px #000a); }
.lbay-tx { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; min-width: 0; margin-top: 2px; }
.lbay-tx .cls { min-width: 16px; height: 14px; font-size: 10px; }
.lbay-tx b { flex: 1; min-width: 0; font: 600 12px/1.15 var(--f-disp); }
.lbay.main .lbay-tx b { font-size: 13.5px; }
.lbay-tx > span:not(.cls) { width: 100%; font: 800 12.5px var(--f-disp); color: color-mix(in srgb, var(--c) 45%, #fff); }
.lbay.r0 .lbay-tx > span:not(.cls) { color: #c3cad6; }
.lic-nobay { margin: 12px 0 10px; padding: 14px; border: 1.5px dashed #2a3446; border-radius: 11px; text-align: center; font-size: 13px; color: var(--muted); }
.lic-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: 11px; background: #ffffff0d; }
.lic-stats div { min-width: 0; padding: 8px 2px 7px; text-align: center; background: #070a10cc; }
.lic-stats b { display: block; font: 800 16px/1.1 var(--f-disp); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lic-stats div:first-child b { color: var(--accent-hi); }
.lic-stats span { font-size: 10.5px; color: var(--muted); }
.sheet .licence + .btns .btn { min-height: 46px; font-size: 15.5px; }

/* ---------- narrow phones ---------- */
@media (max-width: 360px) {
  .lic-ava { width: 64px; height: 64px; }
  .lic-ava .face { inset: 8px; font-size: 24px; }
  .lic-name { font-size: 20px; }
  .lic-stats b { font-size: 14px; }
  .lic-kind { display: none; }
  .lbay-tx b { font-size: 11px; }
  .pod-ava { width: 46px; height: 46px; font-size: 19px; }
  .pod.p1 .pod-ava { width: 56px; height: 56px; }
  .pod > b, .pod-val { font-size: 12.5px; }
  .rhero-t { font-size: 38px; }
  .rb-board b { font-size: 24px; }
  .racebtn { font-size: 26px; }
  .cbar { grid-template-columns: 20px 1fr 40px; gap: 6px; }
  .coll-ring { width: 72px; height: 72px; }
  .coll-sum { gap: 10px; }
  .ctile { padding: 5px 5px 6px; }
  .ctile b { font-size: 11.5px; }
  .regcode { min-width: 52px; padding-left: 13px; }
  .regcode b { font-size: 14px; }
  .banner .bbtns .btn { padding: 0 9px; font-size: 13.5px; }
  .sheet .licence + .btns .btn { padding-left: 8px; padding-right: 8px; font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .toast.in { animation: none; }
  .banner, .bmore .i, .pod, .rivals .rival, .regcode { transition: none; }
}

/* ==================== game events (S.EVENTS): chips with timers, the «Події» card ==================== */
/* --c is the event colour (EVENTS[id].color). */
.ev-strip { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 10px; scrollbar-width: none; }
.ev-strip::-webkit-scrollbar { display: none; }
.ev-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 16%, var(--card)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); color: var(--text, #f2f2f7); font-size: 12.5px; }
.ev-chip > .i { color: var(--c); }
.ev-chip b { font: 700 13px var(--f-disp); letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-left { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-left .i { width: 1em; height: 1em; }
.chip.evc { color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--card2)); border-color: transparent; margin-left: 4px; }
.ev-card { cursor: default; }
.ev-card[data-act] { cursor: pointer; }
.ev-h { display: inline-flex; align-items: center; gap: 6px; font: 700 15px var(--f-disp); letter-spacing: .3px; }
.ev-row { display: flex; align-items: center; gap: 10px; padding: 9px 0 2px; }
.ev-row + .ev-row, .ev-sub + .ev-row { border-top: 1px solid var(--line); margin-top: 7px; }
.ev-row .grow { min-width: 0; }
.ev-row b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.ev-row:not(.on) .ev-ic { filter: saturate(.5); opacity: .75; }
.ev-row.on .ev-ic { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 0 14px color-mix(in srgb, var(--c) 35%, transparent); }
.ev-t { flex: none; text-align: right; font: 700 13px var(--f-disp); font-variant-numeric: tabular-nums; }
.ev-t small { display: block; font: 500 11px var(--f-body); color: var(--muted); }
.ev-row.on .ev-t { color: var(--c); }
.ev-sub { margin-top: 10px; text-transform: uppercase; letter-spacing: .6px; font-size: 10.5px; }

/* ===== Collection sets («Сети» tab of the collection page) ===== */
.sets-dot { min-width: 17px; height: 17px; padding: 0 4px; border-radius: 4px; background: var(--accent); color: var(--accent-ink); font: 700 10.5px/17px var(--f-disp); text-align: center; letter-spacing: 0; }
.set-sum { display: flex; gap: 12px; align-items: center; }
.set-sum .disp { font-size: 17px; }
.set-count { flex: none; font: 800 28px/1 var(--f-disp); color: var(--accent); font-variant-numeric: tabular-nums; }
.set-count small { font-size: 15px; color: var(--muted); font-weight: 600; }
.set-card { --tc: #c0c7d1; position: relative; padding: 12px; border-left: 3px solid color-mix(in srgb, var(--tc) 70%, transparent); }
.set-card.ready { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 22px -6px #f5b30199; background: radial-gradient(90% 60% at 100% 0%, #f5b3011a, transparent 70%), var(--card); }
.set-card.claimed { background: radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--tc) 12%, transparent), transparent 70%), var(--card); }
.set-head { display: flex; gap: 10px; align-items: center; }
.set-head .disp { font-size: 16px; }
.set-ic { flex: none; width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--tc);
  background: color-mix(in srgb, var(--tc) 14%, #0e1117); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 35%, transparent); }
.set-tier { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 5px; font: 700 11px var(--f-disp); letter-spacing: .4px; text-transform: uppercase;
  color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 40%, transparent); }
.set-tier .i { width: 12px; height: 12px; }
.set-prog { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; }
.set-prog .progress { flex: 1; height: 5px; }
.set-prog .progress > i { background: var(--tc); }
.set-card.ready .set-prog .progress > i { background: var(--accent); }
.set-prog span { flex: none; font: 600 13px var(--f-disp); color: var(--muted); font-variant-numeric: tabular-nums; }
.set-prog span b { color: var(--text); }
.set-cars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.set-car { min-width: 0; padding: 4px 5px 5px; border-radius: 8px; background: linear-gradient(180deg, #171c25, #10141b 85%); box-shadow: inset 0 0 0 1px #ffffff0d, inset 0 -2px 0 color-mix(in srgb, var(--c, #9aa4b2) 45%, transparent); }
.set-car .art { height: 32px; display: flex; align-items: center; justify-content: center; }
.set-car .art img, .set-car .art svg { max-width: 100%; max-height: 100%; }
.set-car > span { display: block; margin-top: 2px; font-size: 9.5px; line-height: 1.2; color: #c4c9d2; }
.set-car.miss { background: #0d1118; box-shadow: inset 0 0 0 1px #ffffff08; }
.set-car.miss > span { color: #5d6778; }
.set-car.miss .silhouette { opacity: .3; }
.set-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.set-rw { color: #c4c9d2; line-height: 1.35; }
.set-rw .i { color: var(--accent); }
.set-left { flex: none; white-space: nowrap; }
.set-got { flex: none; display: inline-flex; align-items: center; gap: 4px; font: 700 12.5px var(--f-disp); color: #2fd27a; }
.set-done .set-cars.mini { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); margin-bottom: 6px; }
.set-done .set-cars.mini .set-car { padding: 2px; }
.set-done .set-cars.mini .art { height: 24px; }
.set-medal { width: 56px; height: 56px; margin: 6px auto 4px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #10141b;
  background: radial-gradient(circle at 35% 30%, #fff8, transparent 55%), var(--tc); box-shadow: 0 0 0 3px #0e1117, 0 0 0 5px var(--tc), 0 10px 26px -8px var(--tc); }
.set-done .lstamp { margin: 4px auto 0; }
.set-rw-list { margin-top: 10px; display: grid; gap: 4px; font-size: 13.5px; }
.set-rw-list .i { color: var(--accent); }
@media (max-width: 360px) { .set-cars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ev-sub { margin-top: 10px; font: 600 12.5px var(--f-disp); letter-spacing: .2px; }
.ev-card > .row:first-child + .ev-sub { margin-top: 6px; }

/* ============================================================================================================
   d3 «Один паддок»: a consistency pass from a fresh playthrough. No new look — the same paddock language made to
   agree with itself: one chip, one segmented control, one empty state, numbers that never break mid-value,
   nothing floating over the page, nothing that falls apart at 320 px.
   ============================================================================================================ */
.nw { white-space: nowrap; }

/* banners: folded, the «+N» key sits inside the front banner instead of a pill hanging over the page */
#banners .banner .bmore.in-banner { align-self: center; margin: 0; padding: 0 8px; min-width: 32px; height: 32px; justify-content: center; border-radius: 10px;
  background: #0e131b; box-shadow: inset 0 0 0 1px #ffffff1c; font: 800 14px var(--f-disp); color: var(--text); }
#banners.open > .bmore { margin-top: 2px; }

/* NEW → «нова» with the same sparkle as «Нова в колекції» */
.car .new { display: inline-flex; align-items: center; gap: 2px; text-transform: none; }
.car .new .i { width: 11px; height: 11px; }

/* plates · «Мої»: plate and value on top, where it hangs under it, two equal actions — fits 320 px */
.plates-list .li.prow2 { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "plate val" "meta meta" "act act"; align-items: center; gap: 8px 12px; padding-top: 12px; padding-bottom: 12px; }
.prow2 > .plate { grid-area: plate; }
.prow2 .pr-val { grid-area: val; justify-self: end; display: inline-flex; align-items: center; gap: 7px; }
.prow2 .pr-val b { font: 800 18px var(--f-disp); white-space: nowrap; }
.prow2 .pr-meta { grid-area: meta; display: flex; gap: 6px; min-width: 0; }
.prow2 .pr-meta > span { flex: none; }
.prow2 .pr-meta > span + span { flex: 0 1 auto; min-width: 0; }
.prow2 .pr-meta > span + span::before { content: '·'; margin-right: 6px; color: var(--muted); }
.prow2 .pr-act { grid-area: act; display: flex; gap: 8px; }
.prow2 .pr-act .btn { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; font-size: 14.5px; }

/* rivals: model name gives way, the horsepower stays whole */
.rv-meta { display: flex; gap: 4px; min-width: 0; }
.rv-meta > .ellipsis { min-width: 0; flex: 0 1 auto; }
.rival .grow > .small.rv-meta { display: flex; }

/* car picker rail: runs to the screen edges and has room under the cards for an A/S card's glow (it was cut off) */
#view .carpick { margin: 0 -16px; padding: 2px 16px 18px; scroll-padding: 0 16px; }
#view .carpick + .fuelcard { margin-top: 0; }

/* market: the second row of tabs is plain underlined tabs, so the two levels don't look like the same control twice */
.mk-kinds + .seg { gap: 4px; margin-bottom: 12px; padding: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--line); }
.mk-kinds + .seg button { padding: 8px 4px 10px; border-radius: 0; font-size: 15px; }
.mk-kinds + .seg button.on { background: none; box-shadow: inset 0 -2px 0 var(--accent); }
.mk-search input, .mk-search select { height: 44px; border: 1px solid var(--line2); border-radius: var(--r-sm); background-color: #0e131b; }
.mk-search input:focus, .mk-search select:focus { border-color: var(--accent); }

/* first steps: same palette and sentence case as the rest; the ring on a tab follows a rounded shape */
.guide { border-color: #ffc40055; }
.guide-dots span { text-transform: none; letter-spacing: .2px; font: 600 12.5px var(--f-disp); }
.guide-dots i.done { background: var(--green); }
.tabs button.guide-hi { border-radius: 12px; }

/* achievements: the tier pips are the progress bar (the next pip fills up) instead of pips plus a second bar */
.ach-dots { gap: 3px; margin-top: 8px; }
.ach-dots i { position: relative; flex: 1; max-width: 52px; overflow: hidden; }
.ach-dots i > b { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #f0a800, var(--accent-hi)); }

/* licence card buttons are two-line now: same height either way */
.sheet .licence + .btns .btn.btn2 { min-height: 52px; padding-top: 7px; padding-bottom: 7px; }

@media (max-width: 360px) {
  .prow2 .pr-act .btn { font-size: 13.5px; padding-left: 8px; padding-right: 8px; }
  .prow2 .pr-val b { font-size: 16px; }
  /* rivals: the prize drops to its own line under the text, so the model name and the chips get the full width */
  .rivals .rival { flex-wrap: wrap; row-gap: 6px; }
  .rivals .rival > .center { flex: 1 0 100%; max-width: none; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-left: 72px; text-align: left; }
  .rivals .rival .grow > .row { flex-wrap: nowrap; }
}

/* ===== «Ефекти й відчуття»: game feel (fx.js / sfx.js). Transform & opacity only; nothing loops at rest. ===== */
/* rays and flashes rotate/fade on their own compositor layer (the conic gradient + mask is rasterised once) */
.fx-rays { will-change: transform; }
.fx-flash { will-change: opacity; }
/* screen shake (on #view, never #app — that holds the fixed header and tab bar) */
.fx-shake.strong { animation-name: fxShakeStrong; }
@keyframes fxShakeStrong { 10%, 90% { transform: translate3d(-2px, 1px, 0); } 20%, 80% { transform: translate3d(5px, -3px, 0) rotate(.3deg); } 30%, 50%, 70% { transform: translate3d(-7px, 3px, 0) rotate(-.4deg); } 40%, 60% { transform: translate3d(6px, -2px, 0); } }
/* reel: the gate glows and throbs in the coming class colour during the B+ tease, then flashes on the stop */
.reel-wrap.tease::after { background: var(--c); animation: gateTease .22s ease-in-out infinite alternate; }
@keyframes gateTease { from { opacity: .75; transform: scaleY(.96); } to { opacity: 1; transform: scaleY(1.03); } }
.reel-wrap.stopped::after { background: var(--c, var(--accent)); animation: gateHit .45s ease-out; }
@keyframes gateHit { 0% { transform: scaleX(2.2); opacity: 1; } 100% { transform: scaleX(1); } }
.reel .car.winner { animation: winPop .5s cubic-bezier(.2, 1.6, .4, 1); }
.reel .car.winner.r3, .reel .car.winner.r4, .reel .car.winner.r5 { animation: winPop .5s cubic-bezier(.2, 1.6, .4, 1), winPulse .9s .5s ease-out 2; }
@keyframes winPop { 0% { transform: scale(1); } 45% { transform: translateY(-6px) scale(1.16); } 100% { transform: translateY(-5px) scale(1.08); } }
/* drop reveal: a burst of light in the class colour behind the car (the floor glow stays from pass 3) */
.reveal-wrap::before { content: ''; position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--c, #fff) 70%, #fff) 0%, color-mix(in srgb, var(--c, #fff) 35%, transparent) 30%, transparent 65%); }
.reveal-wrap:has(.art.reveal)::before { animation: revealGlow 1.1s ease-out .05s both; }
.reveal-wrap.r3:has(.art.reveal)::before, .reveal-wrap.r4:has(.art.reveal)::before, .reveal-wrap.r5:has(.art.reveal)::before { animation-duration: 1.6s; }
@keyframes revealGlow { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: .9; transform: scale(1.1); } 100% { opacity: .18; transform: scale(1); } }
.reveal-wrap.r0:has(.art.reveal)::before { animation-name: revealGlowSoft; }
@keyframes revealGlowSoft { 25% { opacity: .35; transform: scale(1); } 100% { opacity: 0; } }
/* «Нова в колекції»: one light sweep across the tag after it pops in */
.newtag.pop { position: relative; overflow: hidden; }
.newtag.pop::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, #fffc 50%, transparent 70%); transform: translateX(-120%); animation: tagSweep .8s 1.05s ease-in-out both; }
@keyframes tagSweep { to { transform: translateX(120%); } }
/* "+12 345 ₴" rising under the balance chip as coins land */
.fx-gain { position: fixed; z-index: 31; transform: translateX(-50%); pointer-events: none; font: 800 15px/1 var(--f-disp); color: #ffd500; letter-spacing: .2px; white-space: nowrap;
  text-shadow: 0 1px 0 #000, 0 0 10px #ffb30080; animation: gainUp 1.6s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes gainUp { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.8); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 70% { opacity: 1; transform: translate(-50%, 4px) scale(1); } 100% { opacity: 0; transform: translate(-50%, 14px) scale(.96); } }
/* claim / collect buttons: a quick shine as they are pressed (the squash itself is WAAPI) */
.btn.yellow:active, .btn[data-act="collect"]:active, .btn[data-act="claimDaily"]:active { filter: brightness(1.12); }
@media (prefers-reduced-motion: reduce) {
  .fx-shake, .fx-shake.strong, .reel-wrap.tease::after, .reel-wrap.stopped::after, .reel .car.winner, .newtag.pop::after { animation: none !important; }
  .reveal-wrap:has(.art.reveal)::before { animation: none; opacity: .2; }
  .fx-gain { animation-duration: .9s; }
}

/* ===== paint shop (Майстерня → Фарбування, app.js paintView) ===== */
.paint-cars { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 6px; padding: 2px 16px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.paint-cars::-webkit-scrollbar { display: none; }
.pcar { flex: none; width: 104px; display: flex; flex-direction: column; gap: 2px; padding: 6px 6px 5px; border-radius: var(--r); background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 -2px 0 color-mix(in srgb, var(--c) 55%, transparent); scroll-snap-align: start; text-align: left; }
.pcar .art { height: 38px; }
.pcar .art img { width: 100%; height: 100%; object-fit: contain; }
.pcar-nm { font-size: 11px; color: var(--muted); }
.pcar.on { background: var(--card2); box-shadow: inset 0 0 0 1.5px var(--accent); }
.pcar.on .pcar-nm { color: var(--text); }
.pcar.off { opacity: .55; }
.paint-hero { height: 158px; margin-top: 2px; }
.paint-hero .art img { transition: opacity .15s; }
.paint-now { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 26px; margin: 0 0 12px; font-size: 14px; flex-wrap: wrap; }
.paint-now .chip { display: inline-flex; align-items: center; gap: 4px; }
.sw-dot { width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px #ffffff30; }
.sw-dot.metallic, .sw.metallic i { background: radial-gradient(circle at 32% 28%, #ffffffb0, transparent 42%), linear-gradient(150deg, color-mix(in srgb, var(--sw) 70%, #fff), var(--sw) 55%, color-mix(in srgb, var(--sw) 60%, #000)); }
.sw-dot.factory, .sw.factory i { background: conic-gradient(#c0392b 0 25%, #f2c300 0 50%, #1f4fa8 0 75%, #eceeef 0); }
.paint-seg { margin-bottom: 10px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px 6px; margin-bottom: 10px; }
.sw { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 4px; border-radius: var(--r); }
.sw i { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #ffffff80, transparent 38%), var(--sw); box-shadow: inset 0 0 0 1px #ffffff26, 0 3px 8px -3px #000; transition: transform .12s; }
.sw.matte i { background: var(--sw); box-shadow: inset 0 0 0 1px #ffffff1a, 0 3px 8px -3px #000; }
.sw span { font-size: 11px; line-height: 1.15; color: var(--muted); text-align: center; }
.sw.on { background: var(--card2); }
.sw.on i { transform: scale(1.06); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.sw.on span { color: var(--text); }
.liveries { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.lv { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 10px 10px 9px 46px; min-height: 52px; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.lv:first-child { padding-left: 10px; }
.lv b { font-size: 13.5px; }
.lv span { font-size: 11px; color: var(--muted); line-height: 1.2; }
.lv i { position: absolute; left: 9px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 7px; box-shadow: inset 0 0 0 1px #ffffff26; }
.lv-stripes i { background: linear-gradient(#3a3f48 0 38%, #f4f4f4 0 54%, #3a3f48 0 62%, #c8102e 0 70%, #3a3f48 0); }
.lv-race i { background: radial-gradient(circle, #111 0 2.5px, #f7f7f7 3px 8px, transparent 8.5px), linear-gradient(#3a3f48 0 40%, #f4f4f4 0 60%, #3a3f48 0); }
.lv-ua i { background: linear-gradient(#0057b7 0 50%, #ffd500 0); }
.lv-camo i { background: radial-gradient(circle at 30% 30%, #2f3322 0 5px, transparent 6px), radial-gradient(circle at 70% 65%, #8a7f5a 0 6px, transparent 7px), radial-gradient(circle at 70% 25%, #6b6b3a 0 4px, transparent 5px), #4b5320; }
.lv-fade i { background: linear-gradient(90deg, #ff5f1f, #7b1fa2); }
.lv.on { background: var(--card2); box-shadow: inset 0 0 0 1.5px var(--accent); }
.paint-reset { display: block; margin: 8px auto 0; }
.paint-buy { margin-bottom: 12px; }

/* ===== Season car: showroom — night car reveal: violet haze, neon arc, grid floor, mirrored spotlights, turntable =====
   The scene is one 360x200 SVG (SHOWROOM_SVG in app.js); the car and its reflection are HTML on top, placed in the
   same 360x200 coordinates as percentages, so they scale together with the card. Car box: x 49..311, bottom y 149. */
.season-car { background: radial-gradient(120% 70% at 50% 28%, #141433 0%, #0a0d16 60%, var(--card) 100%); border-color: #2a2f52; overflow: hidden; position: relative; }
.season-car .showroom { position: relative; aspect-ratio: 360 / 200; margin: 2px -14px 4px; isolation: isolate; }
.season-car .sr-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.season-car .showroom .art, .season-car .sr-refl img { position: absolute; left: 50%; width: 72.78%; aspect-ratio: 5 / 2; transform: translateX(-50%); }
.season-car .showroom .art { bottom: 25.5%; z-index: 2; height: auto; }
.season-car .showroom .art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 3px 3px #000c) brightness(1.05) contrast(1.04); }
/* glossy turntable top: a flipped copy of the car, clipped to the top ellipse (x 30..330, y 126..174) */
.season-car .sr-refl { position: absolute; left: 8.333%; width: 83.333%; top: 63%; height: 24%; border-radius: 50%; overflow: hidden; z-index: 1; pointer-events: none; }
.season-car .sr-refl img { top: 47.9%; width: 87.33%; transform: translateX(-50%) scaleY(-1); opacity: .42;
  object-fit: contain; object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0, #0008 25%, transparent 60%); mask-image: linear-gradient(to top, #000 0, #0008 25%, transparent 60%); }
.season-car .sr-neon { animation: sr-pulse 3.6s ease-in-out infinite; }
.season-car .sr-spin { animation: sr-spin 7s linear infinite; }
@keyframes sr-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes sr-spin { to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) { .season-car .sr-neon, .season-car .sr-spin { animation: none; } .season-car .sr-spin { opacity: 0; } }
.season-car .showroom + b { margin-top: 2px; }

/* ===== No money for a case: ways to get going again ===== */
.card.broke { padding: 12px 12px 6px; border-color: #3a3216; background: linear-gradient(160deg, #221d0c, var(--card) 55%); }
.broke-h { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-weight: 700; margin-bottom: 6px; }
.broke-h .i { color: var(--accent); align-self: center; }
.broke-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #ffffff0d; }
.broke-row:first-of-type { border-top: 0; }
.broke-ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: #ffffff0a; color: var(--accent); }
.broke-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.broke-tx b { font-size: 14px; }
.broke-row .btn.sm { flex: none; width: auto; padding: 0 14px; min-height: 34px; margin: 0; }
.broke-row .chip { flex: none; }

/* ---------- career: country bosses («Гонки → Кар'єра») ---------- */
.career-hero .ch-n { font: 700 22px var(--f-disp); }
.career-hero .ch-n small { font-size: 14px; color: var(--muted); }
.cbar { height: 6px; margin: 8px 0 2px; border-radius: 3px; background: #ffffff12; overflow: hidden; }
.cbar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), #ffe27a); box-shadow: 0 0 10px var(--accent); }
.cmap { display: flex; align-items: flex-start; margin-top: 14px; }
.cmap .cm-line { flex: 1; min-width: 4px; height: 2px; margin-top: 13px; background: var(--line2); }
.cm { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.cm .flag-emb { width: 28px; height: 28px; vertical-align: 0; box-shadow: 0 0 0 2px #ffffff1f; transition: transform .15s; }
.cm small { display: inline-flex; align-items: center; height: 14px; font: 600 11px var(--f-disp); color: var(--muted); }
.cm small .i { width: 13px; height: 13px; }
.cm.lock .flag-emb { filter: grayscale(.8) brightness(.8); opacity: .75; }
.cm.done small { color: var(--green); }
.cm.here .flag-emb { box-shadow: 0 0 0 2px var(--accent), 0 0 14px var(--accent); transform: scale(1.12); }
.cm.here small { color: var(--accent); }
.boss-next { position: relative; overflow: hidden; margin-top: 12px; cursor: pointer;
  background: radial-gradient(110% 70% at 50% 34%, color-mix(in srgb, var(--c) 26%, transparent), transparent 72%), var(--card);
  border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); }
.boss-next.done { cursor: default; display: flex; flex-direction: column; align-items: center; padding: 22px 16px; }
.boss-next.done > .i { width: 40px; height: 40px; }
.bn-tag { display: flex; align-items: center; gap: 6px; font: 700 12px var(--f-disp); letter-spacing: .7px; text-transform: uppercase; color: var(--accent); }
.bn-art { height: 128px; margin: 6px 0 4px; display: flex; justify-content: center; }
.bn-art img, .bn-art svg { height: 100%; max-width: 100%; object-fit: contain; }
.bn-name { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.bn-name b { font: 700 22px var(--f-disp); letter-spacing: .3px; }
.taunt { position: relative; margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; background: #ffffff0a; border: 1px solid #ffffff12; font-style: italic; font-size: 13.5px; color: #d7dae0; }
.taunt.big { font-size: 14.5px; margin-top: 12px; text-align: center; }
.boss-next .btn { width: 100%; }
.diff.lock { color: var(--muted); border-color: var(--line2); }
.diff .i { width: 12px; height: 12px; vertical-align: -2px; }
.rival.boss.locked .grow > b, .rival.boss.locked .center b { opacity: .55; }
.rival.boss.open { background: linear-gradient(90deg, var(--accent-soft), transparent 70%); box-shadow: inset 3px 0 0 var(--accent); }
.rival.boss .grow > b .i { width: 15px; height: 15px; vertical-align: -2px; }
.boss-card .hero { height: 160px; }
.boss-card .bc-car { font: 700 19px var(--f-disp); margin-top: 4px; }
.boss-card .bc-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #ffffff0a; color: var(--accent); }
.boss-card .btn { width: 100%; }
.bstars { color: var(--accent); letter-spacing: 1px; }
.bstars i { font-style: normal; color: var(--line2); }
.boss-reward { margin: 12px 0; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background: radial-gradient(120% 90% at 50% 0%, var(--accent-soft), transparent 70%), var(--card); }
.boss-reward .hook-t { font: 700 17px var(--f-disp); color: var(--accent); }
.boss-reward .hook-t .i { color: var(--accent); }
.rw-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rw { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rw-ic { width: 46px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #ffffff0a; color: var(--accent); }
.rw-ic .flag-emb { width: 24px; height: 24px; }
.rw > b { font: 700 18px var(--f-disp); }
.rw .plate { --h: 24px; }
/* ===== Drag race 2.0 (app.js raceScreen / drScene / raceResult): a side view of a night strip ======================
   Sky → far city (parallax 0.05) → neon boards (0.22) → grid road in perspective + lamps (1.0) → boards, start and
   finish → the two cars (rival's lane further away, smaller). Only transform/opacity change per frame; the one
   looping animation is the engine idle during the lights. Reduced motion: no parallax, smoke, flames or shake. */
.drag { position: relative; }
.dr-scene { position: relative; height: 340px; overflow: hidden; border-radius: 16px; isolation: isolate; contain: layout paint; user-select: none; -webkit-user-select: none;
  background: #0a0e18; box-shadow: inset 0 0 0 1px #ffffff12, var(--drop); }
.dr-sky { position: absolute; left: 0; right: 0; top: 0; height: 198px;
  background: radial-gradient(70% 55% at 50% 100%, #ff3ea52e, transparent 70%), radial-gradient(40% 30% at 80% 100%, #3ee0ff22, transparent 70%), linear-gradient(#04060d, #0b1126 55%, #1a1440); }
.dr-par { position: absolute; left: 0; display: flex; will-change: transform; pointer-events: none; }
.dr-city { top: 88px; }
.dr-tile { flex: none; width: 480px; height: 110px; }
.dr-tile svg { display: block; }
.dr-neon { top: 152px; height: 46px; }
.dr-ntile { flex: none; position: relative; width: 360px; height: 46px; background: radial-gradient(circle, #ffd27a 0 1px, transparent 1.6px) 0 39px / 13px 4px repeat-x; }
.dr-bb { position: absolute; bottom: 12px; padding: 2px 6px 1px; border-radius: 3px; background: #0a0d18d9; color: var(--c); font: italic 800 10.5px/1.2 var(--f-disp); letter-spacing: .6px;
  box-shadow: inset 0 0 0 1.5px var(--c), 0 0 10px color-mix(in srgb, var(--c) 55%, transparent); text-shadow: 0 0 6px var(--c); white-space: nowrap; }
.dr-bb::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 10px; background: #1d2436; }
.dr-road { position: absolute; left: 0; right: 0; top: 198px; bottom: 0; background: linear-gradient(#161c2b, #0c1019 60%, #0a0d15); }
.dr-road::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #3a4560; box-shadow: 0 1px 0 #00000080; z-index: 1; }
.dr-road::after { content: ''; position: absolute; left: 0; right: 0; bottom: 5px; height: 2px; background: #ffffff38; }
.dr-floor { position: absolute; inset: 0; overflow: hidden; perspective: 230px; perspective-origin: 50% -40px; }
.dr-plane { position: absolute; left: -40%; right: -40%; top: 0; height: 300px; transform-origin: 50% 0; transform: rotateX(70deg); }
.dr-grid { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% + 90px); will-change: transform;
  background-image: repeating-linear-gradient(90deg, #7b6cff55 0 2px, transparent 2px 90px), repeating-linear-gradient(0deg, #7b6cff2a 0 2px, transparent 2px 64px); }
.dr-dashes { position: absolute; left: 0; right: 0; top: 63px; height: 3px; overflow: hidden; }
.dr-dashes i { display: block; width: calc(100% + 90px); height: 100%; will-change: transform; background: repeating-linear-gradient(90deg, #ffffffb8 0 46px, transparent 46px 90px); }
.dr-lamps { position: absolute; left: 0; top: 0; height: 340px; width: calc(100% + 225px); display: flex; will-change: transform; pointer-events: none; }
.dr-lamp { flex: none; position: relative; width: 225px; height: 100%; background: radial-gradient(70px 16px at 44px 216px, #ffd27a24, transparent 70%); }
.dr-lamp::before { content: ''; position: absolute; left: 30px; top: 130px; width: 3px; height: 70px; background: linear-gradient(#4a5470, #1d2333); }
.dr-lamp::after { content: ''; position: absolute; left: 30px; top: 127px; width: 28px; height: 4px; border-radius: 2px; background: #fff3cf; box-shadow: 0 0 8px 2px #ffd27a99, 0 0 26px 8px #ffd27a33; }
.dr-mk { position: absolute; left: 0; top: 0; width: 0; height: 340px; will-change: transform; pointer-events: none; }
.dr-mk b { position: absolute; white-space: nowrap; font: 800 10.5px/1.3 var(--f-disp); letter-spacing: .5px; }
.dr-mk.num::before { content: ''; position: absolute; left: -1px; top: 176px; width: 2px; height: 22px; background: #2c3449; }
.dr-mk.num::after { content: ''; position: absolute; left: -1px; top: 201px; width: 2px; height: 134px; background: #ffffff1f; }
.dr-mk.num b { left: 0; top: 160px; transform: translateX(-50%); padding: 1px 5px; border-radius: 3px; background: #0b0f18; color: var(--accent); box-shadow: inset 0 0 0 1px #ffc40066; }
.dr-mk.start::after { content: ''; position: absolute; left: -2px; top: 201px; width: 4px; height: 134px; background: #ffffffd0; }
.dr-mk.start b { left: 0; top: 174px; transform: translateX(-50%); padding: 1px 5px; border-radius: 3px; background: #ffffffe6; color: #0a0d15; }
.dr-mk.finish::before { content: ''; position: absolute; left: -7px; top: 201px; width: 14px; height: 134px; background: conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0 / 14px 14px; opacity: .9; }
.dr-mk.finish::after { content: ''; position: absolute; left: -2px; top: 124px; width: 4px; height: 76px; background: linear-gradient(#3a4560, #1d2333); }
.dr-mk.finish b { left: 0; top: 102px; transform: translateX(-50%); padding: 3px 9px 2px; border-radius: 4px; background: #0a0d18; color: var(--accent-hi); font-size: 14px;
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 16px #ffc40080; text-shadow: 0 0 8px #ffc400aa; }
.dr-streaks { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 1; }
.dr-streaks i { position: absolute; left: 0; height: 2px; width: 90px; border-radius: 1px; background: linear-gradient(90deg, transparent, #ffffff8c); will-change: transform; }
.dr-streaks i:nth-child(1) { top: 106px; width: 70px; opacity: .5; }
.dr-streaks i:nth-child(2) { top: 144px; width: 120px; opacity: .6; }
.dr-streaks i:nth-child(3) { top: 216px; }
.dr-streaks i:nth-child(4) { top: 254px; width: 140px; }
.dr-streaks i:nth-child(5) { top: 288px; width: 70px; }
.dr-streaks i:nth-child(6) { top: 326px; width: 160px; }
.dr-car { position: absolute; left: 0; z-index: 2; will-change: transform; pointer-events: none; }
.dr-car.rv { bottom: 86px; width: 112px; }
.dr-car.me { bottom: 9px; width: 146px; z-index: 3; }
.dr-bod { position: relative; transform-origin: 22% 92%; will-change: transform; }
.dr-bod img, .dr-bod svg { display: block; width: 100%; height: auto; }
.dr-car.rv .dr-bod img, .dr-car.rv .dr-bod svg { filter: brightness(.9); }
.dr-shd { position: absolute; left: 3%; right: 1%; bottom: -4px; height: 10px; border-radius: 50%; background: radial-gradient(closest-side, #000000d0, transparent); }
.dr-beam { position: absolute; left: 94%; bottom: 14%; width: 110px; height: 34px; background: linear-gradient(90deg, #fff6c860, transparent); clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 62%); }
.dr-car.rv .dr-beam { width: 80px; opacity: .6; }
.dr-flame { position: absolute; left: -16px; bottom: 20%; width: 24px; height: 10px; border-radius: 50%; opacity: 0;
  background: radial-gradient(ellipse at 100% 50%, #fff 0, #ffd24a 30%, #ff6a00 58%, transparent 72%); }
.dr-car.fl .dr-flame { animation: drFlame .28s ease-out; }
@keyframes drFlame { 0% { opacity: 1; transform: scaleX(.4); transform-origin: 100% 50%; } 40% { opacity: 1; transform: scaleX(1.3); } 100% { opacity: 0; transform: scaleX(.8); } }
.dr-smoke { position: absolute; left: 4%; bottom: -4px; width: 40px; height: 30px; pointer-events: none; }
.dr-smoke i { position: absolute; left: 0; bottom: 0; width: 44px; height: 40px; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, #e4e9f2e0, #d5dbe680 45%, #c9d0dc00); }
.dr-car.burn .dr-smoke i { animation: drPuff 1.2s ease-out forwards; }
.dr-smoke i:nth-child(1) { --x: -60px; --y: -10px; }
.dr-smoke i:nth-child(2) { --x: -90px; --y: -22px; animation-delay: .07s !important; }
.dr-smoke i:nth-child(3) { --x: -50px; --y: -30px; animation-delay: .15s !important; }
.dr-smoke i:nth-child(4) { --x: -110px; --y: -8px; animation-delay: .24s !important; }
.dr-smoke i:nth-child(5) { --x: -80px; --y: -36px; animation-delay: .34s !important; }
@keyframes drPuff { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 14% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(2.6); } }
.drag.rev .dr-car.me .dr-bod { animation: drRev .09s linear infinite alternate; }
@keyframes drRev { to { transform: translateY(-.7px) rotate(-.3deg); } }
.dr-tag { position: absolute; left: 12%; bottom: calc(100% + 2px); display: flex; gap: 5px; align-items: baseline; max-width: 190%; padding: 1px 7px 2px; border-radius: 999px;
  background: #0a0d18d9; box-shadow: inset 0 0 0 1px #ffffff1a; font: 600 10.5px/1.3 var(--f-body); color: var(--muted); white-space: nowrap; }
.dr-tag b { font: 800 11.5px/1.2 var(--f-disp); color: #dfe5ef; min-width: 0; }
.dr-car.me .dr-tag { bottom: calc(100% - 4px); }
.dr-car.me .dr-tag b { color: var(--accent); }
.dr-off { position: absolute; top: 212px; z-index: 4; padding: 3px 8px; border-radius: 999px; background: #0a0d18e0; box-shadow: inset 0 0 0 1px #ffffff1f;
  color: #cdd5e3; font: 800 11.5px/1.2 var(--f-disp); opacity: 0; transition: opacity .2s; pointer-events: none; }
.dr-off.l { left: 6px; }
.dr-off.r { right: 6px; }
.dr-off.on { opacity: 1; }
.dr-hud { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; justify-content: space-between; z-index: 4; pointer-events: none; }
.dr-hud > div { min-width: 78px; padding: 4px 9px 5px; border-radius: 10px; background: #070a10c8; box-shadow: inset 0 0 0 1px #ffffff14; }
.dr-hud .right { text-align: right; }
.dr-hud small { display: block; font: 700 9.5px/1.3 var(--f-body); color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.dr-hud b { display: block; font: 800 21px/1.05 var(--f-disp); font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; }
.dr-hud b.win { color: var(--green); }
.dr-hud b.lose { color: var(--red); }
.dr-tree { position: absolute; left: 50%; top: 10px; z-index: 4; display: flex; gap: 7px; padding: 7px 10px; border-radius: 999px; transform: translateX(-50%);
  background: #05070d; box-shadow: inset 0 0 0 1px #ffffff14, 0 6px 16px #0009; transition: opacity .35s, transform .35s; }
.dr-tree i { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2b3342, #151a23); box-shadow: inset 0 0 0 1px #ffffff10; }
.dr-tree i.amber { background: radial-gradient(circle at 40% 35%, #fff3b0, #ffc400 45%, #d99a00); box-shadow: 0 0 14px #ffc400aa; }
.dr-tree i.green { background: radial-gradient(circle at 40% 35%, #c9ffe0, #2fd27a 45%, #16a35a); box-shadow: 0 0 18px #2fd27aaa; }
.dr-tree i.red { background: radial-gradient(circle at 40% 35%, #ffd0d4, #ff4d5a 45%, #c8202e); box-shadow: 0 0 14px #ff4d5aaa; }
.dr-tree.off { opacity: 0; transform: translate(-50%, -14px) scale(.85); }
.dr-msg { --mc: var(--accent); position: absolute; left: 50%; top: 70px; z-index: 6; width: max-content; max-width: 88%; padding: 8px 14px 9px; border-radius: 12px; text-align: center;
  background: #070a10eb; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mc) 55%, transparent), 0 10px 24px #000a; opacity: 0; transform: translate(-50%, -6px) scale(.96);
  transition: opacity .2s, transform .2s; pointer-events: none; }
.dr-msg.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.dr-msg b { display: block; font: 800 25px/1.05 var(--f-disp); transform: var(--slant); color: var(--mc); }
.dr-msg small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: #d4dae5; }
.dr-msg.bad { --mc: var(--red); }
.dr-msg.win { --mc: var(--green); }
.dr-pops { position: absolute; left: 0; right: 0; top: 70px; height: 70px; z-index: 5; pointer-events: none; }
.dr-pop { position: absolute; left: 50%; top: 0; text-align: center; white-space: nowrap; transform: translateX(-50%); animation: drPop 1.25s ease-out forwards; }
.dr-pop b { display: block; font: 800 23px/1.05 var(--f-disp); transform: var(--slant); color: #fff; text-shadow: 0 2px 10px #000, 0 0 2px #000; }
.dr-pop small { display: inline-block; margin-top: 4px; padding: 1px 8px 2px; border-radius: 999px; background: #070a10c8; font: 700 11.5px/1.3 var(--f-body); color: #dfe5ef; }
.dr-pop.q-perfect b { color: #4cd38a; }
.dr-pop.q-early b, .dr-pop.q-late b { color: #f2c14e; }
.dr-pop.q-bad b { color: var(--red); }
@keyframes drPop { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.8); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 22% { transform: translate(-50%, 0) scale(1); }
  75% { opacity: 1; transform: translate(-50%, -4px); } 100% { opacity: 0; transform: translate(-50%, -16px); } }
/* dash: tachometer with the shift zones and the gear in the middle, speed, the 402 m strip, the four shifts */
.dr-panel { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 8px 12px 8px 8px; border-radius: 16px; background: var(--surf, var(--card)); box-shadow: inset 0 0 0 1px #ffffff0d, var(--edge, none); }
.dr-tacho { position: relative; flex: none; width: 112px; height: 112px; }
.dr-tacho svg { display: block; width: 100%; height: 100%; }
.dr-tacho::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; opacity: 0; transition: opacity .08s; background: radial-gradient(circle, transparent 46%, #2fd27a40 70%, transparent 72%); }
.dr-tacho[data-z="perf"]::before { opacity: 1; }
.dr-tacho[data-z="red"]::before { opacity: 1; background: radial-gradient(circle, transparent 46%, #ff4d5a48 70%, transparent 72%); }
.dr-tacho .g-bg { fill: none; stroke: #070a10; stroke-width: 9; }
.dr-tacho .g-good { fill: none; stroke: #1c6a43; stroke-width: 9; }
.dr-tacho .g-perf { fill: none; stroke: #2fd27a; stroke-width: 9; }
.dr-tacho .g-red { fill: none; stroke: #c8202e; stroke-width: 9; }
.dr-tacho .g-tick { stroke: #ffffff45; stroke-width: 1.5; }
.dr-needle { position: absolute; left: 54.5px; top: 6px; width: 3px; height: 28px; border-radius: 2px; background: linear-gradient(#fff, #ffc400); transform-origin: 50% 50px;
  box-shadow: 0 0 6px #ffc40099; will-change: transform; }
.dr-tacho b { position: absolute; left: 0; right: 0; top: 36px; text-align: center; font: 800 34px/1 var(--f-disp); color: #fff; }
.dr-tacho small { position: absolute; left: 0; right: 0; top: 72px; text-align: center; font: 700 9px/1 var(--f-body); color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.dr-read { flex: 1; min-width: 0; }
.dr-spd { display: flex; align-items: baseline; gap: 5px; }
.dr-spd b { font: 800 36px/1 var(--f-disp); font-variant-numeric: tabular-nums; }
.dr-spd small { font: 600 12px var(--f-body); color: var(--muted); }
.dr-map { position: relative; height: 6px; margin: 10px 6px 0; border-radius: 3px; background: #070a10; box-shadow: inset 0 0 0 1px #ffffff12; }
.dr-map i { position: absolute; top: 50%; left: -6px; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; will-change: transform; }
.dr-map i.me { background: var(--accent); box-shadow: 0 0 0 2px #070a10; }
.dr-map i.rv { left: -5px; width: 10px; height: 10px; margin-top: -5px; background: #aab3c2; box-shadow: 0 0 0 2px #070a10; }
.dr-map-l { display: flex; justify-content: space-between; margin: 5px 0 0; font: 600 10px/1.2 var(--f-body); color: var(--muted); }
.dr-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.dr-slots span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 0; border-radius: 6px; text-align: center;
  background: #0e131b; color: #5d677b; box-shadow: inset 0 0 0 1px #ffffff0d; font: 700 11px/1.2 var(--f-disp); }
.dr-slots span.q-perfect { background: #0f2a1d; color: #4cd38a; box-shadow: inset 0 0 0 1px #1f4a33; }
.dr-slots span.q-good { background: #1a212d; color: var(--text); }
.dr-slots span.q-early, .dr-slots span.q-late { background: #2a220c; color: #f2c14e; box-shadow: inset 0 0 0 1px #4a3c14; }
.dr-hint { min-height: 19px; margin: 10px 0 8px; text-align: center; font-size: 13px; color: var(--muted); }
.drag .racebtn { margin: 0; }
.drag .racebtn.now { box-shadow: 0 0 0 3px #2fd27a, 0 0 26px #2fd27a90; }
/* first-race card over the whole race screen */
.dr-coach { position: absolute; inset: -4px; z-index: 10; display: flex; align-items: center; padding: 16px; border-radius: 18px; background: #070a10f2; }
.dr-coach-in { width: 100%; }
.dr-coach-t { display: block; margin-bottom: 14px; font: 800 28px/1.05 var(--f-disp); transform: var(--slant); transform-origin: left; color: var(--accent); }
.dr-step { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; font-size: 14px; line-height: 1.42; color: #c9d1de; }
.dr-step b { color: #fff; }
.dr-ci { flex: none; width: 52px; height: 22px; margin-top: 1px; border-radius: 6px; }
.dr-ci.lights { display: flex; gap: 3px; align-items: center; justify-content: center; background: #05070d; box-shadow: inset 0 0 0 1px #ffffff14; }
.dr-ci.lights i { width: 9px; height: 9px; border-radius: 50%; background: #ffc400; }
.dr-ci.lights i.g { background: #2fd27a; }
.dr-ci.zone, .dr-ci.red { height: 10px; margin-top: 6px; border-radius: 3px; background: linear-gradient(90deg, #262f3f 0 55%, #1c6a43 55% 68%, #2fd27a 68% 86%, #c8202e 86%); }
.dr-ci.red { box-shadow: inset -9px 0 0 #ff4d5a, 0 0 10px #ff4d5a66; }
.dr-coach .btn { margin-top: 6px; height: 56px; font: 800 20px/1 var(--f-disp); }
/* rival list: the rules fold away */
.dr-how { margin-top: 2px; }
.dr-how summary { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; list-style: none; cursor: pointer; font: 700 13px var(--f-body); color: var(--muted); }
.dr-how summary::-webkit-details-marker { display: none; }
.dr-how summary .i { width: 16px; height: 16px; }
.dr-how[open] summary { color: var(--text); }
/* result: photo finish, both times, what decided it, two buttons */
.dr-photo { position: relative; height: 118px; margin: 0 0 10px; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px #ffffff10;
  background: radial-gradient(60% 50% at 70% 42%, #ffc4001a, transparent 70%), linear-gradient(#090d1a, #0f1528 40%, #171d2c 40%, #0b0f18); }
.dr-photo-t { position: absolute; left: 10px; top: 8px; font: 700 10px/1 var(--f-body); color: var(--muted); text-transform: uppercase; letter-spacing: .7px; }
.dr-photo-line { position: absolute; left: 72%; top: 47px; bottom: 0; width: 10px; margin-left: -5px; background: conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0 / 10px 10px; opacity: .85; }
.dr-pcar { position: absolute; right: 28%; }
.dr-pcar.rv { bottom: 52px; width: 100px; }
.dr-pcar.rv img, .dr-pcar.rv svg { filter: brightness(.8); }
.dr-pcar.me { bottom: 4px; width: 140px; }
.dr-pcar img, .dr-pcar svg { display: block; width: 100%; height: auto; }
.dr-times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.dr-times > div { display: flex; flex-direction: column; min-width: 0; padding: 9px 12px 10px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px #ffffff0d; }
.dr-times small { font: 700 11.5px/1.3 var(--f-body); color: var(--muted); }
.dr-times b { font: 800 23px/1.15 var(--f-disp); font-variant-numeric: tabular-nums; }
.dr-times span { font-size: 12px; color: var(--muted); }
.dr-times .won { background: linear-gradient(#2fd27a17, transparent 70%), var(--card); box-shadow: inset 0 0 0 1.5px #2fd27a5c; }
.dr-times .won b { color: var(--green); }
.dr-sum { padding: 12px; }
.dr-row { display: flex; gap: 10px; align-items: flex-start; }
.dr-row + .dr-row { margin-top: 12px; }
.dr-dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: #cfd6e2; }
.dr-dot.q-perfect { background: var(--green); }
.dr-dot.q-early, .dr-dot.q-late { background: #f2c14e; }
.dr-dot.q-bad { background: var(--red); }
.dr-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.dr-tip { display: flex; gap: 8px; margin-top: 12px; padding: 9px 10px; border-radius: 10px; background: #ffc40010; color: #f1e2b4; font-size: 13px; line-height: 1.4; }
.dr-tip .i { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--accent); }
.dr-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.dr-btns .btn { padding: 14px 8px; }
@media (max-width: 350px) { .dr-tacho { width: 100px; height: 100px; } .dr-tacho b { top: 31px; font-size: 30px; } .dr-tacho small { top: 63px; }
  .dr-needle { left: 48.5px; top: 5px; height: 25px; transform-origin: 50% 45px; } .dr-spd b { font-size: 30px; } }
.drag.rm .dr-streaks, .drag.rm .dr-smoke, .drag.rm .dr-flame, .drag.rm .dr-mk.num b { display: none; }
@media (prefers-reduced-motion: reduce) {
  .drag .dr-bod { animation: none !important; }
  .dr-pop { animation-name: drPopFade; }
  .dr-tree, .dr-msg { transition: none; }
}
@keyframes drPopFade { 0% { opacity: 0; } 10%, 75% { opacity: 1; } 100% { opacity: 0; } }
/* ---------- progressive unlock (S.UNLOCKS) and casino note ---------- */
.lockchip { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; padding: 2px 7px; border-radius: 5px; background: #ffffff0d; color: var(--muted); font: 600 11px var(--f-body); white-space: nowrap; flex: none; }
.li.locked { opacity: .62; }
.li.locked .mi { filter: grayscale(1); }
.li.locked .sub { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.li.locked .sub + .lockchip { margin-left: 6px; }
.seg button.locked { color: var(--muted); opacity: .7; }
.seg button.locked .i { font-size: 12px; margin-right: 3px; }
.tabs button.locked { opacity: .55; }
.tabs button.locked::after { content: ''; position: absolute; top: 6px; right: calc(50% - 17px); width: 9px; height: 9px; border-radius: 50%; background: var(--muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 11V8a5 5 0 0 1 10 0v3' fill='none' stroke='%230b0c0f' stroke-width='3'/%3E%3Crect x='5' y='11' width='14' height='10' rx='2' fill='%230b0c0f'/%3E%3C/svg%3E") center / 7px no-repeat; }
.lockcard { padding: 8px 4px 4px; }
.lockcard .big { display: block; margin-top: 8px; }
.lockcard .progress { max-width: 260px; margin-left: auto; margin-right: auto; }
.lockic { position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--card2); color: var(--accent); font-size: 32px; }
.lockic i { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line2); color: var(--muted); font-size: 13px; }
.list.unlocked .li { text-align: left; }
.unlocked-h { justify-content: center; color: var(--accent); }
.casino-warn { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; padding: 10px 12px; border-radius: var(--r); background: #f5b3010f; border: 1px solid #f5b30140; color: var(--text); font-size: 13px; }
.casino-warn > .i { color: var(--accent); font-size: 18px; flex: none; margin-top: 1px; }
.casino-warn .tiny { color: var(--muted); margin-top: 2px; line-height: 1.35; }

/* ============================================================================================================
   «Меню» hub (TABS.menu): profile on top, the day's rewards as big lit tiles, trading as small ones, the shop,
   then help and one «Налаштування» row. Same showroom language as the car bays: a dark surface, a thin lit top
   edge, and a soft floor light in the tile's own colour. Transform/opacity only; no loops under reduced motion.
   ============================================================================================================ */
.hub { padding-bottom: 8px; }
.hub-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 18px 2px 8px; font: 600 13px var(--f-disp); letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); }
.hub-h > span + span { font: 600 11px var(--f-body); letter-spacing: 0; text-transform: none; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.hub .acc { color: var(--accent); }
.hub .hub-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; font-size: 20px;
  color: color-mix(in srgb, var(--c, #8a94a7) 72%, #fff); background: color-mix(in srgb, var(--c, #8a94a7) 15%, #0e131b);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #8a94a7) 38%, transparent), inset 0 1px 0 #ffffff14; }
.hub-i { display: block; font-size: 12px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-i .i { width: 12px; height: 12px; vertical-align: -1px; color: var(--accent); }

/* profile header: avatar in the level ring, name, chips, XP line, garage value, notifications bell */
.hub-me { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 10px; border-radius: 16px; cursor: pointer;
  background: radial-gradient(70% 120% at 0% 0%, #ffc4001c, transparent 60%), var(--surf); box-shadow: inset 0 0 0 1px #ffffff12, var(--edge), var(--drop);
  transition: transform .14s var(--ease); }
.hub-me:active { transform: scale(.985); }
.hub-ava { position: relative; width: 58px; height: 58px; flex: none; color: var(--accent); }
.hub-ava svg { position: absolute; inset: 0; }
.hub-ava .face { position: absolute; inset: 7px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #1c2433; font: 700 20px var(--f-disp); color: var(--text); }
.hub-ava .face img { width: 100%; height: 100%; object-fit: cover; }
.hub-ava .lvl { position: absolute; right: -4px; bottom: -2px; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); border: 2px solid #121823; font: 800 12px/16px var(--f-disp); text-align: center; }
.hub-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hub-who > b { font: 700 19px/1.1 var(--f-disp); letter-spacing: .2px; }
.hub-chips { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.hc { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 6px; background: #ffffff0d; color: #c3cad6; font: 600 11px/1.35 var(--f-body); white-space: nowrap; flex: none; }
.hc .i { width: 11px; height: 11px; }
.hc.career { color: #ffd84d; background: #ffc40014; box-shadow: inset 0 0 0 1px #ffc40033; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hc.vip { color: var(--accent-ink); background: var(--accent); }
.hub-xp { display: block; height: 4px; border-radius: 2px; background: #0b0f16; box-shadow: inset 0 0 0 1px #ffffff0a; overflow: hidden; max-width: 170px; }
.hub-xp > i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #f0a800, #ffd84d); }
.hub-val { flex: none; display: flex; flex-direction: column; align-items: flex-end; margin-right: 38px; }
.hub-val small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; }
.hub-val b { font: 700 17px var(--f-disp); color: var(--text); white-space: nowrap; }
.hub-bell { position: absolute; top: 50%; right: 10px; translate: 0 -50%; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; color: #c3cad6; background: #0e131b; box-shadow: inset 0 0 0 1px #ffffff14; }
.hub-bell .hub-cnt { position: absolute; top: -6px; right: -6px; margin: 0; }

/* red counter: only where something waits for a tap */
.hub-cnt { flex: none; margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff; font: 800 12.5px var(--f-disp); transform: skewX(-8deg); box-shadow: 0 0 0 2px #121823, 0 4px 10px -3px #e5484d99; }
.hub-new { flex: none; margin-left: auto; padding: 2px 6px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font: 800 10.5px var(--f-disp); letter-spacing: .5px; text-transform: uppercase; }

/* season pass: the gold showroom stripe */
.hub-pass { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 10px; padding: 13px 14px 12px; border-radius: 16px; text-align: left; position: relative; overflow: hidden;
  --c: #ffc400; background: radial-gradient(60% 90% at 100% 0%, #ffc40026, transparent 65%), linear-gradient(120deg, #2a2209, #151a24 62%);
  box-shadow: inset 0 0 0 1px #ffc40040, var(--edge), var(--drop); transition: transform .14s var(--ease); }
.hub-pass:active { transform: scale(.985); }
.hub-pass-h { display: flex; align-items: center; gap: 11px; }
.hub-pass-h b { display: block; font: 700 18px/1.15 var(--f-disp); }
.hub-pass-lv { flex: none; font-family: var(--f-disp); color: var(--accent); }
.hub-pass-lv b { font-size: 26px; font-weight: 800; }
.hub-pass-lv small { font-size: 14px; color: #c9a646; }
.hub-pass .progress { display: block; height: 6px; }
.hub-pass-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.hub-pass-f .i { width: 13px; height: 13px; vertical-align: -2px; }
.hub-claim { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font: 800 13.5px var(--f-disp); letter-spacing: .3px; }
.hub-claim { position: relative; }
.hub-pass.ready .hub-claim::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--accent); pointer-events: none; animation: hubGlow 2.2s ease-out infinite; }
@keyframes hubGlow { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.12, 1.4); } }

/* tile grids */
.hub-grid { display: grid; gap: 8px; }
.hub-grid.g2 { grid-template-columns: 1fr 1fr; }
.hub-grid.g4 { grid-template-columns: repeat(4, 1fr); }
.hub-t { position: relative; display: flex; text-align: left; border-radius: 14px; isolation: isolate; overflow: hidden;
  background: var(--surf); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, #ffffff0a), var(--edge), var(--drop); transition: transform .14s var(--ease); }
.hub-t::after { content: ''; position: absolute; z-index: -1; left: 10%; right: 10%; bottom: -30%; height: 60%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%); }
.hub-t:active { transform: scale(.965); }
.hub-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hub-tx > b { font: 700 16px/1.15 var(--f-disp); letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* tall: icon on top, title, one live line (2 per row) */
.hub-t.tall { flex-direction: column; gap: 9px; padding: 12px 12px 11px; min-height: 104px; }
.hub-t.tall .hub-cnt, .hub-t.tall .hub-new, .hub-live { position: absolute; top: 10px; right: 10px; margin: 0; }
.hub-bar { display: block; height: 3px; margin-top: 4px; border-radius: 2px; background: #0b0f16; overflow: hidden; }
.hub-bar > i { display: block; height: 100%; background: color-mix(in srgb, var(--c) 80%, #fff); border-radius: 2px; }
.hub-live { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 5px; border-radius: 6px; font: 700 10px var(--f-body); text-transform: uppercase; letter-spacing: .5px;
  color: color-mix(in srgb, var(--c) 70%, #fff); background: color-mix(in srgb, var(--c) 18%, #0e131b); }
.hub-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: hubBlink 1.6s ease-in-out infinite; }
@keyframes hubBlink { 50% { opacity: .25; } }
.hub-t.live { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), var(--edge), var(--drop); }
/* wide: icon left, two lines (2 per row) */
.hub-t.wide { align-items: center; gap: 10px; padding: 10px 10px; }
.hub-t.wide .hub-ic { width: 34px; height: 34px; font-size: 18px; border-radius: 10px; }
.hub-t.wide .hub-tx > b { font-size: 15px; }
.hub-t.wide .hub-new, .hub-t.wide .hub-cnt { position: absolute; bottom: 3px; left: 27px; translate: -50% 0; right: auto; margin: 0; }
.hub-t.wide .hub-new { padding: 1px 4px; font-size: 9.5px; }
/* mini: an app-shortcut (4 per row) */
.hub-t.mini { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 11px 4px 9px; }
.hub-t.mini .hub-tx { align-items: center; width: 100%; }
.hub-t.mini .hub-tx > b { font: 600 13px/1.15 var(--f-disp); max-width: 100%; }
.hub-t.mini .hub-i { font-size: 11px; }
.hub-t.mini .hub-cnt, .hub-t.mini .hub-new { position: absolute; top: 5px; right: 5px; margin: 0; }
.hub-t.mini .lockchip { margin: 1px 0 0; padding: 1px 5px; font-size: 10.5px; }
/* locked: steel, no colour, lock chip says the level */
.hub-t.locked { box-shadow: inset 0 0 0 1px #ffffff0a, var(--edge); background: #121721; }
.hub-t.locked::after { display: none; }
.hub-t.locked .hub-ic { filter: grayscale(1); opacity: .55; }
.hub-t.locked .hub-tx > b { color: #8b93a1; }
.hub-t.wide.locked .lockchip, .hub-t.tall.locked .lockchip { margin: 3px 0 0; align-self: flex-start; }

/* shop: one wide row with the VIP crown */
.hub-store { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border-radius: 14px; text-align: left; --c: #ffc400;
  background: linear-gradient(100deg, #ffc40014, transparent 55%), var(--surf); box-shadow: inset 0 0 0 1px #ffc40030, var(--edge), var(--drop); transition: transform .14s var(--ease); }
.hub-store:active { transform: scale(.985); }
.hub-store b { display: block; font: 700 16px var(--f-disp); }
.hub-store .hc { color: var(--accent); }
.hub-store .chev { color: #4a5568; display: inline-flex; }
.hub .menu-list .li > b { font-size: 15.5px; }
.hub .menu-list .li { padding: 9px 12px; }
.hub .menu-list .mi { width: 30px; height: 30px; font-size: 16px; border-radius: 9px; }

/* entrance: tiles rise in a short stagger; updated tiles flash once */
.hub-me, .hub-pass, .hub-grid > *, .hub-store { animation: hubIn .32s var(--ease) both; }
.hub-pass { animation-delay: .03s; }
.hub-grid > :nth-child(2) { animation-delay: .04s; } .hub-grid > :nth-child(3) { animation-delay: .07s; } .hub-grid > :nth-child(4) { animation-delay: .09s; }
.hub-grid > :nth-child(5) { animation-delay: .11s; } .hub-grid > :nth-child(6) { animation-delay: .13s; }
@keyframes hubIn { from { opacity: 0; transform: translateY(8px); } }
.hub .upd { animation: none; }
.hub .upd .hub-i { animation: hubUpd .5s var(--ease); }
@keyframes hubUpd { from { opacity: .3; } }
@media (max-width: 370px) {
  .hub-t.tall { min-height: 98px; padding: 11px 10px 10px; }
  .hub-tx > b { font-size: 15px; }
  .hub-val b { font-size: 15.5px; }
  .hub-who > b { font-size: 17.5px; }
  .hub-t.mini .hub-tx > b { font-size: 12.5px; }
  .hub-t.wide .hub-i { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-me, .hub-pass, .hub-grid > *, .hub-store, .hub .upd .hub-i { animation: none !important; }
  .hub-pass.ready .hub-claim::after { animation: none; opacity: .35; }
  .hub-live::before { animation: none; }
}

/* ============================================================================================================
   final: design review pass (reports/final.md). Scoped overrides, nothing above is removed.
   1 reward banners live in the page flow under the header (a strip, not an overlay)   2 one yellow per screen:
   row-level «Забрати» / price buttons are outlined   3 class A is orange (yellow = action / selection / money only)
   4 lit car niches in rival and list rows   5 drag strip: neon boards up in the skyline, pilot tags on solid plates
   6 segmented control never wraps at 360 px   7 paint strip marks cars without a mask   8 intro on the showroom stage
   9 hub headings in normal case   10 room under the raised «Кейси» button
   ============================================================================================================ */
/* 1 banners: a sticky strip right under the header; it pushes the screen down instead of covering its title */
#banners { position: sticky; top: 60px; left: auto; right: auto; z-index: 4; padding: 0 16px 8px; pointer-events: none; }
#banners:empty { padding: 0; }
#banners.stacked:not(.open) .banner.behind { left: 16px; right: 16px; }
.banner { transform: translateY(-24px); }
.banner.in { transform: translateY(0); }
.banner.out { transform: translateY(-24px); }
.banner .grow b { font-size: 14.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.15; }
/* 2 one filled yellow per screen: claims and prices inside lists are outlined, the screen's main action stays filled */
.btn.sm[data-act="achClaim"], .btn.sm[data-act="collClaim"], .btn.sm[data-act="setClaim"], .btn.sm[data-act="questClaim"], .btn.sm[data-act="wkClaim"],
.btn.sm[data-act="buy"], .btn.sm[data-act="itemBuy"], .btn.sm[data-act="claimRewardCase"], .btn.sm[data-act="newbieClaim"], .btn.sm[data-act="rescueClaim"] {
  background: #ffc40012; color: var(--accent-hi); box-shadow: inset 0 0 0 1.5px #ffc40070; text-shadow: none; }
.btn.sm[data-act="achClaim"]:active, .btn.sm[data-act="collClaim"]:active, .btn.sm[data-act="buy"]:active { background: #ffc40028; }
/* 4 small cars in rows stand in a lit niche: a lighter wall behind, class light under the wheels, a 2 px class line */
.rival .mini.art.lit { width: 104px; height: 58px; }
.li > .mini.art.lit { width: 92px; height: 52px; }
.rival .mini.art.lit, .li > .mini.art.lit { padding: 5px 6px 3px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, #2a3446, #1a2130 58%, #121823); box-shadow: inset 0 0 0 1px #ffffff12, inset 0 -2px 0 color-mix(in srgb, var(--c) 70%, transparent); }
.rival .mini.art.lit::after, .li > .mini.art.lit::after { left: 6%; right: 6%; bottom: 2px; height: 46%; }
.rival .mini.art.lit img, .li > .mini.art.lit img { filter: brightness(1.18) contrast(1.04) drop-shadow(0 3px 2px #000c); }
.rival .mini.art.lit.r0, .li > .mini.art.lit.r0 { box-shadow: inset 0 0 0 1px #ffffff12, inset 0 -2px 0 #9aa4b260; }
@media (max-width: 374px) {
  .rival .mini.art.lit { width: 86px; height: 50px; }
  .li > .mini.art.lit { width: 78px; height: 46px; }
}
/* 5 drag strip: the boards hang in the skyline, dimmer, on long poles; they no longer sit at the height of the pilot tags */
.dr-neon { top: 58px; opacity: .78; }
.dr-bb::after { height: 60px; }
.dr-tag { background: #0a0d18f2; box-shadow: inset 0 0 0 1px #ffffff2a, 0 2px 8px #000c; padding: 2px 8px 3px; }
.dr-car.me .dr-tag { box-shadow: inset 0 0 0 1.5px #ffc400a0, 0 2px 8px #000c; }
/* 6 segmented control: one line always; smaller type on narrow phones */
.seg button { white-space: nowrap; padding-left: 2px; padding-right: 2px; }
@media (max-width: 374px) {
  .seg button { font-size: 14.5px; letter-spacing: 0; gap: 4px; }
  .seg button.locked .i { margin-right: 1px; }
}
/* 7 paint strip: a car without a body mask is grey and says so before the tap */
.pcar.off { opacity: .8; }
.pcar.off .art { filter: grayscale(1) brightness(.75); }
.pcar.off .pcar-nm { color: #6d7684; }
.pcar.off::after { content: 'без фарби'; display: block; margin: -1px 0 0; font: 600 9.5px/1.2 var(--f-body); letter-spacing: .3px; color: #8a94a7; text-transform: uppercase; }
/* 3 the Soviet origin tag */
.chip.origin.su i { display: inline-flex; align-items: center; padding: 0 4px; border-radius: 3px; background: #9aa4b2; color: #0b0f16; font: 800 9.5px/1.5 var(--f-disp); letter-spacing: .4px; font-style: normal; }
/* 9 hub section headings: normal case like everywhere else, slightly larger */
.hub-h { font: 600 15px var(--f-disp); letter-spacing: .1px; text-transform: none; color: var(--muted); }
/* 10 the raised «Кейси» button rises 22 px above the tab bar: content ends above it */
#app { padding-bottom: calc(var(--tabs-h) + 40px + var(--safe-b)); }
/* the ×N multiplier sits next to the value it is computed from */
.drop-value .xmult { margin-left: 2px; }
/* 8 intro: the night showroom instead of the brown spot, a wordmark, normal-case titles, real cars on the turntable */
.story { background: radial-gradient(120% 60% at 50% 30%, #1a1740, #0b0f16 70%); }
.story-brand { position: absolute; left: 0; right: 0; top: 30px; text-align: center; pointer-events: none; }
.wordmark { display: inline-block; font: 800 15px/1 var(--f-disp); letter-spacing: 1.6px; color: #e8ecf3; transform: skewX(-9deg); }
.wordmark b { color: var(--accent); }
.story-ic { filter: drop-shadow(0 0 24px #ffc40055); }
.story-title { font: 800 30px/1.08 var(--f-disp); text-transform: none; letter-spacing: 0; transform: skewX(-8deg); }
.story-car { width: calc(100% + 36px); max-width: 420px; margin: -10px 0 -6px; padding: 0; border: 0; background: none; }
.story-car .showroom { margin: 0; }
.story-classes { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 2px; }
.story-classes .stamp { font-size: 12px; }
.story .btn.story-next { margin-top: 8px; }
/* ×3 / ×6 summary: the left part never breaks mid-phrase; on a narrow screen it goes under the total instead */
.multi-sum > span:first-child { white-space: nowrap; }
.multi-sum { flex-wrap: wrap; row-gap: 2px; }
/* banners: compact enough for «Сезонний пропуск: рівень 14» to stay on one line at 390 px */
.banner .grow b { font-size: 14px; }
.banner .mi { width: 30px; height: 30px; font-size: 16px; }
.banner .bbtns .btn { padding: 0 10px; font-size: 14px; }
/* hub: what the next level brings, under the XP bar */
.hub-next { display: block; margin-top: 4px; font: 500 11px/1.25 var(--f-body); color: var(--muted); max-width: 100%; }

/* ============================================================================================================
   Car wash (S.WASH; app.js «car wash» section, dirt.js): dirt markers on tiles, cards and market rows, Майстерня →
   Мийка, the hand-wash mini-game. Mud is brown (#b0865a), the shine is cold white-blue. Nothing loops at rest: the
   shine sweep plays once after a wash; the «Три!» hint pulses only until the first touch; reduced motion: none of it.
   ============================================================================================================ */
:root { --mud: #b0865a; --mud-ink: #2a1c0e; --shine: #cfe8ff; }
.seg.seg4 button { font-size: 14px; letter-spacing: 0; }
@media (max-width: 374px) { .seg.seg4 button { font-size: 12.5px; } }
/* tile pip: bottom-left of the photo */
.car .art .dirt-pip { position: absolute; left: -2px; bottom: -2px; display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px 1px 3px; border-radius: 999px;
  background: #0b0f16d9; color: var(--muted); font: 700 10.5px/1.5 var(--f-disp); letter-spacing: .2px; pointer-events: none; }
.car .art .dirt-pip .i { width: 11px; height: 11px; }
.car .art .dirt-pip.dirty { color: var(--mud); box-shadow: inset 0 0 0 1px #b0865a55; }
.car .art .dirt-pip.shine { color: var(--shine); padding: 2px 4px; box-shadow: inset 0 0 0 1px #cfe8ff40; }
/* «брудна» / «блищить» next to a car */
.dirt-tag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 4px; border-radius: 5px; font: 700 11px/1.45 var(--f-body); vertical-align: 1px; white-space: nowrap; }
.dirt-tag .i { width: 11px; height: 11px; }
.dirt-tag.dirty { background: #b0865a26; color: #d7aa78; }
.dirt-tag.shine { background: #cfe8ff1f; color: var(--shine); }
.sheet-tags .dirt-tag { font-size: 12px; padding: 3px 8px 3px 6px; }
/* dirt meter: brown fill, the 50% line where income starts to fall */
.wash-meter { position: relative; display: block; height: 4px; border-radius: 2px; background: var(--card3); overflow: hidden; }
.wash-meter > i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #8a6a46, var(--mud)); transition: width .3s; }
.wash-meter > s { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #0b0f16; text-decoration: none; }
.wash-meter.sm { width: 46px; flex: none; }
.wash-meter.lg { height: 6px; border-radius: 3px; }
.wash-meter.clean > i { background: linear-gradient(90deg, #7fc4ff, var(--shine)); }
/* garage hint */
.card.wash-hint { width: 100%; text-align: left; gap: 12px; padding: 11px 14px; }
.wash-hint-ic { width: 38px; height: 38px; flex: none; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; background: #b0865a22; color: var(--mud); font-size: 19px; }
.wash-hint b { font: 600 15.5px var(--f-disp); letter-spacing: .2px; }
/* wash screen */
.wash-cars .pcar { gap: 3px; }
.wash-cars .pcar .wash-meter { margin-top: 1px; }
.pcar-d { display: inline-flex; align-items: center; gap: 2px; font: 700 11px/1.2 var(--f-disp); color: var(--muted); }
.pcar-d .i { width: 11px; height: 11px; color: var(--shine); }
.pcar-d.dirty { color: var(--mud); }
.wash-hero { height: 150px; margin-top: 4px; overflow: hidden; }
.wash-now { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.wash-now > b { font: 600 17px var(--f-disp); letter-spacing: .2px; }
.wash-state { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); }
.wash-state.dirty { color: #d7aa78; }
.wash-state.shine { color: var(--shine); }
.wash-bar { padding: 10px 2px 2px; }
.wash-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.wash-opt { display: flex; align-items: center; gap: 12px; padding: 4px 2px 0; }
.wash-opt .ic { width: 38px; height: 38px; flex: none; border-radius: var(--r-sm); background: var(--card2); display: inline-flex; align-items: center; justify-content: center; font-size: 19px; }
.wash-opt b { font: 600 15.5px var(--f-disp); letter-spacing: .2px; }
.wash-opt .small b { font: inherit; font-weight: 800; }
.wash-opt + .btn { margin-top: -2px; }
.wash-opts .btn.btn2 { margin-top: 6px; }
/* «Блищить»: a cool glint on the car — static; one sweep right after a wash */
.hero.shining .art img, .wg-stage.shining .wg-car { filter: drop-shadow(0 0 10px #cfe8ff40) brightness(1.04) saturate(1.06); }
.hero.shining::after, .wg-stage.shining::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, #ffffff55 48%, #cfe8ff22 52%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 120% 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero.shining.just::after, .wg-stage.shining::after { animation: wash-sweep 1.1s ease-out .15s 1 both; }
  .wg-hint { animation: wash-pulse 1.2s ease-in-out infinite; }
}
@keyframes wash-sweep { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 1; background-position: -60% 0; } }
@keyframes wash-pulse { 50% { transform: translate(-50%, -50%) scale(1.08); opacity: .75; } }
/* the mini-game: a card over a dimmed screen */
.washgame { position: fixed; inset: 0; z-index: 70; background: #000c; display: flex; align-items: center; justify-content: center; padding: 16px; touch-action: none; }
.wg-card { width: 100%; max-width: 440px; background: var(--card); border: 1px solid var(--line2); border-radius: 16px; padding: 14px 14px 16px; box-shadow: 0 20px 50px #000a; }
.wg-head { display: flex; align-items: center; justify-content: space-between; }
.wg-head b { font: 800 21px/1.1 var(--f-disp); transform: var(--slant); transform-origin: left; }
.wg-head .x { width: 32px; height: 32px; border-radius: 10px; background: var(--card2); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text); }
.wg-sub { margin: 4px 0 10px; font-size: 13px; color: var(--muted); min-height: 19px; }
.wg-sub b.win { display: inline-flex; align-items: center; gap: 4px; color: var(--shine); }
.wg-stage { position: relative; width: 100%; aspect-ratio: 5 / 2; border-radius: 12px; background: radial-gradient(70% 60% at 50% 70%, #1f2a3d, #10151f 75%); overflow: hidden; }
.wg-stage .wg-car, .wg-stage .wg-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.wg-cover { touch-action: none; cursor: grab; transition: opacity .5s; }
.wg-cover.gone { opacity: 0; }
.washgame.calm .wg-cover { transition: none; }
.wg-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px;
  background: #0b0f16cc; color: var(--text); font: 700 15px var(--f-disp); pointer-events: none; }
.wg-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.wg-meter { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.wg-meter .wash-meter { flex: 1; }
.wg-pct { width: 44px; text-align: right; font: 700 16px var(--f-disp); }
.wg-foot { margin-top: 12px; }

/* Завдання: how many rewards wait on each tab */
.seg button .seg-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--red, #ef4444); color: #fff; font: 700 11px/1 var(--f-body, inherit); vertical-align: 2px; }

/* Майстерня без рутини (wG): real effect of a part on the 402 m time, «Встановити найкраще», «Поставити на …»,
   one-reveal part cases, Склад sorted by use with «Продати непотрібні» */
.dt { display: flex; align-items: flex-start; gap: 4px; margin-top: 3px; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.dt .i { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.dt.win { color: var(--green); font-weight: 600; }
.dt.spin { color: #ff9f0a; font-weight: 600; }
.ptile-dt { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; font: 700 12.5px var(--f-disp); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ptile-dt .i { width: 13px; height: 13px; flex: none; }
.ptile .ptile-tx .ptile-dt { color: var(--muted); }
.ptile .ptile-tx .ptile-dt.win { color: var(--green); }
.ptile .ptile-tx .ptile-dt.can { color: var(--accent); font-weight: 600; }
.ptile .ptile-tx .ptile-dt.spin { color: #ff9f0a; }
.ptile.on.spin { box-shadow: inset 0 0 0 1.5px #ff9f0acc, var(--edge), inset 0 -2px 0 #ff9f0a; }
.btn.tune-best { margin: 0 0 10px; background: var(--green); color: #04220f; }
.btn.tune-best > small { opacity: .85; }
.tune-ok { display: flex; align-items: center; gap: 5px; margin: -2px 2px 10px; }
.tune-ok .i { width: 14px; height: 14px; color: var(--green); }
.best-done { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--green) 10%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 45%, transparent); }
.bd-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.bd-head .i { width: 18px; height: 18px; color: var(--green); flex: none; }
.bd-head b { font: 700 16px var(--f-disp); }
.bd-head span { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.bd-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; }
.bd-row > span:not(.part) { flex: 1; min-width: 0; color: #c4c9d2; }
.bd-row b { font: 700 13.5px var(--f-disp); text-align: right; }
.bd-row b.spin { color: #ff9f0a; font-weight: 600; }
.bd-set { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--accent); }
.bd-set .i { width: 13px; height: 13px; }
.part.xs { --s: 26px; border-radius: 7px; }
/* drop cards: «Поставити на …» under each part */
.dropput-row { display: flex; gap: 4px; margin-top: 5px; }
.dropput { flex: 1; min-width: 0; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 40px; padding: 0 6px; border-radius: 8px;
  background: color-mix(in srgb, var(--green) 16%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 45%, transparent); color: var(--text); font: 600 11.5px/1.15 var(--f-disp); }
.dropput .i { width: 13px; height: 13px; flex: none; color: var(--green); }
.dropput > span { min-width: 0; max-width: 100%; color: #c4c9d2; }
.dropput > b { display: inline-flex; align-items: center; gap: 3px; color: var(--green); font-size: 13.5px; white-space: nowrap; }
.dropput.more { flex: 0 0 30px; padding: 0; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); }
.dropput.more .i { width: 15px; height: 15px; color: var(--muted); }
.dropput.more.wide { flex: 1; flex-direction: row; gap: 5px; font-size: 12.5px; color: var(--muted); }
.dropput.done { flex-direction: row; gap: 4px; height: 30px; margin-top: 5px; width: 100%; background: transparent; box-shadow: none; color: var(--green); font-size: 12.5px; }
.multi.parts.one .dropput > span { font-size: 13px; }
.dropsum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -4px 2px 10px; font-size: 12.5px; color: #c4c9d2; }
.dropsum > span { display: inline-flex; align-items: center; gap: 5px; font: 700 13px var(--f-disp); }
.dropsum > span i { width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.dropsum em { font-style: normal; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.dropsum em .i { width: 14px; height: 14px; color: var(--green); }
/* ×1 pause: the button fills up while it waits */
.btn.pwait { position: relative; overflow: hidden; opacity: 1; background: var(--card2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.btn.pwait::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--accent) 22%, transparent); transform-origin: left; transform: scaleX(0); animation: pwait var(--d) linear var(--o) forwards; }
.btn.pwait > * { position: relative; }
@keyframes pwait { to { transform: scaleX(1); } }
/* Склад */
.stock-sum { display: flex; align-items: center; gap: 10px; padding: 12px; }
.stock-sum b { font: 700 16px var(--f-disp); }
.stock-sum .btn.btn2 { flex: none; padding: 7px 10px; }
.stock-sum .btn.btn2 > small { font-size: 12px; }
.stock-use { margin-top: 4px; font-size: 12.5px; color: #c4c9d2; }
.stock-use b { color: var(--green); font-family: var(--f-disp); }
.stock-use.none { color: var(--muted); }
.li.junk { opacity: .62; }
.dots.tiers span.junk { opacity: .55; text-decoration: line-through; text-decoration-color: #ffffff55; }
.putline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 5px; }
.putlink { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; padding: 4px 8px; border-radius: 7px; background: color-mix(in srgb, var(--green) 14%, var(--card2)); color: var(--text); font: 600 13px var(--f-disp); }
.putlink .i { width: 13px; height: 13px; color: var(--green); }
.putlink > span { min-width: 0; }
.putlink b { color: var(--green); white-space: nowrap; }
.putlink.more { background: none; padding: 4px 0; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
/* ---------- wave E: rewards center, reward reveal, season cosmetics ---------- */
/* «Забрати все» card at the top of the rewards window */
.rwc { border-color: #4a3c10; background: linear-gradient(135deg, #2a2208, var(--card) 70%); }
.rwc-h { display: flex; align-items: center; justify-content: space-between; }
.rwc-h b { display: inline-flex; align-items: center; gap: 6px; font: 700 16px var(--f-disp); letter-spacing: .2px; }
.rwc-h b .i { color: var(--accent); }
.rwc-n { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; display: inline-grid; place-items: center; background: var(--accent); color: #1c1500; font: 800 13px var(--f-disp); }
.rwc-list { margin-top: 8px; }
.rwc-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #ffffff0d; }
.rwc-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; display: inline-grid; place-items: center; background: #ffc40017; color: var(--accent); font-size: 16px; }
.rwc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rwc-tx b { font-size: 13.5px; font-weight: 700; }
.rwc-tx span { font-size: 11.5px; color: var(--muted); }
.rwc-row > b.win { font: 700 13px var(--f-disp); }
.rwc-more { padding-top: 4px; }
/* daily bonus: what a case day gives, today's reward in words */
.day-cls { display: block; margin-top: 1px; font: 600 9.5px var(--f-disp) !important; letter-spacing: .3px !important; color: var(--accent) !important; }
.day-now { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: #2a2208; box-shadow: inset 0 0 0 1px #4a3c10; font-size: 13px; line-height: 1.3; }
.day-now .i { flex: none; color: var(--accent); }
/* the reveal: a full-screen card with the case reel, under the «вау» takeover (z 28) and the effects canvas */
.rvl { position: fixed; inset: 0; z-index: 26; display: flex; align-items: center; justify-content: center; overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, var(--safe-b, 0px));
  background: radial-gradient(ellipse 90% 55% at 50% 35%, #231a4a, #07090d 70%); opacity: 0; transition: opacity .2s; }
.rvl.in { opacity: 1; }
.rvl-box { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 6px; }
.rvl-top { display: flex; align-items: center; justify-content: space-between; min-height: 30px; }
.rvl-n { font: 600 12px var(--f-disp); letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.rvl-skip { padding: 6px 10px; border-radius: 9px; background: #ffffff10; color: var(--muted); font: 600 13px var(--f-disp); }
.rvl-t { text-align: center; font: 700 19px/1.2 var(--f-disp); letter-spacing: .2px; }
.rvl-stage { margin: 4px 0 6px; }
.rvl-res { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 40px; }
.rvl-res .result-name { text-align: center; }
.rvl-res .drop-sell { display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 14px; color: var(--muted); }
.rvl-res .drop-sell b { color: var(--text); }
.rvl-btns { margin-top: 10px; min-height: 52px; }
.rvl-btns .btns { display: flex; gap: 8px; }
.rvl-btns .btns > * { flex: 1; }
.rvl-btns .done { opacity: .6; pointer-events: none; }
/* reward case strip cards (money, part, fuel) and the won one, big */
.reel .rc-card .art { display: flex; align-items: center; justify-content: center; }
.rc-ic { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; font-size: 30px; color: var(--c);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c) 30%, #2a2f38), #171b22 80%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 60%, transparent); }
.reel-wrap.mini .rc-ic { width: 36px; height: 36px; font-size: 20px; border-radius: 11px; }
.rc-big { width: 128px; height: 128px; margin: 34px auto 16px; border-radius: 34px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 40%, #2a2f38), #12151b 78%); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 70%, transparent), 0 0 46px -6px var(--c); }
.rc-big-ic { font-size: 62px; color: var(--c); display: inline-flex; }
.rc-big .part { --s: 92px; }
/* boss / set: open the reward keys */
.rw-keys { width: 100%; }
/* season pass: income note, cosmetic cells and the cosmetics strip */
.pass-rate { display: flex; gap: 5px; align-items: flex-start; color: var(--accent); }
.pass-rate .i { flex: none; margin-top: 1px; }
.pcell.cos { border-color: #4b2f8a; background: linear-gradient(135deg, #22163f, var(--card) 75%); }
.pcell.cos .i { color: #b48cff; }
.scos-card { margin-top: 10px; }
.scos-card > .row b { display: inline-flex; align-items: center; gap: 6px; font: 700 15px var(--f-disp); }
.scos-card > .row b .i { color: #b48cff; }
.scos-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0 8px; }
.scos { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 3px; border-radius: 10px; background: #0e131b; box-shadow: inset 0 0 0 1px #ffffff0d; text-align: center; min-width: 0; }
.scos b { font: 600 11px/1.15 var(--f-disp); letter-spacing: .2px; }
.scos small { font-size: 10px; color: var(--muted); display: inline-flex; align-items: center; gap: 2px; }
.scos-pv { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; color: #ffc400;
  background: linear-gradient(#3b1d7a 0 55%, #ffc400 55% 62%, #3b1d7a 62%); box-shadow: inset 0 0 0 1px #ffffff1f; }
.scos-pv .i { filter: drop-shadow(0 1px 2px #000c); }
.scos-pv.scos-gold { background: linear-gradient(#5a4610 0 55%, #151515 55% 62%, #c9a227 62%); color: #ffe27a; }
.scos-pv.scos-frame { background: #f2f2f2; color: #111; box-shadow: 0 0 0 2px #ffc400, 0 0 0 4px #3b1d7a; }
.scos-pv.scos-showcase { background: radial-gradient(circle at 50% 30%, #5b3df0, #0d0a1f 75%); }
.scos-pv.scos-badge { background: radial-gradient(circle, #3b1d7a, #1a0f33); }
.scos.own { box-shadow: inset 0 0 0 1.5px #b48cff; }
.scos.own small { color: #b48cff; }
.scos.ready { box-shadow: inset 0 0 0 1.5px var(--accent); }
/* season liveries in the paint shop */
.lv[data-id^="szn"] i { background: linear-gradient(#3a3f48 0 50%, #ffc400 50% 57%, #3b1d7a 57%); }
.lv[data-id^="szn"][data-id$="g"] i { background: linear-gradient(#3a3f48 0 50%, #151515 50% 57%, #c9a227 57%); }
.lv[data-id^="szn"] b::after { content: ' ★'; color: #b48cff; }
/* season plate frame on the owner's plates */
.plate.pf-season { box-shadow: 0 0 0 max(1.5px, calc(var(--h) * .07)) #ffc400, 0 0 0 max(3px, calc(var(--h) * .14)) #3b1d7a, 0 2px 10px #5b3df066; }
/* season showcase backdrop: a night showroom behind the cars */
.grid.sc-season { position: relative; isolation: isolate; padding: 10px; border-radius: 14px;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, #5b3df055, transparent 70%), linear-gradient(180deg, #120c2a, #07090d 85%); box-shadow: inset 0 0 0 1px #ffc40033; }
.grid.sc-season::before { content: 'СЕЗОН ' attr(data-season); position: absolute; z-index: -1; right: 12px; bottom: 4px; font: 800 34px/1 var(--f-disp); letter-spacing: 1px; color: #ffc40017; transform: skewX(-8deg); pointer-events: none; }
/* Чесні цифри (audit №1/№14): продаж — головна цифра, колекційна ціна — сірим */
.car .hn-sale { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.car .hn-sale .i { width: 13px; height: 13px; color: #4be08f; flex: none; }
.car .meta.sellp { opacity: .85; }
.hn-rsale b { color: var(--text); font-weight: 700; }
.hn-coll { color: var(--muted); opacity: .8; }
.garage-h .hn-gsum { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; color: var(--muted); font: inherit; letter-spacing: inherit; text-transform: none; padding: 0; background: none; }
.garage-h .hn-gsum > span { font: 600 13px var(--f-body); }
.garage-h .hn-gsum b { font: 700 15px var(--f-disp); color: var(--text); }
.garage-h .hn-gsum small { display: inline-flex; align-items: center; gap: 3px; font: 500 11px var(--f-body); opacity: .8; }
.garage-h .hn-gsum small .i { width: 12px; height: 12px; }
.drop-value .hn-lbl { display: inline-flex; align-items: center; gap: 4px; }
.drop-value .hn-lbl .i { width: 15px; height: 15px; color: #4be08f; }
.drop-sell .hn-coll { font-size: 12.5px; }
.hn-note { color: var(--muted); }
.hn-dnote { margin-top: 4px; }
.hn-dream .dream-bar { margin-top: 5px; }
.hn-gloss b { color: var(--text); }
.sheet .stat .val .sellp { white-space: normal; }
.hub-val small.hn-hub { letter-spacing: .2px; }
/* ×3/×6: the sale is on the button under each card, the card keeps the collection price on one grey line */
.multi .dcell > .car .meta.row:has(.hn-sale) { display: none; }
.multi .dcell > .car .meta.sellp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
@media (max-width: 370px) {
  .garage-h .hn-gsum > span { font-size: 12px; }
  .garage-h .hn-gsum b { font-size: 14px; }
}
/* =====================================================================================================   night wave A (audit §2 №12–13): banners never float over the page, one yellow per screen, battle case picker
   ============================================================================================================ */
/* reward banners: a strip at the top of the page that scrolls away with it; only a live invite stays pinned */
#banners { position: relative; top: auto; }
#banners.pinned { position: sticky; top: 60px; }
/* drop screen: «У гараж» is the yellow one, «Відкрити ще» steps back to an outline */
.btn.opencase.second { background: transparent; color: var(--text); border: 1px solid var(--line2); box-shadow: none; text-shadow: none; }
.btn.opencase.second::after { display: none; }
.btn.opencase.second .oc-p { background: #ffffff0d; box-shadow: inset 0 0 0 1px #ffffff14; }
/* secondary yellow: outlined in the accent (the dream card, the guide's reward pill) — the screen keeps one filled yellow */
.btn.soft { background: #ffc40012; color: var(--accent-hi); border: 0; box-shadow: inset 0 0 0 1.5px #ffc40070; text-shadow: none; }
.btn.soft:active { background: #ffc40028; }
.guide-gift { background: #ffc40012; color: var(--accent-hi); box-shadow: inset 0 0 0 1.5px #ffc40070; }
/* race result: the fuel left sits inside «Ще раз» (a line under the buttons hid behind the raised «Кейси») */
.dr-btns .btn.btn2 > small .i { width: 13px; height: 13px; margin-right: 2px; vertical-align: -2px; }
/* battles: the case picker instead of a raw <select> */
.picker.bpick { width: 100%; }
.bpick-p { flex: none; font: 800 17px var(--f-disp); color: var(--text); white-space: nowrap; }
.dr-btns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dr-btns .btn.btn2 > small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ===== Гонки: чесний шанс і ростер, вікна класу босів, тренування дрифту (only .rv-* / .bs-hard / .bc-* / .dfeel / .ddot5 / .dtrain / .dtip) ===== */
.rival .chip.rv-tough { background: #3a2a0c; color: #fbbf24; white-space: normal; text-align: left; line-height: 1.25; }
.rival .rv-drv { margin-top: 1px; }
.rival .chip.bs-hard { background: #3a1517; color: #ff9a6b; }
.boss-next .bc-pick, .boss-card .bc-pick { margin-top: 8px; }
.boss-next .bc-hint { margin-top: 6px; }
.boss-card .bc-hint { margin-top: 4px; }
.boss-card .bc-hard { border-color: #7a3a1a; color: #ff9a6b; }
.dfeel { display: grid; gap: 6px; font-size: 14px; }
.dfeel .row { align-items: center; }
.ddot5 { letter-spacing: 3px; color: #facc15; font-size: 14px; white-space: nowrap; }
.ddot5 i { font-style: normal; color: #3a4150; }
.dtrain { border: 1px solid #1d4a31; }
.d2 .dtip { min-height: 38px; padding: 8px 10px; border-radius: 10px; background: #0b0f16; border: 1px solid var(--line);
  font: 800 15px/1.25 var(--f-disp); color: #facc15; }
/* ---------- progression (wD): one shared tank, «Перші кроки», the next unlock ---------- */
/* An empty tank: the card says when the next one comes; the rivals under it grey out but stay tappable (a tap points
   at the card, no error toast). */
.fuel-out { box-shadow: inset 0 0 0 1px #f5b30155, var(--edge), var(--drop); }
.fuel-out .hook-t { color: var(--text); }
.fuel-out .fuel-next { font: 700 15px var(--f-disp); color: var(--accent); white-space: nowrap; }
.fuel-out .small { color: #c9ced6; }
.fuel-out .btns { gap: 8px; }
.fuel-out ~ .list.rivals .rival { filter: grayscale(1); opacity: .45; }
.fuel-out ~ .list.rivals .rival .win { color: var(--muted); }
/* the «Перші кроки» pill: the step's reward on the right, a button once the step is done */
.guide-rw { flex: none; align-self: center; margin-right: 8px; padding: 3px 7px; border-radius: 999px; background: #f5b3011f; color: var(--accent); font: 700 12px var(--f-disp); white-space: nowrap; }
.guide.pill.ready { border-color: var(--accent); box-shadow: 0 0 0 1px #f5b30144, 0 6px 18px -8px #f5b30188; }
.guide.pill.ready .guide-t .i { color: #34c759; vertical-align: -2px; }
.guide.pill .guide-dots i { width: 7px; }
.guide.pill.ready .guide-gift { animation: guidePulseIn 1.4s ease-in-out infinite; outline: 2px solid transparent; }
@media (prefers-reduced-motion: reduce) { .guide.pill.ready .guide-gift { animation: none; } }
/* the track as a card (profile, Завдання) */
.firststeps .fs-list { display: flex; flex-direction: column; gap: 2px; }
.fs-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; font-size: 13.5px; color: var(--muted); }
.fs-row .grow { min-width: 0; }
.fs-row .i { width: 13px; height: 13px; vertical-align: -2px; }
.fs-ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 11px var(--f-disp); background: #ffffff10; color: var(--muted); }
.fs-rw { flex: none; font: 700 13px var(--f-disp); color: var(--muted); }
.fs-row.done { color: #8b919c99; }
.fs-row.done .fs-ic { background: #34c75926; color: #34c759; }
.fs-row.done .grow { text-decoration: line-through; text-decoration-color: #ffffff33; }
.fs-row.on, .fs-row.ready { color: var(--text); font-weight: 600; }
.fs-row.on .fs-ic { background: var(--accent); color: var(--accent-ink); }
.fs-row.ready .fs-ic { background: #34c759; color: #04210d; }
.fs-row.on .fs-rw, .fs-row.ready .fs-rw { color: var(--accent); }
/* the next unlock on top of Гараж and Кейси */
.nextul { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 10px; padding: 8px 12px 10px; border-radius: 12px; overflow: hidden;
  background: var(--surf, var(--card)); box-shadow: inset 0 0 0 1px #ffffff0d; text-align: left; color: var(--text); }
.nextul:active { transform: scale(.985); }
.nu-ic { position: relative; flex: none; width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; background: #ffffff0d; color: #c9ced6; font-size: 16px; }
.nu-ic i { position: absolute; right: -4px; bottom: -4px; width: 15px; height: 15px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 9px; border: 2px solid var(--bg); }
.nu-t { flex: 1; min-width: 0; font: 600 13.5px/1.2 var(--f-disp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nu-t small { color: var(--muted); font-weight: 500; }
.nu-lv { flex: none; font: 700 11px var(--f-disp); color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.nu-bar { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; border-radius: 2px; background: #ffffff0f; overflow: hidden; }
.nu-bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #f0a800, #ffd84d); }
/* narrow phones and a done step: the «N/8» says the progress, the dots give their room to the text */
.guide.pill.ready .guide-dots { display: none; }
@media (max-width: 380px) { .guide.pill .guide-dots { display: none; } .guide-rw { margin-right: 6px; padding: 3px 6px; } }
/* ===== «Стиль» і VIP-підписка (agent K): магазин без гривень, косметика за зірки, ярлик, емодзі-статус ===== */
.st-seg button .i { font-size: 16px; }
.st-starter .chip { display: inline-flex; align-items: center; gap: 4px; }
.st-starter .chip .i { font-size: 12px; }
.vip-card .vip-buy { align-items: flex-end; }
.vip-price { font: 800 22px/1 var(--f-disp); color: var(--accent); display: inline-flex; align-items: center; gap: 4px; }
.vip-price small { font: 600 13px var(--f-disp); color: var(--muted); }
.vip-sub, .vip-once { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #0b0f16b3; box-shadow: inset 0 0 0 1px #ffc40033; }
.vip-sub b { display: inline-flex; align-items: center; gap: 5px; color: #4be08f; }
.vip-sub.off b { color: var(--text); }
.vip-sub .grow, .vip-once .grow { min-width: 0; }
.vip-once { box-shadow: inset 0 0 0 1px #ffffff12; }
.st-style-promo { width: 100%; text-align: left; color: var(--text); border-color: #4b2f8a; background: linear-gradient(135deg, #22163f, var(--card) 75%); }
.st-style-promo .chev { color: #8a7bff; display: inline-flex; }
.sty-note .i { color: #b48cff; flex: none; margin-top: 1px; }
.sty-me { border-color: #4b2f8a; background: linear-gradient(160deg, #1d1438, var(--card) 70%); }
.sty-me-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; min-width: 0; }
.sty-me-row b { font: 700 16px var(--f-disp); min-width: 0; }
.sty-me-sc { grid-template-columns: minmax(0, 1fr); max-width: 220px; margin: 0 auto; }
.sty-where { margin: -4px 2px 8px; }
.h2 .i { color: #b48cff; vertical-align: -2px; }
.sty-list { display: grid; gap: 8px; margin-bottom: 14px; }
.sty-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 12px; padding: 9px 10px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.sty-item > .sty-pv { grid-row: span 2; }
.sty-item > .btn, .sty-item > .row { justify-self: start; }
.sty-item.own { box-shadow: inset 0 0 0 1px #4b2f8a; }
.sty-item.on { box-shadow: inset 0 0 0 1.5px #b48cff; background: linear-gradient(135deg, #22163f, var(--card) 70%); }
.sty-item .btn { flex: none; }
.sty-item .btn.on { color: #b48cff; }
.sty-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; align-self: end; }
.sty-tx b { font: 700 14px/1.15 var(--f-disp); }
.sty-tx small { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; }
.sty-item.own .sty-tx small { color: #b48cff; }
.sty-pv { flex: none; width: 92px; height: 50px; border-radius: 10px; display: grid; place-items: center; background: #0b0f16; box-shadow: inset 0 0 0 1px #ffffff0d; overflow: hidden; position: relative; }
.sty-pv b { font: 800 15px var(--f-disp); white-space: nowrap; }
.sty-pv .art { width: 84px; height: 40px; position: relative; isolation: isolate; }
.sty-pv .art img { width: 100%; height: 100%; object-fit: contain; }
.sty-pv.sty-bg { box-shadow: inset 0 0 0 1px #ffffff1a; }
@media (max-width: 370px) { .sty-pv { width: 74px; } .sty-pv .art { width: 68px; } }
/* plate frames (S.STYLE_ITEMS kind frame): rings round the plate, like the season frame */
.plate.pf-neon { box-shadow: 0 0 0 max(1.5px, calc(var(--h) * .07)) #00e5ff, 0 0 max(6px, calc(var(--h) * .45)) #00e5ffaa; }
.plate.pf-carbon { box-shadow: 0 0 0 max(1px, calc(var(--h) * .035)) #6b717c, 0 0 0 max(2.5px, calc(var(--h) * .11)) #23262c, 0 0 0 max(3.5px, calc(var(--h) * .15)) #0c0d10, 0 2px 8px #0009; }
.plate.pf-chrome { box-shadow: 0 0 0 max(1px, calc(var(--h) * .04)) #f4f6f9, 0 0 0 max(2px, calc(var(--h) * .09)) #8d96a3, 0 0 0 max(3px, calc(var(--h) * .13)) #e1e5ea, 0 2px 8px #0008; }
.plate.pf-flame { box-shadow: 0 0 0 max(1.5px, calc(var(--h) * .06)) #ffb000, 0 0 0 max(3px, calc(var(--h) * .13)) #e0251b, 0 0 max(6px, calc(var(--h) * .4)) #ff4d0088; }
.plate.pf-ua { box-shadow: 0 0 0 max(1.5px, calc(var(--h) * .07)) #ffd500, 0 0 0 max(3px, calc(var(--h) * .14)) #0057b7, 0 2px 8px #0008; }
/* showcase backdrops (kind showcase): behind a showcase grid and in the «Стиль» preview */
.grid.sc-city, .grid.sc-track, .grid.sc-neon, .grid.sc-mount { position: relative; isolation: isolate; padding: 10px; border-radius: 14px; }
.grid.sc-city .car, .grid.sc-track .car, .grid.sc-neon .car, .grid.sc-mount .car { background: color-mix(in srgb, var(--card) 78%, transparent); }
.sc-city { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath fill='%23060a15' d='M0 60V36H10V24H18V36H26V16H40V30H48V22H60V40H68V12H78V4H86V12H92V34H104V26H116V20H124V44H136V30H146V18H158V36H170V28H182V40H200V60Z'/%3E%3Cg fill='%23ffd76a' opacity='.6'%3E%3Crect x='30' y='20' width='2' height='2'/%3E%3Crect x='35' y='26' width='2' height='2'/%3E%3Crect x='71' y='18' width='2' height='2'/%3E%3Crect x='74' y='26' width='2' height='2'/%3E%3Crect x='80' y='10' width='2' height='2'/%3E%3Crect x='108' y='30' width='2' height='2'/%3E%3Crect x='149' y='24' width='2' height='2'/%3E%3Crect x='152' y='30' width='2' height='2'/%3E%3Crect x='13' y='30' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E") bottom / 100% 55% no-repeat,
  radial-gradient(ellipse 70% 50% at 50% 100%, #ff8a3d33, transparent 70%), linear-gradient(180deg, #0a1030, #182a5c 70%, #2b3f7a); box-shadow: inset 0 0 0 1px #6f8cff33; }
.sc-track { background: conic-gradient(#e8e8e8 25%, #151515 0 50%, #e8e8e8 0 75%, #151515 0) top left / 14px 14px repeat-x,
  repeating-linear-gradient(90deg, transparent 0 46%, #f5b30155 46% 54%, transparent 54% 100%) 0 55% / 100% 4px no-repeat, linear-gradient(180deg, #2a2e35 14px, #16191e); box-shadow: inset 0 0 0 1px #ffffff1a; }
.grid.sc-track { padding-top: 22px; }
.sc-neon { background: linear-gradient(#ff2bd626 1px, transparent 1px) 0 0 / 100% 18px, linear-gradient(90deg, #ff2bd626 1px, transparent 1px) 0 0 / 18px 100%,
  radial-gradient(ellipse 80% 60% at 50% 100%, #00e5ff33, transparent 70%), linear-gradient(180deg, #1a0630, #07040f); box-shadow: inset 0 0 0 1px #ff2bd655, 0 0 14px #ff2bd622; }
.sc-mount { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath fill='%234a2f63' d='M0 60V34L18 22L30 30L52 10L70 28L84 20L104 36L126 14L146 30L164 18L184 32L200 24V60Z'/%3E%3Cpath fill='%23120d1f' d='M0 60V46L22 36L40 44L62 30L80 42L100 34L118 46L140 32L160 44L180 38L200 46V60Z'/%3E%3C/svg%3E") bottom / 100% 60% no-repeat,
  linear-gradient(180deg, #24184a, #6e3567 45%, #e2804d 78%, #f4bd68); box-shadow: inset 0 0 0 1px #f4bd6844; }
/* name colour (kind name) */
.nm-gold, .nm-flame, .nm-ua { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.nm-gold { background-image: linear-gradient(180deg, #fff1b8, #f5b301 55%, #b97b00); }
.nm-flame { background-image: linear-gradient(90deg, #ffd23f, #ff7a00 50%, #ff2a2a); }
.nm-ua { background-image: linear-gradient(180deg, #5aa7ff 52%, #ffd500 52%); }
.nm-neon { color: #8ff6ff; text-shadow: 0 0 5px #00e5ffaa, 0 0 11px #00e5ff55; }
/* underglow (kind glow): a neon pool under the cars of a showcase grid, the player card and the preview */
.gl-cyan, .gl-magenta, .gl-amber { --gl: #00e5ff; }
.gl-magenta { --gl: #ff2bd6; }
.gl-amber { --gl: #ffae00; }
.grid.gl-cyan .car .art, .grid.gl-magenta .car .art, .grid.gl-amber .car .art,
.licence.gl-cyan .lbay .art, .licence.gl-magenta .lbay .art, .licence.gl-amber .lbay .art, .sty-glow .art { position: relative; isolation: isolate; }
.grid.gl-cyan .car .art::before, .grid.gl-magenta .car .art::before, .grid.gl-amber .car .art::before,
.licence.gl-cyan .lbay .art::before, .licence.gl-magenta .lbay .art::before, .licence.gl-amber .lbay .art::before, .sty-glow .art::before {
  content: ''; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -3px; height: 26%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--gl), color-mix(in srgb, var(--gl) 35%, transparent) 60%, transparent); opacity: .9; }
/* «Стиль» liveries: swatches in the paint shop, locked ones lead to «Стиль» */
.lv-xneon i { background: linear-gradient(#14151f 0 52%, #00e5ff 52% 60%, #14151f 60% 66%, #ff2bd6 66% 71%, #14151f 71%); }
.lv-xcarbon i { background: repeating-conic-gradient(#2e3138 0 25%, #1b1d22 0 50%) 0 0 / 6px 6px; }
.lv-xchrome i { background: linear-gradient(#f2f5f9, #969eaa 42%, #343a46 50%, #c4cad4 58%, #78808c); }
.lv[data-id^="x"] b::after { content: ' ★'; color: #b48cff; }
.lv.lv-lock { opacity: .72; }
.lv.lv-lock span { display: inline-flex; align-items: center; gap: 3px; color: #b48cff; }
/* home-screen shortcut card in the menu, emoji-status offer after a final boss */
.hub-home { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 11px 12px; border-radius: 14px; text-align: left; --c: #22c3e6;
  background: linear-gradient(100deg, #22c3e61a, transparent 60%), var(--surf, var(--card)); box-shadow: inset 0 0 0 1px #22c3e640; color: var(--text); }
.hub-home b { display: block; font: 700 15px/1.2 var(--f-disp); }
.hub-home .chev { color: #4a5568; display: inline-flex; }
.hub-home:active { transform: scale(.985); }
.emoji-offer { margin-top: 10px; }
.hub-home .hub-i { white-space: normal; }
/* ===== «Заїзд дня» (app.js dayRaceTile / PAGES.dayrace / drResult): .drt tile, .drh/.drs/.dry/.drr/.drb screen, .drres result ===== */
.dr-pips { display: inline-flex; gap: 3px; }
.dr-pips i { width: 14px; height: 8px; border-radius: 2px; background: #0b0f16; box-shadow: inset 0 0 0 1px #ffffff1a; transform: skewX(-20deg); }
.dr-pips i.on { background: linear-gradient(180deg, var(--accent-hi), #f0a800); box-shadow: 0 0 6px -1px #ffc40088; }
/* the tile on top of «Гонки»: a chequered edge, the car under a light in its class colour */
.drt { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 12px; padding: 10px 8px 10px 16px; border-radius: 14px; overflow: hidden; text-align: left; color: var(--text);
  background: radial-gradient(120px 64px at calc(100% - 80px) 72%, color-mix(in srgb, var(--c, #8a94a7) 32%, transparent), transparent 72%), var(--surf, var(--card)); box-shadow: inset 0 0 0 1px #ffffff12, var(--edge, none), var(--drop, none); }
.drt::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: repeating-conic-gradient(#e9edf4 0 25%, #0b0f16 0 50%) 0 0 / 6px 6px; opacity: .85; }
.drt:active { transform: scale(.985); }
.drt-art { flex: none; width: 108px; height: 54px; }
.drt-art img, .drt-art svg { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 4px #0009); }
.drt-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.drt-h { display: inline-flex; align-items: center; gap: 5px; font: 700 12px var(--f-disp); letter-spacing: .6px; text-transform: uppercase; color: var(--accent); }
.drt-h .i { width: 14px; height: 14px; }
.drt-h em { margin-left: 2px; padding: 1px 6px; border-radius: 999px; background: #ffffff14; color: var(--text); font: 700 10.5px var(--f-body); font-style: normal; letter-spacing: 0; text-transform: none; }
.drt-h em.rw { background: #2fd27a26; color: var(--green); }
.drt-car { font: 700 17px/1.15 var(--f-disp); }
.drt-st { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drt-st b { color: var(--text); font-family: var(--f-disp); font-weight: 700; font-variant-numeric: tabular-nums; }
.drt-at { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; }
.drt-at small { font: 600 11.5px var(--f-body); color: var(--muted); white-space: nowrap; }
.drt > .chev { flex: none; display: inline-flex; color: var(--muted); }
.drt.locked { gap: 8px; padding: 10px 12px 10px 16px; color: var(--muted); font-size: 13px; }
.drt.locked b { color: var(--text); font-family: var(--f-disp); }
.drt.locked > .i { width: 16px; height: 16px; flex: none; }
@media (max-width: 370px) { .drt-art { width: 86px; height: 44px; } .drt-car { font-size: 16px; } }
/* the day's screen */
.drh { position: relative; overflow: hidden; text-align: center; padding: 12px 12px 12px;
  background: radial-gradient(70% 120px at 50% 64%, color-mix(in srgb, var(--c) 34%, transparent), transparent 75%), var(--surf, var(--card)); border: 0; box-shadow: inset 0 0 0 1px #ffffff12, var(--drop, none); }
.drh-top { display: flex; justify-content: space-between; gap: 6px; }
.drh-top .chip .i { width: 13px; height: 13px; }
.drh-art { height: 128px; margin: 6px auto 2px; max-width: 320px; }
.drh-art img, .drh-art svg { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 8px #000b); }
.drh-nm { display: block; font: 800 26px/1.1 var(--f-disp); transform: var(--slant, none); }
.drh-meta { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 6px 0 10px; }
.drh-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; margin-bottom: 8px; border-radius: 10px; background: #ffffff0a; }
.drh-specs span { display: flex; flex-direction: column; padding: 7px 4px 6px; background: #0e131b; font-size: 11px; color: var(--muted); }
.drh-specs b { font: 800 17px/1.15 var(--f-disp); color: var(--text); font-variant-numeric: tabular-nums; }
.drs { border: 0; background: var(--surf, var(--card)); box-shadow: inset 0 0 0 1px #ffffff12, var(--drop, none); }
.drs .hook-t .i { color: var(--accent); }
.drs-row { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 12px; min-height: 30px; }
.drs-t { font: 800 32px/1 var(--f-disp); font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.drs-pl { font-size: 14px; color: var(--muted); }
.drs-pl b { color: var(--text); font: 700 18px var(--f-disp); }
.drs-share { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 4px; color: var(--muted); font: 600 13.5px var(--f-body); }
.drs-share .i { width: 15px; height: 15px; }
.dry { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.dry b { font-family: var(--f-disp); }
.dry-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; background: #ffc4001a; color: var(--accent); }
.dry .btn { width: auto; padding: 9px 14px; flex: none; }
.dry-none { margin: -4px 0 12px; }
.drb-live { display: inline-flex; align-items: center; gap: 5px; font: 600 12px var(--f-body); color: var(--muted); }
.drb-live .i { display: none; }
.drb-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.drb .lb .drb-t, .drb-t { font-variant-numeric: tabular-nums; }
.drb .lb .tiny { margin-right: 2px; }
.drb-gap { padding: 2px 0 4px; text-align: center; color: var(--muted); letter-spacing: 2px; border-top: 1px solid var(--line); }
.drb-more { width: fit-content; margin: -4px auto 12px; padding: 8px 16px; }
.drr .hook-t .i { color: var(--accent); }
.drr-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 2px; font-size: 13px; color: var(--muted); }
.drr-list > div { display: flex; align-items: center; gap: 10px; }
.drr-list b { color: var(--text); }
.drr-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; background: #ffffff0d; color: #c9ced6; }
.drr-ic .i { width: 16px; height: 16px; }
.drr-ic.gold { background: #ffc4001f; color: var(--accent); }
/* the run: the other lane is a ghost */
.drag.dr-ghost .dr-car.rv .dr-bod { opacity: .5; }
.drag.dr-ghost .dr-car.rv .dr-tag b::before { content: '👻 '; }
/* the result */
.rhero.drres.flat { --rc: #8fb6ff; }
.rhero.drres .rhero-tag { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.rhero.drres .rhero-tag .i { width: 13px; height: 13px; }
.rhero.drres .rhero-amt { font: 800 34px/1.1 var(--f-disp); font-variant-numeric: tabular-nums; color: var(--text); }
.drres-pl { margin-top: 4px; font-size: 14px; color: var(--muted); }
.drres-pl b { font: 800 22px var(--f-disp); color: var(--text); }
.drres-pl .up { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #2fd27a24; color: var(--green); font: 700 13px var(--f-disp); }
.drres-gap { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px #ffffff0d; font-size: 13.5px; }
.drres-gap > .i { flex: none; width: 22px; height: 22px; color: var(--accent); }
.drres-gap > span { display: flex; flex-direction: column; min-width: 0; }
.drres-gap b { font-family: var(--f-disp); font-size: 16px; font-variant-numeric: tabular-nums; }
.drres-gap small { font-size: 12px; color: var(--muted); }
.drres-gap.lead { box-shadow: inset 0 0 0 1.5px #ffc40055; }
.dr-btns.drres-btns { grid-template-columns: minmax(0, 1fr); }
.dr-btns.drres-btns .btns .btn { padding: 13px 8px; }

/* ---------- ghost challenges («Виклик-привид»: .chg-*, the ghost on the drag scene) ---------- */
.drag.ghost .dr-car.rv .dr-bod { opacity: .62; filter: drop-shadow(0 0 10px #3ee0ffaa) saturate(.55) brightness(1.15); }
.drag.ghost .dr-car.rv .dr-bod img, .drag.ghost .dr-car.rv .dr-bod svg { filter: none; }
.drag.ghost .dr-car.rv .dr-shd { opacity: .35; }
.drag.ghost .dr-car.rv .dr-tag { background: #0d2a33cc; box-shadow: inset 0 0 0 1px #3ee0ff55; }
.drag.ghost .dr-car.rv .dr-tag .i { width: 12px; height: 12px; color: #7eeaff; align-self: center; }
.drag.ghost .dr-car.rv .dr-tag b { color: #d8f8ff; }
.drag.ghost .dr-map .rv { background: #3ee0ff; }
/* result screens: throw this run */
.chg-cta { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 10px; padding: 8px 12px; border-radius: 14px; text-align: left; color: var(--text);
  background: linear-gradient(100deg, #3ee0ff1c, transparent 60%), var(--surf, var(--card)); box-shadow: inset 0 0 0 1px #3ee0ff40; transition: transform .14s; }
.chg-cta:active { transform: scale(.985); }
.chg-cta .grow { min-width: 0; }
.chg-cta b { display: block; font: 700 16.5px/1.2 var(--f-disp); }
.chg-cta small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chg-cta > .i { color: #4a5568; }
.chg-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 21px; color: #7eeaff; background: #3ee0ff1a; box-shadow: inset 0 0 0 1px #3ee0ff33; }
.chg-row { display: flex; align-items: center; gap: 10px; width: 100%; margin: 4px 0 6px; padding: 10px 12px; border-radius: 12px; text-align: left; color: var(--text);
  background: var(--surf, var(--card)); box-shadow: inset 0 0 0 1px #ffffff0d; }
.chg-row > .i:first-child { flex: none; font-size: 20px; color: #7eeaff; }
.chg-row > .i:last-child { color: #4a5568; }
.chg-row .grow { min-width: 0; }
.chg-row b { display: block; font: 700 14.5px/1.2 var(--f-disp); }
.chg-row small { display: block; font-size: 12px; line-height: 1.3; color: var(--muted); }
.hub-store.chg-hub { --c: #3ee0ff; margin-top: 10px; background: linear-gradient(100deg, #3ee0ff14, transparent 55%), var(--surf); box-shadow: inset 0 0 0 1px #3ee0ff30, var(--edge, 0 0 0 0 transparent), var(--drop, 0 0 0 0 transparent); }
.hub-store.chg-hub .hub-ic { color: #7eeaff; }
/* the share sheet */
.chg-prev { position: relative; width: min(66vw, 270px); aspect-ratio: 4 / 5; margin: 2px auto 10px; border-radius: 16px; overflow: hidden; background: #0b0f1c;
  box-shadow: 0 0 0 1px #3ee0ff33, 0 14px 40px #000a; display: grid; place-items: center; }
.chg-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chg-sline { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; font-size: 13.5px; }
.chg-sline > b { font: 800 19px var(--f-disp); color: var(--text); }
.chg-link { margin-top: 8px; padding: 7px 10px; border-radius: 8px; background: #ffffff08; color: var(--muted); text-align: center; }
/* the challenge */
.chg-kick { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #3ee0ff1a; color: #bdf3ff; font: 700 12.5px var(--f-disp); letter-spacing: .3px; }
.chg-hero { position: relative; overflow: hidden; margin: 2px 0 12px; padding: 14px 14px 12px; border-radius: 18px; text-align: center;
  background: radial-gradient(120% 70% at 50% 62%, #3ee0ff24, transparent 60%), radial-gradient(90% 60% at 50% 100%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), linear-gradient(#0d1324, #080b14);
  box-shadow: inset 0 0 0 1px #3ee0ff2e; }
.chg-who { margin-top: 10px; font-size: 14px; color: var(--muted); }
.chg-who b { color: var(--text); font-weight: 700; }
.chg-time { margin-top: 2px; font: 800 54px/1 var(--f-disp); font-variant-numeric: tabular-nums; color: #fff; transform: var(--slant, none); text-shadow: 0 0 26px #3ee0ff99; }
.chg-time small { margin-left: 4px; font-size: 24px; color: #bdf3ff; }
.chg-art { position: relative; height: 104px; margin: 8px auto 4px; max-width: 300px; }
.chg-art > img, .chg-art > svg { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 14px #3ee0ff66); }
.chg-car { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted); }
.chg-car b { color: var(--text); font: 700 16px var(--f-disp); }
.chg-hero-f { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip.chg-exp { color: #ff8a8f; }
.chip.chg-won { color: var(--green); background: #2fd27a1a; }
.chip.chg-lost { color: #ffb4b7; background: #ff4d5a14; }
.chg-my { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 10px 12px; font-size: 13px; color: var(--muted); }
.chg-my b { color: var(--text); font-family: var(--f-disp); }
.chg-loan { display: flex; align-items: center; gap: 12px; }
.chg-loan .mini { width: 92px; height: 46px; flex: none; }
.chg-pick .h2 { margin-top: 6px; }
.chg-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 4px 0 6px; }
.chg-vs > div { display: flex; flex-direction: column; min-width: 0; padding: 9px 11px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px #ffffff0d; }
.chg-vs > div:last-child { box-shadow: inset 0 0 0 1px #3ee0ff38; background: linear-gradient(#3ee0ff10, transparent 70%), var(--card); }
.chg-vs small { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.chg-vs b { font: 700 15px/1.2 var(--f-disp); margin: 2px 0; }
.chg-vs span { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.chg-vs > i { font: 800 15px var(--f-disp); font-style: normal; color: #4a5568; }
.chg-prize b { font-family: var(--f-disp); }
.chg-told { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; font-size: 13px; background: #ffffff08; color: #c9ced6; }
.chg-told .i { flex: none; margin-top: 2px; color: var(--accent); }
.chg-res { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 18px; background: #ffffff0a; }
.chg-res.win { color: #7eeaff; }
.chg-res.lose { color: #ff8a8f; }
/* the lists */
.chg-top .chg-kick { margin-bottom: 8px; }
.stat.chg-stat { grid-template-columns: repeat(4, 1fr); margin-top: 12px; }
.chg-li { cursor: pointer; }
.chg-li .grow { min-width: 0; }
.chg-li .mini { width: 84px; height: 42px; flex: none; }
.chg-li .row.mt { flex-wrap: wrap; row-gap: 4px; }
.chg-li .row.between { gap: 8px; }
.chg-li .rtime { font: 700 15px var(--f-disp); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chg-li .tiny .win, .chg-li .tiny .lose { font-weight: 600; }
.chg-again { flex: none; width: 40px; padding: 8px; }
@media (max-width: 370px) { .chg-time { font-size: 46px; } .chg-vs { grid-template-columns: 1fr; } .chg-vs > i { display: none; } }
/* ---------- wave J: quiet empty lists, the battle bot, PvP «суперник-бот», the race streak ---------- */
.empty-line { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; padding: 10px 12px; border-radius: 12px; background: #ffffff06; box-shadow: inset 0 0 0 1px #ffffff0d;
  font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.empty-line > .i { flex: none; width: 18px; height: 18px; color: #6f7782; }
.empty-line > span { flex: 1; min-width: 0; }
.botchip { display: inline-flex; align-items: center; gap: 3px; margin: 0 4px; padding: 1px 6px 1px 4px; border-radius: 6px; vertical-align: 1px;
  font: 700 10.5px/1.4 var(--f-disp); letter-spacing: .3px; text-transform: uppercase; color: #9fd3ff; background: #3b82f61f; box-shadow: inset 0 0 0 1px #3b82f640; }
.botchip .i { width: 11px; height: 11px; }
.bbot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #ffffff06; box-shadow: inset 0 0 0 1px #ffffff0d; }
.bbot b { font-size: 13.5px; }
.bbot-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; color: #9fd3ff; background: #3b82f61f; }
.bbot-ic .i { width: 16px; height: 16px; }
.bwait { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11.5px; color: #9fd3ff; }
.bwait .i { width: 12px; height: 12px; flex: none; }
.bwait.bw-big { justify-content: center; margin-top: 10px; font-size: 12.5px; }
.bhead .botchip { margin: 0 auto 0 4px; }
.pvp-who { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; margin-top: 3px; font-size: 11px; color: var(--muted); }
.pvp-who .botchip { margin-left: 0; }
.pvp-live { display: inline-flex; align-items: center; gap: 3px; font: 700 10.5px/1.4 var(--f-disp); text-transform: uppercase; color: #34c759; }
.pvp-live .i { width: 11px; height: 11px; }
.rs-tile { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; margin: 4px 0 12px; padding: 10px 12px 13px; border-radius: 14px; overflow: hidden; text-align: left; color: var(--text);
  background: linear-gradient(100deg, #ff8a3d14, #ffffff05 60%); box-shadow: inset 0 0 0 1px #ff8a3d2e; }
.rs-tile:active { transform: scale(.985); }
.rs-tile.profile { margin: 0; }
.rs-ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: inline-grid; place-items: center; color: #8a6a55; background: #ff8a3d14; }
.rs-ic .i { width: 20px; height: 20px; }
.rs-tile.lit .rs-ic { color: #ff8a3d; background: #ff8a3d26; box-shadow: 0 0 16px #ff8a3d33; }
.rs-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rs-tx b { font: 700 15px/1.2 var(--f-disp); }
.rs-fire { margin-left: 4px; padding: 1px 6px; border-radius: 6px; font-size: 11px; color: #ffb37a; background: #ff8a3d22; vertical-align: 1px; }
.rs-sub { font-size: 12px; color: var(--muted); }
.rs-sub .i { width: 12px; height: 12px; vertical-align: -1px; color: #34c759; }
.rs-sub .acc { color: var(--accent); }
.rs-warn { color: #ffb37a; }
.rs-bar { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; border-radius: 2px; background: #ffffff0f; overflow: hidden; }
.rs-bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #ff6b2c, #ffb347); }
.rs-frz { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; color: #5d6570; }
.rs-frz .i { width: 18px; height: 18px; }
.rs-frz small { font: 600 10px/1 var(--f-disp); text-transform: uppercase; letter-spacing: .4px; }
.rs-frz.on { color: #7cc8ff; }
.rs-tile.ready { box-shadow: inset 0 0 0 1.5px #f5b30166; }
.rs-head .rs-big { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: #8a6a55; background: #ff8a3d14; }
.rs-head .rs-big .i { width: 30px; height: 30px; }
.rs-head .rs-big.lit { color: #ff8a3d; background: #ff8a3d26; box-shadow: 0 0 24px #ff8a3d44; }
.rs-n { display: block; font-size: 40px; line-height: 1; margin-top: 4px; }
.rs-ms-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 13px var(--f-disp); color: var(--muted); background: #ffffff0a; }
.rs-ms.done .rs-ms-n { color: #ff8a3d; background: #ff8a3d22; }
.rs-ms .chip .i { color: #ff8a3d; }
.rs-rules .row { gap: 8px; align-items: center; }
.fire-mark { position: absolute; left: 4px; bottom: 4px; z-index: 2; display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px 1px 4px; border-radius: 7px;
  font: 700 10px/1.5 var(--f-disp); letter-spacing: .3px; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, #ff5a1f, #ff9a3d); box-shadow: 0 2px 8px #ff5a1f55; }
.fire-mark .i { width: 11px; height: 11px; }
.hub-live-n { color: #ff8a3d; font-weight: 600; }
.bwait .bw-t { font-weight: 700; color: #cfe8ff; font-variant-numeric: tabular-nums; }
.bwait.bw-big > span { text-align: center; }
.chatbox .chat:has(> .chat-empty) { min-height: 0; }
.chatbox .chat > .chat-empty { margin: 2px auto 6px; font-size: 12px; }