/* Estilo del Arcade AEMATEC: lo usa arcade.html (todos los juegos, Tetris incluido).
   Los estilos de un juego van aquí con el prefijo de su id (p. ej. #g-duelo) para no pisar a los demás. */
:root{
  --bg:#1a1c2c; --panel:#333c57; --panel2:#29366f; --ink:#f4f4f4; --mute:#94b0c2; --dark:#0f1020;
  --red:#b13e53; --orange:#ef7d57; --yellow:#ffcd75; --lime:#a7f070; --green:#38b764; --teal:#257179;
  --blue:#3b5dc9; --sky:#41a6f6; --cyan:#73eff7; --gray:#566c86; --gray-text:#9fb0c4; --purple:#5d275d;
  --felt:#0b3d2e; --felt2:#125a41; --gold:#d4af37;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Press Start 2P',monospace; font-size:11px; line-height:1.7; min-height:100vh;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px);
}
.wrap{max-width:1180px;margin:0 auto;padding:12px 16px 24px}
header{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}
h1{display:flex;align-items:center;gap:10px;font-size:20px;cursor:pointer;user-select:none;-webkit-user-select:none;margin:0;color:var(--yellow);text-shadow:3px 3px 0 var(--red),6px 6px 0 var(--dark);letter-spacing:2px}
h3{margin:0 0 6px;color:var(--yellow);font-size:13px}
h4{margin:0 0 8px;font-size:10px;color:var(--cyan)}
.logo{height:48px;width:auto;image-rendering:pixelated;filter:drop-shadow(3px 3px 0 var(--dark));-webkit-user-drag:none}
.who{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Botón para volver al sitio: mismo estilo pixel-art que los demás botones, junto al resto de controles */
#arcade-volver{font-size:10px}
#arcade-volver:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
/* Aviso de "falta tu nombre" al crear o unirse a una sala en línea */
.who label.falta,.px-in.falta::placeholder{color:var(--red)}
.who label.falta{text-shadow:none}
.px-in.falta,.px-in.falta:focus{box-shadow:0 -4px 0 0 var(--red),0 4px 0 0 var(--red),-4px 0 0 0 var(--red),4px 0 0 0 var(--red)}
.px-in.tiembla{animation:tiembla .2s steps(4) 2}
@keyframes tiembla{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.net{font-size:10px;color:var(--mute)}
.net.on{color:var(--lime)}

.px{
  background:var(--panel);
  box-shadow:0 -4px 0 0 var(--dark),0 4px 0 0 var(--dark),-4px 0 0 0 var(--dark),4px 0 0 0 var(--dark),
             inset 0 4px 0 0 rgba(255,255,255,.08),inset 0 -4px 0 0 rgba(0,0,0,.25);
  margin:4px;
}
button,input{font-family:inherit;font-size:10px;color:var(--ink)}
.btn{
  border:0;cursor:pointer;padding:10px 14px;background:var(--blue);margin:6px;line-height:1.4;
  box-shadow:0 -4px 0 0 var(--dark),0 4px 0 0 var(--dark),-4px 0 0 0 var(--dark),4px 0 0 0 var(--dark),
             inset -4px -4px 0 0 rgba(0,0,0,.3),inset 4px 4px 0 0 rgba(255,255,255,.22);
}
.btn:hover{filter:brightness(1.15)}
.btn:active{transform:translateY(2px);box-shadow:0 -4px 0 0 var(--dark),0 4px 0 0 var(--dark),-4px 0 0 0 var(--dark),4px 0 0 0 var(--dark),inset 4px 4px 0 0 rgba(0,0,0,.3)}
.btn.red{background:var(--red)} .btn.green{background:var(--green)} .btn.gray{background:var(--gray)}
.btn.orange{background:var(--orange);color:var(--dark)} .btn.on{background:var(--yellow);color:var(--dark)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.px-in{
  background:var(--dark);border:0;padding:10px;outline:none;width:150px;text-transform:uppercase;margin:6px;
  box-shadow:0 -4px 0 0 var(--gray),0 4px 0 0 var(--gray),-4px 0 0 0 var(--gray),4px 0 0 0 var(--gray);
}
textarea.px-in{color:var(--ink);font:inherit;font-size:11px;line-height:1.6;text-transform:none}
.px-in:focus{box-shadow:0 -4px 0 0 var(--yellow),0 4px 0 0 var(--yellow),-4px 0 0 0 var(--yellow),4px 0 0 0 var(--yellow)}

nav{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px}
nav .btn{padding:8px 12px}
@media (max-width:700px){nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:4px 2px;margin-bottom:10px}nav::-webkit-scrollbar{display:none}nav .btn{flex:none;font-size:10px}h1{font-size:14px}.logo{height:34px}.who label{display:none}.who label.falta{display:inline}}
.tab{background:var(--panel)}
.tab.on{background:var(--orange);color:var(--dark)}

.game{display:none;gap:18px;align-items:flex-start;flex-wrap:wrap}
.game.on{display:flex}
.main{flex:1 1 580px;min-width:0;padding:14px}
.side{flex:0 0 260px;padding:16px}
@media (max-width:900px){.side{flex:1 1 100%}}
.row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px}
.row.left{justify-content:flex-start}
.msg{text-align:center;color:var(--mute);min-height:1.7em;margin:12px 0 0}
.msg.big{font-size:12px;color:var(--ink)}
.msg.win{color:var(--lime)} .msg.lose{color:var(--orange)}
.scroll{overflow:hidden;padding:6px 0}
.sub{color:var(--mute);font-size:10px;margin:0 0 10px}

/* Tabla */
.lb{list-style:none;margin:0;padding:0}
.lb li{display:grid;grid-template-columns:28px 1fr auto;gap:6px;padding:8px 0;border-bottom:2px dashed var(--panel2);font-size:10px;align-items:center}
.lb li .rk{color:var(--mute)}
.lb li:nth-child(1) .rk,.lb li:nth-child(1) .nm{color:var(--yellow)}
.lb li:nth-child(2) .rk{color:var(--cyan)} .lb li:nth-child(3) .rk{color:var(--orange)}
.lb li .sc{text-align:right;color:var(--lime)}
.lb li .sc small{display:block;color:var(--mute);font-size:10px}
.lb li.muted{display:block;color:var(--mute);border:0}
.lb li.me .nm{text-decoration:underline}
.mini-tabs{display:flex;flex-wrap:wrap;margin:-4px 0 10px -6px}
.mini-tabs .btn{padding:6px 8px;font-size:10px;margin:5px}

/* Buscaminas */
.ms-hud{display:flex;align-items:center;justify-content:center;gap:18px;margin:14px 0 8px}
.lcd{background:#000;color:var(--orange);font-size:16px;padding:8px 10px;letter-spacing:2px;box-shadow:inset 3px 3px 0 0 #333,0 0 0 4px var(--dark)}
.ms-board{--cs:28px;display:grid;background:var(--dark);padding:4px;width:max-content;margin:0 auto;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.cell{
  width:var(--cs);height:var(--cs);display:flex;align-items:center;justify-content:center;font-size:calc(var(--cs) * .42);cursor:pointer;
  background:var(--gray) center/70% no-repeat;image-rendering:pixelated;
  box-shadow:inset 3px 3px 0 0 #8aa0b8,inset -3px -3px 0 0 #29304a;
}
.cell:hover{filter:brightness(1.12)}
.cell.open{background-color:#94b0c2;box-shadow:inset 1px 1px 0 0 #566c86;cursor:default}
.cell.flag{background-image:var(--flag)}
.cell.mine{background-image:var(--mine)}
.cell.boom{background-color:var(--red)}
.cell.wrong{background-color:var(--purple)}
.n1{color:#29366f}.n2{color:#257179}.n3{color:#b13e53}.n4{color:#5d275d}.n5{color:#7a2d1a}.n6{color:#1b5e5e}.n7{color:#000}.n8{color:#333c57}

/* Batalla naval */
.bs-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tag{background:var(--dark);padding:8px 10px;color:var(--yellow)}
.boards{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:10px}
.boards{--bc:28px}
.bgrid{display:grid;grid-template-columns:repeat(10,var(--bc));gap:2px;background:var(--dark);padding:4px;width:max-content;user-select:none;touch-action:manipulation}
.bcell{width:var(--bc);height:var(--bc);background:var(--teal) center/70% no-repeat;image-rendering:pixelated;box-shadow:inset 2px 2px 0 0 #2f8b93,inset -2px -2px 0 0 #1a4f55}
.bcell.ship{background-color:#94b0c2;box-shadow:inset 3px 3px 0 0 #c9d6e0,inset -3px -3px 0 0 #566c86}
.bcell.reveal{opacity:.6}
.bcell.hit{background-image:var(--boom)}
.bcell.miss{background-image:var(--splash)}
.bcell.sunk{background-color:var(--red);box-shadow:inset 3px 3px 0 0 #d45a6e,inset -3px -3px 0 0 #6e2231}
.bcell.prev{background-color:var(--lime)}
.bcell.bad{background-color:var(--red)}
.bgrid.dim{opacity:.4}
.bcell.aim{cursor:crosshair}
.bcell.aim:hover{background-color:var(--yellow)}
#bs-mine .bcell{cursor:pointer}
.fleet{list-style:none;padding:0;margin:8px 0 0;font-size:10px;display:flex;flex-wrap:wrap;gap:2px 12px;max-width:calc(var(--bc) * 10.3)}
.fleet li{display:flex;align-items:center;gap:6px;margin:2px 0;color:var(--mute)}
.fleet li i{display:inline-block;height:8px;background:var(--mute)}
.fleet li.cur{color:var(--yellow)} .fleet li.cur i{background:var(--yellow)}
.fleet li.done{color:var(--lime)} .fleet li.done i{background:var(--lime)}
.fleet li.sunk{color:var(--red);text-decoration:line-through} .fleet li.sunk i{background:var(--red)}

/* Animal al tiro */
.ll-hud{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:12px;font-size:10px}
.ll-hud b{color:var(--yellow)}
.stage{position:relative;background:var(--dark);padding:4px;margin:0 auto}
.stage canvas{display:block;width:100%;image-rendering:pixelated;touch-action:none}
#ll-cv{aspect-ratio:320/200;cursor:crosshair}
.over{position:absolute;inset:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(15,16,32,.78);padding:16px;overflow:auto}
.over p{max-width:460px;margin:0 0 12px}
.pick{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-bottom:10px}
.pick .btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 12px;background:var(--panel)}
.pick .btn.on{background:var(--yellow);color:var(--dark)}
.pick canvas{image-rendering:pixelated;display:block}

/* Carreras */
.rc-sec{margin-bottom:12px}
.rc-sec h4{margin-bottom:2px}
.stats{display:grid;grid-template-columns:auto auto;gap:2px 6px;font-size:10px;text-align:left;align-items:center}
.stats i{display:inline-block;height:6px;background:currentColor}
#rc-cv{aspect-ratio:384/240}
.rc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.plist{list-style:none;margin:10px 0;padding:0}
.plist li{display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:2px dashed var(--panel2);font-size:10px}
.plist li canvas{image-rendering:pixelated}
.plist li small{color:var(--mute);font-size:10px}
/* Perfil: tarjeta (imagen + usuario + descripción) y debajo dos paneles, AMIGOS y RECORDS */
.pf-tarjeta{display:flex;gap:22px;align-items:center;padding:16px;margin-top:10px;flex-wrap:wrap}
.pf-foto{flex:0 0 auto;padding:6px;background:var(--dark);box-shadow:0 0 0 4px var(--yellow),0 0 0 8px var(--dark),4px 4px 0 8px rgba(0,0,0,.35)}
.pf-foto canvas{display:block;width:96px;height:96px;image-rendering:pixelated;background:var(--panel2)}
.pf-datos{flex:1 1 220px;min-width:0}
.pf-nombre{margin:0 0 10px;font-size:20px;color:var(--yellow);word-break:break-all}
.pf-desc{margin:0 0 8px;font-size:11px;line-height:1.7;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.pf-meta{margin:0 0 12px;font-size:9px;line-height:1.6;color:var(--mute)}
.pf-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.pf-panel{padding:14px;min-width:0}
.pf-lista{max-height:360px;overflow:auto;margin:8px 0 0}
.pf-lista li .nm{flex:1 1 auto;min-width:0;word-break:break-word}
.pf-lista li .sc{color:var(--lime);text-align:right;white-space:nowrap}
.pf-lista li .sc small{display:block}
/* La imagen elegida se marca con un marco amarillo sobre fondo oscuro (con el botón amarillo de .btn.on el zorro,
   que también es amarillo-naranja, desaparecía). */
.btn.pf-av.on{background:var(--panel2);color:var(--yellow);box-shadow:0 -4px 0 0 var(--yellow),0 4px 0 0 var(--yellow),-4px 0 0 0 var(--yellow),4px 0 0 0 var(--yellow),inset -4px -4px 0 0 rgba(0,0,0,.3),inset 4px 4px 0 0 rgba(255,255,255,.12)}
.btn.pf-av canvas{background:var(--dark)}
/* Barra de desplazamiento de píxeles (en vez de la gris del navegador): riel punteado y asa amarilla con relieve. */
.pf-lista::-webkit-scrollbar,textarea.px-in::-webkit-scrollbar{width:14px;height:14px}
.pf-lista::-webkit-scrollbar-track,textarea.px-in::-webkit-scrollbar-track{background:repeating-linear-gradient(0deg,var(--dark) 0 4px,#171929 4px 8px);box-shadow:inset 0 0 0 2px var(--panel2)}
.pf-lista::-webkit-scrollbar-thumb,textarea.px-in::-webkit-scrollbar-thumb{background:var(--yellow);border:2px solid var(--dark);box-shadow:inset -4px -4px 0 0 rgba(0,0,0,.3),inset 4px 4px 0 0 rgba(255,255,255,.45)}
.pf-lista::-webkit-scrollbar-thumb:hover,textarea.px-in::-webkit-scrollbar-thumb:hover{background:var(--orange)}
.pf-lista::-webkit-scrollbar-button,textarea.px-in::-webkit-scrollbar-button{display:none}
.pf-lista::-webkit-scrollbar-corner,textarea.px-in::-webkit-scrollbar-corner{background:var(--dark)}
@supports not selector(::-webkit-scrollbar){.pf-lista,textarea.px-in{scrollbar-width:thin;scrollbar-color:var(--yellow) var(--dark)}}
.pf-lista li.ver{cursor:pointer}
.pf-lista li.ver:hover .nm{color:var(--yellow);text-decoration:underline}
@media (max-width:700px){.pf-cols{grid-template-columns:1fr}.pf-tarjeta{justify-content:center;text-align:center}.pf-datos{text-align:center}.pf-datos .row{justify-content:center}}
.dot{width:10px;height:10px;display:inline-block}
.res{width:100%;max-width:520px;border-collapse:collapse;margin:0 auto 12px;font-size:10px}
.res td,.res th{padding:6px 4px;text-align:left;border-bottom:2px dashed var(--panel2)}
.res th{color:var(--mute);font-weight:normal}
.res tr.me td{color:var(--yellow)}
.touch{display:none;justify-content:space-between;margin-top:10px;user-select:none;-webkit-user-select:none}
.touch .btn{min-width:60px;padding:14px 10px;touch-action:none}
@media (pointer:coarse){.touch{display:flex}}
.keys{color:var(--mute);font-size:10px;text-align:center;margin-top:10px}
.shot-bar{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap;justify-content:center}
.shot-bar label{color:var(--yellow);font-size:10px}
.power-slider{-webkit-appearance:none;appearance:none;width:180px;height:14px;background:var(--dark);cursor:pointer;
  box-shadow:0 -3px 0 0 var(--gray),0 3px 0 0 var(--gray),-3px 0 0 0 var(--gray),3px 0 0 0 var(--gray);margin:0}
.power-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:20px;background:var(--orange);border:0;
  box-shadow:0 -3px 0 0 var(--dark),0 3px 0 0 var(--dark),-3px 0 0 0 var(--dark),3px 0 0 0 var(--dark);cursor:pointer}
.power-slider::-moz-range-thumb{width:16px;height:20px;background:var(--orange);border:3px solid var(--dark);border-radius:0;cursor:pointer}
.power-slider:disabled{opacity:.4;cursor:not-allowed}
#gf-shoot:disabled,#bl-shoot:disabled{opacity:.4;cursor:not-allowed}
.foot{margin-top:18px;color:var(--gray-text);font-size:10px;text-align:center}
.credits{margin-top:10px;padding:12px;text-align:center;font-size:10px;color:var(--mute);border-top:4px dotted var(--panel)}
.credits b{color:var(--yellow);font-weight:normal}
.credits a{color:var(--yellow)}
.snd{background:var(--panel);min-width:72px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.snd.off{opacity:.6}
.snd .ico{width:14px;height:14px;fill:currentColor;shape-rendering:crispEdges;flex:none}
.snd .ico-off,.snd.off .ico-on{display:none}
.snd.off .ico-off{display:inline}
.over{overflow:hidden}
.over-in{display:flex;flex-direction:column;align-items:center;transform-origin:center center;flex:none;max-width:none}
/* Intro */
#intro{position:fixed;inset:0;z-index:90;background:#0b0c18;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:16px;transition:opacity .45s}
#intro.out{opacity:0}
#intro canvas{width:min(94vw,calc((100vh - 130px) * 1.6));image-rendering:pixelated;cursor:pointer}
#intro-skip{position:absolute;top:12px;right:12px}
#intro-go{font-size:14px;padding:14px 30px;animation:blink 1s steps(2) infinite}
/* Menú */
#g-menu .main{flex:1 1 100%}
.menu-title{text-align:center;margin:4px 0 14px;font-size:14px;color:var(--yellow)}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.card{display:flex;flex-direction:column;gap:10px;align-items:center;padding:12px;background:var(--panel2);cursor:pointer;border:0;color:var(--ink);font:inherit;font-size:10px;animation:pop .4s steps(4) both;
  box-shadow:0 -4px 0 0 var(--dark),0 4px 0 0 var(--dark),-4px 0 0 0 var(--dark),4px 0 0 0 var(--dark),inset 4px 4px 0 0 rgba(255,255,255,.12),inset -4px -4px 0 0 rgba(0,0,0,.3)}
.card:hover{background:var(--blue);transform:translateY(-3px)}
.card canvas{width:100%;image-rendering:pixelated}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
/* Combate de funciones */
.fc-bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:10px;margin-bottom:8px;min-height:1.7em}
.fc-row{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin-top:6px}
.fc-row label{font-size:12px;color:var(--yellow);margin-left:6px}
.px-in.fx{flex:1 1 160px;text-transform:none;font-size:12px;width:auto;min-width:120px}
.mv{display:inline-flex}
.mv .btn{padding:8px 10px;margin:5px 3px;touch-action:none}
.ex{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:10px;color:var(--mute);margin-left:8px}
.ex button{font:inherit;font-size:10px;background:var(--dark);color:var(--cyan);border:0;padding:5px 6px;cursor:pointer}
.ex button:hover{color:var(--yellow)}
#fc-msg{flex:1 1 200px;margin:0 6px}
#fc-msg.lose{color:var(--orange)}
.howto{font-size:10px;color:var(--mute);line-height:1.9;margin:0}
/* Portadas */
.splash{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:18px 8px;min-height:340px}
.splash canvas{image-rendering:pixelated;width:min(100%,560px);height:auto}
.splash h2{margin:0;font-size:26px;color:var(--yellow);text-shadow:3px 3px 0 var(--red),6px 6px 0 var(--dark);letter-spacing:2px}
.splash p{margin:0;color:var(--mute);font-size:10px;max-width:460px}
.splash .btn{font-size:13px;padding:14px 26px;animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{filter:brightness(1.35)}}
@media (max-width:600px){.splash h2{font-size:18px}}
/* Espectador / conexión */
.spec-toggle{margin-top:6px}
.spec-list{list-style:none;margin:8px 0 0;padding:0;max-height:240px;overflow:auto}
.spec-list li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:2px dashed var(--panel2);font-size:10px}
.spec-list li b{color:var(--cyan)}
.spec-list li small{display:block;color:var(--mute);font-size:10px;margin-top:2px}
.spec-list li.muted{display:block;color:var(--mute);border:0}
.badge{background:var(--purple);padding:3px 6px;font-size:10px;display:inline-block}
.discon{color:var(--orange)}

/* Blackjack (21) */
.bj-table{background:radial-gradient(ellipse at center, var(--felt2) 0%, var(--felt) 72%);padding:16px 10px;position:relative;box-shadow:inset 0 0 0 4px var(--gold),0 0 0 4px var(--dark)}
.bj-dealer{text-align:center;margin-bottom:16px}
.bj-seats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.bj-seat{background:rgba(0,0,0,.28);padding:8px;text-align:center;min-height:100px}
.bj-seat.me{box-shadow:inset 0 0 0 2px var(--yellow)}
.bj-seat.turn{box-shadow:inset 0 0 0 2px var(--lime)}
.bj-seat.turn .bj-card{animation:bjglow 1s steps(2,end) infinite}
@keyframes bjglow{0%{box-shadow:0 -2px 0 0 var(--lime),0 2px 0 0 var(--lime),-2px 0 0 0 var(--lime),2px 0 0 0 var(--lime),0 0 10px 3px var(--lime)}50%{box-shadow:0 -2px 0 0 var(--dark),0 2px 0 0 var(--dark),-2px 0 0 0 var(--dark),2px 0 0 0 var(--dark),0 0 4px 1px var(--lime)}}
.bj-seat.empty{opacity:.35}
.bj-name{font-size:10px;color:var(--mute);margin-bottom:4px;min-height:1.4em}
.bj-name b{color:var(--ink)}
.bj-cards{display:flex;justify-content:center;gap:2px;flex-wrap:wrap;min-height:52px;align-items:center}
.bj-card{width:30px;height:42px;background:#f4f4f4;position:relative;flex:none;
  box-shadow:0 -2px 0 0 var(--dark),0 2px 0 0 var(--dark),-2px 0 0 0 var(--dark),2px 0 0 0 var(--dark)}
.bj-card.back{background:repeating-linear-gradient(45deg,var(--red) 0 4px,#8a2f42 4px 8px)}
.bj-card span{position:absolute;top:2px;left:2px;font-size:10px;line-height:1}
.bj-card span.br{top:auto;left:auto;bottom:2px;right:2px}
.bj-card.red span{color:var(--red)}
.bj-card.black span{color:var(--dark)}
.bj-val{font-size:10px;color:var(--yellow);margin-top:4px;min-height:1.4em}
.bj-status{font-size:10px;margin-top:2px;min-height:1.4em}
.bj-status.bust{color:var(--red)} .bj-status.win{color:var(--lime)} .bj-status.push{color:var(--mute)} .bj-status.bjk{color:var(--yellow)}
.bj-ctrl{display:flex;justify-content:center;gap:6px;margin-top:14px;flex-wrap:wrap}

/* Easter egg */
#egg{position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(15,16,32,.92)}
#egg img{height:min(72vh,120vw);image-rendering:pixelated;box-shadow:0 0 0 6px var(--dark),0 0 0 10px var(--yellow);animation:eggIn .35s steps(4)}
#egg p{color:var(--yellow);font-size:14px;margin:0;text-shadow:3px 3px 0 var(--red)}
@keyframes eggIn{from{transform:scale(.2) rotate(-12deg)}to{transform:none}}

/* Confirmar puntaje */
#lb-confirm{position:fixed;inset:0;z-index:96;display:flex;align-items:center;justify-content:center;background:rgba(15,16,32,.85);padding:16px}
.lb-confirm-box{max-width:320px;padding:20px;text-align:center}
.lb-confirm-box #lb-confirm-msg{margin:0 0 14px}
.lb-confirm-box .px-in{width:100%;margin:6px 0}

/* === CARRERAS v2 === */
.rc-lb-modes{margin-bottom:2px}
.rc-lb-modes .btn{background:var(--panel2);color:var(--ink)}
.rc-lb-modes .btn.on{background:var(--lime);color:var(--dark)}
.rc-col .btn{flex-direction:row;min-width:74px;justify-content:center}
.rc-col small{display:block;font-size:10px;opacity:.8}

/* === DUELO v2 === */
#g-duelo .dl-pickers{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:12px 0}
#g-duelo .dl-pick{flex:1 1 150px;max-width:230px;background:var(--dark);padding:10px 6px;text-align:center;
  box-shadow:0 -4px 0 0 var(--panel2),0 4px 0 0 var(--panel2),-4px 0 0 0 var(--panel2),4px 0 0 0 var(--panel2)}
#g-duelo .dl-pick-t{margin:0 0 8px;color:var(--yellow);font-size:10px}
#g-duelo .dl-prev{display:block;width:72px;height:104px;margin:0 auto 6px;image-rendering:pixelated;background:#e8834f;
  box-shadow:0 0 0 4px var(--panel2)}
#g-duelo .dl-opt{display:flex;align-items:center;justify-content:center;gap:2px;font-size:10px;line-height:1.5}
#g-duelo .dl-opt span{flex:1;min-width:0}
#g-duelo .dl-opt span:only-child{padding:5px 0}
#g-duelo .dl-opt .btn{padding:5px 8px;font-size:10px;margin:5px}
#g-duelo .dl-best{text-align:center;margin:8px 0 0;min-height:1.5em}
#g-duelo #dl-fire2 .btn{flex:1 1 140px;max-width:220px;padding:14px 10px;touch-action:manipulation;user-select:none;-webkit-user-select:none}

/* === COMBATE DE FUNCIONES v2 === */
#fc-time > span{display:inline-block;transform-origin:center}
#fc-mov.shake{animation:fcShake .2s steps(4)}
@keyframes fcShake{0%{transform:translate(0,0)}25%{transform:translate(-3px,2px);color:var(--yellow)}50%{transform:translate(3px,-2px);color:var(--red)}75%{transform:translate(-2px,-1px);color:var(--yellow)}100%{transform:translate(0,0)}}
#fc-clock.pulse{animation:fcPulse 1s steps(8)}
@keyframes fcPulse{0%{transform:scale(1)}25%{transform:scale(1.2)}55%,100%{transform:scale(1)}}
.fc-team{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin:2px 0}
.fc-team b{font-weight:normal;font-size:10px;min-width:84px}
.fc-team .btn{padding:8px 10px;font-size:10px;min-width:92px}
.fc-team .btn.bot{background:var(--purple)}
.fc-team .btn.empty{background:var(--dark);color:var(--mute)}
.fc-opts{display:flex;flex-wrap:wrap;gap:4px 28px}
.fc-step{display:flex;align-items:center;gap:2px}
.fc-step .btn{padding:8px 12px;font-size:12px}
.fc-step .tag{min-width:64px;text-align:center}
#fc-help button{text-transform:none}
@media (max-width:600px){.fc-team b{min-width:0;width:100%}.fc-team .btn{min-width:0}}

/* Movimiento reducido: la persona lo pidió en su sistema operativo/navegador */
@media (prefers-reduced-motion:reduce){
  .px-in.tiembla{animation:none}
  .card{animation:none;animation-delay:0s!important}
  .splash .btn{animation:none}
  #intro-go{animation:none}
  #egg img{animation:none}
  #fc-mov.shake{animation:none}
  #fc-clock.pulse{animation:none}
  #intro{transition:none}
}
a.btn{display:inline-block;text-decoration:none;color:var(--ink)}