/* Base: zonas seguras de móvil y atributo hidden */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{margin:0;padding:0}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* Pub en pixel art a pantalla completa: la diana detrás de todo, marcador LED sobre el centro,
   categoría arriba y controles abajo.
   Tipografía: "Press Start 2P" solo en textos SIN tildes en mayúscula (logo, LED, botones), porque no tiene Á/É/Í/Ó/Ú/Ñ.
   Todo lo demás en VT323, que sí las tiene y se lee bien a partir de 20px. */
:root{
  --wall:#2a1712; --panel:rgba(20,11,8,.88); --edge:#6b4428; --edge-hi:#9a6a3f;
  --led:#ff3b2f; --brass:#f0b75a; --cream:#f2e6c8; --dim:#cdb48f;
  --green:#4fd486; --ink:#0b0605;
  --f-pixel:"Press Start 2P","Courier New",monospace;
  --f-term:"VT323","Courier New",monospace;
  --frame:0 0 0 3px #000,0 0 0 6px var(--edge),0 0 0 9px #000;
  --bx:50vw; --by:50vh; --rs:220px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--wall);color:var(--cream)}
body{font-family:var(--f-term);font-size:23px;line-height:1.2;overflow-x:hidden}

/* Fondo */
#bg{position:fixed;inset:0;z-index:0;background:var(--wall) url("fondo-pixel.jpg") center/cover no-repeat;image-rendering:pixelated}
#bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(11,6,5,.75) 0,rgba(11,6,5,0) 26%,rgba(11,6,5,0) 62%,rgba(11,6,5,.8) 100%),
    radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 45%,rgba(0,0,0,.35) 100%)}
#stuck,#flying{position:fixed;inset:0;pointer-events:none}
#stuck{z-index:1}
#flying{z-index:20}
.dartspr{position:absolute;transform-origin:0 100%;image-rendering:pixelated}

/* Marcador LED sobre la diana */
.led{position:fixed;left:var(--bx);top:var(--by);transform:translate(-50%,-50%);z-index:2;pointer-events:none;
  width:clamp(170px,calc(var(--rs) * 1.08),270px);background:#050202;padding:10px 12px;
  box-shadow:var(--frame),0 10px 30px rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;gap:7px}
