:root{
  --bg:#262626; --panel:#1c1e21; --text:#ffffff; --g1:#006341; --g2:#41b880; --blue:#2e67b1;
  --red:#ee4455; --lime:#c5e86c; --orange:#fab780; --gold:#ffd75e;
  --u:4px;  /* one game art pixel in CSS px; set from the canvas scale */
  --font:"Proxima Nova","Montserrat","Avenir Next","Avenir","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --notch:polygon(var(--u) 0,calc(100% - var(--u)) 0,calc(100% - var(--u)) var(--u),100% var(--u),100% calc(100% - var(--u)),calc(100% - var(--u)) calc(100% - var(--u)),calc(100% - var(--u)) 100%,var(--u) 100%,var(--u) calc(100% - var(--u)),0 calc(100% - var(--u)),0 var(--u),var(--u) var(--u));
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);overflow:hidden;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
#stage{position:fixed;inset:0;overflow:hidden;cursor:pointer}
#game{position:absolute;left:0;top:0;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
canvas.pxt,canvas.sprite,img.pix{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
canvas.pxt{display:inline-block;vertical-align:middle}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Retro frames: square notched corners, hard shadows, no blur ---------- */
.frame{filter:drop-shadow(var(--u) var(--u) 0 rgba(0,0,0,.55))}
.panel{background:var(--panel);clip-path:var(--notch);box-shadow:inset 0 0 0 var(--u) var(--g2),inset 0 0 0 calc(var(--u) * 2) #0d0e10;
  padding:calc(var(--u) * 6) calc(var(--u) * 6);max-height:calc(100vh - 24px);overflow:auto}
.btn{font:700 15px/1 var(--font);color:#fff;cursor:pointer;border:0;clip-path:var(--notch);background:var(--g1);
  box-shadow:inset 0 0 0 var(--u) var(--g2),inset 0 calc(var(--u) * -2) 0 #00402a;
  padding:calc(var(--u) * 3) calc(var(--u) * 4) calc(var(--u) * 4);display:inline-flex;align-items:center;justify-content:center;
  gap:calc(var(--u) * 2);text-decoration:none;min-height:calc(var(--u) * 12)}
.btn:hover{background:#0a7a52}
.btn:active{transform:translateY(var(--u));box-shadow:inset 0 0 0 var(--u) var(--g2)}
.btn:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--u) var(--lime),inset 0 calc(var(--u) * -2) 0 #00402a}
.btn.alt{background:#34373b;box-shadow:inset 0 0 0 var(--u) #8e9297,inset 0 calc(var(--u) * -2) 0 #202225}
.btn.alt:hover{background:#44484d}
.btn.alt:focus-visible{box-shadow:inset 0 0 0 var(--u) var(--lime),inset 0 calc(var(--u) * -2) 0 #202225}
.btn-row{display:flex;gap:calc(var(--u) * 3);flex-wrap:wrap;margin-top:calc(var(--u) * 5)}
.center{text-align:center}
.center .btn-row{justify-content:center}

/* ---------- HUD buttons ---------- */
#hudbtns{position:absolute;top:max(calc(var(--u) * 3),env(safe-area-inset-top));right:max(calc(var(--u) * 3),env(safe-area-inset-right));display:flex;gap:calc(var(--u) * 2);z-index:5}
.hbtn{width:calc(var(--u) * 11);height:calc(var(--u) * 11);display:grid;place-items:center;border:0;cursor:pointer;clip-path:var(--notch);
  background:rgba(28,30,33,.85);box-shadow:inset 0 0 0 var(--u) #8e9297}
.hbtn:hover{box-shadow:inset 0 0 0 var(--u) var(--lime)}
.hbtn[hidden]{display:none}
#btn-mute .off{display:none}
#btn-mute.muted .on{display:none}
#btn-mute.muted .off{display:block}

/* ---------- Screens ---------- */
.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:12px;cursor:default;z-index:4}
.screen.show{display:flex}
.screen.dim{background:rgba(10,12,16,.45)}
.screen.show .frame{animation:pop .28s steps(4) both}
/* motion only: if animations are throttled or paused, the panel is still fully visible */
@keyframes pop{from{transform:translateY(calc(var(--u) * 6))}to{transform:none}}
@media (prefers-reduced-motion:reduce){.screen.show .frame{animation:none}}
/* pixel text gets chunkier on big screens, so the panels grow with it */
.w-lg{width:min(94vw,max(880px,calc(var(--u) * 230)))}
.w-md{width:min(94vw,max(700px,calc(var(--u) * 195)))}
.w-sm{width:min(92vw,500px)}
.logo-chip{display:inline-flex;background:#fff;clip-path:var(--notch);padding:calc(var(--u) * 2) calc(var(--u) * 3)}
.logo-chip img{height:22px;display:block}
.eyebrow{margin:calc(var(--u) * 4) 0 calc(var(--u) * 2)}
.title-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(var(--u) * 6);align-items:center}
.title-lines{display:flex;flex-direction:column;gap:calc(var(--u) * 2)}
.hero{margin:0 auto}
p{line-height:1.5;color:rgba(255,255,255,.88)}
.lede{font-size:16px;max-width:48ch;margin-top:calc(var(--u) * 4)}
.note{font-size:13px;color:rgba(255,255,255,.62);margin-top:calc(var(--u) * 3)}
.challenge{margin-top:calc(var(--u) * 3);padding:calc(var(--u) * 2) calc(var(--u) * 3);clip-path:var(--notch);background:rgba(250,183,128,.12);box-shadow:inset 0 0 0 var(--u) var(--orange);font-size:14px;color:#fff}
.howto{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u) * 3);margin-top:calc(var(--u) * 6)}
.card{clip-path:var(--notch);background:#26292d;box-shadow:inset 0 0 0 var(--u) #3d4146;padding:calc(var(--u) * 3) calc(var(--u) * 4)}
.card .pxwrap{margin-bottom:calc(var(--u) * 2)}
.card span{font-size:12.5px;color:rgba(255,255,255,.74);line-height:1.4;display:block}
.statlist{margin:calc(var(--u) * 4) 0 0;display:grid;gap:calc(var(--u) * 1.5);text-align:left;max-width:420px}
.statlist div{display:flex;justify-content:space-between;gap:16px;padding:calc(var(--u) * 1.5) calc(var(--u) * 3);background:#26292d;font-variant-numeric:tabular-nums;font-size:14px}
.statlist div b{font-weight:700;white-space:nowrap}
.statlist .total{background:rgba(0,99,65,.55);box-shadow:inset 0 0 0 var(--u) var(--g2)}
.bigscore{margin:calc(var(--u) * 3) 0 calc(var(--u) * 2)}
.rank{display:inline-flex;align-items:center;gap:8px;padding:calc(var(--u) * 1.5) calc(var(--u) * 3);clip-path:var(--notch);box-shadow:inset 0 0 0 var(--u) var(--g2);font-weight:700;font-size:15px}
.split{display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(var(--u) * 6);align-items:center}
.badges{display:flex;gap:calc(var(--u) * 2);flex-wrap:wrap;margin:calc(var(--u) * 3) 0}
.badge{display:inline-flex;align-items:center;gap:6px;padding:calc(var(--u) * 1.5) calc(var(--u) * 2.5);clip-path:var(--notch);background:#2d2a1d;box-shadow:inset 0 0 0 var(--u) var(--gold);font-size:13px;font-weight:700;color:#fff3c4}
.badge i{width:calc(var(--u) * 2);height:calc(var(--u) * 2);background:var(--gold);display:inline-block}
.product{font-size:18px;font-weight:800;line-height:1.25;color:#fff;margin-top:calc(var(--u) * 2)}
.specs{font-size:14px;color:rgba(255,255,255,.78);margin-top:calc(var(--u) * 2)}
.cta{display:flex;gap:calc(var(--u) * 4);align-items:center;text-align:left;padding:calc(var(--u) * 3) calc(var(--u) * 4);clip-path:var(--notch);
  background:rgba(197,232,108,.08);box-shadow:inset 0 0 0 var(--u) rgba(197,232,108,.55);margin-top:calc(var(--u) * 5)}
.cta p{font-size:14px}
.cta a{color:var(--lime);font-weight:700;text-decoration:none}
.cta a:hover{text-decoration:underline}
.cta .pix{flex:none}
#toast{position:absolute;left:50%;top:calc(var(--u) * 16);transform:translate(-50%,-10px);opacity:0;padding:calc(var(--u) * 2) calc(var(--u) * 4);
  background:var(--panel);clip-path:var(--notch);box-shadow:inset 0 0 0 var(--u) var(--lime);font-weight:600;font-size:14px;transition:opacity .2s,transform .2s;pointer-events:none;z-index:9;max-width:92vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:760px){
  .title-grid,.split{grid-template-columns:1fr;text-align:center;gap:calc(var(--u) * 3)}
  .title-grid .btn-row,.split .btn-row{justify-content:center}
  .title-lines{align-items:center}
  .lede{margin-left:auto;margin-right:auto}
  .howto{grid-template-columns:1fr 1fr}
  .badges{justify-content:center}
  .statlist{margin-left:auto;margin-right:auto}
  .panel{padding:calc(var(--u) * 5) calc(var(--u) * 4)}
}
@media (max-height:560px) and (min-width:761px){
  .howto{display:none}
  .lede{font-size:14px}
}
/* Formerly inline style attributes; moved here so the page runs under a strict style-src policy. */
#scr-pause .pause-note{margin-top:12px}
#scr-cap .cap-title{margin-top:8px}
.noscript{padding:24px}