*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#07111f;--panel:#fff;--blue:#2563eb;--dark:#1e3a8a;--green:#16a34a;--red:#dc2626;--orange:#f97316;--purple:#7c3aed;--muted:#64748b;--shadow:0 18px 38px rgba(0,0,0,.28)}body{font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at top left,rgba(37,99,235,.35),transparent 32%),radial-gradient(circle at bottom right,rgba(124,58,237,.35),transparent 28%),var(--bg);min-height:100vh;color:#0f172a;-webkit-tap-highlight-color:transparent}#app{width:min(1280px,100%);margin:auto;padding:12px}.screen{display:none;min-height:calc(100vh - 24px);animation:fade .22s}.screen.active{display:block}@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.splash-screen.active{display:grid;place-items:center}.card3d,.panel,.auth-card{background:linear-gradient(160deg,#fff,#eef6ff);border-radius:28px;padding:20px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.7)}.splash-card{width:min(520px,94%);text-align:center}.splash-logo{width:150px;height:150px;margin:0 auto 12px}.auth-card{width:min(560px,95%);margin:34px auto}.topbar{background:linear-gradient(135deg,#0f172a,#1e3a8a);color:#fff;border-radius:24px;padding:14px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;box-shadow:var(--shadow)}input,select,textarea{width:100%;padding:13px;border:2px solid #dbeafe;border-radius:14px;margin:6px 0 12px;font-size:16px}button{border:0;cursor:pointer;font-family:inherit}.btn3d{border-radius:16px;padding:13px 17px;color:#fff;font-weight:900;box-shadow:0 7px 0 rgba(0,0,0,.25),0 15px 24px rgba(0,0,0,.2);transform:translateY(0);transition:.16s;margin:4px}.btn3d:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(0,0,0,.25)}.primary{background:linear-gradient(135deg,var(--blue),var(--dark))}.secondary{background:linear-gradient(135deg,#64748b,#334155)}.danger{background:linear-gradient(135deg,var(--red),#991b1b)}.success{background:linear-gradient(135deg,var(--green),#166534)}.warning{background:linear-gradient(135deg,var(--orange),#c2410c)}.full{grid-column:1/-1}.row{display:flex;gap:8px;align-items:center}.wrap{flex-wrap:wrap}.muted{color:var(--muted)}.check{display:block;margin:8px 0}.check input{width:auto;margin-right:8px}.menu-grid,.stats-grid,.store-grid,.form-grid{display:grid;gap:14px}.menu-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}.stats-grid{grid-template-columns:repeat(4,1fr);margin-bottom:12px}.stat{border-radius:22px;color:#fff;padding:18px;box-shadow:var(--shadow)}.stat span{display:block;opacity:.9}.stat b{font-size:30px}.blue{background:linear-gradient(135deg,var(--blue),var(--dark))}.green{background:linear-gradient(135deg,var(--green),#166534)}.purple{background:linear-gradient(135deg,var(--purple),#4c1d95)}.orange{background:linear-gradient(135deg,var(--orange),#c2410c)}.menu-card{min-height:140px;text-align:left;background:linear-gradient(160deg,#fff,#eff6ff);border-radius:24px;padding:18px;box-shadow:var(--shadow);border-left:8px solid var(--blue);color:#0f172a}.menu-card img{width:54px;height:54px}.menu-card span{font-size:38px;display:block}.menu-card b{display:block;font-size:20px;color:var(--dark)}.champion-banner{margin-bottom:12px}.champion-card{background:linear-gradient(135deg,#facc15,#f97316);color:#fff;border-radius:22px;padding:16px;font-weight:900;box-shadow:var(--shadow)}.game-screen{background:#07111f;border-radius:24px;padding:10px}.game-topbar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}.game-topbar div{background:rgba(255,255,255,.12);color:#fff;border-radius:16px;text-align:center;padding:10px}.game-topbar b{display:block;font-size:12px}.game-topbar span{font-size:22px;font-weight:900}.game-panel{background:linear-gradient(160deg,#fff,#eff6ff);border-radius:24px;padding:14px;box-shadow:var(--shadow)}.anime-message{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center;background:#fff;border-radius:20px;padding:10px;margin-bottom:10px}.anime-message img{width:110px}.anime-message div{font-size:18px;font-weight:900;color:var(--dark)}.question-box{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;border-radius:22px;min-height:100px;display:grid;place-items:center;text-align:center;font-size:32px;font-weight:900;margin-bottom:10px;padding:14px}.keyboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.keyboard-grid button{padding:15px;font-size:22px;border-radius:16px;background:#dbeafe;color:var(--dark);font-weight:900}.options-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:10px 0}.option-btn{background:#eef6ff;color:var(--dark);border-radius:18px;padding:16px;font-size:20px;font-weight:900}.option-btn.wrong-disabled{text-decoration:line-through;opacity:.35}.option-btn.correct-glow{background:#22c55e!important;color:#fff}.hidden{display:none!important}.power-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.power-chip{background:linear-gradient(135deg,var(--purple),var(--blue));color:#fff;border-radius:999px;padding:10px 12px;font-weight:900}.store-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:12px}.store-card,.power-card,.user-card,.ranking-card{background:#fff;border-radius:20px;padding:14px;box-shadow:0 10px 24px rgba(0,0,0,.12);border-left:6px solid var(--blue)}.store-card img{width:58px;height:58px}.ranking-card{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:10px;margin-bottom:10px}.rank-pos{background:linear-gradient(135deg,#facc15,#f97316);color:#fff;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;font-weight:900}.modal{position:fixed;inset:0;background:rgba(0,0,0,.68);display:grid;place-items:center;z-index:9999;padding:18px}.modal-content{background:#fff;border-radius:24px;width:min(760px,100%);max-height:90vh;overflow:auto;padding:20px;position:relative}.modal-close{position:absolute;right:12px;top:8px;background:transparent;font-size:32px}.message-bar{background:#dbeafe;color:#1e3a8a;border-radius:16px;padding:12px;margin:8px 0;font-weight:800}.message-bar.mini{font-size:13px;padding:8px}.status-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px}.online{background:#22c55e}.idle{background:#facc15}.offline{background:#ef4444}.admin-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.admin-tabs button{background:#dbeafe;border-radius:12px;padding:10px;font-weight:800}.qr{background:#fff;padding:12px;border-radius:16px;display:inline-block}.qr canvas{image-rendering:pixelated}.permission{font-size:18px;line-height:1.7}.profile-photo{width:130px;height:130px;border-radius:50%;object-fit:cover;border:5px solid var(--blue);margin:auto}.sound-note{font-size:13px;color:#64748b}.cost-box{background:#fef3c7;color:#92400e;border-radius:16px;padding:12px;font-weight:900}@media(max-width:760px){#app{padding:8px}.stats-grid,.game-topbar{grid-template-columns:repeat(2,1fr)}.form-grid,.menu-grid,.store-grid{grid-template-columns:1fr}.topbar{flex-direction:column;align-items:flex-start}.anime-message{grid-template-columns:1fr;text-align:center}.anime-message img{margin:auto}.question-box{font-size:24px}.options-grid{grid-template-columns:1fr}.btn3d{width:100%;margin:5px 0}.row{flex-direction:column;align-items:stretch}.game-topbar span{font-size:19px}}.admin-user-card{display:grid;grid-template-columns:110px 1fr;gap:16px;background:#fff;border-radius:22px;padding:16px;margin:14px 0;box-shadow:0 10px 24px rgba(0,0,0,.13);border-left:7px solid #1d4ed8}.admin-real-photo{width:100px;height:100px;border-radius:20px;object-fit:cover;background:#e2e8f0;border:3px solid #2563eb}.admin-real-photo.large{width:180px;height:180px}.admin-user-card button{margin:4px}.qr img{border-radius:16px;background:white;padding:8px}.badge{display:inline-block;padding:7px 11px;border-radius:999px;background:#dbeafe;color:#1e3a8a;margin:4px;font-weight:800}pre{white-space:pre-wrap;word-break:break-word;background:#f8fafc;padding:12px;border-radius:14px;max-height:60vh;overflow:auto}@media(max-width:620px){.admin-user-card{grid-template-columns:1fr}.admin-real-photo{margin:auto}.game-topbar{grid-template-columns:repeat(2,1fr)!important}.game-panel{padding:10px}.question-box{font-size:24px!important;padding:16px!important}.power-row{max-height:120px;overflow:auto}}

