:root { --y: #ffd23f; --o: #ff7a1a; --t: #14d1c9; --r: #ff4b3e; --g: #3ddc84; --panel: rgba(14,18,26,.86); --line: rgba(255,255,255,.12); --font: 'Exo 2', system-ui, sans-serif; --title: 'Russo One', 'Exo 2', sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0e14; color: #fff; font-family: var(--font); user-select: none; -webkit-user-select: none; touch-action: none; }
#app { position: fixed; inset: 0; background: radial-gradient(ellipse at 60% 40%, #3a2a3e 0%, #1a1d2b 45%, #0b0e14 100%); overflow: hidden; }
body[data-screen="garage"] #app { background: radial-gradient(ellipse at 50% 45%, #ff8a3d 0%, #d9481f 40%, #6a1c12 100%); }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; border: 0; color: inherit; }
svg { display: block; }

/* ---------- generic ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 150px; padding: 12px 22px; border-radius: 12px; font-weight: 800; font-size: 17px; letter-spacing: 1px; background: linear-gradient(180deg, #3b4252, #262b36); box-shadow: 0 4px 0 #11141a, inset 0 1px 0 rgba(255,255,255,.15); transition: transform .08s, filter .15s; text-transform: uppercase; font-style: italic; }
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #11141a; }
.btn.primary { background: linear-gradient(180deg, #ffe066, #ffb21f); color: #2a1a00; box-shadow: 0 4px 0 #b76b00, inset 0 1px 0 rgba(255,255,255,.6); }
.btn.big { font-size: 26px; padding: 16px 30px; min-width: 240px; }
.btn.small { min-width: 0; font-size: 13px; padding: 8px 12px; }
.btn.cant { filter: grayscale(.7) brightness(.8); }
.btn:disabled { opacity: .55; cursor: default; }
.icon-btn { width: 46px; height: 46px; border-radius: 12px; background: rgba(10,12,18,.65); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); }
.icon-btn svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; }
#btnPause svg { fill: #fff; stroke: none; }
.scr-title { font-family: var(--title); font-weight: 400; font-size: clamp(24px, 4vw, 38px); margin: 0 0 18px; letter-spacing: 2px; font-style: italic; color: var(--y); text-shadow: 0 3px 0 #7a3a00; }
.scr-title small { font-size: .5em; color: #fff; margin-left: 10px; vertical-align: middle; }
.nav { position: absolute; left: 20px; bottom: 18px; }
.btn.back { min-width: 110px; }
.lock { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; display: inline-block; vertical-align: -3px; margin-right: 4px; }

/* ---------- top bar ---------- */
#topbar { position: absolute; top: 0; left: 0; right: 0; height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 30; background: linear-gradient(180deg, rgba(8,10,15,.9), rgba(8,10,15,.55)); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.xp { display: flex; align-items: center; gap: 10px; }
.lv { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(160deg, var(--o), #c2410c); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; transform: skewX(-8deg); box-shadow: 0 3px 0 #6b2405; }
.lv small { font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.lv b { font-size: 22px; font-weight: 900; }
.xpbar { width: clamp(120px, 22vw, 260px); }
.xpname { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: #cfd6e2; }
.xpbar .bar, .res-xp .bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; margin: 3px 0; }
.xpbar .bar i, .res-xp .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--y), var(--o)); border-radius: 4px; transition: width .6s; }
.xpnum { font-size: 11px; color: #aeb7c6; font-weight: 600; }
.tb-right { display: flex; align-items: center; gap: 12px; }
.cash { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 900; font-style: italic; }
.bill { width: 34px; height: 21px; }
.bill rect { fill: #49c25a; stroke: #1f7a2c; stroke-width: 2; }
.bill circle { fill: #bff0b0; stroke: #1f7a2c; stroke-width: 1.5; }

/* ---------- splash ---------- */
#splash { background: radial-gradient(circle at 50% 45%, #2b2f45 0%, #0d0f18 78%); z-index: 60; transition: opacity .45s ease; cursor: pointer; gap: 10px; }
#splash.out { opacity: 0; pointer-events: none; }
.splash-logo { font-family: 'Exo 2', sans-serif; font-size: clamp(54px, 13vw, 118px); font-weight: 800; line-height: 1; display: flex; align-items: baseline; animation: logoPop 2.3s ease-in-out both; }
.splash-logo span { display: inline-block; color: var(--c); text-shadow: 0 5px 0 rgba(0,0,0,.35); animation: letterIn .55s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i) * 70ms + 150ms); }
.splash-logo .games { color: #fff; font-weight: 700; font-size: .62em; margin-left: 2px; }
.splash-sub { font-size: 18px; letter-spacing: 6px; color: #9aa5c0; text-transform: uppercase; animation: fadeIn .6s .9s both; }
.splash-tap { position: absolute; bottom: 28px; font-size: 13px; color: #6f7894; letter-spacing: 2px; animation: fadeIn .6s 1.4s both; }
@keyframes letterIn { 0% { transform: translateY(-70px) scale(.3); opacity: 0; } 70% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes logoPop { 0%, 55% { transform: scale(1); } 68% { transform: scale(1.07); } 80%, 100% { transform: scale(1); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- menu ---------- */
#menu { align-items: flex-start; justify-content: center; padding-left: clamp(20px, 6vw, 90px); }
.menu-col { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: min(380px, 90vw); margin-top: 40px; }
.logo { position: relative; line-height: .9; margin-bottom: 14px; font-family: var(--title); font-style: italic; transform: skewX(-10deg); animation: fadeIn .6s both; text-align: left; }
.logo .l1 { font-size: clamp(52px, 8vw, 92px); color: #fff; letter-spacing: 3px; text-shadow: 0 4px 0 #c2410c, 0 8px 0 #4a1a06, 0 14px 24px rgba(0,0,0,.5); }
.logo .l2 { font-size: clamp(36px, 5.6vw, 64px); color: var(--y); letter-spacing: 2px; margin-top: 6px; text-shadow: 0 4px 0 #b45309, 0 8px 18px rgba(0,0,0,.5); }
.logo .l2 span { color: var(--t); text-shadow: 0 4px 0 #0b6f6a, 0 8px 18px rgba(0,0,0,.5); }
.logo .stripes { display: flex; gap: 6px; margin-top: 10px; }
.logo .stripes i { height: 6px; border-radius: 3px; background: var(--o); width: 70px; }
.logo .stripes i:nth-child(2) { width: 46px; background: var(--y); }
.logo .stripes i:nth-child(3) { width: 24px; background: var(--t); }
.btn.daily { background: linear-gradient(180deg, #2a6b5f, #1b4a42); box-shadow: 0 4px 0 #0c2a25; }
.btn.daily small { font-size: 11px; font-weight: 600; letter-spacing: .5px; opacity: .85; font-style: normal; }
.btn.daily.ready { background: linear-gradient(180deg, #2fd39a, #179b6e); box-shadow: 0 4px 0 #0b5a3f; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.22); } }
.menu-car { position: absolute; right: 6vw; bottom: 64px; text-align: right; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.menu-car b { display: block; font-family: var(--title); font-size: 30px; font-style: italic; }
.menu-car small { font-size: 14px; color: #d4dbe8; }
.credit { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: #fff; text-decoration: none; font-size: 14px; padding: 6px 14px; border-radius: 20px; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.credit b { color: var(--y); }
.credit:hover { background: rgba(0,0,0,.65); }

/* ---------- modes ---------- */
#modes, #challenges, #career, #setup { background: linear-gradient(180deg, rgba(8,10,15,.55), rgba(8,10,15,.85)); padding-top: 70px; }
.mode-cards { display: flex; gap: 16px; overflow-x: auto; max-width: 100%; padding: 8px 20px 16px; scroll-snap-type: x mandatory; }
.mode-card { flex: 0 0 auto; width: 190px; height: 270px; border-radius: 16px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 16px 10px; scroll-snap-align: center; box-shadow: 0 6px 0 rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.15); transition: transform .12s; overflow: hidden; }
.mode-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 0 rgba(0,0,0,.4), inset 0 0 0 3px var(--y); }
.mc-name { font-family: var(--title); font-size: 21px; font-style: italic; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.mc-art svg { width: 130px; height: 92px; fill: rgba(255,255,255,.92); stroke: rgba(255,255,255,.92); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.m-endless .mc-art svg, .m-free .mc-art svg, .m-tt .mc-art svg { fill: none; stroke-width: 6; }
.mc-sub { font-size: 14px; font-weight: 700; background: rgba(0,0,0,.35); padding: 6px 12px; border-radius: 20px; }
.m-challenge { background: linear-gradient(160deg, #ffb21f, #e2531a); }
.m-career { background: linear-gradient(160deg, #a35cff, #4b1fa8); }
.m-endless { background: linear-gradient(160deg, #2f80ff, #133b8a); }
.m-free { background: linear-gradient(160deg, #22c55e, #0f6b3a); }
.m-tt { background: linear-gradient(160deg, #ff4b6e, #8a1335); }
.mode-card.locked { filter: grayscale(.85) brightness(.7); }

/* ---------- challenges ---------- */
.ch-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; width: min(760px, 94vw); max-height: calc(100% - 150px); overflow-y: auto; padding: 4px; }
.ch-tile { border-radius: 12px; padding: 8px 6px; min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-shadow: 0 4px 0 rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.12); }
.ch-tile b { font-size: 28px; font-weight: 900; font-style: italic; line-height: 1; }
.ch-tile small { font-size: 11px; font-weight: 700; opacity: .9; }
.env-desert { background: linear-gradient(160deg, #f59e42, #b4492a); }
.env-city { background: linear-gradient(160deg, #3d8bd8, #234c86); }
.env-night { background: linear-gradient(160deg, #3a3f8f, #141836); }
.ch-tile.locked { filter: grayscale(.9) brightness(.55); }
.ch-stars { display: flex; gap: 3px; }
.ch-stars i, .res-stars i { width: 16px; height: 16px; background: rgba(0,0,0,.45); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ch-stars i.on, .res-stars i.on { background: var(--y); }

/* ---------- career ---------- */
.tiers { display: flex; gap: 14px; overflow-x: auto; max-width: 100%; padding: 6px 20px 16px; max-height: calc(100% - 140px); }
.tier { flex: 0 0 auto; width: 230px; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 6px 0 rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.12); }
.tier.locked { filter: grayscale(.85) brightness(.6); }
.t-head { display: flex; flex-direction: column; margin-bottom: 4px; }
.t-head small { font-size: 11px; font-weight: 800; letter-spacing: 2px; opacity: .85; }
.t-head b { font-family: var(--title); font-size: 21px; font-style: italic; }
.t-head span { font-size: 12px; opacity: .85; }
.race-btn { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.35); border-radius: 10px; padding: 8px 10px; text-align: left; }
.race-btn:hover { background: rgba(0,0,0,.5); }
.race-btn .r-n { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-weight: 900; }
.race-btn .r-info { flex: 1; display: flex; flex-direction: column; }
.race-btn .r-info b { font-size: 14px; }
.race-btn .r-info small { font-size: 11px; opacity: .85; }
.race-btn .r-st { font-size: 12px; font-weight: 900; color: var(--y); }
.race-btn.won .r-n { background: var(--g); color: #06301a; }
.race-btn.won .r-st { color: var(--g); }
.race-btn.locked { opacity: .6; }

/* ---------- setup ---------- */
.setup-body { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(620px, 94vw); }
.opt-label { font-size: 12px; font-weight: 800; letter-spacing: 2px; color: #c5cddb; margin-top: 6px; }
.opts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.opt { padding: 14px 20px; border-radius: 12px; font-weight: 800; font-size: 15px; background: #2a303c; box-shadow: 0 4px 0 #11141a, inset 0 0 0 2px transparent; min-width: 140px; }
.opt.on { box-shadow: 0 4px 0 #11141a, inset 0 0 0 3px var(--y); }
.setup-best { font-size: 14px; color: #c9d1de; text-align: center; margin: 8px 0; max-width: 460px; }

/* ---------- garage ---------- */
#garage { display: block; padding-top: 62px; }
.g-info { position: absolute; left: clamp(16px, 5vw, 70px); top: 86px; text-shadow: 0 3px 10px rgba(0,0,0,.35); }
.g-info h2 { font-family: var(--title); font-size: clamp(30px, 5vw, 52px); font-style: italic; margin: 0; line-height: 1; }
.g-kind { font-weight: 700; font-size: 15px; opacity: .9; margin-top: 4px; }
.g-top { font-size: 30px; font-weight: 900; font-style: italic; margin-top: 8px; }
.g-top span { font-size: 16px; }
.g-status { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 800; background: rgba(0,0,0,.35); padding: 4px 12px; border-radius: 14px; }
.g-stats { position: absolute; right: clamp(16px, 4vw, 60px); top: 84px; width: 270px; background: rgba(60,12,4,.45); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.stat .st-top { display: flex; justify-content: space-between; font-weight: 800; font-size: 14px; letter-spacing: 1px; }
.st-bar { height: 8px; border-radius: 4px; background: rgba(0,0,0,.35); overflow: hidden; margin: 4px 0; }
.st-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffe066, #ffb21f); }
.st-pips { display: flex; gap: 4px; margin-bottom: 6px; }
.st-pips i { flex: 1; height: 4px; border-radius: 2px; background: rgba(0,0,0,.3); }
.st-pips i.on { background: #fff; }
.up-btn { width: 100%; font-style: normal; }
.g-paint { position: absolute; left: clamp(16px, 5vw, 70px); bottom: 92px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; max-width: 320px; margin-top: 6px; }
.swatch { width: 38px; height: 38px; border-radius: 50%; background: var(--c); box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.25); position: relative; }
.swatch.on { box-shadow: 0 0 0 3px #fff, 0 3px 0 rgba(0,0,0,.35); }
.swatch.buy small { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); font-size: 9px; font-weight: 800; background: rgba(0,0,0,.7); padding: 1px 4px; border-radius: 6px; white-space: nowrap; }
.g-bottom { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.g-select { display: flex; align-items: center; gap: 14px; }
.arrow { width: 52px; height: 52px; border-radius: 50%; background: rgba(0,0,0,.35); display: grid; place-items: center; }
.arrow svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.g-dots { display: flex; gap: 6px; }
.g-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.35); }
.g-dots i.on { background: #fff; transform: scale(1.3); }
.g-dots i.lk { outline: 1px dashed rgba(255,255,255,.4); }
#gAction { min-width: 170px; }

/* ---------- modal ---------- */
.modal { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(5,7,12,.62); backdrop-filter: blur(3px); }
.panel { background: linear-gradient(180deg, #1d2330, #12161f); border-radius: 18px; padding: 22px 26px; width: min(520px, 92vw); max-height: 92%; overflow-y: auto; box-shadow: 0 20px 50px rgba(0,0,0,.6), inset 0 0 0 1px var(--line); text-align: center; animation: popIn .25s cubic-bezier(.3,1.5,.5,1); }
.panel.narrow { width: min(360px, 92vw); display: flex; flex-direction: column; gap: 10px; }
.panel h3 { font-family: var(--title); font-size: 26px; font-style: italic; color: var(--y); margin: 0 0 8px; font-weight: 400; }
.panel p { color: #d3d9e4; font-size: 15px; line-height: 1.45; }
.panel .row { display: flex; gap: 12px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
@keyframes popIn { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.br-goal { font-size: 18px !important; font-weight: 700; color: #fff !important; }
.br-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; margin: 10px 0; }
.br-facts div { background: rgba(255,255,255,.06); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; }
.br-facts small { font-size: 11px; color: #9aa5b8; font-weight: 700; letter-spacing: 1px; }
.br-facts b { font-size: 15px; }
.br-keys { font-size: 12px; color: #8f9ab0; }
.dlg-icon { display: flex; justify-content: center; }
.big-bill { width: 96px; height: 60px; }
.big-bill rect { fill: #49c25a; stroke: #1f7a2c; stroke-width: 3; }
.big-bill circle { fill: #bff0b0; stroke: #1f7a2c; stroke-width: 2; }
.big-bill text { fill: #1f7a2c; font-weight: 900; font-size: 14px; font-family: var(--font); }
.gift { width: 72px; height: 72px; fill: var(--o); stroke: #fff; stroke-width: 2; }
.dlg-icon .lock { width: 50px; height: 50px; color: var(--y); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-weight: 700; text-align: left; }
.toggle { padding: 8px 18px; border-radius: 20px; background: var(--g); color: #06301a; font-weight: 900; min-width: 70px; }
.toggle.off { background: #4a5162; color: #fff; }
.seg { display: flex; background: rgba(255,255,255,.08); border-radius: 10px; padding: 3px; }
.seg button { padding: 7px 12px; border-radius: 8px; font-weight: 800; font-size: 13px; background: transparent; color: #c0c8d6; }
.seg button.on { background: var(--y); color: #2a1a00; }
input[type=range] { width: 160px; accent-color: var(--y); }
.set-note { font-size: 12px !important; color: #8f9ab0 !important; text-align: left; }
#toast { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); background: rgba(0,0,0,.82); padding: 10px 18px; border-radius: 20px; font-weight: 700; z-index: 70; box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }

/* ---------- results ---------- */
#results { background: rgba(8,10,15,.9); gap: 10px; padding: 16px; }
.res-head { text-align: center; }
.res-head h2 { font-family: var(--title); font-style: italic; font-size: clamp(28px, 5vw, 50px); margin: 0; font-weight: 400; letter-spacing: 1px; }
.res-head h2.good { color: var(--g); text-shadow: 0 3px 0 #0b5a3f; }
.res-head h2.bad { color: var(--r); text-shadow: 0 3px 0 #6a1010; }
#resSub { color: #aeb7c6; font-weight: 700; font-size: 14px; }
.res-body { display: flex; gap: 28px; align-items: center; justify-content: center; width: min(900px, 96vw); }
.res-left { flex: 0 0 260px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.res-score { display: flex; flex-direction: column; align-items: center; }
.res-score small { font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.res-score b { font-size: 46px; font-weight: 900; }
.res-stars { display: flex; gap: 8px; }
.res-stars i { width: 44px; height: 44px; animation: starIn .5s both; }
@keyframes starIn { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
.res-best { color: var(--y); font-weight: 800; }
.res-xp { width: 100%; text-align: center; color: var(--y); font-weight: 800; }
.res-xp small { color: #cfd6e2; }
.res-levelup { background: linear-gradient(90deg, var(--o), var(--y)); color: #2a1200; font-weight: 900; padding: 8px 12px; border-radius: 10px; text-align: center; font-size: 14px; }
.res-right { flex: 1; max-width: 540px; }
.res-total { text-align: right; font-weight: 800; color: #cfd6e2; margin-bottom: 6px; }
.res-total b { color: var(--y); margin-left: 10px; font-size: 18px; }
#resTable { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
#resTable td { background: rgba(255,255,255,.06); padding: 10px 12px; font-weight: 800; font-size: 14px; }
#resTable td:first-child { border-radius: 8px 0 0 8px; text-align: right; color: #e6eaf2; letter-spacing: .5px; }
#resTable td:nth-child(2) { text-align: center; }
#resTable td:last-child { border-radius: 0 8px 8px 0; text-align: right; color: var(--y); width: 80px; }
#resTable tr.sum td { background: rgba(255,210,63,.12); font-size: 18px; }
.res-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.res-btns .btn { min-width: 130px; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; z-index: 20; pointer-events: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#hud button { pointer-events: auto; }
.hud-left { position: absolute; left: 12px; top: 12px; display: flex; gap: 8px; align-items: stretch; }
.score-box { background: linear-gradient(90deg, rgba(255,210,63,.95), rgba(255,170,30,.85)); color: #2a1a00; padding: 4px 16px 4px 12px; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; min-width: 120px; transform: skewX(-8deg); }
.score-box small { font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.score-box b { font-size: 24px; font-weight: 900; line-height: 1; }
.hud-center { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: min(420px, 40vw); text-align: center; }
#goalText { font-size: 13px; font-weight: 800; text-shadow: 0 1px 3px #000, 0 0 6px rgba(0,0,0,.6); margin-bottom: 6px; }
#progWrap .track { position: relative; height: 10px; border-radius: 5px; background: rgba(0,0,0,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
#progFill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--y), var(--o)); }
#progFlags .flag { position: absolute; top: -9px; width: 3px; height: 28px; margin-left: -1px; background: #e8c45a; border-radius: 2px; }
#progFlags .flag::after { content: ''; position: absolute; left: 3px; top: 0; width: 12px; height: 9px; background: #ffd23f; clip-path: polygon(0 0, 100% 50%, 0 100%); }
#progFlags .flag.finish::after { background: repeating-conic-gradient(#fff 0 25%, #111 0 50%) 0 0 / 6px 5px; clip-path: none; width: 14px; }
.marker { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.marker.me { background: var(--t); }
.marker.rival { background: var(--r); }
.hud-right { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.gear-box { display: flex; gap: 0; background: linear-gradient(90deg, rgba(255,210,63,.95), rgba(255,170,30,.9)); color: #2a1a00; border-radius: 10px; transform: skewX(-8deg); overflow: hidden; }
.gear-box div { display: flex; flex-direction: column; align-items: center; padding: 4px 14px; min-width: 76px; }
.gear-box div + div { border-left: 2px solid rgba(0,0,0,.18); min-width: 86px; }
.gear-box small { font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.gear-box b { font-size: 24px; font-weight: 900; line-height: 1; }
.hud-row { display: flex; align-items: baseline; gap: 8px; background: rgba(10,12,18,.62); padding: 4px 12px; border-radius: 8px; transform: skewX(-8deg); min-width: 150px; justify-content: flex-end; }
.hud-row small { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #cfd6e2; }
.hud-row b { font-size: 17px; font-weight: 900; }
.hud-row .clock { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; align-self: center; }
.hud-row.low b { color: var(--r); }
#posPill { font-size: 26px; font-weight: 900; font-style: italic; background: var(--g); color: #06301a; padding: 2px 16px; border-radius: 8px; transform: skewX(-8deg); }
#posPill.second { background: var(--r); color: #fff; }
#btnCam { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
#bonusBar { position: absolute; left: 50%; top: 78px; transform: translateX(-50%); display: flex; gap: 10px; }
.bonus { display: none; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 10px; background: linear-gradient(90deg, rgba(255,75,62,.9), rgba(255,140,40,.9)); font-weight: 900; font-style: italic; transform: skewX(-8deg); box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.bonus.on { display: flex; animation: popIn .25s; }
.bonus.opp { background: linear-gradient(90deg, rgba(160,60,255,.92), rgba(60,120,255,.9)); }
.bonus b { font-size: 15px; letter-spacing: 1px; }
.bonus span { font-size: 15px; background: rgba(0,0,0,.25); padding: 1px 8px; border-radius: 6px; }
#pops { position: absolute; left: 50%; top: 28%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pop { display: flex; flex-direction: column; align-items: center; animation: popUp 1.5s ease-out forwards; text-shadow: 0 3px 0 rgba(0,0,0,.45); }
.pop b { font-size: clamp(22px, 3.4vw, 34px); font-weight: 900; font-style: italic; color: #fff; -webkit-text-stroke: 1px rgba(0,0,0,.3); }
.pop span { font-size: 20px; font-weight: 900; color: var(--y); }
@keyframes popUp { 0% { transform: scale(.4); opacity: 0; } 15% { transform: scale(1.15); opacity: 1; } 25% { transform: scale(1); } 75% { opacity: 1; transform: translateY(-14px); } 100% { opacity: 0; transform: translateY(-40px); } }
#countdown { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); font-family: var(--title); font-size: clamp(80px, 14vw, 150px); font-style: italic; color: var(--y); text-shadow: 0 6px 0 #9a4a00, 0 12px 30px rgba(0,0,0,.5); opacity: 0; }
#countdown.pop { animation: cd .8s ease-out forwards; }
@keyframes cd { 0% { transform: translate(-50%, -50%) scale(2); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.85); } }
#centerMsg { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); font-family: var(--title); font-size: clamp(44px, 8vw, 90px); font-style: italic; opacity: 0; white-space: nowrap; }
#centerMsg.show { animation: msgIn .4s cubic-bezier(.3,1.6,.5,1) forwards; }
#centerMsg.good { color: var(--g); text-shadow: 0 5px 0 #0b5a3f, 0 10px 30px rgba(0,0,0,.5); }
#centerMsg.bad { color: var(--r); text-shadow: 0 5px 0 #5a0b0b, 0 10px 30px rgba(0,0,0,.5); }
@keyframes msgIn { from { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
#vignette { position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: 0; background: radial-gradient(ellipse at 50% 45%, rgba(255,40,20,0) 45%, rgba(255,40,20,.35) 75%, rgba(140,0,0,.65) 100%); }
#speedlines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 7; }
#flash.on { animation: flash .6s ease-out; }
@keyframes flash { from { opacity: .85; } to { opacity: 0; } }

/* touch controls */
#touch { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
#touch .tl { position: absolute; left: calc(16px + env(safe-area-inset-left)); bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; gap: 14px; }
#touch .tr { position: absolute; right: calc(16px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; gap: 14px; align-items: flex-end; }
.tbtn { pointer-events: auto; background: rgba(15,18,26,.45); border-radius: 18px; display: grid; place-items: center; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); touch-action: none; }
.tbtn.down { background: rgba(255,210,63,.45); }
.tbtn.steer { width: 84px; height: 84px; }
.tbtn.steer svg { width: 44px; height: 44px; fill: rgba(255,255,255,.9); }
.tbtn.pedal.brake { width: 92px; height: 72px; }
.tbtn.pedal.gas { width: 74px; height: 120px; }
.tbtn.pedal svg { fill: rgba(220,224,232,.85); stroke: rgba(40,44,52,.9); stroke-width: 2; }
.tbtn.pedal.brake svg { width: 64px; }
.tbtn.pedal.gas svg { width: 40px; }
.tbtn.horn { position: absolute; right: calc(110px + env(safe-area-inset-right)); bottom: calc(150px + env(safe-area-inset-bottom)); width: 54px; height: 54px; border-radius: 50%; }
.tbtn.horn svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2; }
.noscript { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; }

/* ---------- small and portrait screens ---------- */
body.short #topbar { height: 50px; }
body.short .lv { width: 40px; height: 40px; }
body.short .lv b { font-size: 18px; }
body.short #modes, body.short #challenges, body.short #career, body.short #setup { padding-top: 54px; justify-content: flex-start; }
body.short .scr-title { margin-bottom: 8px; font-size: 22px; }
body.short .mode-card { height: 200px; width: 150px; }
body.short .mc-art svg { width: 90px; height: 64px; }
body.short .ch-grid { grid-template-columns: repeat(10, 1fr); gap: 6px; }
body.short .ch-tile { min-height: 70px; }
body.short .ch-tile small { display: none; }
body.short .menu-col { gap: 8px; margin-top: 46px; }
body.short .logo .l1 { font-size: 46px; }
body.short .logo .l2 { font-size: 32px; }
body.short .logo { margin-bottom: 4px; }
body.short .btn.big { font-size: 20px; padding: 10px 24px; }
body.short .btn { padding: 8px 18px; font-size: 15px; }
body.short .nav { bottom: 8px; left: 10px; }
body.short .tier { width: 200px; padding: 8px; gap: 5px; }
body.short .race-btn { padding: 5px 8px; }
body.short .g-info { top: 58px; }
body.short .g-info h2 { font-size: 28px; }
body.short .g-top { font-size: 22px; margin-top: 2px; }
body.short .g-stats { top: 56px; gap: 4px; padding: 8px 12px; width: 240px; }
body.short .st-pips { margin-bottom: 2px; }
body.short .up-btn { padding: 5px 8px; }
body.short .g-paint { bottom: 70px; }
body.short .swatch { width: 28px; height: 28px; }
body.short .g-bottom { bottom: 8px; }
body.short .arrow { width: 42px; height: 42px; }
body.short .res-score b { font-size: 34px; }
body.short .res-score small { font-size: 16px; }
body.short #resTable td { padding: 5px 10px; font-size: 12px; }
body.short #resTable tr.sum td { font-size: 14px; }
body.short #results { gap: 4px; padding: 6px; }
body.short .res-stars i { width: 30px; height: 30px; }
body.short .res-left { gap: 4px; }
body.short .panel { padding: 12px 18px; }
body.short .panel h3 { font-size: 20px; margin-bottom: 2px; }
body.short .panel p { margin: 6px 0; }
body.short .set-row { padding: 5px 2px; }
body.short .menu-car { bottom: 46px; }
body.short .hud-row { padding: 2px 10px; }
body.short .hud-row b { font-size: 14px; }
body.short .gear-box b, body.short .score-box b { font-size: 19px; }
body.short #bonusBar { top: 60px; }
body.short .tbtn.steer { width: 70px; height: 70px; }
body.short .tbtn.pedal.gas { width: 64px; height: 100px; }
body.short .tbtn.horn { bottom: 124px; right: 96px; }
body.short #btnCam { top: 58%; }

body.portrait #menu { align-items: center; justify-content: flex-start; padding: 70px 16px 0; }
body.portrait .menu-col { margin-top: 10px; align-items: stretch; width: min(340px, 90vw); gap: 10px; }
body.portrait .logo { text-align: center; }
body.portrait .logo .stripes { justify-content: center; }
body.portrait #btnPlay { margin-top: auto; }
body.portrait .menu-col { position: absolute; top: 76px; bottom: 60px; left: 50%; transform: translateX(-50%); }
body.portrait .logo { margin-bottom: auto; }
body.portrait .menu-car { left: 0; right: 0; bottom: auto; top: 46%; text-align: center; }
body.portrait .menu-car b { font-size: 22px; }
body.portrait .xpbar { width: 120px; }
body.portrait .cash { font-size: 19px; }
body.portrait .ch-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
body.portrait .tiers { flex-direction: column; overflow-y: auto; overflow-x: hidden; width: 100%; align-items: center; padding-bottom: 80px; }
body.portrait .tier { width: min(360px, 92vw); }
body.portrait .mode-cards { flex-direction: column; overflow-y: auto; overflow-x: hidden; align-items: center; width: 100%; padding-bottom: 80px; max-height: calc(100% - 60px); }
body.portrait .mode-card { width: min(340px, 90vw); height: 96px; flex-direction: row; padding: 10px 16px; }
body.portrait .mc-art svg { width: 70px; height: 50px; }
body.portrait .mc-name { font-size: 19px; }
body.portrait .mc-sub { font-size: 12px; position: absolute; left: 16px; bottom: 8px; }
body.portrait .mode-card .mc-name { align-self: flex-start; }
body.portrait #modes, body.portrait #challenges, body.portrait #career, body.portrait #setup { justify-content: flex-start; }
body.portrait .g-info { top: 76px; left: 0; right: 0; text-align: center; }
body.portrait .g-info h2 { font-size: 30px; }
body.portrait .g-top { font-size: 22px; margin-top: 2px; }
body.portrait .g-stats { top: auto; bottom: 168px; left: 50%; right: auto; transform: translateX(-50%); width: min(360px, 94vw); gap: 4px; padding: 8px 12px; display: grid; grid-template-columns: repeat(3, 1fr); }
body.portrait .stat .st-top { font-size: 11px; }
body.portrait .up-btn { font-size: 10px; padding: 6px 4px; }
body.portrait .g-paint { bottom: 76px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; }
body.portrait .swatches { justify-content: center; max-width: 360px; gap: 6px; }
body.portrait .swatch { width: 26px; height: 26px; }
body.portrait .opt-label { margin-top: 0; }
body.portrait .g-paint .opt-label { display: none; }
body.portrait .g-bottom { padding: 0 10px; bottom: 12px; }
body.portrait .g-bottom .btn { min-width: 0; padding: 10px 12px; font-size: 14px; }
body.portrait #gAction { min-width: 0; }
body.portrait .g-select { gap: 6px; }
body.portrait .g-dots { display: none; }
body.portrait .res-body { flex-direction: column; gap: 8px; }
body.portrait .res-left { flex: none; width: 100%; }
body.portrait .res-right { width: 100%; }
body.portrait .res-score b { font-size: 34px; }
body.portrait #resTable td { padding: 7px 8px; font-size: 12px; }
body.portrait .res-btns .btn { min-width: 0; flex: 1 1 40%; padding: 10px; }
body.portrait .nav { left: 50%; transform: translateX(-50%); bottom: 14px; }
body.portrait .hud-center { top: 140px; width: 88vw; }
body.portrait #goalText { font-size: 11px; }
body.portrait .score-box { min-width: 90px; padding: 3px 10px; }
body.portrait .score-box b { font-size: 18px; }
body.portrait .gear-box div { min-width: 56px; padding: 3px 8px; }
body.portrait .gear-box div + div { min-width: 60px; }
body.portrait .gear-box b { font-size: 18px; }
body.portrait .hud-row { min-width: 110px; padding: 2px 8px; }
body.portrait .hud-row b { font-size: 14px; }
body.portrait .icon-btn { width: 40px; height: 40px; }
body.portrait #bonusBar { top: 196px; flex-direction: column; align-items: center; gap: 6px; }
body.portrait .hud-right { gap: 3px; }
body.portrait #btnCam { top: 46%; }
body.portrait #posPill { font-size: 20px; }
body.portrait .tbtn.steer { width: 72px; height: 72px; }
body.portrait .tbtn.pedal.brake { width: 74px; height: 62px; }
body.portrait .tbtn.pedal.gas { width: 66px; height: 110px; }
body.portrait .tbtn.horn { right: 16px; bottom: 150px; }
body.portrait .credit { bottom: 10px; font-size: 13px; }
body:not([data-screen="race"]) #speedlines, body:not([data-screen="race"]) #vignette { display: none; }
body.portrait #pops { top: 34%; }
body.portrait #countdown, body.portrait #centerMsg { top: 40%; }