/* Divisas Arcade · estilos */
body{margin:0}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* Layout: una columna de máquina recreativa (máx. 520px), pantalla de juego a altura completa; un solo tema oscuro, deliberado. */
:root{
  --fondo:#06120e;        /* verde casi negro, el del paño de la hombrera de noche */
  --panel:#0d211a;
  --borde:#1f4136;
  --texto:#e8f0eb;
  --tenue:#8fb0a3;
  --oro:#f2c14e;          /* galón */
  --oro-osc:#8a6410;
  --rojo:#e5483f;         /* ribete */
  --verde:#4fd18b;
  --f-display:"Silkscreen","Courier New",monospace;
  --f-texto:"Chakra Petch","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
[hidden]{display:none!important}
body{background:var(--fondo);color:var(--texto);font-family:var(--f-texto);font-size:16px;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.18) 2px 3px),
             radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}
.app{max-width:520px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px 18px;box-sizing:border-box}
.pantalla{display:flex;flex-direction:column;gap:14px;flex:1}
h1,h2,.hud,.boton,.chip,.etiqueta,.marcador{font-family:var(--f-display)}
.etiqueta{font-family:var(--f-texto)}
h1{font-size:clamp(30px,9vw,44px);line-height:1;margin:6px 0 0;color:var(--oro);text-shadow:0 3px 0 var(--oro-osc),0 0 22px rgba(242,193,78,.35);text-wrap:balance}
h2{font-size:20px;margin:0;color:var(--oro);text-wrap:balance}
p{margin:0;line-height:1.45}
.sub{color:var(--tenue);font-size:15px}
.etiqueta{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}

