@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  width:100%;height:100%;overflow:hidden;background:#080810;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  font-family:"Press Start 2P",monospace;color:#dde;image-rendering:pixelated;
}
body{display:flex;flex-direction:column;align-items:center;justify-content:center;position:fixed;top:env(safe-area-inset-top);left:0;right:0;bottom:0}
@media (display-mode: standalone){
  html,body{position:fixed;top:0;left:0;width:100%;height:var(--full-h,100dvh);overflow:hidden}
}
canvas{display:block;width:100%;height:100%;touch-action:none;image-rendering:pixelated;image-rendering:crisp-edges}

.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;padding-top:calc(24px + env(safe-area-inset-top));z-index:10;overflow-y:auto}
.screen.hidden{display:none}

/* Consistent green + white + dark theme */
h1{font-size:18px;font-weight:400;letter-spacing:6px;color:#3efa6e;margin:8px 0}
.sub{font-size:6px;color:rgba(255,255,255,0.3);letter-spacing:2px;line-height:2;text-align:center}
.btn{
  padding:10px 32px;background:#0e0e1a;border:2px solid #3efa6e;color:#3efa6e;
  font-size:8px;letter-spacing:3px;font-family:inherit;cursor:pointer;
}
.btn:active{background:#3efa6e;color:#080810}
.btn-dim{
  padding:8px 18px;background:#0e0e1a;border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.4);font-size:6px;letter-spacing:2px;font-family:inherit;cursor:pointer;
}
.btn-dim:active{background:rgba(255,255,255,0.08)}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.best{font-size:6px;color:rgba(255,255,255,0.25);margin-top:2px}

/* Title art */
.tart{display:flex;flex-direction:column;align-items:center;gap:3px;margin-bottom:8px}
.trow{display:flex;gap:0}
.tp{width:7px;height:7px}
.tp-g{background:#3efa6e}.tp-w{background:#dde}.tp-d{background:#12121e}
.tp-dg{background:#1a5e30}.tp-r{background:#f44}.tp-y{background:#fc3}.tp-b{background:#4af}

/* HUD */
.hud{position:absolute;top:calc(8px + env(safe-area-inset-top));left:10px;right:10px;display:flex;justify-content:space-between;align-items:flex-start;z-index:10;pointer-events:none}
.hud.hidden{display:none}
.hud-left{display:flex;flex-direction:column;gap:2px}
.hud-wave{font-size:6px;color:rgba(255,255,255,0.35);letter-spacing:2px}
.hud-score{font-size:11px;color:#3efa6e;letter-spacing:2px}
.hud-powerup{font-size:5px;color:#fc3;letter-spacing:1px;margin-top:1px}
.hud-powerup.hidden{display:none}
.hud-pause{pointer-events:auto;padding:6px 10px;background:none;border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.25);font-size:7px;letter-spacing:2px;font-family:inherit;cursor:pointer}
.hud-pause:active{color:rgba(255,255,255,0.5)}

.wave-announce{position:absolute;top:38%;z-index:20;font-size:14px;letter-spacing:6px;color:#3efa6e;pointer-events:none;opacity:0}
.wave-announce.show{animation:fadeInOut 1.6s ease-out forwards}
.story-overlay{position:absolute;top:36%;left:0;right:0;z-index:18;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.story-overlay.hidden{display:none}
.story-line{font-size:7px;letter-spacing:2px;white-space:nowrap;opacity:0;transition:opacity 0.3s}
.story-line.show{opacity:1}
.story-line.fade{opacity:0;transition:opacity 0.4s}
.story-line.signal{color:#fff;animation:signalFlicker 0.8s ease-in-out infinite}
@keyframes signalFlicker{0%,100%{opacity:0.3}50%{opacity:0.8}}
.drag-hint{position:absolute;bottom:12px;font-size:5px;color:rgba(255,255,255,0.14);letter-spacing:2px;pointer-events:none}
.drag-hint.hidden{display:none}

/* Settings */
.stitle{font-size:12px;letter-spacing:4px;color:#3efa6e;margin-bottom:6px}
.srow{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:260px;padding:5px 0}
.slbl{font-size:5px;color:rgba(255,255,255,0.5);letter-spacing:1px}
.sval{font-size:6px;color:#3efa6e;letter-spacing:1px;min-width:30px;text-align:right}
.sctrl{display:flex;gap:5px;align-items:center}
.sbtn{
  width:26px;height:26px;background:#0e0e1a;border:1px solid rgba(255,255,255,0.15);
  color:#3efa6e;font-family:inherit;font-size:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.sbtn:active{background:#3efa6e;color:#080810}
.sdiv{width:100%;max-width:260px;border-top:1px solid rgba(255,255,255,0.06);margin:3px 0}

/* Game over */
.go-t{font-size:12px;letter-spacing:4px;color:rgba(255,255,255,0.4)}
.go-s{font-size:28px;color:#3efa6e;margin:6px 0}
.go-d{font-size:6px;color:rgba(255,255,255,0.25)}

.imprint-link{font-size:5px;color:rgba(255,255,255,0.15);letter-spacing:1px;text-decoration:none;margin-top:10px}
.imprint-link:active{color:rgba(255,255,255,0.3)}

/* Pause */
.pause-overlay{position:absolute;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;background:rgba(8,8,16,0.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pause-overlay.hidden{display:none}
.pause-modal{display:flex;flex-direction:column;align-items:center;gap:12px}
.pause-title{font-size:14px;letter-spacing:6px;color:#3efa6e;margin-bottom:4px}

@keyframes fadeInOut{
  0%{opacity:0;transform:scale(0.85)}20%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1.05)}
}