/* ═══════════════════════════════════════════════════════════════
   Portal de juegos Novazys · tema de Halloween
   Hoja compartida por las cuatro pantallas para que la experiencia
   sea la misma y no haya que mantener el estilo cuatro veces.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --noche:#0B0714;
  --noche2:#150C22;
  --panel:rgba(26,16,40,.86);
  --panel2:rgba(38,24,56,.72);
  --borde:rgba(255,154,46,.22);
  --borde2:rgba(255,255,255,.09);
  --calabaza:#FF9A2E;
  --calabaza-f:#FFB85C;
  --morado:#9B6BFF;
  --verde:#5BE37E;
  --rojo:#FF5C72;
  --texto:#F3ECFF;
  --texto2:#B9AACE;
  --texto3:#7D6E94;
  --disp:'Creepster',system-ui,sans-serif;
  --tit:'Plus Jakarta Sans',system-ui,sans-serif;
  --eti:'Montserrat',system-ui,sans-serif;
  --r:14px;
  --sombra:0 18px 48px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--noche);color:var(--texto);
  font-family:'Inter',system-ui,sans-serif;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;
}
h1,h2,h3,h4{font-family:var(--tit);margin:0;letter-spacing:-.02em;line-height:1.16}
img{max-width:100%;display:block}
a{color:var(--calabaza)}

/* El fondo va fijo y detrás de todo, con un velo que garantiza contraste
   sin importar qué imagen esté puesta. */
.fondo{position:fixed;inset:0;z-index:-2;background-size:cover;background-position:center;
  background-repeat:no-repeat}
.fondo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,7,20,.72),rgba(11,7,20,.90) 60%,rgba(11,7,20,.96))}

.env{max-width:1060px;margin:0 auto;padding:0 5%}
.env-sm{max-width:520px;margin:0 auto;padding:0 20px}

.eti{font-family:var(--eti);font-size:.8rem;font-weight:700;color:var(--calabaza);
  display:block;margin-bottom:8px;letter-spacing:.03em}

/* ── Barra ── */
.top{border-bottom:1px solid var(--borde2);background:rgba(11,7,20,.72);
  backdrop-filter:blur(8px);position:sticky;top:0;z-index:50}
.top-in{max-width:1060px;margin:0 auto;padding:0 5%;min-height:58px;display:flex;
  align-items:center;justify-content:space-between;gap:12px}
.top-in img{height:24px;opacity:.92}
.top-in .der{display:flex;align-items:center;gap:14px;font-size:.84rem;color:var(--texto2)}
.top-in a{color:var(--texto2);text-decoration:none;font-weight:600;font-size:.84rem}
.top-in a:hover{color:var(--calabaza)}

/* ── Paneles ── */
.panel{background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);
  padding:24px 22px;box-shadow:var(--sombra);margin-bottom:14px;backdrop-filter:blur(6px)}
.panel h2{font-size:1.1rem;font-weight:700;margin-bottom:5px}
.panel .sub{font-size:.87rem;color:var(--texto2);margin-bottom:16px}

/* ── Controles ── */
label.campo{display:block;margin-bottom:14px}
label.campo > span{display:block;font-family:var(--eti);font-size:.78rem;font-weight:700;
  color:var(--texto2);margin-bottom:6px}
input[type=text],input[type=password],input[type=number],select,textarea{
  width:100%;padding:11px 13px;border:1.5px solid var(--borde2);border-radius:10px;
  font-size:.95rem;font-family:inherit;background:rgba(0,0,0,.34);color:var(--texto);
  transition:border-color .18s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--calabaza)}
input::placeholder{color:var(--texto3)}
select option{background:var(--noche2);color:var(--texto)}