/* Estado técnico temporal de Firebase. Se ocultará en la versión pública. */
.firebase-status {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 9999;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  background: #64748b;
  box-shadow: 0 5px 18px rgba(15, 23, 42, .22);
  pointer-events: none;
}
.firebase-status[data-status="online"] { background: #15803d; }
.firebase-status[data-status="ready"] { background: #0369a1; }
.firebase-status[data-status="offline"] { background: #b45309; }
.firebase-status[data-status="error"] { background: #b91c1c; }

/* Paso 16: autenticación Firebase */
.google-btn{background:#fff;color:#1f2937;border:1px solid #d1d5db}.google-btn::before{content:"G";font-weight:900;margin-right:.55rem;color:#2563eb}.link-button{background:transparent;border:0;color:#1d4ed8;text-decoration:underline;font-weight:700;padding:.7rem;cursor:pointer}.auth-card .check{display:flex;align-items:flex-start;gap:.55rem;text-align:left;margin:.35rem 0}.auth-card .check input{width:auto;margin-top:.2rem}

/* Módulo administrativo protegido */
.admin-secure-screen{background:linear-gradient(160deg,#0b1020,#16213e 55%,#0f3460);color:#eef4ff;min-height:100vh}.admin-topbar{background:rgba(7,12,27,.94);border-bottom:1px solid rgba(255,255,255,.12)}.admin-shell{max-width:1280px;margin:auto}.admin-tabs{display:flex;gap:10px;overflow:auto;padding:12px 0}.admin-tabs button{border:0;border-radius:14px;padding:12px 17px;font-weight:800;white-space:nowrap;background:#fff;color:#15213b}.admin-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:16px 0}.admin-kpis article,.admin-card,.admin-profile-card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:18px;box-shadow:0 14px 30px rgba(0,0,0,.2)}.admin-kpis span{display:block;opacity:.75}.admin-kpis strong{font-size:2rem}.admin-toolbar{display:flex;gap:10px;margin:12px 0}.admin-toolbar input,.admin-card input,.admin-card textarea{width:100%;padding:13px;border-radius:12px;border:1px solid #cad5ea}.admin-card textarea{min-height:130px;margin:10px 0}.admin-users-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}.admin-user-card{display:flex;gap:14px;background:#fff;color:#17213a;border-radius:20px;padding:16px;box-shadow:0 12px 25px rgba(0,0,0,.2)}.admin-real-photo{width:72px;height:72px;border-radius:50%;object-fit:cover;background:#e8eef8}.admin-real-photo.large{width:120px;height:120px}.admin-profile-card{display:flex;gap:20px;align-items:center;margin:16px 0}.admin-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}.admin-request{background:rgba(255,255,255,.08);padding:14px;border-radius:14px;margin:12px 0}.admin-request pre{white-space:pre-wrap;overflow-wrap:anywhere;background:rgba(0,0,0,.25);padding:10px;border-radius:10px}@media(max-width:650px){.admin-profile-card,.admin-user-card{align-items:flex-start}.admin-profile-card{flex-direction:column}.admin-toolbar{flex-direction:column}}

.game-topbar{grid-template-columns:repeat(4,minmax(110px,1fr))}.game-topbar .primary-clock{background:linear-gradient(135deg,#2563eb,#1e3a8a);transform:scale(1.03)}.game-topbar .primary-clock span{font-size:30px}.power-chip small{display:block;font-size:12px;color:#fde68a;margin-top:3px}.question-box{min-height:130px;font-size:38px}.game-panel{max-width:1100px;margin:auto}.keyboard-grid button{min-height:62px;font-size:25px}@media(max-width:760px){.game-topbar{grid-template-columns:repeat(2,1fr)}.question-box{font-size:29px;min-height:115px}}

.legal-footer{display:flex;justify-content:center;gap:20px;padding:18px}.legal-footer a{color:#bfdbfe;font-weight:700}

/* Etapa 2: poderes, configuración adaptable y estabilidad visual */
.powers-help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}.power-card{display:flex;gap:14px;align-items:center}.power-card img{width:88px;height:88px;object-fit:cover;border-radius:18px;flex:none}.power-chip{display:flex;align-items:center;gap:8px;border-radius:18px;padding:7px 10px;min-height:66px;will-change:auto}.power-chip img{width:52px;height:52px;object-fit:cover;border-radius:13px;flex:none}.power-chip span{display:flex;flex-direction:column;text-align:left}.power-chip small{display:block}.duration-pair{display:grid;grid-template-columns:1fr auto 1fr auto;gap:7px;align-items:center}.duration-pair input{margin:6px 0 12px}.game-panel,.panel{contain:layout style}.screen.active{animation:none}.power-row{min-height:76px;align-items:flex-start}.store-card img{object-fit:cover;border-radius:14px}@media(max-width:620px){.powers-help-grid{grid-template-columns:1fr}.power-chip{width:100%}.duration-pair{grid-template-columns:1fr auto 1fr auto}.game-panel{width:100%;max-width:100%;margin-inline:auto}.keyboard-grid{max-width:560px;margin-inline:auto}}

/* ETAPA 3: visibilidad de poderes y acceso propietario */
.store-card img,.power-card img,.power-chip img{display:block;background:#081426;border:2px solid rgba(255,255,255,.85);box-shadow:0 8px 18px rgba(15,23,42,.28);object-fit:contain!important}
.store-card img{width:96px!important;height:96px!important;margin:0 auto 10px}.power-card img{width:100px!important;height:100px!important}.power-chip img{width:58px!important;height:58px!important}.power-card,.store-card{overflow:hidden}.admin-activation-note{background:#fef3c7;color:#92400e;padding:10px;border-radius:12px}

/* === REDISEÑO VISUAL V9: PORTADA Y MENÚ 3D === */
.splash-screen.active{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:calc(100svh - 24px);
  padding:clamp(10px,2vw,24px);
}
.splash-card{
  width:min(980px,100%);
  padding:clamp(14px,2.4vw,28px);
  border-radius:34px;
  background:linear-gradient(145deg,rgba(4,14,38,.98),rgba(13,35,79,.96));
  border:2px solid rgba(59,130,246,.55);
  box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.16);
  overflow:hidden;
  position:relative;
}
.splash-card::before{
  content:"";
  position:absolute;
  inset:-35%;
  background:conic-gradient(from 120deg,transparent,rgba(37,99,235,.18),transparent,rgba(249,115,22,.14),transparent);
  animation:splashGlow 9s linear infinite;
  pointer-events:none;
}
@keyframes splashGlow{to{transform:rotate(360deg)}}
.splash-logo{
  position:relative;
  width:min(430px,70vw);
  height:auto;
  max-height:58svh;
  object-fit:contain;
  margin:0 auto 14px;
  display:block;
  border-radius:24px;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.45));
}
.splash-card h1,.splash-card p{position:relative;color:#fff}
.splash-card h1{font-size:clamp(24px,4vw,46px);line-height:1.05;text-shadow:0 4px 16px rgba(0,0,0,.5)}
.splash-card p{font-size:clamp(14px,2vw,20px);margin:8px 0 18px;color:#cfe3ff}
.start-hero-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-width:min(360px,88vw);
  padding:18px 34px;
  border-radius:22px;
  color:#fff;
  font-size:clamp(20px,3vw,30px);
  font-weight:1000;
  letter-spacing:.8px;
  text-transform:uppercase;
  background:linear-gradient(180deg,#ffca28 0%,#ff8a00 48%,#e24a00 100%);
  border:3px solid #ffe88c;
  box-shadow:0 10px 0 #8f2f00,0 18px 30px rgba(255,115,0,.38),inset 0 3px 0 rgba(255,255,255,.55);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.start-hero-btn::before{content:"⚡";font-size:1.15em;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.start-hero-btn:hover{filter:brightness(1.08);transform:translateY(-2px) scale(1.015)}
.start-hero-btn:active{transform:translateY(7px);box-shadow:0 3px 0 #8f2f00,0 8px 14px rgba(255,115,0,.3)}

.menu-grid{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  align-items:stretch;
}
.menu-card.menu-image-card{
  position:relative;
  min-height:0;
  aspect-ratio:1/1;
  padding:0;
  overflow:hidden;
  border:2px solid rgba(96,165,250,.55);
  border-radius:26px;
  background:#071426;
  box-shadow:0 14px 0 rgba(4,24,63,.85),0 24px 42px rgba(0,0,0,.34);
  transform:translateY(0);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.menu-card.menu-image-card:hover{transform:translateY(-5px) scale(1.015);filter:brightness(1.06)}
.menu-card.menu-image-card:active{transform:translateY(8px) scale(.99);box-shadow:0 5px 0 rgba(4,24,63,.9),0 10px 18px rgba(0,0,0,.28)}
.menu-card.menu-image-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:23px;
}
.menu-card.menu-image-card .menu-fallback-label{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  padding:9px 12px;
  border-radius:14px;
  color:#fff;
  font-weight:900;
  font-size:16px;
  background:linear-gradient(180deg,rgba(3,12,30,.18),rgba(3,12,30,.82));
  opacity:0;
  transition:opacity .2s ease;
}
.menu-card.menu-image-card img[style*="display: none"] + .menu-fallback-label{opacity:1}

@media (min-width:900px){
  .menu-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:760px){
  .splash-card{border-radius:24px;padding:12px}
  .splash-logo{width:min(360px,86vw);max-height:56svh}
  .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .menu-card.menu-image-card{border-radius:20px;box-shadow:0 9px 0 rgba(4,24,63,.85),0 16px 25px rgba(0,0,0,.3)}
}
@media (max-width:430px){
  .menu-grid{grid-template-columns:1fr 1fr}
  .start-hero-btn{min-width:92%;padding:16px 18px}
}


/* === ETAPA 6 / V10: PORTADA INMERSIVA, BOTONES 3D COMPLETOS Y CARGA OPTIMIZADA === */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.splash-screen.active{padding:0;min-height:100svh}
.splash-card{width:min(940px,100%);min-height:min(960px,100svh);padding:clamp(8px,1.5vw,18px);display:flex;flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(circle at 50% 35%,rgba(20,75,180,.42),rgba(2,8,24,.98) 68%);border-radius:clamp(0px,3vw,34px)}
.splash-logo{width:min(690px,92vw);height:auto;max-height:78svh;margin:0 auto 14px;border-radius:26px;object-fit:contain;filter:drop-shadow(0 26px 36px rgba(0,0,0,.56))}
.start-hero-btn{min-width:min(430px,90vw);padding:21px 38px;font-size:clamp(22px,3vw,34px);border-radius:26px;box-shadow:0 12px 0 #6f2300,0 24px 42px rgba(255,112,0,.48),inset 0 4px 0 rgba(255,255,255,.65);animation:startPulse 2.2s ease-in-out infinite}
@keyframes startPulse{0%,100%{filter:brightness(1);transform:translateY(0) scale(1)}50%{filter:brightness(1.12);transform:translateY(-3px) scale(1.025)}}
.start-hero-btn:active{animation:none}
.dashboard-topbar{align-items:center}
.brand-block{min-width:220px}.dashboard-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.top-image-btn{width:92px;height:72px;padding:0;border-radius:18px;overflow:hidden;background:#071426;border:2px solid rgba(96,165,250,.65);box-shadow:0 8px 0 rgba(3,15,42,.92),0 15px 26px rgba(0,0,0,.34);transition:.16s transform,.16s filter,.16s box-shadow}
.top-image-btn.admin-top-image{width:126px}
.top-image-btn img{width:100%;height:100%;display:block;object-fit:cover}
.top-image-btn:hover{filter:brightness(1.1);transform:translateY(-2px)}
.top-image-btn:active{transform:translateY(6px);box-shadow:0 2px 0 rgba(3,15,42,.92),0 7px 12px rgba(0,0,0,.28)}
.top-image-btn.is-busy{opacity:.62;filter:grayscale(.35);cursor:wait}
.logout-hero-btn{height:72px;min-width:112px;padding:0 20px;border-radius:18px;color:#fff;font-size:18px;font-weight:1000;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(180deg,#ff4b4b,#d4122f 58%,#8c071b);border:2px solid #ff9da9;box-shadow:0 8px 0 #650513,0 15px 26px rgba(172,10,37,.38),inset 0 3px 0 rgba(255,255,255,.36);transition:.16s transform,.16s filter,.16s box-shadow}
.logout-hero-btn .logout-icon{font-size:25px;transform:rotate(180deg)}
.logout-hero-btn:hover{filter:brightness(1.1);transform:translateY(-2px)}
.logout-hero-btn:active{transform:translateY(6px);box-shadow:0 2px 0 #650513,0 7px 12px rgba(172,10,37,.3)}
.menu-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.menu-card.menu-image-card{content-visibility:auto;contain-intrinsic-size:260px 260px}
@media(min-width:1100px){.menu-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:760px){.dashboard-topbar{align-items:stretch}.brand-block{text-align:center}.dashboard-actions{width:100%;display:grid;grid-template-columns:1.25fr .85fr 1fr;gap:9px}.top-image-btn,.top-image-btn.admin-top-image,.logout-hero-btn{width:100%;min-width:0;height:68px}.logout-hero-btn{padding:0 10px}.splash-logo{width:min(620px,94vw);max-height:76svh}.splash-card{min-height:100svh;border-radius:0}.menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.dashboard-actions{grid-template-columns:1fr 1fr 1fr}.top-image-btn,.top-image-btn.admin-top-image,.logout-hero-btn{height:60px}.logout-hero-btn{font-size:15px}.logout-icon{display:none}.menu-grid{gap:10px}.splash-logo{max-height:72svh}.start-hero-btn{min-width:92%;padding:18px 16px}}


/* ===== ETAPA 8 · INTERFAZ FUTURISTA 2026 ===== */
:root{
  --neo-bg:#030b19;--neo-panel:#08162b;--neo-panel2:#0c2141;--neo-line:#17d9ff;
  --neo-purple:#9b5cff;--neo-pink:#ff3dd8;--neo-green:#23ef8f;--neo-gold:#ffd34d;
  --neo-text:#f4fbff;--neo-muted:#8fa8c5;--neo-danger:#ff4f65;
}
*{box-sizing:border-box}
body.futuristic-app{background:
 radial-gradient(circle at 15% 0%,rgba(24,105,255,.26),transparent 34%),
 radial-gradient(circle at 95% 100%,rgba(151,49,255,.18),transparent 32%),
 linear-gradient(145deg,#020713 0%,#041126 55%,#070b1d 100%);color:var(--neo-text);min-height:100vh}
body.futuristic-app:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:linear-gradient(rgba(60,220,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(60,220,255,.1) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,black,transparent 80%)}
.screen{background:transparent!important;min-height:100dvh;padding:clamp(10px,2vw,24px)}
.screen.active{animation:neoScreenIn .28s ease-out}
@keyframes neoScreenIn{from{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:none}}
.card3d,.panel,.auth-card,.splash-card,.admin-card,.admin-profile-card,.admin-user-card,.result-card{background:linear-gradient(145deg,rgba(13,34,65,.96),rgba(5,16,34,.97))!important;border:1px solid rgba(40,218,255,.34)!important;box-shadow:0 18px 50px rgba(0,0,0,.4),inset 0 0 24px rgba(30,171,255,.06),0 0 22px rgba(29,200,255,.08)!important;color:var(--neo-text)!important;backdrop-filter:blur(14px)}
.topbar,.dashboard-topbar,.game-topbar{background:linear-gradient(110deg,rgba(8,29,61,.98),rgba(20,32,76,.96))!important;border:1px solid rgba(45,218,255,.4);box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 22px rgba(27,190,255,.08);border-radius:22px}
h1,h2,h3,strong,b{color:var(--neo-text)}
p,small,label{color:var(--neo-muted)}
input,select,textarea{background:rgba(2,12,29,.9)!important;color:var(--neo-text)!important;border:1px solid rgba(57,210,255,.28)!important;border-radius:13px!important;box-shadow:inset 0 0 15px rgba(22,167,255,.05)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--neo-line)!important;box-shadow:0 0 0 3px rgba(23,217,255,.12),0 0 18px rgba(23,217,255,.14)}
.btn3d,.start-hero-btn,.logout-hero-btn{border:0!important;color:#fff!important;text-transform:uppercase;font-weight:900;letter-spacing:.04em;transform:translateY(0);transition:.18s ease;box-shadow:0 7px 0 rgba(0,0,0,.32),0 12px 24px rgba(0,0,0,.25)!important}
.btn3d:hover,.start-hero-btn:hover,.logout-hero-btn:hover{transform:translateY(-2px);filter:brightness(1.12)}
.btn3d:active,.start-hero-btn:active,.logout-hero-btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.34)!important}
.btn3d.primary,.start-hero-btn{background:linear-gradient(135deg,#175dff,#8f32ff 65%,#ef3bdf)!important;border:1px solid #57e9ff!important;box-shadow:0 7px 0 #192887,0 0 26px rgba(107,73,255,.48)!important}
.btn3d.success{background:linear-gradient(135deg,#00ad6f,#17e99a)!important}.btn3d.warning{background:linear-gradient(135deg,#f49b10,#ffcf3c)!important;color:#172030!important}.btn3d.danger,.logout-hero-btn{background:linear-gradient(135deg,#b8173c,#ff4c62)!important}
.splash-screen{display:grid;place-items:center;padding:12px}.splash-card{width:min(860px,96vw)!important;min-height:min(86dvh,850px);display:flex!important;flex-direction:column;align-items:center;justify-content:center;padding:clamp(14px,3vw,32px)!important;overflow:hidden;position:relative}
.splash-card:before{content:"";position:absolute;inset:-30%;background:conic-gradient(from 90deg,transparent,rgba(41,229,255,.12),transparent 32%,rgba(255,55,226,.12),transparent 65%);animation:neoSpin 12s linear infinite}@keyframes neoSpin{to{transform:rotate(360deg)}}
.splash-logo{position:relative;width:min(610px,88vw)!important;max-height:66dvh!important;object-fit:contain!important;border-radius:30px!important;filter:drop-shadow(0 0 28px rgba(39,202,255,.32))}
.start-hero-btn{position:relative;font-size:clamp(1rem,2vw,1.35rem)!important;padding:17px 34px!important;border-radius:18px!important;margin-top:20px;min-width:min(340px,80vw)}
.stats-grid{gap:12px!important}.stat{background:linear-gradient(145deg,rgba(11,34,70,.96),rgba(8,19,42,.97))!important;border:1px solid rgba(55,220,255,.28)!important;border-radius:18px!important;position:relative;overflow:hidden}.stat:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent,rgba(255,255,255,.06),transparent);transform:translateX(-100%);animation:statSweep 5s infinite}@keyframes statSweep{50%,100%{transform:translateX(100%)}}
.stat.blue{box-shadow:inset 4px 0 #2d74ff}.stat.green{box-shadow:inset 4px 0 #22e996}.stat.purple{box-shadow:inset 4px 0 #a44cff}.stat.orange{box-shadow:inset 4px 0 #ff9d2e}
.dashboard-mini-nav{display:flex;justify-content:center;gap:8px;margin:14px auto 4px;position:sticky;top:8px;z-index:8;width:max-content;max-width:96%;padding:7px;background:rgba(3,12,28,.78);border:1px solid rgba(39,205,255,.25);border-radius:18px;backdrop-filter:blur(14px)}
.dashboard-mini-nav button{background:transparent;border:0;color:#b9d8f4;display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:12px;font-weight:800}.dashboard-mini-nav button:hover{background:rgba(30,188,255,.12);color:white}
.menu-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important;gap:16px!important;padding:16px 0 30px}.menu-image-card{height:clamp(160px,19vw,235px)!important;border-radius:22px!important;overflow:hidden!important;background:linear-gradient(145deg,#0d274f,#08152d)!important;border:1px solid rgba(69,222,255,.38)!important;box-shadow:0 12px 25px rgba(0,0,0,.32),0 0 18px rgba(25,185,255,.08)!important}.menu-image-card:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,5,18,.72),transparent 45%);pointer-events:none}.menu-image-card img{width:100%;height:100%;object-fit:cover;transition:.28s ease}.menu-image-card:hover img{transform:scale(1.055)}.menu-fallback-label{z-index:3;color:#fff!important;text-shadow:0 2px 8px #000;font-size:1.05rem!important;bottom:12px!important}
.game-screen .game-panel{max-width:940px;margin:auto}.game-topbar{display:grid!important;grid-template-columns:repeat(8,minmax(80px,1fr))!important;gap:7px!important;padding:9px!important}.game-topbar>div{background:rgba(3,15,35,.72);border:1px solid rgba(47,204,255,.2);border-radius:13px;padding:7px;text-align:center}.primary-clock{box-shadow:0 0 18px rgba(37,215,255,.16)}.question-box{font-size:clamp(2.2rem,7vw,5.2rem)!important;background:linear-gradient(145deg,rgba(9,30,61,.98),rgba(3,14,31,.98))!important;border:1px solid rgba(63,225,255,.45)!important;box-shadow:0 0 35px rgba(26,188,255,.1)!important;color:#fff!important;text-shadow:0 0 16px rgba(95,221,255,.25)}
.keyboard-grid button{background:linear-gradient(145deg,#122d58,#091b39)!important;border:1px solid rgba(65,218,255,.34)!important;color:#fff!important;border-radius:14px!important;box-shadow:0 5px 0 #031026!important}.keyboard-grid button:active{transform:translateY(4px);box-shadow:0 1px 0 #031026!important}
.store-grid,.powers-grid,.rewards-grid,.friends-grid,.ranking-list{gap:14px!important}.store-card,.power-card,.reward-card,.friend-card,.ranking-row{background:linear-gradient(145deg,rgba(10,31,61,.96),rgba(5,16,34,.97))!important;border:1px solid rgba(45,215,255,.25)!important;border-radius:17px!important;color:var(--neo-text)!important}
/* Administración futurista */
.secure-admin-screen{padding:10px!important}.secure-admin-shell{display:grid!important;grid-template-columns:230px 1fr;gap:14px;min-height:calc(100dvh - 20px);max-width:1600px;margin:auto}.secure-admin-nav{position:sticky;top:10px;height:calc(100dvh - 20px);background:linear-gradient(180deg,#0d1b40,#07142e)!important;border:1px solid rgba(155,92,255,.38)!important;border-radius:22px!important;padding:18px!important;box-shadow:0 18px 44px rgba(0,0,0,.4)}.secure-admin-nav h2{font-size:1.15rem;margin-bottom:20px}.secure-admin-nav button{width:100%;text-align:left;margin:5px 0;background:transparent!important;border:1px solid transparent!important;box-shadow:none!important;padding:11px 12px!important;border-radius:11px!important;text-transform:none!important}.secure-admin-nav button:hover,.secure-admin-nav button.active{background:linear-gradient(90deg,rgba(128,65,255,.27),rgba(26,190,255,.12))!important;border-color:rgba(143,91,255,.42)!important}.secure-admin-main{min-width:0}.secure-admin-header{background:linear-gradient(110deg,#0f2244,#0b1532)!important;border:1px solid rgba(56,210,255,.25)!important;border-radius:20px!important;padding:14px 18px!important;margin-bottom:12px}.admin-kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important;gap:12px!important}.admin-kpis article{background:linear-gradient(145deg,#102956,#09172f)!important;border:1px solid rgba(55,218,255,.25)!important;border-radius:17px!important;padding:17px!important;box-shadow:inset 4px 0 var(--neo-purple),0 10px 24px rgba(0,0,0,.25)!important}.admin-kpis strong{font-size:clamp(1.5rem,3vw,2.25rem)!important;color:var(--neo-gold)!important}.admin-dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}.admin-chart-card{background:linear-gradient(145deg,rgba(12,31,62,.98),rgba(5,14,31,.98));border:1px solid rgba(55,214,255,.22);border-radius:18px;padding:16px;min-height:250px;overflow:hidden}.admin-chart-card.wide{grid-column:1/-1}.chart-bars{height:160px;display:flex;align-items:end;gap:10px;padding:16px 8px 4px;border-left:1px solid #28425e;border-bottom:1px solid #28425e}.chart-bars span{flex:1;min-width:18px;border-radius:8px 8px 2px 2px;background:linear-gradient(to top,#1f62ff,#24e7ff);box-shadow:0 0 18px rgba(42,211,255,.18);position:relative}.chart-bars span:after{content:attr(data-label);position:absolute;bottom:-25px;left:50%;transform:translateX(-50%);font-size:.72rem;color:#8fa8c5}.chart-donut{width:165px;height:165px;border-radius:50%;margin:10px auto;background:conic-gradient(#2f75ff 0 38%,#9b55ff 38% 64%,#ffb52c 64% 82%,#25e690 82%);position:relative;box-shadow:0 0 28px rgba(70,100,255,.2)}.chart-donut:after{content:"";position:absolute;inset:34px;border-radius:50%;background:#07172e}.chart-line{height:170px;width:100%;filter:drop-shadow(0 0 8px rgba(39,209,255,.35))}.heatmap{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-top:15px}.heatmap i{aspect-ratio:1;border-radius:4px;background:rgba(143,71,255,var(--heat,.3));box-shadow:0 0 8px rgba(149,75,255,.12)}.admin-top-list{display:grid;gap:7px}.admin-top-list div{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;background:rgba(4,16,36,.72);padding:9px;border-radius:11px;border:1px solid rgba(55,212,255,.12)}
@media(max-width:900px){.secure-admin-shell{grid-template-columns:1fr}.secure-admin-nav{position:relative;top:0;height:auto;display:flex;overflow:auto;gap:6px}.secure-admin-nav h2{min-width:max-content;margin:10px}.secure-admin-nav button{min-width:max-content}.admin-dashboard-grid{grid-template-columns:1fr}.game-topbar{grid-template-columns:repeat(4,1fr)!important}}
@media(max-width:600px){.screen{padding:7px}.menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}.menu-image-card{height:145px!important}.dashboard-mini-nav span{display:none}.game-topbar{grid-template-columns:repeat(2,1fr)!important}.admin-kpis{grid-template-columns:repeat(2,1fr)!important}.splash-card{min-height:90dvh}}
/* Compatibilidad con la estructura real del panel administrativo */
.admin-secure-screen{padding:10px!important}
.admin-secure-screen>.admin-topbar{max-width:1600px;margin:0 auto 12px}
.admin-secure-screen>.admin-shell{display:grid!important;grid-template-columns:220px minmax(0,1fr)!important;gap:14px!important;max-width:1600px!important;margin:auto!important;align-items:start!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
.admin-secure-screen .admin-tabs{position:sticky;top:10px;display:flex!important;flex-direction:column!important;gap:6px!important;background:linear-gradient(180deg,#0d1b40,#07142e)!important;border:1px solid rgba(155,92,255,.38)!important;border-radius:20px!important;padding:14px!important;min-height:72dvh}
.admin-secure-screen .admin-tabs button{width:100%;text-align:left;background:transparent!important;border:1px solid transparent!important;color:#b9d8f4!important;padding:12px!important;border-radius:11px!important;font-weight:800!important;box-shadow:none!important}
.admin-secure-screen .admin-tabs button:hover,.admin-secure-screen .admin-tabs button:focus{background:linear-gradient(90deg,rgba(128,65,255,.28),rgba(26,190,255,.12))!important;border-color:rgba(143,91,255,.45)!important;color:white!important}
#secureAdminContent{min-width:0}
@media(max-width:900px){.admin-secure-screen>.admin-shell{grid-template-columns:1fr!important}.admin-secure-screen .admin-tabs{position:relative;top:auto;min-height:0;flex-direction:row!important;overflow:auto}.admin-secure-screen .admin-tabs button{min-width:max-content}}

/* ETAPA 9: portada y acceso corregidos */
.splash-card{position:relative;overflow:hidden}
.splash-brand-title{font-weight:1000;font-size:clamp(1.7rem,4vw,3.25rem);line-height:1.02;text-align:center;color:#fff;text-shadow:0 0 10px #22d3ee,0 0 26px #7c3aed;margin:.55rem auto .9rem;letter-spacing:-.03em}
.splash-brand-title span{display:block;color:#facc15;text-shadow:0 0 12px #f97316,0 0 28px #eab308;font-size:.72em;margin-top:.15em}
.start-hero-btn{cursor:pointer;touch-action:manipulation;position:relative;z-index:5}
@media(max-width:700px){.splash-brand-title{font-size:clamp(1.45rem,7vw,2.25rem)}.brand-block h1{font-size:clamp(1.1rem,5vw,1.65rem)}}

/* === ETAPA 12 / V16: ENTRADA TÁCTIL GARANTIZADA === */
#splashScreen,#splashCard,#splashArtwork,#startChallengeButton{touch-action:manipulation;-webkit-user-select:none;user-select:none}
#splashCard{position:relative;cursor:pointer;isolation:isolate}
#splashCard::before,#splashCard::after{pointer-events:none!important}
#splashArtwork{position:relative;z-index:2;cursor:pointer;pointer-events:auto!important}
.splash-brand-title{position:relative;z-index:3;pointer-events:none}
#startChallengeButton{position:relative!important;z-index:2147483646!important;pointer-events:auto!important;cursor:pointer!important}
#startChallengeButton::before,#startChallengeButton::after{pointer-events:none!important}
#loginScreen.active{display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
@media (hover:none) and (pointer:coarse){#splashArtwork{min-height:44px}#startChallengeButton{min-height:64px}}


/* ETAPA 13: contraste, navegación y administración robusta */
.ranking-card,.ranking-row{
  background:linear-gradient(135deg,rgba(8,28,57,.98),rgba(12,42,78,.98))!important;
  color:#f4fbff!important;border:1px solid rgba(52,211,255,.42)!important;
  box-shadow:0 10px 25px rgba(0,0,0,.3),inset 0 0 22px rgba(25,155,255,.08)!important;
}
.ranking-card b,.ranking-card div,.ranking-card small,.ranking-row b,.ranking-row span{color:#f4fbff!important;opacity:1!important}
.ranking-card> b:last-child{color:#ffe66b!important;font-size:1.08rem;text-shadow:0 0 10px rgba(255,214,74,.45)}
.ranking-card small{display:block;color:#a9dfff!important;margin-top:4px}
#weeklyTournamentBox .champion-card{color:#101b35!important;text-shadow:none!important}
#weeklyTournamentBox .champion-card h3,#weeklyTournamentBox .champion-card p{color:#101b35!important;opacity:1!important}
#weeklyTournamentBox+.row{margin-top:16px}
#tournamentList,.ranking-list{color:#f4fbff}
.topbar .btn3d.secondary{background:linear-gradient(145deg,#55718f,#213b59)!important;border:1px solid rgba(157,220,255,.4);box-shadow:0 6px 0 #13253b,0 0 18px rgba(36,181,255,.2)}
#firebaseStatus,.firebase-status{position:fixed!important;right:14px!important;bottom:14px!important;z-index:1500!important;pointer-events:none!important;opacity:.82!important;font-size:12px!important;padding:8px 12px!important}
.admin-loading,.admin-error-card{min-height:280px;display:grid;place-items:center;text-align:center;padding:28px;border-radius:22px;background:linear-gradient(145deg,rgba(7,25,53,.98),rgba(14,42,80,.98));border:1px solid rgba(49,210,255,.35);color:#edfaff}
.admin-loading span{width:54px;height:54px;border:5px solid rgba(255,255,255,.15);border-top-color:#29dcff;border-radius:50%;animation:adminSpin .8s linear infinite}
@keyframes adminSpin{to{transform:rotate(360deg)}}
.admin-error-card h3{color:#ffcf66}.admin-error-card p{color:#e8f6ff;max-width:650px}
@media(min-width:900px){#rankingScreen .panel,#tournamentsScreen .panel{max-width:1100px;margin:0 auto}.ranking-card{min-height:76px;padding:16px 20px!important}}

/* ETAPA 14: legibilidad, estadísticas, configuración y administración */
.cyan{background:linear-gradient(135deg,#0891b2,#164e63)!important}.magenta{background:linear-gradient(135deg,#db2777,#831843)!important}.gold{background:linear-gradient(135deg,#d97706,#78350f)!important}.teal{background:linear-gradient(135deg,#0d9488,#134e4a)!important}
.player-stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.player-stats-grid .stat{min-height:108px;display:flex;flex-direction:column;justify-content:center}.player-stats-grid .stat b{font-size:clamp(22px,3vw,32px)}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.settings-card,.admin-card{background:linear-gradient(145deg,rgba(9,31,64,.98),rgba(5,18,40,.98))!important;color:#eef7ff!important;border:1px solid rgba(33,207,255,.35);border-radius:20px;padding:18px}.settings-card h3,.admin-card h3{color:#fff!important;margin-bottom:14px}.settings-card label,.admin-card label{color:#cfe8ff!important}.setting-row{display:flex!important;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}.setting-row input{width:24px!important;height:24px!important;margin:0!important}.settings-version{color:#7dd3fc;margin-top:14px}
.admin-power-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}.admin-power-grid article{background:linear-gradient(145deg,#102b54,#07172f);border:1px solid rgba(66,220,255,.35);border-radius:16px;padding:12px;text-align:center;color:#fff;min-height:132px;display:grid;place-items:center}.admin-power-grid img{width:64px;height:64px;object-fit:contain}.admin-power-grid span{font-weight:800;text-transform:capitalize;color:#dbeafe}.admin-power-grid b{color:#facc15;font-size:18px}.reset-user-btn{background:linear-gradient(135deg,#8b5cf6,#ec4899)!important;color:#fff}.finance-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}.finance-total{border-color:#22c55e!important;box-shadow:0 0 25px rgba(34,197,94,.2)}
.admin-tabs button,.topbar .btn3d.secondary{background:linear-gradient(145deg,#24466f,#102540)!important;color:#fff!important;border:1px solid rgba(83,218,255,.35)!important}.admin-tabs button:hover{box-shadow:0 0 18px rgba(39,211,255,.3)}
.admin-profile-card,.admin-user-card{background:linear-gradient(145deg,#0d274d,#06172f)!important;color:#eef7ff!important;border:1px solid rgba(33,207,255,.32)!important}.admin-profile-card p,.admin-user-card p{color:#cfe8ff!important}pre{background:#07172f!important;color:#e8f6ff!important;border:1px solid rgba(33,207,255,.25)!important}
.splash-logo{object-fit:cover;object-position:center top}
@media(max-width:850px){.player-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.finance-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-power-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.admin-power-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* === ETAPA 15 / V19: LOGIN FUTURISTA + RACHA, FRASES Y CELEBRACIÓN === */
.auth-screen-modern{min-height:calc(100dvh - 56px);display:none;place-items:center;padding:clamp(14px,3vw,38px)!important;overflow:hidden;position:relative}
.auth-screen-modern.active{display:grid!important}
.auth-screen-modern:before{content:"";position:absolute;inset:-25%;background:radial-gradient(circle at 15% 20%,rgba(38,105,255,.28),transparent 28%),radial-gradient(circle at 85% 80%,rgba(170,42,255,.24),transparent 30%),linear-gradient(120deg,transparent 45%,rgba(35,214,255,.05) 50%,transparent 55%);animation:authBgMove 10s linear infinite;pointer-events:none}
@keyframes authBgMove{50%{transform:translate3d(2%,-2%,0) scale(1.04)}}
.auth-stage{width:min(1120px,96vw);display:grid;grid-template-columns:minmax(320px,.9fr) minmax(380px,1fr);align-items:stretch;border:1px solid rgba(70,220,255,.36);border-radius:30px;overflow:hidden;background:linear-gradient(145deg,rgba(4,16,38,.96),rgba(8,26,57,.94));box-shadow:0 30px 80px rgba(0,0,0,.52),0 0 42px rgba(40,129,255,.17);position:relative;z-index:2}
.auth-visual{position:relative;min-height:590px;padding:48px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(150deg,rgba(17,57,125,.9),rgba(33,12,77,.92));overflow:hidden}
.auth-visual:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 44px,rgba(255,255,255,.025) 45px),repeating-linear-gradient(0deg,transparent 0 44px,rgba(255,255,255,.02) 45px);pointer-events:none}
.auth-orb{position:absolute;border-radius:50%;filter:blur(2px);animation:authFloat 5s ease-in-out infinite}
.auth-orb-a{width:250px;height:250px;top:-55px;left:-45px;background:radial-gradient(circle at 35% 35%,#44e9ff,#2e55ff 45%,transparent 70%);box-shadow:0 0 70px #165dff}
.auth-orb-b{width:190px;height:190px;right:-42px;bottom:120px;background:radial-gradient(circle at 35% 35%,#ff56ee,#7c2dff 50%,transparent 72%);box-shadow:0 0 64px #a21caf;animation-delay:-2.5s}
@keyframes authFloat{50%{transform:translateY(-18px) rotate(8deg)}}
.auth-math-symbols{position:absolute;inset:45px 28px auto;letter-spacing:22px;font-size:clamp(22px,3vw,42px);font-weight:1000;color:rgba(255,255,255,.15);transform:rotate(-8deg);white-space:nowrap}
.auth-brand-mark{position:absolute;top:112px;left:50%;transform:translateX(-50%);font-size:180px;font-weight:1000;line-height:1;color:#ffcf27;text-shadow:0 8px 0 #e24a16,0 0 24px #ff9b00,0 0 60px #7c3aed;animation:brandPulse 2.4s ease-in-out infinite}
@keyframes brandPulse{50%{transform:translateX(-50%) scale(1.06);filter:brightness(1.15)}}
.auth-visual h1{position:relative;z-index:2;font-size:clamp(34px,5vw,62px);line-height:.92;margin:0;text-transform:uppercase;font-weight:1000;text-shadow:0 0 16px #31d8ff}
.auth-visual h1 span{color:#ffcf27;text-shadow:0 0 14px #ff7b00}
.auth-visual p{position:relative;z-index:2;color:#cbeaff;font-size:18px;max-width:420px;margin:18px 0 0}
.auth-card-modern{margin:0!important;border-radius:0!important;box-shadow:none!important;border:0!important;min-height:590px;padding:clamp(28px,5vw,62px)!important;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(145deg,rgba(6,22,48,.98),rgba(9,31,64,.98))!important}
.auth-badge{align-self:flex-start;padding:8px 13px;border-radius:999px;border:1px solid rgba(69,217,255,.45);background:rgba(23,105,181,.22);color:#8eeaff;font-size:12px;font-weight:900;letter-spacing:.08em;margin-bottom:20px}
.auth-card-modern h2{font-size:clamp(30px,4vw,48px);margin:0 0 6px;color:#fff;text-shadow:0 0 20px rgba(51,211,255,.28)}
.auth-subtitle{color:#9fc3df;margin:0 0 24px;font-size:16px}
.auth-card-modern input{height:60px!important;margin:9px 0!important;border-radius:15px!important;border:1px solid rgba(80,211,255,.32)!important;background:rgba(2,13,32,.82)!important;color:#fff!important;font-size:17px!important;padding:0 18px!important;box-shadow:inset 0 0 18px rgba(16,116,210,.06)}
.auth-card-modern input:focus{border-color:#3ddcff!important;box-shadow:0 0 0 3px rgba(61,220,255,.12),0 0 24px rgba(50,144,255,.18)!important}
.auth-card-modern .check{margin:14px 0 20px;color:#c7dcf1;font-size:15px}
.auth-actions{display:grid;grid-template-columns:.8fr 1.2fr;gap:12px}
.auth-enter-btn,.google-login-btn{min-height:58px!important;border-radius:15px!important;font-size:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important}
.auth-enter-btn{background:linear-gradient(135deg,#1f79ff,#a92cff)!important;box-shadow:0 7px 0 #193c9b,0 0 24px rgba(116,66,255,.5)!important}
.google-login-btn{background:#fff!important;color:#172033!important;border:1px solid #d7e1ee!important;box-shadow:0 7px 0 #b9c5d4,0 0 22px rgba(255,255,255,.16)!important;text-transform:none!important}
.google-login-btn img{width:25px;height:25px;display:block;flex:0 0 25px}
.google-login-btn:hover{filter:brightness(1.04);transform:translateY(-2px)}
.auth-secondary-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}.auth-secondary-actions .secondary{min-height:50px}.auth-secondary-actions .link-button{color:#67c7ff!important;font-weight:800!important}
.auth-safe-note{margin-top:24px;padding:13px 15px;border-radius:13px;background:rgba(16,92,134,.18);border:1px solid rgba(68,210,255,.18);color:#9fcbe4;font-size:13px;text-align:center}
.streak-fire{position:fixed;top:88px;left:50%;transform:translateX(-50%);z-index:1900;display:flex;align-items:center;gap:10px;padding:10px 22px;border-radius:999px;background:linear-gradient(135deg,#6d1b00,#ff6a00,#ffd000);color:#fff;border:2px solid #ffe36c;box-shadow:0 0 28px #ff7b00,0 0 65px rgba(255,61,0,.5);font-size:20px;font-weight:1000;animation:fireBounce .62s ease-in-out infinite alternate;pointer-events:none}
.streak-fire.hidden{display:none!important}.streak-fire .fire-emoji{font-size:34px;filter:drop-shadow(0 0 8px #fff)}
.fire-level-2{transform:translateX(-50%) scale(1.08);box-shadow:0 0 34px #ff7b00,0 0 80px #ff2f00}.fire-level-3{transform:translateX(-50%) scale(1.14);background:linear-gradient(135deg,#920000,#ff3900,#ffe500)}.fire-level-4{transform:translateX(-50%) scale(1.2);background:linear-gradient(135deg,#4d00a8,#ff1744,#ffdf00);box-shadow:0 0 45px #ff1744,0 0 100px #7c3aed}
@keyframes fireBounce{to{margin-top:-5px;filter:brightness(1.14)}}
.answer-feedback{position:fixed;left:50%;top:50%;z-index:2000;max-width:min(700px,88vw);padding:18px 30px;border-radius:20px;font-size:clamp(20px,3vw,34px);font-weight:1000;text-align:center;opacity:0;transform:translate(-50%,-44%) scale(.72);pointer-events:none;transition:opacity .18s,transform .22s;letter-spacing:-.02em}
.answer-feedback.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.feedback-correct{color:#fff;background:linear-gradient(135deg,rgba(0,132,91,.97),rgba(19,211,120,.97));border:2px solid #91ffd0;box-shadow:0 0 38px rgba(16,255,150,.55)}
.feedback-wrong{color:#fff;background:linear-gradient(135deg,rgba(153,20,53,.97),rgba(255,59,48,.97));border:2px solid #ffb0b0;box-shadow:0 0 38px rgba(255,42,71,.5)}
.confetti-layer{position:fixed;inset:0;z-index:1950;overflow:hidden;pointer-events:none}.confetti-layer i{position:absolute;left:var(--x);top:-8vh;font-style:normal;font-size:clamp(17px,2vw,32px);animation:confettiFall var(--d) cubic-bezier(.16,.69,.34,1) var(--delay) forwards}
@keyframes confettiFall{to{transform:translateY(112vh) rotate(var(--r));opacity:.9}}
.victory-celebration{text-align:center;padding:20px;border-radius:22px;margin-bottom:18px;background:linear-gradient(135deg,rgba(99,35,210,.35),rgba(0,173,216,.25));border:1px solid rgba(109,230,255,.4);animation:victoryPop .55s cubic-bezier(.2,1.5,.4,1)}.victory-celebration.hidden{display:none}.victory-crown{font-size:72px;animation:crownDance .8s ease-in-out infinite alternate}.victory-celebration h2{font-size:clamp(30px,5vw,52px);margin:4px 0;color:#ffe463;text-shadow:0 0 20px #ff7d00}.victory-celebration p{color:#d9efff;font-size:18px}
@keyframes victoryPop{from{opacity:0;transform:scale(.6)}}@keyframes crownDance{to{transform:rotate(8deg) translateY(-5px)}}
@media(max-width:760px){.auth-stage{grid-template-columns:1fr}.auth-visual{min-height:215px;padding:24px;justify-content:flex-end}.auth-brand-mark{font-size:100px;top:34px}.auth-math-symbols{font-size:20px;letter-spacing:12px;top:18px}.auth-visual h1{font-size:32px}.auth-visual p{display:none}.auth-card-modern{min-height:auto;padding:28px 22px 34px!important}.auth-actions{grid-template-columns:1fr}.google-login-btn{order:-1}.streak-fire{top:70px;font-size:16px;padding:8px 15px}.streak-fire .fire-emoji{font-size:27px}}
@media(prefers-reduced-motion:reduce){.auth-screen-modern:before,.auth-orb,.auth-brand-mark,.streak-fire,.victory-crown,.confetti-layer i{animation:none!important}.answer-feedback{transition:none}}

/* ===== Ranking futurista con podio 3D — Etapa 16 ===== */
#rankingScreen .panel{
  background:linear-gradient(150deg,rgba(5,18,42,.97),rgba(9,23,54,.96))!important;
  border:1px solid rgba(57,213,255,.32)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.42),inset 0 0 36px rgba(39,93,255,.08)!important;
  overflow:hidden;
}
#rankingTopic{
  background:rgba(2,13,34,.92)!important;
  color:#f4fbff!important;
  border:1px solid rgba(67,218,255,.38)!important;
  box-shadow:inset 0 0 18px rgba(21,151,255,.08),0 0 18px rgba(29,137,255,.08)!important;
}
.ranking-podium{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.22fr) minmax(0,1fr);
  align-items:end;
  gap:18px;
  padding:42px 18px 30px;
  margin-top:16px;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 28%,rgba(255,214,67,.20),transparent 27%),
    radial-gradient(circle at 18% 55%,rgba(61,196,255,.14),transparent 32%),
    linear-gradient(145deg,rgba(9,29,66,.95),rgba(3,13,32,.97));
  border:1px solid rgba(60,206,255,.25);
  position:relative;
  isolation:isolate;
}
.ranking-podium::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(55,180,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(55,180,255,.04) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent);
  z-index:-1;
}
.podium-slot{
  position:relative;
  text-align:center;
  color:#f5fbff;
  border-radius:22px 22px 14px 14px;
  padding:22px 12px 16px;
  min-height:280px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  background:linear-gradient(180deg,rgba(18,55,103,.82),rgba(5,18,42,.95));
  border:1px solid rgba(93,212,255,.28);
  box-shadow:0 20px 38px rgba(0,0,0,.32),inset 0 0 24px rgba(42,154,255,.08);
}
.podium-1{
  min-height:350px;
  transform:translateY(-18px);
  border-color:rgba(255,216,66,.68);
  box-shadow:0 25px 55px rgba(0,0,0,.40),0 0 34px rgba(255,191,30,.25),inset 0 0 35px rgba(255,196,39,.09);
}
.podium-2{border-color:rgba(150,219,255,.48)}
.podium-3{border-color:rgba(255,151,77,.48)}
.podium-place-badge{
  position:absolute;
  top:12px;
  left:50%;
  translate:-50% 0;
  width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:1.35rem;
  font-weight:1000;
  color:#081426;
  background:linear-gradient(145deg,#fff4a9,#ffb618);
  box-shadow:0 0 24px rgba(255,205,48,.55),inset 0 2px 4px rgba(255,255,255,.8);
  z-index:4;
}
.podium-2 .podium-place-badge{background:linear-gradient(145deg,#eefbff,#8fc9ed);box-shadow:0 0 20px rgba(150,220,255,.45)}
.podium-3 .podium-place-badge{background:linear-gradient(145deg,#ffd2a0,#e78031);box-shadow:0 0 20px rgba(255,145,61,.4)}
.ranking-cube-wrap{
  width:116px;
  height:116px;
  perspective:700px;
  margin:34px auto 20px;
  filter:drop-shadow(0 0 18px rgba(68,202,255,.34));
}
.podium-1 .ranking-cube-wrap{width:148px;height:148px;filter:drop-shadow(0 0 24px rgba(255,209,47,.46))}
.ranking-cube{
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  animation:rankingCubeSpin 8s linear infinite;
}
.podium-1 .ranking-cube{animation-duration:6.3s}
.ranking-cube:hover{animation-play-state:paused}
.cube-face{
  position:absolute;
  inset:0;
  overflow:hidden;
  border:3px solid rgba(91,218,255,.7);
  background:linear-gradient(145deg,rgba(19,73,132,.96),rgba(2,15,37,.98));
  box-shadow:inset 0 0 22px rgba(54,198,255,.25);
  backface-visibility:hidden;
}
.podium-1 .cube-face{border-color:rgba(255,217,56,.82);box-shadow:inset 0 0 25px rgba(255,202,42,.22)}
.cube-face img{width:100%;height:100%;object-fit:cover;display:block}
.ranking-cube-wrap{--cube-depth:58px}
.podium-1 .ranking-cube-wrap{--cube-depth:74px}
.cube-front{transform:rotateY(0deg) translateZ(var(--cube-depth))}
.cube-back{transform:rotateY(180deg) translateZ(var(--cube-depth))}
.cube-right{transform:rotateY(90deg) translateZ(var(--cube-depth))}
.cube-left{transform:rotateY(-90deg) translateZ(var(--cube-depth))}
.cube-top{transform:rotateX(90deg) translateZ(var(--cube-depth))}
.cube-bottom{transform:rotateX(-90deg) translateZ(var(--cube-depth))}
@keyframes rankingCubeSpin{
  0%{transform:rotateX(-10deg) rotateY(0deg)}
  50%{transform:rotateX(10deg) rotateY(180deg)}
  100%{transform:rotateX(-10deg) rotateY(360deg)}
}
.podium-slot h3{font-size:1.15rem;margin:2px 0 4px;color:#fff;text-shadow:0 0 14px rgba(72,204,255,.34)}
.podium-1 h3{font-size:1.45rem;color:#fff3a1;text-shadow:0 0 18px rgba(255,213,66,.38)}
.podium-slot p{font-size:.82rem;color:#a8dfff!important;min-height:34px;margin:0 0 8px}
.podium-slot strong{font-size:1.2rem;color:#ffe866;text-shadow:0 0 13px rgba(255,212,58,.38)}
.podium-1 strong{font-size:1.55rem}
.podium-empty{opacity:.55;justify-content:center;min-height:240px;border-style:dashed}
.ranking-rest{margin-top:18px;display:grid;gap:11px}
.ranking-future-row{
  display:grid;
  grid-template-columns:48px 60px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:13px 18px;
  border-radius:18px;
  color:#f5fbff;
  background:linear-gradient(110deg,rgba(13,49,91,.94),rgba(5,20,48,.97));
  border:1px solid rgba(57,204,255,.25);
  box-shadow:0 10px 26px rgba(0,0,0,.22),inset 0 0 16px rgba(42,154,255,.05);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.ranking-future-row:hover{transform:translateY(-2px);border-color:rgba(91,221,255,.58);box-shadow:0 14px 30px rgba(0,0,0,.28),0 0 18px rgba(35,170,255,.12)}
.ranking-number{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-weight:1000;
  background:linear-gradient(145deg,#243e67,#10233f);border:1px solid rgba(106,210,255,.25);color:#d8f5ff;
}
.ranking-avatar{width:54px;height:54px;border-radius:16px;object-fit:cover;border:2px solid rgba(88,216,255,.55);box-shadow:0 0 14px rgba(40,188,255,.2)}
.ranking-player-info{min-width:0}.ranking-player-info b{display:block;color:#fff!important;font-size:1rem}.ranking-player-info small{display:block;color:#a9ddff!important;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ranking-score{text-align:right}.ranking-score strong{display:block;color:#ffe767;font-size:1.2rem;text-shadow:0 0 12px rgba(255,209,48,.35)}.ranking-score small{color:#9fdcff!important}
.ranking-only-podium,.ranking-empty-state{text-align:center;color:#b9e6ff;padding:24px;border:1px dashed rgba(85,211,255,.28);border-radius:18px;background:rgba(4,18,42,.55)}
.ranking-empty-state span{font-size:3rem;display:block;margin-bottom:8px}.ranking-empty-state h3{color:#fff;margin-bottom:6px}
@media(max-width:760px){
  .ranking-podium{grid-template-columns:1fr 1.12fr 1fr;gap:7px;padding:36px 6px 18px}
  .podium-slot{min-height:230px;padding:16px 5px 12px}.podium-1{min-height:280px;transform:translateY(-10px)}
  .ranking-cube-wrap{width:74px;height:74px;--cube-depth:37px}.podium-1 .ranking-cube-wrap{width:92px;height:92px;--cube-depth:46px}
  .podium-place-badge{width:38px;height:38px;font-size:1.05rem}.podium-slot h3{font-size:.82rem}.podium-1 h3{font-size:1rem}.podium-slot p{font-size:.67rem}.podium-slot strong{font-size:.9rem}.podium-1 strong{font-size:1.08rem}
  .ranking-future-row{grid-template-columns:42px 48px minmax(0,1fr) auto;padding:11px 10px;gap:9px}.ranking-avatar{width:44px;height:44px;border-radius:13px}.ranking-score strong{font-size:1rem}
}
@media(prefers-reduced-motion:reduce){.ranking-cube{animation:none;transform:rotateX(-7deg) rotateY(22deg)}}

/* ===== SISTEMA PROFESIONAL DE TORNEOS V21 ===== */
.tpro-hero{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;padding:24px;border:1px solid #18d5ff55;border-radius:22px;background:linear-gradient(135deg,#071833,#12072d);box-shadow:0 0 30px #00d9ff18 inset;margin-bottom:20px}.tpro-kicker{color:#62edff;font-weight:900;letter-spacing:.12em}.tpro-hero h3{font-size:clamp(1.4rem,3vw,2.4rem);margin:.3rem 0}.tpro-path{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-content:center}.tpro-path b{font-size:2rem;color:#ffd74b;text-shadow:0 0 18px #ffad00}.tpro-path span{align-self:center;color:#dbeafe}.tpro-events-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}.tpro-event-card{padding:20px;border-radius:20px;background:linear-gradient(145deg,#0a1d39,#101232);border:1px solid #26d9ff44;box-shadow:0 10px 28px #0008}.tpro-event-card.live{border-color:#2cff88;box-shadow:0 0 24px #2cff8833}.tpro-event-card.completed{border-color:#ffc928}.tpro-badge,.status-chip{display:inline-flex;padding:6px 10px;border-radius:999px;background:#4d1fc9;color:white;font-size:.75rem;font-weight:800}.status-chip.success{background:#0c8d53}.tpro-meta{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0;color:#c8d9f6}.tpro-rules-mini,.player-champion-hall{margin-top:22px;padding:20px;border:1px solid #754dff55;border-radius:20px;background:#09172d}.player-throne{display:flex;align-items:center;gap:18px;padding:16px;background:linear-gradient(135deg,#4a2500,#1d1038);border:1px solid #ffd43b;border-radius:18px}.player-throne img{width:90px;height:90px;object-fit:cover;border-radius:50%;border:4px solid #ffd43b}.player-champion-grid,.champion-hall-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:15px}.player-champion-grid article,.champion-hall-grid article{padding:12px;text-align:center;border-radius:16px;background:#0e2447;border:1px solid #2799ff55}.player-champion-grid img,.champion-hall-grid img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid #44dcff}.tpro-modal ol{line-height:1.8}.tpro-rule-check{display:flex;gap:10px;align-items:flex-start;margin:16px 0}.tpro-bracket{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;overflow:auto}.tpro-bracket section,.admin-live-bracket section{padding:12px;border-radius:16px;background:#07172e;border:1px solid #2bdcff44}.tpro-match,.admin-live-bracket article{display:grid;gap:6px;padding:10px;margin:8px 0;border-radius:12px;background:#0d2850}.tpro-match b,.admin-live-bracket b{color:#ffcf40}.tournament-code-modal{text-align:center}.numeric-tournament-code{font-size:3rem;font-weight:1000;color:#ffd43b;letter-spacing:.18em;text-shadow:0 0 20px #ff9d00}.tournament-admin-list{display:grid;gap:16px}.tournament-admin-event header{display:flex;justify-content:space-between;gap:15px}.admin-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.admin-form-grid textarea{grid-column:1/-1}.tournament-live-admin{display:grid;gap:16px}.live-dual-devices{display:grid;grid-template-columns:1fr 1fr;gap:16px}.device-preview{min-height:270px;padding:18px;border-radius:20px;background:linear-gradient(160deg,#061326,#0b2650);border:2px solid #12d9ff55;box-shadow:0 0 30px #008cff22}.device-preview>img{width:76px;height:76px;object-fit:cover;border-radius:50%;border:3px solid #32e5ff}.device-preview strong{display:block;color:#ffd43b;font-size:1.3rem;margin:8px 0}.live-progress-map{height:34px;position:relative;border-radius:999px;background:#031022;border:1px solid #28d9ff55;margin:15px 0;overflow:visible}.live-progress-map i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#1eea82,#ffd83d)}.live-progress-map img{position:absolute!important;top:50%;transform:translate(-50%,-50%);width:42px!important;height:42px!important;border-radius:50%;z-index:3}.admin-live-bracket{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}.champion-throne-admin{text-align:center;padding:30px;border-radius:24px;background:radial-gradient(circle,#6b3a00,#170628 70%);border:2px solid #ffd43b;box-shadow:0 0 40px #ffba0055}.champion-throne-admin img{width:130px;height:130px;border-radius:50%;object-fit:cover;border:6px solid #ffd43b}.champion-banner{margin-top:12px;padding:12px;border-radius:12px;background:#745400;color:#fff3ac;font-weight:900}
@media(max-width:760px){.tpro-hero,.live-dual-devices{grid-template-columns:1fr}.admin-form-grid{grid-template-columns:1fr}.admin-form-grid textarea{grid-column:auto}.tpro-path{grid-template-columns:auto 1fr}.numeric-tournament-code{font-size:2rem}}

/* ETAPA 18: ranking justo y experiencia infinita */
.ranking-fair-note,.instruction-card{background:linear-gradient(135deg,rgba(8,26,57,.96),rgba(43,18,82,.94));border:1px solid rgba(56,189,248,.38);border-radius:18px;padding:16px 18px;margin:0 0 18px;color:#eaf6ff;line-height:1.55;box-shadow:0 12px 35px rgba(0,0,0,.28)}
.ranking-fair-note b,.instruction-card h3{color:#67e8f9}.instruction-card h4{color:#fbbf24;margin-bottom:6px}.instruction-card ol{padding-left:22px}.instruction-card li{margin:7px 0}
.xp-result-card{margin-top:16px;padding:16px;border-radius:18px;background:linear-gradient(135deg,rgba(76,29,149,.88),rgba(3,105,161,.82));border:1px solid rgba(167,139,250,.55);color:white}.xp-result-card h3{margin:0 0 8px;color:#fde68a}.xp-breakdown{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:7px;margin-top:10px}.xp-breakdown span{display:flex;justify-content:space-between;gap:12px;background:rgba(2,6,23,.44);border-radius:10px;padding:8px 10px}.xp-breakdown b{color:#86efac}

/* ETAPA 19 — distribución estable del juego: 10% HUD, 40% pregunta, 10% poderes, 40% teclado */
#gameScreen.game-screen{height:100dvh;min-height:100dvh;padding:clamp(4px,1vh,10px)!important;overflow:hidden;background:radial-gradient(circle at 50% -10%,rgba(32,116,255,.2),transparent 38%),#030d1e}
#gameScreen.active{display:block!important}
.game-layout{height:calc(100dvh - clamp(8px,2vh,20px));max-width:1280px;margin:0 auto;display:grid;grid-template-rows:minmax(74px,10fr) minmax(230px,40fr) minmax(68px,10fr) minmax(245px,40fr);gap:clamp(4px,.7vh,8px);overflow:hidden}
.game-hud-zone,.game-question-zone,.game-powers-zone,.game-keyboard-zone{min-height:0;position:relative;border:1px solid rgba(38,205,255,.2);border-radius:18px;background:linear-gradient(145deg,rgba(7,25,55,.96),rgba(2,11,26,.98));box-shadow:inset 0 0 28px rgba(12,107,205,.08),0 8px 24px rgba(0,0,0,.24)}
.game-hud-zone{display:grid;grid-template-columns:minmax(0,3fr) minmax(220px,1.2fr);gap:7px;padding:6px}
.game-hud-zone .game-topbar{display:grid!important;grid-template-columns:repeat(8,minmax(54px,1fr))!important;gap:5px!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;min-width:0}
.game-hud-zone .game-topbar>div{padding:5px 3px!important;min-width:0;border-radius:11px!important;display:flex;flex-direction:column;justify-content:center}
.game-hud-zone .game-topbar b{font-size:clamp(8px,.85vw,11px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-hud-zone .game-topbar span{font-size:clamp(13px,1.7vw,23px)!important;line-height:1.05}
.game-feedback-slot{min-width:0;display:grid;place-items:center;overflow:hidden;border-radius:13px;background:linear-gradient(120deg,rgba(80,25,130,.25),rgba(3,151,202,.15));border:1px solid rgba(208,82,255,.25)}
.game-feedback-slot .answer-feedback{position:relative!important;inset:auto!important;left:auto!important;top:auto!important;z-index:2;max-width:100%;width:100%;padding:6px 10px!important;border-radius:11px!important;font-size:clamp(12px,1.3vw,19px)!important;line-height:1.08;opacity:0;transform:translateY(-8px) scale(.96)!important;white-space:normal;overflow-wrap:anywhere}
.game-feedback-slot .answer-feedback.show{opacity:1;transform:none!important}
.game-feedback-slot .streak-fire{position:absolute!important;top:auto!important;left:8px!important;bottom:4px!important;transform:none!important;z-index:3;padding:3px 9px!important;font-size:clamp(10px,1vw,14px)!important;animation:fireBounce .62s ease-in-out infinite alternate}
.game-feedback-slot .streak-fire .fire-emoji{font-size:clamp(15px,1.6vw,24px)!important}
.game-feedback-slot .message-bar{margin:0!important;padding:5px 8px!important;font-size:12px;max-height:100%;overflow:auto}
.game-question-zone{padding:clamp(7px,1.2vh,14px);display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;align-items:center;overflow:hidden}
.game-question-zone .anime-message.compact{position:absolute;left:10px;bottom:8px;z-index:3;display:flex;gap:6px;width:auto;max-width:min(310px,38%);padding:5px 8px;margin:0!important;border-radius:13px;background:rgba(2,13,31,.78);border:1px solid rgba(47,215,255,.24);backdrop-filter:blur(8px);pointer-events:none}
.game-question-zone .anime-message.compact img{width:38px;height:38px;object-fit:contain;margin:0}
.game-question-zone .anime-message.compact div{font-size:clamp(10px,1vw,14px);line-height:1.1;color:#dff8ff}
.game-question-zone .question-box{grid-row:2;min-height:0!important;height:100%;width:100%;margin:0!important;padding:clamp(8px,2vh,22px)!important;font-size:clamp(2.35rem,8.3vw,7rem)!important;line-height:1;overflow:hidden;word-break:break-word}
.game-question-zone #answerInput{grid-row:3;width:min(760px,82%);justify-self:center;margin:5px auto 0!important;padding:clamp(7px,1vh,12px)!important;min-height:42px;text-align:center;font-size:clamp(20px,3vw,34px);font-weight:900;color:#fff;background:rgba(1,10,25,.88);border-color:rgba(50,212,255,.42)}
.game-question-zone .options-grid{grid-row:4;width:min(900px,100%);justify-self:center;margin:5px 0 0!important;gap:6px;max-height:38%;overflow:auto}
.game-question-zone .option-btn{padding:clamp(7px,1vh,12px);font-size:clamp(16px,2vw,24px)}
.game-powers-zone{display:flex;align-items:center;padding:5px 48px 5px 7px;overflow:hidden}
.game-powers-zone .power-row{display:flex;flex-wrap:nowrap;align-items:stretch;gap:6px;margin:0!important;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:thin}
.game-powers-zone .power-chip{flex:0 0 clamp(118px,14vw,180px);height:100%;min-height:54px;padding:4px 7px;border-radius:13px;display:grid;grid-template-columns:42px 1fr;align-items:center;gap:5px;scroll-snap-align:start;font-size:clamp(10px,1vw,13px);white-space:normal;text-align:left}
.game-powers-zone .power-chip img{width:40px;height:40px;border-radius:10px;object-fit:cover}
.game-powers-zone .power-chip small{font-size:9px!important;line-height:1.05}
.game-mini-action{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;color:#fff;font-weight:1000;font-size:19px;background:linear-gradient(135deg,#6838ff,#08a7e8);box-shadow:0 0 18px rgba(90,84,255,.5)}
.game-keyboard-zone{padding:clamp(6px,1vh,11px);display:grid;grid-template-columns:minmax(0,1fr) clamp(110px,16vw,200px);gap:clamp(6px,1vw,12px);overflow:hidden}
.game-keyboard-zone .keyboard-grid{height:100%;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:clamp(5px,.8vh,9px)}
.game-keyboard-zone .keyboard-grid.hidden{display:none!important}
.game-keyboard-zone .keyboard-grid button{min-height:0!important;height:100%;padding:0!important;font-size:clamp(22px,4.2vh,38px)!important;border-radius:clamp(10px,1.5vh,17px);background:linear-gradient(155deg,#eaf7ff,#b8dcff);box-shadow:inset 0 1px 0 #fff,0 5px 0 #557ca8,0 8px 15px rgba(0,0,0,.3);transition:transform .1s,box-shadow .1s}
.game-keyboard-zone .keyboard-grid button:active{transform:translateY(4px);box-shadow:inset 0 1px 0 #fff,0 1px 0 #557ca8,0 3px 8px rgba(0,0,0,.3)}
.game-keyboard-zone .quick-actions{display:grid;grid-template-rows:repeat(3,1fr);gap:clamp(6px,1vh,10px);min-height:0}
.game-keyboard-zone .quick-actions .btn3d{width:100%;height:100%;min-height:0;margin:0;padding:5px;font-size:clamp(11px,1.25vw,16px)}
@media(max-width:760px){
 #gameScreen.game-screen{padding:3px!important}
 .game-layout{height:calc(100dvh - 6px);grid-template-rows:minmax(82px,10fr) minmax(210px,40fr) minmax(62px,10fr) minmax(240px,40fr);gap:3px}
 .game-hud-zone{grid-template-columns:1fr;grid-template-rows:1fr 34px;padding:3px;gap:3px}
 .game-hud-zone .game-topbar{grid-template-columns:repeat(4,1fr)!important;gap:3px!important}
 .game-hud-zone .game-topbar>div{padding:2px!important;border-radius:7px!important}
 .game-hud-zone .game-topbar b{font-size:7px}.game-hud-zone .game-topbar span{font-size:13px!important}
 .game-feedback-slot .streak-fire{left:auto!important;right:4px!important;bottom:2px!important}
 .game-feedback-slot .answer-feedback{font-size:11px!important;padding:3px 6px!important}
 .game-question-zone{padding:5px}.game-question-zone .question-box{font-size:clamp(2.2rem,12vw,5rem)!important}
 .game-question-zone .anime-message.compact{display:none}
 .game-question-zone #answerInput{width:94%;min-height:36px;font-size:22px;padding:5px!important}
 .game-question-zone .options-grid{grid-template-columns:repeat(2,1fr);max-height:44%}
 .game-powers-zone{padding:3px 38px 3px 4px}.game-powers-zone .power-chip{flex-basis:105px;grid-template-columns:31px 1fr;padding:2px 4px}.game-powers-zone .power-chip img{width:29px;height:29px}.game-mini-action{right:4px;width:29px;height:29px}
 .game-keyboard-zone{grid-template-columns:minmax(0,1fr) 82px;padding:4px;gap:4px}.game-keyboard-zone .keyboard-grid{gap:4px}.game-keyboard-zone .keyboard-grid button{font-size:clamp(19px,4vh,30px)!important;border-radius:9px}.game-keyboard-zone .quick-actions{gap:4px}.game-keyboard-zone .quick-actions .btn3d{font-size:9px;padding:2px;border-radius:9px}
}
@media(max-height:700px) and (orientation:landscape){
 .game-layout{grid-template-rows:minmax(60px,10fr) minmax(160px,40fr) minmax(52px,10fr) minmax(180px,40fr)}
 .game-hud-zone{grid-template-columns:minmax(0,3fr) minmax(180px,1fr);grid-template-rows:1fr}.game-hud-zone .game-topbar{grid-template-columns:repeat(8,1fr)!important}.game-feedback-slot{min-height:0}
 .game-question-zone .question-box{font-size:clamp(2rem,7vw,4.7rem)!important}.game-question-zone #answerInput{min-height:31px;padding:3px!important}
 .game-keyboard-zone .keyboard-grid button{font-size:clamp(18px,5vh,29px)!important}
}


/* ETAPA 20: teclado táctil de respuesta inmediata */
.game-keyboard-zone .keyboard-grid button.game-key{
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  contain:layout paint;
  transition:transform .045s ease,filter .045s ease!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 0 #557ca8,0 5px 9px rgba(0,0,0,.22)!important;
}
.game-keyboard-zone .keyboard-grid button.game-key:active,
.game-keyboard-zone .keyboard-grid button.game-key.key-pressed{
  transform:translateY(1px) scale(.985)!important;
  filter:brightness(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 0 #557ca8,0 2px 5px rgba(0,0,0,.18)!important;
}
body.game-performance-mode .screen.active{animation:none!important}
body.game-performance-mode .stat:before,
body.game-performance-mode .splash-card:before,
body.game-performance-mode .auth-screen-modern:before,
body.game-performance-mode .auth-orb,
body.game-performance-mode .auth-brand-mark{animation:none!important}
body.game-performance-mode .game-screen{contain:layout paint style}
body.game-performance-mode .game-hud-zone,
body.game-performance-mode .game-question-zone,
body.game-performance-mode .game-powers-zone,
body.game-performance-mode .game-keyboard-zone{box-shadow:inset 0 0 14px rgba(12,107,205,.06),0 4px 10px rgba(0,0,0,.18)!important}
body.game-performance-mode #answerInput{caret-color:transparent}

/* ===== ETAPA 21 · PANTALLA DE JUEGO FUTURISTA + TECLADO NATIVO ESTABLE ===== */
:root{--game-vh:100dvh;--neon-cyan:#32e7ff;--neon-blue:#2474ff;--neon-purple:#ae42ff;--neon-gold:#ffd94a;--game-surface:rgba(4,16,40,.95)}
#gameScreen.game-screen{height:var(--game-vh);min-height:var(--game-vh);padding:clamp(5px,.8vh,10px)!important;overflow:hidden;background:
 radial-gradient(circle at 20% -10%,rgba(34,122,255,.34),transparent 38%),
 radial-gradient(circle at 90% 25%,rgba(176,50,255,.2),transparent 30%),
 linear-gradient(180deg,#020817,#07142b 46%,#020716)!important}
#gameScreen .game-layout{height:100%;display:grid;grid-template-rows:minmax(78px,10fr) minmax(220px,40fr) minmax(68px,10fr) minmax(230px,40fr);gap:clamp(5px,.8vh,10px);max-width:1500px;margin:auto;min-height:0}
#gameScreen .game-hud-zone,#gameScreen .game-question-zone,#gameScreen .game-powers-zone,#gameScreen .game-keyboard-zone{border:1px solid rgba(64,224,255,.32);border-radius:20px;background:linear-gradient(145deg,rgba(8,29,66,.96),rgba(2,9,25,.98));box-shadow:inset 0 0 32px rgba(26,130,255,.1),0 10px 34px rgba(0,0,0,.38),0 0 16px rgba(35,189,255,.08)}
#gameScreen .game-hud-zone{display:grid;grid-template-columns:minmax(0,3.1fr) minmax(220px,1.25fr);gap:8px;padding:8px;overflow:hidden}
#gameScreen .game-topbar{display:grid!important;grid-template-columns:repeat(8,minmax(62px,1fr))!important;gap:6px;margin:0!important;min-width:0}
#gameScreen .game-topbar>div{padding:5px 4px!important;border-radius:14px!important;background:linear-gradient(145deg,rgba(17,53,105,.96),rgba(7,20,49,.96))!important;border:1px solid rgba(79,199,255,.24);box-shadow:inset 0 0 18px rgba(32,132,255,.08)}
#gameScreen .game-topbar>div.primary-clock{background:linear-gradient(145deg,#0057cc,#1738a8)!important;border-color:#67e9ff;box-shadow:0 0 20px rgba(26,172,255,.3),inset 0 0 18px rgba(255,255,255,.12)}
#gameScreen .game-topbar b{font-size:clamp(9px,.75vw,12px)!important;color:#a8dfff;text-transform:uppercase;letter-spacing:.05em}
#gameScreen .game-topbar span{font-size:clamp(15px,1.45vw,26px)!important;color:#fff;text-shadow:0 0 10px rgba(82,213,255,.55)}
#gameScreen .game-feedback-slot{position:relative;display:grid!important;place-items:center;overflow:visible!important;padding:5px 8px;border:1px solid rgba(214,78,255,.38)!important;background:linear-gradient(135deg,rgba(89,17,145,.62),rgba(0,105,154,.38))!important;box-shadow:inset 0 0 22px rgba(205,63,255,.12)}
#gameScreen .game-feedback-slot .answer-feedback{position:relative!important;width:100%;max-width:100%;padding:9px 12px!important;font-size:clamp(15px,1.55vw,25px)!important;line-height:1.15!important;border-radius:14px!important;letter-spacing:-.01em;text-wrap:balance;overflow:visible!important;white-space:normal!important;transform:translateY(-4px) scale(.97)!important}
#gameScreen .game-feedback-slot .answer-feedback.show{transform:none!important}
#gameScreen .game-feedback-slot .streak-fire{position:absolute!important;left:50%!important;right:auto!important;bottom:-4px!important;transform:translateX(-50%)!important;padding:7px 15px!important;font-size:clamp(14px,1.25vw,21px)!important;border-radius:999px;z-index:5;box-shadow:0 0 26px #ff6900,0 0 56px rgba(255,40,0,.5)!important}
#gameScreen .game-feedback-slot .streak-fire .fire-emoji{font-size:clamp(30px,3vw,48px)!important;filter:drop-shadow(0 0 12px #fff) drop-shadow(0 0 22px #ff5900)!important}
#gameScreen .game-question-zone{display:grid;grid-template-columns:minmax(96px,14%) minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:8px;padding:clamp(8px,1.2vh,14px);overflow:hidden}
#gameScreen .anime-message.compact{grid-row:1/4;grid-column:1;margin:0!important;height:100%;display:flex!important;flex-direction:column;justify-content:center;align-items:center;padding:8px!important;background:linear-gradient(160deg,rgba(30,92,182,.32),rgba(110,31,164,.24))!important;border:1px solid rgba(95,213,255,.25);border-radius:16px!important;overflow:hidden}
#gameScreen .anime-message.compact img{width:min(100%,120px)!important;max-height:58%;object-fit:contain;filter:drop-shadow(0 0 16px rgba(55,211,255,.5))}
#gameScreen .anime-message.compact div{font-size:clamp(11px,.9vw,15px)!important;line-height:1.15;color:#d9f6ff!important;text-align:center;margin-top:6px}
#gameScreen .question-box{grid-column:2;grid-row:1/3;min-height:0!important;height:100%;margin:0!important;padding:12px 16px!important;border-radius:20px!important;background:
 radial-gradient(circle at 50% 0%,rgba(81,224,255,.25),transparent 42%),
 linear-gradient(135deg,#073ea8,#5322b2 55%,#7b1a91)!important;border:2px solid rgba(101,232,255,.48);box-shadow:inset 0 0 34px rgba(82,211,255,.13),0 0 24px rgba(83,71,255,.22);font-size:clamp(32px,5vw,76px)!important;line-height:1.05;text-shadow:0 4px 0 rgba(0,0,0,.24),0 0 22px rgba(255,255,255,.22);overflow-wrap:anywhere}
#gameScreen .options-grid{grid-column:2;grid-row:2;align-self:end;margin:4px 0 0!important;gap:7px!important}
#gameScreen #answerInput{grid-column:2;grid-row:3;margin:0!important;height:clamp(46px,6.5vh,70px);font-size:clamp(24px,3.2vw,44px)!important;text-align:center;font-weight:1000;color:#06224f;background:linear-gradient(180deg,#fff,#d9ecff);border:3px solid var(--neon-cyan)!important;border-radius:16px!important;box-shadow:0 0 20px rgba(50,231,255,.22),inset 0 2px 4px rgba(5,41,80,.12)}
#gameScreen .game-powers-zone{padding:6px 10px;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:7px;align-items:center;overflow:hidden}
#gameScreen .power-row{margin:0!important;display:flex!important;flex-wrap:nowrap!important;gap:7px;overflow-x:auto;overflow-y:hidden;height:100%;align-items:center;scrollbar-width:thin}
#gameScreen .power-chip{flex:0 0 auto;min-height:46px;padding:6px 10px!important;border:1px solid rgba(125,231,255,.42)!important;background:linear-gradient(145deg,#5521b9,#0b5bcf)!important;box-shadow:0 0 15px rgba(79,68,255,.2),inset 0 0 14px rgba(255,255,255,.08)}
#gameScreen .game-mini-action{width:42px;height:42px;border-radius:50%;background:linear-gradient(145deg,#0ca8d5,#5531c8);color:#fff;font-size:20px;font-weight:1000;border:1px solid #70efff;box-shadow:0 0 15px rgba(40,218,255,.35)}
#gameScreen .game-keyboard-zone{position:relative;padding:clamp(6px,1vh,11px);display:grid;grid-template-columns:minmax(0,1fr) clamp(105px,14vw,190px);gap:clamp(6px,1vw,12px);overflow:hidden}
#gameScreen .keyboard-grid button.game-key{background:linear-gradient(155deg,#f8fcff,#b7d9ff 65%,#86b8ef)!important;color:#092b64!important;border:1px solid #dff7ff;box-shadow:inset 0 2px 0 #fff,0 6px 0 #315f96,0 10px 18px rgba(0,0,0,.34)!important;text-shadow:0 1px 0 #fff;font-weight:1000}
#gameScreen .quick-actions .btn3d{border:1px solid rgba(255,255,255,.28)!important;text-transform:uppercase;letter-spacing:.04em}
#gameScreen .native-keyboard-actions{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:8px;padding:7px;background:linear-gradient(145deg,rgba(6,26,57,.98),rgba(2,10,25,.98));z-index:10}
#gameScreen .native-keyboard-actions button{border-radius:14px;color:#fff;font-size:clamp(13px,2.1vw,20px);font-weight:1000;border:1px solid rgba(255,255,255,.28);box-shadow:0 5px 0 rgba(0,0,0,.34)}
#gameScreen .native-skip{background:linear-gradient(135deg,#ff9d00,#c85c00)}#gameScreen .native-submit{background:linear-gradient(135deg,#04b95f,#08763e)}#gameScreen .native-surrender{background:linear-gradient(135deg,#ff344d,#9e1330)}
body.native-keyboard-open #gameScreen.game-screen{height:var(--game-vh);min-height:var(--game-vh)}
body.native-keyboard-open #gameScreen .game-layout{grid-template-rows:minmax(70px,18fr) minmax(150px,60fr) minmax(52px,22fr);gap:5px}
body.native-keyboard-open #gameScreen .game-powers-zone{display:none!important}
body.native-keyboard-open #gameScreen .game-keyboard-zone{min-height:52px;grid-column:1;display:block;padding:0;overflow:visible}
body.native-keyboard-open #gameScreen .keyboard-grid,body.native-keyboard-open #gameScreen .quick-actions{display:none!important}
body.native-keyboard-open #gameScreen .native-keyboard-actions{display:grid!important}
body.native-keyboard-open #gameScreen .anime-message.compact{display:none!important}
body.native-keyboard-open #gameScreen .game-question-zone{grid-template-columns:1fr;grid-template-rows:1fr auto;padding:6px}
body.native-keyboard-open #gameScreen .question-box{grid-column:1;grid-row:1;font-size:clamp(26px,7vw,52px)!important}
body.native-keyboard-open #gameScreen #answerInput{grid-column:1;grid-row:2;height:46px;font-size:27px!important}
body.native-keyboard-open #gameScreen .game-hud-zone{grid-template-columns:1fr minmax(150px,.8fr);padding:5px}
body.native-keyboard-open #gameScreen .game-topbar{grid-template-columns:repeat(4,1fr)!important;overflow:hidden}
body.native-keyboard-open #gameScreen .game-topbar>div:nth-child(n+5){display:none}
body.native-keyboard-open #gameScreen .game-feedback-slot .answer-feedback{font-size:clamp(13px,3vw,19px)!important;padding:6px!important}
body.native-keyboard-open #gameScreen .game-feedback-slot .streak-fire{bottom:-2px!important;padding:4px 9px!important}.native-keyboard-actions.hidden{display:none!important}
@media(max-width:760px){#gameScreen .game-layout{grid-template-rows:minmax(92px,12fr) minmax(190px,38fr) minmax(62px,10fr) minmax(240px,40fr)}#gameScreen .game-hud-zone{grid-template-columns:1fr;grid-template-rows:auto minmax(42px,1fr)}#gameScreen .game-topbar{grid-template-columns:repeat(4,1fr)!important}#gameScreen .game-topbar>div:nth-child(n+5){display:none}#gameScreen .game-feedback-slot .answer-feedback{font-size:clamp(14px,3.5vw,19px)!important}#gameScreen .game-feedback-slot .streak-fire{left:auto!important;right:5px!important;transform:none!important;bottom:-3px!important}#gameScreen .game-question-zone{grid-template-columns:74px 1fr}.game-keyboard-zone{grid-template-columns:minmax(0,1fr) 86px!important}#gameScreen .anime-message.compact div{font-size:9px!important}}
@media(max-height:650px) and (orientation:landscape){#gameScreen .game-layout{grid-template-rows:minmax(58px,13fr) minmax(120px,37fr) minmax(50px,10fr) minmax(130px,40fr);gap:4px}#gameScreen .game-hud-zone{grid-template-columns:minmax(0,3fr) minmax(170px,1fr);padding:4px}#gameScreen .game-topbar>div{padding:2px!important}#gameScreen .game-question-zone{padding:5px}.game-keyboard-zone{padding:4px!important}#gameScreen .game-feedback-slot .streak-fire .fire-emoji{font-size:26px!important}}


/* Producción v1.0 — eliminación de cuenta */
.account-delete-btn{background:linear-gradient(145deg,#7f1d1d,#dc2626)!important;color:#fff!important;border:1px solid rgba(254,202,202,.45)!important;box-shadow:0 10px 26px rgba(220,38,38,.28)!important}
.delete-account-panel{max-width:620px;margin:auto;text-align:left;color:#e5eefb}
.delete-account-panel h2{text-align:center;color:#fecaca;margin:.2rem 0 1rem}
.delete-account-icon{text-align:center;font-size:3rem;filter:drop-shadow(0 0 14px rgba(248,113,113,.55))}
.delete-account-panel p{color:#cbd5e1;line-height:1.55}
.delete-account-panel label{display:block;margin:1rem 0;color:#f8fafc}
.delete-account-panel input[type="text"],.delete-account-panel input:not([type]){width:100%}
.delete-check{display:flex!important;gap:.75rem;align-items:flex-start;padding:1rem;border:1px solid rgba(248,113,113,.35);border-radius:16px;background:rgba(127,29,29,.22)}
.delete-check input{margin-top:.2rem;transform:scale(1.25)}
.delete-account-actions{display:flex;gap:.75rem;justify-content:flex-end;flex-wrap:wrap;margin-top:1.25rem}
.legal-footer{flex-wrap:wrap}

/* Producción v1.0.0 — panel Cuenta y ayuda */
.settings-account-card{display:flex;flex-direction:column;min-width:0;overflow:visible!important}
.settings-action-list{display:grid;gap:9px}
.settings-action{width:100%;min-height:64px;margin:0!important;padding:10px 12px;display:grid;grid-template-columns:42px minmax(0,1fr) 20px;align-items:center;gap:10px;text-align:left;text-decoration:none;background:linear-gradient(145deg,rgba(20,54,91,.96),rgba(7,27,54,.98));color:#f4f9ff!important;border:1px solid rgba(75,210,255,.28);border-radius:15px;box-shadow:0 7px 18px rgba(0,0,0,.2);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.settings-action:hover,.settings-action:focus-visible{transform:translateY(-2px);border-color:#55e7ff;box-shadow:0 0 22px rgba(31,201,255,.24);outline:none}
.settings-action-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,#184c84,#0c274b);font-size:21px;box-shadow:inset 0 0 13px rgba(77,219,255,.17)}
.settings-action span:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:3px}
.settings-action b{font-size:14px;color:#fff;line-height:1.2}
.settings-action small{font-size:11px;color:#a9cce8;line-height:1.25;font-weight:500}
.settings-action-arrow{font-size:26px;color:#59dcff;text-align:right}
.settings-danger-zone{margin-top:14px;padding-top:14px;border-top:1px solid rgba(117,204,255,.22);display:grid;gap:8px}
.settings-danger-zone h4{color:#fff;font-size:14px;margin:0}
.settings-danger-zone p{font-size:11px;color:#9fbdd5;line-height:1.35;margin:0}
.settings-full-button{width:100%!important;margin:0!important;min-height:45px}
.settings-version{margin-top:auto!important;padding-top:14px;line-height:1.4}
@media(max-width:760px){.settings-action{min-height:58px;grid-template-columns:38px minmax(0,1fr) 18px;padding:9px 10px}.settings-action-icon{width:34px;height:34px;font-size:19px}.settings-action b{font-size:13px}.settings-action small{font-size:10px}}

/* V33 competición profesional */
.competition-plan-card{display:grid;gap:.55rem;padding:1.1rem;border:1px solid #19c7e6;border-radius:18px;background:linear-gradient(135deg,rgba(22,67,145,.38),rgba(10,31,63,.82));font-size:1.02rem}.competition-plan-card b{font-size:1.3rem;color:#fff}.competition-plan-card strong{color:#ffd84d}.competition-result{padding:1rem;border-radius:16px;margin-bottom:1rem}.competition-result.passed{background:rgba(31,180,104,.18);border:1px solid #31d98b}.competition-result.failed{background:rgba(239,82,82,.15);border:1px solid #ef6b6b}.google-btn[aria-busy=true]{opacity:.72;cursor:wait}
/* V34: ranking 3D y salas competitivas */
.ranking-podium{perspective:1200px}.ranking-podium .podium-slot:not(.podium-empty){transform-style:preserve-3d;animation:rankCubeTurn 9s ease-in-out infinite;box-shadow:0 18px 45px #0007,inset 0 0 35px #45d7ff18}.ranking-podium .podium-2{animation-delay:-3s}.ranking-podium .podium-3{animation-delay:-6s}@keyframes rankCubeTurn{0%,18%,100%{transform:rotateY(0deg) rotateX(0)}45%{transform:rotateY(12deg) rotateX(2deg)}72%{transform:rotateY(-12deg) rotateX(-2deg)}}@media(prefers-reduced-motion:reduce){.ranking-podium .podium-slot{animation:none!important}}
.suite-room-list{display:grid;gap:16px;margin-top:18px}.suite-room-card{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:18px;padding:18px;border:1px solid #20c9ff66;border-radius:22px;background:linear-gradient(135deg,#071c3d,#10154a)}.suite-promo{width:100%;height:150px;object-fit:cover;border-radius:16px}.suite-players{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.suite-players span{padding:7px 11px;border-radius:999px;background:#ffffff12;border:1px solid #ffffff22}@media(max-width:700px){.suite-room-card{grid-template-columns:1fr}.suite-promo{height:190px}}

#firebaseStatusBadge{display:none!important}
.earn-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}.earn-card{padding:20px;border:1px solid #4a6680;border-radius:18px}.earn-card button{margin-top:12px;width:100%}
@media(max-width:700px){.game-layout{grid-template-columns:1fr!important}.game-hud-zone{min-width:0}.game-topbar{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.game-topbar>div{padding:5px!important}}
#gameScreen .keyboard-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr))}

/* Correcciones de resultados y teclado táctil. */
#modal .modal-content,#modalBody{background:#0e2038;color:#f1f5f9}#modalBody h3,#modalBody p{color:#f1f5f9}#modal .modal-close{color:#f1f5f9;background:#203c5e}
#keyboardGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(420px,100%);margin:12px auto}#keyboardGrid.hidden{display:none}#keyboardGrid .game-key{min-height:56px;font-size:26px;border-radius:14px;touch-action:manipulation}#keyboardGrid [data-key="OK"]{grid-column:span 2;background:#15803d;color:white;font-size:21px}#keyboardGrid [data-key="C"]{background:#7f1d1d;color:white}.coins-menu-label{display:block!important;font-size:24px!important;color:#fff!important;text-align:center;padding:24px!important}.save-error{color:#fda4af!important;overflow-wrap:anywhere}

/* Podio con seis caras y giro continuo. */
#rankingList .ranking-podium{align-items:end;gap:clamp(12px,3vw,40px);padding:30px 12px}
#rankingList .rotating-podium{background:none;border:0;box-shadow:none;min-height:0;height:auto;padding:12px 4px;display:flex;flex-direction:column;align-items:center;gap:8px;overflow:visible}
#rankingList .rotating-podium.podium-1{padding-bottom:38px}
.rank-cube-scene{--cube-size:clamp(66px,15vw,150px);width:var(--cube-size);height:var(--cube-size);margin:22px auto;perspective:750px}
.rank-cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:podiumCubeTurn 18s linear infinite}
.rank-cube-face{position:absolute;inset:0;border:2px solid #7dd3fc;background:#102f50;backface-visibility:hidden;box-shadow:inset 0 0 16px #38bdf8}
.podium-1 .rank-cube-face{border-color:#fde047}.rank-cube-face img{width:100%;height:100%;object-fit:cover;border-radius:0}.rank-cube-face span{position:absolute;bottom:3px;right:3px;background:#071526dd;color:#fff;border-radius:8px;padding:3px 8px;font-weight:bold}
.face-front{transform:translateZ(calc(var(--cube-size)/2))}.face-back{transform:rotateY(180deg) translateZ(calc(var(--cube-size)/2))}.face-right{transform:rotateY(90deg) translateZ(calc(var(--cube-size)/2))}.face-left{transform:rotateY(-90deg) translateZ(calc(var(--cube-size)/2))}.face-top{transform:rotateX(90deg) translateZ(calc(var(--cube-size)/2))}.face-bottom{transform:rotateX(-90deg) translateZ(calc(var(--cube-size)/2))}
@keyframes podiumCubeTurn{from{transform:rotateX(-15deg) rotateY(0deg)}to{transform:rotateX(-15deg) rotateY(360deg)}}
#rankingList .rotating-podium h3{font-size:clamp(12px,2vw,21px);overflow-wrap:anywhere;text-align:center}
@media(prefers-reduced-motion:reduce){.rank-cube{animation:none;transform:rotateX(-15deg) rotateY(25deg)}}
.earn-card progress{width:100%;height:18px;accent-color:#22c55e;margin:12px 0}
.operation-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:12px 0}.operation-levels>div{padding:16px;background:#102747;border:1px solid #38bdf8;border-radius:16px;color:#fff}.operation-levels span,.operation-levels b{display:block}.operation-levels b{margin-top:8px;font-size:22px;color:#fde047}
#modernNotice{position:fixed;right:18px;bottom:24px;z-index:100000;width:min(410px,calc(100% - 36px));padding:20px 42px 20px 20px;color:#fff;background:linear-gradient(135deg,#153459,#312065);border:1px solid #7dd3fc;border-radius:22px;box-shadow:0 12px 50px #0009}#modernNotice[hidden]{display:none}#modernNotice strong{color:#67e8f9}#modernNotice p{margin-top:8px;line-height:1.45}#modernNotice button{position:absolute;right:12px;top:12px;color:white;background:none;font-size:24px}
.auth-stage{position:relative;isolation:isolate;overflow:hidden}#mathBubbles{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.auth-visual,.auth-card-modern{background:#07182ed9!important}.auth-math-symbols,.auth-orb{display:none!important}.auth-actions{display:grid!important;grid-template-columns:1fr!important;gap:12px}.google-btn::before,.google-btn::after{content:none!important}.google-btn{display:flex!important;align-items:center!important;justify-content:center!important;gap:14px!important;min-height:58px!important;white-space:nowrap}.google-btn img{width:28px!important;height:28px!important}.auth-card-modern .check{display:flex;align-items:center;gap:10px}.auth-card-modern .check input{width:20px;height:20px;margin:0}.auth-card-modern{backdrop-filter:blur(8px)}#loginProgress progress{width:100%;height:12px;accent-color:#22d3ee}#loginProgress span{color:#67e8f9;font-weight:bold}#loginProgress p{font-size:14px;margin:8px 0;color:#cbd5e1}.room-invite{text-align:center;border:1px solid #38bdf8;border-radius:24px;padding:22px;margin:16px 0;background:linear-gradient(140deg,#15395d,#312065)}.room-number{display:block;font-size:42px;color:#fde047;letter-spacing:8px;margin:14px 0}#roomQR{display:block;width:200px;height:200px;padding:10px;background:#fff;border-radius:14px;margin:12px auto}#friendsScreen .panel{display:grid;gap:12px}#friendsScreen select,#friendsScreen input{margin:0}

/* Approved illustrated design · October 4 */
#loginScreen{padding:8px!important;min-height:0!important;overflow:visible}
#loginScreen:before{display:none}
#loginScreen .auth-stage{width:min(760px,100%);min-height:calc(100dvh - 40px);margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px 10px;border:2px solid #e9cc81;border-radius:28px;background:linear-gradient(#06152c22,#06152c22),url('assets/images/login-background.v12.webp') center/cover;box-shadow:0 0 25px #31c8ff30;isolation:isolate}
#mathBubbles{z-index:0!important;opacity:1}
#loginScreen .auth-brand-art{position:relative;z-index:1;width:clamp(155px,24vh,250px);height:clamp(130px,22vh,225px);display:flex;align-items:center;justify-content:center}
.auth-brand-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 14px #14d9ff99)}
#loginScreen .auth-card-modern{position:relative;z-index:1;width:min(420px,94%);min-height:0!important;padding:20px!important;border-radius:22px!important;border:1px solid #8be6ff!important;border-bottom:2px solid #ffe081!important;background:linear-gradient(135deg,#3f5aaa77,#0c254aad)!important;backdrop-filter:blur(5px);box-shadow:0 0 20px #5ce4ff66!important;gap:0}
#loginScreen .auth-card-modern h2{font-size:clamp(21px,3.4vw,28px);text-align:center;margin:0 0 3px}
#loginScreen .auth-subtitle{font-size:13px;text-align:center;margin:0 0 10px;color:#d3eaff}
#loginScreen .auth-card-modern input:not([type=checkbox]){height:44px!important;margin:5px 0!important;border-radius:12px!important;border:1px solid #b4d7ff!important;background:#162e5866!important;font-size:15px!important;padding:0 13px!important}
#loginScreen .auth-options{display:flex;justify-content:space-between;gap:8px;margin:6px 0 10px}
#loginScreen .auth-options .check{font-size:11px;line-height:1.25;margin:0;gap:6px;flex:1}
#loginScreen .auth-options input[type=checkbox]{width:16px!important;height:16px!important;min-height:16px!important;padding:0!important;margin:0!important;accent-color:#00c9ff;flex:none}
#loginScreen .auth-actions{gap:10px!important}
#loginScreen .btn3d{margin:0;min-height:42px!important;height:auto;padding:10px 12px;font-size:14px!important;border-radius:12px!important;box-shadow:0 3px 10px #0004!important;text-transform:none}
#loginScreen .auth-enter-btn{background:linear-gradient(#ffe776,#ffb51b)!important;color:#05142c!important;border:1px solid #fff2ba!important;font-size:17px!important;order:0}
#loginScreen .google-login-btn{order:1;min-height:42px!important;gap:12px!important;color:#0b1735!important}
#loginScreen .google-btn img{width:23px!important;height:23px!important;flex-basis:23px}
#loginScreen #passkeyLogin{width:100%;margin:10px 0 0;background:#18345880;border:1px solid #97d5ff;color:#e8f6ff;font-weight:400}
#loginScreen .auth-secondary-actions{justify-content:space-between;flex-wrap:nowrap;margin:10px 0 0;gap:10px}
#loginScreen .auth-secondary-actions button{background:none!important;box-shadow:none!important;font-size:12px!important;min-height:30px!important;padding:4px!important;color:#7ae9ff!important;text-decoration:underline}
#loginProgress{margin:10px 0 0;text-align:center;color:#e5f5ff}#loginProgress p{font-size:12px;margin:4px 0}#loginProgress span{font-size:12px}#loginProgress progress,.room-progress progress{display:block;width:100%;height:10px;border-radius:10px;overflow:hidden;accent-color:#25e5ff;background:#07152c}
progress::-webkit-progress-bar{background:#061a36;border:1px solid #4a6d91;border-radius:20px}progress::-webkit-progress-value{background:linear-gradient(90deg,#0aaaff,#69fff7);box-shadow:0 0 15px #2fe5ff;border-radius:20px}progress::-moz-progress-bar{background:linear-gradient(90deg,#0aaaff,#69fff7)}
#friendsScreen{padding:8px!important;min-height:0!important;color:#eef8ff}
#friendsScreen .friends-shell{max-width:850px;min-height:calc(100dvh - 40px);margin:auto;padding:18px;border:2px solid #dbbc79;border-radius:28px;background:radial-gradient(ellipse at 0 55%,#0476d355,transparent 45%),radial-gradient(ellipse at 100% 85%,#6537c566,transparent 45%),#05152d;box-shadow:0 0 24px #24cbff33}
.friends-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}.friends-header h2{font-size:clamp(22px,4vw,34px);color:#adf7ff;line-height:1.1}.friends-header p{font-size:12px;color:#97dfff;margin-top:4px}.friends-header img{width:78px;height:78px;object-fit:contain;margin-left:auto}.friend-back{width:36px;height:36px;border:1px solid #64caff;border-radius:50%;background:#143561;color:#fff;font-size:20px;flex:none}
.friend-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}.friend-tabs button{min-height:44px;padding:8px;background:#0e274c;border:1px solid #35577b;border-radius:12px;color:#c0ddff;font-size:14px}.friend-tabs .selected{background:linear-gradient(#68ffff,#00addb);color:#061831;box-shadow:0 0 18px #2cdfff66;font-weight:800}
.friend-controls,.friend-invitation{padding:14px;border:1px solid #76cfff;border-radius:18px;background:linear-gradient(135deg,#20447599,#102449bb);margin-bottom:12px}.friend-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.friend-fields label,#friendJoinPanel label{font-size:12px;color:#cce7ff}
#friendsScreen select,#friendsScreen input{width:100%;height:42px;background:#102b54;color:#fff;border:1px solid #658dbc;border-radius:10px;padding:8px;margin:4px 0 10px;font-size:15px}
.friend-gold{width:100%;min-height:44px;background:linear-gradient(#ffe879,#ffb71e);border:1px solid #fff3a5;border-radius:12px;color:#05162f;font-size:20px;font-weight:900;box-shadow:0 0 14px #ffe06144}
.room-progress{margin:4px 4px 12px}.room-progress p{font-size:12px;text-align:center;margin:5px 0;color:#d9faff}.room-progress progress:not([value]){animation:progressGlow 1s alternate infinite}@keyframes progressGlow{to{filter:brightness(1.6)}}
.friend-invitation h3{font-size:23px;color:#a7f6ff;margin:0 0 12px}.invite-layout{display:grid;grid-template-columns:minmax(100px,180px) 1fr;gap:14px;align-items:center}
#friendsScreen #roomQR{width:100%!important;height:auto!important;aspect-ratio:1;display:block;padding:0!important;margin:0!important;border:8px solid white;border-radius:12px;background:white;image-rendering:pixelated}
.invite-code{min-width:0;padding:10px;border-radius:12px;background:#071e42aa}.invite-code small{font-size:12px;color:#d2eaff}.invite-code .room-number{letter-spacing:4px;font-size:clamp(26px,5vw,44px);line-height:1.2;color:#a9ffff;text-shadow:0 0 14px #0ff9;margin:10px 0;background:#04163055;padding:12px 4px;border:1px solid #379dea;border-radius:12px;text-align:center}.invite-actions{display:flex;gap:8px}.invite-actions button{flex:1;min-height:40px;border:1px solid #abcfff;border-radius:10px;background:#204e89;color:white;padding:6px;font-size:12px}
.friend-participants{margin:12px 0;padding:10px;background:#071b36aa;border:1px solid #325777;border-radius:12px}.friend-participants>small{font-size:11px;color:#b7e2ff}.friend-player-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}.friend-player{display:flex;gap:9px;align-items:center;min-width:0}.friend-player b{display:block;font-size:12px;overflow-wrap:anywhere}.friend-player small{font-size:10px;color:#43ffb3}.friend-player .waiting+div small{color:#ffe06a}.friend-avatar{width:40px;height:40px;border:2px solid #e9c567;flex:none;display:grid;place-items:center;background:linear-gradient(#33aaff,#6434bd);border-radius:50%;font-size:23px}.friend-avatar.waiting{border-color:#8cabc7;background:#283e5e}
.friend-bottom{display:flex;gap:10px}.friend-start{flex:1;min-height:48px;border:1px solid #a3ffa5;border-radius:12px;background:linear-gradient(#86ff7d,#08cf58);color:#031b24;font-size:18px;font-weight:900;box-shadow:0 0 15px #43ff5055}.friend-coins{padding:8px 12px;min-height:44px;border:1px solid #ffe77c;border-radius:12px;background:#06152b;color:#ffe275;font-size:12px;font-weight:700}.friend-cost{font-size:13px;color:#ffd75a;margin:10px 0 0}.friend-empty{padding:35px 12px;text-align:center;color:#afdaff}.friend-empty>span{font-size:44px;color:#58e7ff}.friend-empty h3{margin:12px 0;font-size:21px}.friend-empty p{font-size:14px}.friend-room-summary{display:block;text-align:left;padding:12px;background:#15315a;border:1px solid #6abfff;border-radius:12px;color:#fff;width:100%;margin:8px 0}.friend-room-summary span{display:block;font-size:12px;margin-top:5px}
#friendsScreen button:disabled{opacity:.55;cursor:wait}#friendsScreen [hidden],#loginScreen [hidden]{display:none!important}
body:has(#loginScreen.active)>footer,body:has(#friendsScreen.active)>footer{display:none}
@media(max-width:480px){#loginScreen .auth-stage{padding:12px 5px;gap:8px}#loginScreen .auth-brand-art{width:170px;height:155px}#loginScreen .auth-card-modern{padding:15px!important}.friends-header img{width:55px;height:55px}.friends-header h2{font-size:21px}#friendsScreen .friends-shell{padding:12px}.friend-invitation,.friend-controls{padding:10px}.invite-layout{grid-template-columns:115px 1fr;gap:8px}.invite-code{padding:6px}.invite-code .room-number{letter-spacing:2px;font-size:25px;padding:8px 2px}.invite-actions{flex-direction:column;gap:5px}.invite-actions button{min-height:34px}.friend-invitation h3{font-size:20px}.friend-start{font-size:14px}.friend-coins{font-size:11px;padding:7px}.friend-tabs button{font-size:12px}.friend-player-grid{grid-template-columns:1fr 1fr}.friend-avatar{width:30px;height:30px;font-size:17px}}
@media(max-height:650px) and (min-width:650px){#loginScreen .auth-stage{flex-direction:row;gap:35px;padding:15px;min-height:calc(100dvh - 40px)}#loginScreen .auth-brand-art{width:220px;height:220px}#loginScreen .auth-card-modern{width:370px}#friendsScreen .friends-shell{max-width:950px}#friendsScreen main{display:grid;grid-template-columns:260px 1fr;gap:12px}#friendRoomBox{grid-column:2;grid-row:1/3}.friend-fields{grid-template-columns:1fr}.friend-invitation{margin:0}.friend-invitation h3{font-size:20px}.invite-layout{grid-template-columns:120px 1fr}.friend-participants{margin:8px 0}.friends-header img{height:50px;width:50px}}
#splashCard,#startChallengeButton{animation:none!important}#splashArtwork{cursor:default}#splashScreen.active{display:grid!important;place-items:center}#splashCard{cursor:default;min-height:0!important}#startChallengeButton{transform:none!important}
#loginScreen .auth-card-modern input::placeholder{color:#d3e3ff;opacity:1}#loginScreen #passkeyLogin{background:#12315e88!important;border:1px solid #97d5ff!important}#loginScreen .auth-brand-art{width:clamp(220px,32vh,340px);height:clamp(180px,27vh,280px)}
@media(max-width:480px){#loginScreen .auth-brand-art{width:230px;height:175px}}
@media(max-height:650px) and (min-width:650px){#loginScreen .auth-brand-art{width:260px;height:240px}}
#loginScreen.active,#friendsScreen.active{animation:none!important}#friendsScreen .friends-shell{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(#03142ee0,#03142ee0),url('assets/images/login-background.v12.webp') center/cover}#friendBubbles{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:.7}.friends-shell>header,.friends-shell>nav,.friends-shell>main{position:relative;z-index:1}
@media(max-height:650px) and (min-width:650px){#friendsScreen main{grid-template-rows:auto auto;align-content:start}#friendRoomBox{grid-row:1/3}.room-progress{grid-column:1;grid-row:2}#friendsScreen .friends-shell{min-height:0}}
@media(max-height:650px) and (min-width:650px){#friendsScreen .friends-shell{padding:12px}.friends-header{margin-bottom:8px}.friends-header img{height:40px;width:40px}.friend-tabs{margin-bottom:8px}.friend-tabs button{min-height:38px;padding:6px}.friend-participants{padding:7px}}

/* Home dashboard · approved compact layout */
body:has(#dashboardScreen.active)>.legal-footer{display:none!important}
#dashboardScreen{height:calc(100dvh - 24px);min-height:0!important;padding:0!important;color:#edf8ff;animation:none!important}
#dashboardScreen .dashboard-shell{height:100%;max-width:1120px;margin:auto;padding:12px 18px 8px;display:grid;grid-template-rows:clamp(60px,9vh,100px) auto auto auto 30px minmax(0,1fr) 22px;gap:8px;border:1px solid #238ffb;border-radius:24px;background:radial-gradient(ellipse at 0 80%,#203ba544,transparent 40%),radial-gradient(ellipse at 100% 85%,#7328ae44,transparent 40%),linear-gradient(140deg,#04152f,#031027);box-shadow:0 0 20px #1baeff44;position:relative;isolation:isolate}
.home-header{display:flex;gap:12px;align-items:center;min-width:0;padding:5px 10px;border:1px solid #359dff;border-radius:16px;background:linear-gradient(120deg,#153f6f99,#061931);overflow:hidden}.home-logo{width:clamp(125px,25vw,280px);height:100%;object-fit:contain}.home-player{display:flex;gap:9px;align-items:center;min-width:0;margin-left:auto}.home-player>img{height:42px;width:42px;border:2px solid #43cfff;border-radius:50%;object-fit:cover;flex:none}.home-player b{display:block;font-size:15px;white-space:nowrap}.home-player p{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px;color:#c1dfff}.home-actions{display:flex;align-items:center;gap:7px;flex:none}.home-actions button{min-width:40px;min-height:40px;padding:6px 11px;border:1px solid #64b8f2;border-radius:10px;background:linear-gradient(#1eafff,#0954ac);color:#fff;font-size:22px;font-weight:800}.home-actions .home-exit{font-size:14px;background:linear-gradient(#ff4272,#b8143d);border-color:#ffa0bd}
.home-announcement{display:flex;gap:8px;align-items:stretch;min-height:44px}.home-announcement #championBanner{flex:1;margin:0;min-width:0;display:flex}.home-announcement .champion-card{width:100%;display:flex;align-items:center;padding:7px 10px;font-size:12px;border:1px solid #f4bd49;border-radius:12px;color:#fff5d5;background:linear-gradient(100deg,#704305,#8d5c1355);box-shadow:none;line-height:1.3}.home-wallet{display:flex;gap:8px;flex:none}.home-wallet>div{min-width:85px;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:3px 8px;border:1px solid #559adc;border-radius:12px;background:#112d54}.home-wallet span{font-size:11px;color:#d3eaff}.home-wallet b{font-size:21px;color:#ffe66d}
.home-progress{padding:9px 10px;background:linear-gradient(130deg,#17407999,#06265477);border:1px solid #21c9ff;border-radius:16px;box-shadow:0 0 12px #10baff44}.home-progress h2{font-size:20px;margin:0 0 8px;color:#fff}.home-progress h2 span,.home-menu-title span{color:#ffe264}
#dashboardScreen #operationLevels{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:7px;margin:0!important;padding:0!important}
#dashboardScreen #operationLevels>div{min-width:0;border:1px solid #09caff;border-radius:12px;padding:8px 5px;background:linear-gradient(145deg,#1264a6aa,#082143);display:flex;flex-direction:column;gap:5px;justify-content:center;min-height:58px}
#dashboardScreen #operationLevels span{font-size:12px;color:#e1f3ff;text-align:center;line-height:1.2}#dashboardScreen #operationLevels b{font-size:20px;color:#ffe060;text-align:center}
.home-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(100px,1.1fr);padding:8px 4px;background:linear-gradient(110deg,#075e7a99,#08214c);border:1px solid #46dcff;border-radius:14px;box-shadow:0 0 12px #2cceff44}.home-metrics>div{min-width:0;text-align:center;border-right:1px solid #219cd988;display:grid;grid-template-columns:auto;align-content:center;gap:2px}.home-metrics span{font-size:18px;line-height:1}.home-metrics b{font-size:18px;white-space:nowrap}.home-metrics small{font-size:10px;color:#c4dfff}.home-metrics>p{font-size:11px;padding:3px 8px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.3;color:#bed7fa}
.home-menu-title{font-size:24px;margin:0;display:flex;gap:7px;align-items:center;line-height:1.2}
#dashboardScreen #mainMenu{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(4,minmax(0,1fr));gap:9px!important;min-height:0;height:100%;margin:0;padding:0}
.home-module,.home-module-decoration{position:relative;min-width:0;min-height:0;border:1px solid #5acfff;border-radius:17px;background:#041a32;overflow:hidden;box-shadow:0 0 10px #07dfff30;isolation:isolate}
.home-module-art{position:absolute;inset:0;z-index:-1;background-image:url('assets/images/dashboard-atlas.v12.webp');background-size:300% 400%;background-position:var(--tile-x) var(--tile-y);background-repeat:no-repeat}
.home-module>b{position:absolute;bottom:0;left:3px;right:3px;border-radius:0 0 13px 13px;padding:5px 2px 6px;background:linear-gradient(transparent,#031126e6 35%);color:#fff;font-size:clamp(14px,2.4vw,24px);font-weight:900;line-height:1.1;text-transform:uppercase;text-align:center;text-shadow:0 2px 3px #000,0 0 7px #40beff}
.home-module:first-child{border-color:#bd70ff;box-shadow:0 0 15px #723fff66}.home-module:first-child>b{color:#ffea79}.home-module:hover{filter:brightness(1.12)}.home-module:focus-visible{outline:3px solid #ffe078;outline-offset:-4px}.home-module:active{filter:brightness(1.3)}
.home-module-decoration{border:0;box-shadow:none;background:url('assets/images/dashboard-atlas.v12.webp') 100% 100%/300% 400% no-repeat}
.home-legal{display:flex;align-items:center;justify-content:center;gap:16px;font-size:11px}.home-legal a{color:#bddbff;text-decoration:underline}
#dashboardScreen #messageBar{position:absolute;right:18px;top:100px;z-index:4;max-width:min(430px,90%);box-shadow:0 8px 30px #0008;border:1px solid #52daff;background:#143867;color:#fff;font-size:12px;padding:8px;border-radius:12px}
@media(max-width:620px){#dashboardScreen{height:calc(100dvh - 16px)}#dashboardScreen .dashboard-shell{padding:8px;gap:6px;grid-template-rows:58px auto auto auto 24px minmax(0,1fr) 18px;border-radius:18px}.home-header{gap:5px;padding:4px 5px}.home-logo{width:100px}.home-player{gap:4px}.home-player>img{width:26px;height:26px}.home-player b{font-size:10px;white-space:normal}.home-player p{font-size:9px;max-width:100px}.home-actions{gap:4px}.home-actions button{min-width:32px;min-height:34px;padding:5px;font-size:20px}.home-exit span{display:none}.home-actions .home-exit{font-size:20px}.home-announcement{gap:4px;min-height:40px}.home-announcement .champion-card{font-size:9px;padding:5px}.home-wallet{gap:4px}.home-wallet>div{min-width:54px;padding:3px 4px}.home-wallet span{font-size:9px}.home-wallet b{font-size:17px}.home-progress{padding:7px}.home-progress h2{font-size:15px;margin-bottom:6px}#dashboardScreen #operationLevels{gap:4px}#dashboardScreen #operationLevels>div{padding:5px 2px;min-height:52px;border-radius:8px}#dashboardScreen #operationLevels span{font-size:9px}#dashboardScreen #operationLevels b{font-size:13px}.home-metrics{grid-template-columns:repeat(5,minmax(0,1fr));padding:6px 3px}.home-metrics>div:last-of-type{border:0}.home-metrics span{font-size:15px}.home-metrics b{font-size:12px}.home-metrics small{font-size:8px}.home-metrics>p{grid-column:1/-1;padding:4px 0 0;font-size:9px}.home-menu-title{font-size:18px}#dashboardScreen #mainMenu{gap:6px!important}.home-module,.home-module-decoration{border-radius:12px}.home-module>b{font-size:12px;padding-bottom:6px}.home-legal{font-size:9px;gap:12px}}
@media(max-height:650px) and (min-width:650px){#dashboardScreen .dashboard-shell{padding:7px 12px;gap:5px;grid-template-rows:49px 36px 75px 55px 23px minmax(0,1fr) 18px}.home-header{padding:2px 8px}.home-logo{width:170px}.home-player>img{width:32px;height:32px}.home-progress{padding:5px 8px}.home-progress h2{font-size:15px;margin-bottom:4px}#dashboardScreen #operationLevels>div{min-height:42px;padding:4px;flex-direction:row;align-items:center}#dashboardScreen #operationLevels b{font-size:16px}#dashboardScreen #operationLevels span{font-size:11px}.home-announcement{min-height:0}.home-wallet b{font-size:17px}.home-metrics{padding:5px}.home-metrics span{display:none}.home-metrics b{font-size:17px}.home-menu-title{font-size:19px}#dashboardScreen #mainMenu{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:repeat(3,minmax(0,1fr));gap:6px!important}.home-module>b{font-size:16px}.home-legal{font-size:10px}}
#dashboardScreen #championBanner{background:transparent!important;padding:0!important;border:0!important}.home-metrics>div:nth-child(1)>span{color:#cb7dff}.home-metrics>div:nth-child(2)>span{color:#ff73a9}.home-metrics>div:nth-child(3)>span{color:#19d5ff}.home-metrics>div:nth-child(4)>span{color:#ffb43d}.home-metrics>div:nth-child(5)>span{color:#45ff8d}#dashboardScreen #operationLevels>div:nth-child(1){border-color:#3ce79a}#dashboardScreen #operationLevels>div:nth-child(2){border-color:#ff659d}#dashboardScreen #operationLevels>div:nth-child(3){border-color:#12d0ff}#dashboardScreen #operationLevels>div:nth-child(4){border-color:#ffcd45}#dashboardScreen #operationLevels>div:nth-child(5){border-color:#ab87ff}