:root{
  --bg:#0b1120; --bg2:#111a2e; --card:#16203a; --line:#26324f;
  --txt:#e8eefc; --muted:#93a1c0;
  --acc:#ff8a3d; --acc2:#4fd1ff; --a:#4f8cff; --b:#ff5f6d;
  --ok:#3ddc84; --bad:#ff5566;
  --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom);
  --sal:env(safe-area-inset-left); --sar:env(safe-area-inset-right);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(1200px 800px at 50% -10%,#1b2a4d 0%,var(--bg) 60%);
  color:var(--txt);overflow:hidden;overscroll-behavior:none;
}
.hidden{display:none !important}
.screen{position:fixed;inset:0;display:none;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(12px + var(--sat)) calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal))}
.screen.active{display:flex}
.screen.game{padding:0;overflow:hidden}

/* ---------- tipografia / atomos ---------- */
h1{font-size:clamp(22px,5vw,34px);letter-spacing:-.5px;line-height:1.1}
h2{font-size:17px;margin-bottom:8px}
h3{font-size:15px;display:flex;align-items:center;gap:8px}
em{font-style:normal;color:var(--acc)}
.muted{color:var(--muted);font-size:13px}
.tiny{font-size:11px}
.msg{min-height:20px;text-align:center;font-size:13px;color:var(--bad);margin-top:10px}
.msg.ok{color:var(--ok)}

