/* JET MONSTER - styles. System fonts only (no web fonts), no inline styles. */
:root { --o: #f67508; --c: #67e8f9; --g1: #c8c4c0; --g2: #7c7874; --bg: #0d0b10; --ink: #1e0c06; --m: #ff4fd0;
  --font: "Arial Black", "Segoe UI Black", Impact, "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: #fff; overflow: hidden; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body { position: fixed; inset: 0; font-family: var(--font); }
#app { position: absolute; inset: 0; touch-action: none; overflow: hidden; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.noscript { padding: 2em; text-align: center; }

/* ---------- HUD */
.hud { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start;
  padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  pointer-events: none; text-shadow: 3px 3px 0 #000; letter-spacing: 1px; }
.hud[hidden], .bossbar[hidden] { display: none; }
.hud-l { display: flex; gap: 10px; align-items: flex-start; }
#pilot { width: 56px; height: 56px; image-rendering: pixelated; border: 3px solid var(--o); background: #2b2533; box-shadow: 3px 3px 0 #000; }
.score { font-size: 30px; line-height: 1; color: #fff; font-family: var(--font); }
.sub { font-size: 12px; color: var(--g1); margin-top: 3px; }
.sub b { color: var(--c); }
.combo { margin-top: 4px; font-size: 16px; color: var(--o); transition: opacity .2s; }
.combo.off { opacity: 0; }
.combo b { font-size: 22px; color: var(--c); }
.fuse { width: 110px; height: 5px; background: rgba(255,255,255,.15); margin-top: 3px; }
.fuse i { display: block; height: 100%; width: calc(var(--f, 0) * 100%); background: var(--o); }
.hud-c { text-align: center; font-size: 13px; color: var(--g1); padding-top: 4px; }
.stage { color: var(--o); font-size: 15px; }
.speed { color: var(--c); font-family: var(--mono); font-weight: 700; }
.hud-r { text-align: right; margin-right: 92px; }
.lives { font-size: 20px; color: var(--o); min-height: 24px; letter-spacing: 3px; }
.shield { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--g1); justify-content: flex-end; }
.bar { width: 120px; height: 10px; border: 2px solid #000; background: #2b2533; box-shadow: 2px 2px 0 #000; }
.bar i { display: block; height: 100%; width: calc(var(--v, 1) * 100%); background: var(--c); transition: width .15s; }
.shield.low .bar i { background: var(--m); }
.roll-ready { font-size: 11px; color: var(--c); margin-top: 4px; opacity: .25; }
.roll-ready.on { opacity: 1; }
.bossbar { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); text-align: center;
  font-size: 14px; color: var(--o); text-shadow: 2px 2px 0 #000; pointer-events: none; }
.bossbar .bar { width: min(70vw, 460px); height: 14px; margin-top: 4px; }
.bossbar .bar i { background: linear-gradient(90deg, var(--m), var(--o)); }
.bossbar.shielded .bar i { background: var(--g2); }

/* ---------- banners + score pops */
.banner { position: absolute; left: 0; right: 0; top: 32%; text-align: center; font-size: clamp(26px, 6vw, 64px); color: #fff;
  text-shadow: 4px 4px 0 var(--o), 8px 8px 0 #000; pointer-events: none; opacity: 0; line-height: 1.05; padding: 0 12px; }
.banner small { display: block; font-size: .42em; color: var(--c); text-shadow: 3px 3px 0 #000; margin-top: .4em; }
.banner.show { animation: bannerIn 2.6s ease-out forwards; }
.banner.warn { color: var(--m); }
@keyframes bannerIn { 0% { opacity: 0; transform: scale(2.2); } 10% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.06); } }
.pops { position: absolute; inset: 0; pointer-events: none; }
.pop { position: absolute; left: calc(var(--x, .5) * 100%); top: calc(var(--y, .5) * 100%); transform: translate(-50%, -50%);
  font-size: 20px; color: var(--c); text-shadow: 2px 2px 0 #000; white-space: nowrap; animation: pop .9s ease-out forwards; }
.pop.o { color: var(--o); } .pop.m { color: var(--m); } .pop.big { font-size: 30px; }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.flash.hit { background: var(--m); animation: flash .35s ease-out; }
.flash.white { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: .55; } 100% { opacity: 0; } }

/* ---------- overlays */
.overlay { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px; background: rgba(13, 11, 16, .45); text-shadow: 3px 3px 0 #000; }
.overlay.show { display: flex; }
#title { background: linear-gradient(180deg, rgba(13,11,16,.25), rgba(13,11,16,.1) 55%, rgba(13,11,16,.65)); justify-content: flex-start;
  padding-top: max(5vh, env(safe-area-inset-top)); }
.logo { margin: 0; line-height: .9; font-size: clamp(48px, 11vw, 120px); letter-spacing: 2px; transform: skewX(-8deg); }
.logo span { display: block; }
.logo .l1 { color: var(--c); text-shadow: 5px 5px 0 #0e7490, 10px 10px 0 #000; font-size: .6em; }
.logo .l2 { color: var(--o); text-shadow: 5px 5px 0 #832807, 10px 10px 0 #000; }
.tagline { color: var(--g1); font-size: clamp(13px, 2vw, 18px); margin: 14px 0 0; font-family: var(--mono); font-weight: 700; }
.start { margin: 18px 0 6px; font-size: clamp(18px, 3vw, 28px); color: #fff; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.best-line { margin: 4px 0; color: var(--g1); font-size: 14px; } .best-line b { color: var(--c); }
.top { list-style: none; padding: 0; margin: 4px 0 8px; font-family: var(--mono); font-size: 13px; color: var(--g1); font-weight: 700; }
.top li { margin: 2px 0; } .top li.me { color: var(--o); }
.controls { color: var(--g1); font-size: 11px; margin: 8px 0 0; font-family: var(--mono); font-weight: 700; max-width: 760px; line-height: 1.5; }
.warn { color: var(--g2); font-size: 11px; margin: 6px 0 0; font-family: var(--mono); }
.credit { margin: 14px 0 6px; font-size: 13px; }
.credit a, .home a { color: var(--c); text-decoration: none; border-bottom: 2px solid var(--o); padding: 3px 8px 2px; background: rgba(13,11,16,.82); box-shadow: 2px 2px 0 #000; }
.credit a:hover, .home a:hover { color: #fff; }
.home { margin: 10px 0 0; font-size: 11px; font-family: var(--mono); }
.big { margin: 0; font-size: clamp(40px, 9vw, 96px); color: var(--o); text-shadow: 5px 5px 0 #000; }
.final { font-size: clamp(18px, 3vw, 26px); color: #fff; margin: 12px 0 0; }
.newbest { color: var(--c); font-size: 26px; margin: 6px 0; animation: blink .5s steps(2) infinite; }
.newbest[hidden] { display: none; }
.tc { display: none; }
body.is-touch .tc { display: inline; } body.is-touch .kb { display: none; }
body.is-touch p.controls.tc { display: block; }

/* ---------- touch controls (shown once a touch is seen or on coarse pointers) */
.touch { display: none; position: absolute; inset: 0; pointer-events: none; }
body.is-touch.playing .touch { display: block; }
.steer { position: absolute; left: 0; top: 18%; bottom: 0; width: 62%; pointer-events: auto; touch-action: none; }
.steer span { position: absolute; left: 18px; bottom: max(18px, env(safe-area-inset-bottom)); font-size: 11px; color: rgba(255,255,255,.35); }
.tbtn { position: absolute; pointer-events: auto; touch-action: none; border: 3px solid #000; border-radius: 50%;
  font-family: var(--font); color: #000; box-shadow: 4px 4px 0 #000; opacity: .85; }
.tbtn.on { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #000; opacity: 1; }
.fire { right: max(18px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); width: 96px; height: 96px; background: var(--o); font-size: 18px; }
.roll { right: max(128px, calc(env(safe-area-inset-right) + 110px)); bottom: max(40px, env(safe-area-inset-bottom)); width: 72px; height: 72px; background: var(--c); font-size: 14px; }
.topbtns { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); display: flex; gap: 8px; }
.topbtns button { width: 38px; height: 38px; border: 3px solid #000; background: var(--g1); color: #000; font: 16px var(--font);
  box-shadow: 3px 3px 0 #000; cursor: pointer; padding: 0; }
.topbtns button[aria-pressed="true"] { background: var(--g2); text-decoration: line-through; }
.topbtns button:focus-visible, .credit a:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
@media (max-width: 640px) {
  .score { font-size: 22px; } #pilot { width: 40px; height: 40px; } .bar { width: 80px; } .hud-r { margin-right: 0; margin-top: 46px; }
  .hud-c { display: none; } .fuse { width: 80px; }
}
@media (prefers-reduced-motion: reduce) { .start, .newbest { animation: none; } }