*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f7fbff;background:radial-gradient(circle at 20% 0%,#18325f 0%,#0b1220 42%,#05080d 100%);overflow-x:hidden}button,input,select{font:inherit}.hidden{display:none!important}.ambient{position:fixed;border-radius:50%;filter:blur(90px);opacity:.28;pointer-events:none;z-index:-1}.ambient-a{width:380px;height:380px;left:-120px;top:80px;background:#1476ff}.ambient-b{width:420px;height:420px;right:-120px;bottom:40px;background:#7f3cff}.glass{background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.13);box-shadow:0 18px 50px rgba(0,0,0,.28);backdrop-filter:blur(18px)}.eyebrow{margin:0 0 6px;letter-spacing:.18em;font-size:.78rem;font-weight:800;color:#8fc8ff}.btn{border:0;border-radius:14px;padding:13px 20px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.2s transform,.2s box-shadow,.2s opacity}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.28)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#2b9cff,#6b6cff);color:white}.btn-secondary{background:rgba(255,255,255,.1);color:white;border:1px solid rgba(255,255,255,.14)}.btn-danger{background:rgba(255,75,95,.18);color:#ffd9df;border:1px solid rgba(255,75,95,.32)}.full{width:100%}.landing-body,.player-body{display:grid;place-items:center}.landing-shell{width:min(92%,760px);padding:40px 0}.brand-card{border-radius:30px;padding:52px;text-align:center}.brand-orb{width:96px;height:96px;border-radius:28px;margin:0 auto 18px;display:grid;place-items:center;font-size:48px;background:linear-gradient(145deg,#1f6cff,#673cff);box-shadow:0 16px 40px rgba(71,103,255,.32);animation:float 3.2s ease-in-out infinite}.brand-orb.small{width:68px;height:68px;font-size:34px;border-radius:22px}.brand-card h1,.mobile-brand h1{margin:8px 0 10px}.brand-card h1{font-size:clamp(2.2rem,6vw,4.3rem)}.landing-copy{font-size:1.15rem;color:#c6d5e7}.landing-actions{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.admin-shell{width:min(96%,1400px);margin:0 auto;padding:24px 0 44px}.hero{border-radius:24px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}.hero h1{margin:0;font-size:clamp(2rem,4vw,3.4rem)}.hero p:not(.eyebrow){margin:8px 0 0;color:#b9c8da}.qr-card{display:flex;align-items:center;gap:14px;background:rgba(0,0,0,.22);border-radius:18px;padding:10px 14px}.qr-card img{width:108px;height:108px;border-radius:12px;background:#fff}.qr-card strong,.qr-card span{display:block}.qr-card span{font-size:.78rem;color:#9fb1c8;margin-top:5px;max-width:220px;word-break:break-all}.score-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.team-card{border-radius:22px;padding:18px;min-height:210px}.team-blue{box-shadow:inset 0 0 0 1px rgba(45,157,255,.28),0 18px 50px rgba(0,0,0,.22)}.team-red{box-shadow:inset 0 0 0 1px rgba(255,78,98,.28),0 18px 50px rgba(0,0,0,.22)}.team-title{display:flex;justify-content:space-between;gap:12px;font-weight:900;font-size:1.12rem;margin-bottom:12px}.player-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.player-chip,.empty-slot{border-radius:12px;padding:10px 12px;background:rgba(0,0,0,.2);display:flex;align-items:center;justify-content:space-between;gap:8px}.player-chip small{font-size:.7rem;color:#86e5b3}.player-chip.offline{opacity:.52}.player-chip.offline small{color:#f7b0b7}.empty-slot{color:#93a7bf;grid-column:1/-1}.control-card,.question-card,.race-card{border-radius:22px;margin-top:18px;padding:18px}.control-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.control-row label{font-weight:800}.control-row select{background:#0e1724;color:white;border:1px solid rgba(255,255,255,.16);padding:12px 14px;border-radius:12px}.status-banner{margin-top:14px;padding:14px 16px;border-radius:14px;background:rgba(0,0,0,.2);text-align:center;font-weight:800}.question-topline{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.pill,.turn-pill,.timer-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:8px 12px;font-weight:900;font-size:.85rem}.pill{background:rgba(83,142,255,.17);color:#a9d5ff}.turn-pill{background:rgba(255,255,255,.08)}.turn-pill.azul{color:#80c8ff;border:1px solid rgba(53,168,255,.36)}.turn-pill.rojo{color:#ff9aa7;border:1px solid rgba(255,64,85,.36)}.timer-pill{background:rgba(255,255,255,.1);font-size:1.05rem}.timer-pill.danger,.player-timer.danger{animation:pulseDanger .55s infinite;background:rgba(255,57,79,.22);color:#ffdce1}.current-player{text-align:center;margin:16px 0 6px;font-size:1.18rem;color:#c9d9ec}.question-card h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.15;text-align:center;margin:14px auto 24px;max-width:1100px}.answers-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answer-card{display:flex;align-items:center;gap:14px;padding:18px;border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.1);font-size:clamp(1.25rem,2.2vw,1.9rem)}.answer-card span,.mobile-answers button span{width:50px;height:50px;flex:0 0 50px;border-radius:16px;display:grid;place-items:center;font-weight:950;color:#08121f;background:white}.race-header,.lane-head{display:flex;justify-content:space-between;align-items:center;font-weight:900}.race-header{font-size:1.08rem;margin-bottom:14px}.lane{margin-top:14px}.lane-head{margin-bottom:7px}.road{height:92px;position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:repeating-linear-gradient(90deg,#17202b 0,#17202b 62px,#1c2734 62px,#1c2734 124px)}.road:after{content:"";position:absolute;top:45px;left:0;right:0;border-top:4px dashed rgba(255,255,255,.65)}.motokar{position:absolute;left:8px;top:15px;font-size:50px;z-index:2;transition:left .55s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}.finish{position:absolute;right:8px;top:11px;font-size:54px;z-index:2}.modal{position:fixed;inset:0;background:rgba(2,5,10,.82);backdrop-filter:blur(10px);display:grid;place-items:center;padding:20px;z-index:50}.modal-box{width:min(92%,620px);border-radius:30px;padding:34px;text-align:center;animation:modalIn .28s ease both}.modal-box.azul{box-shadow:0 0 80px rgba(40,154,255,.28)}.modal-box.rojo{box-shadow:0 0 80px rgba(255,68,92,.25)}.modal-box.success{box-shadow:0 0 80px rgba(43,218,132,.25)}.modal-box.error{box-shadow:0 0 80px rgba(255,82,98,.25)}.modal-icon{font-size:76px;animation:pop .7s ease}.modal-box h2{font-size:clamp(2rem,5vw,3.4rem);margin:8px 0}.modal-box p:last-child{font-size:1.08rem;color:#c1d0e2}.winner-box{max-height:90vh;overflow:auto}.final-score{font-size:4rem;font-weight:950;margin:12px 0}.winner-list{display:grid;gap:8px}.winner-list div{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.07)}#confeti{pointer-events:none;position:fixed;inset:0;z-index:80}.confetti-piece{position:fixed;top:-60px;animation:fall linear forwards}.player-shell{width:min(94%,560px);padding:24px 0 36px}.mobile-brand{text-align:center;margin-bottom:16px}.mobile-brand .brand-orb{margin-bottom:10px}.mobile-brand h1{font-size:2rem}.mobile-card{border-radius:24px;padding:20px}.mobile-card h2{margin-top:0}.field-label{display:block;font-weight:800;margin:16px 0 8px}.text-input{width:100%;padding:15px 16px;border-radius:14px;background:#0d1622;color:white;border:1px solid rgba(255,255,255,.14);outline:none}.text-input:focus{border-color:#4da8ff;box-shadow:0 0 0 4px rgba(77,168,255,.12)}.team-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.team-choice-btn{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px 10px;color:white;font-weight:900;background:rgba(255,255,255,.06);cursor:pointer}.team-choice-btn.blue.selected{background:rgba(47,156,255,.22);border-color:#49a9ff;box-shadow:0 0 0 3px rgba(73,169,255,.1)}.team-choice-btn.red.selected{background:rgba(255,70,92,.2);border-color:#ff566b;box-shadow:0 0 0 3px rgba(255,86,107,.1)}.form-message{min-height:22px;margin-top:10px;text-align:center;color:#ffb4bd}.identity-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.identity-row h2{margin:2px 0 0}.muted{color:#94a8c0;font-size:.78rem}.my-team{padding:9px 12px;border-radius:999px;font-weight:900}.my-team.azul{background:rgba(53,168,255,.18);color:#83cbff}.my-team.rojo{background:rgba(255,64,85,.16);color:#ff9aa7}.waiting-panel{margin-top:16px;padding:14px;border-radius:14px;background:rgba(0,0,0,.2);text-align:center}.player-question{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}.player-timer{width:88px;height:88px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#203149,#101824);font-size:1.7rem;font-weight:950;box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)}.your-turn{text-align:center;font-size:1.2rem;font-weight:950;margin-bottom:10px}.player-question .pill{display:flex;width:max-content;margin:0 auto}.player-question h2{font-size:1.7rem;line-height:1.2;text-align:center;margin:14px 0 18px}.mobile-answers{display:grid;gap:10px}.mobile-answers button{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.07);color:white;border-radius:16px;padding:13px;cursor:pointer}.mobile-answers button b{font-size:1.08rem}.mobile-answers button:disabled{opacity:.42;cursor:not-allowed}.mini-score{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.mini-score div{padding:12px;border-radius:14px;background:rgba(0,0,0,.2);display:flex;justify-content:space-between}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);width:min(92%,520px);z-index:60;padding:15px 18px;border-radius:16px;background:#111b29;border:1px solid rgba(255,255,255,.13);box-shadow:0 18px 45px rgba(0,0,0,.42);text-align:center;font-weight:900}@keyframes float{50%{transform:translateY(-8px)}}@keyframes modalIn{from{opacity:0;transform:scale(.86) translateY(18px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes pop{0%{transform:scale(.5) rotate(-8deg)}65%{transform:scale(1.12) rotate(3deg)}100%{transform:scale(1)}}@keyframes pulseDanger{50%{transform:scale(1.08);box-shadow:0 0 28px rgba(255,52,75,.25)}}@keyframes fall{to{transform:translateY(115vh) rotate(760deg)}}@media(max-width:850px){.hero{align-items:flex-start;flex-direction:column}.qr-card{width:100%}.score-grid{grid-template-columns:1fr}.answers-grid{grid-template-columns:1fr}.player-list{grid-template-columns:1fr 1fr}.control-row .btn{flex:1}.question-card h2{font-size:2rem}}@media(max-width:560px){.brand-card{padding:34px 20px}.landing-actions{display:grid}.landing-actions .btn{width:100%}.admin-shell{padding:12px 0 28px}.hero,.team-card,.control-card,.question-card,.race-card{border-radius:18px}.qr-card img{width:88px;height:88px}.player-list{grid-template-columns:1fr}.control-row{display:grid;grid-template-columns:1fr 1fr}.control-row label,.control-row select{grid-column:1/-1}.question-card h2{font-size:1.7rem}.answer-card{font-size:1.15rem;padding:14px}.answer-card span{width:44px;height:44px;flex-basis:44px}.road{height:80px}.motokar{font-size:44px;top:14px}.finish{font-size:48px}.team-choice{grid-template-columns:1fr}.modal-box{padding:28px 18px}.modal-icon{font-size:62px}.final-score{font-size:3rem}}

/* =====================================================
   SEGURIDAD ADMIN + QR GRANDE + CIERRE DE SESIÓN
   ===================================================== */

body.modal-abierto {
  overflow: hidden;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.logout-btn {
  white-space: nowrap;
}

.btn-qr {
  background: linear-gradient(135deg, #20c978, #10a95f);
  color: #fff;
}

.btn-qr-small {
  margin-top: 10px;
  padding: 9px 13px;
  border-radius: 11px;
  background: linear-gradient(135deg, #20c978, #10a95f);
  color: #fff;
  font-size: .8rem;
}

.btn-big {
  min-height: 54px;
  padding: 15px 24px;
  font-size: 1rem;
}

.single-action {
  justify-content: center;
}

.landing-note {
  margin-top: 16px;
  color: #91a6bf;
  font-size: .9rem;
}

/* LOGIN ADMIN */
.auth-shell {
  width: min(92%, 620px);
}

.auth-card {
  padding: 42px;
}

.auth-lock {
  width: 92px;
  height: 92px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  font-size: 44px;
  background: linear-gradient(145deg, #1f6cff, #673cff);
  box-shadow: 0 16px 40px rgba(71,103,255,.32);
  animation: float 3.2s ease-in-out infinite;
}

.auth-step {
  margin-top: 22px;
}

.auth-phone {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.2);
  color: #bed2ea;
  font-weight: 800;
}

.otp-input {
  margin-bottom: 12px;
  text-align: center;
  font-size: 2rem;
  letter-spacing: .32em;
  font-weight: 950;
}

.auth-message {
  margin-top: 14px;
  min-height: 24px;
}

.auth-message.success {
  color: #78e6a8;
}

.auth-message.error {
  color: #ff9dad;
}

.auth-back {
  display: inline-block;
  margin-top: 16px;
  color: #9fc5ef;
  text-decoration: none;
  font-weight: 700;
}

/* MODAL QR GRANDE */
.modal-qr {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-qr-overlay {
  position: absolute;
  inset: 0;
  background: rgba(1,5,12,.9);
  backdrop-filter: blur(12px);
}

.modal-qr-contenido {
  position: relative;
  z-index: 2;
  width: min(94vw, 760px);
  max-height: 95vh;
  overflow-y: auto;
  padding: 28px 32px 30px;
  border-radius: 32px;
  text-align: center;
  box-shadow: 0 30px 100px rgba(0,0,0,.58), 0 0 90px rgba(35,145,255,.16);
  animation: modalIn .28s ease both;
}

.cerrar-modal-qr {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: white;
  cursor: pointer;
  font-size: 20px;
  transition: .2s;
}

.cerrar-modal-qr:hover {
  background: rgba(255,80,100,.25);
  transform: rotate(90deg);
}

.qr-big-icon {
  font-size: 50px;
  margin-bottom: 4px;
  animation: float 2.5s ease-in-out infinite;
}

.modal-qr-titulo {
  margin: 7px 0 8px;
  font-size: clamp(2rem, 5vw, 3.4rem);
}

.modal-qr-subtitulo {
  margin: 0 auto 20px;
  color: #c8d7e9;
  font-size: 1.1rem;
}

.texto-azul { color: #58b8ff; }
.texto-rojo { color: #ff6678; }

.qr-grande-marco {
  width: fit-content;
  margin: auto;
  padding: 16px;
  border-radius: 26px;
  background: white;
  box-shadow: 0 20px 55px rgba(0,0,0,.38), 0 0 0 8px rgba(255,255,255,.06);
}

.imagen-qr-grande {
  display: block;
  width: min(58vw, 420px);
  height: min(58vw, 420px);
  object-fit: contain;
  background: white;
}

.modal-qr-link {
  margin-top: 18px;
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 800;
  color: #8fc8ff;
  word-break: break-all;
}

.qr-instruccion {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.2);
  color: #bcd0e7;
  font-size: .95rem;
}

/* PANTALLA BLOQUEADA EN CELULAR */
.session-closed {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3,8,17,.96);
  backdrop-filter: blur(14px);
}

.session-closed-card {
  width: min(92%, 520px);
  padding: 38px 24px;
  border-radius: 30px;
  text-align: center;
  animation: modalIn .3s ease both;
}

.session-closed-icon {
  font-size: 76px;
  margin-bottom: 8px;
}

.session-closed-card h1 {
  margin: 8px 0 12px;
  font-size: clamp(2rem, 8vw, 3rem);
}

.session-closed-card p {
  color: #c1d1e4;
}

.session-closed-note {
  margin-top: 18px;
  font-weight: 800;
  color: #8fc8ff !important;
}

@media (max-width: 850px) {
  .hero-actions {
    width: 100%;
    justify-content: stretch;
  }

  .hero-actions .qr-card {
    flex: 1 1 100%;
  }

  .logout-btn {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .auth-card {
    padding: 30px 18px;
  }

  .otp-input {
    font-size: 1.65rem;
  }

  .modal-qr-contenido {
    padding: 24px 14px 20px;
    border-radius: 24px;
  }

  .qr-grande-marco {
    padding: 10px;
    border-radius: 18px;
  }

  .imagen-qr-grande {
    width: min(78vw, 340px);
    height: min(78vw, 340px);
  }
}


/* Dado Lottie del sorteo inicial */
.modal-lottie {
  width: 190px;
  height: 190px;
  margin: -12px auto 2px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.28));
}

.modal-lottie svg {
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 560px) {
  .modal-lottie {
    width: 150px;
    height: 150px;
  }
}