.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--tit);font-weight:700;font-size:.93rem;padding:12px 22px;border-radius:11px;
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:all .18s}
.bt-p{background:linear-gradient(135deg,var(--calabaza),#FF7B2E);color:#1A0E00;
  box-shadow:0 8px 22px rgba(255,154,46,.3)}
.bt-p:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 30px rgba(255,154,46,.42)}
.bt-p:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
.bt-s{background:rgba(255,255,255,.06);color:var(--texto);border-color:var(--borde2)}
.bt-s:hover:not(:disabled){border-color:var(--calabaza);color:var(--calabaza)}
.bt-s:disabled{opacity:.4;cursor:not-allowed}
.bt-xs{font-size:.78rem;padding:7px 13px;border-radius:8px}

.aviso{padding:12px 16px;border-radius:10px;font-size:.87rem;line-height:1.55;margin-bottom:14px}
.aviso.err{background:rgba(255,92,114,.13);color:#FFB3BE;border-left:3px solid var(--rojo)}
.aviso.ok{background:rgba(91,227,126,.12);color:#A9F2BC;border-left:3px solid var(--verde)}
.aviso.info{background:rgba(155,107,255,.13);color:#D4C4FF;border-left:3px solid var(--morado)}

/* ── Insignias ── */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--eti);font-size:.73rem;
  font-weight:700;padding:4px 11px;border-radius:99px;background:rgba(255,255,255,.07);
  color:var(--texto2);white-space:nowrap}
.chip.on{background:rgba(91,227,126,.17);color:var(--verde)}
.chip.off{background:rgba(255,92,114,.15);color:var(--rojo)}
.chip.sala{background:rgba(255,154,46,.16);color:var(--calabaza)}

/* ── Rejillas ── */
.rej{display:grid;gap:12px}
.rej-2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.rej-3{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.rej-4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* ── Jugador ── */
.jug{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid var(--borde2);margin-bottom:7px}
.jug .ic{font-size:1.3rem;line-height:1;flex:none}
.jug .nom{flex:1;font-size:.9rem;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}
.jug.turno{border-color:var(--calabaza);background:rgba(255,154,46,.12);
  box-shadow:0 0 0 1px rgba(255,154,46,.25)}
.jug.fuera{opacity:.42}

/* ── Marcador ── */
.kpi b{display:block;font-family:var(--tit);font-size:2rem;font-weight:800;line-height:1;
  color:var(--calabaza)}
.kpi b.txt{font-size:1.1rem;line-height:1.25;overflow-wrap:anywhere}
.kpi span{display:block;font-size:.77rem;color:var(--texto3);margin-top:5px}

/* ── Botón de llamar al administrador ── */
.llamar{position:fixed;right:16px;bottom:16px;z-index:80;
  width:50px;height:50px;border-radius:50%;border:1.5px solid var(--borde);
  background:rgba(38,24,56,.92);color:var(--calabaza);font-size:1.25rem;cursor:pointer;
  box-shadow:var(--sombra);transition:all .2s;display:flex;align-items:center;justify-content:center}
.llamar:hover{transform:scale(1.07);border-color:var(--calabaza)}
.llamar.pedido{background:rgba(255,154,46,.9);color:#1A0E00;animation:pulso 1.6s infinite}
@keyframes pulso{0%,100%{box-shadow:0 0 0 0 rgba(255,154,46,.5)}50%{box-shadow:0 0 0 14px rgba(255,154,46,0)}}

footer{padding:24px 0;border-top:1px solid var(--borde2);margin-top:30px}
.foot{font-size:.76rem;color:var(--texto3);text-align:center}
#verBadge{position:fixed;left:10px;bottom:10px;z-index:900;background:rgba(26,16,40,.9);
  border:1px solid var(--borde2);border-radius:99px;padding:5px 12px;
  font-family:ui-monospace,monospace;font-size:.64rem;color:var(--texto3);opacity:.75}
#verBadge b{color:var(--texto2)}

@media(max-width:560px){
  .panel{padding:20px 17px}
  .llamar{width:46px;height:46px;right:12px;bottom:12px;font-size:1.1rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
/* v77 — botón chico dentro de un aviso (p. ej. "Reintentar") */
.bt-mini{margin-left:8px;padding:4px 12px;border-radius:8px;border:1px solid currentColor;background:transparent;color:inherit;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
.bt-mini:hover{background:rgba(255,255,255,.08)}