* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b2433; color: #fff; font: 15px/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; }
#bars { position: fixed; inset: 0; pointer-events: none; }
#bars i { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height .5s; }
#bars i:first-child { top: 0; } #bars i:last-child { bottom: 0; }
body.film #bars i { height: 9vh; }
body.film #c { filter: sepia(.18) contrast(1.06) saturate(1.1); }
#speed.stall @keyframes blink { to { opacity: .2; } }
.icon { pointer-events: auto; width: 44px; height: 44px; border-radius: 22px; border: 0; background: rgba(10, 20, 35, .55); color: #fff; font-size: 18px; }
#throttle { position: fixed; left: max(14px, env(safe-area-inset-left)); bottom: calc(28px + env(safe-area-inset-bottom)); width: 56px; height: 42vh; max-height: 300px; min-height: 170px; border-radius: 28px; background: rgba(10, 20, 35, .45); border: 2px solid rgba(255, 255, 255, .35); touch-action: none; }
#thrFill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 26px; background: linear-gradient(#ffb03f, #ff7a2a); opacity: .55; }
#thrKnob { position: absolute; left: 4px; right: 4px; height: 44px; border-radius: 22px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
#throttle span { position: absolute; top: -22px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 700; opacity: .8; }
#stickBase { position: fixed; width: 128px; height: 128px; margin: -64px 0 0 -64px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); background: rgba(10, 20, 35, .25); pointer-events: none; }
#stickKnob { position: absolute; left: 39px; top: 39px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
#hint { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: 70vw; text-align: center; background: rgba(10, 20, 35, .6); padding: 8px 14px; border-radius: 14px; font-size: 14px; pointer-events: none; }
#caption { position: fixed; left: 0; right: 0; bottom: calc(11vh + 6px); text-align: center; font: 800 clamp(18px, 4.6vw, 34px)/1.15 Georgia, serif; text-shadow: 0 2px 8px #000; pointer-events: none; padding: 0 16px; }
#card { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(8, 8, 10, .82); font-family: Georgia, serif; padding: 24px; pointer-events: none; }
#card .k { letter-spacing: .3em; font-size: 12px; opacity: .7; text-transform: uppercase; font-family: system-ui, sans-serif; }
#card .t { font-size: clamp(30px, 9vw, 64px); font-weight: 800; margin: 10px 0; color: #ffd23f; }
#card .s { font-size: clamp(16px, 4.4vw, 24px); font-style: italic; }
#sheet { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(94vw, 440px); max-height: calc(100% - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: rgba(18, 24, 36, .95); border-radius: 18px; padding: 14px 16px 8px; box-shadow: 0 8px 30px rgba(0,0,0,.5); text-align: center; -webkit-user-select: none; }
#sheet h2 { margin: 0 0 4px; font: 800 26px Georgia, serif; color: #ffd23f; }
#sheet p { margin: 6px 0; }
#takes { display: flex; justify-content: center; gap: 6px; margin: 8px 0; }
.take { padding: 4px 10px; border-radius: 12px; background: rgba(255,255,255,.1); font-size: 13px; opacity: .5; }
.take.got { background: #ffd23f; color: #222; opacity: 1; font-weight: 700; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0 6px; }
.btns button { min-height: 46px; padding: 0 18px; border-radius: 23px; border: 0; background: #2f4058; color: #fff; font-weight: 700; }
.btns button.primary { background: #ffd23f; color: #222; }
.foot { font-size: 11.5px; opacity: .65; }
.foot a { color: #9fd3ef; }
#toast { position: fixed; top: 30%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.75); padding: 10px 16px; border-radius: 12px; pointer-events: none; }
@media (pointer: fine) { #throttle { opacity: .75; } }
@media (min-width: 900px) { #sheet { left: auto; right: 24px; transform: none; bottom: 24px; } #hint { bottom: 24px; } }

/* ---- HUD ---- */
#hud { position: fixed; top: env(safe-area-inset-top); left: 0; right: 0; padding: 8px 10px; pointer-events: none; }
#topbar { display: flex; align-items: center; gap: 6px; }
#beats { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; background: rgba(10, 20, 35, .62); border-radius: 16px; padding: 6px 11px; font-size: 13.5px; white-space: nowrap; overflow: hidden; }
#beatNum { background: #ffd23f; color: #222; font-weight: 800; border-radius: 9px; padding: 1px 7px; font-size: 12px; }
#beatName { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
#beatDots { display: flex; gap: 3px; } #beatDots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.3); } #beatDots i.done { background: #4fc36a; } #beatDots i.next { background: #ffd23f; }
#timer { font-variant-numeric: tabular-nums; opacity: .85; font-size: 12.5px; } #timer.low { color: #ff6a5a; font-weight: 800; opacity: 1; }
body:not(.practice) #exit { opacity: .7; }
#gauges { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
#gauges canvas { width: 76px; height: 76px; }
#stall { margin: 4px auto 0; width: max-content; background: #e2483a; color: #fff; font-weight: 800; letter-spacing: .1em; padding: 2px 10px; border-radius: 8px; font-size: 12px; animation: blink .35s infinite alternate; }
@keyframes blink { to { opacity: .35; } }
#guide { position: fixed; left: 0; top: 0; margin: -22px 0 0 -30px; width: 60px; text-align: center; pointer-events: none; color: #ffd23f; text-shadow: 0 1px 4px #000; font-weight: 800; font-size: 12px; }
#guideArrow { font-size: 22px; line-height: 22px; display: inline-block; }
#guide:not(.edge) #guideArrow { font-size: 16px; }
@media (min-width: 900px) { #gauges { position: fixed; right: 16px; bottom: 18px; margin: 0; } #gauges canvas { width: 104px; height: 104px; } #stall { position: fixed; right: 150px; bottom: 132px; } #topbar { max-width: 640px; } }

/* ---- sheets ---- */
.kicker { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; margin-bottom: 2px; }
.kicker b { color: #ffd23f; letter-spacing: .12em; }
#sBody { margin: 4px 0 6px; }
.tag { display: inline-block; background: #ffd23f; color: #222; font-weight: 800; font-size: 11px; border-radius: 8px; padding: 1px 7px; margin-right: 4px; vertical-align: 1px; }
.beatlist { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; list-style: none; padding: 0; margin: 8px 0 2px; counter-reset: b; }
.beatlist li { counter-increment: b; background: rgba(255,255,255,.08); border-radius: 10px; padding: 3px 9px; font-size: 13px; }
.beatlist li::before { content: counter(b) ". "; color: #ffd23f; font-weight: 800; }
.take.fresh { box-shadow: 0 0 0 2px #fff; animation: pop .5s ease-out; }
@keyframes pop { from { transform: scale(1.4); } }
.help { font-size: 11.5px; opacity: .6; margin: 0 0 6px; }
.new { background: #4fc36a; color: #08210f; font-weight: 800; font-size: 11px; border-radius: 6px; padding: 1px 6px; }
.unlock { background: linear-gradient(90deg, #ffd23f, #ffb03f); color: #222; border-radius: 12px; padding: 8px 10px; margin: 6px 0; font-size: 14px; }
.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 2px; }
.plane { min-height: 56px; border-radius: 12px; border: 2px solid transparent; background: #263247; color: #fff; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1.15; }
.plane b { font-size: 13.5px; } .plane small { font-size: 10.5px; opacity: .7; }
.plane.sel { border-color: #ffd23f; background: #33405a; }
.plane.locked { opacity: .55; }
.note { font-size: 12.5px; opacity: .85; margin: 4px 0; }
.films { text-align: left; max-height: 46vh; overflow-y: auto; margin: 4px 0; }
.filmrow { display: grid; grid-template-columns: 1fr auto auto 44px; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid rgba(255,255,255,.08); }
.filmrow .fn small { display: block; opacity: .6; font-size: 11px; }
.filmrow .stars { color: #ffd23f; letter-spacing: 1px; }
.filmrow button { width: 44px; height: 44px; border-radius: 22px; border: 0; background: #ffd23f; color: #222; font-weight: 800; }
#card.gold .t { background: linear-gradient(180deg, #fff3b0, #ffd23f 45%, #c99a1e); -webkit-background-clip: text; background-clip: text; color: transparent; }
#card.gold { background: radial-gradient(ellipse at center, rgba(40,30,8,.92), rgba(8,8,10,.95)); }
#card.gold .k { color: #ffd23f; opacity: 1; }
#hudBtns { display: flex; gap: 6px; }
@media (max-width: 600px) { #hudBtns { position: fixed; right: 10px; top: calc(56px + env(safe-area-inset-top)); flex-direction: column; } }