:root { --fire:#ff4a1c; --ember:#ffb020; --goblin:#7cff3a; --ink:#f3e6dc; --dark:#120806; --panel:rgba(18,8,6,.92); --edge:#3a1a12; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; overflow:hidden; background:#000; color:var(--ink); font-family:'VT323',monospace; 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:'VT323',monospace; 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:#fff; outline:none; }
button.big { background:var(--fire); color:#1a0703; border-color:#ffb08a; font-size:22.4px; padding:16px 22px; }
button.big:hover { background:#ff6a3c; }
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(255,40,0,0) 40%, rgba(255,40,0,.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:0 0 6px #000, 2px 2px 0 #000; }
#stars .empty { color:#4a3a2a; }
#stars.low { animation:pulse .6s infinite; }
#tips { font-family:'VT323',monospace; 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:'VT323',monospace; 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:'VT323',monospace; font-size:clamp(32px, 8vw, 73.6px); color:#fff; text-shadow:4px 4px 0 #000, 0 0 20px var(--fire); }
#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:#fff; } .gg b, .gg-big b { color:var(--goblin); }
#minimap { width:164px; height:164px; image-rendering:pixelated; background:#1a2a1a; border-radius:6px; display:block; }
#order { font-size:18px; line-height:1.05; margin-top:5px; color:#ddd; }
#orderTimer { font-family:'VT323',monospace; 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:#ffd0d0; }
#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:'VT323',monospace; font-size:20.8px; display:block; margin-bottom:4px; color:#fff; 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:#ffd400; } #mFood { background:#ff8a1c; }
#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:'VT323',monospace; 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; }
#intro { background:#000; }
#intro video { width:100%; height:100%; object-fit:contain; }
#skipIntro { position:absolute; right:20px; bottom:20px; }
.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:'VT323',monospace; 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, 0 0 30px rgba(124,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, 0 0 34px rgba(255,74,28,.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:'VT323',monospace; font-size:19.2px; color:var(--goblin); }
.small-note { font-size:16px; color:#a88f80; margin:0; }
h2 { font-family:'VT323',monospace; color:var(--ember); margin:0; font-size:32px; }
.gg-big { font-family:'VT323',monospace; 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:'VT323',monospace; 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:'VT323',monospace; font-size:17.6px; margin:0 0 6px; color:#fff; }
.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:'VT323',monospace; 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:'VT323',monospace; 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:'VT323',monospace; 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:'VT323',monospace; font-size:12.8px; color:#fff; 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:'VT323',monospace; font-size:14.4px; margin-bottom:3px; }
#order .tag.pick { color:#ff9a3a; } #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:#fff; 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:#fff; border-radius:1px; box-shadow:1px 1px 0 #000; }