*{margin:0;padding:0;box-sizing:border-box}
:root{
  --y:#f8e800;--c:#00e8e8;--g:#00c840;
  --bg:#0c0c1e;--panel:#1c1c3e;--bor:#3c3c7e;
  --f:'Courier New',Courier,monospace;
}
body{font-family:var(--f);background:#000;color:#fff;
  height:100dvh;overflow:hidden;display:flex;align-items:center;justify-content:center}
#app{position:relative;width:100%;max-width:480px;height:100dvh;overflow:hidden}

/* ── Screens ── */
.screen{position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;padding:24px}
.screen.active{display:flex}
.screen.overlay{background:rgba(0,0,0,.88);z-index:100}

/* ── Start ── */
#s-start{
  background:
    repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(255,255,255,.03) 32px),
    repeating-linear-gradient(90deg,transparent,transparent 31px,rgba(255,255,255,.03) 32px),
    var(--bg);
}
.logo-area{text-align:center}
.logo-icon{font-size:60px;animation:hop .6s steps(2) infinite}
@keyframes hop{50%{transform:translateY(-8px)}}
.logo-title{font-size:20px;line-height:1.7;margin-top:14px;
  text-shadow:3px 3px 0 #000;letter-spacing:2px;font-weight:bold}
.logo-title span{color:var(--y)}
.logo-sub{font-size:8px;color:var(--c);margin-top:8px;letter-spacing:1px}
.btn-col{display:flex;flex-direction:column;gap:14px;width:100%;max-width:260px}
.best-score{font-size:8px;color:var(--g);letter-spacing:1px}

/* ── Buttons ── */
.btn-p{background:var(--y);color:#000;border:none;border-radius:0;
  padding:14px 20px;font-family:var(--f);font-size:11px;font-weight:bold;
  cursor:pointer;box-shadow:4px 4px 0 #000;letter-spacing:1px;width:100%}
.btn-p:active{transform:translate(4px,4px);box-shadow:none}
.btn-s{background:var(--panel);color:#fff;border:3px solid var(--bor);border-radius:0;
  padding:11px 18px;font-family:var(--f);font-size:9px;cursor:pointer;
  box-shadow:3px 3px 0 #000;letter-spacing:1px;width:100%}
.btn-s:active{transform:translate(3px,3px);box-shadow:none}

/* ── Game screen ── */
#s-game{padding:0;background:#000}
#cv{width:100%;height:100%;display:block;touch-action:none;
  image-rendering:pixelated;image-rendering:crisp-edges}
/* Tiny pause/mute buttons — absolute, no compositing cost */
.gm-btn{position:absolute;background:rgba(0,0,0,.55);border:2px solid var(--bor);
  border-radius:0;color:#fff;font-size:14px;width:38px;height:38px;
  cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center}
.gm-btn:active{opacity:.6}

/* ── Modal ── */
.modal{background:var(--panel);border:4px solid var(--bor);
  padding:26px 22px;width:100%;max-width:300px;
  display:flex;flex-direction:column;align-items:center;
  gap:14px;text-align:center;box-shadow:6px 6px 0 #000}
.modal h2{font-size:13px;color:var(--y);text-shadow:2px 2px 0 #000;letter-spacing:2px}
.go-icon{font-size:46px}
.results{width:100%;display:flex;flex-direction:column;gap:7px}
.row{display:flex;justify-content:space-between;padding:7px 10px;
  background:rgba(255,255,255,.05);border:2px solid var(--bor);font-size:7px;gap:8px}
.row.hi{background:rgba(248,232,0,.12);border-color:var(--y);color:var(--y)}
.row b{font-size:9px;color:#fff}
.row.hi b{color:var(--y)}
.hidden{display:none!important}