/* Cuadrilla · interfaz común de las salas (lobby, sala de espera, partida, chat y resultados). */
:root{
  --ink:#0d0b26; --panel:#1b1848; --panel-2:#252163; --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.18);
  --text:#f4f2ff; --muted:#aaa6d6; --ok:#7cf0a8; --bad:#ff6b7a; --amber:#ffb42e; --cyan:#3fd0ff;
  --acc:#3fd0ff; --acc-ink:#04121c;
  --display:"Baloo 2","Bricolage Grotesque","Trebuchet MS",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:20px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{color-scheme:dark}
html,body{margin:0;background:var(--ink);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{padding:14px 14px 86px;overflow-x:hidden;background:radial-gradient(700px 400px at 100% 0,rgba(163,91,255,.18),transparent 70%),radial-gradient(600px 400px at 0 40%,rgba(91,124,255,.14),transparent 70%),var(--ink)}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.01em;margin:0}
h2{font-size:1.15rem;margin-bottom:.7rem}
h3{font-size:1rem;margin-bottom:.4rem}
p{margin:.4rem 0}
a{color:var(--acc)}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.card{background:linear-gradient(180deg,var(--panel),rgba(27,24,72,.7));border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:0 12px 30px rgba(0,0,0,.25)}

/* botones y formularios */
button,.btn{font:inherit;font-weight:700;background:var(--acc);color:var(--acc-ink);border:0;border-radius:14px;padding:.62rem 1.1rem;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);cursor:pointer;line-height:1.2;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.45rem}
button:hover:not(:disabled),.btn:hover{filter:brightness(1.08)}
button:active:not(:disabled){transform:translateY(1px)}
button.ghost,.btn.ghost{background:rgba(255,255,255,.06);box-shadow:none;color:var(--text);border:1px solid var(--line-2)}
button.ghost:hover:not(:disabled){border-color:var(--acc);filter:none}
button.danger{background:transparent;color:var(--bad);border:1px solid #6b2a37}
button.small{padding:.32rem .7rem;font-size:.84rem;border-radius:9px}
button:disabled{opacity:.42;cursor:not-allowed}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
label{display:block;font-weight:600;margin-bottom:.8rem}
label.check{display:flex;gap:.55rem;align-items:flex-start;font-weight:400}
label.check input{margin-top:.25rem;accent-color:var(--acc)}
input[type=text],select{display:block;width:100%;margin-top:.3rem;padding:.65rem .85rem;background:rgba(10,8,32,.7);color:var(--text);border:1px solid var(--line-2);border-radius:14px;font:inherit}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2rem}
.seg{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.35rem}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-block;padding:.42rem .8rem;border:1px solid var(--line-2);border-radius:99px;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--muted)}
.seg input:checked + span{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.seg input:focus-visible + span{outline:2px solid var(--amber);outline-offset:2px}

/* avatares y listas */
.av{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;font-weight:800;color:#06101e;font-size:.85rem;flex:none;position:relative}
.av.sm{width:26px;height:26px;font-size:.72rem}
.av.bot::after{content:"";position:absolute;right:-4px;bottom:-3px;width:9px;height:9px;border-radius:2px;background:var(--muted);border:2px solid var(--panel)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#46507a;margin-right:.35rem;vertical-align:middle}
.dot.on{background:var(--ok)}
ul.rows{list-style:none;margin:0;padding:0}
ul.rows li{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
ul.rows li:last-child{border-bottom:0}
.grow{flex:1;min-width:100px}
.tag{font-size:.74rem;padding:.12rem .55rem;border-radius:99px;background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc);font-weight:700}
.tag.off{background:#262d4b;color:var(--muted)}

/* aviso flotante */
#sala-toast{position:fixed;left:50%;top:14px;transform:translateX(-50%);background:#2b1420;border:1px solid var(--bad);padding:.6rem 1rem;border-radius:12px;z-index:50;max-width:min(92%,520px);box-shadow:0 10px 30px rgba(0,0,0,.45);font-weight:600}
#sala-toast.ok{background:#0f2b22;border-color:var(--ok)}

/* ---------- lobby ---------- */
.lobby{display:grid;grid-template-columns:minmax(260px,.9fr) 1.4fr;gap:14px;align-items:start}
.cover{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);background:
  radial-gradient(120% 80% at 100% 0%,color-mix(in srgb,var(--acc) 22%,transparent) 0,transparent 60%),var(--panel);padding:22px 20px 20px;min-height:100%}
.cover h1{font-size:clamp(2.2rem,6vw,3.4rem);line-height:.95;letter-spacing:-.03em}
.cover .lead{color:var(--muted);max-width:34ch;margin:.7rem 0 1rem}
.cover .art{display:block;width:100%;max-width:320px;margin:10px auto 0;aspect-ratio:1/0.8}
.cover ul{margin:.4rem 0 0;padding-left:1.1rem;color:var(--muted);font-size:.9rem}
.cover ul li{margin:.2rem 0}
.lobby-side{display:grid;gap:14px}
.lobby-forms{display:grid;grid-template-columns:1.25fr 1fr;gap:14px}
.join-row{display:flex;gap:.5rem;align-items:flex-end}
.join-row label{flex:1;margin:0}
.code-in{text-transform:uppercase;letter-spacing:.18em;font-family:var(--display);font-weight:700}
.elsewhere{border-color:var(--amber)}

/* ---------- sala de espera ---------- */
.wait{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;align-items:start}
.wait-head{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.room-code{font-family:var(--display);font-size:2.2rem;font-weight:800;letter-spacing:.14em;color:var(--acc);line-height:1}
.seats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:1rem 0}
.seat{border:1px solid var(--line);background:var(--panel-2);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:.5rem;min-height:104px}
.seat .who{display:flex;align-items:center;gap:.55rem;font-weight:700;min-width:0}
.seat .who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat.empty{border-style:dashed;background:transparent;color:var(--muted);align-items:flex-start;justify-content:space-between}
.seat .acts{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:auto}
.opts-sum{display:flex;gap:.4rem;flex-wrap:wrap;margin:.3rem 0 0}

/* ---------- partida ---------- */
.gbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:12px}
.framed .gbar .title{display:none}
.gbar .title{font-family:var(--display);font-weight:800;font-size:1.25rem;margin-right:.3rem}
.gbar .code{color:var(--muted);font-size:.85rem;margin-right:auto}
.gbar button{padding:.42rem .8rem;font-size:.88rem}

/* ---------- chat flotante (transparente, encima del juego) ---------- */
.cdock{position:fixed;left:0;right:0;bottom:0;z-index:40;pointer-events:none;padding:0 10px calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:stretch;gap:8px}
.cdock>*{pointer-events:auto;width:min(560px,100%)}
.cbar{display:flex;align-items:center;gap:6px;padding:6px;border-radius:99px;background:rgba(14,12,40,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.cbar input{flex:1;min-width:0;margin:0;border:0;background:transparent;padding:.55rem .4rem;border-radius:99px;font-size:16px;color:#fff}
.cbar input::placeholder{color:rgba(230,226,255,.7)}
.cbar input:focus{outline:none;box-shadow:none}
.cbtn{position:relative;flex:none;width:40px;height:40px;padding:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:1.3rem;box-shadow:none}
.cbtn svg{width:21px;height:21px}
.cbtn.on{background:rgba(255,255,255,.24)}
.csend{background:linear-gradient(135deg,#5b7cff,#a35bff)}
.cbadge{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:#ff4f7b;color:#fff;font-size:.7rem;font-weight:800;line-height:19px;text-align:center;border:2px solid #14113a}
.cfloat{display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none!important}
.cpanel{display:flex;flex-direction:column;max-height:min(46vh,380px);border-radius:22px;background:linear-gradient(180deg,rgba(10,8,30,.28),rgba(10,8,30,.55));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.12)}
.chead{display:flex;align-items:center;padding:8px 8px 4px 16px;font:800 .95rem var(--display);text-shadow:0 1px 4px rgba(0,0,0,.8)}
.ctitle{flex:1}
.cx{width:32px;height:32px;padding:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:.9rem;box-shadow:none}
.clog{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding:4px 12px 12px;overscroll-behavior:contain;scrollbar-width:thin}
.cmsg{display:flex;align-items:flex-end;gap:7px;max-width:86%;align-self:flex-start}
.cmsg .cb{padding:.4rem .75rem;border-radius:18px 18px 18px 6px;background:rgba(20,16,56,.72);border:1px solid rgba(255,255,255,.1);overflow-wrap:anywhere;line-height:1.35}
.cmsg .cb b{display:block;font-size:.72rem;color:#c9c3ff;font-weight:800}
.cmsg.mine{align-self:flex-end}
.cmsg.mine .cb{background:linear-gradient(135deg,rgba(63,108,255,.88),rgba(122,75,255,.88));border-color:transparent;border-radius:18px 18px 6px 18px}
.cmsg.big .cb{background:none;border:0;padding:0 .1rem;font-size:2.4rem;line-height:1.05}
.cmsg.big .cb b{font-size:.72rem;line-height:1.4}
.cmsg.fl{animation:cin .35s cubic-bezier(.3,1.4,.5,1);transition:opacity .8s,transform .8s}
.cmsg.fl .cb{background:rgba(14,12,40,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cmsg.fl.mine{align-self:flex-start}
.cmsg.fl.mine .cb{background:rgba(63,108,255,.62)}
.cmsg.fl.big .cb{background:none;backdrop-filter:none;text-shadow:0 4px 12px rgba(0,0,0,.5)}
.cmsg.out{opacity:0;transform:translateY(-8px)}
@keyframes cin{from{opacity:0;transform:translateY(12px) scale(.9)}}
.cemo{padding:8px;border-radius:22px;background:rgba(14,12,40,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14)}
.emo-quick{display:flex;gap:4px;overflow-x:auto;padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1);scrollbar-width:none}
.emo-quick button{flex:none;padding:.25rem .45rem;font-size:1.5rem;background:rgba(255,255,255,.08);border-radius:12px;box-shadow:none;color:#fff}
.emo-quick button.txt{font-size:.85rem;padding:.35rem .7rem}
.emo-tabs{display:flex;gap:2px;margin-bottom:4px}
.emo-tabs button{flex:1;padding:.3rem 0;background:transparent;font-size:1.15rem;border-radius:10px;box-shadow:none;opacity:.6}
.emo-tabs button.on{background:rgba(255,255,255,.12);opacity:1}
.emo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));max-height:190px;overflow-y:auto;overscroll-behavior:contain}
.emo-grid button{padding:.2rem 0;background:transparent;font-size:1.6rem;border-radius:10px;box-shadow:none;line-height:1.3}
.emo-grid button:hover{background:rgba(255,255,255,.1)}

/* resultados */
.modal-bg{position:fixed;inset:0;background:rgba(4,7,16,.72);backdrop-filter:blur(3px);z-index:45;display:grid;place-items:center;padding:16px}
.modal{width:min(440px,100%);background:var(--panel);border:1px solid var(--line-2);border-radius:18px;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal h2{font-size:1.9rem;line-height:1.05;margin-bottom:.3rem}
.podium{list-style:none;margin:1rem 0;padding:0;display:grid;gap:6px}
.podium li{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:11px;background:var(--panel-2);border:1px solid var(--line)}
.podium li.win{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,var(--panel-2))}
.podium .pl{font-family:var(--display);font-weight:800;font-size:1.25rem;width:1.6rem;text-align:center;color:var(--muted)}
.podium li.win .pl{color:var(--acc)}
.podium .sc{font-family:var(--display);font-weight:700}
.modal .acts{display:flex;gap:.5rem;flex-wrap:wrap}
.modal .acts button{flex:1}
.loading{padding:3rem 0;text-align:center;color:var(--muted)}

@media (max-width:820px){
  .lobby,.wait{grid-template-columns:1fr}
  .lobby-forms{grid-template-columns:1fr}
  .cover .art{max-width:230px}
  body{padding:10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.cmsg .cb .crep{margin-left:.45rem;padding:0 .3rem;border:0;background:none;color:rgba(255,255,255,.4);font-size:.72rem;cursor:pointer;vertical-align:middle}
.cmsg .cb .crep:hover{color:#ff8aa0}
.code-field{font:800 1.3rem/1 ui-monospace,Menlo,monospace;letter-spacing:.18em;text-align:center}
.wa{background:#25d366!important;color:#06301a!important;font-weight:800}