/* Frogger PWA — mobile-first */
:root{
  --bg:#0a1228; --ink:#e9f1ff; --muted:#9db0d0; --panel:#0f1834; --accent:#2dd36f; --danger:#ff4d6d; --gold:#ffd166;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial}
h1,h2,h3{margin:0}
.topbar{position:sticky;top:0;display:flex;align-items:center;gap:8px;padding:10px 12px;background:linear-gradient(180deg,#0d1736,#0b1330);border-bottom:1px solid #151f45}
.topbar .spacer{flex:1}
.icon-btn,.pill-btn,.cta{
  border:1px solid #263159;background:#111a3a;color:var(--ink);border-radius:999px;padding:8px 12px;font-weight:600
}
.icon-btn{border-radius:10px}
.cta{background:var(--accent);color:#05100a;border-color:#1daa5b}
.container{max-width:520px;margin:10px auto;padding:8px}
canvas#game{width:100%;height:auto;display:block;background:#061023;border:2px solid #11204a;border-radius:12px}
.hud{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.hud .score{margin-left:auto;display:flex;gap:10px;color:var(--muted);font-weight:700}
.touch-zone{margin-top:10px;display:flex;justify-content:center}
.dpad{display:flex;flex-direction:column;gap:8px;align-items:center;user-select:none}
.dpad .mid{display:flex;gap:8px}
.dir{width:64px;height:64px;border-radius:12px;border:1px solid #263159;background:#121a3a;color:#d7e3ff;font-size:24px;font-weight:900}
.dir:active{transform:scale(.98);background:#172358}
.foot{padding:16px;text-align:center;color:var(--muted)}
.drawer{position:fixed;inset:0 0 0 auto;width:min(420px,100%);transform:translateX(102%);transition:.25s ease;background:#0b1330;border-left:1px solid #1a2655;z-index:30}
.drawer.open{transform:translateX(0)}
.drawer-inner{padding:16px;display:flex;flex-direction:column;gap:10px}
.badge{display:inline-block;min-width:46px;text-align:center;padding:6px 8px;border-radius:10px;border:1px solid #263159;background:#101a3a;color:#e9f1ff;font-weight:700}
.badge.warn{background:#3a1a10;color:#ffd7d1;border-color:#5a2720}
@media (min-width:700px){
  .container{max-width:640px}
  .dir{width:72px;height:72px}
}


/* Visual countdown bar */
.timer{margin-top:6px;height:10px;background:#0e1634;border:1px solid #22305f;border-radius:999px;overflow:hidden}
.timer .bar{height:100%;width:100%;background:linear-gradient(90deg,#2dd36f,#ffd166);transition:width .25s linear}
.timer .bar.warn{background:linear-gradient(90deg,#ff9f1c,#ff4d6d)}