:root{--g:#8ed03f;--g2:#c6ff5a;--red:#ff4b4b;--ink:#05060b;--panel:rgba(10,13,22,.88);--sa:env(safe-area-inset-left,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
html,body{margin:0;height:100%;background:var(--ink);overflow:hidden;overscroll-behavior:none;
  font-family:"Trebuchet MS","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:#eaf2e0;
  -webkit-user-select:none;user-select:none;touch-action:none}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.hidden{display:none!important}
#vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 45%,rgba(0,0,0,.65) 100%)}
#hurt{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,rgba(255,0,0,0) 35%,rgba(255,30,30,.75) 100%)}

/* HUD */
#hud{position:fixed;inset:0;z-index:2;pointer-events:none;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
#hud-left{position:absolute;left:max(12px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));width:min(260px,34vw)}
.bar{position:relative;height:20px;border-radius:12px;background:rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.25);overflow:hidden;margin-bottom:6px}
.bar i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:10px;transition:width .12s}
.bar b{position:absolute;inset:0;text-align:center;font-size:12px;line-height:17px;text-shadow:0 1px 2px #000;letter-spacing:.5px}
.bar.hp i{background:linear-gradient(#ff7a7a,#d62b3a)}
.bar.xp{height:14px}.bar.xp b{font-size:10px;line-height:11px}
.bar.xp i{background:linear-gradient(#b6ff6a,#4fae21);width:0}
.bar.boss{height:16px;width:100%}.bar.boss i{background:linear-gradient(#ff9d5c,#c8341a)}
#hud-center{position:absolute;left:50%;top:max(8px,env(safe-area-inset-top));transform:translateX(-50%);text-align:center;text-shadow:0 2px 4px #000}
#waveTxt{font-size:15px;font-weight:700;color:var(--g2);letter-spacing:1px;text-transform:uppercase}
#scoreTxt{font-size:26px;font-weight:900;line-height:1.05}
#boss{position:absolute;left:50%;top:max(62px,calc(env(safe-area-inset-top) + 56px));transform:translateX(-50%);width:min(380px,50vw);text-align:center;font-weight:800;color:#ffb27a;text-shadow:0 2px 3px #000;font-size:13px;letter-spacing:1px}
#ammo{position:absolute;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);font-weight:900;font-size:30px;text-shadow:0 2px 4px #000;text-align:center;white-space:nowrap}
#ammo .sep{opacity:.5;margin:0 4px;font-size:22px}
#ammo #ammoRes{font-size:20px;opacity:.8}
#ammo.low #ammoMag{color:var(--red)}
#reloadMsg{font-size:13px;font-weight:700;letter-spacing:1px;color:#ffd75a;min-height:16px;text-transform:uppercase}

/* Entrada / táctil */
#input{position:fixed;inset:0;z-index:3;touch-action:none;cursor:crosshair}
#touchui{position:fixed;inset:0;z-index:4;pointer-events:none;display:none}
body.touch #touchui.on{display:block}
.stick{position:absolute;width:0;height:0;opacity:.35;transition:opacity .15s}
.stick.active{opacity:.9}
.stick .base{position:absolute;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;border:3px solid rgba(255,255,255,.55);background:rgba(255,255,255,.07)}
.stick .knob{position:absolute;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(210,255,150,.55);border:3px solid rgba(255,255,255,.8)}
#stickR .knob{background:rgba(255,150,120,.6)}
#btnReload{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(150px,34vh);pointer-events:auto}
.round{width:62px;height:62px;border-radius:50%;border:3px solid rgba(255,255,255,.7);background:rgba(20,26,40,.7);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;touch-action:none}
.round svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.round small{font-size:10px;font-weight:800;margin-top:-2px}
.round:active,.round.press{background:rgba(120,180,40,.8)}

#topbtns{position:fixed;z-index:5;right:max(10px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));display:flex;gap:8px}
.ib{width:40px;height:40px;border-radius:12px;border:2px solid rgba(255,255,255,.35);background:rgba(10,13,22,.6);padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation}
.ib svg{width:22px;height:22px;stroke:#eaf2e0;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ib svg rect,.ib svg .fillme{fill:#eaf2e0}
.ib.muted .waves{display:none}
.ib:hover{background:rgba(60,90,30,.7)}

#banner{position:fixed;left:0;right:0;top:30%;z-index:6;text-align:center;pointer-events:none;font-size:clamp(28px,7vw,64px);font-weight:900;letter-spacing:3px;text-transform:uppercase;
  color:var(--g2);text-shadow:0 0 18px rgba(160,255,60,.6),0 4px 0 #1d3a07,0 6px 10px #000;opacity:0;transform:scale(.7)}
#banner.show{animation:ban 2.2s ease-out forwards}
#banner small{display:block;font-size:.35em;letter-spacing:2px;color:#fff;text-shadow:0 2px 4px #000;margin-top:4px}
#banner.boss{color:#ff8a4a;text-shadow:0 0 20px rgba(255,90,20,.7),0 4px 0 #4a1405,0 6px 10px #000}
@keyframes ban{0%{opacity:0;transform:scale(.6)}12%{opacity:1;transform:scale(1.08)}22%{transform:scale(1)}78%{opacity:1}100%{opacity:0;transform:scale(1.05)}}
#rotate{position:fixed;left:0;right:0;bottom:14px;z-index:30;text-align:center;pointer-events:none;display:none}
#rotate span{background:rgba(0,0,0,.75);padding:8px 14px;border-radius:20px;font-size:13px;border:1px solid #8ed03f}
@media (orientation:portrait) and (pointer:coarse){#rotate{display:block;bottom:auto;top:calc(50% - 20px);animation:rotHint 6s ease forwards}}
@keyframes rotHint{0%,80%{opacity:1}100%{opacity:0;visibility:hidden}}

/* Pantallas */
.screen{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(5,6,11,.45),rgba(5,6,11,.9));padding:10px;overflow:auto;touch-action:pan-y}
#menu{background:radial-gradient(ellipse at 50% 40%,rgba(5,6,11,.15),rgba(5,6,11,.85))}
.panel{background:var(--panel);border:2px solid rgba(142,208,63,.5);border-radius:20px;padding:22px 26px;text-align:center;max-width:min(560px,96vw);box-shadow:0 0 40px rgba(120,220,40,.15),0 10px 40px #000;margin:auto}
.panel.wide{max-width:min(820px,98vw)}
.logo{font-weight:900;line-height:.9;text-transform:uppercase;margin-bottom:6px}
.logo .l1{display:block;font-size:clamp(22px,5vw,34px);letter-spacing:12px;color:#fff;text-shadow:0 3px 0 #333}
.logo .l2{display:block;font-size:clamp(44px,11vw,84px);letter-spacing:3px;color:var(--g);text-shadow:0 0 22px rgba(150,255,50,.45),0 5px 0 #2a5a0a,0 8px 14px #000;-webkit-text-stroke:2px #1d3a07}
h2{margin:0 0 6px;font-size:clamp(22px,4vw,32px);text-transform:uppercase;letter-spacing:2px;color:var(--g2)}
h2.red{color:#ff7070}
.tag{margin:6px 0 14px;opacity:.85;font-size:15px}
button{font-family:inherit;cursor:pointer;color:#fff}
.big{display:block;margin:10px auto;font-size:26px;font-weight:900;letter-spacing:2px;padding:12px 44px;border-radius:40px;border:3px solid #1d3a07;background:linear-gradient(#b6ff4f,#5ea91a);color:#10250a;box-shadow:0 5px 0 #2a5a0a,0 8px 18px rgba(0,0,0,.6);touch-action:manipulation}
.big:active{transform:translateY(3px);box-shadow:0 2px 0 #2a5a0a}
.sec{font-size:14px;font-weight:700;padding:9px 16px;border-radius:24px;border:2px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);touch-action:manipulation;margin:4px}
.sec:hover{background:rgba(142,208,63,.25)}
.row{display:flex;flex-wrap:wrap;justify-content:center}
.help{font-size:13px;opacity:.8;margin-top:12px;line-height:1.5}
.help b,.hint b{color:var(--g2)}
.help .tc{display:none}
body.touch .help .kb{display:none}body.touch .help .tc{display:block}
body.touch .hint.kb{display:none}
.best{font-size:14px;color:#ffd75a;margin-top:8px;min-height:18px}
.credit{font-size:11px;opacity:.5;margin-top:12px;letter-spacing:1px}
.score-big{font-size:clamp(46px,9vw,70px);font-weight:900;color:#fff;text-shadow:0 0 18px rgba(255,255,255,.3),0 4px 0 #333;line-height:1}
.stats{font-size:15px;opacity:.9;margin:8px 0;line-height:1.6}
.stats span{display:inline-block;margin:0 8px}
.stats b{color:var(--g2)}

#cards{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.card{width:220px;min-height:190px;padding:14px 12px;border-radius:16px;border:3px solid rgba(142,208,63,.6);background:linear-gradient(#18221a,#0c120e);text-align:center;touch-action:manipulation;position:relative;transition:transform .12s,border-color .12s}
.card:hover,.card:focus-visible{transform:translateY(-5px) scale(1.03);border-color:#d6ff7a;outline:none}
.card .ic{width:58px;height:58px;margin:0 auto 6px;border-radius:50%;background:radial-gradient(#3b5c1d,#1a2a0d);display:flex;align-items:center;justify-content:center;border:2px solid #8ed03f}
.card .ic svg{width:34px;height:34px;fill:none;stroke:#e6ffb8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card .ic svg .f{fill:#e6ffb8}
.card h3{margin:2px 0 4px;font-size:18px;color:#fff}
.card p{margin:0;font-size:14px;opacity:.85;line-height:1.3}
.card .lv{margin-top:8px;font-size:12px;color:#ffd75a;font-weight:700}
.card .key{position:absolute;top:6px;left:8px;font-size:12px;font-weight:900;background:#000;border-radius:6px;padding:1px 6px;opacity:.7}
body.touch .card .key{display:none}
.card.locked{pointer-events:none;opacity:.6}

#toast{position:fixed;left:50%;bottom:70px;transform:translateX(-50%) translateY(20px);z-index:40;background:rgba(0,0,0,.85);border:1px solid var(--g);padding:9px 16px;border-radius:20px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Teléfono horizontal: todo más compacto */
@media (max-height:480px){
  .panel{padding:10px 18px;border-radius:16px}
  .logo .l1{font-size:18px;letter-spacing:8px}.logo .l2{font-size:44px}
  .tag{margin:2px 0 6px;font-size:13px}
  .big{font-size:20px;padding:7px 34px;margin:6px auto}
  .sec{padding:6px 12px;font-size:12px;margin:2px}
  .help{font-size:11px;margin-top:6px;line-height:1.35}.credit{margin-top:6px}
  h2{font-size:20px}
  .score-big{font-size:40px}.stats{font-size:13px;margin:4px 0}
  .card{width:min(190px,29vw);min-height:0;padding:8px 8px}
  .card .ic{width:40px;height:40px}.card .ic svg{width:24px;height:24px}
  .card h3{font-size:14px}.card p{font-size:12px}.card .lv{margin-top:4px;font-size:11px}
  #cards{gap:8px;margin:6px 0}
  #scoreTxt{font-size:20px}#waveTxt{font-size:12px}
  .bar{height:16px;margin-bottom:4px}.bar b{line-height:13px;font-size:10px}.bar.xp{height:11px}
  #ammo{font-size:22px;bottom:4px}#ammo #ammoRes{font-size:15px}
  .ib{width:34px;height:34px}.ib svg{width:19px;height:19px}
  .round{width:56px;height:56px}
  #btnReload{bottom:96px}
  #boss{top:48px;font-size:11px}
  .stick .base{width:96px;height:96px;margin:-48px 0 0 -48px}
}

#btnSec{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(230px,48vh);pointer-events:auto;border-color:rgba(255,200,80,.75)}
#btnSec svg{stroke:#ffd75a}
#secHud{position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));font-weight:800;font-size:14px;text-shadow:0 2px 4px #000;background:rgba(0,0,0,.45);padding:6px 10px;border-radius:12px;border:1px solid rgba(255,215,90,.35);display:flex;gap:8px;align-items:center}
#secHud #secStock{color:#ffd75a;font-size:18px}
#secHud.locked{opacity:.45}
#radial{position:fixed;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;background:rgba(5,6,11,.55);pointer-events:auto}
#radial.hidden{display:none!important}
#radialRing{position:relative;width:min(420px,86vw);height:min(420px,86vw)}
.radSlot{position:absolute;width:72px;height:72px;margin:-36px;border-radius:18px;border:2px solid rgba(255,255,255,.45);background:rgba(12,16,28,.92);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;font-weight:800;cursor:pointer;box-shadow:0 6px 18px #000;touch-action:none}
.radSlot .ic{font-size:22px;line-height:1}
.radSlot small{opacity:.85;font-size:10px}
.radSlot.lock{opacity:.4;filter:grayscale(.8)}
.radSlot.lock::after{content:"🔒";position:absolute;top:4px;right:6px;font-size:12px}
.radSlot.sel,.radSlot:hover{border-color:#ffd75a;background:rgba(60,80,20,.95);transform:scale(1.06)}
#radialCenter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;text-shadow:0 2px 6px #000}
#radialCenter b{display:block;font-size:18px;color:#ffd75a}
#radialCenter small{opacity:.85}

#comboHud{margin-top:2px;font-size:15px;font-weight:900;color:#ffd75a;text-shadow:0 0 10px rgba(255,180,40,.55),0 2px 4px #000;letter-spacing:.04em;opacity:0;transform:scale(.9);transition:opacity .15s,transform .15s}
#comboHud.show{opacity:1;transform:scale(1)}
#comboHud b{font-size:20px;color:#fff}
#comboHud.hot{color:#ff7a3a;animation:comboPulse .35s ease}
@keyframes comboPulse{0%{transform:scale(1.25)}100%{transform:scale(1)}}
#btnDash{position:absolute;left:max(16px,env(safe-area-inset-left));bottom:max(150px,34vh);pointer-events:auto;border-color:rgba(120,220,255,.75)}
#btnDash svg{stroke:#9fe8ff}
@media (max-height:430px){
  #btnDash{bottom:96px}
}

/* ─── Meta / progresión ─── */
.metaChrome{display:flex;gap:14px;justify-content:center;align-items:center;margin:4px 0 8px;font-size:15px;flex-wrap:wrap}
.metaChrome .placas{background:rgba(0,0,0,.45);border:1px solid rgba(255,220,120,.45);padding:6px 12px;border-radius:20px;color:#ffe08a}
.metaChrome .placas b{color:#fff;font-size:18px}
.metaChrome .skinlbl{opacity:.85;font-size:13px}
.metaNav .sec{border-color:rgba(142,208,63,.55);background:rgba(80,140,30,.2)}
.sec.danger,.big.danger{border-color:#a33;color:#ffb0b0;background:rgba(120,20,20,.35)}
.big.danger{background:linear-gradient(#ff6a6a,#a02020);color:#fff;border-color:#4a0000;box-shadow:0 5px 0 #4a0000,0 8px 18px rgba(0,0,0,.6)}
.placasEarn{color:#ffe08a!important}
#metaPanel{z-index:25;background:rgba(5,6,11,.78)}
.metaPanelInner{position:relative;max-height:min(92vh,900px);overflow:auto;text-align:left;max-width:min(920px,98vw)}
.metaClose{position:absolute;top:10px;right:12px;width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(0,0,0,.4);color:#fff;font-size:18px;cursor:pointer;z-index:2}
.metaGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:10px}
.metaGrid.skins{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.metaCard{background:rgba(255,255,255,.06);border:1px solid rgba(142,208,63,.35);border-radius:14px;padding:12px 10px;text-align:center}
.metaCard.sel{border-color:#ffe08a;box-shadow:0 0 12px rgba(255,200,80,.25)}
.metaCard.maxed{opacity:.75}
.metaCard .ic{font-size:22px;margin-bottom:4px}
.metaCard .nm{font-weight:800;font-size:14px;color:var(--g2)}
.metaCard .ds{font-size:11px;opacity:.75;margin:4px 0 8px;line-height:1.3;min-height:2.6em}
.metaCard .lv{font-size:12px;letter-spacing:1px;color:#ffe08a;margin-bottom:8px}
.metaCard .swatch{width:48px;height:48px;border-radius:12px;margin:0 auto 8px;border:2px solid rgba(255,255,255,.25);box-shadow:inset 0 -8px 12px rgba(0,0,0,.35)}
.metaBuy{width:100%;font-size:12px;font-weight:800;padding:8px 6px;border-radius:20px;border:2px solid #1d3a07;background:linear-gradient(#9ae03a,#4a8a18);color:#10250a;cursor:pointer;touch-action:manipulation}
.metaBuy:disabled{opacity:.45;cursor:default;background:#333;border-color:#222;color:#aaa}
.metaBuy.on{background:linear-gradient(#ffe08a,#c9a020);border-color:#6a5010}
.metaList{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.metaRow{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(142,208,63,.3);border-radius:12px;padding:10px 12px}
.metaRow.on{border-color:rgba(255,220,120,.5)}
.metaRow .ic{font-size:22px;width:32px;text-align:center}
.metaRow b{display:block;font-size:14px}
.metaRow small{display:block;opacity:.75;font-size:11px}
.metaRow .bar{height:6px;background:rgba(0,0,0,.45);border-radius:4px;margin:6px 0 2px;overflow:hidden}
.metaRow .bar i{display:block;height:100%;background:linear-gradient(90deg,#8ed03f,#ffe08a);border-radius:4px}
.metaRow .rw{margin-left:auto;font-size:12px;color:#ffe08a;white-space:nowrap}
.metaRow .metaBuy{width:auto;min-width:88px;flex-shrink:0}
.skinPrevWrap{text-align:center;margin:8px auto 12px;max-width:260px}
#skinPrev{width:100%;max-width:240px;height:auto;aspect-ratio:240/280;background:#0a0c14;border:2px solid rgba(142,208,63,.4);border-radius:16px;image-rendering:auto}
.skinPrevHint{font-size:11px;opacity:.7;margin:4px 0}
#metaToast{position:fixed;left:50%;bottom:18%;transform:translateX(-50%) translateY(20px);z-index:40;background:rgba(10,14,8,.92);border:2px solid #8ed03f;border-radius:14px;padding:12px 18px;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;min-width:200px;max-width:90vw;box-shadow:0 8px 28px #000}
#metaToast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#metaToast b{display:block;color:var(--g2);font-size:16px}
#metaToast small{display:block;color:#fff;opacity:.9;font-size:12px;margin-top:4px}
@media (max-width:520px){
  .metaGrid{grid-template-columns:repeat(2,1fr)}
  .metaPanelInner{padding:16px 12px}
}

.skinLayout{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:center}
.skinLayout .skinPrevWrap{flex:0 0 200px;margin:0}
.skinLayout .metaGrid.skins{flex:1 1 280px;margin-top:0}
#skinPrev{max-width:200px}

/* Zoom táctil: HUD más compacto para no tapar la acción */
body.zoom-touch #hud{font-size:12px}
body.zoom-touch #hud .bar{height:14px}
body.zoom-touch #hud-left{transform:scale(.92);transform-origin:top left}
body.zoom-touch #ammo{transform:scale(.9);transform-origin:bottom center}
body.zoom-touch #secHud{transform:scale(.9);transform-origin:bottom left}
body.zoom-touch #boss{max-width:70vw}
body.zoom-touch #topbtns{transform:scale(.92);transform-origin:top right}
body.zoom-touch #waveTxt{font-size:13px}
body.zoom-touch #scoreTxt{font-size:18px}

/* Zoom botón activo */
.ib.zoomOn{background:rgba(255,220,80,.25);border-color:#ffe08a;box-shadow:0 0 10px rgba(255,200,60,.35)}
.ib.zoomOn svg{stroke:#ffe08a}

/* Jugar en pantalla completa */
.big.fsplay{margin-top:6px;font-size:18px;padding:10px 28px;background:linear-gradient(#6ec8ff,#2a6aaa);border-color:#0a3048;color:#041018;box-shadow:0 5px 0 #0a3048,0 8px 18px rgba(0,0,0,.55)}
.big.fsplay:active{transform:translateY(3px);box-shadow:0 2px 0 #0a3048}
.iosHint{font-size:12px;line-height:1.4;opacity:.9;margin:8px 10px 0;padding:8px 10px;border-radius:12px;background:rgba(255,200,80,.12);border:1px solid rgba(255,200,80,.35);color:#ffe8b0}
.iosHint.hidden{display:none}

.sfxCredit{display:block;font-size:10px;opacity:.7;margin-top:4px;font-weight:400;line-height:1.3}

.optRow{display:flex;align-items:center;gap:8px;justify-content:center;margin:10px 12px 4px;font-size:13px;color:#d8e8c8;cursor:pointer;user-select:none}
.optRow input{width:16px;height:16px;accent-color:#8ed03f}

/* Sensor de movimiento (Aliens) — esquina, sin tapar sticks */
#radar{position:absolute;top:58px;right:10px;width:118px;height:118px;pointer-events:none;z-index:6;opacity:.92;border-radius:50%;box-shadow:0 0 0 1px rgba(40,255,80,.25),0 4px 16px rgba(0,0,0,.45);background:rgba(0,12,4,.55)}
#radar.hidden{display:none}
@media (pointer:coarse){
  #radar{top:52px;right:8px;width:100px;height:100px}
  /* alejar de botones superiores en horizontal */
  body.touch #radar{top:56px;right:8px}
}
.optRow{display:flex;align-items:center;gap:.55rem;margin:.45rem 0;font-size:.92rem;color:#c8d0c0;cursor:pointer;user-select:none}
.optRow input{width:1.05rem;height:1.05rem;accent-color:#7dcf4a}

/* Cápsulas de vida (10 segmentos) */
.caps{display:flex;flex-wrap:wrap;gap:3px;max-width:168px;margin-top:2px}
.caps i{width:14px;height:10px;border-radius:3px;background:linear-gradient(180deg,#5a1a1a,#2a0c0c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);display:block}
.caps i.on{background:linear-gradient(180deg,#ff6a6a,#c02828);box-shadow:0 0 6px rgba(255,80,80,.45),inset 0 0 0 1px rgba(255,200,200,.25)}
.caps i.flash{animation:capFlash .35s ease}
@keyframes capFlash{0%,100%{filter:brightness(1)}50%{filter:brightness(2)}}
@media (pointer:coarse){.caps{max-width:150px}.caps i{width:12px;height:9px}}
h2.ok{color:#8dff9a}
#ldStats{text-align:center;margin:12px 0 18px;line-height:1.6;color:#c8d0c0}
/* Marcador de salida */

.keyHud{position:absolute;top:46px;left:10px;display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(40,28,8,.72);border:1px solid rgba(255,200,60,.45);color:#ffe14a;font:bold 12px Trebuchet MS,Arial;z-index:7;pointer-events:none;box-shadow:0 0 12px rgba(255,180,40,.25)}
.keyHud.hidden{display:none}
.keyHud .keyIc{font-size:14px;filter:drop-shadow(0 0 4px rgba(255,220,80,.6))}
@media (pointer:coarse){.keyHud{top:44px;font-size:11px}}

/* Minimapa con niebla de guerra */
#minimap{position:absolute;top:184px;right:10px;width:118px;height:88px;pointer-events:none;z-index:6;border-radius:10px;box-shadow:0 0 0 1px rgba(120,200,255,.22),0 4px 14px rgba(0,0,0,.45)}
#minimap.hidden{display:none}
@media (max-height:520px){#radar{width:92px;height:92px}#minimap{top:150px;width:92px;height:69px}}
/* Táctil: radar y minimapa arriba a la izquierda (lejos de los botones Q/R y los sticks) */
body.touch #radar{top:auto;right:auto;left:max(10px,env(safe-area-inset-left));top:62px;width:88px;height:88px}
body.touch #minimap{right:auto;left:calc(max(10px,env(safe-area-inset-left)) + 96px);top:62px;width:92px;height:69px}
body.touch .keyHud{top:156px}
/* Vertical/pantalla angosta: «NIVEL N» y puntaje bajan para no tapar el botón de pausa */
@media (orientation:portrait) and (max-width:640px){
  #hud-center{top:calc(max(8px,env(safe-area-inset-top)) + 50px)}
  body.touch #radar{top:110px}
  body.touch #minimap{top:110px}
}

/* Arma activa en el HUD */
#wpnTag{font-size:13px;font-weight:800;letter-spacing:.5px;color:#e8f0d8;opacity:.9;margin-bottom:-2px}
#ammo.secEq #wpnTag{color:#ffd75a}
#ammo.secEq #ammoMag{color:#ffd75a}
#ammo.secEq .sep,#ammo.melee .sep{display:none}
#ammo.melee #wpnTag{color:#9fe8ff}
#ammo.melee #ammoMag{color:#9fe8ff}
#secHud.equipped{border-color:rgba(255,215,90,.95);box-shadow:0 0 12px rgba(255,200,60,.45)}
#radialCenter{pointer-events:auto;cursor:pointer}

/* aviso breve por encima del contador de munición + arma activa */
#toast{bottom:max(112px,calc(env(safe-area-inset-bottom) + 112px))}