.led .cap{font:11px/1 var(--f-pixel);letter-spacing:.12em;color:var(--brass)}
#ledDigits{width:100%;display:flex;justify-content:center}
svg.seg{display:block;width:auto;height:clamp(46px,calc(var(--rs) * .34),76px)}
.seg .on{fill:var(--led);filter:drop-shadow(0 0 3px rgba(255,59,47,.9))}
.led.win .seg .on,.final.win .seg .on{fill:var(--green);filter:drop-shadow(0 0 3px rgba(79,212,134,.9))}
.led.blink .seg{animation:blink .22s steps(1) 4}
@keyframes blink{50%{opacity:.1}}
.pips{display:flex;gap:7px}
.pip{width:10px;height:10px;background:var(--led);box-shadow:0 0 6px var(--led)}
.pip.used{background:#2b0b09;box-shadow:none}

/* Interfaz */
.app{position:relative;z-index:3;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;gap:12px;
  max-width:680px;margin:0 auto;padding:12px 16px}
.panel{background:var(--panel);box-shadow:var(--frame);padding:12px 16px}
.top{display:flex;flex-direction:column;gap:16px;padding-top:9px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.logo{margin:0;font:30px/1 var(--f-pixel);color:var(--led);text-shadow:3px 3px 0 #000,0 0 14px rgba(255,59,47,.6)}
.bar .right{display:flex;align-items:center;gap:12px}
.day{font:24px/1 var(--f-term);letter-spacing:.06em;color:var(--cream);background:var(--panel);padding:8px 10px 6px;box-shadow:0 0 0 3px #000;text-transform:uppercase}
.icon{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;min-width:44px;padding:0 12px;border:0;cursor:pointer;
  color:var(--ink);background:var(--brass);box-shadow:0 0 0 3px #000,inset -3px -3px 0 rgba(0,0,0,.25),inset 3px 3px 0 rgba(255,255,255,.25)}
.icon b{font:18px/1 var(--f-pixel)}
.icon span{font:23px/1 var(--f-term);letter-spacing:.06em;text-transform:uppercase}
.icon.arch{background:var(--cream)}
.icon:active{transform:translate(2px,2px)}
.cat{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.cat .lbl{font:20px/1 var(--f-term);letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.cat h2{margin:0;font:34px/1.05 var(--f-term);letter-spacing:.02em;color:var(--cream);text-wrap:balance;text-shadow:2px 2px 0 #000}
.cat p{margin:0;color:var(--dim);font-size:22px;line-height:1.1}
.cat .tips{margin-top:2px;padding-top:6px;border-top:2px dashed rgba(107,68,40,.9);width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:0 16px;font-size:21px;color:var(--brass)}

.bottom{display:flex;flex-direction:column;gap:12px;padding-bottom:9px}
.play{display:flex;flex-direction:column;gap:10px}
.slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.slot{background:rgba(0,0,0,.6);box-shadow:inset 0 0 0 2px #000;padding:6px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:58px;min-width:0;text-align:center}
.slot .nm{font-size:20px;line-height:1;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.slot .pt{font:28px/.8 var(--f-term);color:var(--cream)}
.slot.empty .nm,.slot.empty .pt{color:#8a7259}
.slot.bust .pt{color:var(--led)}
.slot.new{animation:pop .35s steps(4)}
@keyframes pop{0%{transform:scale(1.25)}100%{transform:scale(1)}}
.inrow{display:flex;gap:10px;position:relative}
#guess{flex:1;min-width:0;background:#000;border:0;box-shadow:inset 0 0 0 2px var(--edge);color:var(--cream);font:28px var(--f-term);padding:8px 12px;caret-color:var(--led);border-radius:0}
#guess::placeholder{color:#8a7259}
#guess:focus{outline:none;box-shadow:inset 0 0 0 2px var(--brass)}
.btn{font:13px/1.3 var(--f-pixel);text-transform:uppercase;color:#fff;background:var(--led);border:0;padding:0 18px;min-height:48px;cursor:pointer;
  box-shadow:0 0 0 3px #000,inset -4px -4px 0 rgba(0,0,0,.3),inset 4px 4px 0 rgba(255,255,255,.2)}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translate(2px,2px)}
.btn:disabled{opacity:.45;cursor:default}
.btn.alt{background:var(--brass);color:var(--ink)}
/* 301: terminar antes de gastar los 5 dardos (pide un segundo toque para confirmar) */
.btn.fin{align-self:center;min-height:38px;padding:0 14px;font-size:11px;background:var(--cream);color:var(--ink)}
.btn.fin.confirm{background:var(--led);color:#fff}
.btn:focus-visible,.icon:focus-visible,.close:focus-visible,.sugg button:focus-visible,.arch-row:focus-visible,.legal button:focus-visible{outline:3px solid var(--cream);outline-offset:4px}
.sugg{list-style:none;margin:0;padding:4px;position:absolute;left:0;right:0;bottom:calc(100% + 12px);z-index:30;background:#0d0706;
  box-shadow:var(--frame);max-height:270px;overflow:auto}
.sugg button{width:100%;text-align:left;background:none;border:0;color:var(--cream);font:25px var(--f-term);padding:5px 10px;cursor:pointer}
.sugg button mark{background:none;color:var(--brass)}
.sugg button:hover,.sugg button.on{background:var(--edge)}
.msg{min-height:24px;font-size:23px;color:var(--brass);text-align:center}
.msg.bad{color:#ff7a6e}
.msg.dim{color:var(--dim)}
.after{position:relative;z-index:3;max-width:680px;margin:0 auto;padding:0 16px 20px;display:flex;flex-direction:column;gap:12px}
.legal{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;font-size:21px}
.legal a{color:var(--dim)}
.legal a:hover{color:var(--cream)}
.legal button{font:inherit;color:var(--dim);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.legal button:hover{color:var(--cream)}

/* Anuncios (ocultos hasta activar publicidad y aceptar) */
.ad{border:2px dashed rgba(242,230,200,.35);background:rgba(11,6,5,.6);color:var(--dim);font:11px/1.6 var(--f-pixel);text-align:center;display:flex;align-items:center;justify-content:center;padding:8px}
.ad:empty::before{content:"PUBLICIDAD"}
.ad:not(:empty){border:0;background:none;padding:0}
.ad-side{display:none;position:fixed;top:50%;transform:translateY(-50%);width:160px;height:600px;z-index:4}
.ad-left{left:16px}.ad-right{right:16px}
.ad-bottom{min-height:60px}
@media (min-width:1100px){.ad-side{display:flex}.ad-bottom{display:none}}

/* Desplegable (ayuda, archivo y resumen) */
.drop{position:fixed;inset:0;z-index:40;display:flex;justify-content:center;align-items:flex-start;padding:0 16px;background:rgba(5,2,2,.6);opacity:0;pointer-events:none;transition:opacity .25s}
.drop.open{opacity:1;pointer-events:auto}
.sheet{width:100%;max-width:580px;max-height:calc(100svh - 30px);overflow:auto;margin-top:12px;background:#140b08;
  box-shadow:var(--frame),0 20px 50px rgba(0,0,0,.7);
  padding:18px 18px 22px;transform:translateY(-110%);transition:transform .45s cubic-bezier(.2,.9,.3,1.15);display:flex;flex-direction:column;gap:16px}
.drop.open .sheet{transform:translateY(9px)}
.sheet>*{flex-shrink:0}
.sh-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.sh-head h3{margin:0;font:34px/1 var(--f-term);letter-spacing:.04em;text-transform:uppercase;color:var(--brass);text-shadow:2px 2px 0 #000}
.sh-sub{color:var(--dim);font-size:22px;margin-top:4px}
.close{font:14px/1 var(--f-pixel);background:none;color:var(--cream);border:0;box-shadow:0 0 0 3px var(--edge);width:38px;height:38px;cursor:pointer;flex:none}
.final{display:flex;align-items:center;justify-content:center;gap:16px;background:#050202;padding:12px;box-shadow:inset 0 0 0 2px #000}
.final .cap{font:11px/1.6 var(--f-pixel);color:var(--brass);text-align:right}
.final svg.seg{height:58px}
.verdict{margin:0;text-align:center;font-size:27px;line-height:1.15;color:var(--cream);text-wrap:balance;text-shadow:2px 2px 0 #000}
table{width:100%;border-collapse:collapse;font-size:23px}
th{font:19px/1 var(--f-term);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:left;padding:6px 6px 8px}
td{padding:5px 6px;border-top:2px solid rgba(107,68,40,.45);vertical-align:baseline}
td.dim{color:var(--dim)}
td.n{color:#9a8268;width:24px}
td.v,th.v,td.q,th.q{text-align:right;white-space:nowrap}
td.v{color:var(--green)}
td.v.b{color:#ff7a6e}
td.v small{font-size:19px;margin-left:6px}
td.q{color:var(--cream)}
tr.total td{border-top:3px solid var(--edge);color:var(--brass)}
tr.total td.v,tr.total td.q{color:var(--brass)}
.best{display:flex;flex-direction:column;gap:8px;text-align:center}
.best .lbl{font-size:20px;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{background:#000;box-shadow:0 0 0 2px var(--edge);padding:2px 8px;font-size:22px}
.chip i{font-style:normal;color:var(--brass);margin-left:6px}
#shareTxt{width:100%;background:#000;color:var(--cream);border:0;box-shadow:inset 0 0 0 2px var(--edge);font:22px var(--f-term);padding:8px;resize:none;border-radius:0}
.acts{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.comeback{text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.comeback b{font:30px/1.1 var(--f-term);text-transform:uppercase;letter-spacing:.04em;color:var(--cream);text-shadow:2px 2px 0 #000}
.countdown{font:20px/1 var(--f-pixel);color:var(--led);text-shadow:0 0 8px rgba(255,59,47,.7)}
/* Gráfica «Dónde quedas» del resumen de 301: curva gris, en latón los jugadores a los que superas, tu marca en rojo LED */
.dist{display:flex;flex-direction:column;gap:8px;text-align:center;background:#0b0605;box-shadow:inset 0 0 0 2px #2a1c14;padding:14px 12px 10px}
.dist .lbl{font-size:20px;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.dist-head{margin:0;font-size:27px;line-height:1.1;color:var(--cream);text-shadow:2px 2px 0 #000}
.dist-head b{font:24px/1 var(--f-pixel);color:var(--brass);text-shadow:2px 2px 0 #000,0 0 12px rgba(240,183,90,.45);margin:0 4px;vertical-align:-1px}
.dist-plot{width:100%}
.dist-plot svg{display:block;width:100%;height:auto;overflow:visible}
.dist .grid{stroke:#2a1c14;stroke-width:1;stroke-dasharray:2 4}
.dist .ax{stroke:#6b4428;stroke-width:2}
.dist .tkl{stroke:#6b4428;stroke-width:2}
.dist .tk{font:18px var(--f-term);fill:var(--dim)}
.dist .bar{transform-box:fill-box;transform-origin:50% 100%;animation:barup .5s steps(5) both}
.dist .bar.lost{fill:#4a3a30}
.dist .bar.won{fill:var(--brass)}
.dist .bar.me{fill:var(--led);filter:drop-shadow(0 0 4px rgba(255,59,47,.8))}
@keyframes barup{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.dist .mk{stroke:var(--led);stroke-width:2}
.dist .pill{fill:var(--led)}
.dist .you{font:22px var(--f-term);fill:#fff}
.dist-axis{margin:0;font-size:19px;color:var(--dim)}
.dist-head b.diana{display:block;font:30px/1.1 var(--f-term);letter-spacing:.04em;margin:0;color:var(--green);text-shadow:2px 2px 0 #000,0 0 12px rgba(79,212,134,.5)}
.rules{margin:0;padding-left:28px;display:flex;flex-direction:column;gap:8px}
.rules strong{color:var(--brass);font-weight:400}
.rules li::marker{color:var(--green)}

/* Archivo de días anteriores */
.arch-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.arch-row{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;background:#000;color:var(--cream);
  border:0;box-shadow:inset 0 0 0 2px var(--edge);padding:8px 12px;cursor:pointer;font:inherit}
.arch-row:hover{box-shadow:inset 0 0 0 2px var(--brass)}
.arch-row.today{box-shadow:inset 0 0 0 2px var(--green)}
.arch-row .d{color:var(--green);white-space:nowrap;text-transform:uppercase}
.arch-row .t{line-height:1.05;overflow-wrap:anywhere}
.arch-row .st{font-size:20px;color:var(--dim);white-space:nowrap;text-transform:uppercase}
.arch-row .st.win{color:var(--green)}
.arch-row .st.go{color:var(--brass)}

.shake{animation:shake .22s steps(2)}
@keyframes shake{25%{transform:translate(2px,-1px)}50%{transform:translate(-2px,1px)}75%{transform:translate(1px,1px)}}
.stamp{position:fixed;left:var(--bx);top:calc(var(--by) - var(--rs) * .62);transform:translate(-50%,-50%) rotate(-8deg);z-index:21;
  font:16px/1 var(--f-pixel);color:#fff;background:var(--led);padding:10px 12px;box-shadow:0 0 0 3px #000;opacity:0;pointer-events:none}
.stamp.show{animation:stamp 1.1s steps(6) forwards}
@keyframes stamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(2)}15%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}80%{opacity:1}100%{opacity:0}}

/* Banner de cookies: solo aparece si la publicidad está activa */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:35;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:#140b08;box-shadow:0 -3px 0 #000,0 -6px 0 var(--edge)}
.ck-in{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.ck-in h2{margin:0;font:28px/1 var(--f-term);text-transform:uppercase;color:var(--brass)}
.ck-in p{margin:0}
.ck-in a{color:var(--green)}
.ck-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ck-btns .btn{padding:0 6px;background:var(--brass);color:var(--ink)}
.ck-opt{display:flex;gap:10px;align-items:flex-start;background:#000;box-shadow:inset 0 0 0 2px var(--edge);padding:10px}
.ck-opt input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--green);flex:none}
.ck-opt small{display:block;color:var(--dim);font-size:20px}

.icon span.hlp{display:none}
@media (min-width:760px){.icon span.hlp{display:inline}}
@media (max-width:600px){.cat h2{font-size:28px}.cat p{font-size:20px}.cat .tips{font-size:19px}.panel{padding:10px 12px}}
@media (max-width:440px){.logo{font-size:22px}.day{font-size:20px;padding:7px 7px 5px}.icon{height:40px;min-width:40px;padding:0 8px}.icon span{font-size:20px}
  .bar .right{gap:9px}.btn{padding:0 12px;font-size:11px}.slot .nm{font-size:17px}.slot .pt{font-size:25px}.ck-btns .btn{font-size:10px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Enlaces entre juegos: el logo lleva a la portada y el botón con icono al otro juego */
.logo a{color:inherit;text-decoration:none}
.icon.swap{text-decoration:none}
.icon.swap img{width:24px;height:24px;display:block}
.icon.swap.to-301{background:#f2e6c8}
.icon.swap.to-pop{background:#cfe0ff}
.icon.swap.to-sob{background:#fbe7a1}
/* En pantallas estrechas los accesos a los otros juegos muestran solo el icono */
@media (max-width:639px){.icon.swap span{display:none}.icon.swap{padding:0 8px}}

/* ---------- Portada NumericosdelDia ---------- */
/* Fondo: una habitación retro en pixel art (habitacion.svg) con guiños a los tres juegos; el velo oscurece
   el centro para que las tarjetas se lean bien */
body.hub{min-height:100vh;min-height:100svh;background:#1d1a2e}
body.hub #bg{background:#1d1a2e url("habitacion.svg") center/cover no-repeat}
body.hub #bg::after{background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,rgba(0,0,0,0) 1px 3px),
  linear-gradient(to bottom,rgba(12,10,20,.7) 0,rgba(12,10,20,0) 22%),
  radial-gradient(ellipse at 50% 45%,rgba(12,10,20,.62) 0,rgba(12,10,20,.4) 45%,rgba(12,10,20,.15) 100%)}
body.hub .hub-head p{color:var(--cream);text-shadow:2px 2px 0 #000,0 0 10px #000}
body.hub .hub-wrap{position:relative;z-index:3}
.hub-wrap{max-width:1040px;margin:0 auto;padding:40px 16px 24px;display:flex;flex-direction:column;gap:28px}
.hub-head{text-align:center;display:flex;flex-direction:column;gap:12px}
.hub-logo{margin:0;font:34px/1.3 var(--f-pixel);color:var(--led);text-shadow:4px 4px 0 #000,0 0 16px rgba(255,59,47,.5);overflow-wrap:anywhere}
/* Cada palabra del logo con el color de un juego: rojo 301, azul Pop, amarillo Sobrevive con 100 */
.hub-logo .w2{color:#5b8cff;text-shadow:4px 4px 0 #000,0 0 16px rgba(91,140,255,.5)}
.hub-logo .w3{color:#f5c518;text-shadow:4px 4px 0 #000,0 0 16px rgba(245,197,24,.5)}
.hub-head p{margin:0;font-size:25px;color:var(--dim)}
.games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.game{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:22px 18px;color:var(--cream);text-decoration:none;
  background:rgba(12,8,6,.96);box-shadow:var(--frame),0 14px 30px rgba(0,0,0,.45);transition:transform .15s steps(3)}
.game.gpop{background:rgba(14,18,24,.96);box-shadow:0 0 0 3px #000,0 0 0 6px #5b6675,0 0 0 9px #000,0 14px 30px rgba(0,0,0,.45)}
.game:hover{transform:translateY(-4px)}
.game:focus-visible{outline:3px solid var(--cream);outline-offset:12px}
.gico{width:72px;height:72px;image-rendering:pixelated}
.gtxt{display:flex;flex-direction:column;gap:8px;align-items:center}
.game h2{margin:0;font:26px/1 var(--f-pixel);color:var(--led);text-shadow:3px 3px 0 #000}
.game.gpop h2{color:#5b8cff}
.game.gsob{background:rgba(22,17,8,.96);box-shadow:0 0 0 3px #000,0 0 0 6px #7a5f1c,0 0 0 9px #000,0 14px 30px rgba(0,0,0,.45)}
.game.gsob h2{color:#f5c518;font-size:20px;line-height:1.3}
.game p{margin:0;font-size:22px;line-height:1.15;color:var(--dim)}
.gst{font-size:21px;color:var(--brass);text-transform:uppercase;letter-spacing:.06em}
.gst.done{color:var(--green)}
.game .gst{margin-top:auto} /* «Día #N» y «Jugar», abajo del todo: a la misma altura en las tres tarjetas */
.game .btn{display:inline-flex;align-items:center;justify-content:center;min-width:150px;margin-top:-4px}
.game.gpop .btn{background:#3b6fe0}
.game.gsob .btn{background:#f5c518;color:var(--ink)}
.hub-next{margin:0;text-align:center;font-size:23px;color:var(--cream);text-shadow:2px 2px 0 #000;display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
@media (max-width:900px){.games{grid-template-columns:1fr;gap:28px}}
@media (max-width:640px){.hub-logo{font-size:19px}.hub-wrap{padding-top:28px}}

/* «Otros juegos de hoy» al final de cada resumen: una fila por juego, con su color */
.otros{display:flex;flex-direction:column;gap:10px;text-align:center;padding-top:14px;border-top:2px dashed rgba(107,68,40,.9)}
.otros .lbl{font-size:20px;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.otros-list{display:flex;flex-direction:column;gap:10px}
.otro{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;padding:8px 12px;background:#000;color:var(--cream);text-decoration:none;
  box-shadow:inset 0 0 0 2px var(--oc,var(--edge))}
.otro:hover{filter:brightness(1.15)}
.otro:focus-visible{outline:3px solid var(--cream);outline-offset:4px}
.otro img{width:40px;height:40px;image-rendering:pixelated;display:block}
.otro .ot{display:flex;flex-direction:column;gap:2px;min-width:0}
.otro b{font-weight:400;font-size:26px;line-height:1;color:var(--oc)}
.otro .os{font-size:20px;line-height:1.05;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.otro .os.done{color:var(--green)}
.otro .og{font:11px/1 var(--f-pixel);text-transform:uppercase;padding:10px 10px 9px;background:var(--oc);color:var(--ogc,#fff);box-shadow:0 0 0 2px #000}
.otro.o-301{--oc:#ff3b2f}
.otro.o-pop{--oc:#5b8cff}
.otro.o-sobrevive{--oc:#f5c518;--ogc:#0b0605}