/* desfile de hombreras de la portada */
.desfile{display:flex;justify-content:center;gap:8px;padding:6px 0 2px}
.desfile svg{width:44px;height:auto;animation:sube 2.4s ease-in-out infinite}
.desfile svg:nth-child(2){animation-delay:.2s}.desfile svg:nth-child(3){animation-delay:.4s}
.desfile svg:nth-child(4){animation-delay:.6s}.desfile svg:nth-child(5){animation-delay:.8s}
@keyframes sube{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.bloque{background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{appearance:none;border:2px solid var(--borde);background:transparent;color:var(--tenue);border-radius:999px;padding:9px 12px;font-size:12px;cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--oro);color:var(--fondo);background:var(--oro)}
.modos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.boton{appearance:none;border:0;border-radius:10px;padding:14px 12px;font-size:15px;cursor:pointer;color:#1a1204;background:var(--oro);
  box-shadow:0 5px 0 var(--oro-osc);transition:transform .06s,box-shadow .06s;text-transform:uppercase;letter-spacing:.04em}
.boton:active{transform:translateY(4px);box-shadow:0 1px 0 var(--oro-osc)}
.boton.sec{background:var(--panel);color:var(--texto);border:2px solid var(--borde);box-shadow:0 5px 0 #02080600}
.boton small{display:block;font-family:var(--f-texto);font-size:12px;text-transform:none;letter-spacing:0;margin-top:4px;font-weight:600;opacity:.8}
.boton:focus-visible,.chip:focus-visible,.op:focus-visible{outline:3px solid #fff;outline-offset:2px}
.records{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-family:var(--f-display);font-size:13px;color:var(--tenue)}
.records b{color:var(--oro);font-weight:400}
.pie{display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:space-between;align-items:center;margin-top:auto}
.volumen{display:flex;align-items:center;gap:10px}
.volumen .etiqueta{flex:none}
input[type=range]{accent-color:var(--oro);width:100%;min-width:0}
input[type=range].mini{width:96px;flex:none}
.enlace{appearance:none;background:none;border:0;color:var(--tenue);font-family:var(--f-display);font-size:12px;cursor:pointer;padding:8px 4px;text-decoration:underline;text-underline-offset:3px}

/* HUD */
.hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;font-size:14px}
.hud .pts{font-size:22px;color:var(--oro);font-variant-numeric:tabular-nums}
.hud .der{text-align:right}
.vidas{letter-spacing:2px;color:var(--rojo);font-size:16px}
.mult{display:inline-block;padding:3px 7px;border-radius:6px;background:var(--borde);color:var(--texto);font-size:13px}
.mult.caliente{background:var(--rojo);color:#fff;animation:late .5s infinite alternate}
@keyframes late{to{transform:scale(1.12)}}
.racha{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1}
.racha b{font-family:var(--f-display);font-weight:400;font-size:28px;color:var(--texto);font-variant-numeric:tabular-nums;transition:color .2s}
.racha span:not(.mult){font-family:var(--f-display);font-size:9px;letter-spacing:.1em;color:var(--tenue);text-transform:uppercase}
.racha.on b{color:var(--oro);text-shadow:0 0 14px rgba(242,193,78,.6)}
.racha.fuego b{color:var(--rojo);text-shadow:0 0 18px rgba(229,72,63,.8);animation:late .4s infinite alternate}
.racha.salto b{animation:salto .35s}
@keyframes salto{40%{transform:scale(1.45)}}
.grado{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:4px 10px}
.grado svg{height:44px;width:auto}
.grado b{font-size:15px;display:block}
.grado .etiqueta{font-size:9px}
.grado .prog{display:flex;gap:4px}
.grado .prog i{width:9px;height:9px;border-radius:2px;background:var(--borde)}
.grado .prog i.on{background:var(--oro)}
.grado.sube{animation:destello .7s}
.grado.baja{animation:tiembla .3s;border-color:var(--rojo)}
@keyframes destello{30%{box-shadow:0 0 0 2px var(--oro),0 0 24px rgba(242,193,78,.6)}}
.segmento{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--borde);border-radius:10px;overflow:hidden}
.segmento button{appearance:none;border:0;background:transparent;color:var(--tenue);font-family:var(--f-display);font-size:12px;padding:10px 6px;cursor:pointer}
.segmento button[aria-pressed="true"]{background:var(--borde);color:var(--oro)}
.icono-px{height:1.35em;width:auto;vertical-align:-.3em;margin-right:.45em;image-rendering:pixelated}
.calavera-px{height:1.35em;width:auto;vertical-align:-.3em;margin-right:.45em;image-rendering:pixelated}
.boton.peligro{grid-column:1/-1;background:var(--rojo);color:#fff;box-shadow:0 5px 0 #7d1c16}
.boton.peligro:active{box-shadow:0 1px 0 #7d1c16}
.reloj{height:8px;border-radius:99px;background:var(--panel);border:1px solid var(--borde);overflow:hidden}
.reloj i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--rojo),var(--oro) 35%,var(--verde));transform-origin:left;}
.reloj.off{visibility:hidden}

.pregunta{background:var(--panel);border:1px solid var(--borde);border-radius:12px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;min-height:0}
.pregunta .enun{font-size:19px;font-weight:700;text-align:center;text-wrap:balance}
.pregunta .cuerpo{font-family:var(--f-display);font-size:11px;letter-spacing:.1em;color:var(--fondo);background:var(--tenue);padding:3px 8px;border-radius:4px;text-transform:uppercase}
.grande{height:min(34vh,250px);width:auto;max-width:100%;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.ops{display:grid;gap:9px}
.ops.imgs{grid-template-columns:1fr 1fr}
.op{appearance:none;width:100%;text-align:left;border:2px solid var(--borde);background:#0a1a14;color:var(--texto);border-radius:10px;padding:12px 14px;
  font-family:var(--f-texto);font-size:17px;font-weight:600;cursor:pointer;display:flex;gap:10px;align-items:center;min-height:52px;
  box-shadow:0 4px 0 #020806;transition:transform .06s,box-shadow .06s,background .15s}
.op:active{transform:translateY(3px);box-shadow:0 1px 0 #020806}
.op .k{font-family:var(--f-display);font-size:12px;color:var(--fondo);background:var(--tenue);border-radius:4px;padding:2px 6px;flex:none}
.ops.imgs .op{justify-content:center;padding:8px;position:relative}
.ops.imgs .op .k{position:absolute;top:6px;left:6px}
.ops.imgs .op svg{height:min(17vh,130px);width:auto}
.dos .op{flex-direction:column;justify-content:center;padding:10px}
.dos .op svg{height:min(28vh,210px);width:auto}
.dos .op .nom{font-size:14px;color:var(--tenue);text-align:center;min-height:1.2em}
.op.bien{border-color:var(--verde);background:#0f3a26}
.op.mal{border-color:var(--rojo);background:#3a1210;animation:tiembla .3s}
.op[disabled]{cursor:default}
@keyframes tiembla{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.flotante{position:absolute;top:30%;left:50%;transform:translateX(-50%);font-family:var(--f-display);font-size:26px;color:var(--oro);
  text-shadow:0 2px 0 var(--oro-osc);pointer-events:none;animation:flota .8s ease-out forwards;white-space:nowrap}
@keyframes flota{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-50px)}}
.banner{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:40;font-family:var(--f-display);font-size:clamp(26px,8vw,40px);color:var(--oro);
  text-shadow:0 3px 0 var(--oro-osc),0 0 30px rgba(242,193,78,.6);pointer-events:none;animation:banner 1.3s ease-out forwards;white-space:nowrap}
@keyframes banner{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%)}}
.fiebre .pregunta{box-shadow:0 0 0 2px var(--rojo),0 0 26px rgba(229,72,63,.45)}

.correccion{border:2px solid var(--rojo);background:#1f0c0a;border-radius:12px;padding:12px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.correccion svg{height:120px;width:auto}
.correccion b{font-family:var(--f-display);font-weight:400;color:var(--oro);font-size:15px}
.correccion p{font-size:15px}
.correccion .boton{grid-column:1/-1}

/* fin */
.marcador{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.marcador div{background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:10px 4px}
.marcador b{display:block;font-size:22px;color:var(--oro);font-weight:400;font-variant-numeric:tabular-nums}
.marcador span{font-size:10px;color:var(--tenue);letter-spacing:.08em}
.record{color:var(--verde);font-family:var(--f-display);text-align:center;font-size:15px;animation:late .6s infinite alternate}
.lista{display:grid;gap:8px}
.tarjeta{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:8px 10px}
.tarjeta svg{width:52px;height:auto}
.tarjeta b{display:block;font-size:16px}
.tarjeta p{font-size:14px;color:var(--tenue)}
.tarjeta .c{font-family:var(--f-display);font-size:10px;color:var(--tenue);letter-spacing:.08em;text-transform:uppercase}
.grupo{font-family:var(--f-display);font-size:13px;color:var(--oro);margin:6px 0 0}
/* monigotes pixel */
.mono{display:inline-block;height:30px;margin-block:-4px;width:auto;flex:none;image-rendering:pixelated}
.mono .m1{animation:paso1 .52s steps(1) infinite}.mono .m2{animation:paso2 .52s steps(1) infinite}
@keyframes paso1{0%{opacity:1}50%{opacity:0}}
@keyframes paso2{0%{opacity:0}50%{opacity:1}}
.chip{display:inline-flex;align-items:center;gap:7px}
.chip[aria-pressed="false"] .mono g{animation-play-state:paused}
.pregunta .mono{position:absolute;left:12px;top:10px;height:70px;transform-origin:50% 100%;filter:drop-shadow(0 3px 0 rgba(0,0,0,.45))}
.pregunta .mono.avanza{animation:acerca 2.6s linear infinite}
@keyframes acerca{0%{transform:scale(.55);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:scale(1.25);opacity:0}}
@media (prefers-reduced-motion:reduce){.mono g{animation:none!important}.mono .m2{opacity:0}}
/* portada de competición */
.titulo{display:flex;align-items:center;gap:.3em;white-space:nowrap;font-size:clamp(18px,5.9vw,40px)}
.eyebrow-comp{letter-spacing:.04em;white-space:nowrap;font-size:clamp(9px,2.7vw,12px)}
.corona-px{height:1.25em;width:auto;flex:none;image-rendering:pixelated;filter:drop-shadow(0 3px 0 var(--oro-osc)) drop-shadow(0 0 14px rgba(242,193,78,.45));animation:corona 2.4s ease-in-out infinite}
@keyframes corona{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ---- app: cuenta y clasificación ---- */
.form{display:grid;gap:12px}
.campo{display:grid;gap:6px}
.campo input,.campo select{appearance:none;background:#0a1a14;border:2px solid var(--borde);border-radius:10px;color:var(--texto);font:600 17px var(--f-texto);padding:12px 14px;min-width:0}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--oro)}
.dos-campos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.error{color:var(--rojo);font-weight:600;min-height:1.2em;margin:0}
.yo{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:6px 10px;flex-wrap:wrap}
.yo>div:first-child{min-width:0}
.yo b{color:var(--oro);font-family:var(--f-display);font-weight:400;font-size:15px}
.aviso{font-size:13px;color:var(--tenue);text-align:center}
.tabla-c{display:grid;gap:6px}
.fila-c{appearance:none;width:100%;box-sizing:border-box;text-align:left;display:grid;grid-template-columns:34px 30px 1fr auto;gap:8px;align-items:center;
  background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:6px 10px;color:var(--texto);font:600 15px var(--f-texto)}
button.fila-c{cursor:pointer}
.fila-c .p{font-family:var(--f-display);font-size:15px;color:var(--tenue);text-align:center}
.fila-c:nth-child(1) .p{color:var(--oro)}.fila-c:nth-child(2) .p{color:#d9dde0}.fila-c:nth-child(3) .p{color:#d08a4a}
.fila-c svg{width:24px;height:auto}
.fila-c>span{min-width:0;overflow-wrap:anywhere}
.fila-c small{display:block;color:var(--tenue);font-weight:400;font-size:13px}
.fila-c .v{font-family:var(--f-display);color:var(--oro);font-size:16px;font-variant-numeric:tabular-nums}
.fila-c.mia{border-color:var(--oro);box-shadow:0 0 0 1px var(--oro) inset}
.fila-c .sin{grid-column:2/4}
.vacio{color:var(--tenue);text-align:center;padding:18px 0}
.segmento.tres{grid-template-columns:1fr 1fr 1fr}
.puesto{font-family:var(--f-display);text-align:center;color:var(--verde);font-size:15px}

/* ---- legibilidad: la letra pixel solo en títulos, puntos y botones; lo pequeño, en Chakra Petch ---- */
.etiqueta{font-family:var(--f-texto);font-weight:700;font-size:12px;letter-spacing:.08em}
.eyebrow-comp{font-size:clamp(10.5px,3.1vw,13px);letter-spacing:.06em}
.racha span:not(.mult){font-family:var(--f-texto);font-weight:700;font-size:11px;letter-spacing:.06em}
.grado .etiqueta{font-size:11px}
.marcador span{font-family:var(--f-texto);font-weight:700;font-size:12px}
.tarjeta .c{font-family:var(--f-texto);font-weight:700;font-size:12px}
.pregunta .cuerpo{font-family:var(--f-texto);font-weight:700;font-size:12px}
.enlace{font-family:var(--f-texto);font-weight:600;font-size:14px}
.chip{font-size:13px}
.segmento button{font-size:13px}
.op .k{font-size:13px}
.boton small{font-size:13px}
.grupo{font-size:14px}
.records{font-size:14px}

/* ---- podio de la portada y clasificación ---- */
.podio{display:flex;flex-direction:column;gap:10px}
.podio .cab{display:flex;justify-content:space-between;align-items:center;gap:8px}
.podio h3{margin:0;font-family:var(--f-display);font-size:16px;color:var(--oro);font-weight:400;display:flex;align-items:center;gap:8px}
.podio h3 .icono-px{margin:0}
.insignia{width:22px;height:auto;image-rendering:pixelated;flex:none}
.fila-c{grid-template-columns:30px 34px 1fr auto}
.fila-c .p{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:13px;line-height:1}
.fila-c .p .insignia{width:24px}
.fila-c.r1{border-color:#5fd8ef;background:linear-gradient(90deg,rgba(95,216,239,.14),var(--panel) 60%)}
.fila-c.r2{border-color:#9b5cf0;background:linear-gradient(90deg,rgba(155,92,240,.14),var(--panel) 60%)}
.fila-c.r3{border-color:var(--oro-osc);background:linear-gradient(90deg,rgba(242,193,78,.12),var(--panel) 60%)}
.fila-c.r1 .v{color:#8fefff}.fila-c.r2 .v{color:#c79bff}
.leyenda{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--tenue)}
.leyenda span{display:inline-flex;align-items:center;gap:4px}
.leyenda .insignia{width:16px}
.mini-tabs{display:flex;gap:6px}
.mini-tabs button{appearance:none;border:1px solid var(--borde);background:transparent;color:var(--tenue);border-radius:999px;padding:5px 10px;font:700 12px var(--f-texto);cursor:pointer}
.mini-tabs button[aria-pressed="true"]{background:var(--borde);color:var(--oro)}
.ver-mas{align-self:center}

/* ---- cuenta, perfil, historial, privacidad ---- */
.codigo{font-family:var(--f-display);font-size:clamp(22px,7vw,30px);letter-spacing:.08em;color:var(--oro);text-align:center;
  background:#0a1a14;border:2px dashed var(--oro-osc);border-radius:10px;padding:14px 8px;user-select:all;word-break:break-all}
.peligro-txt{color:var(--rojo)}
.historial{display:grid;gap:6px}
.hist{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:8px 10px;font-size:14px}
.hist b{font-family:var(--f-display);font-weight:400;color:var(--oro);font-size:15px;font-variant-numeric:tabular-nums}
.hist small{color:var(--tenue);display:block}
.hist svg{width:20px;height:auto}
.texto-largo{display:grid;gap:10px;font-size:15px;line-height:1.5}
.texto-largo h3{margin:6px 0 0;font-size:15px;color:var(--oro)}
.enlace.peligro-txt{color:var(--rojo)}
.boton[disabled]{opacity:.55;cursor:wait}
.boton.rojo{background:var(--rojo);color:#fff;box-shadow:0 5px 0 #7d1c16}

/* ---- cabecera: centrada y medida con el ancho de la columna, para que nunca se salga ---- */
.cabecera{container-type:inline-size;text-align:center}
.cabecera .titulo{justify-content:center;font-size:min(32px,6.6cqi)}
.cabecera .eyebrow-comp{display:block;font-size:min(13px,2.9cqi)}

/* ---- reto del día, duelos, racha de días, logros, estadísticas y administración ---- */
.boton.azul{background:#2b6bd6;color:#fff;box-shadow:0 5px 0 #173d7d}
.boton.azul:active{box-shadow:0 1px 0 #173d7d}
.boton.azul.hecho{background:var(--panel);color:var(--tenue);border:2px solid var(--borde);box-shadow:none}
.boton.morado{background:#8a4fd6;color:#fff;box-shadow:0 5px 0 #4b2380;position:relative}
.boton.morado:active{box-shadow:0 1px 0 #4b2380}
.globo{position:absolute;top:-8px;right:-6px;min-width:24px;height:24px;border-radius:12px;background:var(--rojo);color:#fff;
  font:400 13px/24px var(--f-display);box-shadow:0 0 0 2px var(--fondo);animation:latido 1.2s ease-in-out infinite}
@keyframes latido{50%{transform:scale(1.15)}}
.segmento.cuatro{grid-template-columns:repeat(4,1fr)}
.mini-tabs.periodos{justify-content:flex-end;margin-top:-4px}
.mini-tabs.periodos button{padding:3px 9px;font-size:11.5px}
.reloj.ultimos i{animation:parpadeo .5s steps(2) infinite}
@keyframes parpadeo{50%{opacity:.35}}
.racha-dias{flex-basis:100%;display:flex;align-items:center;gap:8px;font-size:14px}
.racha-dias .icono-px{width:20px;height:auto}
.racha-dias b{color:var(--oro);font:400 14px var(--f-display)}
.racha-dias span{color:var(--tenue);font-size:13px}
.racha-dias.riesgo .icono-px{filter:grayscale(.7);opacity:.7}
.logros{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.logro{background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:8px 10px;display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center;opacity:.45}
.logro .icono-px{grid-row:span 2;width:24px;height:auto;filter:grayscale(1)}
.logro b{font-size:13.5px;line-height:1.15}
.logro small{color:var(--tenue);font-size:12px;line-height:1.2}
.logro.on{opacity:1;border-color:var(--oro)}
.logro.on .icono-px{filter:none}
.barras{display:grid;gap:6px;margin-bottom:6px}
.barra{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;font-size:14px}
.barra .mono{width:24px;height:auto}
.barra i{display:block;height:6px;margin-top:3px;border-radius:3px;background:linear-gradient(90deg,var(--verde) var(--p),var(--borde) var(--p))}
.barra b{font:400 14px var(--f-display);color:var(--oro);font-variant-numeric:tabular-nums}
.balance{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;font-family:var(--f-display)}
.balance b{display:block;font-size:24px;color:var(--oro)}
.balance span{font:700 12px var(--f-texto);color:var(--tenue);letter-spacing:.06em}
.fila-d{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--borde);
  border-radius:10px;padding:8px 10px;font-size:14px}
.fila-d > .icono-px{width:20px;height:auto}
.fila-d > span{min-width:0;overflow-wrap:anywhere}
.fila-d small{display:block;color:var(--tenue);font-size:12.5px}
.fila-d > b{font:400 16px var(--f-display);color:var(--oro);font-variant-numeric:tabular-nums}
.fila-d.gana{border-color:var(--verde)}
.fila-d.pierde > b{color:var(--rojo)}
.fila-d.pendiente{border-color:#8a4fd6}
.fila-d.mia{box-shadow:0 0 0 1px var(--oro) inset}
.fila-d.oculto{opacity:.6}
.boton.mini{padding:7px 10px;font-size:12px;box-shadow:0 3px 0 var(--oro-osc)}
.boton.mini.sec,.boton.mini.rojo{box-shadow:none}
.rojo-txt{color:var(--rojo)}
.texto-largo a{color:var(--oro)}
.modos > [hidden] ~ .boton,.modos > .boton:has(~ [hidden]){grid-column:1/-1}