:root { --ink:#fff; --panel:rgba(15,20,40,.78); --accent:#7dffb0; --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px); --ctl:.7; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; background:#101528; color:var(--ink); font:16px/1.4 system-ui,-apple-system,sans-serif; overflow:hidden; }
#game { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }
#vignette { position:fixed; inset:0; pointer-events:none; background:radial-gradient(ellipse 75% 70% at 50% 48%, transparent 58%, rgba(0,0,0,.42) 100%); } /* soft darkening at the edges, like a camera lens */
#hud { position:fixed; inset:0; pointer-events:none; }
[hidden] { display:none !important; }
#touch { display:none; }
@media (pointer:coarse) { #touch { display:block; } }
body.force-touch #touch { display:block; }
#pad { position:absolute; left:calc(20px + var(--safe-l)); bottom:calc(20px + var(--safe-b)); width:200px; height:84px; border-radius:42px; background:var(--panel); opacity:var(--ctl); pointer-events:auto; touch-action:none; }
#knob { position:absolute; top:6px; left:calc(50% - 36px); width:72px; height:72px; border-radius:50%; background:var(--accent); opacity:.85; }
#actions { position:absolute; right:calc(20px + var(--safe-r)); bottom:calc(20px + var(--safe-b)); display:flex; gap:12px; align-items:flex-end; }
#actions button { pointer-events:auto; touch-action:none; min-width:72px; height:72px; border:0; border-radius:36px; background:var(--panel); color:var(--ink); font:700 15px system-ui; opacity:var(--ctl); user-select:none; -webkit-user-select:none; padding:0 14px; }
#actions button.down { background:var(--accent); color:#102; }
#btn-pedal { height:88px !important; min-width:88px !important; }
/* Jump sits above the steering pad, so one thumb steers and jumps while the other keeps pedalling */
#btn-jump { position:absolute; left:calc(132px + var(--safe-l)); bottom:calc(116px + var(--safe-b)); width:88px; height:72px; pointer-events:auto; touch-action:none; border:0; border-radius:36px; background:var(--panel); color:var(--ink); font:700 15px system-ui; opacity:var(--ctl); user-select:none; -webkit-user-select:none; }
#btn-jump.down { background:var(--accent); color:#102; }
#title,.screen { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; background:linear-gradient(#1b2347,#0d1020); z-index:5; }
#pause,#inventory,#defeat,#victory { background:rgba(8,10,24,.8); }
h1 { font-size:clamp(40px,10vw,84px); margin:0; letter-spacing:.04em; }
.tag { margin:0; color:var(--accent); font-size:20px; }
.row label { display:flex; gap:10px; align-items:center; }
select { font:inherit; padding:6px 10px; border-radius:8px; }
button#start,button#resume,button#continue,button#retry,button#again,button#set-close { font:700 20px system-ui; padding:16px 36px; min-height:56px; border:0; border-radius:14px; background:var(--accent); color:#102; cursor:pointer; }
.keys { max-width:520px; opacity:.75; font-size:14px; }
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }

#btn-recover { position:absolute; left:50%; top:30%; transform:translateX(-50%); pointer-events:auto; font:700 16px system-ui; padding:14px 22px; min-height:56px; border:0; border-radius:14px; background:#ffd23c; color:#102; }
#btn-recover[hidden] { display:none; }
#rotate { display:none; }
@media (orientation:portrait) and (pointer:coarse) {
  #rotate { display:block; position:absolute; left:50%; bottom:calc(120px + var(--safe-b)); transform:translateX(-50%); background:var(--panel); padding:4px 10px; border-radius:8px; font-size:13px; white-space:nowrap; animation:fade 6s forwards; }
  #pad { width:150px; } #actions { gap:8px; width:150px; flex-wrap:wrap-reverse; justify-content:flex-end; }
  #btn-pedal { order:1; } #btn-brake { order:2; }
  #btn-jump { left:calc(98px + var(--safe-l)); width:72px; height:64px; }
  #actions button { min-width:64px; height:64px; padding:0 10px; } #btn-pedal { height:76px !important; min-width:76px !important; }
}
@keyframes fade { 0%,70% { opacity:1 } 100% { opacity:0; visibility:hidden } }

/* --- Milestone 3 HUD --- */
.panel { background:var(--panel); border-radius:10px; }
#topleft { position:absolute; left:calc(12px + var(--safe-l)); top:12px; width:min(250px,52vw); display:flex; flex-direction:column; gap:6px; }
#hp { position:relative; height:28px; border-radius:10px; background:rgba(0,0,0,.55); overflow:hidden; }
#hp-fill { position:absolute; inset:0 auto 0 0; width:100%; background:#3ecf6e; transition:width .15s; }
#hp-fill.low { background:#ff6b5a; }
#hp-text { position:relative; display:block; text-align:center; font:700 14px/28px system-ui; text-shadow:0 1px 2px #000; }
#mission-box { background:var(--panel); padding:6px 10px; border-radius:10px; font-size:14px; }
#mission-step { font-weight:700; color:var(--accent); }
#nearby { background:var(--panel); padding:3px 10px; border-radius:10px; font-size:12px; width:max-content; }
#compass { position:absolute; left:50%; top:12px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; background:var(--panel); padding:6px 14px; border-radius:22px; font-weight:700; }
#arrow { color:var(--accent); font-size:22px; line-height:1; display:inline-block; }
#topright { position:absolute; right:calc(12px + var(--safe-r)); top:12px; display:flex; gap:8px; align-items:flex-start; flex-direction:row-reverse; }
#minimap { width:120px; height:120px; border-radius:50%; background:rgba(0,0,0,.45); border:2px solid rgba(255,255,255,.35); }
#speed { position:absolute; left:calc(20px + var(--safe-l)); bottom:calc(20px + var(--safe-b)); background:var(--panel); padding:6px 12px; border-radius:10px; font-weight:700; }
@media (pointer:coarse) { #speed { bottom:calc(116px + var(--safe-b)); } }
body.force-touch #speed { bottom:calc(116px + var(--safe-b)); }
/* (the speed readout sits above the pad's outer end, beside Jump) */
#items { position:absolute; left:50%; bottom:calc(20px + var(--safe-b)); transform:translateX(-50%); display:flex; gap:8px; }
#items button { pointer-events:auto; min-width:56px; height:56px; border:0; border-radius:14px; background:var(--panel); color:var(--ink); font:600 18px system-ui; padding:0 12px; }
#items button:disabled { opacity:.4; }
#items button:not(:disabled):active { background:var(--accent); color:#102; }
#toast { position:absolute; left:50%; top:34%; transform:translateX(-50%); background:rgba(0,0,0,.75); padding:10px 18px; border-radius:12px; font-weight:700; opacity:0; transition:opacity .2s; text-align:center; max-width:80vw; }
#toast.show { opacity:1; }
#hurt { position:absolute; inset:0; background:radial-gradient(transparent 55%, rgba(255,120,120,.55)); opacity:0; }
#hurt.flash { animation:hurt .5s ease-out; }
@keyframes hurt { from { opacity:1 } to { opacity:0 } }
.warn { background:#5a3a10; padding:8px 14px; border-radius:10px; max-width:460px; font-size:14px; }
#slots { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; width:min(520px,92vw); }
#slots li { background:var(--panel); padding:14px 8px; border-radius:10px; font-weight:600; }
#slots li.empty { opacity:.4; font-weight:400; }
button.small { font:600 16px system-ui; padding:12px 18px; min-height:48px; border:0; border-radius:12px; background:var(--accent); color:#102; }
.screen p { max-width:460px; margin:0; }
@media (orientation:portrait) and (pointer:coarse) {
  #topright { flex-direction:column; align-items:flex-end; }
  #minimap { width:100px; height:100px; }
  #compass { left:calc(12px + var(--safe-l)); top:178px; transform:none; }
  #items { left:calc(12px + var(--safe-l)); bottom:calc(192px + var(--safe-b)); transform:none; }
  #items button { min-width:48px; height:52px; padding:0 8px; }
  #speed, body.force-touch #speed { bottom:calc(256px + var(--safe-b)); }
  #rotate { bottom:calc(316px + var(--safe-b)); }
}
@media (prefers-reduced-motion:reduce) { #hurt.flash { animation:none; opacity:.35; } }

/* --- Milestone 4: settings, accessibility, handedness --- */
:focus-visible { outline:3px solid #ffd23c; outline-offset:2px; }
.form { display:flex; flex-direction:column; gap:12px; width:min(460px,92vw); text-align:left; max-height:calc(100dvh - 190px); overflow:auto; padding:4px; }
.form label { display:flex; justify-content:space-between; align-items:center; gap:16px; background:var(--panel); padding:10px 14px; border-radius:10px; }
.form label.check { justify-content:flex-start; }
.form input[type=checkbox] { width:22px; height:22px; accent-color:#7dffb0; }
.form input[type=range] { width:50%; accent-color:#7dffb0; }
.form details { background:var(--panel); border-radius:10px; padding:10px 14px; }
.form summary { cursor:pointer; font-weight:600; }
.form textarea { width:100%; margin:8px 0; font:12px monospace; background:#0a0d1c; color:#cfe; border:1px solid #556; border-radius:8px; padding:8px; }
#settings { background:linear-gradient(#1b2347,#0d1020); z-index:6; }
body.lefty #pad { left:auto; right:calc(20px + var(--safe-r)); }
body.lefty #actions { right:auto; left:calc(20px + var(--safe-l)); flex-direction:row-reverse; }
body.lefty #btn-jump { left:auto; right:calc(132px + var(--safe-r)); }
body.lefty #speed { left:auto; right:calc(20px + var(--safe-r)); }
@media (pointer:coarse) { body.lefty #speed { bottom:calc(116px + var(--safe-b)); } }
@media (orientation:portrait) and (pointer:coarse) {
  body.lefty #pad { right:calc(20px + var(--safe-r)); }
  body.lefty #actions { left:calc(20px + var(--safe-l)); flex-direction:row-reverse; }
  body.lefty #items { left:auto; right:calc(12px + var(--safe-r)); }
  body.lefty #btn-jump { left:auto; right:calc(98px + var(--safe-r)); }
  body.lefty #speed, body.lefty.force-touch #speed { left:auto; right:calc(20px + var(--safe-r)); bottom:calc(256px + var(--safe-b)); }
}
@media (forced-colors:active) { #hp-fill { background:Highlight; } }
#btn-brake small { font-weight:400; font-size:11px; opacity:.8; }

/* --- levels --- */
#level-name { background:var(--panel); padding:3px 10px; border-radius:10px; font-size:12px; font-weight:700; letter-spacing:.03em; width:max-content; max-width:100%; }
#level-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:min(640px,94vw); max-height:calc(100dvh - 230px); overflow:auto; }
#level-list button { width:100%; text-align:left; background:var(--panel); color:var(--ink); border:1px solid rgba(255,255,255,.15); border-radius:12px; padding:10px 14px; min-height:56px; font:600 16px system-ui; }
#level-list button small { display:block; font-weight:400; opacity:.75; }
#level-list button:disabled { opacity:.35; }
#level-list button:not(:disabled):hover, #level-list button:not(:disabled):focus-visible { background:var(--accent); color:#102; }
.stars { color:#ffd23c; letter-spacing:.1em; }
#level-list button:not(:disabled):hover .stars { color:#102; }
@media (max-width:520px) { #level-list { grid-template-columns:1fr; } }
button#lv-close { font:700 18px system-ui; padding:12px 30px; min-height:52px; border:0; border-radius:14px; background:var(--accent); color:#102; }

/* --- being pulled off --- */
#grip { position:relative; height:24px; border-radius:10px; background:rgba(0,0,0,.55); overflow:hidden; border:1px solid rgba(255,90,90,.6); }
#grip-fill { position:absolute; inset:0 auto 0 0; width:0; background:#e0463a; }
#grip-text { position:relative; display:block; text-align:center; font:700 12px/24px system-ui; text-shadow:0 1px 2px #000; }
body.onfoot #hud { box-shadow:inset 0 0 90px rgba(255,80,60,.35); }

/* --- always-visible Pause and Recover buttons --- */
#side-btns { display:flex; flex-direction:column; gap:8px; }
#btn-pause, #btn-reset { pointer-events:auto; width:66px; height:56px; border:0; border-radius:14px; background:var(--panel); color:var(--ink); font:700 14px system-ui; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; touch-action:manipulation; }
#btn-pause .ico, #btn-reset .ico { font-size:18px; line-height:1; }
#btn-pause small, #btn-reset small { font:600 11px system-ui; opacity:.85; }
#btn-reset { background:#6b5a18; }
#btn-recover { touch-action:manipulation; }
.kbd { display:none; }
@media (pointer:fine) { .kbd { display:inline; } }
@media (orientation:portrait) and (pointer:coarse) { #side-btns { flex-direction:row; } }

/* --- title screen art --- */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#title { background:#0d1020 url(images/title-art.webp) 34% 42% / cover no-repeat; align-items:flex-start; justify-content:flex-end; text-align:left; padding:0 0 clamp(16px,5vh,48px) clamp(16px,4vw,56px); }
#title::before { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(6,10,22,.78) 0%, rgba(6,10,22,.35) 38%, rgba(6,10,22,0) 62%); pointer-events:none; }
#title-menu { position:relative; display:flex; flex-direction:column; gap:10px; align-items:stretch; width:min(340px, 88vw); padding:14px; border-radius:18px; background:rgba(8,12,26,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
#title-menu .keys { max-width:none; font-size:12px; margin:2px 4px 0; opacity:.8; text-align:left; }
#title-menu button { width:100%; }
#title-menu .warn { max-width:none; }
@media (max-aspect-ratio:1/1) { #title { background-size:100% auto; background-position:top center; justify-content:flex-start; padding:calc(56.3vw + 16px) 0 18px 0; align-items:center; overflow:auto; } #title::before { background:linear-gradient(to bottom, rgba(13,16,32,0) 28%, #0d1020 58%); } }
@media (max-height:420px) { #title-menu { flex-direction:row; flex-wrap:wrap; width:auto; max-width:92vw; } #title-menu .keys { display:none; } #title-menu button { width:auto; } }

/* --- how to play (in Settings) --- */
.howto { text-align:left; font-size:14px; line-height:1.45; margin-top:6px; }
.howto h3 { margin:12px 0 4px; font-size:14px; color:var(--accent); }
.howto ul { margin:0; padding-left:18px; } .howto li { margin:3px 0; } .howto p { margin:0; max-width:none; }