/* Estética del juego: fuente, colores y fondos sacados de los archivos del juego (carpeta ui/) */
@font-face{font-family:"InaPixel";src:url("ui/inapixel.ttf") format("truetype");font-display:swap}
:root{
  --night:#29295a;            /* azul marino de los menús del juego */
  --navy:#294a83;             /* relleno de botones y paneles */
  --navy-d:#182041;
  --line:#dedede;             /* borde claro de los marcos */
  --ink:#101010;              /* borde oscuro interior */
  --gold:#ffb44a;             /* texto dorado de los botones */
  --yellow:#ffe81a;
  --sky-t:#bdf6ff;            /* texto celeste de los botones naranjas */
  --orange:#ee7300; --orange-d:#8b3908;
  --cyan:#30a0c0; --teal:#103848;
  --chalk:#f4f8ff;
  --fire:#ee7300;
  --sky:#2f7de1; --rival:#e04a3a;
  --panel:rgba(24,32,65,.86);
  --panel-line:#8fb4e8;
  --e-fuego:#ff7a1a; --e-viento:#4fc8f0; --e-bosque:#5cc94a; --e-montana:#c98f42;
  --font-ui:"InaPixel","Trebuchet MS",system-ui,sans-serif;
  color-scheme:dark;
}
html,body{height:100%;margin:0;overflow:hidden;background:var(--night);color:var(--chalk);font-family:var(--font-ui);font-size:18px;
  -webkit-font-smoothing:none;font-smooth:never;
  overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
#app,#touch,#pad{touch-action:none}
#shell{position:fixed;top:0;bottom:0;left:0;right:0;margin:0 auto;max-width:520px;overflow:hidden;background:#1d4a22}
#app{position:absolute;inset:0}
#app canvas{display:block}
#touch{position:absolute;inset:0;z-index:2}
[hidden]{display:none!important}
img,.pix,.crest{image-rendering:pixelated}
.tx{text-shadow:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink)}

/* Marcador del partido (estilo barra azul del juego) */
.hud{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:center;align-items:flex-start;
  padding-top:calc(env(safe-area-inset-top,0px) + 6px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(60px,env(safe-area-inset-right,0px));pointer-events:none}
.score{display:flex;align-items:stretch;background:rgba(31,46,104,.88);border:2px solid var(--ink);box-shadow:0 0 0 1px var(--line);overflow:hidden;max-width:100%}
.score .team{padding:1px 4px;font-size:12px;display:flex;align-items:center;gap:3px;min-width:0}
.score .team span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:58px}
.score .team img{width:16px;height:16px;flex-shrink:0;image-rendering:pixelated}
.score .goals{padding:0 6px;font-size:18px;background:var(--navy-d);color:var(--yellow);display:flex;align-items:center;gap:4px}
.score .clock{padding:1px 6px;font-size:12px;display:flex;align-items:center;border-left:2px solid var(--ink);white-space:nowrap;color:var(--gold)}
#pauseBtn{position:absolute;z-index:6;pointer-events:auto;width:38px;height:38px;
  top:calc(env(safe-area-inset-top,0px) + 8px);right:max(16px,env(safe-area-inset-right,0px));
  background:var(--navy);border:2px solid var(--ink);box-shadow:0 0 0 2px var(--line);color:var(--gold);font:18px var(--font-ui);cursor:pointer}

#stick{position:absolute;z-index:3;width:116px;height:116px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(242,246,236,.45);background:rgba(8,18,12,.28)}
#stick.rest{left:max(30px,env(safe-area-inset-left,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 34px);opacity:.5}
#stick.live{transform:translate(-50%,-50%);opacity:.9}
#knob{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:rgba(242,246,236,.85)}
#stick.sprint #knob{background:var(--fire)}

#pad{position:absolute;z-index:3;width:172px;height:172px;
  right:max(18px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 26px)}
.act{position:absolute;border-radius:50%;border:2px solid var(--line);box-shadow:inset 0 0 0 2px var(--ink);background:rgba(41,74,131,.82);color:var(--chalk);
  font-family:var(--font-ui);font-size:12px;line-height:1.05;display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;touch-action:none;transition:transform .08s;padding:0;overflow:hidden}
.act small{font-size:12px;opacity:.9;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act.down{transform:scale(.9)}
.act.big{width:86px;height:86px;right:0;bottom:0;font-size:18px;color:var(--gold)}
.act.s2{width:62px;height:62px;right:98px;bottom:4px}
.act.s3{width:66px;height:66px;right:10px;bottom:96px}
.act.s4{width:56px;height:56px;right:90px;bottom:80px}
.act.s6{width:38px;height:38px;right:24px;bottom:168px;font-size:20px;padding:0}
.act.s5{width:56px;height:56px;right:158px;bottom:20px}
.act.s2 small{font-size:12px;transform:scale(.8)}
.act.fire{border-color:#ffd08a;background:rgba(238,115,0,.82)}
.act.fire[data-elem="viento"]{border-color:var(--e-viento);background:rgba(10,70,100,.82)}
.act.fire[data-elem="bosque"]{border-color:var(--e-bosque);background:rgba(20,80,20,.82)}
.act.fire[data-elem="montaña"]{border-color:var(--e-montana);background:rgba(90,56,18,.82)}
.act.fire::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(rgba(0,0,0,.62) calc(var(--cd,0) * 360deg),transparent 0)}
.act.off{opacity:.35}
.tutbox{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.tutin{max-width:360px;background:var(--navy);border:3px solid var(--ink);box-shadow:0 0 0 3px var(--yellow);padding:14px;display:flex;flex-direction:column;gap:10px;color:var(--chalk)}
.tutin p{font-size:15px;line-height:1.4;margin:0}
.mixer{display:flex;flex-direction:column;gap:8px}.mixer label{display:flex;flex-direction:column;gap:4px;font-size:16px}.mixer input{width:100%}
body.gamepad #pad,body.gamepad #stick{display:none!important}
.act.s5::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(rgba(0,0,0,.62) calc(var(--cd,0) * 360deg),transparent 0)}
.act.s5.cool{opacity:.7}
/* Botones a tu gusto (0.35.4, TouchLayout): el pad ocupa el campo y cada botón va a su centro (--lx, --ly) con su tamaño (--k) */
#pad.custom{inset:0;width:auto;height:auto;pointer-events:none}
#pad.custom .act{pointer-events:auto;left:var(--lx);top:var(--ly);right:auto;bottom:auto;transform:translate(-50%,-50%) scale(var(--k,1))}
#pad.custom .act.down{transform:translate(-50%,-50%) scale(calc(var(--k,1) * .9))}
#stick[data-lay].rest{left:var(--lx);top:var(--ly);bottom:auto;transform:translate(-50%,-50%) scale(var(--k,1))}
#stick[data-lay].live{transform:translate(-50%,-50%) scale(var(--k,1))}

.toast{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 62px);transform:translateX(-50%);z-index:20;font-size:18px;
  background:var(--navy);border:2px solid var(--ink);box-shadow:0 0 0 2px var(--line);padding:6px 12px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .25s;color:var(--gold)}
