:root {
  --ink: #ece7da; --dim: #9c978b; --red: #a5160f; --red2: #c9221a; --red-dark: #5e0c08; --gold: #e0a24a;
  --font: "Oswald", "Arial Narrow", "Segoe UI", sans-serif;
  --display: "Bebas Neue", Impact, "Arial Narrow Bold", sans-serif;
  /* Scratched, mottled dark surface used behind every screen. */
  --grunge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .05' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
  --speck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='.9' numOctaves='1' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 1.2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #141516; color: var(--ink); font-family: var(--font); -webkit-tap-highlight-color: transparent; touch-action: none; user-select: none; -webkit-user-select: none; }
canvas#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
[hidden] { display: none !important; }

.vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(6, 6, 7, .45) 100%); }
.hurt { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(120, 0, 0, .15) 30%, rgba(110, 0, 0, .9) 100%); transition: opacity .3s; }
.hurt.on { opacity: 1; transition: opacity .15s; }
.danger { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(130, 10, 10, .45) 100%); }

/* ------------------------------------------------------------ red brush buttons */
.red-btn, .ghost-btn { position: relative; isolation: isolate; font-family: var(--display); letter-spacing: 2px; padding: 14px 40px 10px; font-size: 30px; line-height: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); transition: transform .1s, filter .15s; }
.red-btn::before, .ghost-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; filter: url(#rough); }
.red-btn::before { background: linear-gradient(180deg, var(--red2), var(--red) 55%, var(--red-dark)); box-shadow: 0 6px 18px rgba(0, 0, 0, .55); }
.ghost-btn { color: var(--ink); font-size: 24px; padding: 12px 26px 9px; }
.ghost-btn::before { background: rgba(20, 20, 22, .55); border: 2px solid var(--red2); }
.red-btn:hover, .ghost-btn:hover { filter: brightness(1.15); }
.red-btn:active, .ghost-btn:active { transform: scale(.97); }
.red-btn.big { font-size: 46px; padding: 18px 80px 12px; }
.red-btn.arrow { padding-right: 58px; }
.red-btn.arrow::after { content: ""; position: absolute; right: 22px; top: 50%; width: 0; height: 0; margin-top: -11px; border-left: 16px solid var(--ink); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.red-btn:disabled { filter: grayscale(1) brightness(.6); cursor: default; }

/* ------------------------------------------------------------ screens */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 20px; padding: 28px 16px; text-align: center; overflow-y: auto;
  background: var(--speck), var(--grunge), radial-gradient(ellipse at 50% 40%, rgba(40, 40, 42, .62), rgba(10, 10, 11, .94)); }
.menu { background: radial-gradient(ellipse at 50% 42%, rgba(20, 20, 22, .05), rgba(8, 8, 9, .7)); }
.screen-title { margin: 0; font-family: var(--display); font-weight: normal; font-size: clamp(34px, 6vw, 54px); letter-spacing: 3px; color: var(--ink); opacity: .92; }
.screen-foot { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 10px; }

.logo { margin: 0; font-family: var(--display); font-weight: normal; line-height: .82; text-shadow: 0 8px 30px rgba(0, 0, 0, .8); }
.logo-small { display: block; font-size: clamp(22px, 4.4vw, 40px); letter-spacing: .55em; padding-left: .55em; color: #d5d0c4; text-shadow: 0 3px 14px rgba(0, 0, 0, .8); }
.logo-big { display: block; font-size: clamp(110px, 24vw, 230px); letter-spacing: 6px; color: var(--ink); text-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 12px 40px rgba(0, 0, 0, .75); }
.menu-best { font-family: var(--display); font-size: 24px; letter-spacing: 2px; color: var(--dim); }
.menu-best b { color: var(--ink); font-weight: normal; font-size: 30px; margin-left: 6px; }
.menu-how { margin: 6px 0 0; max-width: 560px; color: var(--dim); font-size: 15px; letter-spacing: .5px; }

.wallet { position: fixed; top: max(16px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); z-index: 5; display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 34px; color: var(--gold); text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.wallet svg { width: 36px; height: 36px; padding: 5px; fill: #2a1a0c; background: radial-gradient(circle at 40% 35%, #f0b25a, #a5641c); border-radius: 50%; box-shadow: 0 0 0 2px #6b3d10, 0 3px 8px rgba(0, 0, 0, .5); }
.wallet.bump { animation: bump .4s; }
@keyframes bump { 40% { transform: scale(1.18); } }

/* ------------------------------------------------------------ perks */
.perk-cost { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 20px; letter-spacing: 2px; color: var(--dim); }
.perk-cost b { color: var(--gold); font-weight: normal; font-size: 30px; }
.perk-cost svg { width: 24px; height: 24px; padding: 3px; fill: #2a1a0c; background: radial-gradient(circle at 40% 35%, #f0b25a, #a5641c); border-radius: 50%; }
.perk-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; max-width: 980px; }
.perk { position: relative; isolation: isolate; width: 170px; padding: 18px 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.perk::before { content: ""; position: absolute; inset: 0; z-index: -1; filter: url(#rough-soft); background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); border: 2px solid rgba(255, 255, 255, .14); }
.perk.on::before { background: linear-gradient(180deg, #b31a12, #7c0f0a); border-color: rgba(255, 120, 100, .35); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.perk svg { width: 96px; height: 96px; fill: var(--ink); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.perk h3 { margin: 2px 0 0; font-family: var(--display); font-weight: normal; font-size: 26px; letter-spacing: 1.5px; }
.perk p { margin: 0; min-height: 36px; font-size: 14px; color: rgba(236, 231, 218, .8); letter-spacing: .5px; text-transform: uppercase; }
.perk button { position: relative; isolation: isolate; margin-top: 4px; width: 100%; padding: 9px 0 6px; font-family: var(--display); font-size: 24px; letter-spacing: 2px; }
.perk button::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 2px solid var(--red2); background: rgba(0, 0, 0, .35); filter: url(#rough); }
.perk.on button::before { border-color: rgba(255, 255, 255, .55); }
.perk button:disabled { opacity: .45; cursor: default; }
.perk.locked svg:first-child { opacity: .22; }
.perk.locked h3, .perk.locked p { opacity: .45; }
.perk .lock { position: absolute; top: 34px; width: 46px; height: 46px; fill: var(--ink); opacity: .9; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .8)); }
.perk .need { margin-top: 4px; width: 100%; padding: 9px 0 6px; font-family: var(--display); font-size: 20px; letter-spacing: 1.5px; color: var(--gold); border-top: 1px solid rgba(255, 255, 255, .12); }
.unlocks { display: flex; flex-direction: column; gap: 6px; font-family: var(--display); font-size: 26px; letter-spacing: 2px; color: var(--dim); }
.unlocks b { color: var(--gold); font-weight: normal; }
.unlocks span { animation: pop .4s 1.8s both; }
.perk-badges svg.lost { opacity: .35; background: rgba(60, 60, 60, .7); }
.perk-note { min-height: 20px; color: var(--dim); font-size: 15px; letter-spacing: .5px; }
.perk-note b { color: var(--gold); }

/* ------------------------------------------------------------ results */
.score { position: relative; display: grid; place-items: center; min-height: 200px; }
.score b { position: relative; z-index: 1; font-family: var(--display); font-weight: normal; font-size: clamp(90px, 16vw, 160px); line-height: .9; transform: rotate(-6deg); text-shadow: 0 6px 24px rgba(0, 0, 0, .7); }
.score-best { position: relative; z-index: 1; font-family: var(--display); font-size: clamp(28px, 5vw, 44px); letter-spacing: 2px; transform: rotate(-6deg); margin-top: -6px; }
.score-best.new { color: var(--ink); }
.score-best.old { color: var(--dim); font-size: 24px; }
.splat { position: absolute; width: 520px; height: 360px; max-width: 92vw; background: radial-gradient(circle at 50% 50%, #8e120c 0 30%, transparent 31%), radial-gradient(circle at 22% 38%, #8e120c 0 9%, transparent 10%), radial-gradient(circle at 78% 30%, #8e120c 0 7%, transparent 8%), radial-gradient(circle at 70% 72%, #8e120c 0 11%, transparent 12%), radial-gradient(circle at 30% 76%, #8e120c 0 6%, transparent 7%), radial-gradient(circle at 90% 55%, #8e120c 0 4%, transparent 5%), radial-gradient(circle at 10% 60%, #8e120c 0 3.5%, transparent 4.5%); filter: url(#rough); opacity: .95; animation: splat .35s ease-out; }
@keyframes splat { from { transform: scale(.4); opacity: 0; } }
.tally { display: flex; gap: 34px; flex-wrap: wrap; justify-content: center; }
.tally div { display: flex; flex-direction: column; align-items: center; }
.tally span { font-size: 13px; letter-spacing: 2px; color: var(--dim); }
.tally b { font-family: var(--display); font-weight: normal; font-size: 40px; display: flex; align-items: center; gap: 6px; }
.tally .earned b { color: var(--gold); }
.tally .earned i { font-style: normal; }
.tally svg { width: 30px; height: 30px; padding: 4px; fill: #2a1a0c; background: radial-gradient(circle at 40% 35%, #f0b25a, #a5641c); border-radius: 50%; }
.over { animation: fadein .7s .9s both; }
@keyframes fadein { from { opacity: 0; } }

/* ------------------------------------------------------------ HUD */
#hud { position: fixed; inset: 0; pointer-events: none; }
.stats { position: absolute; top: max(12px, env(safe-area-inset-top)); left: max(18px, env(safe-area-inset-left)); text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.dist { font-family: var(--display); line-height: .9; }
.dist b { font-size: 58px; font-weight: normal; letter-spacing: 1px; }
.dist span { font-size: 28px; margin-left: 2px; opacity: .85; }
.sub { display: flex; gap: 10px; align-items: baseline; font-family: var(--display); font-size: 18px; letter-spacing: 1.5px; color: rgba(236, 231, 218, .65); }
.sub b { font-weight: normal; font-size: 22px; color: rgba(236, 231, 218, .9); }
.kills { margin-top: 4px; display: flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 24px; opacity: .85; }
.kills svg { width: 20px; height: 20px; fill: var(--ink); }
.buttons { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); display: flex; gap: 6px; pointer-events: auto; }
.icon-btn { width: 46px; height: 46px; display: grid; place-items: center; opacity: .8; }
.icon-btn svg { width: 30px; height: 30px; fill: var(--ink); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.icon-btn:hover { opacity: 1; }
.icon-btn.muted .wave { opacity: 0; }
.weapon { position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); animation: pop .3s; }
.weapon-icon svg { width: 86px; height: 40px; fill: var(--ink); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.ammo { display: flex; flex-direction: column; line-height: .95; }
.ammo b { font-family: var(--display); font-weight: normal; font-size: 40px; }
.ammo span { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: rgba(236, 231, 218, .7); }
.ammo.low b { color: var(--red2); }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
.perk-badges { position: absolute; top: max(74px, calc(env(safe-area-inset-top) + 62px)); right: max(18px, env(safe-area-inset-right)); display: flex; gap: 6px; }
.perk-badges svg { width: 30px; height: 30px; padding: 4px; fill: var(--ink); background: rgba(165, 22, 15, .75); border-radius: 4px; }
.toast { position: absolute; top: 22%; left: 50%; transform: translate(-50%, 0); font-family: var(--display); font-size: 46px; letter-spacing: 3px; text-shadow: 0 3px 12px rgba(0, 0, 0, .8); opacity: 0; transition: opacity .3s, transform .3s; white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, -8px); }
.hint { position: absolute; bottom: max(26px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); padding: 8px 16px; font-size: 15px; letter-spacing: .5px; color: rgba(236, 231, 218, .85); text-shadow: 0 2px 6px rgba(0, 0, 0, .8); transition: opacity .8s; white-space: nowrap; }
.hint.gone { opacity: 0; }
kbd { display: inline-block; min-width: 22px; padding: 1px 6px; margin: 0 1px; border-radius: 4px; background: rgba(255, 255, 255, .14); border-bottom: 2px solid rgba(0, 0, 0, .4); font: 13px var(--font); text-align: center; }
.touch, .touch-only, .fire { display: none; }
body.is-touch .touch, body.is-touch .touch-only { display: initial; }
body.is-touch .desk { display: none; }
body.is-touch .hint { bottom: auto; top: 30%; white-space: normal; text-align: center; max-width: 80vw; }

.fire { position: absolute; right: max(22px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom)); width: 100px; height: 100px; border-radius: 50%; pointer-events: auto; font-family: var(--display); font-size: 26px; letter-spacing: 2px; touch-action: none; isolation: isolate; }
.fire::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(201, 34, 26, .9), rgba(94, 12, 8, .9)); border: 3px solid rgba(255, 255, 255, .3); filter: url(#rough-soft); }
body.is-touch .fire { display: grid; place-items: center; }
.fire.off { opacity: .35; filter: grayscale(1); }
.fire.down { transform: scale(.93); }
.stick { position: absolute; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .15); }
.stick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(233, 228, 214, .5); }

.steer-mode { display: none; align-items: center; gap: 8px; color: var(--dim); font-family: var(--display); letter-spacing: 2px; }
body.is-touch .steer-mode { display: flex; }
.chip { padding: 7px 16px 5px; border: 1px solid rgba(255, 255, 255, .25); font-family: var(--display); font-size: 18px; letter-spacing: 2px; }
.chip[aria-checked="true"] { background: var(--ink); color: #141516; }

.loading { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: var(--speck), var(--grunge), #141516; transition: opacity .5s; }
.loading .logo-big { font-size: clamp(80px, 16vw, 150px); }
.loading.done { opacity: 0; pointer-events: none; }
.bar { width: 240px; height: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--red2); transition: width .2s; }

@media (max-width: 640px) {
  .screen { padding-top: 76px; }
  .perk-cost { font-size: 16px; }
  .perk { width: 46%; padding: 12px 8px 10px; }
  .perk svg { width: 64px; height: 64px; }
  .perk h3 { font-size: 22px; }
  .perk p { font-size: 12px; min-height: 30px; }
  .red-btn.big { font-size: 38px; padding: 16px 60px 10px; }
  .dist b { font-size: 46px; }
  .tally { gap: 20px; }
  .tally b { font-size: 32px; }
  .wallet { font-size: 28px; }
}