*{box-sizing:border-box}
:root{--bg:#031126;--panel:#061e3d;--cyan:#42e8ff;--green:#a9f45d;--yellow:#ffd436;--muted:#a9bed6}
html,body{margin:0;min-height:100%;font-family:Arial,sans-serif;background:#031126;color:white;overflow-x:hidden}
body{padding:12px;background:radial-gradient(circle at 15% 10%,rgba(0,168,255,.22),transparent 30%),var(--bg)}
button,input{font:inherit}
button{cursor:pointer}
.topbar{max-width:1400px;margin:0 auto 10px;display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:10px}.brand img{width:56px;height:56px;object-fit:contain;background:transparent}
.brand strong,.brand span{display:block}.brand span{color:var(--muted);font-size:.85rem}
.actions{display:flex;gap:8px}.actions button,#menuBtn{padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:#0b3158;color:white;font-weight:800}
.game-frame{position:relative;width:min(1400px,100%);aspect-ratio:16/9;margin:auto;overflow:hidden;border-radius:22px;border:1px solid rgba(255,255,255,.14);background:#04172c;box-shadow:0 22px 60px rgba(0,0,0,.5)}
#gameCanvas{display:block;width:100%;height:100%;background:#04172c}
.hidden{display:none!important}
.overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(1,8,22,.72);backdrop-filter:blur(7px)}
.panel{width:min(560px,95%);padding:24px;text-align:center;border-radius:22px;background:linear-gradient(155deg,rgba(8,40,78,.98),rgba(3,19,42,.98));border:1px solid rgba(66,232,255,.35)}
.panel.small{width:min(430px,94%)}
.hero{width:145px;height:145px;object-fit:contain;background:transparent;filter:drop-shadow(0 12px 18px rgba(0,0,0,.45))}
h1{margin:0;color:var(--cyan);font-size:clamp(2rem,5vw,3.4rem)}
.panel p{color:var(--muted)}
input{width:100%;padding:13px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:#02152c;color:white}
.difficulties{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.difficulty{padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:#08274c;color:white}
.difficulty.active{border-color:var(--green);background:#0c3558}
.primary{width:100%;margin-top:14px;padding:13px;border:0;border-radius:12px;font-weight:900;background:linear-gradient(90deg,var(--green),var(--cyan));color:#00213c}
.status{margin-top:10px;color:var(--green);font-size:.8rem}
.hud{position:absolute;top:12px;left:12px;right:12px;z-index:8;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;pointer-events:none}
.hud div{padding:9px 11px;border-radius:12px;background:rgba(2,16,37,.8);border:1px solid rgba(255,255,255,.12)}
.boss-panel{position:absolute;z-index:10;top:86px;left:50%;transform:translateX(-50%);width:min(520px,88%);padding:12px 16px;border-radius:16px;background:rgba(15,8,47,.92);border:2px solid #ff4ecb;text-align:center}
.boss-panel span,.boss-panel strong,.boss-panel small{display:block}.boss-panel strong{font-size:1.5rem}.boss-panel small{color:#d7dff5}
.boss-bar{height:14px;border-radius:999px;background:#1a1a2f;overflow:hidden;margin-top:8px}.boss-bar div{height:100%;width:100%;background:linear-gradient(90deg,#ff4c68,#ffd436)}
.level-badge{display:inline-block;padding:8px 16px;border-radius:999px;background:linear-gradient(90deg,#8f4dff,#42e8ff);font-weight:900}
.final-score{font-size:3.8rem;font-weight:900;color:var(--yellow)}
.mobile-controls{position:absolute;z-index:12;left:0;right:0;bottom:12px;display:none;justify-content:center;gap:14px}
.mobile-controls button{width:62px;height:62px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(2,25,51,.8);color:white;font-size:1.5rem}
dialog{width:min(620px,94vw);border:1px solid rgba(66,232,255,.35);border-radius:20px;background:#061d3a;color:white;padding:0}
dialog::backdrop{background:rgba(0,5,15,.8)}
.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.dialog-head button{background:transparent;border:0;color:white;font-size:1.2rem}
.rank-row{display:grid;grid-template-columns:44px 1fr 100px;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.rank-row b:last-child{text-align:right;color:var(--yellow)}
@media(max-width:760px){body{padding:4px}.game-frame{height:calc(100vh - 76px);aspect-ratio:auto;border-radius:14px}.hud{grid-template-columns:repeat(2,1fr)}.mobile-controls{display:flex}.hero{width:105px;height:105px}.panel{padding:16px}.boss-panel{top:125px}}

.effect-banner{
  position:absolute;z-index:11;left:50%;top:88px;transform:translateX(-50%);
  padding:10px 18px;border-radius:999px;background:rgba(2,18,43,.9);
  border:2px solid #42e8ff;font-weight:900;box-shadow:0 0 25px rgba(66,232,255,.35);
  white-space:nowrap;pointer-events:none
}
.hit-flash{animation:hitFlash .28s ease}
@keyframes hitFlash{
  0%{filter:none}
  40%{filter:brightness(1.8) saturate(1.8)}
  100%{filter:none}
}

/* LATI ADVENTURE 2.0 */
.hud{grid-template-columns:repeat(6,1fr)}
.infinite-banner{position:absolute;z-index:9;right:14px;bottom:14px;padding:9px 14px;border-radius:999px;background:linear-gradient(90deg,#702cff,#42e8ff);font-weight:900;box-shadow:0 0 25px rgba(112,44,255,.45);pointer-events:none}
@media(max-width:900px){.hud{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.hud{grid-template-columns:repeat(2,1fr);font-size:.78rem}}

.firebase-status{
  align-self:center;padding:7px 10px;border-radius:999px;
  background:rgba(255,212,54,.12);border:1px solid rgba(255,212,54,.35);
  color:#ffd436;font-size:.76rem;font-weight:800
}
.firebase-status.online{
  background:rgba(169,244,93,.13);border-color:rgba(169,244,93,.36);color:#a9f45d
}
.firebase-status.error{
  background:rgba(255,77,104,.12);border-color:rgba(255,77,104,.36);color:#ff8395
}
@media(max-width:850px){.firebase-status{display:none}}