@font-face { font-family:'Rubik Dirt'; src:url(fonts/rubik-dirt.woff2) format('woff2'); font-display:block; }
@font-face { font-family:'VT323'; src:url(fonts/vt323.woff2) format('woff2'); font-display:block; }
@font-face { font-family:'Oswald'; src:url(fonts/oswald-700.woff2) format('woff2'); font-weight:700; font-display:swap; }
:root { --fire:#2f8f45; --ember:#2f8f45; --goblin:#7cff3a; --ink:#ffffff; --dark:#120806; --panel:rgba(18,8,6,.92); --edge:#3a1a12; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; overscroll-behavior:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; background:#000; color:var(--ink); font-family:'Rubik Dirt', sans-serif; font-size:20px; touch-action:none; user-select:none; -webkit-user-select:none; }
#game { position:fixed; inset:0; width:100%; height:100%; display:block; image-rendering:auto; transition:filter .25s; }
#game.slowmo { filter:saturate(2.6) contrast(1.15) hue-rotate(-8deg); }
.hidden { display:none !important; }
button { font-family:'Rubik Dirt', sans-serif; font-size:19.2px; color:var(--ink); background:#1e0e0a; border:2px solid var(--edge); padding:12px 16px; cursor:pointer; text-transform:uppercase; }
button:hover, button:focus-visible { border-color:var(--fire); color:#ffffff; outline:none; }
button.big { background:var(--fire); color:#1a0703; border-color:#5fbf5a; font-size:22.4px; padding:16px 22px; }
button.big:hover { background:#2f8f45; }
button.ghost { background:transparent; border-color:#555; }

/* HUD */
#hud { position:fixed; inset:0; pointer-events:none; }
#hellTint { position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(47,143,69,0) 40%, rgba(47,143,69,.0) 100%); transition:background 1s; }
#cracks { position:absolute; inset:0; width:100%; height:100%; opacity:.9; }
#cloud { position:absolute; inset:-10%; opacity:0; background:
  radial-gradient(circle at 30% 60%, rgba(235,235,240,.95), rgba(235,235,240,0) 30%),
  radial-gradient(circle at 60% 50%, rgba(245,245,250,.95), rgba(245,245,250,0) 35%),
  radial-gradient(circle at 50% 75%, rgba(225,230,235,.9), rgba(225,230,235,0) 32%),
  radial-gradient(circle at 75% 70%, rgba(240,240,245,.85), rgba(240,240,245,0) 28%);
  transition:opacity .6s; filter:blur(6px); }
#cloud.on { opacity:1; transition:opacity .08s; }
#flash { position:absolute; inset:0; background:rgba(255,0,0,.45); opacity:0; transition:opacity .35s; }
#flash.on { opacity:1; transition:none; }
#slowmoVignette { position:absolute; inset:0; opacity:0; transition:opacity .3s; background:radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(80,0,120,.55) 100%); }
#slowmoVignette.on { opacity:1; }
#topbar { position:absolute; top:max(10px, env(safe-area-inset-top)); left:50%; transform:translateX(-50%); display:flex; gap:18px; align-items:center; }
#stars { font-size:40px; letter-spacing:2px; color:var(--ember); text-shadow:2px 2px 0 #000; }
#stars .empty { color:#4a3a2a; }
#stars.low { animation:pulse .6s infinite; }
#tips { font-family:'Rubik Dirt', sans-serif; font-size:25.6px; color:var(--goblin); text-shadow:2px 2px 0 #000; }
@keyframes pulse { 50% { transform:scale(1.08); color:#ff3b1c; } }
#banners { position:absolute; top:72px; left:50%; transform:translateX(-50%); width:min(92vw, 520px); display:flex; flex-direction:column; gap:6px; align-items:center; }
.banner { background:rgba(10,10,10,.85); border-left:5px solid var(--goblin); padding:6px 12px; font-size:22px; animation:slideIn .25s ease-out; max-width:100%; }
.banner.bad { border-color:#ff3b1c; } .banner.warn { border-color:var(--ember); } .banner.good { border-color:#5fd38a; }
@keyframes slideIn { from { transform:translateY(-12px); opacity:0; } }
#prompt { position:absolute; top:19%; left:50%; transform:translateX(-50%); font-family:'Rubik Dirt', sans-serif; font-size:20.8px; background:rgba(0,0,0,.7); padding:10px 14px; border:2px solid var(--goblin); white-space:nowrap; }
#prompt:empty { display:none; }
#bigText { position:absolute; top:34%; width:100%; text-align:center; font-family:'Rubik Dirt', sans-serif; font-size:clamp(32px, 8vw, 73.6px); color:#ffffff; text-shadow:4px 4px 0 #000; }
#phone { position:absolute; right:max(12px, env(safe-area-inset-right)); top:max(12px, env(safe-area-inset-top)); width:184px; background:#0d0d0f; border:3px solid #2a2a2e; border-radius:14px; padding:8px; box-shadow:0 6px 20px rgba(0,0,0,.6); }
.phone-top { display:flex; justify-content:space-between; font-size:16px; color:#aaa; margin-bottom:4px; }
.gg { color:#ffffff; } .gg b, .gg-big b { color:var(--goblin); }
#minimap { width:164px; height:164px; image-rendering:auto; background:#0c0f0c; border-radius:8px; display:block; border:1px solid #2c3a2c; }
#order { font-size:18px; line-height:1.05; margin-top:5px; color:#ffffff; }
#orderTimer { font-family:'Rubik Dirt', sans-serif; font-size:22.4px; margin-top:4px; color:var(--goblin); }
#orderTimer.late { color:#ff3b1c; animation:pulse .5s infinite; }
#feed { margin-top:6px; display:flex; flex-direction:column; gap:3px; max-height:110px; overflow:hidden; }
.msg { background:#1e2a1e; border-radius:6px; padding:0 6px; border:3px solid #1e2a1e; border-left-width:0; border-right-width:0; font-size:16px; line-height:1.15; color:#d8ffd0; animation:slideIn .2s; }
.msg.bad { background:#3a1414; border-color:#3a1414; color:#ffffff; }
#bottom { position:absolute; bottom:max(10px, env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:flex; align-items:flex-end; gap:16px; }
#face { width:96px; height:96px; image-rendering:auto; border:3px solid #3a2a1a; background:#2a1a10; }
.meters { display:flex; flex-direction:column; gap:6px; width:150px; }
.meter label { font-family:'Rubik Dirt', sans-serif; font-size:20.8px; display:block; margin-bottom:4px; color:#ffffff; text-shadow:2px 2px 0 #000; }
.bar { height:16px; background:#2a1a10; border:2px solid #000; } .bar i { display:block; height:100%; width:50%; background:var(--goblin); transition:width .15s; }
#mVape { background:#3aa0ff; } #mCart { background:#7bd44a; } #mVan { background:#2f8f45; } #mFood { background:#2f8f45; }
#hand { position:absolute; bottom:0; left:auto; right:max(40px, 6vw); width:256px; height:256px; margin-left:0; image-rendering:auto; transition:transform .12s; }
#hand.use { transform:translate(10px,-40px) rotate(-12deg) scale(1.1); }
#speedo { position:absolute; left:max(14px, env(safe-area-inset-left)); bottom:max(14px, env(safe-area-inset-bottom)); font-family:'Rubik Dirt', sans-serif; font-size:41.6px; text-shadow:3px 3px 0 #000; }
#speedo small { font-size:16px; }

/* touch */
#touchUI { position:fixed; inset:0; }
#touchZone { position:absolute; inset:0; }
#joyBase { display:none; position:absolute; width:120px; height:120px; border-radius:50%; border:3px solid rgba(255,255,255,.35); background:rgba(0,0,0,.25); pointer-events:none; }
#joyKnob { position:absolute; left:35px; top:35px; width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.55); }
.tbtn { position:absolute; width:78px; height:78px; border-radius:50%; font-size:10px; background:rgba(20,10,8,.7); border:3px solid rgba(255,255,255,.35); padding:0; }
.tbtn.down { background:var(--fire); }
#btnPause { left:calc(10px + env(safe-area-inset-left)); top:calc(10px + env(safe-area-inset-top)); width:44px; height:44px; font-size:12px; }
body.touch #phone { width:138px; left:calc(64px + env(safe-area-inset-left)); right:auto; top:calc(8px + env(safe-area-inset-top)); padding:6px; border-radius:10px; }
body.touch #minimap { width:122px; height:122px; }
body.touch #order { font-size:15px; } body.touch #orderTimer { font-size:17.6px; }
body.touch #feed { max-height:none; } body.touch .msg { font-size:14px; }
body.touch .phone-top { font-size:13px; }
body.touch #bottom { transform:translateX(-50%) scale(.8); transform-origin:bottom center; }
body.touch #hand { bottom:0; width:240px; height:240px; margin-left:-100px; }
body.touch #speedo { bottom:auto; left:auto; right:calc(16px + env(safe-area-inset-right)); top:calc(12px + env(safe-area-inset-top)); font-size:28.8px; }

/* screens */
.screen { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at top, #3a0d06, #0b0302 70%); z-index:10; overflow-y:auto; }
/* never show the browser's own play button on any of our videos */
video::-webkit-media-controls, video::-webkit-media-controls-panel, video::-webkit-media-controls-start-playback-button, video::-webkit-media-controls-overlay-play-button { display:none !important; -webkit-appearance:none; opacity:0 !important; }
.title-inner, .panel-inner { text-align:center; padding:24px; max-width:720px; width:100%; display:flex; flex-direction:column; gap:12px; align-items:center; }
.studio { width:140px; opacity:.9; }
.logo { margin:0; font-family:'Rubik Dirt', sans-serif; line-height:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.logo span { font-size:clamp(46px, 12vw, 92px); color:var(--goblin); text-shadow:5px 5px 0 #000, 255, 58, .35); }
.logo .from { font-size:clamp(20px, 4.4vw, 30px); color:var(--ink); }
.logo .hell { color:var(--fire); text-shadow:5px 5px 0 #000, 143, 69, .7); animation:flicker 3s infinite; }
@keyframes flicker { 0%,100% { opacity:1 } 46% { opacity:1 } 47% { opacity:.6 } 48% { opacity:1 } 70% { opacity:.85 } 71% { opacity:1 } }
.tag { margin:0; font-size:24px; color:var(--ember); }
.menu { display:flex; flex-direction:column; gap:8px; width:min(320px, 90vw); }
.bank { font-family:'Rubik Dirt', sans-serif; font-size:19.2px; color:var(--goblin); }
.small-note { font-size:16px; color:#a88f80; margin:0; }
h2 { font-family:'Rubik Dirt', sans-serif; color:var(--ember); margin:0; font-size:32px; }
.gg-big { font-family:'Rubik Dirt', sans-serif; font-size:35.2px; }
.deact { color:#ff3b1c; font-size:clamp(22px, 6vw, 40px); text-shadow:4px 4px 0 #000; }
#overStats { font-size:24px; line-height:1.3; }
#nameRow { display:flex; gap:8px; }
#nameInput { font-family:'Rubik Dirt', sans-serif; font-size:19.2px; padding:12px; background:#000; color:var(--goblin); border:2px solid var(--edge); width:180px; text-transform:uppercase; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px; width:100%; text-align:left; }
.card { background:#1e0e0a; border:2px solid var(--edge); padding:10px; }
.card.equipped { border-color:var(--goblin); }
.card h3 { font-family:'Rubik Dirt', sans-serif; font-size:17.6px; margin:0 0 6px; color:#ffffff; }
.card p { margin:0 0 8px; font-size:18px; color:#c8b0a0; line-height:1.05; }
.card .stats { font-size:16px; color:#a88f80; }
.card button { width:100%; font-size:16px; padding:9px; }
.section-title { font-family:'Rubik Dirt', sans-serif; font-size:19.2px; color:var(--ember); text-align:left; width:100%; margin-top:8px; }
table.lb { width:100%; border-collapse:collapse; font-size:22px; } table.lb td { padding:4px 8px; border-bottom:1px solid #2a1a10; } table.lb td:last-child { text-align:right; color:var(--goblin); }
.tabs { display:flex; gap:6px; } .tabs button.on { border-color:var(--goblin); color:var(--goblin); }
.setting { display:flex; justify-content:space-between; align-items:center; width:100%; gap:10px; font-size:22px; }
.setting input[type=range] { width:50%; }
.how { text-align:left; font-size:21px; line-height:1.15; }
.how b { color:var(--goblin); }
#rotate { position:fixed; inset:0; z-index:50; background:#000; display:flex; align-items:center; justify-content:center; font-family:'Rubik Dirt', sans-serif; font-size:22.4px; text-align:center; padding:20px; }
@media (max-height:500px) { body:not(.touch) #phone { transform:scale(.8); transform-origin:top right; } #bottom { transform:translateX(-50%) scale(.7) !important; } }

#hud.driving #hand { left:auto; right:0; margin-left:0; bottom:0; width:200px; height:200px; }

/* ---- touch: the held vape/cart is the button, prompts are tappable ---- */
#handZone { position:absolute; right:max(6px, env(safe-area-inset-right)); bottom:max(6px, env(safe-area-inset-bottom)); width:220px; height:180px; }
#itemTip { transition:opacity .8s; position:absolute; right:max(14px, env(safe-area-inset-right)); bottom:calc(178px + env(safe-area-inset-bottom)); font-family:'Rubik Dirt', sans-serif; font-size:12.8px; color:rgba(255,255,255,.75); text-shadow:1px 1px 0 #000; pointer-events:none; }
body.touch #hand, body.touch #hud.driving #hand { left:auto; right:max(4px, env(safe-area-inset-right)); margin-left:0; bottom:0; width:240px; height:240px; }
body.touch #prompt { pointer-events:auto; z-index:5; font-size:17.6px; padding:12px 14px; }
body.touch #prompt.down { background:var(--goblin); color:#000; }
body.touch #touchUI { z-index:3; }
body.touch #hud { z-index:4; }
body.touch #hud > * { pointer-events:none; }
body.touch #hud #prompt { pointer-events:auto; }
#joyBase { z-index:6; }

/* ---- vertical phone ---- */
body.touch.portrait #topbar { top:calc(8px + env(safe-area-inset-top)); left:50%; gap:8px; }
body.touch.portrait #stars { font-size:26px; }
body.touch.portrait #tips { font-size:19.2px; }
body.touch.portrait .phone-top { font-size:14px; }
body.touch.portrait #speedo { text-shadow:2px 2px 0 #000; }
body.touch.portrait #phone { left:auto; right:calc(6px + env(safe-area-inset-right)); top:calc(46px + env(safe-area-inset-top)); width:112px; padding:5px; }
body.touch.portrait #minimap { width:100px; height:100px; }
body.touch.portrait #order { font-size:13px; } body.touch.portrait #orderTimer { font-size:16px; }
body.touch.portrait #feed { max-height:none; } body.touch.portrait .msg { font-size:15px; }
body.touch.portrait #bottom { top:calc(62px + env(safe-area-inset-top)); bottom:auto; left:calc(6px + env(safe-area-inset-left)); transform:scale(.8); transform-origin:top left; flex-direction:column; align-items:flex-start; gap:8px; }
body.touch.portrait #bottom .meters { width:120px; }
body.touch.portrait #speedo { top:calc(44px + env(safe-area-inset-top)); right:auto; left:50%; transform:translateX(-50%); font-size:22.4px; }
body.touch.portrait #banners { top:calc(76px + env(safe-area-inset-top)); width:56vw; }
body.touch.portrait .banner { font-size:17px; }
body.touch.portrait #prompt { top:34%; white-space:normal; max-width:80vw; text-align:center; }
body.touch.portrait #bigText { top:28%; }
body.touch.portrait #btnPause { top:calc(8px + env(safe-area-inset-top)); }
body.touch.portrait #hand, body.touch.portrait #hud.driving #hand { width:236px; height:236px; right:0; bottom:0; }
body.touch.portrait #handZone { width:200px; height:190px; }
body.touch.portrait #itemTip { bottom:calc(240px + env(safe-area-inset-bottom)); }

/* door handle (top-left, under the roof line): tap to pull over and get out anywhere */
#doorZone { display:none; position:absolute; left:max(6px, env(safe-area-inset-left)); top:31%; width:84px; height:64px; z-index:5; }
body.touch.incar #doorZone { display:block; }
#doorZone .cup { position:absolute; left:4px; top:6px; width:70px; height:30px; border-radius:15px; background:linear-gradient(180deg,#050506 0%,#1c1c21 55%,#2c2c33 100%); box-shadow:inset 0 3px 6px rgba(0,0,0,.9), inset 0 -1px 0 rgba(255,255,255,.12), 0 1px 0 rgba(255,255,255,.18), 0 3px 6px rgba(0,0,0,.6); }
#doorZone .handle { position:absolute; left:7px; top:8px; width:56px; height:14px; border-radius:7px; background:linear-gradient(180deg,#ffffff 0%,#dfe4ea 18%,#a7afb9 45%,#6f7782 70%,#c3c9d1 100%); border:1px solid #2b2f35; box-shadow:0 2px 3px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.9); transition:transform .08s; }
#doorZone .handle::after { content:''; position:absolute; left:8px; right:8px; top:3px; height:2px; border-radius:1px; background:rgba(255,255,255,.75); }
#doorZone.down .handle { transform:translateX(6px) scaleY(.9); background:linear-gradient(180deg,#f4fff0 0%,#b8f59a 40%,#5fae3a 75%,#9ee07a 100%); }
#doorZone img.art { position:absolute; left:2px; top:0; width:76px; height:auto; filter:drop-shadow(0 2px 3px rgba(0,0,0,.7)); transition:transform .08s; }
#doorZone img.art ~ .cup { display:none; }
#doorZone.down img.art { transform:translateX(5px) scale(.96); filter:drop-shadow(0 0 6px #7cff3a); }
#doorZone span { position:absolute; left:0; width:78px; top:48px; text-align:center; font-family:'Rubik Dirt', sans-serif; font-size:12.8px; color:#ffffff; text-shadow:1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; letter-spacing:1px; }

#order .tag { display:block; font-style:normal; font-family:'Rubik Dirt', sans-serif; font-size:14.4px; margin-bottom:3px; }
#order .tag.pick { color:#2f8f45; } #order .tag.drop { color:var(--goblin); }
#order .nm { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:1.1em; line-height:1.12; max-height:2.24em; color:#ffffff; overflow:hidden; } #order .nm.dim { color:#888; font-size:1em; white-space:normal; }
/* phone mounted on the dash while driving: a real phone shape (tall, bezel, notch) in a cradle; left/top set from JS (bottom-center = cradle) */
#phone.mounted { right:auto !important; transform:translate(-50%,-100%) !important; width:150px !important; padding:16px 7px 12px !important; border:4px solid #26262a !important; border-radius:22px !important; background:#08080a; box-shadow:inset 0 0 0 1px #3a3a40, 0 4px 0 #050505, 0 8px 18px rgba(0,0,0,.55) !important; }
#phone.mounted::before { content:''; position:absolute; top:5px; left:50%; width:34%; height:7px; margin-left:-17%; background:#000; border-radius:0 0 6px 6px; box-shadow:0 0 0 1px #1a1a1e; }
#phone.mounted::after { content:''; position:absolute; bottom:4px; left:50%; width:30%; height:3px; margin-left:-15%; background:#4a4a52; border-radius:2px; }
#phone.mounted .phone-top { font-size:14px !important; margin-bottom:4px; }
#phone.mounted #minimap { width:100% !important; height:auto !important; aspect-ratio:1; }
#phone.mounted #order { margin-top:6px; font-size:17px !important; }
#phone.mounted #orderTimer { font-size:19.2px !important; margin-top:3px; }
#phone.mounted #feed { max-height:none !important; margin-top:5px; } #phone.mounted .msg { padding:0 6px; border:3px solid #1e2a1e; border-left-width:0; border-right-width:0; font-size:15px !important; line-height:1.2; max-height:calc(2.4em + 6px); box-sizing:border-box; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } #phone.mounted .msg:nth-child(n+2) { display:none; } #phone.mounted .msg.bad { border-color:#3a1414; }
body.touch #phone.mounted { width:124px !important; }
body.touch.portrait #phone.mounted { width:112px !important; padding:13px 5px 10px !important; border-radius:18px !important; border-width:3px !important; }
body.touch.portrait #phone.mounted .phone-top { font-size:13px !important; }
body.touch.portrait #phone.mounted #order { font-size:16px !important; } body.touch.portrait #phone.mounted #order .tag { font-size:11.2px; }
body.touch.portrait #phone.mounted #orderTimer { font-size:16px !important; }
 body.touch.portrait #phone.mounted .msg { font-size:13.5px !important; }
@media (max-height:560px) { body:not(.touch) #phone.mounted { width:118px !important; } }

#itemTip.gone { opacity:0; }
/* desktop: while driving, all the info sits up top (on the roof line), out of the way of the gauges and wheel */
body:not(.touch) #hud.driving #bottom { top:max(10px, env(safe-area-inset-top)); bottom:auto; left:max(12px, env(safe-area-inset-left)); transform:scale(.72) !important; transform-origin:top left; flex-direction:column; align-items:flex-start; gap:8px; }
body:not(.touch) #hud.driving #speedo { bottom:auto; left:50%; transform:translateX(-50%); top:52px; font-size:28.8px; }

#prompt, #banners { display:none !important; }
#feed .msg { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } #phone:not(.mounted) #feed .msg:nth-child(n+2) { display:none; }

/* pause button: a drawn pause icon (two bars), not text */
#btnPause { display:flex; align-items:center; justify-content:center; gap:5px; padding:0; }
#btnPause i { display:block; width:6px; height:18px; background:#ffffff; border-radius:1px; box-shadow:1px 1px 0 #000; }

/* ---------- main menu (over the live 3D hell scene) ---------- */
#title { background:transparent; display:block; overflow:hidden; }
#title .menu-shade { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,2,0,.88) 0%, rgba(10,2,0,.25) 24%, rgba(10,2,0,0) 40%, rgba(10,2,0,0) 58%, rgba(10,2,0,.7) 80%, rgba(8,1,0,.95) 100%),
             radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 55%, rgba(30,0,0,.55) 100%); }
.menu-bottom { position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom) + 14px); display:flex; flex-direction:column; align-items:center; gap:12px; padding:0 18px; }
.menu-main { display:flex; flex-direction:column; gap:10px; width:min(380px, 88vw); }
.mbtn { font-family:'Rubik Dirt', sans-serif; font-size:clamp(20px, 5.6vw, 28px); letter-spacing:1px; padding:14px 18px; color:#ffffff; background:linear-gradient(180deg, rgba(40,10,6,.85), rgba(16,4,2,.92));
  border:2px solid rgba(47,143,69,.45); border-radius:4px; text-shadow:0 2px 0 #000; box-shadow:0 6px 18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); position:relative; overflow:hidden; }
.mbtn.primary { background:linear-gradient(180deg, #2f8f45 0%, #2f8f45 45%, #c41e08 100%); border-color:#5fbf5a; color:#1a0502; text-shadow:0 1px 0 rgba(255, 255, 255, .6); font-size:clamp(24px, 7vw, 34px); padding:16px 18px;
  box-shadow:0 0 28px rgba(47,143,69,.55), 0 8px 22px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.6); animation:heat 2.4s ease-in-out infinite; }
.mbtn.primary::after { content:''; position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-20deg); animation:sheen 3.4s ease-in-out infinite; }
@keyframes sheen { 0%, 60% { left:-60%; } 100% { left:130%; } }
@keyframes heat { 50% { box-shadow:0 0 42px rgba(47,143,69,.8), 0 8px 22px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.6); } }
.mbtn:hover, .mbtn:focus-visible { border-color:#5fbf5a; filter:brightness(1.12); }
.mbtn:active { transform:translateY(2px); }
.menu-icons { display:flex; gap:10px; justify-content:center; width:min(380px, 88vw); }
.ibtn { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 4px 7px; background:rgba(14,4,2,.82); border:1px solid rgba(47,143,69,.35); border-radius:4px; font-family:'Rubik Dirt', sans-serif; font-weight:700; font-size:12px; letter-spacing:1.5px; color:#ffffff; }
.ibtn svg { width:26px; height:26px; fill:#2f8f45; filter:drop-shadow(0 0 6px rgba(47,143,69,.6)); }
.ibtn:hover svg { fill:#5fbf5a; }
#title .bank { font-family:'Rubik Dirt', sans-serif; font-weight:700; font-size:16px; letter-spacing:2px; color:#5fbf5a; text-shadow:0 2px 4px #000; }
#title .legal { font-size:12px; color:rgba(255,255,255,.4); font-family:'Rubik Dirt', sans-serif; letter-spacing:1px; }
#title.booting .menu-main, #title.booting .menu-icons, #title.booting .bank { visibility:hidden; }
#title #loadMsg { font-family:'Rubik Dirt', sans-serif; font-size:14px; letter-spacing:2px; color:#5fbf5a; min-height:1em; }
body.freeroam #stars, body.freeroam #orderTimer { display:none; }

/* ---------- panels over the burning menu ---------- */
#panel, #pause, #over { background:radial-gradient(ellipse at 50% 30%, rgba(60,10,4,.78), rgba(8,1,0,.94) 75%); }
#panel h2, #pause h2 { font-family:'Rubik Dirt', sans-serif; color:#2f8f45; text-shadow:3px 3px 0 #000; letter-spacing:1px; }
#panelBack { font-family:'Rubik Dirt', sans-serif; }
/* garage shop */
#panel.shopping .panel-inner { max-width:560px; padding:calc(env(safe-area-inset-top) + 12px) 14px calc(env(safe-area-inset-bottom) + 12px); gap:10px; }
#panel.shopping #panelBack { background:rgba(20,6,3,.9); color:#ffffff; border:1px solid rgba(47,143,69,.4); font-size:18px; padding:10px; width:min(380px, 88vw); }
.shop { width:100%; display:flex; flex-direction:column; gap:10px; align-items:center; }
.shop-head { width:100%; display:flex; justify-content:space-between; align-items:center; }
.shop-head h2 { font-size:30px; margin:0; }
.shop-head .cash { font-family:'Rubik Dirt', sans-serif; font-size:22px; color:#7cff3a; text-shadow:255, 58, .45), 2px 2px 0 #000; }
.shop-tabs { display:flex; width:100%; gap:6px; }
.shop-tabs button { flex:1; font-family:'Rubik Dirt', sans-serif; font-weight:700; letter-spacing:2px; font-size:16px; padding:9px 4px; background:rgba(20,6,3,.85); border:1px solid rgba(47,143,69,.3); border-radius:3px; color:#c8a898; }
.shop-tabs button.on { background:none; color:#1a0502; border-color:#5fbf5a; }
.shop-hero { position:relative; width:100%; aspect-ratio:16/10; border-radius:6px; overflow:hidden; border:1px solid rgba(47,143,69,.45);
  background:radial-gradient(ellipse at 50% 100%, rgba(47,143,69,.85), rgba(150,20,5,.5) 40%, rgba(20,3,1,.95) 75%), #0a0201; box-shadow:inset 0 0 40px rgba(0,0,0,.8), 0 10px 30px rgba(0,0,0,.6); }
.shop-hero .flames { position:absolute; left:-10%; right:-10%; bottom:-6%; height:62%; background:url(img/art/fire.webp) repeat-x 0 100% / 25% auto; opacity:.55; filter:blur(.5px) saturate(1.2); animation:flamescroll 1.2s steps(4) infinite; mix-blend-mode:screen; }
@keyframes flamescroll { to { background-position:-400% 100%; } }
.shop-hero img { position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); max-width:92%; max-height:88%; filter:drop-shadow(0 16px 14px rgba(0,0,0,.75)); }
.shop-hero.vape img, .shop-hero.cart img { max-height:82%; transform:translate(-50%,-50%) rotate(-12deg); }
.shop-hero .tagline { position:absolute; top:10px; right:10px; font-family:'Rubik Dirt', sans-serif; font-size:15px; padding:4px 10px; border-radius:3px; background:rgba(0,0,0,.7); }
.tagline.eq { color:#7cff3a; border:1px solid #7cff3a; } .tagline.price { color:#5fbf5a; border:1px solid #5fbf5a; } .tagline.own { color:#ffffff; border:1px solid #888; }
.shop-info { width:100%; text-align:left; }
.shop-info h3 { margin:0; font-family:'Rubik Dirt', sans-serif; font-size:24px; color:#ffffff; text-shadow:2px 2px 0 #000, 143, 69, .5); }
.shop-info p { margin:2px 0 8px; font-family:'Rubik Dirt', sans-serif; font-size:16px; letter-spacing:1px; color:#d8b8a8; text-transform:uppercase; }
.stat { display:flex; align-items:center; gap:10px; margin:4px 0; font-family:'Rubik Dirt', sans-serif; font-weight:700; font-size:13px; letter-spacing:2px; color:#ffffff; }
.stat span { width:120px; flex:none; }
.stat b { flex:1; height:10px; background:rgba(255,255,255,.08); border:1px solid rgba(47,143,69,.3); border-radius:2px; overflow:hidden; }
.stat b i { display:block; height:100%; background:linear-gradient(90deg, #1c5c2b, #2f8f45, #7cff3a); }
.shop-strip { width:100%; display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.thumb { flex:1 0 108px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px; background:rgba(20,6,3,.9); border:1px solid rgba(47,143,69,.25); border-radius:4px; text-transform:none; }
.thumb img { width:100%; height:58px; object-fit:contain; }
.thumb span { font-family:'Rubik Dirt', sans-serif; font-weight:700; font-size:12px; letter-spacing:.5px; color:#ffffff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.thumb small { font-family:'Rubik Dirt', sans-serif; font-size:11px; letter-spacing:1px; color:#5fbf5a; }
.thumb.eq small { color:#7cff3a; }
.thumb.sel { border-color:#5fbf5a; box-shadow:0 0 14px rgba(47,143,69,.55); background:rgba(70,16,6,.9); }
#shopAct { width:100%; }
#shopAct[disabled] { filter:grayscale(.6) brightness(.8); animation:none; }
#panel.shopping .panel-inner, .shop, .shop-strip, .shop-info { min-width:0; max-width:100%; }
.thumb { flex:0 0 96px; }
#title.booting { background:#0a0201 url(img/og-image.jpg) center 30% / cover no-repeat; }
#title.booting #loadMsg { font-size:16px; text-shadow:0 2px 6px #000; }

/* pixel-fire video loops (opaque, no blending) */
.fx { pointer-events:none; object-fit:cover; display:block; image-rendering:pixelated; image-rendering:crisp-edges; }
.fx { image-rendering:pixelated; }
.fx-menu { position:absolute; inset:0; width:100%; height:100%; z-index:0; object-position:50% 100%; }
#title { background:#070202; }
#title > :not(.fx) { position:relative; z-index:1; }
#title .menu-shade { position:absolute; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,0) 58%, rgba(0,0,0,.7) 100%); }
.fx-panel { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
#panel .panel-inner, #pause .panel-inner, #over .panel-inner { position:relative; z-index:1; }
.shop-hero { background:#070202; }
.fx-hero { position:absolute; inset:0; width:100%; height:100%; z-index:0; object-position:50% 40%; }
.shop-hero img, .shop-hero .tagline { z-index:1; }
.shop-hero::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse 46% 44% at 50% 55%, rgba(0,0,0,.6), rgba(0,0,0,0) 100%); }
/* CLOCK IN: the menu fire surges up and burns the menu away */
#title .fx-menu { transition:transform .7s cubic-bezier(.5,0,.8,.4); transform-origin:50% 100%; }
#title.launch .fx-menu { transform:scale(1.7); }
#title .menu-shade { transition:opacity .4s; } #title.launch .menu-shade { opacity:0; }
#title > .menu-bottom, #title > .menu-top { transition:opacity .35s, transform .5s; }
#title.launch > .menu-bottom, #title.launch > .menu-top { opacity:0; transform:scale(1.15); }
#title.launch { pointer-events:none; }
#title.launch.hidden { display:block !important; animation:burnaway .75s ease-in forwards; }
@keyframes burnaway { 0% { opacity:1; } 100% { opacity:0; visibility:hidden; } }
#panel.shopping #panelBody { width:100%; min-width:0; max-width:100%; }
@media (min-aspect-ratio: 1/1) { #title .fx-menu { object-position:50% 50%; } }
.setting > span { white-space:nowrap; text-align:left; }
.setting input[type=range] { flex:0 0 46%; width:46%; min-width:0; }

/* full screen like Toon Royale: the page box is the fixed inset-0 box; on an iOS home-screen app the document is made
   screen-tall (html.tall, see index.html) and every layer hangs off it instead of the short viewport */
body { position:fixed; top:0; right:0; bottom:0; left:0; width:auto; height:auto; }
html.tall { height:auto; position:relative; }
html.tall body { position:absolute; bottom:auto; height:100%; }
html.tall body > #game, html.tall body > #hud, html.tall body > #touchUI, html.tall body > .screen, html.tall body > #rotate, html.tall body > .fx { position:absolute; }

/* ================= main menu: a Doom-style app in hell with a bit of terminal (no boxes, no glow) ================= */
:root { --bone:#ffffff; --blood:#e3170a; --amber:#2f8f45; --ember:#2f8f45; }
#title > .menu-top { position:absolute; left:0; right:0; top:calc(env(safe-area-inset-top) + 2px); display:flex; flex-direction:column; align-items:center; z-index:2; pointer-events:none; }
#driverCv { width:min(100vw, 560px); height:min(31vh, 82vw); display:block; pointer-events:auto; touch-action:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.menu-title { margin:-1.2vh 0 0; padding:0; font-family:'Rubik Dirt', sans-serif; font-weight:400; color:var(--blood); text-align:center; line-height:.86; text-shadow:0 4px 0 #000; letter-spacing:.01em; }
.menu-title span { display:block; font-size:min(11vw, 5.6vh, 62px); }
.menu-title b { display:block; font-weight:400; font-size:min(28vw, 14vh, 160px); }
.menu-hint { margin-top:6px; font-family:'Rubik Dirt', sans-serif; font-size:15px; letter-spacing:2px; color:var(--bone); opacity:.75; text-shadow:0 2px 0 #000; }
#title > .menu-bottom { position:absolute; z-index:2; gap:min(12px, 1.4vh); }
.menu-main { gap:0 !important; align-items:stretch; width:100% !important; }
.tbtn { display:block; width:100%; text-align:center; position:relative; white-space:nowrap; background:none; border:0; padding:min(4px, .6vh) 8px; margin:0; font-family:'Rubik Dirt', sans-serif; font-weight:400; color:var(--bone);
  font-size:min(9.5vw, 5vh, 50px); line-height:1.05; letter-spacing:.02em; text-shadow:0 3px 0 #000; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .08s, color .08s; }
.tbtn.primary { color:var(--amber); font-size:min(12.6vw, 7vh, 76px); }
/* terminal selection marker: a > slides in on the button you're on */
.tbtn::before, .tbtn::after { content:'>'; display:inline-block; width:.55em; text-align:left; color:var(--ember); opacity:0; transition:opacity .1s, transform .1s; transform:translateX(-.25em); }
.tbtn::after { visibility:hidden; }
@media (hover:hover) { .tbtn:hover::before { opacity:1; transform:none; } }
.tbtn:focus-visible::before, .tbtn:active::before { opacity:1; transform:none; }
.tbtn:active { transform:translateY(2px); color:#ffffff; }
.tbtn:focus { outline:none; }
.menu-icons { gap:min(18px, 2.6vw) !important; width:auto !important; max-width:100%; }
.ibtn { white-space:nowrap; flex:0 0 auto !important; background:none !important; border:0 !important; padding:4px 2px !important; box-shadow:none !important; font-family:'Rubik Dirt', sans-serif !important; font-size:min(4.1vw, 18px) !important;
  color:var(--bone) !important; letter-spacing:1px; text-shadow:0 2px 0 #000; gap:2px !important; -webkit-tap-highlight-color:transparent; }
.ibtn svg { width:min(9vw, 34px) !important; height:min(9vw, 34px) !important; fill:var(--ember) !important; filter:drop-shadow(0 2px 0 #000) !important; }
.ibtn:active { transform:translateY(2px); } .ibtn:active svg { fill:var(--amber) !important; }
/* terminal lines */
.term { white-space:nowrap; font-family:'Rubik Dirt', sans-serif; font-size:min(4.2vw, 17px); letter-spacing:1px; color:var(--bone); text-shadow:0 2px 0 #000; min-height:1.15em; }
.term::before { content:'> '; color:var(--ember); }
#title .bank { font-family:inherit !important; font-size:inherit !important; color:var(--amber) !important; text-shadow:inherit !important; letter-spacing:inherit; font-weight:400 !important; }
.term-feed { opacity:.85; }
.caret { display:inline-block; width:.55em; height:.95em; margin-left:3px; vertical-align:-.1em; background:var(--bone); animation:caret 1s steps(1) infinite; box-shadow:0 2px 0 #000; }
@keyframes caret { 50% { opacity:0; } }
#title .legal { font-size:12px !important; opacity:.7; text-shadow:0 1px 0 #000; }
#title #loadMsg { font-size:15px !important; color:var(--amber) !important; text-shadow:0 2px 0 #000; }
#title.booting .menu-top { visibility:hidden; }
#title.booting .term { visibility:hidden; }
/* the cart hit: everything slows and goes hazy for a moment; a vape hit: the fire kicks */
#title .fx-menu { transition:transform .7s cubic-bezier(.5,0,.8,.4), filter .4s; }
#title.cartmode .fx-menu { filter:saturate(1.6) contrast(1.12) hue-rotate(-8deg) brightness(.72); }
#title.kick .fx-menu { transform:scale(1.06); transition:transform .12s ease-out; }
@media (min-aspect-ratio: 1/1) {
  #title > .menu-top { right:50%; top:0; bottom:0; justify-content:center; }
  #driverCv { width:46vw; height:46vh; }
  .menu-title span { font-size:min(5vw, 8vh); } .menu-title b { font-size:min(12vw, 20vh); }
  #title > .menu-bottom { left:50%; right:0; bottom:auto; top:50%; transform:translateY(-50%); padding:0 12px; }
  .menu-icons { gap:min(14px, 2vw) !important; } .ibtn { font-size:min(2.2vw, 16px) !important; } .term { font-size:min(2.1vw, 15px); }
  .menu-main { flex-direction:column !important; }
  .tbtn { font-size:min(4.6vw, 9vh); } .tbtn.primary { font-size:min(7vw, 13vh); }
  #title.launch > .menu-top { transform:scale(1.15); } #title.launch > .menu-bottom { transform:translateY(-50%) scale(1.15); }
}

/* ================= every screen: big text buttons, no boxes, no glow (hard shadows only) ================= */
.screen button:not(.ibtn) { background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; filter:none; animation:none;
  font-family:'Rubik Dirt', sans-serif !important; font-weight:400 !important; color:var(--bone) !important; text-shadow:0 3px 0 #000 !important;
  letter-spacing:.03em; -webkit-tap-highlight-color:transparent; transition:transform .08s, color .08s; }
.screen button:not(.ibtn):active { transform:translateY(2px); color:#ffffff !important; }
.screen button:not(.ibtn)::after { display:none; }
.screen button.big, #panelBack, #shopAct, #btnResume, #btnAgain, #btnSubmit { font-size:min(9vw, 40px) !important; padding:6px 12px !important; }
#shopAct:not([disabled]), #btnResume, #btnAgain { color:var(--amber) !important; font-size:min(11vw, 50px) !important; }
#shopAct[disabled] { opacity:.55; filter:none !important; }
#panel.shopping #panelBack { width:auto !important; }
/* terminal selection: the chosen tab gets a > */
.shop-tabs { gap:4px !important; }
.shop-tabs button { font-size:min(6.2vw, 26px) !important; padding:4px 2px !important; opacity:.7; }
.shop-tabs button.on { color:var(--amber) !important; opacity:1; }
.shop-tabs button.on::before { content:'> '; color:var(--ember); }
/* settings toggles read like [ OFF ] */
.setting button { font-size:min(6vw, 26px) !important; color:var(--amber) !important; padding:2px 4px !important; }
.setting button::before { content:'[ '; color:var(--ember); } .setting button::after { content:' ]' !important; display:inline !important; color:var(--ember); }
.setting > span { font-size:min(5.4vw, 23px); text-shadow:0 2px 0 #000; }
.setting input[type=range] { accent-color:var(--ember); }
/* garage items: the picture and its name, no card around them; the one you're looking at is marked > */
.thumb { background:none !important; border:0 !important; box-shadow:none !important; padding:2px !important; }
.thumb img { height:62px !important; filter:drop-shadow(0 4px 0 rgba(0,0,0,.6)); }
.thumb span { font-size:min(3.6vw, 15px) !important; font-weight:400 !important; text-shadow:0 2px 0 #000; color:var(--bone) !important; }
.thumb small { font-size:min(3.4vw, 14px) !important; text-shadow:0 2px 0 #000; }
.thumb.sel span { color:var(--amber) !important; } .thumb.sel span::before { content:'> '; color:var(--ember); }
.shop-head h2, #panel h2, #pause h2 { text-shadow:0 4px 0 #000 !important; }
.screen .tbtn.primary { color:var(--amber) !important; }

/* the game itself keeps its original pixel terminal font (VT323); Rubik Dirt is only for the menus */
#hud, #hud *, #touchUI, #touchUI *, #rotate, #rotate * { font-family:'VT323', monospace !important; }
/* main menu: every word in the same gritty Rubik Dirt as the title, CLOCK IN and FREE ROAM (regular weight, big
   enough for the dirt to show) */
#title, #title * { font-family:'Rubik Dirt', sans-serif !important; font-weight:400 !important; }
#title .menu-hint { font-size:min(5vw, 21px); letter-spacing:1px; }
#title .ibtn { font-size:min(5.4vw, 23px) !important; letter-spacing:0; }
#title .term { font-size:min(5.2vw, 22px); letter-spacing:0; }
#title #loadMsg { font-size:min(5vw, 21px) !important; }
#title .legal { font-size:min(3.9vw, 16px) !important; opacity:.75; letter-spacing:0; }
@media (min-aspect-ratio: 1/1) { #title .ibtn { font-size:min(2.6vw, 20px) !important; } #title .term { font-size:min(2.4vw, 18px); } #title .menu-hint { font-size:min(2.4vw, 18px); } }
/* DASH OR DIE: white, distressed (the Rubik Dirt texture), a hard black shadow so it stands off the fire */
#title .menu-title { color:#ffffff; text-shadow:0 5px 0 #000; line-height:.84; }
#title .menu-title span { font-size:min(15.5vw, 7.6vh, 86px); }
#title .menu-title b { font-size:min(35vw, 17vh, 190px); }
#title .ibtn { font-size:min(4.7vw, 21px) !important; }
#title .menu-icons { gap:min(14px, 2.4vw) !important; }
#title .legal { white-space:nowrap; font-size:min(3.4vw, 15px) !important; }
@media (min-aspect-ratio: 1/1) { #title .menu-title span { font-size:min(7vw, 11vh); } #title .menu-title b { font-size:min(15vw, 26vh); } }
@media (min-aspect-ratio: 1/1) { #title > .menu-bottom { padding:0 3vw; } #title .menu-icons { gap:min(10px, 1.4vw) !important; } #title .ibtn { font-size:min(2.3vw, 19px) !important; } }

/* DASH / OR / DIE stacked: the two big words the same size, a smaller OR between them */
#title .menu-title { line-height:.8; }
#title .menu-title b { font-size:min(27vw, 11.5vh, 150px); }
#title .menu-title span { font-size:min(12vw, 5.2vh, 66px); margin:.04em 0 .02em; }
@media (min-aspect-ratio: 1/1) { #title .menu-title b { font-size:min(11vw, 19vh); } #title .menu-title span { font-size:min(5vw, 8.5vh); } }
/* portrait: one column that always fits the screen: the driver takes whatever height is left, so nothing overlaps
   on short phones (SE) and nothing floats on tall ones */
@media (max-aspect-ratio: 1/1) {
  #title:not(.hidden) { display:flex !important; flex-direction:column; justify-content:flex-start; align-items:stretch; }
  #title > .menu-top { position:relative !important; top:auto !important; left:auto; right:auto; flex:1 1 auto; min-height:0; padding-top:calc(env(safe-area-inset-top) + 2px); justify-content:flex-end; }
  #driverCv { flex:1 1 auto; min-height:0; height:auto !important; max-height:34vh; }
  #title > .menu-bottom { position:relative !important; bottom:auto !important; left:auto; right:auto; flex:0 0 auto; padding-top:min(18px, 2vh); padding-bottom:calc(env(safe-area-inset-bottom) + min(14px, 1.6vh)); }
}
@media (min-aspect-ratio: 1/1) { #title .menu-icons { gap:min(8px, 1vw) !important; } #title .ibtn { font-size:min(2vw, 18px) !important; } }
/* every word in the game in caps */
body, input, button, textarea { text-transform:uppercase; }
/* DASH / OR / DIE: DIE is the big one */
#title .menu-title b:last-child { font-size:min(44vw, 15.5vh, 230px); line-height:.78; }
@media (min-aspect-ratio: 1/1) { #title .menu-title b:last-child { font-size:min(17vw, 28vh); } }
/* the menu icons worn and chipped like the lettering */
#title .ibtn svg { -webkit-mask-image:url(img/distress.png); mask-image:url(img/distress.png); -webkit-mask-size:58px 58px; mask-size:58px 58px; }

#title *, #panel *, #pause *, #over *, #hud *, #touchUI * { text-transform:uppercase !important; }
.thumb.sel span { color:#7cff3a !important; } .thumb.sel span::before { color:#7cff3a !important; }
#title .legal { font-size:min(2.9vw, 13px) !important; letter-spacing:0 !important; }

/* smoke sits over the driver but behind the title and the buttons */
#title > .menu-top { z-index:auto !important; }
#title #driverCv { position:relative; z-index:2; }
#smokeCv { position:absolute !important; inset:0; width:100%; height:100%; pointer-events:none; z-index:3 !important; }
#title .menu-title { position:relative; z-index:4; }
#title > .menu-bottom { z-index:4 !important; }

/* garage: the item in the box is a 3D view you can drag around */
.shop-hero .garage3d { position:absolute; inset:0; width:100%; height:100%; z-index:1; touch-action:none; cursor:grab; display:block; }
.shop-hero .garage3d:active { cursor:grabbing; }
.shop-hero.has3d > img { display:none; }
.shop-hero .tagline { z-index:2 !important; pointer-events:none; }
.shop-hero .spin-hint { display:none; position:absolute; left:10px; bottom:8px; z-index:2; pointer-events:none; font-size:13px; color:#fff; opacity:.75; text-shadow:0 2px 0 #000; transition:opacity .5s; }
.shop-hero.has3d .spin-hint { display:block; }
.shop-hero .spin-hint.gone { opacity:0; }
/* settings rows: label left (wraps if it must), control right; everything stays on screen */
.setting { box-sizing:border-box; max-width:100%; }
.setting > span { flex:1 1 auto; min-width:0; white-space:normal !important; line-height:1.05; font-size:min(4.8vw, 23px) !important; }
.setting button { flex:none; white-space:nowrap; }
.setting input[type=range] { flex:0 0 40% !important; width:40% !important; margin-left:auto; }
@media (min-aspect-ratio: 1/1) { .setting > span { font-size:min(4.8vw, 5vh, 23px) !important; } .setting input[type=range] { flex-basis:36% !important; width:36% !important; } }
/* DASH / FREE ROAM: the hidden > marker on the right balances the one on the left, so the words sit dead center */
.tbtn::after { display:inline-block !important; content:'>' !important; visibility:hidden !important; width:.55em !important; }

/* long screens (HOW TO, settings on a short phone): start at the top and scroll normally instead of hiding the top half */
.screen { -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.screen > .panel-inner, .screen > .title-inner { margin:auto; padding-top:calc(env(safe-area-inset-top) + 24px); padding-bottom:calc(env(safe-area-inset-bottom) + 24px); flex-shrink:0; }

/* stars: flat, no black shadow star behind them; a half star is a star filled halfway */
#stars { text-shadow:none !important; }
#stars .half { background:linear-gradient(90deg, var(--ember) 50%, #4a3a2a 50%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
/* game over: the name field is just a line to write on, no black box */
#nameInput { background:transparent !important; border:0 !important; border-bottom:3px solid #2f8f45 !important; border-radius:0 !important; color:#ffffff !important; box-shadow:none !important; outline:none; text-align:center; }
#nameInput::placeholder { color:rgba(255,255,255,.55); }
/* bare fist: the punch jabs up and out toward the middle of the screen */
#hand.fist { transition:transform .08s ease-out; }
#hand.fist.use { transform:translate(-34px,-70px) rotate(-6deg) scale(1.12); }