:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0;font-size:14px}img{max-width:100%}[hidden]{display:none!important}

/* Layout: escenario 16:9 a pantalla completa; el HUD flota sobre las esquinas del lienzo */
:root{
  --night:#0d1610;
  --leaf:#86b84e;
  --shell:#f0a14c;
  --slime:#c4e8ff;
  --ink:#f4f0e1;
  --muted:#a7b597;
  --danger:#ff6f5c;
  --glass:rgba(12,22,14,.62);
  --display:'Grandstander','Trebuchet MS',system-ui,sans-serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --u:10px;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--night);color:var(--ink);font-family:var(--body);overflow:hidden;user-select:none;-webkit-user-select:none}
#stage{height:100%;display:grid;place-items:center}
#wrap{position:relative;box-shadow:0 0 0 1px rgba(255,255,255,.05),0 30px 80px rgba(0,0,0,.6)}
#game{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.hud{position:absolute;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:flex-start;gap:calc(var(--u)*1);padding:calc(var(--u)*1.1) calc(var(--u)*1.4);pointer-events:none;font-size:max(11px,calc(var(--u)*1.25))}
.panel{background:var(--glass);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);border-radius:calc(var(--u)*1);padding:.55em .9em;display:flex;align-items:center;gap:1em}
.stat{display:flex;flex-direction:column;line-height:1.05}
.stat small{font-size:.62em;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.stat b{font-family:var(--display);font-weight:800;font-size:1.6em;font-variant-numeric:tabular-nums}
.hearts{display:flex;gap:.25em;font-size:1.35em}
.hearts span{filter:drop-shadow(0 2px 2px rgba(0,0,0,.4));transition:opacity .3s,transform .3s}
.hearts span.off{opacity:.18;transform:scale(.8)}
.energy{display:flex;flex-direction:column;gap:.3em;min-width:7em}
.bar{height:.55em;border-radius:1em;background:rgba(255,255,255,.12);overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#c9702c,var(--shell));border-radius:1em}
.chips{display:flex;gap:.4em}
.chip{font-size:.72em;font-weight:700;padding:.25em .65em;border-radius:1em;letter-spacing:.04em}
.chip.rain{background:rgba(120,190,255,.2);color:var(--slime)}
.chip.boost{background:rgba(255,205,80,.2);color:#ffd970}
.right{display:flex;gap:.5em;pointer-events:auto}
.btn{font:inherit;font-weight:700;font-size:.8em;color:var(--ink);background:var(--glass);border:1px solid rgba(255,255,255,.12);border-radius:.7em;padding:.5em .8em;cursor:pointer}
.btn:hover{background:rgba(40,60,36,.8)}
.btn:focus-visible,.res button:focus-visible,.play:focus-visible{outline:2px solid var(--slime);outline-offset:2px}
.res{display:flex;background:var(--glass);border:1px solid rgba(255,255,255,.12);border-radius:.7em;overflow:hidden}
.res button{font:inherit;font-weight:700;font-size:.8em;color:var(--muted);background:none;border:0;padding:.5em .75em;cursor:pointer}
.res button[aria-pressed="true"]{background:var(--shell);color:#2a1406}
#shellBtn{position:absolute;right:calc(var(--u)*1.6);bottom:calc(var(--u)*1.6 + env(safe-area-inset-bottom,0px));width:max(64px,calc(var(--u)*7));aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:radial-gradient(circle at 35% 30%,#ffd38a,#c8692a 60%,#6b3216);color:#2a1406;font-family:var(--display);font-weight:800;font-size:max(12px,calc(var(--u)*1.1));touch-action:none;display:none;max-width:100%}
@media (pointer:coarse){#shellBtn{display:block}}
.campad{position:absolute;right:calc(var(--u)*1.4);bottom:calc(var(--u)*1.4 + env(safe-area-inset-bottom,0px));display:grid;grid-template-areas:"t t t" ". u ." "l c r" ". d .";grid-template-columns:repeat(3,max(34px,calc(var(--u)*2.6)));grid-auto-rows:max(34px,calc(var(--u)*2.6));gap:calc(var(--u)*.25);padding:calc(var(--u)*.5);background:var(--glass);border:1px solid rgba(255,255,255,.1);border-radius:calc(var(--u)*1);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.campad .lbl{grid-area:t;align-self:end;text-align:center;font-size:max(10px,calc(var(--u)*.75));letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.campad button{font:inherit;font-size:max(13px,calc(var(--u)*1.1));color:var(--ink);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:calc(var(--u)*.5);cursor:pointer;touch-action:none;padding:0}
.campad button:hover{background:rgba(196,232,255,.18)}
.campad button.on{background:var(--slime);color:#10202c}
.campad button:focus-visible{outline:2px solid var(--slime);outline-offset:2px}
@media (pointer:coarse){#shellBtn{right:calc(var(--u)*1.4 + max(34px,calc(var(--u)*2.6))*3 + var(--u)*2.5)}}
.screen{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at center,rgba(8,14,9,.35),rgba(8,14,9,.82));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));z-index:5}
.card{max-width:34rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem}
.eyebrow{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--leaf);font-weight:700}
h1{font-family:var(--display);font-weight:800;font-size:clamp(3rem,10vw,6.5rem);line-height:.9;margin:0;text-wrap:balance;color:var(--ink);text-shadow:0 6px 0 #7a3a14,0 14px 30px rgba(0,0,0,.5)}
h1 em{font-style:normal;color:var(--shell)}
h2{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,7vw,4rem);margin:0;line-height:1}
.card p{margin:0;color:var(--muted);line-height:1.5;font-size:1rem;max-width:30rem}
.keys{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;text-align:left;font-size:.95rem;background:var(--glass);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:1rem 1.2rem}
.keys kbd{font-family:var(--body);font-weight:700;font-size:.8rem;background:rgba(255,255,255,.1);border-radius:6px;padding:.15rem .45rem;color:var(--ink);white-space:nowrap}
.keys span{color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.1rem;font-size:.9rem;color:var(--muted)}
.legend b{color:var(--ink)}
.play{font-family:var(--display);font-weight:800;font-size:1.5rem;color:#2a1406;background:linear-gradient(180deg,#ffc779,var(--shell));border:0;border-radius:999px;padding:.7rem 2.6rem;cursor:pointer;box-shadow:0 6px 0 #9a4a1a,0 14px 30px rgba(0,0,0,.4);transition:transform .12s}
.play:hover{transform:translateY(-2px)}
.play:active{transform:translateY(3px);box-shadow:0 2px 0 #9a4a1a}
.final{font-family:var(--display);font-size:3.2rem;font-weight:800;color:var(--shell);font-variant-numeric:tabular-nums;line-height:1}
@media (prefers-reduced-motion:reduce){.play,.hearts span{transition:none}}

.st1{grid-area:u}
.st2{grid-area:l}
.st3{grid-area:c}
.st4{grid-area:r}
.st5{grid-area:d}