*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
html,body{margin:0;height:100%;background:#05070f;color:#fff;overflow:hidden;overscroll-behavior:none;
  font-family:"Arial Black","Trebuchet MS",system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none}
#app{position:fixed;inset:0;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
#stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%,#14193a,#05070f 70%)}
#wrap{position:relative;--s:1;width:360px;height:600px;box-shadow:0 0 40px rgba(0,0,0,.7);border-radius:calc(var(--s)*6px);overflow:hidden}
canvas{display:block;width:100%;height:100%;touch-action:none;image-rendering:auto}

#mute{position:absolute;top:calc(var(--s)*8px);right:calc(var(--s)*8px);width:max(44px,calc(var(--s)*44px));height:max(44px,calc(var(--s)*44px));
  border-radius:50%;border:2px solid rgba(255,255,255,.7);background:rgba(0,0,0,.45);color:#fff;
  font-size:calc(var(--s)*16px);line-height:1;padding:0;cursor:pointer;z-index:5}
#mute.off{opacity:.65;text-decoration:line-through}

.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:4;
  background:radial-gradient(ellipse at 50% 55%,rgba(5,8,25,.55),rgba(5,8,25,.88))}
.screen.show{display:flex}
.card{width:88%;text-align:center;padding:calc(var(--s)*18px) calc(var(--s)*14px);}
.kicker{font-size:calc(var(--s)*11px);letter-spacing:.14em;text-transform:uppercase;color:#ffd24a;margin-bottom:calc(var(--s)*8px)}
h1{margin:0 0 calc(var(--s)*12px);font-size:calc(var(--s)*27px);line-height:1.08;color:#fff;
  text-shadow:0 3px 0 #1c2a6b,0 0 18px rgba(80,120,255,.6)}
h1 span{display:inline-block;margin-top:calc(var(--s)*4px);color:#ffcf33;font-size:calc(var(--s)*30px);
  text-shadow:0 3px 0 #a3480a,0 0 20px rgba(255,170,30,.55)}
h2{margin:0 0 calc(var(--s)*10px);font-size:calc(var(--s)*30px);line-height:1.1}
h2.good{color:#7dff8a;text-shadow:0 3px 0 #0e6a24,0 0 20px rgba(80,255,120,.5)}
h2.bad{color:#ff7a5c;text-shadow:0 3px 0 #7a1608,0 0 20px rgba(255,90,60,.5)}
.trophy{font-size:calc(var(--s)*46px);margin-bottom:calc(var(--s)*4px)}
.blurb{font-family:"Trebuchet MS",system-ui,sans-serif;font-weight:700;font-size:calc(var(--s)*14.5px);line-height:1.35;
  color:#e8ecff;margin:0 auto calc(var(--s)*16px);max-width:90%}
.blurb .fire{color:#ff9a3d}.blurb .gummy{color:#ff6fa8}
button.big{font-family:inherit;font-size:calc(var(--s)*24px);padding:calc(var(--s)*12px) calc(var(--s)*34px);border-radius:calc(var(--s)*16px);
  border:0;color:#3b1a00;background:linear-gradient(#ffe36b,#ffb21c);box-shadow:0 calc(var(--s)*5px) 0 #b36a00,0 calc(var(--s)*10px) calc(var(--s)*18px) rgba(0,0,0,.45);
  cursor:pointer;touch-action:manipulation}
button.big:active{transform:translateY(calc(var(--s)*4px));box-shadow:0 calc(var(--s)*1px) 0 #b36a00}
.help{font-family:"Trebuchet MS",system-ui,sans-serif;font-weight:700;margin-top:calc(var(--s)*16px);font-size:calc(var(--s)*12px);color:#b9c3ff;line-height:1.6}
kbd{display:inline-block;min-width:1.6em;padding:0 .35em;margin:0 .1em;border-radius:5px;border:1px solid #8a96d8;border-bottom-width:3px;background:#1b2250;color:#fff;font:inherit;font-size:.95em}
.touchhelp{display:none}
.credit{margin-top:calc(var(--s)*14px);font-size:calc(var(--s)*10px);letter-spacing:.2em;text-transform:uppercase;color:#7482c9;opacity:.8}

/* Touch controls: shown on phones / tablets / any narrow window */
#controls{flex:0 0 auto;height:clamp(150px,23vh,200px);display:none;align-items:center;justify-content:space-between;
  padding:8px 14px 12px;background:linear-gradient(#0a0e22,#05070f);border-top:2px solid #1d2552;touch-action:none}
#dpad{display:flex;gap:10px;touch-action:none}
#actions{display:flex;gap:10px;align-items:flex-end;touch-action:none}
button.pad,button.act{font-family:inherit;color:#fff;border:3px solid rgba(255,255,255,.75);cursor:pointer;touch-action:none;padding:0;
  background:rgba(40,60,140,.75);box-shadow:0 5px 0 rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;justify-content:center}
button.pad{width:72px;height:84px;border-radius:20px;font-size:30px}
button.act{border-radius:50%;font-size:30px;line-height:1}
button.act small{font-size:11px;letter-spacing:.08em;margin-top:2px}
button.jump{width:70px;height:70px;background:rgba(40,150,90,.8);margin-bottom:6px}
button.fire{width:98px;height:98px;background:rgba(220,70,40,.88);font-size:38px}
button.on{filter:brightness(1.45);transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.5)}
@media (pointer:coarse),(max-width:700px){
  #controls{display:flex}
  .desk{display:none}.touchhelp{display:block}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:520px){
  #controls{position:absolute;left:0;right:0;bottom:0;height:auto;background:none;border:0;pointer-events:none;padding:6px 18px}
  #controls button{pointer-events:auto;opacity:.85}
  button.pad{width:70px;height:76px}button.jump{width:70px;height:70px}button.fire{width:88px;height:88px}
}

.backhome{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:calc(var(--s)*8px) 0 0;padding:0 .4rem;
  font-family:"Trebuchet MS",system-ui,sans-serif;font-weight:700;font-size:calc(var(--s)*13px);color:#c5cdf5;text-decoration:underline;
  touch-action:manipulation;pointer-events:auto;user-select:auto;-webkit-user-select:auto}
.backhome:focus-visible{outline:3px solid #ffd24a;outline-offset:3px;border-radius:8px}

.install-hint{font-family:"Trebuchet MS",system-ui,sans-serif;font-weight:700;margin:calc(var(--s)*6px) 0 0;font-size:calc(var(--s)*11px);letter-spacing:.06em;text-transform:uppercase;color:#c5cdf5;line-height:1.3;white-space:nowrap}
html.standalone .install-hint{display:none}