:root { --bg:#07090c; --ink:#e8efe8; --muted:#8aa0a0; --accent:#3ecf9a; --gold:#f0c36a; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--ink); font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif; overflow:hidden; }
#app { height:100dvh; display:flex; flex-direction:column; padding: calc(10px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); }
header { display:flex; justify-content:space-between; align-items:center; }
.brand { color:var(--accent); text-decoration:none; letter-spacing:.22em; font-size:13px; font-weight:700; }
.hud { display:flex; gap:14px; align-items:baseline; }
#lvl { color:var(--muted); font-size:13px; }
#lvl::before { content:"NIVEL "; }
#score { font-size:28px; }
.help { margin:6px 0 8px; color:var(--muted); font-size:13px; }
canvas { flex:1; width:100%; min-height:240px; display:block; border-radius:14px; background:#0c1216; touch-action:none; }
#over {
  position:fixed; inset:0; background:#07090ce8;
  display:grid; place-items:center; align-content:center; gap:10px;
  padding:24px; text-align:center;
}
#over.gone, #over[hidden] { display:none !important; visibility:hidden; pointer-events:none; }
.kicker { letter-spacing:.2em; color:var(--accent); font-size:11px; margin:0; }
h1 { margin:0; font-size:28px; }
h2 { margin:0; font-size:42px; }
#over p { margin:0; color:var(--muted); max-width:280px; }
button { border:1px solid var(--accent); background:#16352d; color:var(--accent); padding:12px 28px; border-radius:10px; font:inherit; letter-spacing:.12em; touch-action:manipulation; }