.btn{
  appearance:none;border:1px solid var(--line);background:#1c2947;color:var(--txt);
  padding:11px 16px;border-radius:12px;font:inherit;font-weight:600;cursor:pointer;
  transition:transform .08s,background .15s,border-color .15s;
}
.btn:hover{background:#243357;border-color:#3b4c78}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(135deg,var(--acc),#ff5f3d);border-color:#ff9a5c;color:#1a0f06}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.big{width:100%;padding:14px;font-size:16px;margin-top:6px}
.btn.small{padding:7px 11px;font-size:13px;border-radius:10px}
.btn:disabled{opacity:.45;cursor:not-allowed}

input,select{
  width:100%;padding:11px 12px;border-radius:11px;border:1px solid var(--line);
  background:#0f1729;color:var(--txt);font:inherit;outline:none;
}
input:focus,select:focus{border-color:var(--acc2)}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:12px}
label input,label select{margin-top:5px}
input[type=range]{padding:0;height:26px;accent-color:var(--acc);background:transparent;border:none}
.field{display:block}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1 1 140px}
.card{background:linear-gradient(180deg,var(--card),#131c33);border:1px solid var(--line);
  border-radius:18px;padding:16px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.chip{background:#1b2745;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600}

/* ---------- auth ---------- */
#screen-auth{align-items:center;justify-content:center}
.snowfall{position:fixed;inset:0;pointer-events:none;z-index:0}
.snowfall i{position:absolute;top:-12px;border-radius:50%;background:#fff;opacity:.55;
  animation:fall linear infinite}
@keyframes fall{to{transform:translateY(104vh) translateX(var(--dx))}}
.auth-card{position:relative;z-index:1;width:min(420px,100%);background:rgba(22,32,58,.92);
  border:1px solid var(--line);border-radius:22px;padding:26px;backdrop-filter:blur(10px);
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.logo{display:flex;gap:14px;align-items:center;margin-bottom:20px}
.logo-ninja{font-size:44px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.tagline{color:var(--muted);font-size:13px;margin-top:2px}
.tabs{display:flex;background:#0f1729;border-radius:12px;padding:4px;margin-bottom:18px}
.tab{flex:1;padding:9px;border:none;background:transparent;color:var(--muted);
  border-radius:9px;font:inherit;font-weight:600;cursor:pointer}
.tab.active{background:#233156;color:var(--txt)}
.auth-form{display:none}.auth-form.active{display:block}
.install{margin-top:12px;width:100%;border-style:dashed;border-color:var(--acc2);color:var(--acc2)}

/* ---------- menu ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.brand{font-weight:800;font-size:17px;display:flex;align-items:center;gap:8px}
.topbar-right{display:flex;gap:8px;align-items:center}
.code{font-family:ui-monospace,Menlo,monospace;letter-spacing:4px;color:var(--acc);font-size:20px}
.menu-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));align-content:start}
.joinbox{display:flex;gap:8px;margin:10px 0}
.joinbox input{text-transform:uppercase;letter-spacing:6px;text-align:center;font-weight:700}
.joinbox .btn{flex:0 0 auto}
.room-list{list-style:none;margin-top:8px;max-height:190px;overflow-y:auto;display:grid;gap:6px}
.room-list li{display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:#0f1729;border:1px solid var(--line);border-radius:11px;padding:8px 11px;font-size:13px}
.rules{list-style:none;display:grid;gap:8px;font-size:13px;color:#c6d2ea}
.rules li{padding-left:14px;position:relative;line-height:1.45}
.rules li::before{content:"›";position:absolute;left:0;color:var(--acc)}
.stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.stats span{background:#0f1729;border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:12px}

/* ---------- lobby ---------- */
.lobby-grid{display:grid;gap:14px;grid-template-columns:300px 1fr 280px;align-items:start}
.teams{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.team-col{background:linear-gradient(180deg,var(--card),#131c33);border:1px solid var(--line);
  border-radius:18px;padding:14px;min-height:220px;display:flex;flex-direction:column;gap:10px}
.team-col[data-team=A]{border-top:3px solid var(--a)}
.team-col[data-team=B]{border-top:3px solid var(--b)}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot.a{background:var(--a)}.dot.b{background:var(--b)}
.player-list{list-style:none;display:grid;gap:7px;flex:1}
.player-list li{display:flex;align-items:center;gap:8px;background:#0f1729;border:1px solid var(--line);
  border-radius:11px;padding:9px 11px;font-size:14px}
.player-list li.me{border-color:var(--acc);background:#1d2235}
.player-list .tag{margin-left:auto;font-size:11px;color:var(--muted)}
.player-list .kick{background:none;border:none;color:var(--bad);cursor:pointer;font-size:15px;padding:0 4px}
.player-list .mv{background:none;border:1px solid var(--line);color:var(--muted);border-radius:7px;
  cursor:pointer;font-size:11px;padding:2px 6px}
.join-team{width:100%}
.chat{display:flex;flex-direction:column;height:100%;max-height:420px}
.chat-log{flex:1;min-height:120px;overflow-y:auto;background:#0f1729;border:1px solid var(--line);
  border-radius:11px;padding:9px;font-size:13px;display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.chat-log b{color:var(--acc2)}
#chat-form{display:flex;gap:7px}
#chat-form .btn{flex:0 0 auto}

/* ---------- juego ---------- */
#canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;background:#0a1020}
.hud{position:absolute;inset:0;pointer-events:none;
  padding:calc(8px + var(--sat)) calc(8px + var(--sar)) calc(8px + var(--sab)) calc(8px + var(--sal))}
.hud-top{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}
.hud-pill{background:rgba(10,16,32,.72);border:1px solid rgba(255,255,255,.12);border-radius:999px;
  padding:5px 12px;font-size:13px;font-weight:700;backdrop-filter:blur(6px);white-space:nowrap}
.hud-pill.big{font-size:19px;font-variant-numeric:tabular-nums;padding:5px 16px}
.hud-pill.danger{background:rgba(180,30,40,.85);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.6}}
.hud-btn{pointer-events:auto;background:rgba(10,16,32,.72);border:1px solid rgba(255,255,255,.12);
  color:var(--txt);border-radius:12px;width:36px;height:32px;font-size:15px;cursor:pointer}
#minimap{position:absolute;right:calc(8px + var(--sar));top:calc(52px + var(--sat));
  width:130px;height:130px;border-radius:12px;border:1px solid rgba(255,255,255,.18);
  background:rgba(8,12,24,.68);backdrop-filter:blur(4px)}
.hud-alive{position:absolute;left:calc(10px + var(--sal));top:calc(56px + var(--sat));font-size:12px;
  background:rgba(10,16,32,.7);border-radius:10px;padding:6px 10px;line-height:1.6;border:1px solid rgba(255,255,255,.1)}
.killfeed{position:absolute;left:calc(10px + var(--sal));top:calc(120px + var(--sat));
  display:flex;flex-direction:column;gap:4px;font-size:12px;max-width:60vw}
.killfeed div{background:rgba(10,16,32,.75);border-radius:8px;padding:4px 9px;animation:slidein .25s}
@keyframes slidein{from{opacity:0;transform:translateX(-14px)}}
.center-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:clamp(20px,6vw,42px);font-weight:900;text-shadow:0 4px 20px #000;
  padding:20px;line-height:1.25;pointer-events:none}
.center-msg small{display:block;font-size:.42em;font-weight:600;color:var(--muted);margin-top:8px}

.cooldowns{position:absolute;left:calc(10px + var(--sal));bottom:calc(10px + var(--sab));
  display:flex;flex-direction:column;gap:6px;width:150px}
body.touch .cooldowns{display:none}
.cd{background:rgba(10,16,32,.72);border-radius:9px;padding:5px 8px;font-size:11px}
.cd-bar{height:5px;background:#2b3454;border-radius:3px;overflow:hidden;margin-top:3px}
.cd-bar i{display:block;height:100%;width:100%;background:var(--acc2);transition:width .1s}
.cd.ready .cd-bar i{background:var(--ok)}
.buffs{display:flex;gap:5px;flex-wrap:wrap}
.buffs span{background:rgba(79,209,255,.2);border:1px solid var(--acc2);border-radius:8px;
  padding:3px 7px;font-size:11px;font-weight:700}

.touch-layer{position:absolute;inset:0;display:none}
body.touch .touch-layer{display:block}
.joystick{position:absolute;left:calc(18px + var(--sal));bottom:calc(18px + var(--sab));
  width:140px;height:140px;pointer-events:auto;touch-action:none}
.joy-base{position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.07);
  border:2px solid rgba(255,255,255,.18)}
.joy-knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;
  border-radius:50%;background:rgba(255,255,255,.3);border:2px solid rgba(255,255,255,.5)}
.action-buttons{position:absolute;right:calc(18px + var(--sar));bottom:calc(18px + var(--sab));
  display:flex;align-items:flex-end;gap:14px;pointer-events:auto}
.abtn{position:relative;border-radius:50%;border:2px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;cursor:pointer;touch-action:none;
  display:flex;align-items:center;justify-content:center}
.abtn.main{width:104px;height:104px;font-size:36px;background:rgba(255,90,60,.32);border-color:#ff8a5c}
.abtn.power{width:74px;height:74px;background:rgba(79,209,255,.26);border-color:var(--acc2);margin-bottom:16px}
.abtn:disabled,.abtn.cooling{opacity:.45}
.abtn i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:15px;font-weight:800;background:rgba(0,0,0,.45);border-radius:50%}
.abtn i:empty{display:none}

.overlay{position:absolute;inset:0;background:rgba(6,10,20,.86);display:none;
  align-items:center;justify-content:center;padding:16px;pointer-events:auto;z-index:5;overflow-y:auto}
.overlay.show{display:flex}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;
  width:min(560px,100%);max-height:90vh;overflow-y:auto}
.score-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px}
.score-table th,.score-table td{padding:7px 6px;text-align:left;border-bottom:1px solid var(--line)}
.score-table th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase}
.score-table .ta{color:var(--a);font-weight:700}
.score-table .tb{color:var(--b);font-weight:700}
.score-table tr.me td{background:rgba(255,138,61,.12)}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(30px);
  background:#1b2745;border:1px solid var(--line);border-radius:12px;padding:11px 18px;font-size:14px;
  opacity:0;transition:.25s;pointer-events:none;z-index:99;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .lobby-grid{grid-template-columns:1fr}
  .chat{max-height:260px}
}
@media (max-width:560px){
  .teams{grid-template-columns:1fr}
  /* la barra superior debe caber en UNA fila: si envuelve, tapa el panel de vivos */
  .hud-top{flex-wrap:nowrap;gap:4px}
  .hud-pill{font-size:11px;padding:4px 8px;overflow:hidden;text-overflow:ellipsis}
  .hud-pill.big{font-size:15px;padding:4px 10px}
  #hud-round{display:none}
  .hud-btn{width:30px;height:28px;font-size:13px;flex:0 0 auto}
  .hud-alive{top:calc(50px + var(--sat));font-size:11px;padding:5px 8px}
  .killfeed{top:calc(108px + var(--sat))}
  #minimap{width:98px;height:98px}
  .abtn.main{width:88px;height:88px;font-size:30px}
  .abtn.power{width:64px;height:64px}
  .joystick{width:118px;height:118px}
  .killfeed{font-size:11px}
}
@media (max-height:460px) and (orientation:landscape){
  #minimap{width:88px;height:88px}
  .joystick{width:106px;height:106px}
}