.toast.on{opacity:1}
.banner{position:absolute;left:0;right:0;top:30%;z-index:6;text-align:center;pointer-events:none;opacity:0;transform:scale(.9);transition:opacity .2s,transform .2s;
  font-size:48px;letter-spacing:.02em;text-transform:uppercase;color:var(--yellow);padding:0 16px;text-wrap:balance;
  text-shadow:3px 0 0 #102060,-3px 0 0 #102060,0 3px 0 #102060,0 -3px 0 #102060,3px 3px 0 #102060,-3px 3px 0 #102060,3px -3px 0 #102060,-3px -3px 0 #102060,0 6px 0 rgba(0,0,0,.35)}
.banner.on{opacity:1;transform:scale(1)}
.banner.rival{color:#ffb4a8}
.banner.gold{color:#ffd23a}
.banner.flag{color:#fff;font-size:30px;text-shadow:3px 0 0 #b0201a,-3px 0 0 #b0201a,0 3px 0 #b0201a,0 -3px 0 #b0201a}
.banner.tech{font-size:36px;top:17%;color:#ffd23a;text-shadow:3px 0 0 #8a2a05,-3px 0 0 #8a2a05,0 3px 0 #8a2a05,0 -3px 0 #8a2a05,0 0 16px rgba(255,122,26,.8)}
.banner.tech.viento{color:#e6fbff;text-shadow:3px 0 0 #0d4a6a,-3px 0 0 #0d4a6a,0 3px 0 #0d4a6a,0 -3px 0 #0d4a6a,0 0 16px rgba(79,200,240,.9)}
.banner.tech.bosque{color:#e2ffa8;text-shadow:3px 0 0 #1d4d17,-3px 0 0 #1d4d17,0 3px 0 #1d4d17,0 -3px 0 #1d4d17,0 0 16px rgba(92,201,74,.9)}
.banner.tech.montana{color:#ffe6b0;text-shadow:3px 0 0 #4a2e10,-3px 0 0 #4a2e10,0 3px 0 #4a2e10,0 -3px 0 #4a2e10,0 0 16px rgba(201,143,66,.9)}
.banner.tech.rivaltech{top:auto;bottom:34%}

/* Pantallas: fondo del juego + panel azul con doble borde */
.overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:flex-start;justify-content:center;
  background:var(--night) url("ui/bg_stripes.png") repeat center top/256px auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:calc(env(safe-area-inset-top,0px) + 16px) calc(env(safe-area-inset-bottom,0px) + 16px);overflow-y:auto;touch-action:pan-y}
.overlay.bg-cover{background-repeat:no-repeat;background-size:cover;background-position:center}
#pause.overlay{background:rgba(24,32,65,.82)}
.card{width:100%;max-width:420px;background:var(--panel);border:2px solid var(--ink);box-shadow:0 0 0 2px var(--line),0 6px 0 4px rgba(0,0,0,.35);
  padding:16px 14px;display:flex;flex-direction:column;gap:12px;margin:auto}
.card h1{margin:0;font-size:36px;line-height:1;font-weight:400;text-transform:uppercase}
.card h1 span{display:block;font-size:18px;color:var(--gold);margin-top:6px;text-transform:none}
.card h2{margin:0;font-size:24px;font-weight:400;text-wrap:balance;color:var(--yellow);text-align:center;
  background:linear-gradient(#1060e8,#0838a8);border:2px solid var(--ink);box-shadow:0 0 0 2px #6fb0ff;padding:4px 10px;
  text-shadow:2px 0 0 #081850,-2px 0 0 #081850,0 2px 0 #081850,0 -2px 0 #081850,2px 2px 0 #081850,-2px -2px 0 #081850,2px -2px 0 #081850,-2px 2px 0 #081850}
.card h3{margin:4px 0 0;font-size:18px;font-weight:400;color:var(--gold);border-bottom:2px solid var(--navy);padding-bottom:2px}
.card h3 small{display:block;color:var(--chalk);opacity:.75;font-size:12px;margin-top:2px}
.card b{font-weight:400;color:var(--gold)}
.group{display:flex;flex-direction:column;gap:6px}
.group label{font-size:12px;color:var(--sky-t)}
.opts{display:flex;gap:4px;background:var(--navy-d);border:2px solid var(--ink);padding:3px}
.opts button{flex:1;font:18px var(--font-ui);color:var(--chalk);background:transparent;border:0;padding:7px 4px;cursor:pointer}
.opts button[aria-pressed="true"]{background:var(--orange);color:#fff;box-shadow:inset 0 -3px 0 var(--orange-d)}
button:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.note{font-size:12px;opacity:.9;margin:0;line-height:1.6}
.note b{color:var(--gold)}
/* 0.52.14 (AnZonY): las explicaciones de los modos, los ajustes y el gacha, plegadas en «Más información» (moreInfo en game.js) */
details.more-info{margin:2px 0}
details.more-info>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:32px;font-size:12px;color:var(--gold);user-select:none}
details.more-info>summary::-webkit-details-marker{display:none}
details.more-info>summary::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor}
details.more-info[open]>summary::after{border-top:0;border-bottom:5px solid currentColor}
details.more-info .mi-i{display:inline-grid;place-items:center;width:16px;height:16px;border:2px solid currentColor;border-radius:50%;font-size:10px;font-weight:700;line-height:1}
details.more-info>summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
details.more-info>.note,details.more-info>.gd-note{margin-top:2px}
/* Botón naranja del juego (como «Inicio» o «Superada») */
.cta{font:24px var(--font-ui);color:var(--sky-t);background:linear-gradient(var(--orange) 0 62%,var(--orange-d) 62%);
  border:2px solid var(--ink);box-shadow:0 0 0 2px var(--line);padding:9px 10px 11px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;
  text-shadow:2px 0 0 #204173,-2px 0 0 #204173,0 2px 0 #204173,0 -2px 0 #204173,2px 2px 0 #204173,-2px -2px 0 #204173,2px -2px 0 #204173,-2px 2px 0 #204173}
.cta small{font-size:12px;color:#fff;text-shadow:1px 1px 0 #5a2000}
.cta:active{transform:translateY(2px)}
/* Botón azul con texto dorado (como «Elegir uniforme») */
.ghost{font:18px var(--font-ui);color:var(--gold);background:var(--navy);border:2px solid var(--ink);box-shadow:0 0 0 2px var(--line);padding:8px;cursor:pointer}
.ghost:active{transform:translateY(2px)}
.keys{font-size:12px;line-height:1.6;opacity:.85;margin:0}
.keys b{color:var(--gold)}
.result{font-size:48px;text-align:center;margin:0;color:var(--yellow);display:flex;align-items:center;justify-content:center;gap:12px}
.result img{width:64px;height:64px}
.result small{display:block;font-size:12px;color:var(--chalk);opacity:.8}
.result .sc{display:flex;flex-direction:column;align-items:center}
.runbar{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:18px;align-items:center;background:var(--navy-d);border:2px solid var(--ink);padding:4px 8px}
.runbar span:first-child{color:var(--gold)}
.hearts{color:#ff5a6e;letter-spacing:2px}.hearts s{color:rgba(242,246,236,.25);text-decoration:none}
.path{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.path li{font-size:12px;padding:3px;background:var(--navy-d);border:2px solid var(--ink);display:flex;flex-direction:column;align-items:center;gap:2px;width:56px;text-align:center;opacity:.8}
.path li img{width:40px;height:40px}
.path li span{max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.path li.done{opacity:.45}.path li.done img{filter:grayscale(1)}
.path li.now{background:var(--orange);box-shadow:0 0 0 2px var(--line);opacity:1}
.vsrow{display:flex;align-items:center;gap:8px;background:var(--navy-d);border:2px solid var(--ink);padding:6px}
.vsrow img.crest{width:48px;height:48px;flex-shrink:0}
.vsrow .faces{display:flex;gap:2px;flex-wrap:wrap}
.vsrow .rv-media{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:4px;background:#ffe14a;color:#1a1d33;font-size:12px;vertical-align:middle;margin-right:8px}   /* 0.52.12: la media del rival */
.vsrow .faces canvas{width:40px;height:40px;background:#1a2a5a;border:1px solid var(--ink)}
.vsrow b{display:block;font-size:18px}
.cards{display:flex;flex-direction:column;gap:8px}
.pcard,.rcard{display:flex;gap:10px;align-items:flex-start;background:var(--navy);border:2px solid var(--ink);box-shadow:0 0 0 2px #5a7ab8;padding:6px;text-align:left;color:var(--chalk);font-family:var(--font-ui);cursor:pointer}
.pcard.sel{box-shadow:0 0 0 2px var(--yellow);background:#3a5aa0}
.rcard{width:100%}
.rcard:hover,.rcard:focus-visible{box-shadow:0 0 0 2px var(--yellow)}
.pix{flex-shrink:0;background:linear-gradient(#3f6fc0,#1c3270);border:2px solid var(--ink)}
.pinfo{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.pname{font-size:18px;color:#fff}
.pname em,.rk em{font-style:normal;font-size:12px;background:#7c4dd1;color:#fff;padding:0 4px;margin-left:4px}
.rk{font-size:12px;color:var(--gold)}
.pmeta{font-size:12px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.ptechs{display:flex;flex-direction:column;gap:2px}
.tline{display:flex;gap:5px;align-items:center;font-size:12px;flex-wrap:wrap}
.tline b{color:#fff}
.tline i{font-style:normal;opacity:.75;font-size:12px}
.ppass{font-size:12px;color:var(--sky-t)}
.chip{font-size:12px;padding:0 4px;color:#10140f;background:#ccc;border:1px solid var(--ink)}
.chip.fuego{background:var(--e-fuego)}.chip.viento{background:var(--e-viento)}.chip.bosque{background:var(--e-bosque)}.chip.montana{background:var(--e-montana)}
/* Posición natural (Picker.pos): colores de Victory Road con texto oscuro; «TODOS», claro */
.chip.pos{color:#10140f;background:#e9edff}.chip.pos.por{background:#f0c040}.chip.pos.def{background:#4aa3ff}.chip.pos.med{background:#ff9f40}.chip.pos.del{background:#ff5a5a}
/* Estadísticas como la ficha del juego */
.ups{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;background:var(--navy);border:2px solid var(--ink);box-shadow:0 0 0 2px #5a7ab8;padding:6px}
.ups button{font:18px var(--font-ui);color:var(--sky-t);background:var(--navy-d);border:0;border-bottom:2px solid #62deff;padding:3px 6px;cursor:pointer;
  display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left}
.ups button b{color:#fff}
.ups button small{grid-column:1/3;color:var(--gold);font-size:12px}
.ups button:disabled{opacity:.55;cursor:default}
.gains{margin:0;padding-left:18px;font-size:18px;line-height:1.6}

.cta:disabled{opacity:.45;cursor:default;transform:none}
.modes{display:flex;flex-direction:column;gap:10px}
.mode{display:flex;align-items:center;gap:10px;text-align:left;font-family:var(--font-ui);color:var(--chalk);cursor:pointer;
  background:var(--navy);border:2px solid var(--ink);box-shadow:0 0 0 2px var(--line);padding:6px 10px 6px 6px}
.mode img{width:48px;height:48px;flex-shrink:0}
.mode .mt{display:flex;flex-direction:column;gap:2px;min-width:0}
.mode b{font-size:24px;color:var(--gold);font-weight:400}
.mode small{font-size:12px}
.mode .mini{display:flex;gap:2px;flex-wrap:wrap;margin-top:2px}.mode .mini img{width:24px;height:24px}
.mode:active{transform:translateY(2px)}
.mode.locked{background:#30304a;box-shadow:0 0 0 2px #77778a;opacity:.75}.mode.locked img{filter:grayscale(1)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ghost.big{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;font-size:24px}
.ghost small,.ghost.big small{font-size:12px;color:var(--chalk);opacity:.85}
.ghost[aria-pressed="true"]{box-shadow:0 0 0 2px var(--yellow)}
.rar{font-size:12px;padding:0 4px;color:#10140f;border:1px solid var(--ink)}
.pcard.empty{justify-content:center;padding:16px;font-size:18px;color:var(--gold);border-style:dashed}
/* Rareza de una copia (0–6: común, poco común, raro, épico, legendario, mítico, único) y su nivel. --rar-N = su color, el mismo que
   Stats.RAR_COLOR (la única, prisma): lo usan el chip .rar.rN y el marco del retrato del selector (picker.css).
   --rc = el color de la rareza en cada .rN (tarjetas de fusión de pixel-ui.css; la única, blanco) */
:root{--rar-0:#b8bcc8;--rar-1:#4fd27a;--rar-2:#3f8fff;--rar-3:#a24cff;--rar-4:#ffcc22;--rar-5:#ff4f6d;--rar-6:linear-gradient(90deg,#ff5a5a,#ffcc22,#4fd27a,#3f8fff,#a24cff)}
.r0{--rc:var(--rar-0)}.r1{--rc:var(--rar-1)}.r2{--rc:var(--rar-2)}.r3{--rc:var(--rar-3)}.r4{--rc:var(--rar-4)}.r5{--rc:var(--rar-5)}.r6{--rc:#ffffff}
.rar:is(.r0,.r1,.r2,.r3,.r4,.r5){background:var(--rc)}.rar.r3{color:#000}
.rar.r6{background:var(--rar-6)}
.lvtag{font-size:12px;color:var(--gold);white-space:nowrap}
.plv{font-size:14px;margin-top:4px}.plv small{font-size:12px;opacity:.85}
.lvup .lvu{white-space:nowrap}
.slot{font-size:12px;color:var(--gold)}
.evo{font-size:12px;opacity:.85;margin-left:4px}
.phead{display:flex;gap:12px;align-items:center}.phead h2{margin:0 0 6px;text-align:left}
.gshard,.gspark{position:fixed;z-index:51;pointer-events:none}
.gshard{width:8px;height:8px;box-sizing:border-box;border:2px solid #080e21}
.gspark{color:#fff;font-size:22px;line-height:1;font-style:normal;text-shadow:0 0 6px #fff}
.reveal{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.gcard{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;background:var(--navy);border:2px solid var(--ink);box-shadow:0 0 0 2px #8a96b0;text-align:center;
  opacity:0;transform:translateY(10px) scale(.9);animation:pop .35s ease-out forwards}
.gcard .pix{width:80px;height:80px}
.gcard.poco{box-shadow:0 0 0 2px #4fd27a}
.gcard.raro{box-shadow:0 0 0 2px #5aa9ff}
.gcard.epico{box-shadow:0 0 0 2px #b07cff,0 0 14px rgba(176,124,255,.6)}
.gcard.legendario{box-shadow:0 0 0 2px #ffd23a,0 0 18px rgba(255,190,58,.8)}
.gcard.mitico{box-shadow:0 0 0 2px #ff4f6d,0 0 18px rgba(255,79,109,.8)}
.gcard.unico{box-shadow:0 0 0 2px #fff,0 0 20px rgba(160,200,255,.9)}
.gcard.epico .pix{background:linear-gradient(#b07cff,#4a2a9a)}
.gcard.legendario .pix{background:linear-gradient(#ffd23a,#ee7300)}
.gcard.mitico .pix{background:linear-gradient(#ff8094,#a8183a)}
.gcard.unico .pix{background:linear-gradient(135deg,#ff5a5a,#ffcc22,#4fd27a,#3f8fff,#a24cff)}
.gnote{font-size:11px;line-height:1.25;color:#ffb3a3}
.gbest{color:#ffb3a3}
.gname{font-size:12px;line-height:1.3;color:#fff}
.gmeta{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;font-size:12px;align-items:center}
.gtag{font-size:12px;color:var(--yellow)}
@keyframes pop{to{opacity:1;transform:none}}
select{font:18px var(--font-ui);color:var(--chalk);background:var(--navy-d);border:2px solid var(--ink);box-shadow:0 0 0 2px #5a7ab8;padding:6px}
select option{color:#111;font-family:system-ui}
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tracks .ghost{font-size:12px;padding:8px}
/* Modo carrera */
.cicon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}
.chead{display:flex;gap:10px;align-items:center;margin:10px 0}.chead b{display:block;font-size:20px;color:var(--yellow)}.chead small{font-size:12px}
.cstats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:6px 0}
.cstats>div{background:rgba(10,18,48,.55);border:2px solid var(--ink);padding:4px 6px;display:flex;flex-direction:column;gap:2px}
.cstats label{font-size:12px;opacity:.8}.cstats small{font-size:12px}.cmoney{color:var(--gold);font-weight:normal}
.cbar{display:block;height:8px;background:#0a1230;border:1px solid var(--ink)}.cbar i{display:block;height:100%;background:var(--yellow)}
.cbar.ok i{background:#7ee36a}.cbar.warn i{background:#ffb03a}.cbar.bad i{background:#e04a3a}
.cweek{text-align:center;font-size:14px;margin:6px 0}.cweek b{color:var(--yellow);font-weight:normal}
.cnext{display:flex;gap:10px;align-items:center;background:rgba(31,46,104,.85);border:2px solid var(--ink);box-shadow:0 0 0 2px #5a7ab8;padding:8px 10px;margin:8px 0}
.cnext b{display:block;color:var(--gold);font-weight:normal}.cnext small{font-size:12px}
.ccrest{width:40px;height:40px;flex-shrink:0;image-rendering:pixelated;vertical-align:middle}
.ccrest.you{display:inline-flex;align-items:center;justify-content:center;font-size:24px;color:var(--yellow);background:#1f2e68;border:2px solid var(--ink);border-radius:50%;width:36px;height:36px}
.cvs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;text-align:center;margin:10px 0}
.cvs>div{display:flex;flex-direction:column;align-items:center;gap:3px}.cvs b{font-weight:normal;font-size:14px}.cvs small{font-size:12px;opacity:.85}
.cvs>span{font-size:32px;color:var(--yellow)}.cvs .ccrest{width:56px;height:56px}.cvs .ccrest.you{width:52px;height:52px;font-size:30px}
.cmsg{background:rgba(10,18,48,.6);border-left:4px solid var(--yellow);padding:6px 8px}.cmsg.bad{border-color:#e04a3a}.cmsg.gold{border-color:#ffd23a;color:#fff}
.cfeed{max-height:44vh;overflow:auto}.cfeed p{margin:4px 0;font-size:14px;padding:4px 6px;background:rgba(10,18,48,.55)}.cfeed p.mine{border-left:3px solid var(--yellow)}.cfeed p.rival{border-left:3px solid #ff8a7a}
.cfeed i{color:var(--gold);font-style:normal;display:inline-block;min-width:30px}
.cres p{margin:3px 0;font-size:14px;padding:3px 6px;background:rgba(10,18,48,.45)}.cres p.you,.cres p.now{background:rgba(255,210,58,.18)}.cres b{color:var(--yellow);font-weight:normal}
.ccal p{display:flex;align-items:center;gap:6px}.ccal i{font-style:normal;color:var(--gold);min-width:30px}.ccal .ccrest{width:24px;height:24px}.ccal .ccrest.you{width:22px;height:22px;font-size:14px}
.ctable{width:100%;border-collapse:collapse;font-size:12px}.ctable th{color:var(--gold);font-weight:normal;padding:2px}.ctable td{padding:2px 3px;text-align:center;background:rgba(10,18,48,.45)}
.ctable td.tn{text-align:left;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ctable .ccrest{width:20px;height:20px}.ctable .ccrest.you{width:18px;height:18px;font-size:12px}
.ctable tr.you td{background:rgba(255,210,58,.25)}.ctable tr.zup td:first-child{box-shadow:inset 3px 0 0 #7ee36a}.ctable tr.zdown td:first-child{box-shadow:inset 3px 0 0 #e04a3a}
.ckey .zup{color:#7ee36a}.ckey .zdown{color:#e04a3a}
.cmgrs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.cmgr{display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(10,18,48,.55);border:2px solid var(--ink);padding:6px;color:var(--chalk);font:12px var(--font-ui);cursor:pointer;width:96px}
.cmgr.sel{box-shadow:0 0 0 3px var(--yellow)}
.csquad{display:flex;flex-direction:column;gap:6px}
.cpl{display:flex;gap:8px;align-items:center;text-align:left;background:rgba(31,46,104,.8);border:2px solid var(--ink);padding:5px;color:var(--chalk);font:14px var(--font-ui);cursor:pointer}
.cpl.sel{box-shadow:0 0 0 2px var(--yellow)}.cpl b{font-weight:normal;color:var(--gold)}.cpl small{font-size:12px}.cpl .cst{display:block;font-size:12px;opacity:.9}.cpl .cst b{color:#fff}
.ccrest.big{width:48px;height:48px}.ccrest.huge{width:72px;height:72px}
.chead #cMgr canvas{border-radius:50%}
.cnav{margin-top:12px}
.cnext.vencido{border-color:var(--yellow);box-shadow:0 0 0 2px var(--yellow)}.cnext.vencido .cta{margin-top:6px;width:auto;padding:4px 10px;font-size:18px}
.cpl.btn{cursor:pointer}.cplb{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cpl .mini,.cta.mini,.ghost.mini{width:auto;margin:4px 0 0;padding:4px 10px;font-size:14px;align-self:flex-start}
.cpl.fac{align-items:center}.cpl.fac .cta.mini{margin:0;flex-shrink:0}
.row2{display:flex;gap:6px;flex-wrap:wrap}
.negbox{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px 0}.negbox b{font-size:24px;color:var(--yellow);font-weight:normal;min-width:110px;text-align:center}.negbox .ghost{width:auto;padding:6px 12px}
.swatches{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.sw{width:30px;height:30px;border:2px solid var(--ink);box-shadow:0 0 0 1px #5a7ab8;cursor:pointer;padding:0}.sw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--yellow)}
.clubpv{display:flex;align-items:center;gap:12px;justify-content:center;margin:8px 0}.clubpv b{display:block;color:var(--yellow);font-weight:normal;font-size:20px}.clubpv small{font-size:14px}
.kitpv{background:rgba(10,18,48,.5);border:2px solid var(--ink)}
.syms button{font-size:18px}
textarea#sCode{width:100%;box-sizing:border-box;margin:8px 0;font:16px monospace;color:var(--chalk);background:var(--navy-d);border:2px solid var(--ink);box-shadow:0 0 0 2px #5a7ab8;padding:6px;-webkit-user-select:text;user-select:text;touch-action:manipulation;resize:vertical}
.ctable tr.zpo td:first-child{box-shadow:inset 3px 0 0 #ffd23a}.ckey .zpo{color:#ffd23a}
/* PC: sin controles en pantalla, campo más ancho y ayuda de teclas */
.pc #shell{max-width:760px}
.pc #pad,.pc #stick{display:none!important}
#keyhud{display:none}
.pc #keyhud:not([hidden]){display:flex;position:absolute;z-index:3;left:12px;right:12px;bottom:10px;gap:8px;align-items:flex-end;justify-content:space-between;pointer-events:none}
.kh-keys{font-size:12px;line-height:1.5;background:rgba(10,18,48,.72);border:2px solid var(--ink);padding:3px 8px;color:var(--chalk);max-width:62%}
.kh-keys b,.kh-tech b{color:var(--gold);font-weight:normal}
.kh-tech{position:relative;overflow:hidden;font-size:12px;background:rgba(238,115,0,.85);border:2px solid #ffd08a;padding:4px 10px;color:#fff;white-space:nowrap;max-width:38%;text-overflow:ellipsis}
.kh-tech[data-elem="viento"]{background:rgba(10,70,100,.85);border-color:var(--e-viento)}
.kh-tech[data-elem="bosque"]{background:rgba(20,80,20,.85);border-color:var(--e-bosque)}
.kh-tech[data-elem="montaña"]{background:rgba(90,56,18,.85);border-color:var(--e-montana)}
.kh-tech i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--cd,0) * 100%);background:rgba(0,0,0,.55)}
.kh-tech span,.kh-tech b{position:relative;z-index:1}
.kh-tech.off{opacity:.4;background:rgba(10,18,48,.72);border-color:var(--ink)}
.kh-tech.ready{box-shadow:0 0 0 2px var(--yellow)}
.pc button:not(:disabled):hover{filter:brightness(1.15)}
.giftin{display:flex;gap:8px;margin:10px 0}
.giftin input{flex:1;min-width:0;font:18px var(--font-ui);color:var(--chalk);background:var(--navy-d);border:2px solid var(--ink);box-shadow:0 0 0 2px #5a7ab8;padding:8px;text-transform:uppercase;-webkit-user-select:text;user-select:text;touch-action:manipulation}
.giftin .cta{width:auto;margin:0;padding:8px 14px}
.giftmsg{min-height:24px;font-size:14px;margin:4px 0}.giftmsg.ok{color:var(--yellow)}.giftmsg.bad{color:#ffb4a8}
/* Intro (0.32): tráiler con el juego en movimiento. Cada escena es una capa .in-layer dentro de .in-stage (entra con un corte, una
   cortinilla o un deslizamiento: nada de zoom lento); el rótulo .in-cap va encima con su franja; .in-flash = destello; Saltar arriba */
#intro{position:fixed;inset:0;z-index:50;background:#000;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;
  --in-y:#ffe81a;--in-o:#ff7a1a;--in-r:#8a2a05;--in-n:#05081a;--in-fs:clamp(24px,min(7.6vw,6.6vh),40px)}
#intro .in-stage{position:absolute;inset:0;z-index:0;overflow:hidden}
#intro .in-stage.in-shake{animation:inShake .34s steps(6) both}
@keyframes inShake{20%{transform:translate(-8px,5px)}40%{transform:translate(7px,-6px)}60%{transform:translate(-5px,-3px)}80%{transform:translate(4px,4px)}100%{transform:none}}
.in-layer{position:absolute;inset:0;overflow:hidden;background:var(--in-n)}
.in-layer.in-cut{animation:inCut .3s cubic-bezier(.2,.9,.3,1) both}
@keyframes inCut{from{transform:scale(1.22);filter:brightness(2.4)}to{transform:none;filter:none}}
.in-layer.in-wipe{animation:inWipe .34s cubic-bezier(.7,0,.3,1) both}
@keyframes inWipe{from{clip-path:polygon(0 100%,100% 118%,100% 100%,0 100%)}to{clip-path:polygon(0 -18%,100% 0,100% 100%,0 100%)}}
.in-layer.in-slide{animation:inSlide .32s cubic-bezier(.2,.9,.3,1) both}
@keyframes inSlide{from{transform:translateX(105%) skewX(-14deg)}to{transform:none}}
.in-layer.in-slideL{animation:inSlideL .32s cubic-bezier(.2,.9,.3,1) both}
@keyframes inSlideL{from{transform:translateX(-105%) skewX(14deg)}to{transform:none}}
.in-layer.in-fade{animation:inFade .5s ease-out both}
@keyframes inFade{from{opacity:0}to{opacity:1}}
/* Fondo de líneas de velocidad: rayos que giran moviendo el ángulo del degradado (--ra), sin capas gigantes que roten */
@property --ra{syntax:'<angle>';inherits:false;initial-value:0deg}
.in-rays::before{content:'';position:absolute;z-index:-1;inset:0;
  background:repeating-conic-gradient(from var(--ra) at 50% 45%,var(--rc,rgba(255,232,26,.2)) 0 5deg,transparent 5deg 14deg);animation:inRays .7s linear infinite}
@keyframes inRays{to{--ra:28deg}}
.in-layer.in-rays{background:radial-gradient(circle at 50% 45%,#1f3a8a 0,#0b1440 45%,var(--in-n) 80%)}

/* Portada (antes de tocar) y final */
.in-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;background:radial-gradient(circle at 50% 45%,#1f2e68 0,#000 70%);animation:inFade .6s both}
.in-logo{width:min(92vw,560px,120vh);height:auto;image-rendering:auto;filter:drop-shadow(0 4px 0 rgba(0,0,0,.5))}
.in-logo.slam{animation:slam .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes slam{from{transform:scale(2.6);opacity:0}to{transform:none;opacity:1}}
.in-sub{font-size:18px;color:#fff;margin:0}
.in-tap{font-size:18px;color:var(--yellow);margin:0;animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.in-ready{margin:0;font-size:clamp(34px,min(11vw,10vh),64px);line-height:1;color:var(--in-y);text-transform:uppercase;letter-spacing:2px;
  text-shadow:4px 0 0 var(--in-r),-4px 0 0 var(--in-r),0 4px 0 var(--in-r),0 -4px 0 var(--in-r),4px 4px 0 var(--in-r),-4px 4px 0 var(--in-r),4px -4px 0 var(--in-r),-4px -4px 0 var(--in-r),0 0 26px rgba(255,122,26,.8);
  animation:capSlam .45s cubic-bezier(.2,1.6,.4,1) .35s both}
.in-final .in-tap{animation:inFade .3s 1s both,blink 1.1s steps(2) 1.3s infinite}

/* Rótulo: franja oblicua que se abre, palabras que caen de golpe y subtítulo que se escribe */
.in-cap{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 8%);z-index:3;text-align:center;font-size:20px;color:#fff;opacity:0;pointer-events:none}
.in-cap.on{opacity:1}
.in-cap.in-top{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 13%)}
.in-cap .in-band{position:absolute;left:-16px;right:-16px;top:50%;height:calc(100% + 26px);z-index:-1;transform:translateY(-50%) skewY(-3deg);transform-origin:left;
  background:linear-gradient(90deg,transparent,rgba(5,8,26,.88) 10%,rgba(5,8,26,.88) 90%,transparent);border-top:3px solid var(--in-y);border-bottom:3px solid var(--in-o);
  animation:inBand .32s cubic-bezier(.2,.9,.3,1) both}
@keyframes inBand{from{transform:translateY(-50%) skewY(-3deg) scaleX(0)}to{transform:translateY(-50%) skewY(-3deg) scaleX(1)}}
.in-cap b{display:block;font-weight:normal;font-size:var(--in-fs);line-height:1.08;text-wrap:balance;color:var(--in-y);text-transform:uppercase;letter-spacing:1px;
  text-shadow:3px 0 0 var(--in-r),-3px 0 0 var(--in-r),0 3px 0 var(--in-r),0 -3px 0 var(--in-r),3px 3px 0 var(--in-r),-3px 3px 0 var(--in-r),3px -3px 0 var(--in-r),-3px -3px 0 var(--in-r),0 0 18px rgba(255,122,26,.7)}
.in-cap b i{display:inline-block;font-style:normal;animation:capSlam .4s cubic-bezier(.2,1.6,.4,1) var(--d,0s) both}
@keyframes capSlam{from{transform:scale(2) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
.in-cap small{display:block;margin-top:8px;font-size:clamp(15px,min(4.4vw,4.2vh),21px);color:#fff;
  text-shadow:2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000,2px 2px 0 #000;animation:inType .45s steps(16) .3s both}
@keyframes inType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.in-flash{position:absolute;inset:0;z-index:4;background:#fff;opacity:0;pointer-events:none}
.in-flash.on{animation:flashA .5s ease-out}
@keyframes flashA{from{opacity:.95}to{opacity:0}}
.in-skip{position:absolute;z-index:5;top:calc(env(safe-area-inset-top,0px) + 10px);right:calc(env(safe-area-inset-right,0px) + 12px);font-size:14px;padding:6px 10px}

/* 1 · Rayo, balón y logo */
.in-bolt{position:absolute;left:50%;top:-2%;width:min(52vw,46vh,260px);height:54%;transform:translateX(-46%);z-index:2;overflow:visible;
  filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 22px var(--in-y));animation:boltOut .55s ease-in .3s both}
.in-bolt polyline{fill:none;stroke-linejoin:miter;stroke-linecap:square;stroke-dasharray:1;stroke-dashoffset:1;animation:boltDraw .16s linear both}
.in-bolt .b1{stroke:var(--in-y);stroke-width:16}.in-bolt .b2{stroke:#fff;stroke-width:6}
@keyframes boltDraw{to{stroke-dashoffset:0}}
@keyframes boltOut{0%,30%{opacity:1}35%{opacity:.2}45%{opacity:1}100%{opacity:0}}
.in-ball{position:absolute;left:50%;top:48%;width:min(26vw,22vh,120px);height:auto;translate:-50% -50%;image-rendering:pixelated;z-index:2;
  animation:ballIn .62s cubic-bezier(.3,.5,.6,1) both;filter:drop-shadow(-24px 12px 0 rgba(255,232,26,.45)) drop-shadow(-48px 24px 0 rgba(255,122,26,.3))}
@keyframes ballIn{from{transform:translate(-80vw,48vh) rotate(-720deg) scale(.6)}to{transform:none}}
.in-ring{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border:6px solid #fff;border-radius:50%;z-index:2;animation:ringOut .55s ease-out both;box-shadow:0 0 18px var(--in-y)}
@keyframes ringOut{from{transform:scale(.3);opacity:1}to{transform:scale(9);opacity:0}}
.in-logoS .in-logo{position:relative;z-index:3}
.in-layer.in-logoS,.in-layer.in-final{animation:none}   /* corte seco: el destello hace de transición */

/* 2 · Viñetas de manga con Mark */
.in-manga{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3vh;padding:5vh 5vw 26vh}
.in-panel{position:relative;width:100%;max-width:520px;aspect-ratio:4/3;background:center/cover no-repeat;image-rendering:pixelated;border:4px solid #fff;
  box-shadow:0 0 0 4px #000,10px 10px 0 rgba(0,0,0,.55);overflow:hidden}
.in-panel::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-60deg,transparent 0 22px,rgba(255,255,255,.16) 22px 24px);animation:inLines .4s linear infinite}
@keyframes inLines{to{background-position:48px 0}}
.in-panel.p1{animation:panelL .34s cubic-bezier(.2,.9,.3,1) both;rotate:-3deg}
.in-panel.p2{animation:panelR .34s cubic-bezier(.2,.9,.3,1) .22s both;rotate:2.5deg}
@keyframes panelL{from{transform:translateX(-120%) scale(1.3)}to{transform:none}}
@keyframes panelR{from{transform:translateX(120%) scale(1.3)}to{transform:none}}
.in-badge{position:absolute;right:6%;top:calc(50% - 12px);z-index:2;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;background:#16245a;
  border:3px solid #080e21;box-shadow:inset 0 0 0 3px var(--rc,#fff),0 0 22px var(--rc,#fff),6px 6px 0 #080e21;animation:capSlam .4s cubic-bezier(.2,1.6,.4,1) .55s both}
.in-badge canvas{width:84px!important;height:84px!important;image-rendering:pixelated;background:linear-gradient(135deg,#ff5a5a,#ffcc22,#4fd27a,#3f8fff,#a24cff)}
.in-badge span{font-size:14px;color:#fff}

/* 3, 4 y 7 · Vídeo del juego a pantalla completa (en horizontal, como la pantalla de un móvil con el fondo difuminado) */
.in-vid{background:#000}
.in-vid::before{content:'';position:absolute;inset:-8%;background:center/cover no-repeat var(--bg,none);filter:blur(16px) brightness(.4) saturate(1.3);display:none}
.in-frame{position:absolute;inset:0;overflow:hidden;background:#000}
.in-frame img,.in-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:transparent}
.in-frame video{visibility:hidden}   /* hasta que dé imágenes de verdad («on»): mientras, se ve la captura */
.in-frame video.on{visibility:visible}
.in-frame video.failed{display:none}
.in-tag{position:absolute;z-index:2;left:calc(env(safe-area-inset-left,0px) + 12px);top:calc(env(safe-area-inset-top,0px) + 64px);margin:0;padding:4px 8px 4px 22px;font-size:12px;
  color:#fff;background:rgba(5,8,26,.75);border:2px solid #fff;letter-spacing:1px;text-transform:uppercase;animation:inSlideL .3s .15s cubic-bezier(.2,.9,.3,1) both}
.in-tag::before{content:'';position:absolute;left:7px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#ff3b3b;animation:blink .8s steps(2) infinite}

/* 5 · Muro de caras que corre en las dos direcciones, con el contador */
.in-wall{position:absolute;inset:-12% -30%;display:flex;flex-direction:column;justify-content:center;gap:10px;rotate:-9deg}
.in-row{display:flex;gap:10px;width:max-content;animation:inRow 3s linear both}
.in-row:nth-child(even){animation-name:inRowR}
@keyframes inRow{from{transform:translateX(-4%)}to{transform:translateX(-34%)}}
@keyframes inRowR{from{transform:translateX(-34%)}to{transform:translateX(-4%)}}
.in-row canvas{flex:none;width:clamp(56px,min(17vw,15vh),84px)!important;height:clamp(56px,min(17vw,15vh),84px)!important;image-rendering:pixelated;
  background:linear-gradient(#2a3f86,#121a42);border:3px solid #080e21;box-shadow:0 0 0 2px var(--rc,#5a7ab8)}
.in-faces5::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,rgba(5,8,26,.15) 0,rgba(5,8,26,.55) 55%,rgba(5,8,26,.9) 100%)}
.in-count{position:absolute;left:0;right:0;top:40%;z-index:2;margin:0;text-align:center;font-size:clamp(56px,min(22vw,20vh),130px);line-height:1;color:var(--in-y);
  text-shadow:5px 0 0 var(--in-r),-5px 0 0 var(--in-r),0 5px 0 var(--in-r),0 -5px 0 var(--in-r),5px 5px 0 var(--in-r),-5px 5px 0 var(--in-r),5px -5px 0 var(--in-r),-5px -5px 0 var(--in-r),0 0 30px rgba(255,122,26,.9);
  translate:0 -50%;animation:capSlam .4s cubic-bezier(.2,1.6,.4,1) both}

/* 6 · Lluvia de escudos */
.in-crest{position:absolute;top:0;image-rendering:pixelated;filter:drop-shadow(0 3px 0 rgba(0,0,0,.6))}
.in-rain{background:radial-gradient(circle at 50% 40%,#1d3a7a 0,#0b1440 50%,var(--in-n) 85%)}

/* 7 · Siete balones, uno por rareza */
.in-balls{position:absolute;left:0;right:0;top:24%;display:grid;grid-template-columns:repeat(4,auto);justify-content:center;gap:18px 12px}
.in-b7{display:flex;flex-direction:column;align-items:center;gap:6px;animation:capDrop .45s cubic-bezier(.3,1.6,.6,1) var(--d) both;transition:opacity .25s,filter .25s}
.in-b7 img{width:clamp(56px,min(20vw,16vh),96px);height:auto;image-rendering:pixelated;filter:drop-shadow(0 0 10px var(--rc))}
.in-b7 span{font-size:clamp(12px,min(3.4vw,3.2vh),15px);color:var(--rc);text-shadow:2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000;white-space:nowrap}
.in-b7.u span{animation:gsShine .9s steps(1) infinite}
.in-balls.go .in-b7:not(.u){opacity:.25;filter:grayscale(.7)}
.in-balls.go .in-b7.u{animation:inGrow .5s cubic-bezier(.6,0,.8,.4) both;z-index:2}
@keyframes inGrow{to{transform:scale(7) rotate(200deg);opacity:.1}}
.in-prism::before{animation:inRaysP 1.8s linear infinite;background:repeating-conic-gradient(from var(--ra) at 50% 45%,#ff5a5a 0 8deg,transparent 8deg 14deg,#ffcc22 14deg 22deg,transparent 22deg 28deg,#4fd27a 28deg 36deg,
  transparent 36deg 42deg,#3f8fff 42deg 50deg,transparent 50deg 56deg,#a24cff 56deg 64deg,transparent 64deg 72deg);opacity:0;transition:opacity .3s}
.in-prism.lit::before{opacity:.5}
@keyframes inRaysP{to{--ra:72deg}}

/* 8 y 9 · Cartas: legendarios en abanico y fusión */
.in-cards{position:absolute;left:0;right:0;top:0;bottom:24%;display:flex;align-items:center;justify-content:center;perspective:900px}
.in-card{position:absolute;width:clamp(124px,min(44vw,30vh),210px);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px 12px;
  background:#16245a;border:4px solid #080e21;box-shadow:inset 0 0 0 4px var(--rc),0 0 30px var(--rc),8px 8px 0 #080e21;text-align:center;overflow:hidden}
.in-card canvas{width:72%!important;height:auto!important;aspect-ratio:1;image-rendering:pixelated;border:4px solid var(--rc);background:linear-gradient(var(--rc),#16245a)}
.in-card.t-unico canvas{background:linear-gradient(135deg,#ff5a5a,#ffcc22,#4fd27a,#3f8fff,#a24cff)}
.in-card.t-unico{box-shadow:inset 0 0 0 4px #fff,0 0 34px #9fd0ff,8px 8px 0 #080e21}
.in-card b{font-weight:normal;font-size:clamp(14px,min(4.6vw,4vh),20px);color:#fff;line-height:1.1}
.in-card span{font-size:12px;padding:2px 8px;color:#080e21;background:var(--rc);letter-spacing:1px;text-transform:uppercase}
.in-card.t-unico span{background:linear-gradient(90deg,#ff5a5a,#ffcc22,#4fd27a,#3f8fff,#a24cff)}
.in-card::after{content:'';position:absolute;inset:-40% auto -40% -60%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);rotate:20deg;animation:inShine 1.6s .6s ease-in-out both}
@keyframes inShine{from{left:-60%}to{left:140%}}
.in-card.f0{--x:-62%;--r:-14deg}.in-card.f1{--x:0%;--r:0deg;z-index:2}.in-card.f2{--x:62%;--r:14deg}
.in-fan .in-card{transform:translateX(var(--x)) rotate(var(--r)) translateY(var(--y,0));animation:cardIn .5s cubic-bezier(.3,1.5,.5,1) var(--d) both}
.in-fan .in-card.f1{--y:-6%}
@keyframes cardIn{from{transform:translateX(var(--x)) translateY(120vh) rotate(calc(var(--r) * -3)) rotateY(180deg)}to{transform:translateX(var(--x)) rotate(var(--r)) translateY(var(--y,0))}}
.in-fuse .in-card.a{animation:fuseL .5s cubic-bezier(.2,.9,.3,1) both}
.in-fuse .in-card.b{animation:fuseR .5s cubic-bezier(.2,.9,.3,1) both}
@keyframes fuseL{from{transform:translateX(-140%) rotate(-10deg)}to{transform:translateX(-58%) rotate(-6deg)}}
@keyframes fuseR{from{transform:translateX(140%) rotate(10deg)}to{transform:translateX(58%) rotate(6deg)}}
.in-fuse.hit .in-card.a{animation:fuseInL .3s cubic-bezier(.7,0,.9,.5) both}
.in-fuse.hit .in-card.b{animation:fuseInR .3s cubic-bezier(.7,0,.9,.5) both}
@keyframes fuseInL{from{transform:translateX(-58%) rotate(-6deg)}to{transform:translateX(0) rotate(0) scale(.85);opacity:.6}}
@keyframes fuseInR{from{transform:translateX(58%) rotate(6deg)}to{transform:translateX(0) rotate(0) scale(.85);opacity:.6}}
.in-fuse .in-card.n{display:none}
.in-fuse.done .in-card.a,.in-fuse.done .in-card.b{display:none}
.in-fuse.done .in-card.n{display:flex;animation:gsCard .45s cubic-bezier(.3,1.7,.5,1) both;scale:1.12}
.in-x2{position:absolute;top:6%;z-index:3;margin:0;font-size:clamp(28px,min(9vw,8vh),48px);color:#fff;text-shadow:3px 3px 0 #080e21;animation:capSlam .35s .35s both}
.in-fuse.hit .in-x2{display:none}
.in-up{position:absolute;z-index:3;top:8%;margin:0;font-size:clamp(20px,min(6.6vw,6vh),32px);color:var(--in-y);text-shadow:3px 3px 0 var(--in-r);animation:inUp .7s cubic-bezier(.2,1.6,.4,1) both}
@keyframes inUp{from{transform:translateY(40px) scale(.4);opacity:0}to{transform:none;opacity:1}}

/* 10, 11 y 12 · Capturas del juego como pantallas que entran inclinadas */
.in-shots{position:absolute;inset:0 0 22% 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;padding:12% 4% 0;perspective:1000px}
.in-shot{display:block;max-width:100%;max-height:60%;width:auto;height:auto;border:3px solid #fff;box-shadow:0 0 0 3px #080e21,10px 12px 0 rgba(0,0,0,.55),0 0 40px rgba(63,143,255,.45)}
.in-shot.tilt{animation:shotIn .5s cubic-bezier(.2,.9,.3,1) both}
@keyframes shotIn{from{transform:rotateX(38deg) rotateZ(-8deg) scale(.55) translateY(30%);opacity:0}to{transform:none;opacity:1}}
.in-shot.punch{animation:shotPunch .32s cubic-bezier(.2,.9,.3,1) both}
@keyframes shotPunch{from{transform:scale(1);}50%{transform:scale(1.08) rotate(-1deg)}to{transform:scale(1.04)}}
.in-shots.two .in-shot{max-height:41%}
.in-shots.two .in-shot:first-child{rotate:-2.5deg;animation:panelL .36s cubic-bezier(.2,.9,.3,1) both}
.in-shots.two .in-shot:last-child{rotate:2deg;animation:panelR .36s cubic-bezier(.2,.9,.3,1) .3s both}
.in-spark{position:absolute;z-index:3;width:26px;line-height:0;color:#fff;filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px var(--in-y));animation:inTwinkle .9s steps(6) var(--d) both;pointer-events:none}
.in-pix{display:block;width:100%;height:auto;fill:currentColor}
@keyframes inTwinkle{0%{transform:scale(0) rotate(0);opacity:0}30%{transform:scale(1.4) rotate(45deg);opacity:1}100%{transform:scale(0) rotate(180deg);opacity:0}}
.in-hearts{position:absolute;z-index:3;top:9%;left:0;right:0;margin:0;display:flex;justify-content:center;gap:14px}
.in-hearts i{display:block;width:clamp(34px,min(11vw,9vh),58px);color:#ff3b5c;
  filter:drop-shadow(3px 0 0 #2a0710) drop-shadow(-3px 0 0 #2a0710) drop-shadow(0 3px 0 #2a0710) drop-shadow(0 -3px 0 #2a0710) drop-shadow(0 0 10px rgba(255,59,92,.8));
  animation:capSlam .35s cubic-bezier(.2,1.6,.4,1) var(--d) both}
.in-hearts i.lost{animation:heartOut .5s ease-in both}
@keyframes heartOut{0%{transform:none}30%{transform:scale(1.3) rotate(12deg)}100%{transform:translateY(40px) rotate(40deg);opacity:0;color:#555}}
.in-chip{position:absolute;z-index:3;margin:0;padding:6px 10px;font-size:clamp(13px,min(4vw,3.6vh),18px);color:#080e21;background:var(--in-y);border:3px solid #080e21;box-shadow:4px 4px 0 #080e21;white-space:nowrap}
.in-chip.up{right:5%;top:46%;rotate:4deg;animation:inSlide .32s cubic-bezier(.2,.9,.3,1) var(--d) both}
.in-boss{position:absolute;z-index:3;left:6%;top:50%;display:flex;align-items:center;gap:6px;padding:6px 10px 6px 6px;background:#3a0710;border:3px solid #ff3b5c;box-shadow:0 0 22px #ff3b5c,5px 5px 0 #080e21;
  rotate:-6deg;animation:stamp .4s cubic-bezier(.2,1.6,.4,1) var(--d) both}
.in-boss img{width:44px;height:44px;image-rendering:pixelated}
.in-boss span{font-size:clamp(16px,min(5vw,4.6vh),24px);color:#fff;text-transform:uppercase;letter-spacing:2px}
@keyframes stamp{from{transform:scale(3);opacity:0}to{transform:none;opacity:1}}

/* Horizontal (p. ej. 956×440): vídeo como un móvil a la izquierda con el rótulo a la derecha; escenas en fila */
@media (min-aspect-ratio:1/1){
  .in-vid::before{display:block}
  .in-frame{inset:5% auto 5% 7%;height:90%;width:auto;aspect-ratio:440/956;border:3px solid #fff;box-shadow:0 0 0 3px #080e21,12px 12px 0 rgba(0,0,0,.5);rotate:-2deg}
  #intro[data-side] .in-cap{left:40%;right:5%;bottom:auto;top:46%;translate:0 -50%}
  #intro[data-side] .in-tag{left:40%;top:18%}
  .in-manga{flex-direction:row;gap:3vw;padding:5vh 4vw 27vh}
  .in-panel{width:auto;height:100%;max-width:46%}
  .in-badge{top:auto;bottom:29vh;right:1.5vw}
  .in-badge canvas{width:56px!important;height:56px!important}
  .in-balls{grid-template-columns:repeat(7,auto);top:18%}
  .in-wall{inset:-30% -12%;rotate:-6deg}
  .in-cards{bottom:26%;top:2%}
  .in-shots{flex-direction:row;padding:4% 4% 0;inset:0 0 24% 0}
  .in-shot{max-height:86%;max-width:62%}
  .in-shots.two .in-shot{max-height:86%;max-width:47%}
  .in-hearts{top:4%;justify-content:flex-start;left:5%}
  .in-chip.up{top:20%;right:4%}
  .in-boss{left:auto;right:5%;top:auto;bottom:30%}
}
/* Movimiento reducido: sin sacudidas, destellos suaves, sin rayos que giran ni líneas que corren */
@media (prefers-reduced-motion:reduce){
  #intro .in-stage.in-shake{animation:none}
  .in-flash.on{animation:flashSoft .5s ease-out}
  .in-rays::before,.in-panel::after{animation:none}
  .in-bolt{animation:none}
}
@keyframes flashSoft{from{opacity:.25}to{opacity:0}}
details.tgroup,details.roles{margin:6px 0;border:2px solid var(--ink);background:rgba(10,18,48,.4);padding:6px 8px}
details.tgroup summary,details.roles summary{cursor:pointer;font-size:14px;color:var(--yellow)}
details.tgroup .tracks{margin-top:8px}
/* Portada */
.title{display:flex;flex-direction:column;align-items:center;gap:4px;margin:-4px 0 0}
.title img.logo{width:100%;max-width:440px;height:auto;cursor:pointer;image-rendering:auto;filter:drop-shadow(0 4px 0 rgba(0,0,0,.35));margin-top:6px}
.title span{font-size:18px;color:#fff}
.hero{display:block;width:calc(100% + 28px);margin:-16px -14px 0;height:auto;border-bottom:2px solid var(--ink)}
.finimg{display:block;width:100%;max-width:384px;margin:0 auto;height:auto}
.cardbg-clear{background:rgba(24,32,65,.72)}
/* Barras fijas y cuadrícula de jugadores */
.top{position:sticky;top:-16px;z-index:4;display:flex;gap:8px;align-items:center;margin:-16px -14px 0;padding:10px 14px 8px;background:#1d2752;border-bottom:2px solid var(--ink)}
.top h2{flex:1;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .back{padding:6px 8px;font-size:18px;flex-shrink:0}
.bottom{position:sticky;bottom:-16px;z-index:4;margin:0 -14px -16px;padding:10px 14px 12px;background:#1d2752;border-top:2px solid var(--ink);display:flex;flex-direction:column;gap:8px}
.bottom:empty{display:none}
.pfbar{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.pfq{display:flex;gap:6px}.pfq input{flex:1;min-width:0;font:18px var(--font-ui);color:var(--chalk);background:var(--navy-d);border:2px solid var(--ink);box-shadow:0 0 0 2px #5a7ab8;padding:7px 8px}
.pfq input::placeholder{color:#8a96b0}.pfq button{padding:4px 12px;font-size:18px}
.pfsel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.pfsel select{min-width:0;font-size:16px;padding:5px 4px}
.sortrow{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px}
.opts.small{padding:2px}.opts.small button{font-size:12px;padding:4px 6px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.ptile{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;background:var(--navy);border:2px solid var(--ink);box-shadow:0 0 0 2px #5a7ab8;color:var(--chalk);font-family:var(--font-ui);cursor:pointer;text-align:center;min-width:0}
.ptile .tn{font-size:12px;line-height:1.25;color:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptile .tm{display:flex;gap:4px;align-items:center;font-size:12px}.ptile .tm i{font-style:normal;color:var(--sky-t)}
.ptile.sel{background:#3a5aa0;box-shadow:0 0 0 2px var(--yellow)}
.ptile:active{transform:translateY(2px)}
/* Supertécnicas: franjas de cine y presentación con retrato */
#cine .lb{position:absolute;left:0;right:0;height:0;background:#000;z-index:4;transition:height .22s ease-out;pointer-events:none}
#cine .lb.t{top:0}#cine .lb.b{bottom:0}
#shell.cine #cine .lb{height:8%}
#shell.cine .hud{opacity:.25;transition:opacity .2s}
/* 0.50 (elegido por el usuario: «doble franja»): el campo, oscurecido; arriba, la franja con los ojos del jugador (game.js cutin calcula el
   zoom del retrato con la altura de la franja: --eyes); abajo, la del nombre de la técnica con el color de su elemento. Entran por lados
   opuestos; las del rival, inclinadas al revés */
.cutin{position:absolute;inset:0;z-index:7;pointer-events:none;display:none;overflow:hidden;--eyes:clamp(46px,10vh,116px);--tilt:-6deg}
.cutin.on{display:block;background:rgba(4,8,24,.28);animation:ciDim .18s ease-out both}
.cutin.rival{--tilt:6deg}
.cutin .ci-eyes{position:absolute;left:-8%;right:-8%;top:11%;height:var(--eyes);overflow:hidden;background:#080e21;transform:rotate(var(--tilt));
  box-shadow:0 0 0 5px var(--c2),0 0 0 9px #080e21,0 14px 30px rgba(0,0,0,.5);animation:ciEyes .22s cubic-bezier(.2,.9,.3,1.2) both}
.cutin .ci-face{position:absolute;inset:0;display:flex;line-height:0}
.cutin .ci-face .ci-eye{position:relative;flex:1;overflow:hidden;border-left:4px solid #080e21}
.cutin .ci-face .ci-eye:first-child{border-left:0}
.cutin .ci-face canvas{position:absolute;left:50%;image-rendering:pixelated;border:0;box-shadow:none;background:none}
.cutin .ci-in{position:absolute;left:-8%;right:-8%;top:calc(11% + var(--eyes) + 22px);padding:12px 14%;transform:rotate(var(--tilt));
  background:linear-gradient(90deg,var(--c2),var(--c1));box-shadow:0 0 0 5px #080e21,0 14px 30px rgba(0,0,0,.45);animation:ciName2 .22s .05s cubic-bezier(.2,.9,.3,1.2) both}
.cutin.rival .ci-in{text-align:right;background:linear-gradient(270deg,var(--c2),var(--c1))}
.cutin.out{animation:ciFade .22s ease-in both}
@keyframes ciDim{from{background:rgba(4,8,24,0)}}
@keyframes ciEyes{from{transform:translateX(-112%) rotate(var(--tilt))}to{transform:translateX(0) rotate(var(--tilt))}}
@keyframes ciName2{from{transform:translateX(112%) rotate(var(--tilt))}to{transform:translateX(0) rotate(var(--tilt))}}
@keyframes ciFade{to{opacity:0}}
.ci-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ci-txt small{font-size:clamp(11px,2.8vw,16px);color:var(--c3)}
/* Elegir parada (0.34): tarjetas en el centro con la cámara casi parada; la barra de abajo es el tiempo que queda */
.save-choice{position:absolute;left:50%;top:32%;transform:translateX(-50%);z-index:9;width:min(560px,calc(100% - 32px));box-sizing:border-box;
  background:var(--navy-d);border:2px solid var(--ink);box-shadow:0 0 0 2px var(--line),0 10px 28px rgba(0,0,0,.55);padding:10px 10px 16px;text-align:center}
.save-choice[hidden]{display:none}
.sc-head{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.sc-head b{color:var(--gold);font-size:20px}
.sc-head small{font-size:12px;opacity:.9}
.sc-opts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.sc-opt{flex:1 1 120px;max-width:180px;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;
  font-family:var(--font-ui);color:var(--chalk);background:var(--navy);border:2px solid var(--line);box-shadow:inset 0 0 0 2px var(--ink);padding:8px 6px;cursor:pointer;touch-action:manipulation}
.sc-opt b{font-size:15px;line-height:1.1}
.sc-opt small{font-size:12px;opacity:.9}
.sc-opt[data-elem="fuego"]{background:rgba(238,115,0,.85);border-color:#ffd08a}
.sc-opt[data-elem="viento"]{background:rgba(10,70,100,.9);border-color:var(--e-viento)}
.sc-opt[data-elem="bosque"]{background:rgba(20,80,20,.9);border-color:var(--e-bosque)}
.sc-opt[data-elem="montaña"]{background:rgba(90,56,18,.9);border-color:var(--e-montana)}
.sc-opt.win small{color:var(--yellow)}
.sc-opt.lose{opacity:.8}
.sc-opt.on{outline:3px solid var(--yellow);outline-offset:2px}
.sc-opt kbd{position:absolute;left:5px;top:3px;font:inherit;font-size:12px;opacity:.8;display:none}
html.pc .sc-opt kbd{display:block}
.sc-time{position:absolute;left:10px;right:10px;bottom:6px;height:4px;background:var(--gold);transform-origin:left;transform:scaleX(var(--t,1))}
.ci-txt b{font-size:clamp(22px,7vw,46px);line-height:1.02;font-weight:400;color:#080e21;animation:ciName .5s ease-out both}
@keyframes ciName{from{letter-spacing:.4em;opacity:0}to{letter-spacing:0;opacity:1}}
.cutin.fuego{--c1:#ffd23a;--c2:#ff6a10;--c3:#7a1404}
.cutin.viento{--c1:#d2f7ff;--c2:#2fa6e0;--c3:#0b2f5e}
.cutin.bosque{--c1:#e2ffa8;--c2:#46ad35;--c3:#174212}
.cutin.montana{--c1:#ffe6b0;--c2:#b07434;--c3:#432a0e}
.cutin.neutro{--c1:#ffffff;--c2:#6a7a9a;--c3:#1d2752}
/* 0.52.16 (Yery): las supertécnicas de las cartas de Halloween, con la piel de su carta y murciélagos sobre el nombre */
.cutin.hw{--c1:#ffd27a;--c2:#ff7a10;--c3:#3a0a5a}
.cutin.diablo{--c1:#ffb070;--c2:#d0180c;--c3:#3a0002}
.cutin.vampiro{--c1:#ffc4d0;--c2:#b0102e;--c3:#2a0010}
.cutin.lobo{--c1:#e8fbff;--c2:#7a3ad0;--c3:#12082e}   /* 0.52.20: Shawn «Lobo», hielo y morado */
.cutin:is(.hw,.lobo) .ci-eyes{box-shadow:0 0 0 5px #8a3ad0,0 0 0 9px #080e21,0 14px 30px rgba(0,0,0,.5)}
.cutin:is(.hw,.diablo,.vampiro,.lobo) .ci-in::after{content:"";position:absolute;right:9%;top:-34px;width:126px;height:51px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 34'%3E%3Cdefs%3E%3Cpath id='b' d='M10 4 11 2 12 4 15 1 20 3 17 4 16 7 13 6 10 9 7 6 4 7 3 4 0 3 5 1 8 4 9 2Z'/%3E%3C/defs%3E%3Cg fill='%23120612'%3E%3Cuse href='%23b' transform='translate(2 16) scale(1.5)'/%3E%3Cuse href='%23b' transform='translate(32 2) scale(2)'/%3E%3Cuse href='%23b' transform='translate(64 18) scale(1)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.cutin.rival:is(.hw,.diablo,.vampiro,.lobo) .ci-in::after{right:auto;left:10%}
/* Pizarra de alineación */
.edbar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.edbar .ghost{padding:6px 10px}
#wl2{min-height:44px}
.pitch{position:relative;width:100%;aspect-ratio:34/37;border:2px solid var(--ink);box-shadow:0 0 0 2px var(--line);overflow:hidden;
  background:repeating-linear-gradient(180deg,#3f8f3a 0 12.5%,#479c41 12.5% 25%)}
.pitch i{position:absolute;border:2px solid rgba(242,246,236,.75);pointer-events:none}
.pitch .pl-mid{left:-2px;right:-2px;top:-2px;height:0;border-width:0 0 2px}
.pitch .pl-circle{left:50%;top:0;width:32%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%)}
.pitch .pl-box{left:23%;right:23%;bottom:-2px;height:24%}
.pitch .pl-small{left:37%;right:37%;bottom:-2px;height:9%}
.pslot{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1px;background:none;border:0;padding:0;cursor:pointer;color:#fff;font-family:var(--font-ui);width:80px}
.pslot .pf{width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:linear-gradient(#3f6fc0,#1c3270);border:2px solid var(--ink);box-shadow:0 0 0 2px #fff;font-size:24px;color:var(--gold)}
.pslot .pf canvas{border:0;background:none}
.pslot.empty .pf{background:rgba(0,0,0,.35);box-shadow:0 0 0 2px var(--gold);border-style:dashed}
/* Aro del retrato con el color de la rareza de su copia (.rN; sin copia, el blanco de .pslot .pf): legendario, fondo dorado; único, prisma */
.pslot:is(.r1,.r2,.r3,.r4,.r5) .pf{box-shadow:0 0 0 2px var(--rc)}.pslot.r4 .pf{background:linear-gradient(#ffd23a,#ee7300)}.pslot.r6 .pf{background:var(--rar-6)}
.pslot.sel .pf{box-shadow:0 0 0 3px var(--yellow),0 0 14px 4px rgba(255,232,26,.8);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.07)}}
.pslot .pr{font-size:12px;background:var(--navy-d);border:1px solid var(--ink);padding:0 4px;color:var(--sky-t);margin-top:2px}
.pslot .pn{font-size:12px;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptile .slot{font-size:12px}
.tmp{font-style:normal;font-size:12px;background:#7c4dd1;color:#fff;padding:0 3px}
.pgrid > .note{grid-column:1/-1}
details.techs summary{cursor:pointer;color:var(--gold);font-size:18px;padding:6px 0}
details.techs .cards{margin-top:6px}
/* Gachas y técnicas */
.banners{display:flex;flex-direction:column;gap:10px}
.banner-card{display:flex;align-items:center;gap:10px;text-align:left;font-family:var(--font-ui);color:var(--chalk);cursor:pointer;background:var(--navy);border:2px solid var(--ink);box-shadow:0 0 0 2px #5a7ab8;padding:6px 10px 6px 6px}
.banner-card img.crest{width:48px;height:48px;flex-shrink:0}
.banner-card b{font-size:24px;color:var(--gold);font-weight:400}
.banner-card small{font-size:12px}
.banner-card .pk-faces{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}
.banner-card .mt{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.banner-card.sel{background:#3a5aa0;box-shadow:0 0 0 3px var(--yellow),0 0 14px rgba(255,232,26,.45)}
/* Sobres del gacha: elegir (toda la tarjeta) y «Ver jugadores»; en horizontal, los tres en fila */
.banner-card.pack{cursor:default;padding:4px;gap:6px}
.pk-pick{display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:44px;padding:2px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.card .banner-card.pack .pk-list{flex:none;display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:4px 10px;font-size:13px}
.pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;overflow:auto;min-height:0;flex:1;padding:4px}
.pk-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;background:var(--navy);border:2px solid var(--ink);box-shadow:0 0 0 2px #5a7ab8;color:var(--chalk);text-align:center;min-width:0;position:relative}
.pk-item .tn{font-size:12px;line-height:1.25;color:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-item .tm{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;align-items:center;font-size:11px}.pk-item .tm i{font-style:normal;color:var(--sky-t)}
.pk-item.own{box-shadow:0 0 0 2px #7be08f}
.pk-item:focus-visible{outline:3px solid var(--yellow);outline-offset:1px}
.pk-item .ok{position:absolute;top:2px;right:4px;color:#7be08f;font-size:16px;text-shadow:1px 1px 0 #000}
@media (orientation:landscape) and (max-height:600px){
  .banners.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .card .banner-card.pack{flex-direction:column;align-items:stretch;padding:3px;gap:2px}
  .card .banner-card.pack .pk-faces{margin-top:2px}
  .banner-card.pack .pk-pick{gap:6px}
  .banner-card.pack img.crest{width:32px;height:32px}
  .banner-card.pack b{font-size:15px}
  .banner-card.pack small{font-size:11px}
  .card .gsplash{padding:4px 10px}   /* en horizontal bajo: solo el contador del épico asegurado, para que quepan los tres sobres */
  .card .gsplash :is(h3,p,img){display:none}
  .card .gsplash label{flex-direction:row;align-items:center;gap:10px;max-width:none}
  .card .gsplash progress{width:160px}
}
.bottom .grid2 .cta{padding:8px 6px 10px}
.scroll{width:80px;height:80px;display:flex;align-items:center;justify-content:center;font-size:40px;border:2px solid var(--ink);
  background:radial-gradient(circle,#fff6c0,#ffd23a 45%,#ee7300);box-shadow:inset 0 0 0 3px rgba(255,255,255,.5)}
.scroll.small{width:44px;height:44px;font-size:22px;flex-shrink:0}
.techcard.viento .scroll,.techrow.viento .scroll{background:radial-gradient(circle,#fff,#8fe9ff 45%,#2fa6e0)}
.techcard.bosque .scroll,.techrow.bosque .scroll{background:radial-gradient(circle,#f4ffd8,#9ee860 45%,#46ad35)}
.techcard.montana .scroll,.techrow.montana .scroll{background:radial-gradient(circle,#fff4dc,#e0aa60 45%,#ae7232)}
.techcard.fuego .scroll,.techrow.fuego .scroll{background:radial-gradient(circle,#fff6c0,#ffc23a 45%,#ff6a10)}
/* Banner, versión y modo desarrollador */
.ver{align-self:flex-end;margin:-4px -4px -8px 0;font:12px var(--font-ui);color:rgba(255,255,255,.55);background:none;border:0;padding:6px}
.dbg{position:absolute;left:8px;top:calc(env(safe-area-inset-top,0px) + 56px);z-index:8;margin:0;pointer-events:none;
  font:12px/1.4 var(--font-ui);color:#7fff7f;background:rgba(0,0,0,.6);padding:4px 6px;white-space:pre-wrap;max-width:70%}
@media (prefers-reduced-motion:reduce){.toast,.act,.banner{transition:none}.gcard{animation:none;opacity:1;transform:none}.cap,.gm-hint,.cap::before,.cap::after{animation:none!important}
  dialog.gspecial,.gs-rays,.gs-ball,.gs-card,.gs-banner,.gs-banner span,.gs-hint,.gspecial.rays .gs-rays,.gspecial.done .gs-hint{animation:none!important;transition:none!important}}

/* Varias partidas a la vez (0.36): «En curso» en el modo, la etapa, el equipo o la cadena del intento a medias, y «Abandonar intento» en su mapa */
.run-on{color:#ffd06b;font-weight:700}
.view-actions>.run-quit{flex:0 1 auto;min-width:0;max-width:34%;min-height:44px;font-size:14px;line-height:1.1}