/* Kelzahoot — escenario oscuro premium: azul noche profundo, naranja Kelza como único acento,
   Fraunces para los momentos grandes, Work Sans para leer, JetBrains Mono para cifras. */
:root{
  color-scheme:dark;
  --noche:#070d1a; --fondo:#0b1426; --fondo-2:#101c34;
  --vidrio:rgba(255,255,255,.045); --vidrio-2:rgba(255,255,255,.08); --linea:rgba(255,255,255,.09);
  --texto:#f4f6fb; --suave:#a7b2c8; --tenue:#6f7c96;
  --naranja:#ff5a2e; --naranja-2:#ff7a45; --naranja-t:rgba(255,90,46,.14);
  --ok:#2fd08a; --ok-t:rgba(47,208,138,.14);
  --oro:#f2c14e; --plata:#cfd7e4; --bronce:#d38b57;
  --op1:#3d6fd6; --op2:#ff5a2e; --op3:#1fa37f; --op4:#d9a21b;
  --f-display:"Fraunces", Georgia, serif;
  --f-cuerpo:"Work Sans", "Segoe UI", system-ui, sans-serif;
  --f-dato:"JetBrains Mono", ui-monospace, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--texto);font-family:var(--f-cuerpo);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;
  background:var(--fondo);
  background-image:radial-gradient(1200px 600px at 85% -10%, rgba(255,90,46,.16), transparent 60%),
                   radial-gradient(900px 600px at -10% 110%, rgba(61,111,214,.16), transparent 60%),
                   linear-gradient(180deg, var(--fondo) 0%, var(--noche) 100%);
  background-attachment:fixed;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--naranja);outline-offset:3px}
[hidden]{display:none!important}

/* Marca */
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texto)}
.marca img{width:36px;height:36px}
.marca b{font-family:var(--f-display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em}
.marca b span{color:var(--naranja)}

/* Botones */
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--linea);background:var(--vidrio);border-radius:12px;padding:10px 16px;font-weight:600;color:var(--texto);transition:transform .12s,background .15s,border-color .15s}
.btn:hover{background:var(--vidrio-2);border-color:rgba(255,255,255,.18)}
.btn:active{transform:scale(.97)}
.btn.primario{background:linear-gradient(180deg,var(--naranja-2),var(--naranja));border-color:transparent;color:#fff;box-shadow:0 10px 30px -10px rgba(255,90,46,.7)}
.btn.primario:hover{filter:brightness(1.06)}
.btn.grande{padding:16px 24px;font-size:1.08rem;border-radius:14px}

/* Piezas comunes */
.ceja{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--naranja-2)}
.titulo{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;line-height:1.04;margin:0;text-wrap:balance}
.suave{color:var(--suave)}
.dato{font-family:var(--f-dato);font-variant-numeric:tabular-nums}
.vidrio{background:var(--vidrio);border:1px solid var(--linea);border-radius:20px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.n-op{font-family:var(--f-dato);font-weight:700;display:grid;place-items:center;border-radius:12px;color:#fff;background:rgba(255,255,255,.2)}
.avatar{display:grid;place-items:center;border-radius:50%;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.02em}
.avatar .emo{width:66%;height:66%;display:block;object-fit:contain;-webkit-user-drag:none;user-select:none}
.avatar:has(.emo){background:color-mix(in srgb,var(--c, #ff5a2e) 30%,#16223d)!important}
.medalla-1{--m:var(--oro)} .medalla-2{--m:var(--plata)} .medalla-3{--m:var(--bronce)}

@keyframes entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.entra{animation:entra .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes pop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:scale(1)}}
.pop{animation:pop .45s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}