:root{
  --sky1:#8fd3ff; --sky2:#d7f2ff; --sky3:#fff2d8;
  --ink:#243b53; --ink2:#5a7184;
  --card:#ffffff; --line:#dbe9f4;
  --p1:#ff7aa2; --p2:#4fc3f7; --p3:#ffd54f; --p4:#7bd88f; --p5:#b57bff;
  --ok:#43b581; --bad:#ef5350;
  --r:18px; --sh:0 8px 0 rgba(36,59,83,.10), 0 14px 30px rgba(36,59,83,.13);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  color:var(--ink); background:linear-gradient(180deg,var(--sky1),var(--sky2) 55%,var(--sky3));
  overflow:hidden; overscroll-behavior:none;
}
/* ───────────────────────────── fondo animado ───────────────────────────── */
.sky{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.cloud{position:absolute;background:#fff;border-radius:40px;opacity:.85;
  box-shadow:26px 0 0 -4px #fff, 54px 6px 0 -8px #fff;animation:drift linear infinite}
.c1{width:70px;height:22px;top:9%;animation-duration:52s}
.c2{width:52px;height:16px;top:26%;animation-duration:78s;animation-delay:-20s;opacity:.7}
.c3{width:90px;height:26px;top:48%;animation-duration:96s;animation-delay:-50s;opacity:.55}
@keyframes drift{from{left:-160px}to{left:110%}}
.hill{position:absolute;bottom:-40px;border-radius:50% 50% 0 0;opacity:.55}
.h1{width:60vw;height:26vh;left:-6vw;background:#7bd88f}
.h2{width:70vw;height:20vh;right:-10vw;background:#9be3a8}

#app{position:relative;z-index:1;height:100%;overflow:hidden}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  gap:14px;padding:16px;overflow-y:auto;overflow-x:hidden}
.screen.active{display:flex;animation:pop .3s ease}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ───────────────────────────────── cards ───────────────────────────────── */
.card{background:var(--card);border-radius:var(--r);padding:18px;width:100%;max-width:560px;
  box-shadow:var(--sh);border:2px solid var(--line)}
h1,h2,h3{line-height:1.15}
h2{font-size:1.25rem;margin-bottom:12px}
h3{font-size:1.02rem;margin-bottom:10px;color:var(--ink2)}
h3 small{font-weight:400;font-size:.75rem;color:var(--p2)}
.hint{font-size:.78rem;color:var(--ink2);margin-top:8px;line-height:1.4}
.msg{margin-top:10px;font-size:.85rem;min-height:1.1em;color:var(--bad);font-weight:bold}
.msg.ok{color:var(--ok)}

.logo{font-family:"Courier New",monospace;font-weight:900;letter-spacing:2px;font-size:clamp(1.5rem,7vw,2.3rem);
  text-align:center;color:var(--ink);text-shadow:3px 3px 0 var(--p3),6px 6px 0 rgba(36,59,83,.12);
  animation:bob 3s ease-in-out infinite}
.logo-sub{display:block;font-family:inherit;font-size:.62rem;letter-spacing:5px;color:var(--p2);
  margin-top:6px;text-shadow:none;font-weight:700}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ─────────────────────────────── formularios ───────────────────────────── */
.tabs{display:flex;gap:8px;margin:18px 0 14px}
.tab{flex:1;padding:10px;border:2px solid var(--line);background:#f5fafd;border-radius:12px;
  font-weight:bold;color:var(--ink2);cursor:pointer;transition:.15s;font-size:.9rem}
.tab.active{background:var(--p2);color:#fff;border-color:var(--p2);transform:translateY(-2px)}
.pane{display:none;flex-direction:column;gap:12px}
.pane.active{display:flex}
label{display:flex;flex-direction:column;gap:5px;font-size:.8rem;font-weight:bold;color:var(--ink2)}
input,select{padding:11px 12px;border:2px solid var(--line);border-radius:12px;font-size:1rem;
  font-family:inherit;background:#fbfdff;color:var(--ink);outline:none;transition:.15s;width:100%}
input:focus,select:focus{border-color:var(--p2);background:#fff}
input[type=color]{padding:2px;height:42px;cursor:pointer}
label.chk{flex-direction:row;align-items:center;gap:8px;font-size:.82rem}
label.chk input{width:auto}

.btn{border:none;background:var(--p2);color:#fff;font-weight:bold;font-size:.95rem;padding:12px 18px;
  border-radius:14px;cursor:pointer;box-shadow:0 4px 0 #2b9fd4;transition:.1s;font-family:inherit}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #2b9fd4}
.btn.big{padding:14px;font-size:1.05rem;margin-top:4px}
.btn.go{background:var(--p4);box-shadow:0 4px 0 #4faa63}
.btn.ghost{background:#eef5fa;color:var(--ink2);box-shadow:0 4px 0 #d3e2ec}
.icobtn{border:2px solid var(--line);background:#fff;border-radius:12px;width:40px;height:40px;
  font-size:1.05rem;cursor:pointer;color:var(--ink2);font-weight:bold;flex:none}
.icobtn:active{transform:translateY(2px)}
.icobtn.small{width:32px;height:32px;font-size:.85rem}

/* ─────────────────────────────── home ──────────────────────────────────── */
.topbar{width:100%;max-width:900px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.who{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);
  border-radius:14px;padding:6px 12px;box-shadow:var(--sh)}
.who b{font-size:.95rem}
.who small{display:block;font-size:.68rem;color:var(--ink2)}
#mini-avatar{image-rendering:pixelated;width:34px;height:34px}
.topbtns{display:flex;gap:8px}
.pill{background:#fff;border:2px solid var(--line);border-radius:12px;padding:8px 12px;font-weight:bold;font-size:.85rem}

.menu{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mbtn{text-align:left;border:2px solid var(--line);border-radius:16px;padding:14px;background:#fff;
  cursor:pointer;font-family:inherit;transition:.15s;box-shadow:0 4px 0 var(--line)}
.mbtn b{display:block;font-size:1rem;color:var(--ink)}
.mbtn span{font-size:.72rem;color:var(--ink2)}
.mbtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.mbtn.solo{background:linear-gradient(160deg,#fff,#e7f7ff);border-color:#bfe8fb}
.mbtn.create{background:linear-gradient(160deg,#fff,#ffeef4);border-color:#ffd0de}
.mbtn.join{background:linear-gradient(160deg,#fff,#fff6da);border-color:#ffe6a3}
.mbtn.custom{background:linear-gradient(160deg,#fff,#f0ffe9);border-color:#c9edbb}
.mbtn.top{background:linear-gradient(160deg,#fff,#f4eeff);border-color:#ddcdfa;grid-column:span 2}
.join-box{display:flex;gap:8px;margin-top:12px}
.join-box input{text-transform:uppercase;letter-spacing:6px;text-align:center;font-weight:bold;font-family:"Courier New",monospace}

.levels{list-style:none;display:flex;flex-direction:column;gap:7px;counter-reset:l}
.levels li{display:flex;align-items:center;gap:9px;font-size:.85rem;font-weight:bold;counter-increment:l}
.levels li::before{content:counter(l);width:20px;height:20px;border-radius:6px;background:#eef5fa;
  display:grid;place-items:center;font-size:.7rem;color:var(--ink2)}
.levels i{width:14px;height:14px;border-radius:5px;display:inline-block}
.levels small{font-weight:400;color:var(--ink2);font-size:.72rem}

/* ─────────────────────────────── sala ──────────────────────────────────── */
.code-box{background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px 14px;
  font-size:.8rem;display:flex;align-items:center;gap:10px;box-shadow:var(--sh)}
.code-box b{font-family:"Courier New",monospace;font-size:1.5rem;letter-spacing:4px;color:var(--p1)}
.room-grid{width:100%;max-width:900px;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.room-grid .card{max-width:none}
.chat-card{grid-column:span 2}
.cfg{display:flex;flex-direction:column;gap:10px}
.room-actions{display:flex;gap:8px;margin-top:12px}
.room-actions .btn{flex:1}
.teams{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto}
.team{border:2px solid var(--line);border-radius:12px;padding:8px 10px}
.team h4{font-size:.8rem;display:flex;align-items:center;gap:6px}
.team h4 i{width:12px;height:12px;border-radius:4px}
.team ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.team li{background:#f2f8fc;border-radius:8px;padding:3px 8px;font-size:.76rem;display:flex;align-items:center;gap:5px}
.team li.ready::after{content:"✓";color:var(--ok);font-weight:bold}
.team li.host::before{content:"★";color:var(--p3)}
.team li button{border:none;background:none;color:var(--bad);cursor:pointer;font-weight:bold}
.chat-log{height:150px;overflow-y:auto;background:#f7fbfe;border-radius:12px;padding:8px;
  font-size:.8rem;display:flex;flex-direction:column;gap:4px;border:2px solid var(--line)}
.chat-log b{color:var(--p2)}
.chat-log .sys{color:var(--ink2);font-style:italic}
#chat-form{display:flex;gap:8px;margin-top:8px}

/* ──────────────────────────── personalizar ─────────────────────────────── */
.custom-card{display:flex;flex-direction:column;align-items:center;gap:14px}
#preview{image-rendering:pixelated;width:150px;height:150px;background:linear-gradient(180deg,#e3f4ff,#fff);
  border-radius:16px;border:2px solid var(--line)}
.custom-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}

/* ─────────────────────────────── juego ─────────────────────────────────── */
.screen.game{padding:0;background:#8fd3ff}
#canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;
  image-rendering:crisp-edges;display:block}
#hud{position:absolute;inset:0;pointer-events:none;padding:8px;display:flex;flex-direction:column;
  gap:6px;font-size:.75rem}
.hud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.hud-left,.hud-right{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.hud-right{align-items:flex-end;pointer-events:auto}
.hud-mid{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.hearts{display:flex;gap:3px}
.hearts i{width:13px;height:12px;background:rgba(255,255,255,.45);border-radius:3px;
  clip-path:polygon(50% 100%,0 35%,15% 0,50% 20%,85% 0,100% 35%)}
.hearts i.on{background:#ff5c8a;box-shadow:0 0 6px rgba(255,92,138,.7)}
.powers{display:flex;gap:4px}
.powers b{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;color:#243b53;
  font-size:.7rem;box-shadow:0 2px 0 rgba(0,0,0,.15);animation:pulse 1.2s infinite}
@keyframes pulse{50%{transform:scale(1.12)}}
.level-name,.weapon{background:rgba(255,255,255,.82);border-radius:10px;padding:4px 10px;font-weight:bold;
  box-shadow:0 2px 0 rgba(36,59,83,.12);white-space:nowrap}
.bossbar{display:none;align-items:center;gap:6px;background:rgba(255,255,255,.85);border-radius:10px;
  padding:3px 8px;width:min(300px,62vw)}
.bossbar.on{display:flex}
.bossbar span{font-size:.65rem;font-weight:bold;color:#c62828;white-space:nowrap}
.bossbar i{flex:1;height:8px;background:#ffcdd2;border-radius:6px;overflow:hidden;display:block}
.bossbar b{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ef5350,#ff8a65);
  transition:width .2s}
.progress{margin-top:auto;height:9px;background:rgba(255,255,255,.55);border-radius:6px;position:relative}
.progress b{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:linear-gradient(90deg,#7bd88f,#4fc3f7);
  border-radius:6px;transition:width .12s}
.progress .marks i{position:absolute;top:-3px;width:5px;height:15px;border-radius:3px;transform:translateX(-2px)}
.toasts{position:absolute;left:0;right:0;top:38%;display:flex;flex-direction:column;align-items:center;gap:6px}
.toast{background:rgba(255,255,255,.94);border:2px solid;border-radius:12px;padding:6px 14px;font-weight:bold;
  font-size:.82rem;animation:toastIn .3s ease;box-shadow:var(--sh)}
.toast.out{animation:toastOut .4s forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px) scale(.9)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-14px)}}

.touch{position:absolute;inset:auto 0 0 0;display:none;justify-content:space-between;
  padding:10px calc(10px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
  pointer-events:none}
.touch.on{display:flex}
.pad,.acts{display:flex;gap:10px;align-items:flex-end;pointer-events:auto}
.tbtn{width:62px;height:62px;border-radius:50%;border:3px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.42);backdrop-filter:blur(3px);font-size:1.3rem;color:#243b53;
  font-weight:bold;touch-action:none;user-select:none}
.tbtn.pressed{background:rgba(255,255,255,.85);transform:scale(.94)}
.tbtn.up{width:52px;height:52px}
.tbtn.jump{background:rgba(123,216,143,.6);width:74px;height:74px}
.tbtn.fire{background:rgba(255,122,162,.6)}

.overlay{position:absolute;inset:0;background:rgba(36,59,83,.45);display:flex;align-items:center;
  justify-content:center;z-index:20;padding:16px;backdrop-filter:blur(3px)}
.overlay[hidden]{display:none}
.overlay .card{max-width:420px;display:flex;flex-direction:column;gap:10px;text-align:center;animation:pop .25s}
.result-card h2{color:var(--p1)}
.result-list{display:flex;flex-direction:column;gap:6px;font-size:.85rem;max-height:44vh;overflow-y:auto}
.result-list div{background:#f4f9fd;border-radius:10px;padding:7px 10px;display:flex;justify-content:space-between;gap:10px}
.rotate-hint{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(36,59,83,.9);color:#fff;font-weight:bold;font-size:1.1rem;z-index:30}

/* ─────────────────────── chat dentro de la partida ─────────────────────── */
.game-chat{position:absolute;left:8px;bottom:78px;width:min(300px,52vw);display:flex;
  flex-direction:column;gap:5px;align-items:flex-start;pointer-events:none;z-index:15}
.gchat-log{display:flex;flex-direction:column;gap:3px;max-height:110px;overflow:hidden;width:100%}
.gchat-log div{background:rgba(255,255,255,.82);border-radius:9px;padding:3px 8px;font-size:.72rem;
  align-self:flex-start;max-width:100%;animation:chatIn .25s ease;word-break:break-word}
.gchat-log div.fade{opacity:0;transition:opacity .6s}
.gchat-log b{color:#2b7fb8}
.gchat-log .sys{color:#5a7184;font-style:italic;background:rgba(255,255,255,.62)}
@keyframes chatIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.gchat-form{width:100%;pointer-events:auto}
.gchat-form input{background:rgba(255,255,255,.95);border-color:#4fc3f7;font-size:.85rem;padding:7px 10px}
.chatbtn{pointer-events:auto;border:2px solid rgba(255,255,255,.85);background:rgba(255,255,255,.55);
  border-radius:12px;width:38px;height:34px;font-size:.95rem;cursor:pointer}

/* ───────────────────────── ganaste el mapa ─────────────────────────────── */
.overlay.winlevel{background:rgba(36,59,83,.35)}
.win-card{background:#fff;border-radius:22px;padding:20px 28px;text-align:center;border:3px solid #ffd54f;
  box-shadow:0 10px 0 rgba(36,59,83,.12),0 20px 40px rgba(36,59,83,.2);animation:winPop .45s cubic-bezier(.2,1.6,.4,1)}
.win-card h2{color:#f5a623;font-size:1.5rem;letter-spacing:1px;text-shadow:2px 2px 0 #fff2c4}
.win-card p{font-size:.85rem;color:var(--ink2);margin-top:4px}
#win-crown,#result-crown{image-rendering:pixelated;width:90px;height:90px;margin:0 auto;display:block}
@keyframes winPop{0%{transform:scale(.4) rotate(-8deg);opacity:0}60%{transform:scale(1.08) rotate(2deg)}100%{transform:none;opacity:1}}

/* equipos con boton para cambiarse */
.team{cursor:pointer;transition:.15s}
.team:hover{transform:translateY(-2px);box-shadow:0 4px 0 rgba(36,59,83,.08)}
.team.mine{background:#f3fbff;box-shadow:0 0 0 2px rgba(79,195,247,.4)}
.team .full{opacity:.55;cursor:not-allowed}
.team .join{font-size:.66rem;background:#eef5fa;border:none;border-radius:8px;padding:3px 8px;
  color:var(--ink2);font-weight:bold;cursor:pointer;font-family:inherit}
.team h4 span{margin-left:auto;font-size:.66rem;color:var(--ink2);font-weight:400}
.team h4{display:flex;align-items:center;gap:6px}

/* ───────────────────────────── responsive ──────────────────────────────── */
@media (max-width:720px){
  .room-grid{grid-template-columns:1fr}
  .chat-card{grid-column:span 1}
  .menu{grid-template-columns:1fr}
  .mbtn.top{grid-column:span 1}
  .screen{padding:12px}
}
@media (orientation:portrait) and (pointer:coarse){
  .screen.game.active .rotate-hint{display:flex}
}
@media (max-height:460px){
  .tbtn{width:52px;height:52px}
  .tbtn.jump{width:62px;height:62px}
}