:root {
  --ink: #fff7fb; --ink2: #cbb8e8; --bg: #120a29; --panel: rgba(28, 16, 56, .92); --pink: #ff4fa3; --cyan: #3ff0ff; --gold: #ffd23f; --lilac: #b07cff;
  --font: 'Pixelify Sans', ui-monospace, monospace;
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font: 16px/1.3 var(--font); -webkit-user-select: none; user-select: none; overscroll-behavior: none; touch-action: none; }
#screen { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
.screen { position: fixed; inset: 0; z-index: 5; }

/* buttons: chunky pixel pills */
.btn { padding: 10px 18px; border-radius: 12px; background: var(--cyan); color: #12082a; font-weight: 700; letter-spacing: .5px; box-shadow: 0 4px 0 #1b8fa0, 0 0 18px rgba(63,240,255,.35); transition: transform .06s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #1b8fa0; }
.btn.pink { background: var(--pink); color: #fff; box-shadow: 0 4px 0 #a3226a, 0 0 18px rgba(255,79,163,.4); }
#title .btn.new { position: relative; }
#title .btn.new::after { content: 'NEW'; position: absolute; top: -8px; right: -8px; font-size: 10px; padding: 2px 5px; border-radius: 6px; background: var(--gold); color: #3a1d5c; box-shadow: 0 0 10px var(--gold); animation: breathe 1.2s ease-in-out infinite; }
.btn.lilac { background: var(--lilac); color: #fff; box-shadow: 0 4px 0 #6a3fb0, 0 0 18px rgba(176,124,255,.4); }
.btn.gold { background: var(--gold); color: #3a1d5c; box-shadow: 0 4px 0 #b08a10, 0 0 18px rgba(255,210,63,.4); }
.btn.ghost { background: rgba(255,255,255,.1); color: var(--ink); box-shadow: 0 3px 0 rgba(0,0,0,.35); border: 2px solid rgba(255,255,255,.18); }
.btn.big { font-size: 22px; padding: 12px 28px; min-width: 200px; }
.btn.small { padding: 6px 12px; font-size: 14px; }

/* title */
#title { display: grid; place-items: center; align-content: center; gap: 18px; padding: calc(16px + var(--st)) 16px calc(16px + var(--sb)); background: radial-gradient(ellipse at 50% 35%, rgba(18,10,41,.15), rgba(18,10,41,.55)); }
.logo { display: grid; text-align: center; line-height: .9; transform: rotate(-4deg); }
.logo .l1 { font-size: clamp(38px, 9vw, 72px); font-weight: 700; color: var(--gold); text-shadow: 3px 3px 0 var(--pink), 6px 6px 0 #3a1d5c, 0 0 24px rgba(255,210,63,.5); }
.logo .l2 { font-size: clamp(46px, 11vw, 92px); font-weight: 700; color: var(--cyan); text-shadow: 3px 3px 0 var(--lilac), 6px 6px 0 #3a1d5c, 0 0 28px rgba(63,240,255,.55); letter-spacing: 4px; }
.logo small { margin-top: 8px; font-size: 16px; color: #fff; letter-spacing: 3px; text-shadow: 0 0 8px var(--pink); transform: rotate(4deg); }
.menu { display: grid; gap: 12px; justify-items: center; }
.row2 { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.foot { margin: 0; color: var(--ink2); font-size: 13px; text-shadow: 0 1px 0 #000; }

/* panels */
.panel { background: rgba(10,5,26,.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; flex-direction: column; padding: calc(14px + var(--st)) calc(14px + var(--sr)) calc(14px + var(--sb)) calc(14px + var(--sl)); }
.phead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.phead h2, .panel h2 { margin: 0; font-size: 26px; color: var(--gold); text-shadow: 2px 2px 0 var(--pink); }
.small-panel { align-items: center; justify-content: center; gap: 10px; text-align: center; }
.small-panel > * { max-width: 420px; }

/* driver level, medals, B-sides, the tour */
.lvl { display: grid; justify-items: center; gap: 3px; background: rgba(18,10,41,.6); padding: 6px 12px; border-radius: 12px; }
.lvl b { font-size: 14px; color: var(--gold); } .lvl small { font-size: 12px; color: var(--ink2); }
.lbar { width: 180px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; } .lbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--pink)); }
.medals { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 6px; }
.medals i { width: 10px; height: 10px; border-radius: 50%; background: rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.2); }
.medals i.bronze.on { background: #d08a4e; } .medals i.silver.on { background: #dfe6f0; } .medals i.gold.on { background: #ffd23f; box-shadow: 0 0 6px #ffd23f; }
.bsides { grid-column: 1 / -1; display: grid; gap: 6px; }
.bside { display: flex; gap: 6px; align-items: center; background: rgba(26,16,48,.55); border-radius: 10px; padding: 6px 8px; }
.bside > span { display: grid; flex: 1; } .bside b { font-size: 14px; } .bside small { font-size: 12px; color: var(--ink2); }
.bside.locked { opacity: .65; }
.gig-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; overflow-y: auto; padding-bottom: 12px; }
.gig { display: grid; gap: 3px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(255,79,163,.22), rgba(176,124,255,.2)); border: 1px solid rgba(255,255,255,.15); align-content: start; }
.gig.d-harbor { background: linear-gradient(135deg, rgba(255,179,71,.24), rgba(255,111,145,.18)); } .gig.d-highway { background: linear-gradient(135deg, rgba(255,79,216,.22), rgba(58,15,92,.4)); }
.gig.d-rain { background: linear-gradient(135deg, rgba(63,240,255,.18), rgba(40,60,110,.4)); } .gig.d-sakura { background: linear-gradient(135deg, rgba(255,159,192,.3), rgba(255,224,200,.15)); }
.gig.locked { opacity: .5; filter: saturate(.4); }
.gig b { font-size: 17px; } .gig small { color: var(--ink2); font-size: 12.5px; } .gig .gblurb { color: #fff; } .gig .gtarget { color: var(--cyan); } .gig .gneed { color: var(--gold); }
.gig .btn { justify-self: start; margin-top: 4px; }
.gstars { color: var(--gold); font-size: 18px; letter-spacing: 2px; } .gstars span { color: rgba(255,255,255,.3); }
.gig-info { top: calc(64px + var(--st)); right: auto; left: calc(10px + var(--sl)); max-width: 60vw; background: rgba(18,10,41,.6); padding: 4px 10px; border-radius: 10px; }
.gig-info small { color: var(--gold); font-size: 13px; }
.csub { grid-column: 1 / -1; color: var(--gold); font-weight: 700; margin-top: 6px; }

/* title extras */
.ghost-banner { position: absolute; left: 50%; bottom: calc(12px + var(--sb)); transform: translateX(-50%); display: flex; gap: 10px; align-items: center; background: rgba(28,16,56,.92); padding: 8px 12px; border-radius: 14px; border: 2px solid var(--lilac); width: max-content; max-width: 92vw; font-size: 14px; }
input { font: inherit; color: #2a1846; background: #fff7e6; border: 0; border-radius: 10px; padding: 6px 10px; width: 150px; text-transform: none; user-select: text; -webkit-user-select: text; }
#plateInput { text-transform: uppercase; letter-spacing: 3px; width: 120px; text-align: center; font-weight: 700; }

/* garage shop */
.gnotes { margin-left: auto; margin-right: 10px; color: var(--gold); font-weight: 700; font-size: 18px; }
.gleft { display: grid; justify-items: center; gap: 4px; position: relative; }
.gname { font-size: 18px; font-weight: 700; color: #fff; text-shadow: 2px 2px 0 var(--pink); }
.gmsg { position: absolute; top: 6px; font-weight: 700; color: var(--gold); opacity: 0; }
.gmsg.show { animation: popup 1.4s ease-out forwards; }
.gright { display: grid; gap: 8px; align-content: start; max-width: 520px; }
.gtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ggrid { display: flex; flex-wrap: wrap; gap: 6px; }
.gsub { color: var(--ink2); font-size: 14px; display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.gitem { display: grid; justify-items: center; gap: 1px; min-width: 70px; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.1); border: 2px solid transparent; font-size: 13px; }
.gitem b { font-weight: 600; } .gitem small { font-size: 11px; color: var(--gold); }
.gitem.on { border-color: var(--gold); background: rgba(255,210,63,.16); }
.gitem.locked { opacity: .8; } .gitem.locked b { color: var(--ink2); }
.gitem.sw { min-width: 0; width: 36px; height: 36px; padding: 0; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); align-content: end; }
.gitem.sw small { font-size: 9px; color: #fff; text-shadow: 0 1px 0 #000; }
.gitem.sw.on { border-color: #fff; box-shadow: 0 0 0 2px var(--gold), 0 0 12px var(--gold); }

/* daily + collection */
.dcard { background: linear-gradient(135deg, rgba(255,210,63,.18), rgba(255,79,163,.18)); border: 2px solid rgba(255,210,63,.5); border-radius: 16px; padding: 14px 18px; display: grid; gap: 4px; width: min(420px, 92vw); }
.dcard p { margin: 0; color: var(--ink2); }
.dday { color: var(--ink2); font-size: 13px; } .dsong { font-size: 22px; } .dmod { color: var(--gold); font-weight: 700; font-size: 18px; }
.dtarget b { color: var(--cyan); } .dbest { color: var(--ink2); font-size: 14px; } .dreward { color: var(--pink); font-weight: 700; }
.clist { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; overflow-y: auto; margin-top: 8px; padding-bottom: 10px; }
.citem { background: rgba(255,255,255,.07); border-radius: 12px; padding: 8px 10px; display: grid; gap: 3px; opacity: .65; }
.citem.got { opacity: 1; background: rgba(255,210,63,.12); border: 1px solid rgba(255,210,63,.4); }
.citem small { color: var(--ink2); font-size: 12.5px; } .citem .rew { color: var(--gold); }
.citem.lm { justify-items: center; text-align: center; }
.citem.lm canvas { width: 64px; height: 64px; image-rendering: pixelated; }
.lmq { width: 64px; height: 64px; display: grid; place-items: center; font-size: 30px; color: rgba(255,255,255,.25); }
.stk { display: flex; gap: 6px; } .stk i { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.1); border: 2px dashed rgba(255,255,255,.3); }
.stk i.got { background: var(--gold); border: 2px solid #fff7c2; box-shadow: 0 0 10px var(--gold); }
#colCount { font-size: 15px; color: var(--ink2); text-shadow: none; }

/* HUD extras */
.nh { color: var(--gold) !important; }
.power { position: absolute; top: calc(118px + var(--st)); left: 50%; transform: translateX(-50%); background: rgba(176,124,255,.35); border: 2px solid var(--lilac); padding: 3px 10px; border-radius: 10px; font-weight: 700; font-size: 14px; }

/* tapes */
.tape-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; overflow-y: auto; padding-bottom: 12px; }
.cassette { display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: center; padding: 12px; border-radius: 14px; background: linear-gradient(135deg, #ff7aa2, #b07cff); box-shadow: 0 4px 0 rgba(0,0,0,.35); position: relative; }
.cassette.d-harbor { background: linear-gradient(135deg, #ffb347, #ff6f91); }
.cassette.d-highway { background: linear-gradient(135deg, #ff4fd8, #3a0f5c); }
.cassette.locked { background: #2a2244; filter: saturate(.3); }
.cassette .reel { height: 44px; border-radius: 8px; background: #1a1030; display: flex; justify-content: space-around; align-items: center; }
.cassette .reel i { width: 14px; height: 14px; border-radius: 50%; border: 3px solid #fff7e6; animation: spin 2.5s linear infinite; border-right-color: transparent; }
.cassette.locked .reel i { animation: none; opacity: .4; }
@keyframes spin { to { transform: rotate(360deg); } }
.cassette .label { display: grid; gap: 2px; background: #fff7e6; color: #2a1846; border-radius: 8px; padding: 6px 9px; }
.cassette .label b { font-size: 17px; }
.cassette .label small { font-size: 12.5px; color: #6a4f88; }
.cassette .label .note { color: #8a6aa8; font-style: italic; }
.cassette .label .best { color: #c2185b; font-weight: 700; }
.cassette .acts { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }

/* garage */
.garage-body { display: flex; gap: 16px; align-items: flex-start; justify-content: center; flex-wrap: wrap; overflow-y: auto; }
#garageCar { width: min(320px, 80vw); height: auto; aspect-ratio: 8 / 5; image-rendering: pixelated; background: radial-gradient(ellipse at 50% 100%, #3a1d5c, transparent 70%); border-radius: 16px; }
#garageOpts { display: grid; gap: 10px; }
.grow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.grow span { width: 86px; color: var(--ink2); font-size: 14px; }
.opt { padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.1); border: 2px solid transparent; font-size: 14px; }
.opt.on { border-color: var(--gold); background: rgba(255,210,63,.18); }
.opt.sw { width: 30px; height: 30px; padding: 0; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.opt.sw.on { border-color: #fff; box-shadow: 0 0 0 2px var(--c), 0 0 12px var(--c); }

/* HUD */
.hud { pointer-events: none; }
.hud button { pointer-events: auto; }
.hud-top { position: absolute; top: calc(8px + var(--st)); left: calc(10px + var(--sl)); right: calc(10px + var(--sr)); display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.np { display: flex; gap: 8px; align-items: center; background: rgba(18,10,41,.55); padding: 6px 10px; border-radius: 12px; min-width: 0; flex: 0 1 auto; }
.np > div { min-width: 0; }
.np b { display: block; font-size: 15px; text-shadow: 0 0 8px rgba(255,79,163,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-right { flex: none; }
.coach { position: absolute; left: 50%; bottom: calc(25% + var(--sb)); transform: translateX(-50%); background: rgba(18,10,41,.82); border: 2px solid var(--gold); color: #fff; font-weight: 700; font-size: 15px; padding: 6px 14px; border-radius: 12px; white-space: nowrap; pointer-events: none; box-shadow: 0 0 16px rgba(255,210,63,.35); }
.coach.in { animation: coachIn 2.6s ease-out forwards; }
@keyframes coachIn { 0% { opacity: 0; transform: translate(-50%, 8px); } 10% { opacity: 1; transform: translate(-50%, 0); } 85% { opacity: 1; } 100% { opacity: 0; } }
.cas { width: 22px; height: 14px; border-radius: 3px; background: var(--pink); box-shadow: inset 0 0 0 2px #fff7e6; }
.layers { display: flex; gap: 3px; margin-top: 3px; }
.layers i { font-style: normal; font-size: 10px; padding: 1px 4px; border-radius: 4px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.35); transition: all .2s; }
.layers i.on { background: var(--cyan); color: #12082a; box-shadow: 0 0 8px var(--cyan); }
.layers i.on:nth-child(3) { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.layers i.on:nth-child(4) { background: var(--pink); color: #fff; box-shadow: 0 0 8px var(--pink); }
.layers i.on:nth-child(5) { background: var(--lilac); color: #fff; box-shadow: 0 0 8px var(--lilac); }
.hud-right { display: flex; gap: 8px; align-items: flex-start; }
.score { display: grid; justify-items: end; background: rgba(18,10,41,.55); padding: 4px 10px; border-radius: 12px; }
.score b { font-size: 20px; color: var(--gold); text-shadow: 2px 2px 0 #7a2a5a; }
.score small { color: var(--cyan); font-size: 13px; }
.icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(18,10,41,.6); font-weight: 700; border: 2px solid rgba(255,255,255,.2); }
.icon.small { width: auto; height: 30px; padding: 0 10px; font-size: 12px; }
.race-info { position: absolute; top: calc(86px + var(--st)); right: calc(10px + var(--sr)); display: grid; justify-items: end; gap: 4px; }
.race-info b { font-size: 28px; color: #fff; text-shadow: 2px 2px 0 var(--pink); }
.progress { width: 120px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--pink)); }
.cruise-info { position: absolute; top: calc(86px + var(--st)); right: calc(10px + var(--sr)); display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink2); }
.hud-bottom { position: absolute; left: calc(10px + var(--sl)); right: calc(10px + var(--sr)); bottom: calc(10px + var(--sb)); display: flex; justify-content: space-between; align-items: flex-end; }
.pad { width: 92px; height: 92px; border-radius: 50%; font-weight: 700; font-size: 15px; background: rgba(18,10,41,.55); border: 3px solid rgba(255,255,255,.3); position: relative; overflow: hidden; }
.pad.on { border-color: var(--gold); box-shadow: 0 0 18px var(--gold); color: var(--gold); }
.pad.boost { margin-left: auto; }
.pad.boost span { position: relative; z-index: 1; }
.pad.boost i { position: absolute; left: 0; bottom: 0; height: 100%; width: 0; background: rgba(63,240,255,.28); transition: width .15s; }
.pad.boost.ready { border-color: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.mid { position: fixed; top: calc(10px + var(--st)); left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; }
.mid span { font-size: 13px; color: var(--ink2); text-shadow: 0 1px 0 #000; }
.beatbar { display: flex; gap: 8px; padding: 6px 10px; border-radius: 12px; background: rgba(18,10,41,.5); transition: transform .08s; }
.beatbar.hit { transform: scale(1.08); }
.beatbar i { width: 14px; height: 14px; border-radius: 4px; background: rgba(255,255,255,.18); }
.beatbar i.on { background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.beatbar i:first-child.on { background: var(--gold); box-shadow: 0 0 12px var(--gold); }
#pops { position: absolute; left: 0; right: 0; top: 30%; display: grid; justify-items: center; gap: 2px; }
.pop { font-weight: 700; font-size: 20px; color: #fff; text-shadow: 2px 2px 0 #3a1d5c, 0 0 10px rgba(255,255,255,.5); animation: popup 1.1s ease-out forwards; }
.pop.big { font-size: 30px; color: var(--gold); text-shadow: 3px 3px 0 var(--pink), 0 0 18px rgba(255,210,63,.7); }
.pop.good { color: var(--cyan); }
.pop.layer { color: var(--lilac); font-size: 18px; }
.pop.bad { color: #ff8a8a; }
.pop.small { font-size: 15px; color: var(--ink2); }
.pop.drift { font-size: 16px; color: var(--gold); }
@keyframes popup { 0% { transform: scale(.4); opacity: 0; } 15% { transform: scale(1.15); opacity: 1; } 30% { transform: scale(1); } 100% { transform: translateY(-30px); opacity: 0; } }
.drift-meter { position: absolute; left: 50%; bottom: calc(30% + var(--sb)); transform: translateX(-50%); display: flex; gap: 8px; align-items: baseline; font-weight: 700; color: var(--gold); text-shadow: 2px 2px 0 var(--pink), 0 0 14px rgba(255,210,63,.6); pointer-events: none; animation: driftIn .2s ease-out; }
.drift-meter b { font-size: 18px; letter-spacing: 2px; } .drift-meter span { font-size: 30px; }
@keyframes driftIn { from { transform: translateX(-50%) scale(.6); opacity: 0; } }
#countdown { position: absolute; inset: 0; display: grid; place-items: center; font-size: 96px; font-weight: 700; color: var(--gold); text-shadow: 5px 5px 0 var(--pink), 0 0 30px rgba(255,210,63,.6); opacity: 0; pointer-events: none; }
#countdown.go { animation: count .7s ease-out; }
@keyframes count { 0% { transform: scale(1.8); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); opacity: 0; } }
.controls-hint { position: absolute; left: 0; right: 0; top: 45%; display: flex; justify-content: space-between; padding: 0 calc(16px + var(--sl)); color: #fff; font-size: 15px; text-shadow: 0 2px 0 #000; animation: fadeHint 6s ease-in forwards; }
.controls-hint em { position: absolute; left: 0; right: 0; top: 34px; text-align: center; font-style: normal; color: var(--gold); }
@keyframes fadeHint { 80% { opacity: 1; } 100% { opacity: 0; } }

/* the first-drive lesson */
.tut { position: absolute; top: calc(62px + var(--st)); left: 50%; transform: translateX(-50%); width: min(460px, 86vw); background: rgba(28,16,56,.9); border: 2px solid var(--cyan); border-radius: 14px; padding: 8px 14px 10px; text-align: center; box-shadow: 0 0 20px rgba(63,240,255,.3); pointer-events: auto; animation: pop2 .25s ease-out; }
.tut p { margin: 4px 0 0; font-size: 16px; line-height: 1.3; }
.tut-dots { display: flex; gap: 5px; justify-content: center; }
.tut-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); }
.tut-dots i.done { background: var(--cyan); } .tut-dots i.on { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.tut-skip { position: absolute; top: 4px; right: 8px; font-size: 12px; color: var(--ink2); text-decoration: underline; }
@keyframes pop2 { from { transform: translateX(-50%) scale(.92); opacity: 0; } }
.tut-hint { position: absolute; inset: 0; pointer-events: none; }
.tut-hint .half { position: absolute; top: 0; bottom: 0; width: 50%; display: grid; place-items: center; animation: breathe 1.2s ease-in-out infinite; }
.tut-hint .half.right { right: 0; background: linear-gradient(270deg, rgba(63,240,255,.28), rgba(63,240,255,0)); }
.tut-hint .half.left { left: 0; background: linear-gradient(90deg, rgba(63,240,255,.28), rgba(63,240,255,0)); }
.tut-hint .half b { font-size: 26px; color: #fff; text-shadow: 0 0 12px var(--cyan); padding: 0 24px; }
.tut-hint .tilt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; font-weight: 700; color: var(--cyan); text-shadow: 0 0 14px var(--cyan); animation: breathe 1.2s ease-in-out infinite; }
.tut-hint .flick { position: absolute; left: 50%; bottom: 38%; transform: translateX(-50%); display: grid; justify-items: center; font-size: 40px; color: var(--gold); text-shadow: 0 0 14px var(--gold); animation: flickUp 1.1s ease-out infinite; }
.tut-hint .flick small { font-size: 14px; }
@keyframes breathe { 50% { opacity: .45; } }
@keyframes flickUp { 0% { transform: translate(-50%, 30px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%, -30px); opacity: 0; } }
.layers.tut-glow { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; animation: breathe 1s ease-in-out infinite; }

/* pause + results */
.setting { display: flex; align-items: center; gap: 8px; }
.setting span { width: 110px; text-align: right; color: var(--ink2); }
.setting b { width: 70px; }
.hint { margin: -4px 0 4px; font-size: 12.5px; color: var(--ink2); }
.seg { padding: 6px 12px; border-radius: 10px; background: rgba(255,255,255,.1); border: 2px solid transparent; font-size: 14px; }
.seg.on { border-color: var(--cyan); background: rgba(63,240,255,.16); color: #fff; }
.pad small { display: block; font-size: 10px; color: var(--ink2); font-weight: 400; }
#pause { overflow-y: auto; justify-content: flex-start; padding-top: calc(18px + var(--st)); }
.place { font-size: 84px; font-weight: 700; line-height: 1; color: var(--gold); text-shadow: 4px 4px 0 var(--pink), 0 0 30px rgba(255,210,63,.5); }
.place.p2 { color: #e6ecff; } .place.p3 { color: #ffb07a; } .place.p4 { color: var(--ink2); }
.stats { display: grid; gap: 4px 18px; width: min(360px, 90vw); background: rgba(255,255,255,.06); border-radius: 12px; padding: 10px 14px; }
.stats div { display: flex; justify-content: space-between; font-size: 15px; }
.stats span { color: var(--ink2); }
.stats em { color: var(--gold); font-style: normal; }

#results { overflow-y: auto; justify-content: flex-start; padding-top: calc(12px + var(--st)); }
#results .place { font-size: 64px; }
@media (orientation: landscape) {
  .stats { grid-template-columns: 1fr 1fr; width: min(640px, 92vw); }
  .garage-body { flex-wrap: nowrap; height: calc(100vh - 80px); }
  #garageCar { width: min(300px, 36vw); }
  .gright { max-height: 100%; overflow-y: auto; padding-right: 4px; }
}
@media (orientation: portrait) {
  .pad { width: 80px; height: 80px; }
  .race-info, .cruise-info { top: calc(96px + var(--st)); }
  .mid { top: calc(70px + var(--st)); }
  .tut { top: calc(132px + var(--st)); }
  .hud-top { flex-wrap: nowrap; }
  .coach { font-size: 13px; white-space: normal; text-align: center; width: 80vw; }
}