/* ================================================================
   SUPERTHINGS POWER · Super Card Game
   Estilo cómic/arcade + tratamiento premium de cartas metalizadas
   ================================================================ */

:root{
  --blue-900:#04143f; --blue-800:#082a72; --blue-700:#0f3fa8;
  --blue-500:#1e63e0; --blue-400:#3a8dff; --cyan:#4fd4ff;
  --gold:#ffd42e; --orange:#ff7a1a; --red:#e0242a; --green:#3ad16b;
  --purple:#9b45ee; --ink:#062057;
  /* el filo blanco grueso y la sombra sólida del acabado de juguete */
  --filo:#fff;
  --card-base:clamp(196px,25vw,290px);
  --card-w:var(--card-base);
  --radius:18px;
  --font:'Trebuchet MS','Segoe UI',system-ui,sans-serif;
  --display:'Arial Black','Segoe UI Black','Arial Bold',Impact,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font); color:#fff; overflow:hidden;
  background:
    repeating-conic-gradient(from 0deg at 50% 34%,rgba(255,255,255,.045) 0 2deg,transparent 2deg 9deg),
    radial-gradient(ellipse at 50% 30%,#3a8dff 0%,#1146bd 38%,#082a72 66%,#04143f 100%);
  background-attachment:fixed;
}
#app{position:relative;height:100dvh;width:100%;overflow:hidden}
#fx-canvas{position:fixed;inset:0;pointer-events:none;z-index:900}

[hidden]{display:none !important}
button,input,select{font-family:inherit}
button{cursor:pointer;border:0;background:none;color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:8px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.2)}

/* ================================================================
   SISTEMA DE INTERFAZ
   Tokens, texturas, botones, paneles y transiciones.
   Todo lo comparte el juego entero: un solo sitio donde tocar.
   ================================================================ */
:root{
  /* elevación: sombra sólida (juguete) + sombra difusa (profundidad) */
  --e1:0 3px 0 rgba(4,12,36,.55), 0 6px 14px rgba(0,0,0,.35);
  --e2:0 6px 0 rgba(4,12,36,.6),  0 14px 26px rgba(0,0,0,.42);
  --e3:0 10px 0 rgba(4,12,36,.62),0 24px 44px rgba(0,0,0,.5);
  /* bisel: luz arriba, sombra abajo, por dentro */
  --bevel:inset 0 3px 0 rgba(255,255,255,.5), inset 0 -5px 0 rgba(0,0,0,.24);
  --bevel-soft:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.22);
  /* curvas */
  --ease-out:cubic-bezier(.22,.9,.28,1);
  --ease-pop:cubic-bezier(.2,1.5,.35,1);
  --ease-in:cubic-bezier(.6,0,.9,.3);
  /* superficies de cristal */
  --glass:linear-gradient(165deg,rgba(255,255,255,.17),rgba(255,255,255,.045));
  --glass-edge:rgba(255,255,255,.22);
  /* trama de puntos de cómic, se usa como textura de fondo */
  --halftone:radial-gradient(circle at 50% 50%,rgba(255,255,255,.10) 1px,transparent 1.4px);
  /* color propio de cada pantalla: lo cambia .screen y lo usan barra,
     pestañas, chips y el aura del fondo. Una sola variable manda. */
  --accent:#43c8ff;
  --accent-2:#2f7fff;
}

/* cada sección tiene su color, así se sabe dónde estás de un vistazo */
#screen-shop{--accent:#ff9c2b;--accent-2:#e2531a}
#screen-collection{--accent:#43c8ff;--accent-2:#1b53c8}
#screen-deck{--accent:#a765ff;--accent-2:#5b1fb0}
#screen-online{--accent:#3ad16b;--accent-2:#0b6f4a}
#screen-ranking{--accent:#ffd42e;--accent-2:#c07a06}
#screen-club{--accent:#00d9c6;--accent-2:#04564f}
#screen-rules{--accent:#ff5a6e;--accent-2:#a11d3f}
#screen-battle{--accent:#ffd42e;--accent-2:#e2531a}

/* aura del color de la sección detrás de todo: le da identidad sin ruido */
.screen::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 80% 55% at 50% -8%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 108%,color-mix(in srgb,var(--accent-2) 22%,transparent),transparent 72%)}
#screen-menu::before,#screen-battle::before{display:none}

/* --- grano y trama global: quita el aspecto de "color plano" --- */
#app::before{
  content:'';position:fixed;inset:0;z-index:898;pointer-events:none;opacity:.5;
  background-image:var(--halftone);background-size:5px 5px;
  mix-blend-mode:overlay}
#app::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:899;
  background:radial-gradient(ellipse at 50% 44%,transparent 50%,rgba(2,6,20,.6) 100%)}

/* ================================================================
   PANTALLAS — entradas y salidas con cuerpo
   ================================================================ */
.screen{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden}
.screen.active{display:flex}
.screen.enter{animation:screenEnter .42s var(--ease-out) both}
.screen.leaving{display:flex;animation:screenLeave .26s var(--ease-in) both;pointer-events:none;z-index:1}
@keyframes screenEnter{
  from{opacity:0;transform:translateY(26px) scale(.975);filter:blur(6px)}
  to{opacity:1;transform:none;filter:none}}
@keyframes screenLeave{
  to{opacity:0;transform:translateY(-16px) scale(1.02);filter:blur(5px)}}
@keyframes screenIn{from{opacity:0;transform:scale(.96) translateY(14px)}to{opacity:1;transform:none}}

/* escalonado de la primera pintada de cada pantalla
   (los fondos decorativos se quedan quietos: si no, el fondo "salta") */
.screen.enter > *:not(.menu-bg):not(.menu-vignette):not(.battle-bg){
  animation:riseIn .5s var(--ease-out) both}
.screen.enter > *:nth-child(2){animation-delay:.05s}
.screen.enter > *:nth-child(3){animation-delay:.1s}
.screen.enter > *:nth-child(4){animation-delay:.15s}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ================================================================
   BARRA SUPERIOR
   ================================================================ */
.top-bar{
  position:relative;display:flex;align-items:center;gap:14px;padding:14px 22px 15px;flex-wrap:wrap;
  background:
    linear-gradient(180deg,rgba(6,16,44,.96),rgba(6,16,44,.55)),
    var(--halftone);
  background-size:auto,5px 5px;
  backdrop-filter:blur(12px);
  box-shadow:0 4px 0 rgba(4,12,36,.5),0 14px 34px rgba(0,0,0,.45);
  z-index:5}
/* rayos diagonales del color de la sección, como el encabezado de un cómic */
.top-bar::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(115deg,
    color-mix(in srgb,var(--accent) 90%,transparent) 0 3px,transparent 3px 22px);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 62%);
  mask-image:linear-gradient(90deg,#000,transparent 62%)}
.top-bar::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:4px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 70%,transparent)}
.top-bar h2{position:relative;font-family:var(--display);font-style:italic;font-size:clamp(21px,2.8vw,32px);
  letter-spacing:2px;padding-left:20px;
  -webkit-text-stroke:1px var(--ink);
  text-shadow:0 3px 0 rgba(0,0,0,.5),0 0 26px color-mix(in srgb,var(--accent) 45%,transparent)}
/* la pastilla del color de la sección a la izquierda del título */
.top-bar h2::before{content:'';position:absolute;left:0;top:6%;bottom:6%;width:8px;border-radius:4px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 80%,transparent)}
.top-bar h2 small{font-size:.5em;opacity:.72;margin-left:10px;-webkit-text-stroke:0;
  letter-spacing:.6px;font-family:var(--font);font-weight:800}
.top-bar h2 small.warn{color:#ff8a7a}
.top-bar>div:last-child{margin-left:auto}
.filters{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}

/* ================================================================
   BOTONES — plástico de juguete con bisel y brillo
   ================================================================ */
.btn-tex,
.big-btn,.play-btn,.buy-btn,.page-btn,.back-btn,.chip,.ghost-btn{
  position:relative;overflow:hidden;isolation:isolate;
  -webkit-tap-highlight-color:transparent}
/* capa de textura: trama + veta diagonal, muy sutil */
.big-btn::before,.play-btn::before,.buy-btn::before,.back-btn::before,.chip::before,.ghost-btn::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    var(--halftone),
    repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 2px,transparent 2px 6px);
  background-size:4px 4px,auto}
/* barrido de brillo */
.big-btn::after,.play-btn::after,.buy-btn::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(108deg,transparent 36%,rgba(255,255,255,.38) 50%,transparent 64%);
  transform:translateX(-135%)}
.big-btn:hover::after,.play-btn:hover::after,.buy-btn:hover::after{
  transition:transform .55s var(--ease-out);transform:translateX(135%)}

.big-btn{display:flex;align-items:center;justify-content:center;gap:12px;padding:13px 18px;border-radius:16px;
  background:linear-gradient(180deg,var(--blue-400),var(--blue-700));
  border:3px solid var(--filo);
  box-shadow:var(--e2),var(--bevel);
  transition:transform .13s var(--ease-out),box-shadow .13s,filter .13s;text-align:left}
.big-btn:hover{transform:translateY(-3px);box-shadow:var(--e3),var(--bevel);filter:brightness(1.1) saturate(1.06)}
.big-btn:active{transform:translateY(4px);box-shadow:var(--e1),var(--bevel-soft);filter:brightness(.96)}
.big-btn .bb-txt{display:flex;flex-direction:column;line-height:1.15;position:relative}
.big-btn b{font-family:var(--display);font-style:italic;font-size:19px;letter-spacing:1px;
  text-shadow:0 2px 0 rgba(0,0,0,.45)}
.big-btn i{font-style:normal;font-size:12px;opacity:.86}
.big-btn.compact{justify-content:center;padding:12px 20px;margin-top:8px}
.big-btn.disabled,.big-btn:disabled{filter:grayscale(.72) brightness(.6);pointer-events:none}

.btn-solo{background:linear-gradient(180deg,#4fb0ff,#0d3fa8)}
.btn-online{background:linear-gradient(180deg,#55e08a,#0b6f4a)}
.btn-deck{background:linear-gradient(180deg,#a95ff0,#3d1478)}
.btn-coll{background:linear-gradient(180deg,#ffb04f,#b03d05)}
.btn-rules{background:linear-gradient(180deg,#f5474d,#6b0718)}
.btn-shop{background:linear-gradient(180deg,#ffc44f,#e2531a)}
.btn-rank{background:linear-gradient(180deg,#ffc44f,#a4550b)}
.btn-club{background:linear-gradient(180deg,#1fd8c7,#065c55)}
.btn-sell{background:linear-gradient(180deg,#55e08a,#0b6f4a)}
.big-btn.is-free{animation:freePulse 1.4s ease-in-out infinite}
@keyframes freePulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3) drop-shadow(0 0 16px rgba(255,212,46,.75))}}

/* --- botón de volver --- */
.back-btn{font-weight:900;font-size:13px;letter-spacing:.5px;padding:9px 15px;border-radius:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.07));
  border:2.5px solid rgba(255,255,255,.7);
  box-shadow:var(--e1),var(--bevel-soft);
  transition:transform .13s var(--ease-out),background .15s,box-shadow .13s}
.back-btn:hover{background:linear-gradient(180deg,#ffd42e,#ff9c2b);color:var(--ink);
  transform:translateX(-4px)}
.back-btn:active{transform:translateX(-2px) translateY(3px);box-shadow:0 1px 0 rgba(4,12,36,.5)}

/* --- chips / pestañas --- */
.chip{padding:8px 16px;border-radius:999px;font-weight:800;font-size:13px;letter-spacing:.3px;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  border:2px solid rgba(255,255,255,.18);
  box-shadow:var(--e1),var(--bevel-soft);
  transition:transform .13s var(--ease-out),background .15s,color .15s,box-shadow .13s}
.chip:hover{transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.09));
  border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.chip:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(4,12,36,.5)}
/* el chip activo se pinta del color de la sección */
.chip.active{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#fff;
  border-color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35);
  box-shadow:var(--e1),var(--bevel),0 0 20px color-mix(in srgb,var(--accent) 60%,transparent)}
.chip-gold{background:linear-gradient(180deg,#ffc44f,#e2531a);border-color:#fff;color:#2a1400}

/* --- botón fantasma (iconos) --- */
.ghost-btn{padding:8px 12px;border-radius:12px;font-weight:800;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border:2px solid rgba(255,255,255,.22);box-shadow:var(--e1),var(--bevel-soft);
  transition:transform .13s var(--ease-out),background .15s}
.ghost-btn:hover{background:linear-gradient(180deg,#ffd42e,#ff9c2b);color:var(--ink);transform:translateY(-2px)}
.ghost-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(4,12,36,.5)}
.ghost-btn.small{font-size:12px;padding:6px 10px}

/* --- onda al pulsar (la pinta el JS) --- */
.ripple{position:absolute;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,rgba(255,255,255,.65),transparent 70%);
  animation:rippleGo .55s var(--ease-out) forwards}
@keyframes rippleGo{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ================================================================
   CAMPOS DE TEXTO
   ================================================================ */
#coll-search,.code-input,.club-input,.field select,.field input{
  padding:9px 15px;border-radius:12px;color:#fff;font-weight:700;outline:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.32));
  border:2px solid rgba(255,255,255,.2);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5);
  transition:border-color .18s,box-shadow .18s}
#coll-search:focus,.code-input:focus,.club-input:focus,.field select:focus{
  border-color:var(--gold);box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 0 0 3px rgba(255,212,46,.22)}
#coll-search{width:158px}
.code-input{width:132px;text-align:center;font-family:var(--display);font-style:italic;font-size:23px;letter-spacing:7px}
::placeholder{color:rgba(255,255,255,.38)}

/* ================================================================
   PANELES DE CRISTAL — la base de casi todas las pantallas
   ================================================================ */
.panel,.online-card,.club-card,.rule-card,.shop-earn,.deck-side{
  background:linear-gradient(168deg,rgba(30,99,224,.42),rgba(8,26,84,.72)),var(--halftone);
  background-size:auto,5px 5px;
  border:3px solid rgba(255,255,255,.42);
  backdrop-filter:blur(10px);
  box-shadow:var(--e2),var(--bevel-soft)}

.online-card{width:min(310px,92vw);border-radius:20px;padding:22px;text-align:center;
  transition:transform .18s var(--ease-out),box-shadow .18s}
.online-card:hover{transform:translateY(-5px);box-shadow:var(--e3),var(--bevel-soft)}
.online-card h3{font-family:var(--display);font-style:italic;font-size:21px;letter-spacing:1px;margin-bottom:7px}
.online-card p{font-size:13px;opacity:.85;min-height:38px}
.online-wrap{flex:1;display:flex;flex-wrap:wrap;gap:18px;align-content:center;justify-content:center;padding:24px}
.room-code{margin-top:12px;font-family:var(--display);font-style:italic;font-size:38px;letter-spacing:10px;color:var(--gold);
  text-shadow:0 3px 0 rgba(0,0,0,.5);animation:pulseRing 1.6s infinite}
.online-status{width:100%;text-align:center;font-weight:800;min-height:26px;color:var(--gold)}

.rule-card{width:min(880px,94vw);border-radius:18px;padding:20px 24px}
.rule-card h3{font-family:var(--display);font-style:italic;letter-spacing:1px;color:var(--gold);margin-bottom:9px;font-size:21px}
.rule-card p,.rule-card li{font-size:14.5px;line-height:1.58;opacity:.94}
.rule-card ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.rule-card b{color:var(--cyan)}
.rule-hero{background:linear-gradient(160deg,rgba(255,176,43,.28),rgba(10,28,70,.75)),var(--halftone);
  background-size:auto,5px 5px;border-color:rgba(255,212,46,.5)}
.abil-table{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:10px;margin-top:11px}
.abil-item{display:flex;gap:10px;align-items:flex-start;background:rgba(0,0,0,.32);padding:10px 12px;
  border-radius:12px;border:2px solid rgba(255,255,255,.1);transition:.15s}
.abil-item:hover{border-color:rgba(255,212,46,.45);background:rgba(0,0,0,.42)}
.abil-item b{font-family:var(--display);font-style:italic;font-size:20px;color:var(--gold);min-width:32px;text-align:center}
.abil-item div{font-size:12px;line-height:1.38}
.abil-item div i{display:block;font-style:normal;font-weight:900;color:#fff;font-size:12.5px}

/* ================================================================
   MODALES
   ================================================================ */
.modal-back{position:fixed;inset:0;z-index:960;background:rgba(3,9,31,.84);backdrop-filter:blur(7px);
  display:grid;place-items:center;padding:20px;animation:screenIn .26s}
.modal{width:min(560px,94vw);max-height:88dvh;overflow-y:auto;padding:28px;text-align:center;
  border-radius:24px;
  background:linear-gradient(180deg,#1c4fbb,#08183f),var(--halftone);
  background-size:auto,5px 5px;
  border:4px solid rgba(255,255,255,.3);
  box-shadow:var(--e3),var(--bevel),0 30px 60px rgba(0,0,0,.6);
  animation:modalIn .42s var(--ease-pop) both}
@keyframes modalIn{from{opacity:0;transform:scale(.82) translateY(26px)}}
.modal h2{font-family:var(--display);font-style:italic;font-size:clamp(26px,5vw,42px);letter-spacing:1.5px;
  -webkit-text-stroke:2px var(--ink);margin-bottom:9px;text-shadow:0 5px 0 rgba(0,0,0,.4)}
.modal h2.win{color:#8dff9e}.modal h2.lose{color:#ff8a7a}
.modal p{opacity:.92;margin-bottom:16px;font-weight:700;line-height:1.5}
.modal .modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.modal-stats{display:flex;gap:14px;justify-content:center;margin:16px 0;flex-wrap:wrap}
.modal-stats div{background:rgba(0,0,0,.38);padding:10px 18px;border-radius:14px;
  border:2px solid rgba(255,255,255,.16);box-shadow:var(--bevel-soft)}
.modal-stats b{display:block;font-family:var(--display);font-style:italic;font-size:27px;color:var(--gold)}
.modal-stats span{font-size:10.5px;font-weight:800;opacity:.8;letter-spacing:.5px}
.modal-stats .reward b{color:#8dff9e}
.modal-stats .xp b{color:var(--cyan)}
.modal-wallet{font-size:13px;opacity:.9}
.code-line{font-family:monospace;background:rgba(0,0,0,.55);padding:8px 14px;border-radius:9px;
  display:inline-block;border:1px solid rgba(255,255,255,.15)}

/* ================================================================
   AVISOS
   ================================================================ */
.toast-holder{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:970;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:linear-gradient(180deg,rgba(12,28,66,.97),rgba(6,16,42,.97));
  border:2px solid var(--gold);color:#fff;font-weight:800;font-size:13.5px;
  padding:10px 20px;border-radius:999px;
  box-shadow:var(--e2),0 0 22px rgba(255,212,46,.28);
  animation:toastIn .38s var(--ease-pop);transition:opacity .3s}
@keyframes toastIn{from{opacity:0;transform:translateY(-20px) scale(.85)}}
.empty-msg{grid-column:1/-1;text-align:center;font-weight:800;opacity:.85;padding:40px 10px;line-height:2.4}

/* ================================================================
   MENÚ — panel de mando
   ================================================================ */
#screen-menu{display:none;flex-direction:column}
#screen-menu.active{display:flex}
.menu-bg{position:absolute;inset:0;
  background:
    radial-gradient(circle at 18% 12%,rgba(67,200,255,.30),transparent 46%),
    radial-gradient(circle at 84% 80%,rgba(224,36,42,.28),transparent 48%),
    conic-gradient(from 0deg at 50% 40%,rgba(255,255,255,.055) 0 6deg,transparent 6deg 18deg);
  animation:spinBg 70s linear infinite}
@keyframes spinBg{to{transform:rotate(1turn) scale(1.45)}}
.menu-vignette{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 40%,transparent 42%,rgba(2,6,20,.72) 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px)}

/* --- barra superior: jugador, nivel y monedero ---
   Placas de plástico con filo blanco y el relieve caído a la derecha,
   igual que los botones del menú. */
.hud-top{position:relative;z-index:3;display:flex;align-items:center;gap:14px;
  padding:14px 22px 16px;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(3,12,44,.92),rgba(3,12,44,.3));
  border-bottom:3px solid rgba(255,255,255,.16);backdrop-filter:blur(8px)}
.hud-top::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:5px;
  background:linear-gradient(90deg,transparent,#3a8dff,#4fd4ff,#3a8dff,transparent);
  box-shadow:0 0 20px rgba(79,212,255,.6)}

.player-chip{display:flex;align-items:center;gap:12px;padding:7px 20px 7px 7px;
  border-radius:999px;
  background:linear-gradient(180deg,#1b4fb8,#071e57);
  border:3.5px solid #fff;
  box-shadow:5px 6px 0 rgba(2,11,38,.9),8px 12px 20px rgba(0,0,0,.4),
             inset 0 3px 0 rgba(255,255,255,.3),inset 0 -4px 0 rgba(0,0,0,.28)}

/* el anillo dorado se llena con lo que llevas del nivel */
.pc-ring{position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--gold) calc(var(--p,0) * 1turn),rgba(255,255,255,.14) 0);
  padding:3.5px;cursor:pointer;border:0;
  transition:transform .14s var(--ease-out),filter .14s}
.pc-ring:hover{transform:scale(1.07);filter:brightness(1.15) drop-shadow(0 0 12px rgba(255,212,46,.7))}
.pc-ring:active{transform:scale(.96)}
.lv-badge{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;line-height:1;
  background:radial-gradient(circle at 50% 26%,#3a8dff,#0b2f7d 62%,#04143f);
  border:2.5px solid rgba(255,255,255,.5);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.35)}
.lv-badge small{font-size:8px;font-weight:900;color:var(--gold);letter-spacing:1px}
.lv-badge b{font-family:var(--display);font-style:italic;font-size:23px;color:#fff;
  text-shadow:2px 3px 0 rgba(2,11,38,.9)}
.pc-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.pc-info input{background:transparent;border:0;outline:none;color:#fff;
  font-family:var(--display);font-style:italic;
  font-size:20px;letter-spacing:.4px;padding:0;border-bottom:2px dashed transparent;
  width:auto;min-width:7ch;max-width:min(280px,26vw);field-sizing:content;
  text-shadow:2px 3px 0 rgba(2,11,38,.8)}
.pc-info input:focus{border-bottom-color:rgba(255,212,46,.7)}
.pc-info input::placeholder{color:rgba(255,255,255,.4)}
.pc-rank{font-size:10.5px;font-weight:900;letter-spacing:1.6px;color:#8fe3ff;
  text-shadow:0 2px 0 rgba(2,11,38,.7)}

/* la barra de experiencia, que también entra al camino de trofeos */
.level-bar{flex:1;min-width:190px;max-width:540px;display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,#123c96,#04143f);
  border:3.5px solid #fff;border-radius:18px;padding:9px 14px;cursor:pointer;
  box-shadow:5px 6px 0 rgba(2,11,38,.9),8px 12px 20px rgba(0,0,0,.4),
             inset 0 3px 0 rgba(255,255,255,.26),inset 0 -4px 0 rgba(0,0,0,.26);
  transition:transform .14s var(--ease-out),filter .14s}
.level-bar:hover{filter:brightness(1.14);transform:translate(-2px,-2px)}
.level-bar:active{transform:translate(3px,4px);box-shadow:1px 1px 0 rgba(2,11,38,.9)}
.lv-track{flex:1;min-width:0}
.lv-goto{flex:none;font-size:19px;line-height:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.lv-top{display:flex;justify-content:space-between;gap:10px;font-size:10.5px;font-weight:800;
  margin-bottom:6px}
.lv-top span:first-child{color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 2px 0 rgba(2,11,38,.8)}
.lv-fill-bg{height:13px;border-radius:999px;background:rgba(0,0,0,.6);overflow:hidden;
  border:2.5px solid rgba(255,255,255,.28);position:relative}
.lv-fill{height:100%;border-radius:999px;width:0;transition:width .8s cubic-bezier(.2,.9,.3,1);
  background:linear-gradient(90deg,#3ad16b,#8dff9e 55%,#ffd42e);
  box-shadow:0 0 12px rgba(141,255,158,.7);position:relative;overflow:hidden}
.lv-fill::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);
  animation:btnShine 2.6s ease-in-out infinite}

/* --- centro: logo --- */
@keyframes logoPop{from{transform:scale(.6) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
.tagline{font-weight:800;font-size:12.5px;opacity:.85;letter-spacing:.4px;
  text-shadow:0 2px 0 rgba(0,0,0,.6)}
.tagline b{color:var(--gold)}

/* ---------------- MENÚ: cielo del escenario ----------------
   Los rayos y el halo ya no van sueltos por el fondo: cuelgan del logo,
   así el punto de fuga cae siempre justo detrás de él. */
.menu-sky{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}

/* relámpago que cruza el cielo de vez en cuando */
.sky-bolt{position:absolute;inset:0;opacity:0;
  background:linear-gradient(184deg,rgba(255,255,255,.9),transparent 22%);
  animation:skyBolt 11s ease-out infinite 4s}
@keyframes skyBolt{0%,100%{opacity:0}1%{opacity:.5}2.4%{opacity:0}3.6%{opacity:.32}5%{opacity:0}}

/* suelo del escenario: un halo bajo las cartas del menú */
.sky-floor{position:absolute;left:50%;bottom:-6%;width:min(130vw,1500px);height:46%;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(67,200,255,.22),transparent 62%)}

/* ---------------- MENÚ · TRES COLUMNAS ----------------
   Barra de secciones pegada al borde izquierdo, eventos pegados al derecho,
   y en el centro solo ONLINE · JUGAR · RANKING con el logo encima. */
.menu-wrap{position:relative;z-index:2;flex:1;min-height:0;display:flex;
  flex-direction:column;justify-content:center;gap:clamp(2px,1vh,14px);
  padding:clamp(4px,1vh,14px) 0 4px;overflow:hidden}

/* el logo, centrado, con los rayos saliendo justo de detrás */
.logo-holder{position:relative;flex:none;align-self:center;z-index:3;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.65));
  animation:logoPop .7s cubic-bezier(.2,1.4,.4,1)}
.logo-holder svg,.logo-holder img{position:relative;z-index:2;display:block;
  width:auto;height:auto;max-width:min(640px,46vw);max-height:min(320px,31vh)}
/* los rayos giran alrededor del logo */
.logo-holder::before{content:'';position:absolute;left:50%;top:50%;z-index:0;
  width:min(200vmax,2100px);aspect-ratio:1;pointer-events:none;
  transform:translate(-50%,-50%);opacity:.22;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.45) 0 2.2deg,transparent 2.2deg 11deg);
  -webkit-mask-image:radial-gradient(circle,#000 5%,transparent 46%);
  mask-image:radial-gradient(circle,#000 5%,transparent 46%);
  animation:raySpin 40s linear infinite}
/* y el halo respira detrás */
.logo-holder::after{content:'';position:absolute;left:50%;top:50%;z-index:0;
  width:min(120vw,1150px);aspect-ratio:1;pointer-events:none;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(79,212,255,.3),rgba(79,212,255,.07) 40%,transparent 64%);
  animation:skyBreath 7s ease-in-out infinite}
@keyframes skyBreath{0%,100%{opacity:.72}50%{opacity:1}}

.menu-cols{position:relative;z-index:3;flex:0 1 auto;min-height:0;display:grid;
  grid-template-columns:minmax(210px,280px) 1fr minmax(220px,320px);
  gap:clamp(10px,2vw,26px);align-items:center;padding:0 clamp(10px,1.6vw,22px)}

/* ---------- el plástico de los botones ----------
   Azul oscuro, sin trama de puntos y con el relieve caído hacia la
   derecha y abajo, como el de la pantalla de referencia. */
.mbtn,.side-play,.ev-card,.play-bar{
  position:relative;cursor:pointer;overflow:hidden;
  border:4px solid #fff;
  box-shadow:6px 7px 0 var(--sombra,rgba(2,11,38,.9)),
             10px 16px 26px rgba(0,0,0,.45),
             inset 0 3px 0 rgba(255,255,255,.34),
             inset 0 -5px 0 rgba(0,0,0,.3);
  transition:transform .13s var(--ease-out),box-shadow .13s,filter .13s}

/* --- barra izquierda, pegada al borde --- */
.rail{display:flex;flex-direction:column;gap:clamp(7px,1.2vh,13px);justify-self:start;width:100%}
.mbtn{display:flex;align-items:center;gap:13px;padding:clamp(8px,1.3vh,15px) 18px;border-radius:20px;
  text-align:left;
  background:linear-gradient(180deg,var(--c1,#1b4fb8) 0%,var(--c2,#071e57) 100%);
  animation:mbtnIn .4s cubic-bezier(.2,1.3,.4,1) both;
  animation-delay:calc(var(--i,0) * 55ms + .25s)}
@keyframes mbtnIn{from{opacity:0;transform:translateX(-26px) scale(.94)}}
.mbtn::after{content:"";position:absolute;inset:-40%;pointer-events:none;
  background:linear-gradient(104deg,transparent 42%,rgba(255,255,255,.35) 50%,transparent 58%);
  transform:translateX(-130%);transition:transform .5s}
.mbtn:hover{transform:translate(-2px,-3px);filter:brightness(1.16);
  box-shadow:8px 10px 0 var(--sombra,rgba(2,11,38,.9)),14px 22px 32px rgba(0,0,0,.5),
             inset 0 3px 0 rgba(255,255,255,.4),inset 0 -5px 0 rgba(0,0,0,.3),
             0 0 26px var(--glow,rgba(58,141,255,.55))}
.mbtn:hover::after{transform:translateX(130%)}
.mbtn:active{transform:translate(4px,5px);
  box-shadow:2px 2px 0 var(--sombra,rgba(2,11,38,.9)),inset 0 2px 0 rgba(255,255,255,.3)}
.mbtn.picked{animation:mbtnPick .18s ease-out forwards}
@keyframes mbtnPick{to{transform:scale(1.05);filter:brightness(2.2) saturate(.4)}}

.mb-ico{position:relative;flex:none;width:clamp(36px,4.6vh,46px);height:clamp(36px,4.6vh,46px);
  border-radius:13px;display:grid;place-items:center;font-size:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(0,0,0,.34));
  border:2.5px solid rgba(255,255,255,.5);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.mb-txt{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.14}
.mb-txt b{font-family:var(--display);font-style:italic;font-size:19px;letter-spacing:.6px;
  color:#fff;text-shadow:2px 3px 0 rgba(2,11,38,.75);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-badge{position:absolute;top:-7px;right:-7px;z-index:3;
  background:linear-gradient(180deg,#ff6a6a,#c8102e);color:#fff;
  font-family:var(--display);font-style:italic;font-size:12px;min-width:24px;text-align:center;
  padding:1px 7px;border-radius:999px;border:3px solid #fff;
  box-shadow:0 3px 0 rgba(80,0,10,.6);animation:freePulse 1.2s ease-in-out infinite}

/* todo azul oscuro menos la tienda, que es la que llama */
.m-shop{--c1:#e04ad0;--c2:#6a12a8;--glow:rgba(224,74,208,.7);--sombra:rgba(52,4,84,.9)}
.m-coll{--c1:#1b4fb8;--c2:#071e57}
.m-deck{--c1:#1b4fb8;--c2:#071e57}
.m-rules{--c1:#1b4fb8;--c2:#071e57}

/* --- centro --- */
.menu-stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(10px,2.4vh,26px);perspective:1400px;min-width:0}
.play-row{display:flex;align-items:center;justify-content:center;
  gap:clamp(8px,1.6vw,20px);width:100%}

.play-bar{flex:0 1 auto;min-width:min(470px,40vw);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:clamp(13px,2.4vh,24px) 40px;border-radius:28px;--sombra:rgba(140,52,4,.9);
  background:linear-gradient(180deg,#ffe14f 0%,#ffab1f 46%,#f5610f 100%);
  box-shadow:7px 10px 0 var(--sombra),14px 22px 38px rgba(0,0,0,.5),
             inset 0 4px 0 rgba(255,255,255,.65),inset 0 -6px 0 rgba(140,52,4,.3),
             0 0 50px rgba(255,170,50,.4);
  transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  animation:barIn .55s cubic-bezier(.2,1.4,.4,1) both .1s}
@keyframes barIn{from{opacity:0;transform:translateY(34px) scale(.94)}}
.play-bar:hover{filter:brightness(1.07);
  box-shadow:9px 13px 0 var(--sombra),18px 28px 48px rgba(0,0,0,.55),
             inset 0 4px 0 rgba(255,255,255,.75),inset 0 -6px 0 rgba(140,52,4,.3),
             0 0 74px rgba(255,190,70,.6)}
.play-bar:active{transform:translate(4px,6px);box-shadow:2px 3px 0 var(--sombra)}
.pb-shine{position:absolute;inset:-40%;z-index:1;pointer-events:none;
  background:linear-gradient(104deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
  transform:translateX(-120%);animation:btnShine 3.4s ease-in-out infinite}
.pb-txt{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  line-height:1}
.pb-txt b{font-family:var(--display);font-style:italic;
  font-size:clamp(38px,5.2vw,72px);letter-spacing:1px;
  color:#fff;-webkit-text-stroke:2px #a83c05;
  text-shadow:4px 6px 0 rgba(140,52,4,.75),0 0 24px rgba(255,255,255,.4)}
.pb-txt i{font-style:normal;font-size:14px;font-weight:900;letter-spacing:1.6px;
  color:#7a2f02;background:#fff;padding:3px 14px;border-radius:999px;margin-top:7px;
  box-shadow:0 3px 0 rgba(140,52,4,.5)}

.side-play{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:clamp(12px,2.2vh,22px) 24px;border-radius:24px;
  background:linear-gradient(180deg,var(--c1,#1b4fb8),var(--c2,#071e57))}
.side-play:hover{transform:translate(-2px,-4px);filter:brightness(1.16)}
.side-play:active{transform:translate(4px,5px);box-shadow:2px 2px 0 var(--sombra,rgba(2,11,38,.9))}
.sp-ico{position:relative;font-size:36px;line-height:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.sp-txt{position:relative;font-family:var(--display);font-style:italic;font-size:15px;
  letter-spacing:.5px;color:#fff;text-shadow:2px 3px 0 rgba(2,11,38,.7)}
.m-online{--c1:#1b4fb8;--c2:#071e57}
.m-rank{--c1:#1b4fb8;--c2:#071e57}

/* --- columna derecha: eventos, pegados al borde --- */
.events{display:flex;flex-direction:column;gap:clamp(8px,1.3vh,13px);justify-self:end;width:100%}
.ev-card{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px;border-radius:22px;text-align:center;
  animation:mbtnIn .45s cubic-bezier(.2,1.3,.4,1) both .4s}
.ev-card:hover{transform:translate(-2px,-3px);filter:brightness(1.1)}
.ev-card:active{transform:translate(4px,5px);
  box-shadow:2px 2px 0 var(--sombra,rgba(2,11,38,.9))}
/* el evento lleva su propio cartel de fondo */
.ev-rivals{--sombra:rgba(60,4,90,.9);min-height:clamp(110px,17vh,160px);justify-content:center;
  background:linear-gradient(160deg,#8a3cff 0%,#ff2fb0 58%,#ff7a3d 100%)}
.ev-rivals.con-fondo{background:var(--fondo) center/cover no-repeat}
.ev-rivals.con-fondo .ev-eyebrow{background:rgba(0,0,0,.5);padding:3px 12px;border-radius:999px}
.ev-club{--sombra:rgba(2,60,56,.9);
  background:linear-gradient(160deg,#00e6d0,#046b63)}
.ev-eyebrow{position:relative;font-size:10px;font-weight:900;letter-spacing:2.4px;
  color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.ev-tit{position:relative;font-family:var(--display);font-style:italic;font-size:21px;
  letter-spacing:.6px;color:#fff;text-shadow:2px 4px 0 rgba(0,0,0,.45)}
.ev-ico{position:relative;font-size:38px;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.ev-logo{position:relative;font-family:var(--display);font-style:italic;font-size:20px;
  color:#fff;text-shadow:2px 4px 0 rgba(0,0,0,.45)}
.ev-logo img{display:block;width:100%;max-width:186px;height:auto;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.55))}
.ev-cuenta{position:relative;font-size:11.5px;font-weight:900;letter-spacing:.6px;color:#fff;
  padding:3px 12px;border-radius:999px;background:rgba(0,0,0,.45);
  border:2.5px solid rgba(255,255,255,.5)}

@media (max-width:1080px){
  .menu-cols{grid-template-columns:1fr;gap:10px;overflow-y:auto;align-items:start;
    padding:0 12px 14px}
  .logo-holder svg,.logo-holder img{width:min(360px,72vw)}
  .rail{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .mbtn{flex:1 1 150px}
  .events{flex-direction:row;justify-content:center;flex-wrap:wrap}
  .ev-card{flex:1 1 190px}
}
@media (max-width:560px){
  .play-bar{min-width:auto;padding:13px 18px}
  .mb-txt b{font-size:14px}
}

.menu-foot{position:relative;z-index:3;display:flex;gap:14px;align-items:center;justify-content:center;
  padding:10px 18px;background:linear-gradient(0deg,rgba(3,9,31,.8),transparent)}
/* los campos del menú no se estiran: si no, los ajustes salen en las esquinas */
.menu-foot .field{flex:0 0 auto}
.field{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;opacity:.85}
.field select{padding:6px 10px;border-radius:10px;border:2px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.45);color:#fff;font-weight:700;outline:none}
.ghost-btn{padding:7px 12px;border-radius:10px;background:rgba(255,255,255,.1);
  border:2px solid rgba(255,255,255,.2);font-weight:800;transition:.14s}
.ghost-btn:hover{background:var(--gold);color:var(--ink)}
.ghost-btn.small{font-size:12px;padding:6px 10px}

@media (max-width:820px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tile-play{grid-column:span 2;grid-row:auto;min-height:130px}
  .tile-play .tile-ico{font-size:40px}
  .tile-play .tile-txt b{font-size:24px}
  .hud-top{padding:8px 12px;gap:9px}
  .level-bar{order:3;width:100%;max-width:none;flex-basis:100%}
}

/* ================================================================
   CARTAS
   ================================================================ */
.card{
  --mx:50%; --my:50%; --rx:0deg; --ry:0deg;
  position:relative;width:var(--card-w);aspect-ratio:5/7;
  perspective:900px;flex:0 0 auto;
}
.card-sm{--card-base:clamp(146px,17vw,196px)}
.card-lg{--card-base:clamp(240px,31vw,340px)}
.card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.8,.3,1.2)}
.card.is-face-down .card-inner{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;
  backface-visibility:hidden;box-shadow:0 8px 18px rgba(0,0,0,.5)}
/* con foto real no hay caja ni sombra de caja: manda la lámina */
.card.has-photo .card-face{box-shadow:none;background:none;overflow:visible}
.card-back{transform:rotateY(180deg);background:#0b2a72}
.card-back-art{width:100%;height:100%;display:block}

.card.is-interactive .card-inner{transform:rotateX(var(--rx)) rotateY(var(--ry))}
.card.is-interactive:hover{z-index:20}

.card-bg-holder{position:absolute;inset:0}
.card-bg{width:100%;height:100%;display:block}
.bg-rays{transform-origin:150px 190px;animation:rays 26s linear infinite}
@keyframes rays{to{transform:rotate(1turn)}}

.card-frame{position:absolute;inset:0;display:flex;flex-direction:column;
  padding:7% 7% 6%;border-radius:var(--radius);
  border:3px solid rgba(255,255,255,.5);box-shadow:inset 0 0 0 3px rgba(0,0,0,.35)}
.card-hero .card-frame{border-color:#7fe3ff}
.card-villain .card-frame{border-color:#ffb3a6}

.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:4px}
.faction svg{width:clamp(20px,2.1vw,32px);height:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.power{display:flex;align-items:center;gap:2px;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.15));
  padding:2px 6px;border-radius:10px;border:2px solid rgba(255,255,255,.35)}
.power-label{font-size:.42em;font-weight:900;letter-spacing:.5px;opacity:.8;
  writing-mode:vertical-rl;transform:rotate(180deg);line-height:1}
.power-value{font-family:var(--display);font-style:italic;font-size:clamp(15px,2.3vw,27px);line-height:1;
  color:#fff;-webkit-text-stroke:1.4px var(--ink);text-shadow:0 2px 0 rgba(0,0,0,.5)}
.power .bolt{flex:0 0 auto}

.card-art{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;margin:2% 0}
.card-art svg{width:100%;height:100%;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.card-name{text-align:center}
.card-name span{display:inline-block;font-family:var(--display);font-style:italic;letter-spacing:.5px;
  font-size:clamp(8.5px,1.2vw,16px);text-transform:uppercase;line-height:1.05;
  padding:2px 8px;border-radius:7px;background:rgba(6,20,54,.72);
  border:1.5px solid rgba(255,255,255,.28);
  text-shadow:0 2px 0 rgba(0,0,0,.7),0 0 8px rgba(0,0,0,.5)}
/* en miniatura el nombre no puede comerse la ilustración */
.card-sm .card-name span{font-size:clamp(6.5px,.86vw,10px);padding:1px 5px;border-radius:5px;letter-spacing:0}
.card-sm .card-frame{padding:6% 6% 5%}
.card-footer{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:3%}
.ability-chip{display:flex;align-items:center;gap:3px;background:rgba(0,0,0,.5);
  border:1.5px solid rgba(255,255,255,.35);border-radius:8px;padding:2px 5px;max-width:82%}
.ability-chip b{font-family:var(--display);font-style:italic;font-size:clamp(8px,1.1vw,14px);color:var(--gold)}
.ability-chip span{font-size:clamp(5.5px,.66vw,8.5px);font-weight:900;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}
.ability-chip .cost{font-size:clamp(5.5px,.68vw,9px);font-style:normal;color:var(--cyan);font-weight:900}
.card-code{font-size:clamp(5px,.6vw,8px);opacity:.55;font-weight:800}

/* brillo genérico */
.shine{position:absolute;inset:0;pointer-events:none;border-radius:var(--radius);
  background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.35),transparent 45%);
  mix-blend-mode:soft-light}

/* ---------- CARTAS METALIZADAS (UR) ---------- */
.rarity-ur .card-frame{border-color:#ffe98a;box-shadow:inset 0 0 0 3px rgba(0,0,0,.4),0 0 22px rgba(255,220,120,.5)}
.rarity-ur .card-front{box-shadow:0 8px 22px rgba(0,0,0,.55),0 0 26px rgba(255,214,90,.45)}
.foil{position:absolute;inset:0;pointer-events:none;border-radius:var(--radius);
  background:conic-gradient(from 0deg at var(--mx) var(--my),
    #ff2fd0,#ffd400,#3dff9e,#25d5ff,#8b5bff,#ff2fd0);
  mix-blend-mode:soft-light;opacity:.85;filter:saturate(1.35) blur(5px);
  animation:foilSpin 9s linear infinite;animation-delay:var(--fd,0s)}
@keyframes foilSpin{to{filter:saturate(1.35) blur(5px) hue-rotate(360deg)}}
.foil-2{
  background:repeating-linear-gradient(112deg,
    transparent 0 7px,rgba(255,255,255,.75) 7px 9px,transparent 9px 17px);
  mix-blend-mode:color-dodge;opacity:.42;filter:none;animation:none;
  -webkit-mask-image:radial-gradient(circle at var(--mx) var(--my),#000 0%,rgba(0,0,0,.4) 32%,transparent 62%);
  mask-image:radial-gradient(circle at var(--mx) var(--my),#000 0%,rgba(0,0,0,.4) 32%,transparent 62%)}
.glitter{position:absolute;inset:0;pointer-events:none;border-radius:var(--radius);overflow:hidden;
  mix-blend-mode:screen}
.glitter i{position:absolute;border-radius:50%;background:#fff;
  box-shadow:0 0 6px 1px rgba(255,255,255,.9);opacity:0;animation:twinkle 2.6s infinite ease-in-out}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1.3)}}
.ur-badge{position:absolute;left:3%;bottom:3%;width:8.5%;max-width:34px;z-index:4;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
  animation:sealPulse 2.4s ease-in-out infinite;pointer-events:none}
.ur-badge svg,.ur-badge img{width:100%;height:auto;display:block}
@keyframes sealPulse{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(-8deg) scale(1.08)}}
.rarity-ur .card-name span{color:#fff8c9}

/* ---------- Estados de carta ---------- */
.card.selectable{cursor:pointer;transition:transform .18s}
.card.selectable:hover{transform:translateY(-16px) scale(1.04)}
.card.chosen{transform:translateY(-26px) scale(1.07);filter:drop-shadow(0 0 16px var(--gold))}
.card.chosen::after{content:'';position:absolute;inset:-6px;border-radius:24px;
  border:3px solid var(--gold);animation:pulseRing 1s infinite}
@keyframes pulseRing{0%,100%{opacity:1}50%{opacity:.35}}
.card.disabled{filter:grayscale(.65) brightness(.6);pointer-events:none}
.card.winner-glow{animation:winGlow 1.1s ease-out}
@keyframes winGlow{0%{filter:none}30%{filter:drop-shadow(0 0 30px #ffd42e) brightness(1.35)}100%{filter:none}}
.card.loser-fade{animation:loseFade .9s forwards}
@keyframes loseFade{to{filter:grayscale(1) brightness(.5);transform:scale(.92) translateY(10px)}}

/* la ganadora vuela a la zona de puntuación; la perdedora, al descarte */
.card.to-score{animation:toScore .5s cubic-bezier(.5,0,.7,1) forwards;z-index:20}
@keyframes toScore{to{transform:translate(var(--tx),var(--ty)) scale(.12) rotate(8deg);opacity:0}}
.card.to-discard{animation:toDiscard .5s ease-in forwards}
@keyframes toDiscard{to{transform:translateY(60px) scale(.8) rotate(-6deg);opacity:0}}

/* ================================================================
   ÁLBUM / COLECCIÓN
   ================================================================ */
.album{flex:1;overflow-y:auto;padding:20px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(110px,13vw,150px),1fr));gap:16px;
  align-content:start;justify-items:center}
.album .card{animation:cardIn .4s backwards}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) rotate(-4deg)}to{opacity:1;transform:none}}

/* ================================================================
   CONSTRUCTOR DE MAZO
   ================================================================ */
.deck-layout{flex:1;display:grid;grid-template-columns:1fr minmax(210px,300px);min-height:0}
.deck-pool{overflow-y:auto;padding:18px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(132px,13vw,178px),1fr));
  gap:14px;align-content:start;justify-items:center}
.deck-pool .card{--card-base:clamp(132px,13vw,178px)}
.deck-side{background:rgba(0,0,0,.35);border-left:3px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;min-height:0}
.deck-side h3{font-family:var(--display);font-style:italic;padding:12px 16px;letter-spacing:1px;border-bottom:2px solid rgba(255,255,255,.1)}
.deck-list{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px}
.deck-row{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;
  background:rgba(255,255,255,.08);border:2px solid transparent;cursor:pointer;transition:.13s}
.deck-row:hover{background:rgba(224,36,42,.35);border-color:#ff8a7a}
.deck-row .dr-pow{font-family:var(--display);font-style:italic;color:var(--gold);min-width:38px;text-align:right}
.deck-row .dr-name{font-size:12.5px;font-weight:800;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-row .dr-f{width:9px;height:9px;border-radius:50%}
.deck-row.hero .dr-f{background:var(--cyan)} .deck-row.villain .dr-f{background:var(--red)}
.deck-power{font-size:13px;font-weight:800;opacity:.85}
.deck-power b{color:var(--gold);font-family:var(--display);font-style:italic;font-size:17px}
/* en el mazo: resplandor verde que sigue la silueta del PNG, sin recuadro */
.card.in-deck{outline:none}
.card.in-deck .card-photo{
  filter:drop-shadow(0 0 0 var(--green)) drop-shadow(0 0 7px var(--green))
         drop-shadow(0 0 16px rgba(58,209,107,.7)) drop-shadow(0 8px 14px rgba(0,0,0,.5))}
/* las dibujadas por código sí llevan borde, porque ahí no hay silueta */
.card.in-deck:not(.has-photo){outline:4px solid var(--green);outline-offset:2px;
  border-radius:calc(var(--radius) + 4px)}
.deck-pool .card{cursor:pointer;transition:transform .15s}
.deck-pool .card:hover{transform:translateY(-8px) scale(1.05)}

/* ================================================================
   BATALLA
   ================================================================ */
#screen-battle{padding:0}
.battle-bg{position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 50%,rgba(67,200,255,.22),transparent 55%),
    repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.05) 0 4deg,transparent 4deg 12deg);
  animation:spinBg 90s linear infinite}
#app.shaking{animation:shakeIt .5s}
@keyframes shakeIt{
  0%,100%{transform:none}
  15%{transform:translate(calc(-9px * var(--shake,1)),calc(5px * var(--shake,1))) rotate(-.5deg)}
  35%{transform:translate(calc(8px * var(--shake,1)),calc(-6px * var(--shake,1))) rotate(.5deg)}
  60%{transform:translate(calc(-5px * var(--shake,1)),calc(3px * var(--shake,1)))}
  80%{transform:translate(calc(4px * var(--shake,1)),0)}}

.hud{position:relative;z-index:3;display:flex;align-items:center;gap:12px;padding:8px 16px}
.hud-foe{background:linear-gradient(180deg,rgba(107,7,24,.75),transparent)}
.hud-me{background:linear-gradient(0deg,rgba(11,79,191,.7),transparent);margin-top:auto}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-style:italic;
  font-size:22px;background:linear-gradient(180deg,#2f7fff,#0d3fa8);border:3px solid #fff;
  box-shadow:0 4px 0 rgba(0,0,0,.5)}
.hud-foe .avatar{background:linear-gradient(180deg,#e0242a,#6b0718)}
.hud-info{display:flex;flex-direction:column;gap:2px}
.hud-info b{font-family:var(--display);font-style:italic;letter-spacing:.8px;font-size:16px}
.hud-stats{display:flex;gap:10px}
.stat{display:flex;align-items:center;gap:3px;font-weight:900;font-size:13px;
  background:rgba(0,0,0,.4);padding:2px 8px;border-radius:999px;border:2px solid rgba(255,255,255,.16)}
.stat i{font-style:normal}
.stat.energy b{color:var(--cyan)}
.crowns{display:flex;gap:5px;margin-left:auto}
.hud-me .crowns{margin-left:0;margin-right:auto}
.crown{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.3);transition:.25s}
.crown.on{background:radial-gradient(circle at 35% 30%,#fff6c4,var(--gold));border-color:#fff;
  box-shadow:0 0 12px var(--gold);transform:scale(1.18)}

/* --- Marcador de KAZOOMS: es lo que decide la partida --- */
.kazoom-score{align-items:center;gap:6px;padding:3px 12px;border-radius:999px;
  background:rgba(0,0,0,.42);border:2px solid rgba(255,255,255,.2);
  box-shadow:var(--bevel-soft);transition:.25s}
.kazoom-score .kz-ico{font-size:15px;line-height:1}
.kazoom-score b{font-family:var(--display);font-style:italic;font-size:22px;color:var(--gold);
  text-shadow:0 0 12px rgba(255,212,46,.6);min-width:20px;text-align:center}
.kazoom-score .kz-lbl{font-size:9px;font-weight:900;letter-spacing:1.2px;opacity:.7}
.kazoom-score.pop{animation:kzPop .5s cubic-bezier(.2,1.7,.4,1)}
@keyframes kzPop{0%{transform:scale(1)}45%{transform:scale(1.3);
  box-shadow:0 0 26px rgba(255,212,46,.75)}100%{transform:scale(1)}}

.arena-banner{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:14px;padding:2px}
.round-tag{font-weight:900;font-size:12px;letter-spacing:1px;opacity:.85}
.round-tag b{font-family:var(--display);font-style:italic;font-size:18px;color:var(--gold)}
.arena-tag{font-family:var(--display);font-style:italic;font-size:13px;letter-spacing:1.6px;padding:3px 14px;border-radius:999px;
  border:2px solid rgba(255,255,255,.3);background:rgba(0,0,0,.35)}
.arena-tag.hero{background:linear-gradient(90deg,#0d3fa8,#2f9bff);border-color:#7fe3ff}
.arena-tag.villain{background:linear-gradient(90deg,#6b0718,#e0242a);border-color:#ffb3a6}
.arena-banner .ghost-btn{position:absolute;right:12px}

.field{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;min-height:0;padding:4px}
.slot{width:var(--card-w);aspect-ratio:5/7;border-radius:var(--radius);display:grid;place-items:center;
  border:3px dashed rgba(255,255,255,.22);position:relative;transition:.25s}
.slot .slot-hint{font-size:11px;font-weight:800;opacity:.4;letter-spacing:1px;text-transform:uppercase}
/* con carta dentro no se pinta ningún recuadro: manda la lámina */
.slot.filled{border-color:transparent;border-style:none;background:none}
.slot .card{position:absolute;inset:0;width:100%}
/* pie de la carta jugada: nombre y qué es, legible de un vistazo */
.slot-cap{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:none;
  padding:4px 14px;border-radius:12px;white-space:nowrap;
  background:rgba(4,10,32,.82);border:2.5px solid rgba(255,255,255,.28);
  box-shadow:0 5px 14px rgba(0,0,0,.55);animation:capIn .3s var(--ease-pop) both}
@keyframes capIn{from{opacity:0;transform:translateX(-50%) translateY(-8px) scale(.9)}}
.slot-cap b{font-family:var(--display);font-style:italic;font-size:15px;letter-spacing:.9px;line-height:1.1}
.slot-cap i{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:1.1px;opacity:.75}
.slot-cap.hero b{color:#8dd0ff}
.slot-cap.villain b{color:#ff9db0}

.slot-me.filled{box-shadow:0 0 26px rgba(67,200,255,.5)}
.slot-foe.filled{box-shadow:0 0 26px rgba(224,36,42,.5)}
.vs-badge{font-family:var(--display);font-style:italic;font-size:clamp(20px,3.4vw,34px);letter-spacing:2px;
  color:var(--gold);-webkit-text-stroke:2px var(--ink);text-shadow:0 4px 0 rgba(0,0,0,.5);
  transition:.3s}
.vs-badge.clash{animation:vsClash .6s}
@keyframes vsClash{0%{transform:scale(1)}40%{transform:scale(2.1) rotate(-8deg)}100%{transform:scale(1)}}

.power-readout{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);
  font-family:var(--display);font-style:italic;font-size:clamp(20px,3vw,34px);color:#fff;
  -webkit-text-stroke:2px var(--ink);text-shadow:0 3px 0 rgba(0,0,0,.6);white-space:nowrap;z-index:6}
.power-readout.up{color:var(--gold)} .power-readout.down{color:#ff8a7a}
.step-list{position:absolute;top:6px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;
  gap:2px;align-items:center;z-index:6;pointer-events:none}
.step-list span{font-size:11px;font-weight:900;padding:2px 8px;border-radius:999px;
  background:rgba(0,0,0,.65);border:1.5px solid rgba(255,255,255,.25);animation:stepIn .3s backwards;white-space:nowrap}
@keyframes stepIn{from{opacity:0;transform:translateY(-8px) scale(.8)}to{opacity:1;transform:none}}

/* Mano · LA MESA
   Antes las cartas flotaban sobre el fondo de la ciudad y se leían fatal.
   Ahora se apoyan en una banda propia: tapete oscuro con foco de escenario,
   trama de cómic, filo dorado arriba y rayos saliendo desde tus cartas. */
/* la mano ya no es una banda con línea: solo un degradado suave hacia
   abajo, para que se siga viendo la mesa entera */
.hand-zone{position:relative;z-index:4;padding:4px 8px 8px;display:flex;flex-direction:column;
  gap:4px;align-items:center;border:none;
  background:linear-gradient(180deg,transparent 0%,rgba(3,8,26,.55) 45%,rgba(2,6,22,.85) 100%);
  box-shadow:none}
.hand-zone > *{position:relative;z-index:1}
/* rayos de foco + trama de puntos, difuminados hacia arriba */

.hand{--card-base:clamp(150px,17vw,224px);
  display:flex;gap:6px;justify-content:center;align-items:flex-end;
  min-height:calc(var(--card-w) * .84);padding-top:2px;perspective:1200px}
.hand .card{transform-origin:bottom center;animation:dealIn .45s backwards}
@keyframes dealIn{from{opacity:0;transform:translateY(90px) rotate(18deg) scale(.7)}to{opacity:1}}

.action-bar{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.power-toggle{display:flex;align-items:center;gap:9px;padding:7px 13px;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,rgba(142,59,214,.9),rgba(61,20,120,.9));
  border:3px solid rgba(255,255,255,.28);box-shadow:0 5px 0 rgba(0,0,0,.5);max-width:min(430px,90vw);
  transition:.15s}
.power-toggle:hover{filter:brightness(1.14)}
.power-toggle:has(input:checked){background:linear-gradient(180deg,#ffb02b,#e2531a);
  box-shadow:0 5px 0 rgba(0,0,0,.5),0 0 22px rgba(255,180,40,.7)}
.power-toggle.locked{opacity:.4;pointer-events:none}
.power-toggle input{width:20px;height:20px;accent-color:var(--gold)}
.pt-body{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.pt-body b{font-family:var(--display);font-style:italic;font-size:15px;letter-spacing:.6px}
.pt-body i{font-style:normal;font-size:11px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.power-toggle em{font-style:normal;font-family:var(--display);font-style:italic;font-size:17px;color:#fff;
  background:rgba(0,0,0,.4);padding:2px 8px;border-radius:8px}

.play-btn{font-family:var(--display);font-style:italic;font-size:19px;letter-spacing:1.5px;padding:11px 34px;border-radius:14px;
  background:linear-gradient(180deg,#3ad16b,#0b6f4a);border:3px solid rgba(255,255,255,.35);
  box-shadow:0 6px 0 #041f14,0 10px 20px rgba(0,0,0,.45);transition:.12s;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.play-btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.15)}
.play-btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 #041f14}
.play-btn:disabled{filter:grayscale(.8) brightness(.6);cursor:default}
.play-btn.waiting{background:linear-gradient(180deg,#666,#333)}
.play-btn.next{background:linear-gradient(180deg,#ffb02b,#e2531a);box-shadow:0 6px 0 #6b2a05}

.emotes{position:absolute;right:12px;bottom:120px;display:flex;flex-direction:column;gap:5px;z-index:6}
.emotes button{width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.45);font-size:19px;
  border:2px solid rgba(255,255,255,.25);transition:.14s}
.emotes button:hover{transform:scale(1.18);background:var(--gold)}

/* Rótulos cómic y números flotantes */
.comic-pop{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);z-index:950;pointer-events:none;
  font-family:var(--display);font-style:italic;font-size:clamp(34px,8vw,84px);letter-spacing:2px;color:var(--gold);
  -webkit-text-stroke:4px var(--ink);text-shadow:0 8px 0 rgba(0,0,0,.45);
  animation:comicIn .34s cubic-bezier(.2,1.6,.4,1)}
.comic-pop.out{animation:comicOut .3s forwards}
.comic-pop.win{color:#8dff9e} .comic-pop.lose{color:#ff8a7a} .comic-pop.kaboom{color:#ff4b2b}
@keyframes comicIn{from{transform:translate(-50%,-50%) scale(.2) rotate(-14deg);opacity:0}
  to{transform:translate(-50%,-50%) scale(1) rotate(-4deg);opacity:1}}
@keyframes comicOut{to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
.float-num{position:fixed;transform:translate(-50%,-50%);z-index:950;pointer-events:none;
  font-family:var(--display);font-style:italic;font-size:clamp(20px,3vw,34px);color:var(--gold);
  -webkit-text-stroke:2px var(--ink);animation:floatUp 1.2s forwards}
.float-num.bad{color:#ff8a7a}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  25%{opacity:1;transform:translate(-50%,-90%) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}

.emote-pop{position:fixed;font-size:60px;z-index:955;pointer-events:none;animation:emotePop 1.5s forwards}
@keyframes emotePop{0%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1.25)}
  80%{opacity:1;transform:scale(1) translateY(-20px)}100%{opacity:0;transform:scale(.9) translateY(-60px)}}

/* Zoom de carta */
.card-zoom{position:fixed;inset:0;z-index:965;background:rgba(3,9,31,.85);display:grid;place-items:center;
  animation:screenIn .22s;cursor:zoom-out;padding:20px}
.card-zoom .card{--card-w:min(520px,86vw,58vh)}
.card-zoom .zoom-info{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);text-align:center;
  max-width:min(520px,90vw);background:rgba(0,0,0,.6);padding:12px 20px;border-radius:14px;
  border:2px solid rgba(255,255,255,.2)}
.card-zoom .zoom-info>b{font-family:var(--display);font-style:italic;color:var(--gold);font-size:19px;display:block}
.card-zoom .zoom-info span{font-size:13px;opacity:.9}

/* ================================================================
   MONEDERO / ENERGÍA
   ================================================================ */
.wallet{display:flex;gap:8px;align-items:center;margin-left:auto}
.wallet span{display:flex;align-items:center;gap:5px;font-weight:900;font-size:14px;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.3));padding:5px 13px;border-radius:999px;
  border:2px solid rgba(255,255,255,.24)}
.wallet .w-energy b{color:var(--gold);font-family:var(--display);font-style:italic;font-size:18px;letter-spacing:.5px}
.wallet .w-cards b{color:var(--cyan);font-family:var(--display);font-style:italic;font-size:18px}
.wallet i{font-style:normal;font-size:15px}
.wallet-big{margin:0}
.wallet-big span{font-size:16px;padding:8px 18px;border-color:rgba(255,255,255,.35);
  box-shadow:0 4px 0 rgba(0,0,0,.4)}
.wallet-big .w-energy b{font-size:24px}
.wallet-big .w-cards b{font-size:24px}
.w-energy.bump{animation:walletBump .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes walletBump{0%{transform:scale(1)}35%{transform:scale(1.3);filter:brightness(1.5)}100%{transform:scale(1)}}

.chip-gold{background:linear-gradient(180deg,#ffb02b,#e2531a);border-color:#fff}
.chip-gold:hover{filter:brightness(1.15)}
@keyframes giftWiggle{0%,88%,100%{transform:none}91%{transform:rotate(-9deg) scale(1.1)}95%{transform:rotate(9deg) scale(1.1)}}
.btn-shop{background:linear-gradient(180deg,#ffb02b,#e2531a)}
.top-bar h2 small.warn{color:#ff8a7a}

/* ================================================================
   TIENDA DE SOBRES
   ================================================================ */
.shop-wrap{flex:1;overflow-y:auto;padding:22px 18px 30px;display:flex;flex-direction:column;
  gap:20px;align-items:center}
.shelf{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;width:min(1000px,96vw)}

.product{position:relative;width:min(330px,92vw);display:flex;flex-direction:column;
  border-radius:22px;overflow:hidden;
  background:linear-gradient(170deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
  border:3px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);
  box-shadow:0 10px 0 rgba(0,0,0,.42),0 20px 34px rgba(0,0,0,.45),
             inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.2),box-shadow .18s}
.product:hover{transform:translateY(-6px);
  box-shadow:0 15px 0 rgba(0,0,0,.42),0 28px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.55)}
.product.cant{filter:saturate(.55) brightness(.85)}
.product::before{content:'';position:absolute;inset:0 0 auto;height:58%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,var(--pglow,rgba(255,255,255,.45)),transparent 65%);
  opacity:.55}
.accent-orange{--pglow:rgba(255,138,43,.65);border-color:rgba(255,176,43,.45)}
.accent-gold{--pglow:rgba(255,212,46,.8);border-color:rgba(255,212,46,.7);
  box-shadow:0 10px 0 rgba(0,0,0,.42),0 20px 34px rgba(0,0,0,.45),0 0 34px rgba(255,212,46,.4),
             inset 0 1px 0 rgba(255,255,255,.5)}
.accent-green{--pglow:rgba(58,209,107,.7);border-color:rgba(58,209,107,.5)}
/* Battle Mega Pack: el producto estrella, se nota */
.accent-mega{--pglow:rgba(255,47,208,.6);
  border-color:rgba(255,212,46,.65);
  background:linear-gradient(170deg,rgba(142,59,214,.5),rgba(224,36,42,.3) 55%,rgba(255,255,255,.05)),
             var(--halftone);
  background-size:auto,5px 5px;
  box-shadow:var(--e3),var(--bevel-soft),0 0 40px rgba(255,47,208,.32)}
.accent-mega .prod-name{background:linear-gradient(90deg,#ffd42e,#ff6fae 45%,#43c8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.5))}
.accent-mega .buy-btn{background:linear-gradient(180deg,#ff6fae,#8e3bd6);
  box-shadow:var(--e2),var(--bevel),0 0 22px rgba(255,111,174,.45)}
.accent-mega .prod-art::after{content:'';position:absolute;inset:6% 12% 18%;pointer-events:none;
  border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,212,46,.35),rgba(255,47,208,.3),rgba(67,200,255,.35),rgba(255,212,46,.35));
  filter:blur(26px);animation:megaSpin 9s linear infinite;z-index:-1}
@keyframes megaSpin{to{transform:rotate(1turn)}}
/* la lámina de las UR asomando dentro del sobre gordo */
.accent-mega .prod-img{filter:drop-shadow(0 14px 22px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(255,111,174,.5))}
.prod-hot{position:absolute;top:14px;left:14px;z-index:3;
  font-family:var(--display);font-style:italic;font-size:11.5px;letter-spacing:1.2px;padding:3px 12px;border-radius:999px;
  background:linear-gradient(90deg,#ffd42e,#ff6fae);color:#2a0430;
  border:2.5px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.5);
  animation:hotPulse 1.6s ease-in-out infinite}
@keyframes hotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

.prod-art{position:relative;display:grid;place-items:center;padding:18px 18px 4px;min-height:190px}
.prod-img{width:min(210px,58vw);height:auto;display:block;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.6));transition:transform .2s}
.product:hover .prod-img{transform:scale(1.05)}
.prod-svg svg{width:min(180px,50vw);height:auto;display:block;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.6))}

.prod-body{position:relative;padding:4px 18px 18px;display:flex;flex-direction:column;gap:6px}
.prod-sub{font-size:10.5px;font-weight:900;letter-spacing:2px;opacity:.7;text-transform:uppercase}
.prod-name{font-family:var(--display);font-style:italic;font-size:26px;letter-spacing:1.2px;line-height:1;
  text-shadow:0 3px 0 rgba(0,0,0,.45)}
.prod-list{list-style:none;display:flex;flex-direction:column;gap:5px;margin:6px 0 10px}
.prod-list li{font-size:12.5px;opacity:.92;padding-left:17px;position:relative;line-height:1.35}
.prod-list li::before{content:'▸';position:absolute;left:0;color:var(--gold);font-weight:900}
.prod-list b{color:var(--cyan)}

.buy-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:11px 16px;border-radius:14px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#ffb02b,#e2531a);border:3px solid rgba(255,255,255,.35);
  box-shadow:0 6px 0 #6b2a05,0 10px 18px rgba(0,0,0,.45);transition:.13s}
.buy-btn::after{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
  animation:btnShine 3.2s ease-in-out infinite}
.buy-btn:hover{transform:translateY(-2px);filter:brightness(1.12)}
.buy-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #6b2a05}
.buy-label{font-family:var(--display);font-style:italic;font-size:17px;letter-spacing:1.4px;position:relative}
.buy-price{font-family:var(--display);font-style:italic;font-size:19px;position:relative;
  background:rgba(0,0,0,.32);padding:2px 11px;border-radius:9px}
.accent-gold .buy-btn,.accent-green .buy-btn{background:linear-gradient(180deg,#3ad16b,#0b6f4a);
  box-shadow:0 6px 0 #04351f,0 10px 18px rgba(0,0,0,.45)}
.accent-gold .buy-btn:active,.accent-green .buy-btn:active{box-shadow:0 2px 0 #04351f}
.prod-warn{font-size:11.5px;font-weight:800;color:#ff8a7a;text-align:center}

.prod-tag,.prod-count{position:absolute;z-index:3;font-family:var(--display);font-style:italic;letter-spacing:1px;
  border-radius:999px;border:2.5px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.5)}
.prod-tag{top:14px;left:14px;background:linear-gradient(180deg,#3ad16b,#0b6f4a);
  font-size:12px;padding:3px 12px}
.prod-count{top:14px;right:14px;background:linear-gradient(180deg,#ffd42e,#e2531a);color:#2a1400;
  font-size:14px;padding:2px 11px}

/* --- selector de cantidad, cuando el producto ya está en el carrito --- */
.qty-row{display:flex;align-items:center;gap:10px;width:100%;padding:6px;border-radius:14px;
  background:rgba(0,0,0,.34);border:2.5px solid rgba(255,255,255,.22)}
.qty-btn{width:38px;height:38px;border-radius:11px;font-family:var(--display);font-style:italic;font-size:22px;
  line-height:1;background:linear-gradient(180deg,#ffb02b,#e2531a);color:#fff;
  border:2.5px solid rgba(255,255,255,.35);box-shadow:var(--e1),var(--bevel-soft);transition:.13s}
.qty-btn:hover{filter:brightness(1.14);transform:translateY(-2px)}
.qty-btn:active{transform:translateY(2px);box-shadow:none}
.qty-n{flex:1;text-align:center;font-family:var(--display);font-style:italic;font-size:20px;color:var(--gold)}
.qty-n i{display:block;font-family:var(--body);font-style:normal;font-size:10.5px;
  letter-spacing:1px;opacity:.7;color:#fff}

/* --- barra del carrito: se paga todo junto --- */
.cart-bar{position:sticky;bottom:0;z-index:8;display:flex;align-items:center;gap:14px;
  padding:12px 18px;margin-top:auto;
  background:linear-gradient(180deg,rgba(10,20,52,.86),rgba(4,9,28,.96));
  border-top:3px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);
  box-shadow:0 -10px 26px rgba(0,0,0,.5);flex-wrap:wrap}
.cart-toggle{display:flex;align-items:center;gap:7px;font-size:22px;padding:6px 14px;
  border-radius:999px;background:rgba(255,255,255,.1);border:2.5px solid rgba(255,255,255,.24)}
.cart-toggle b{font-family:var(--display);font-style:italic;font-size:19px;color:var(--gold)}
.cart-lines{flex:1;min-width:180px;display:flex;gap:8px;flex-wrap:wrap;
  max-height:66px;overflow-y:auto}
.cart-line{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;
  padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.08);
  border:2px solid rgba(255,255,255,.14)}
.cart-line b{font-family:var(--display);font-style:italic;font-size:15px;color:var(--gold)}
.cart-line i{font-style:normal;opacity:.7}
.cart-sum{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.cart-total-lbl{font-size:9.5px;font-weight:900;letter-spacing:1.6px;opacity:.6}
.cart-sum b{font-family:var(--display);font-style:italic;font-size:26px;color:var(--gold);
  text-shadow:0 0 14px rgba(255,212,46,.5)}
.cart-bar.cant .cart-sum b{color:#ff8a7a;text-shadow:none}
@media(max-width:640px){
  .cart-lines{display:none}
  .cart-bar.open .cart-lines{display:flex;order:5;width:100%;max-height:120px}
}

.shop-earn{width:min(1000px,96vw);background:rgba(0,0,0,.32);border-radius:14px;padding:12px 16px;
  border-left:4px solid var(--gold)}
.shop-earn b{display:block;color:var(--gold);font-size:13px;margin-bottom:3px}
.shop-earn span{font-size:12.5px;opacity:.88;line-height:1.45}

.soon-strip{width:min(1000px,96vw)}
.soon-title{font-size:10.5px;font-weight:900;letter-spacing:2px;opacity:.55;margin-bottom:8px}
.soon-row{display:flex;gap:10px;flex-wrap:wrap}
.soon-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;
  background:rgba(255,255,255,.05);border:2px dashed rgba(255,255,255,.16);
  opacity:.55;cursor:help;transition:.15s}
.soon-item:hover{opacity:.85;border-style:solid}
.soon-ico{font-size:24px;filter:grayscale(.5)}
.soon-txt{display:flex;flex-direction:column;line-height:1.2}
.soon-txt b{font-family:var(--display);font-style:italic;font-size:14px;letter-spacing:.6px}
.soon-txt i{font-style:normal;font-size:10.5px;opacity:.75}


/* ================================================================
   APERTURA DE SOBRE
   ================================================================ */
.pack-overlay{position:fixed;inset:0;z-index:958;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:16px;
  background:radial-gradient(ellipse at 50% 45%,rgba(20,60,150,.9),rgba(3,9,31,.97));
  backdrop-filter:blur(6px);animation:screenIn .3s}
.pack-overlay.closing{animation:comicOut .26s forwards}
.pack-overlay.slow{transition:filter .4s}
.pack-overlay.slow::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,transparent 30%,rgba(0,0,0,.55) 75%)}

.pack-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;
  transition:opacity .28s,transform .28s}
.pack-stage.gone{opacity:0;transform:scale(1.35)}
.pack-holder{cursor:pointer;filter:drop-shadow(0 18px 30px rgba(0,0,0,.7));
  transform-origin:50% 60%}
.pack-holder:hover{filter:drop-shadow(0 18px 34px rgba(255,210,70,.5))}
.pack-holder.shaking{animation:packShake .62s cubic-bezier(.36,.07,.19,.97)}
@keyframes packShake{
  0%,100%{transform:none}
  10%{transform:translate(-6px,0) rotate(-3deg)}25%{transform:translate(7px,-3px) rotate(4deg)}
  40%{transform:translate(-8px,2px) rotate(-5deg)}55%{transform:translate(9px,-2px) rotate(5deg)}
  70%{transform:translate(-7px,0) rotate(-4deg)}85%{transform:translate(5px,1px) rotate(3deg)}}
.pack-holder.tearing{animation:packTear .55s forwards}
@keyframes packTear{
  0%{transform:none}
  35%{transform:scale(1.12) rotate(-3deg)}
  100%{transform:scale(1.5) rotate(4deg);opacity:0;filter:brightness(3)}}
.pack-hint{font-weight:900;letter-spacing:1px;opacity:.85;animation:pulseRing 1.4s infinite}
.pack-beam{position:absolute;left:50%;top:50%;width:10px;height:10px;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;background:radial-gradient(circle,#fff,rgba(255,255,255,0) 70%);
  opacity:0}
.pack-beam.on{animation:beamBlow .7s ease-out forwards}
@keyframes beamBlow{0%{opacity:0;width:10px;height:10px}
  40%{opacity:1}
  100%{opacity:0;width:170vmax;height:170vmax}}

.reveal-stage{display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;flex:0 0 auto}
.reveal-slot{position:relative;display:grid;place-items:center;min-height:calc(var(--card-w) * 1.42)}
.reveal-card{animation:revealIn .34s cubic-bezier(.2,1.5,.4,1)}
@keyframes revealIn{from{opacity:0;transform:translateY(60px) scale(.7) rotate(-10deg)}to{opacity:1}}
.reveal-card.pop-ur{animation:popUR 1.1s cubic-bezier(.2,1.4,.3,1)}
@keyframes popUR{0%{transform:scale(1)}20%{transform:scale(1.22) rotate(2deg)}
  45%{transform:scale(1.1) rotate(-2deg)}100%{transform:scale(1.08)}}
.reveal-card.pop-epic{animation:popEpic .6s cubic-bezier(.2,1.5,.3,1)}
@keyframes popEpic{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1.04)}}
.reveal-hint{font-weight:900;font-size:13px;letter-spacing:1px;opacity:.7;animation:pulseRing 1.5s infinite}
.reveal-tag{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--display);font-style:italic;font-size:15px;letter-spacing:1px;padding:5px 16px;border-radius:999px;
  border:3px solid #fff;box-shadow:0 5px 0 rgba(0,0,0,.45);animation:tagIn .3s cubic-bezier(.2,1.7,.4,1);z-index:5}
.reveal-tag.is-new{background:linear-gradient(180deg,#3ad16b,#0b6f4a);color:#fff}
.reveal-tag.is-dup{background:linear-gradient(180deg,#ffb02b,#e2531a);color:#fff}
@keyframes tagIn{from{opacity:0;transform:translateX(-50%) scale(.4)}to{opacity:1;transform:translateX(-50%) scale(1)}}

.pack-tray{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;min-height:10px;padding:0 10px}
.tray-card{animation:trayIn .42s cubic-bezier(.2,1.5,.4,1) backwards}
@keyframes trayIn{from{opacity:0;transform:translateY(-70px) scale(1.5)}to{opacity:1}}
.tray-card.tier-ur{box-shadow:0 0 22px rgba(255,214,90,.8);border-radius:calc(var(--radius) + 2px)}
.tray-card.tier-epic{box-shadow:0 0 16px rgba(255,180,40,.55);border-radius:calc(var(--radius) + 2px)}
.tray-card.is-dup{opacity:.72}
.tray-card.sold{animation:soldOut .45s forwards}
@keyframes soldOut{to{opacity:0;transform:scale(.5) translateY(30px);filter:grayscale(1)}}

.pack-actions{display:flex;flex-direction:column;align-items:center;gap:12px;animation:screenIn .3s}
.pack-summary{display:flex;gap:14px}
.pack-summary div{background:rgba(0,0,0,.42);border:2px solid rgba(255,255,255,.18);border-radius:13px;
  padding:8px 18px;text-align:center}
.pack-summary b{display:block;font-family:var(--display);font-style:italic;font-size:25px;color:var(--gold)}
.pack-summary span{font-size:10.5px;font-weight:900;opacity:.8;letter-spacing:.5px}
.pack-buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn-sell{background:linear-gradient(180deg,#3ad16b,#0b6f4a)}

/* ================================================================
   SELECTOR DE IDIOMA · más de 100, con buscador
   ================================================================ */
.lang-btn{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  border:2.5px solid rgba(255,255,255,.24);box-shadow:var(--e1),var(--bevel-soft);
  transition:.15s}
.lang-btn:hover{transform:translateY(-2px);filter:brightness(1.15);
  border-color:rgba(255,255,255,.45)}
.lang-btn:active{transform:translateY(2px);box-shadow:none}
.lb-globe{font-size:17px;line-height:1}
.lang-btn b{font-family:var(--display);font-style:italic;font-size:14px;letter-spacing:1.2px;color:var(--gold)}

.lang-panel{position:fixed;inset:0;z-index:960;display:grid;place-items:center;
  background:rgba(2,6,22,.72);backdrop-filter:blur(6px);
  animation:screenIn .22s ease-out}
.lp-box{width:min(520px,94vw);max-height:min(78vh,660px);display:flex;flex-direction:column;
  border-radius:22px;overflow:hidden;
  background:linear-gradient(170deg,rgba(20,38,86,.98),rgba(6,14,44,.99));
  border:3px solid rgba(255,255,255,.22);box-shadow:0 26px 60px rgba(0,0,0,.7)}
.lp-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px}
.lp-title{font-family:var(--display);font-style:italic;font-size:20px;letter-spacing:1.6px;color:var(--gold)}
.lp-close{width:34px;height:34px;border-radius:11px;font-size:15px;
  background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2)}
.lp-close:hover{background:rgba(255,255,255,.2)}

.lp-search{position:relative;display:flex;align-items:center;gap:9px;margin:0 16px 10px;
  padding:9px 13px;border-radius:14px;background:rgba(0,0,0,.45);
  border:2.5px solid rgba(255,255,255,.18);transition:.15s}
.lp-search:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(255,212,46,.18)}
.lp-mag{font-size:14px;opacity:.7}
.lp-search input{flex:1;background:none;border:none;outline:none;color:#fff;
  font-size:15px;font-weight:700}
.lp-clear{width:24px;height:24px;border-radius:50%;font-size:11px;
  background:rgba(255,255,255,.14);border:none}

.lp-list{flex:1;min-height:0;overflow-y:auto;padding:0 12px 8px;
  display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.lp-item{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:9px 12px;border-radius:13px;text-align:left;
  background:rgba(255,255,255,.05);border:2px solid transparent;transition:.13s}
.lp-item:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28);
  transform:translateY(-2px)}
.lp-item.on{background:linear-gradient(180deg,rgba(255,212,46,.32),rgba(226,83,26,.22));
  border-color:var(--gold)}
.lp-name{font-weight:900;font-size:14px;line-height:1.15}
.lp-meta{font-size:10px;font-weight:700;opacity:.55;letter-spacing:.4px}
.lp-item.pending .lp-name{opacity:.72}
.lp-tag{font-size:9px;font-weight:900;letter-spacing:.8px;padding:1px 7px;border-radius:999px;
  background:rgba(255,255,255,.14);opacity:.75}
.lp-empty{grid-column:1/-1;text-align:center;padding:26px 10px;opacity:.6;font-weight:700}
.lp-count{padding:8px 18px 14px;font-size:11px;font-weight:700;opacity:.55;text-align:center}

/* ================================================================
   ARSENAL DE COMBATE · láseres, auras, bolas de energía y rayos
   ================================================================ */
#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:901;overflow:hidden}

/* aura de carga alrededor de la carta */
.fx-aura{position:absolute;transform:translate(-50%,-50%);border-radius:26px;pointer-events:none;
  box-shadow:0 0 0 4px var(--c),0 0 34px 8px var(--c),inset 0 0 30px var(--c);
  opacity:0;animation:auraPulse var(--ms,900ms) ease-out}
@keyframes auraPulse{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.82)}
  35%{opacity:.95;transform:translate(-50%,-50%) scale(1.06)}
  70%{opacity:.7;transform:translate(-50%,-50%) scale(1.01)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.14)}}

/* --- LA CARTA PELEA ---
   --dir dice hacia dónde queda el centro (-1 la de abajo, +1 la de arriba),
   así una misma animación sirve para las dos. */
.card{--dir:-1}
/* 1 · se echa hacia atrás para coger impulso */
.card.fx-recoil{animation:cartaRecoge .48s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes cartaRecoge{
  0%{transform:none}
  100%{transform:translateY(calc(var(--dir) * -22px)) scale(1.07) rotate(calc(var(--dir) * 1.5deg));
       filter:brightness(1.4) saturate(1.25)}}
/* 2 · embestida hacia el centro */
.card.fx-thrust{animation:cartaEmbiste .19s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes cartaEmbiste{
  from{transform:translateY(calc(var(--dir) * -22px)) scale(1.07)}
  to{transform:translateY(calc(var(--dir) * 16px)) scale(1.04);filter:brightness(1.5)}}
/* 3 · aguantando el pulso: vibra */
.card.fx-strain{animation:cartaAguanta .09s linear infinite}
@keyframes cartaAguanta{
  0%{transform:translateY(calc(var(--dir) * 16px)) translateX(-2px) scale(1.04)}
  50%{transform:translateY(calc(var(--dir) * 13px)) translateX(2px) scale(1.05)}
  100%{transform:translateY(calc(var(--dir) * 16px)) translateX(-2px) scale(1.04)}}
/* 4a · el ganador gana el pulso y avanza */
.card.fx-pushing{animation:cartaEmpuja .32s cubic-bezier(.3,.8,.4,1) forwards;filter:brightness(1.35)}
@keyframes cartaEmpuja{to{transform:translateY(calc(var(--dir) * 30px)) scale(1.09)}}
/* 4b · el perdedor va cediendo terreno */
.card.fx-losing{animation:cartaCede .32s ease-in forwards}
@keyframes cartaCede{to{transform:translateY(calc(var(--dir) * -26px)) scale(.97);filter:brightness(.8)}}
/* 5 · el golpe: sale despedida y vuelve */
.card.fx-knocked{animation:cartaGolpeada .45s cubic-bezier(.2,.9,.3,1.2)}
@keyframes cartaGolpeada{
  0%{transform:none}
  25%{transform:translateY(calc(var(--dir) * -46px)) rotate(calc(var(--dir) * -7deg)) scale(.94)}
  60%{transform:translateY(calc(var(--dir) * -12px)) rotate(calc(var(--dir) * 3deg))}
  100%{transform:none}}
/* el VS acumulando energía antes del choque */
.vs-badge.charging{animation:vsCarga .52s ease-out;text-shadow:0 0 22px #fff,0 0 44px var(--gold)}
@keyframes vsCarga{0%{transform:scale(1)}70%{transform:scale(.72);filter:brightness(2)}100%{transform:scale(1)}}

/* la carta que encaja el golpe: se agrieta y se chamusca */
.card.fx-cracked{animation:crackHit .5s cubic-bezier(.2,.9,.3,1)}
.card.fx-cracked .card-front::after{content:'';position:absolute;inset:0;z-index:9;
  border-radius:var(--radius);pointer-events:none;animation:crackFade 1.4s ease-out forwards;
  background:
    linear-gradient(112deg,transparent 46%,rgba(0,0,0,.85) 47% 48.4%,transparent 49%),
    linear-gradient(74deg,transparent 38%,rgba(0,0,0,.7) 39% 40.2%,transparent 41%),
    linear-gradient(28deg,transparent 62%,rgba(0,0,0,.7) 63% 64%,transparent 65%),
    radial-gradient(ellipse at 50% 50%,rgba(80,20,0,.55),transparent 65%)}
@keyframes crackFade{from{opacity:0}20%{opacity:1}100%{opacity:0}}
@keyframes crackHit{0%{transform:none}
  22%{transform:translate(6px,-4px) rotate(2.5deg) scale(.97)}
  46%{transform:translate(-5px,3px) rotate(-2deg)}
  70%{transform:translate(3px,-2px) rotate(1deg)}
  100%{transform:none}}

/* Destellos y rayos */
.screen-flash{position:fixed;inset:0;z-index:952;pointer-events:none;
  animation:flashOut var(--fl,420ms) ease-out forwards}
@keyframes flashOut{0%{opacity:.95}100%{opacity:0}}
.god-rays{position:fixed;width:min(180vmax,1800px);height:min(180vmax,1800px);
  transform:translate(-50%,-50%);z-index:-1;pointer-events:none;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.32) 0 4deg,transparent 4deg 13deg);
  animation:raySpin 9s linear infinite,rayIn .4s ease-out;opacity:.55;
  -webkit-mask-image:radial-gradient(circle,#000 12%,transparent 62%);
  mask-image:radial-gradient(circle,#000 12%,transparent 62%)}
.god-rays.gold{background:repeating-conic-gradient(from 0deg,rgba(255,212,46,.45) 0 4deg,transparent 4deg 13deg)}
.god-rays.rainbow{background:repeating-conic-gradient(from 0deg,
  rgba(255,47,208,.4) 0 4deg,transparent 4deg 9deg,rgba(37,213,255,.4) 9deg 13deg,transparent 13deg 20deg)}
.god-rays.out{opacity:0;transition:opacity .4s}
@keyframes raySpin{to{transform:translate(-50%,-50%) rotate(1turn)}}
@keyframes rayIn{from{opacity:0;transform:translate(-50%,-50%) scale(.4)}}

/* ================================================================
   CARTAS CON FOTO REAL
   ================================================================ */
/* La carta se ve ENTERA: con "cover" se recortaban los bordes y se comía
   parte del marco y del nombre. Con "contain" cabe toda. */
.card-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  border-radius:var(--radius);display:block}
/* y el hueco se ajusta a la proporción real de tus cartas, para que no
   queden franjas a los lados */
.card.has-photo{aspect-ratio:1/1}
/* y como el archivo es cuadrado con márgenes, la lámina se ve pequeña
   dentro: se compensa agrandando la caja de las cartas con foto */
.card.has-photo{--card-w:calc(var(--card-base) * 1.34)}
.card.has-photo .card-face{background:transparent}
.card.has-photo .card-front,.card.has-photo .card-back{overflow:visible}
/* la lámina ya trae su propio marco impreso: no le pintamos otro encima,
   solo una sombra para que se despegue del fondo */
.card.has-photo .card-photo{
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.55))}
.card.has-photo.rarity-ur .card-photo{
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(255,212,46,.5))}
.photo-overlay{position:absolute;left:0;right:0;top:9%;display:flex;justify-content:center;pointer-events:none}
.ability-chip.chip-over{background:rgba(6,20,54,.82);border:2px solid rgba(255,255,255,.5);
  box-shadow:0 3px 8px rgba(0,0,0,.5);max-width:74%;padding:3px 8px}
.has-photo .ur-badge{bottom:14.5%;left:12.5%;width:7%;max-width:30px}
/* nada de sombra en la caja: la lámina es cuadrada con los lados
   transparentes, así que la sombra de la caja se veía como un marco gris.
   La sombra va en la propia imagen (drop-shadow sigue su silueta). */
.card.has-photo .card-face{box-shadow:none;background:none;border-radius:0}
/* con foto real no se pinta NINGUNA capa de la caja: ni el brillo, ni el
   canto, ni el bisel. La lámina es cuadrada con los lados transparentes,
   así que cualquier capa a tamaño de caja se ve como un marco por fuera. */
.card.has-photo .shine,
.card.has-photo .card-edge,
.card.has-photo .card-front::before{display:none}

/* cartas no conseguidas (silueta) */
.card.is-locked{filter:none}
.lock-veil{position:absolute;inset:0;border-radius:var(--radius);display:grid;place-items:center;
  background:rgba(4,12,36,.86);backdrop-filter:grayscale(1) brightness(.35);z-index:6;
  border:3px dashed rgba(255,255,255,.18)}
/* Con foto real la silueta la hace la PROPIA lámina: si pintáramos el velo
   sobre la caja saldría un cuadrado oscuro, porque el PNG es cuadrado con
   los lados transparentes. Aquí se oscurece la imagen y basta. */
.card.has-photo.is-locked .card-photo{
  filter:grayscale(1) brightness(.3) contrast(.85)
         drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.card.has-photo .lock-veil{background:none;backdrop-filter:none;border:none}
.card.has-photo .lock-veil span{text-shadow:0 2px 8px rgba(0,0,0,.8)}
.lock-veil span{font-family:var(--display);font-style:italic;font-size:2.6em;color:rgba(255,255,255,.35)}
.card.is-locked .foil,.card.is-locked .glitter,.card.is-locked .ur-badge{display:none}

.dupe-badge{position:absolute;top:-7px;right:-7px;z-index:7;background:linear-gradient(180deg,#ffb02b,#e2531a);
  border:2.5px solid #fff;border-radius:999px;padding:1px 8px;font-family:var(--display);font-style:italic;font-size:13px;
  box-shadow:0 3px 8px rgba(0,0,0,.5)}
.card.in-deck[data-used]::before{content:'EN MAZO ×' attr(data-used);position:absolute;bottom:4%;left:50%;
  transform:translateX(-50%);z-index:7;background:linear-gradient(180deg,#3ad16b,#0b6f4a);
  border:2px solid #fff;border-radius:999px;padding:1px 9px;font-size:9.5px;font-weight:900;
  white-space:nowrap;box-shadow:0 3px 8px rgba(0,0,0,.55)}
.zoom-own{margin-top:6px;font-size:12.5px;opacity:.85}
.zoom-own b{color:var(--gold)}
.card-zoom .chip{margin-top:10px}

/* ================================================================
   ANIMACIONES DE BATALLA (más agresivas)
   ================================================================ */
.hand .card{transform:rotate(var(--fan,0deg)) translateY(var(--lift,0px))}
.hand .card.selectable:hover{transform:rotate(0deg) translateY(-20px) scale(1.06);z-index:20}
.hand .card.chosen{transform:rotate(0deg) translateY(-30px) scale(1.09)}

.card.fly-in{animation:flyIn .5s cubic-bezier(.25,.9,.3,1.1)}
@keyframes flyIn{from{transform:translate(var(--fx),var(--fy)) scale(.92) rotate(-8deg)}to{transform:none}}
.card.fly-in-top{animation:flyInTop .5s cubic-bezier(.25,.9,.3,1.1)}
@keyframes flyInTop{from{transform:translateY(-160px) scale(.88) rotate(7deg);opacity:.4}to{transform:none;opacity:1}}

.field{transition:transform .3s cubic-bezier(.2,.9,.3,1.2)}
.field.focus{transform:scale(1.045)}
.field.impact{animation:impactPunch .38s}
@keyframes impactPunch{0%{transform:scale(1.045)}30%{transform:scale(1.13)}100%{transform:scale(1.045)}}
.card.ram-up{animation:ramUp .34s cubic-bezier(.4,0,.2,1)}
.card.ram-down{animation:ramDown .34s cubic-bezier(.4,0,.2,1)}
@keyframes ramUp{0%{transform:none}60%{transform:translateY(-26px) scale(1.05)}100%{transform:none}}
@keyframes ramDown{0%{transform:none}60%{transform:translateY(26px) scale(1.05)}100%{transform:none}}
.power-readout.kick{animation:readKick .3s}
@keyframes readKick{0%{transform:translateX(-50%) scale(1)}45%{transform:translateX(-50%) scale(1.35)}100%{transform:translateX(-50%) scale(1)}}
.crown.pop{animation:crownPop .5s cubic-bezier(.2,1.7,.4,1)}
@keyframes crownPop{0%{transform:scale(1)}45%{transform:scale(2)}100%{transform:scale(1.18)}}

/* logo animado */
.wm-anim .wm-burst{transform-origin:350px 128px;animation:spinBg 70s linear infinite}
.wm-anim .wm-top{animation:wmBob 4.5s ease-in-out infinite}
.wm-anim .wm-pow{animation:wmBob 4.5s ease-in-out infinite .4s}
@keyframes wmBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ================================================================
   GROSOR / TEXTURA 3D DE LA CARTA
   ================================================================ */
.card-inner{transform-style:preserve-3d}
.card-face{
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -2px 0 rgba(0,0,0,.35) inset,
    0 10px 22px rgba(0,0,0,.55),
    0 2px 0 #04102e, 0 3px 0 #071a45, 0 4px 0 #04102e;
}
.card-edge{position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28), inset 0 0 26px rgba(0,0,0,.35);
  background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,transparent 22%,transparent 76%,rgba(0,0,0,.22) 100%)}
.back-photo{border-radius:var(--radius)}
.card-back{background:#071a45}

/* ================================================================
   ÁLBUM DE COLECCIONISTA
   ================================================================ */
/* --- Colección: pestañas de caja de recursos y álbum --- */
.coll-tabs{display:flex;gap:10px;justify-content:center;padding:10px 14px 0;z-index:3}
.coll-tab{display:flex;align-items:center;gap:8px;padding:9px 20px;border-radius:14px 14px 0 0;
  font-family:var(--display);font-style:italic;font-size:15px;letter-spacing:1.2px;
  background:rgba(255,255,255,.06);border:2.5px solid rgba(255,255,255,.14);border-bottom:none;
  opacity:.65;transition:.16s}
.coll-tab:hover{opacity:.9}
.coll-tab.active{opacity:1;background:linear-gradient(180deg,rgba(47,127,255,.4),rgba(255,255,255,.07));
  border-color:rgba(255,255,255,.34);transform:translateY(-2px)}
.coll-tab b{font-size:13px;padding:1px 9px;border-radius:999px;color:#2a1400;
  background:linear-gradient(180deg,#ffd42e,#e2531a);border:2px solid #fff}
.coll-pane{flex:1;min-height:0;display:flex;flex-direction:column}

/* --- caja de recursos --- */
.box-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px 4px;
  justify-content:center}
.box-hint{font-size:12.5px;opacity:.8}
.box-hint b{color:var(--gold);font-family:var(--display);font-style:italic;font-size:16px}
.box-grid{flex:1;min-height:0;overflow-y:auto;padding:16px 18px 26px;
  display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(280px,92vw),1fr));
  align-content:start}
.box-item{position:relative;display:flex;align-items:center;gap:14px;padding:12px 14px;
  border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border:3px solid rgba(255,255,255,.18);box-shadow:var(--e2),var(--bevel-soft);transition:.16s}
.box-item:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.32)}
.box-item.sel{border-color:var(--gold);box-shadow:var(--e2),0 0 0 4px rgba(255,212,46,.24)}
.box-item .box-art{width:74px;flex:none;display:grid;place-items:center}
.box-item .box-art img,.box-item .box-art svg{width:100%;height:auto;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.box-info{flex:1;min-width:0;line-height:1.2}
.box-sub{font-size:10.5px;font-weight:900;letter-spacing:1.4px;opacity:.6}
.box-name{font-family:var(--display);font-style:italic;font-size:17px;letter-spacing:.8px}
/* el contador va sobre la ilustración: a la derecha chocaba con los botones */
.box-n{position:absolute;top:8px;left:8px;font-family:var(--display);font-style:italic;font-size:15px;
  padding:1px 10px;border-radius:999px;color:#2a1400;z-index:2;
  background:linear-gradient(180deg,#ffd42e,#e2531a);border:2.5px solid #fff;
  box-shadow:0 3px 8px rgba(0,0,0,.5)}
.box-btns{display:flex;flex-direction:column;gap:6px;flex:none}
.box-pick.chip{min-width:96px}
.box-item.sel .box-pick{background:linear-gradient(180deg,#ffd42e,#e2531a);color:#2a1400;
  border-color:#fff}

/* --- checklist: las 77 de un vistazo --- */
.chk-head{flex:none;padding:14px 18px 6px;display:flex;flex-direction:column;gap:8px;
  align-items:center}
.chk-bar{width:min(560px,92vw);height:14px;border-radius:999px;overflow:hidden;
  background:rgba(0,0,0,.45);border:2.5px solid rgba(255,255,255,.2);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.chk-bar span{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#3ad16b,#ffd42e);
  box-shadow:0 0 14px rgba(255,212,46,.6);transition:width .5s cubic-bezier(.2,.9,.3,1)}
.chk-resumen{font-size:12.5px;font-weight:800;opacity:.9;text-align:center}
.chk-resumen b{color:var(--gold);font-family:var(--display);font-style:italic;font-size:16px}
.chk-filtros{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}

/* el checklist se lee como el póster de la colección: las metalizadas
   arriba en su bloque y debajo las normales, de más poder a menos */
.chk-list{flex:1;min-height:0;overflow-y:auto;padding:10px 18px 26px}
.chk-sec{display:flex;align-items:center;gap:12px;margin:14px 0 10px;
  font-family:var(--display);font-style:italic;font-size:15px;letter-spacing:1.8px;color:#dce9ff}
.chk-sec::after{content:'';flex:1;height:3px;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.35),transparent)}
.chk-sec i{font-style:normal;font-family:var(--body);font-size:11.5px;font-weight:900;
  padding:2px 10px;border-radius:999px;background:rgba(0,0,0,.4);
  border:2px solid rgba(255,255,255,.18);letter-spacing:.4px;order:3}
.chk-sec.ur{color:#ffe98a}
.chk-sec.ur::after{background:linear-gradient(90deg,rgba(255,212,46,.65),transparent)}

.chk-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.chk-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:0;background:none;border:none;transition:transform .16s}
.chk-card:hover{transform:translateY(-6px) scale(1.04);z-index:2}
.chk-card .card{pointer-events:none}
/* las que faltan se apagan para que el hueco cante */
.chk-card.falta .card{filter:grayscale(.85) brightness(.55) contrast(.9)}
.chk-card.falta:hover .card{filter:grayscale(.5) brightness(.75)}

.chk-pie{display:flex;align-items:center;gap:5px;max-width:calc(var(--card-w) * .92);
  padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.45);
  border:2px solid rgba(255,255,255,.14);font-size:10.5px;font-weight:800;line-height:1.3}
.chk-nom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* lo que ya tienes va tachado */
.chk-card.tengo .chk-pie{border-color:rgba(141,255,158,.5)}
.chk-card.tengo .chk-nom{text-decoration:line-through;text-decoration-thickness:2px;
  text-decoration-color:rgba(141,255,158,.9);opacity:.65}
.chk-tick{color:#8dff9e;font-size:12px;font-weight:900}
.chk-x{font-style:normal;color:#8dff9e;font-weight:900}
.chk-odds{font-style:normal;font-family:var(--display);font-style:italic;font-size:12px;color:var(--gold);
  letter-spacing:.4px}

.album-holder{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;
  justify-content:center;padding:4px;container-type:size}
.binder{display:flex;flex-direction:column;align-items:center;gap:6px;
  /* el álbum ocupa lo que le dejen: alto disponible menos la barra de páginas */
  /* la hoja llena el hueco que le dejan, a lo alto y a lo ancho, y como las
     fotos de carta son cuadradas la hoja va menos apaisada que un DIN: así
     cada carta gana ancho, que es lo que la limitaba. */
  --ratio:1.15;
  --page-h:min(84vh, 900px);                       /* respaldo sin unidades de contenedor */
  --page-h:min(calc(100cqh - 98px), calc((100cqw - 26px) / 2 * var(--ratio)), 1020px);
  --page-w:calc(var(--page-h) / var(--ratio))}
.binder-shell{position:relative;padding:8px;border-radius:18px;
  background:
    linear-gradient(160deg,#33456e,#101c3c 52%,#1e2f56),
    var(--halftone);
  background-size:auto,5px 5px;
  box-shadow:var(--e3),inset 0 2px 0 rgba(255,255,255,.16),inset 0 -4px 0 rgba(0,0,0,.55);
  border:3px solid rgba(255,255,255,.16)}
.rings{position:absolute;left:50%;top:12px;bottom:12px;width:22px;transform:translateX(-50%);
  z-index:6;pointer-events:none;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}
.rings::before,.rings::after{content:'';position:absolute;top:0;bottom:0;width:8px;
  background:linear-gradient(90deg,#59657c,#dfe7f5 40%,#8592a8 60%,#48536a);border-radius:4px}
.rings::before{left:1px}.rings::after{right:1px}

.book{position:relative;display:flex;gap:0;perspective:2600px;transform-style:preserve-3d}

/* --- la hoja: lámina de plástico translúcida, no papel opaco --- */
.page{
  position:relative;width:var(--page-w);height:var(--page-h);flex:0 0 auto;
  padding:1.6% 1.7%;display:flex;flex-direction:column;
  background:
    /* grano finísimo de la lámina */
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 5px),
    /* reflejo diagonal, como una funda de plástico a contraluz */
    linear-gradient(118deg,rgba(255,255,255,.22) 0 16%,rgba(255,255,255,.05) 34% 62%,rgba(255,255,255,.16) 82% 100%),
    linear-gradient(160deg,rgba(226,240,255,.18),rgba(150,185,225,.1) 60%,rgba(210,232,255,.16));
  backdrop-filter:blur(2px) saturate(1.15);
  box-shadow:inset 0 0 40px rgba(180,215,255,.14),inset 0 1px 0 rgba(255,255,255,.4)}
.page-left{border-radius:14px 4px 4px 14px;
  box-shadow:inset -26px 0 34px rgba(10,25,60,.4),inset 0 0 40px rgba(180,215,255,.12),
             inset 0 1px 0 rgba(255,255,255,.35)}
.page-right{border-radius:4px 14px 14px 4px;
  box-shadow:inset 26px 0 34px rgba(10,25,60,.4),inset 0 0 40px rgba(180,215,255,.12),
             inset 0 1px 0 rgba(255,255,255,.35)}
.page-blank{background:linear-gradient(160deg,rgba(180,205,240,.14),rgba(110,140,190,.1))}

/* --- huecos del álbum: sin funda, la carta a pelo y lo más grande posible --- */
.sleeve-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  gap:.5%;min-height:0;overflow:hidden}
.sleeve{position:relative;display:grid;place-items:center;border-radius:9px;
  background:none;border:none;box-shadow:none;overflow:visible}
/* En el álbum manda el hueco, no la carta: si la carta impusiera su
   proporción cuadrada se saldría de la hoja. Aquí llena el hueco y la
   lámina se ajusta dentro sin deformarse. */
.sleeve .card{--card-w:100%;width:100%;height:100%;aspect-ratio:auto;
  transition:transform .2s var(--ease-out),filter .2s}
.sleeve .card.has-photo{aspect-ratio:auto;--card-w:100%}
.sleeve .card-photo{object-fit:contain;transform:scale(1.2)}
.sleeve .card.is-interactive{cursor:zoom-in}
.sleeve .card.is-interactive:hover{transform:translateY(-5px) scale(1.05);
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.55));z-index:4}
.sleeve-empty{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(160,190,230,.05))}
/* hueco que queda cuando sacas una carta de su funda */
.sleeve-hole{border-radius:8px;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.1) 0 6px,transparent 6px 12px);
  border:2px dashed rgba(255,255,255,.3);animation:holeIn .3s var(--ease-out)}
@keyframes holeIn{from{opacity:0;transform:scale(.9)}}

.page-foot{text-align:center;font-family:var(--display);font-style:italic;font-size:14px;
  color:rgba(255,255,255,.5);margin-top:2%;letter-spacing:1px}

.page-cover{padding:0;overflow:hidden;background:#0a1c46;backdrop-filter:none;
  box-shadow:inset 22px 0 32px rgba(0,0,0,.45)}
.cover-img{width:100%;height:100%;object-fit:cover;display:block}
.cover-fallback{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;padding:8%;
  background:radial-gradient(ellipse at 50% 30%,#2f7fff,#0a1c46 70%)}
.cover-fallback svg{width:100%;height:auto}
.cover-sub{font-family:var(--display);font-style:italic;letter-spacing:3px;font-size:15px;color:#ffd42e}
.page-inner-cover{background:linear-gradient(160deg,#123fa5,#061436);backdrop-filter:none}
.inner-cover{margin:auto;text-align:center;color:#fff}
.ic-title{font-family:var(--display);font-style:italic;font-size:26px;letter-spacing:2px}
.ic-count{font-family:var(--display);font-style:italic;font-size:40px;color:var(--gold);margin:8px 0}
.ic-note{font-size:12.5px;opacity:.75;line-height:1.6}

/* hoja que gira */
.flip-page{position:absolute;top:0;right:0;width:50%;height:100%;z-index:12;
  transform-style:preserve-3d;transform-origin:left center;
  transform:rotateY(calc(var(--t,0) * -180deg));
  box-shadow:0 0 40px rgba(0,0,0,calc(.5 * (1 - var(--t,0))))}
.flip-page.back{right:auto;left:0;transform-origin:right center;
  transform:rotateY(calc(var(--t,0) * 180deg))}
.flip-face{position:absolute;inset:0;width:100%;backface-visibility:hidden}
.flip-back{transform:rotateY(180deg)}
.page-under{position:absolute;top:0;right:0;width:50%;height:100%;z-index:1}
.flip-page.back .page-under,.book>.page-under{right:0}

.binder-nav{display:flex;align-items:center;gap:16px}
.page-btn{width:46px;height:46px;border-radius:50%;font-family:var(--display);font-style:italic;font-size:26px;
  background:linear-gradient(180deg,#2f7fff,#0d3fa8);border:3px solid rgba(255,255,255,.3);
  box-shadow:0 5px 0 #061436;transition:.13s}
.page-btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.15)}
.page-btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #061436}
.page-btn:disabled{filter:grayscale(1) brightness(.5);cursor:default}
.binder-keys{font-size:10.5px;opacity:.45;font-weight:700;letter-spacing:.3px;text-align:center}
.page-label{font-family:var(--display);font-style:italic;letter-spacing:2px;font-size:16px;min-width:110px;text-align:center;
  color:var(--gold)}

/* ================================================================
   MAZOS POR BANDO
   ================================================================ */
.side-tabs{display:flex;gap:6px}
.side-tab{padding:8px 18px;border-radius:12px 12px 0 0;font-family:var(--display);font-style:italic;letter-spacing:1px;
  font-size:15px;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.16);
  border-bottom:0;opacity:.65;transition:.15s}
.side-tab:hover{opacity:.9}
.side-tab.active{opacity:1;transform:translateY(-2px)}
.side-tab[data-side="hero"].active{background:linear-gradient(180deg,#2f9bff,#0d3fa8);border-color:#7fe3ff}
.side-tab[data-side="villain"].active{background:linear-gradient(180deg,#e0242a,#6b0718);border-color:#ffb3a6}
.deck-tip{padding:8px 18px;font-size:12.5px;opacity:.85;background:rgba(0,0,0,.28);
  border-bottom:2px solid rgba(255,255,255,.08)}
.deck-tip b{color:var(--gold)}
.deck-pool.side-hero{background:radial-gradient(ellipse at 50% 0%,rgba(47,155,255,.14),transparent 60%)}
.deck-pool.side-villain{background:radial-gradient(ellipse at 50% 0%,rgba(224,36,42,.14),transparent 60%)}

/* ================================================================
   TACO DE CARTAS (sobres y reparto)
   ================================================================ */
.deck-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;cursor:pointer}
.deck-pile{position:relative;width:var(--card-w);aspect-ratio:5/7;transform-style:preserve-3d}
.card-lg.pile-card,.pile-card{--card-w:clamp(170px,22vw,230px)}
.pile-card{position:absolute;inset:0;width:100%;
  transform:translate3d(calc(var(--i) * 1.5px),calc(var(--i) * -2.6px),calc(var(--i) * 2px)) rotate(calc(var(--i) * .5deg));
  transition:transform .45s cubic-bezier(.2,.9,.3,1.2),opacity .3s}
.deck-pile.drop-in .pile-card{animation:pileDrop .5s cubic-bezier(.2,1.3,.4,1) backwards;
  animation-delay:calc(var(--i) * 45ms)}
@keyframes pileDrop{from{opacity:0;transform:translate3d(0,-220px,0) rotate(-14deg) scale(1.18)}}
.deck-pile.shuffling .pile-card,.draw-pile.riffle .shuffle-card{
  animation:riffle .9s cubic-bezier(.4,0,.3,1) both;animation-delay:calc(var(--i) * 42ms)}
@keyframes riffle{
  0%{transform:translate3d(calc(var(--i)*1.5px),calc(var(--i)*-2.6px),0) rotate(0deg)}
  28%{transform:translate3d(calc(var(--i)*22px - 60px),calc(var(--i)*-3px),0) rotate(calc(var(--i)*3deg - 9deg))}
  55%{transform:translate3d(calc(var(--i)*-16px + 44px),calc(var(--i)*2px),0) rotate(calc(var(--i)*-2.4deg + 7deg))}
  78%{transform:translate3d(calc(var(--i)*5px - 12px),calc(var(--i)*-2px),0) rotate(calc(var(--i)*.9deg - 2deg))}
  100%{transform:translate3d(calc(var(--i)*1.5px),calc(var(--i)*-2.6px),0) rotate(0deg)}}
.pile-card.drawn{transform:translate3d(0,-46px,60px) rotate(-3deg) scale(1.04);z-index:99 !important;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.6))}
.reveal-card.filing{animation:fileAway .42s cubic-bezier(.4,0,.25,1) forwards}
@keyframes fileAway{to{transform:translate(var(--tx),var(--ty)) scale(var(--ts)) rotate(6deg);opacity:.15}}

/* reparto al empezar la batalla */
.draw-stage{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;
  background:radial-gradient(ellipse at 50% 50%,rgba(10,28,70,.82),rgba(3,9,31,.95));
  animation:screenIn .25s}
.draw-pile{position:relative;width:var(--card-w);aspect-ratio:5/7;transform-style:preserve-3d}
.shuffle-card{position:absolute;inset:0;width:100%;
  transform:translate3d(calc(var(--i) * 1.4px),calc(var(--i) * -2.4px),0) rotate(calc(var(--i) * .4deg))}
.draw-pile.drop-in .shuffle-card{animation:pileDrop .48s cubic-bezier(.2,1.3,.4,1) backwards;
  animation-delay:calc(var(--i) * 40ms)}
.draw-stage.dealing .shuffle-card:nth-child(-n+5){animation:dealOut .62s cubic-bezier(.35,0,.2,1) forwards;
  animation-delay:calc(var(--i) * 110ms)}
@keyframes dealOut{
  to{transform:translate3d(calc(var(--i) * 92px - 184px),46vh,0) rotate(calc(var(--i) * 5deg - 10deg)) scale(.72);opacity:0}}
.draw-label{font-family:var(--display);font-style:italic;letter-spacing:3px;font-size:18px;color:var(--gold);
  text-shadow:0 3px 0 rgba(0,0,0,.5);animation:pulseRing 1.1s infinite}

/* ================================================================
   BATALLA: cartas solapadas y más chicha
   ================================================================ */
.slot .card{box-shadow:none}
.slot.filled::before{content:'';position:absolute;inset:-8px;border-radius:26px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.14),transparent 70%)}
.field.impact .slot-me .card{transform:translateY(-4px) rotate(-1.5deg)}
.field.impact .slot-foe .card{transform:translateY(4px) rotate(1.5deg)}
.hand{position:relative}
.hand .card:not(:first-child){margin-left:calc(var(--card-w) * -0.24)}
.hand .card{transition:transform .18s cubic-bezier(.2,.9,.3,1.3),margin .18s}
.hand .card.selectable:hover{margin-right:calc(var(--card-w) * 0.1)}
.speed-lines{position:fixed;inset:0;z-index:905;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,.5) 0 .5deg,transparent .5deg 4deg);
  -webkit-mask-image:radial-gradient(circle,transparent 22%,#000 62%);
  mask-image:radial-gradient(circle,transparent 22%,#000 62%)}
.speed-lines.on{animation:speedIn .42s ease-out}
@keyframes speedIn{0%{opacity:0;transform:scale(1.5)}35%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(.85)}}

/* ================================================================
   BARRA DE ACCIÓN SIMPLIFICADA
   ================================================================ */
.power-info{display:flex;align-items:center;gap:10px;padding:6px 14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(142,59,214,.85),rgba(61,20,120,.85));
  border:3px solid rgba(255,255,255,.24);box-shadow:0 5px 0 rgba(0,0,0,.45);
  max-width:min(460px,92vw)}
.power-info.muted{background:linear-gradient(180deg,rgba(70,80,105,.8),rgba(30,38,58,.85));opacity:.7}
.pi-tag{font-size:9px;font-weight:900;letter-spacing:.6px;background:rgba(0,0,0,.45);
  padding:3px 8px;border-radius:999px;white-space:nowrap;color:var(--gold);line-height:1.3;text-align:center}
.power-info .pt-body{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.power-info .pt-body b{font-family:var(--display);font-style:italic;font-size:15px;letter-spacing:.5px}
.power-info .pt-body i{font-style:normal;font-size:11px;opacity:.9;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat.deck b{color:#cbd6ea}

.power-readout.big{font-size:clamp(26px,4.4vw,48px);bottom:-24px}
.arena-tag.hero{background:linear-gradient(90deg,#0d3fa8,#2f9bff);border-color:#7fe3ff}
.arena-tag.villain{background:linear-gradient(90deg,#6b0718,#e0242a);border-color:#ffb3a6}

.rule-hero{background:linear-gradient(160deg,rgba(255,176,43,.22),rgba(10,28,70,.8));
  border-color:rgba(255,212,46,.5)}
.rule-big{font-family:var(--display);font-style:italic;font-size:clamp(19px,2.6vw,29px);line-height:1.4;
  letter-spacing:.5px;margin-bottom:10px;text-shadow:0 3px 0 rgba(0,0,0,.4)}
.rule-big b{color:var(--gold)}
.rule-note{margin-top:10px;font-size:13px;opacity:.9;border-left:4px solid var(--gold);padding-left:12px}

/* ================================================================
   ANIMACIONES DE CARTA — pulido
   ================================================================ */
.card-inner{transition:transform .6s cubic-bezier(.2,.85,.25,1.05)}
.card.is-face-down .card-inner{transform:rotateY(180deg)}

/* volteo con peso: se levanta, gira y aterriza */
.card.flipping .card-inner{animation:flipWeight .72s cubic-bezier(.3,.9,.25,1.05)}
@keyframes flipWeight{
  0%{transform:rotateY(180deg) translateZ(0) scale(1)}
  35%{transform:rotateY(120deg) translateZ(70px) scale(1.1)}
  70%{transform:rotateY(20deg) translateZ(40px) scale(1.06)}
  100%{transform:rotateY(0deg) translateZ(0) scale(1)}}

/* la carta elegida se separa del abanico con inercia */
.hand .card.chosen .card-inner{animation:chosenLift .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes chosenLift{0%{transform:none}45%{transform:rotateX(-9deg) scale(1.03)}100%{transform:none}}

/* aterrizaje en la mesa */
.card.landed{animation:cardLand .34s cubic-bezier(.25,1.6,.4,1)}
@keyframes cardLand{0%{transform:scale(1.14)}60%{transform:scale(.97)}100%{transform:scale(1)}}

/* sombra que acompaña a la carta */
.slot .card::after{content:'';position:absolute;left:6%;right:6%;bottom:-10px;height:16px;
  border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);
  z-index:-1;transition:.3s}
.slot .card.winner-glow::after{bottom:-16px;filter:blur(2px)}

/* brillo que barre la carta al revelarse */
.card-front::before{content:'';position:absolute;inset:0;z-index:8;pointer-events:none;
  border-radius:var(--radius);opacity:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 47%,transparent 62%)}
.card.sweep .card-front::before{animation:sweep .7s ease-out}
@keyframes sweep{0%{opacity:0;transform:translateX(-120%)}25%{opacity:.9}100%{opacity:0;transform:translateX(120%)}}

/* ================================================================
   FONDOS Y LOGO DE LA CARPETA Assets/
   ================================================================ */
.menu-bg.has-photo-bg,.battle-bg.has-photo-bg{
  background-size:cover;background-position:center;animation:none;
  filter:saturate(1.05)}
.menu-bg.has-photo-bg::after,.battle-bg.has-photo-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,9,31,.42),rgba(3,9,31,.72))}
.battle-bg.has-photo-bg::after{background:linear-gradient(180deg,rgba(3,9,31,.6),rgba(3,9,31,.82))}
.logo-img{width:min(560px,88vw);height:auto;display:block;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.65));animation:logoPop .7s cubic-bezier(.2,1.4,.4,1)}

/* ================================================================
   CINEMÁTICA DE ENTRADA A LA BATALLA
   ================================================================ */
.intro-cine{position:fixed;inset:0;z-index:956;pointer-events:none;overflow:hidden;
  background:radial-gradient(ellipse at 50% 50%,rgba(3,9,31,.55),rgba(3,9,31,.92))}
.intro-cine.out{animation:cineOut .34s forwards}
@keyframes cineOut{to{opacity:0;transform:scale(1.1)}}
.cine-band{position:absolute;left:-10%;width:120%;height:26%;display:grid;place-items:center;
  transform:skewY(-4deg);box-shadow:0 14px 40px rgba(0,0,0,.6)}
.cine-band span{font-family:var(--display);font-style:italic;font-size:clamp(30px,7vw,76px);letter-spacing:4px;
  -webkit-text-stroke:3px var(--ink);text-shadow:0 6px 0 rgba(0,0,0,.45)}
.cine-left{top:16%;background:linear-gradient(90deg,#0d3fa8,#2f9bff);
  animation:cineInL .5s cubic-bezier(.2,1.2,.3,1) both}
.cine-right{bottom:16%;background:linear-gradient(90deg,#e0242a,#6b0718);
  animation:cineInR .5s cubic-bezier(.2,1.2,.3,1) both}
.cine-band.cine-villain{background:linear-gradient(90deg,#6b0718,#e0242a)}
.cine-band.cine-hero{background:linear-gradient(90deg,#0d3fa8,#2f9bff)}
@keyframes cineInL{from{transform:translateX(-115%) skewY(-4deg)}to{transform:translateX(0) skewY(-4deg)}}
@keyframes cineInR{from{transform:translateX(115%) skewY(-4deg)}to{transform:translateX(0) skewY(-4deg)}}
.cine-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);
  font-family:var(--display);font-style:italic;font-size:clamp(50px,12vw,140px);color:var(--gold);
  -webkit-text-stroke:5px var(--ink);text-shadow:0 10px 0 rgba(0,0,0,.5);
  animation:cineVs .5s .42s cubic-bezier(.2,1.8,.35,1) both}
@keyframes cineVs{from{transform:translate(-50%,-50%) scale(3) rotate(-18deg);opacity:0}
  to{transform:translate(-50%,-50%) scale(1) rotate(-6deg);opacity:1}}
.intro-cine.clash .cine-left{animation:cineBump .3s}
.intro-cine.clash .cine-right{animation:cineBump .3s reverse}
@keyframes cineBump{0%,100%{transform:translateX(0) skewY(-4deg)}50%{transform:translateX(18px) skewY(-4deg)}}

.pack-title{font-family:var(--display);font-style:italic;font-size:clamp(17px,3vw,26px);letter-spacing:2px;
  color:var(--gold);text-shadow:0 4px 0 rgba(0,0,0,.5);margin-bottom:4px}
.pack-holder.starter{filter:drop-shadow(0 18px 30px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(255,212,46,.6))}

/* arrastrar hojas del álbum */
.book{touch-action:pan-y;cursor:grab;user-select:none}
.book:active{cursor:grabbing}
.flip-page{will-change:transform}

/* ================================================================
   PULIDO GENERAL
   ================================================================ */
#app::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:899;
  background:radial-gradient(ellipse at 50% 45%,transparent 52%,rgba(2,6,20,.55) 100%)}
/* ¡ojo! la cara trasera lleva su propio rotateY(180deg): no se puede pisar
   con otro transform o la carta deja de voltearse */
.card-face{backface-visibility:hidden}
.slot.filled{filter:drop-shadow(0 14px 20px rgba(0,0,0,.55))}
.play-btn{position:relative;overflow:hidden}
.play-btn:not(:disabled)::after{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);
  animation:btnShine 3.4s ease-in-out infinite}
@keyframes btnShine{0%,70%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.crown.on{box-shadow:0 0 14px var(--gold),0 0 30px rgba(255,212,46,.5)}
.comic-pop{filter:drop-shadow(0 0 24px rgba(255,212,46,.45))}

/* ================================================================
   SOBRE QUE SE RASGA ARRASTRANDO
   ================================================================ */
.pack3d{--rip:0;position:relative;width:min(280px,72vw);aspect-ratio:26/38;
  cursor:grab;touch-action:none;user-select:none;
  filter:drop-shadow(0 24px 36px rgba(0,0,0,.75));
  transform-style:preserve-3d}
.pack3d.grabbing{cursor:grabbing;animation:none}
.pack3d.snapback .pk-strip{transition:transform .3s cubic-bezier(.2,1.5,.4,1)}
.pk-layer{position:absolute;inset:0}
.pk-layer .pk-art,.pk-layer svg{width:100%;height:100%;object-fit:cover;display:block;
  border-radius:16px}
.pk-strip{transform-origin:0% 100%;
  transform:translate(calc(var(--rip) * 62%), calc(var(--rip) * -14%))
            rotate(calc(var(--rip) * 16deg)) scale(calc(1 + var(--rip) * .04));
  opacity:calc(1 - var(--rip) * .15);
  filter:drop-shadow(-6px 6px 10px rgba(0,0,0,.5))}
/* el borde de papel que va quedando a la vista */
.pk-body::after{content:'';position:absolute;left:0;right:0;top:3%;height:8%;
  background:repeating-linear-gradient(90deg,#fff8e6 0 5px,#e8dcc0 5px 9px);
  opacity:calc(var(--rip) * .9);
  clip-path:polygon(0 40%,4% 0,9% 55%,14% 8%,19% 60%,24% 12%,30% 58%,35% 4%,41% 62%,
    46% 10%,52% 56%,58% 6%,64% 60%,70% 12%,76% 54%,82% 4%,88% 58%,94% 10%,100% 46%,100% 100%,0 100%)}
.pk-glow{position:absolute;left:8%;right:8%;top:2%;height:16%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.95),rgba(255,212,46,.5) 45%,transparent 72%);
  opacity:calc(var(--rip) * var(--rip));filter:blur(6px);pointer-events:none}
.pack3d.glowing .pk-glow{animation:packGlow .9s ease-out both}
@keyframes packGlow{0%{opacity:.6;transform:scale(1)}100%{opacity:1;transform:scale(2.4)}}
.pk-grab{position:absolute;left:50%;top:6%;transform:translateX(-50%);pointer-events:none;
  opacity:calc(1 - var(--rip) * 4);animation:grabPulse 1.5s ease-in-out infinite}
.pk-grab span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:rgba(255,212,46,.92);color:#12204d;font-size:22px;font-weight:900;
  box-shadow:0 4px 14px rgba(0,0,0,.5)}
@keyframes grabPulse{0%,100%{transform:translateX(-50%) translateX(-12px)}50%{transform:translateX(-50%) translateX(12px)}}
.pack3d.torn .pk-strip{animation:stripFly .55s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes stripFly{to{transform:translate(180%,-120%) rotate(75deg) scale(.9);opacity:0}}
.pack3d.torn .pk-grab{display:none}
.pack3d.eject{animation:packEject .55s cubic-bezier(.4,0,.3,1) forwards}
@keyframes packEject{
  40%{transform:translateY(10px) rotate(-3deg) scale(1.04)}
  100%{transform:translateY(58vh) rotate(-16deg) scale(.85);opacity:0}}
.pack-hint{max-width:80vw;text-align:center}

/* el mazo asoma por la boca del sobre */
.deck-pile.slide-out .pile-card{animation:deckOut .56s cubic-bezier(.25,1.05,.35,1) backwards;
  animation-delay:calc(var(--i) * 32ms)}
@keyframes deckOut{from{transform:translate3d(0,58%,0) scale(.86) rotate(-2deg);opacity:0;filter:brightness(2)}}

/* ================================================================
   INTRO / PORTADA
   ================================================================ */
.intro{position:fixed;inset:0;z-index:990;overflow:hidden;background:#02060f;
  display:grid;place-items:center;padding:24px}
.intro.out{animation:introOut .58s cubic-bezier(.35,.85,.3,1) forwards}
@keyframes introOut{to{opacity:0;transform:scale(1.16);filter:blur(9px)}}

.intro-bg{position:absolute;inset:-4%;background-size:cover;background-position:center;
  opacity:0;filter:brightness(.32) saturate(.85);transform:scale(1.16)}
.intro.storm .intro-bg{animation:introBg 4.5s ease-out forwards}
@keyframes introBg{0%{opacity:0;transform:scale(1.16)}
  35%{opacity:.5}100%{opacity:.85;transform:scale(1)}}

.intro-rays{position:absolute;inset:-60%;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.18) 0 2deg,transparent 2deg 11deg);
  -webkit-mask-image:radial-gradient(circle,#000 4%,transparent 52%);
  mask-image:radial-gradient(circle,#000 4%,transparent 52%);
  animation:raySpin 26s linear infinite}
.intro.logo-in .intro-rays{opacity:.3;transition:opacity 1.2s}

.intro-bolts{position:absolute;top:0;left:0;width:100%;height:64%;opacity:0;pointer-events:none;
  filter:drop-shadow(0 0 9px #7fe3ff)}
.intro.storm .intro-bolts{animation:boltsFlash 1.25s ease-out}
@keyframes boltsFlash{0%{opacity:0}10%{opacity:1}18%{opacity:.12}
  28%{opacity:.95}42%{opacity:.08}52%{opacity:.6}100%{opacity:0}}
.intro-bolts .ib{stroke-dasharray:90;stroke-dashoffset:90;
  animation:boltDraw .26s linear var(--d) both}
@keyframes boltDraw{to{stroke-dashoffset:0}}

.intro-stack{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:12px;text-align:center;max-width:min(720px,94vw)}
.intro-logo{opacity:0;transform:scale(3.6);filter:blur(16px)}
.intro-logo svg,.intro-logo img{width:min(680px,88vw);height:auto;display:block;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.85))}
.intro.logo-in .intro-logo{animation:introLogo .52s cubic-bezier(.2,1.35,.3,1) forwards}
@keyframes introLogo{to{opacity:1;transform:scale(1);filter:blur(0)}}

.intro-sub{font-family:var(--display);font-style:italic;letter-spacing:10px;font-size:clamp(12px,2.1vw,20px);
  color:var(--gold);opacity:0;transform:translateY(14px);
  text-shadow:0 3px 0 rgba(0,0,0,.7)}
.intro.sub-in .intro-sub{animation:introSub .65s cubic-bezier(.2,1.2,.3,1) forwards}
@keyframes introSub{to{opacity:1;transform:none;letter-spacing:6px}}

/* --- la puerta de entrada --- */
.intro-gate{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:12px;
  opacity:0;transform:translateY(22px)}
.intro.sub-in .intro-gate{animation:introSub .6s .25s cubic-bezier(.2,1.2,.3,1) forwards}
.gate-hi{font-weight:800;font-size:clamp(13px,2.2vw,17px);opacity:.95;
  text-shadow:0 2px 6px rgba(0,0,0,.8)}
.gate-hi b{color:var(--gold);font-family:var(--display);font-style:italic;letter-spacing:1px;font-size:1.15em}

.gate-stats{display:flex;gap:10px}
.gate-stats div{min-width:82px;padding:9px 14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border:2px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);
  box-shadow:var(--e1),var(--bevel-soft)}
.gate-stats b{display:block;font-family:var(--display);font-style:italic;font-size:26px;color:var(--gold);line-height:1}
.gate-stats span{font-size:9.5px;font-weight:900;letter-spacing:1.2px;opacity:.75}

.gate-btn{position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:16px 46px;border-radius:20px;margin-top:4px;
  border:4px solid rgba(255,255,255,.4);
  box-shadow:var(--e3),var(--bevel),0 0 42px rgba(255,180,40,.35);
  transition:transform .15s var(--ease-out),box-shadow .15s,filter .15s;
  animation:gatePulse 2.1s ease-in-out infinite}
.gate-btn::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:var(--halftone),
    repeating-linear-gradient(115deg,rgba(255,255,255,.08) 0 2px,transparent 2px 6px);
  background-size:4px 4px,auto}
.gate-btn::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.55) 50%,transparent 66%);
  animation:btnShine 2.8s ease-in-out infinite}
.gate-btn:hover{transform:translateY(-4px) scale(1.03);filter:brightness(1.12);animation-play-state:paused}
.gate-btn:active{transform:translateY(4px) scale(.99);box-shadow:var(--e1),var(--bevel-soft)}
.gate-new{background:linear-gradient(180deg,#ffd42e,#e2531a)}
.gate-back{background:linear-gradient(180deg,#55e08a,#0b6f4a)}
.gate-label{position:relative;font-family:var(--display);font-style:italic;font-size:clamp(24px,4.4vw,36px);
  letter-spacing:2.5px;-webkit-text-stroke:2px rgba(10,20,50,.55);
  text-shadow:0 4px 0 rgba(0,0,0,.35)}
.gate-sub{position:relative;font-size:11px;font-weight:800;opacity:.9;letter-spacing:1px}
@keyframes gatePulse{0%,100%{box-shadow:var(--e3),var(--bevel),0 0 42px rgba(255,180,40,.35)}
  50%{box-shadow:var(--e3),var(--bevel),0 0 66px rgba(255,180,40,.6)}}

.intro-skip{position:absolute;right:20px;bottom:18px;z-index:3;font-weight:800;font-size:12px;
  opacity:.45;letter-spacing:1px;padding:8px 12px;border-radius:10px;transition:.15s}
.intro-skip:hover{opacity:1;background:rgba(255,255,255,.12)}

/* ================================================================
   MÁS CHICHA VISUAL
   ================================================================ */
/* motas flotando en el menú */
@keyframes motes{to{transform:translateY(-38px)}}

/* la carta de la mano respira al pasar por encima */
.hand .card.selectable::before{content:'';position:absolute;inset:-10px;border-radius:26px;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,212,46,.5),transparent 68%);
  opacity:0;transition:opacity .2s;pointer-events:none;z-index:-1}
.hand .card.selectable:hover::before{opacity:1}
.hand .card.chosen::before{opacity:1;animation:pulseRing 1.1s infinite}

/* el marcador de poder late al quedar fijado */
.power-readout.big{animation:readIn .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes readIn{from{opacity:0;transform:translateX(-50%) scale(.4)}}

/* ================================================================
   Accesibilidad de movimiento
   ================================================================ */
/*
 * Con "reducir movimiento" activado NO se apaga todo: si se quitan también
 * las transiciones útiles, las cosas aparecen de golpe en la cara y el juego
 * se entiende peor. Lo que se quita es el movimiento **decorativo**: lo que
 * se mueve solo, en bucle y sin que tú hagas nada.
 */
@media (prefers-reduced-motion:reduce){
  /* fondos, brillos y bucles ambientales */
  .menu-bg,.battle-bg,.bg-rays,.foil,.glitter i,.pack-glint,.god-rays,.intro-rays,
  .lv-fill::after,.big-btn::after,.play-btn::after,.buy-btn::after,.gate-btn::after,
  .tile-badge,.prod-hot,.hero-btn .bb-ico,.ur-badge,.accent-mega .prod-art::after,
  .intro-bolts,.wm-anim .wm-burst,.wm-anim .wm-top,.wm-anim .wm-pow{
    animation:none !important}
  /* latidos y rebotes que llaman la atención */
  .gate-btn,.big-btn.is-free,.crown.on,.pack-hint,.reveal-hint,.drag-hint,
  .room-code,.draw-label,.coach{animation:none !important}
  /* las transiciones se acortan, pero se siguen viendo */
  *{transition-duration:.18s !important}
  .lift-wrap{transition-duration:.3s !important}
  .card-inner{transition-duration:.25s !important}
  /* el temblor de pantalla sí se va del todo */
  #app.shaking{animation:none !important}
}

/* ================================================================
   SUBIDA DE NIVEL
   ================================================================ */
.lvup{text-align:center}
.lvup-tag{font-family:var(--display);font-style:italic;letter-spacing:3px;color:var(--gold);font-size:17px}
.lvup-num{font-family:var(--display);font-style:italic;font-size:clamp(60px,14vw,110px);line-height:1;
  color:#fff;-webkit-text-stroke:4px var(--ink);text-shadow:0 8px 0 rgba(0,0,0,.45);
  animation:lvPop .6s cubic-bezier(.2,1.7,.35,1)}
@keyframes lvPop{from{transform:scale(.2) rotate(-14deg);opacity:0}}
.lvup-rank{font-family:var(--display);font-style:italic;letter-spacing:2px;color:var(--cyan);font-size:20px}
.lvup-reward{margin-top:10px;font-weight:800;background:rgba(0,0,0,.35);padding:8px 14px;
  border-radius:12px;border:2px solid rgba(255,212,46,.5);display:inline-block}
.btn-rank{background:linear-gradient(180deg,#ffb02b,#a4550b)}
.btn-club{background:linear-gradient(180deg,#00b8a9,#065c55)}
.big-btn.is-free{animation:freePulse 1.4s ease-in-out infinite}
{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25) drop-shadow(0 0 14px rgba(255,212,46,.7))}}

/* ================================================================
   RANKING Y CLUBES
   ================================================================ */
.rank-wrap,.club-wrap{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;
  gap:12px;align-items:center}
.rank-note{font-weight:800;color:var(--gold);font-size:13px}
.rank-table{width:min(720px,96vw);display:flex;flex-direction:column;gap:4px}
.rank-row{display:grid;grid-template-columns:46px 1fr 62px 66px 66px;align-items:center;gap:6px;
  padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.07);
  border:2px solid rgba(255,255,255,.1);font-weight:800;font-size:13.5px}
.rank-head{background:transparent;border-color:transparent;font-size:10px;opacity:.65;
  letter-spacing:1px;padding-bottom:2px}
.rank-row .rk-pos{font-family:var(--display);font-style:italic;font-size:17px;color:var(--gold);text-align:center}
.rank-row .rk-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-row .rk-name em{font-style:normal;font-size:11px;opacity:.6}
.rank-row .rk-lv,.rank-row .rk-w,.rank-row .rk-c{text-align:center}
.rank-row .rk-lv{font-family:var(--display);font-style:italic;font-size:18px;color:var(--cyan)}
.rank-row.is-me{background:linear-gradient(90deg,rgba(255,212,46,.28),rgba(255,212,46,.1));
  border-color:var(--gold);box-shadow:0 0 16px rgba(255,212,46,.3)}
.rank-row.top1{background:linear-gradient(90deg,rgba(255,212,46,.22),rgba(255,255,255,.06))}
.rank-row.top2{background:linear-gradient(90deg,rgba(200,214,234,.2),rgba(255,255,255,.05))}
.rank-row.top3{background:linear-gradient(90deg,rgba(205,127,50,.2),rgba(255,255,255,.05))}

.club-card{width:min(360px,94vw);background:linear-gradient(180deg,rgba(0,184,169,.35),rgba(6,20,54,.9));
  border:3px solid rgba(255,255,255,.22);border-radius:18px;padding:20px;text-align:center;
  box-shadow:0 8px 0 rgba(0,0,0,.45)}
.club-card h3{font-family:var(--display);font-style:italic;font-size:20px;letter-spacing:1px;margin-bottom:6px}
.club-card p{font-size:13px;opacity:.85;margin-bottom:12px}
.club-input{width:100%;padding:9px 14px;border-radius:12px;border:2px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.4);color:#fff;font-weight:700;outline:none;margin-bottom:10px;text-align:center}
.club-card .big-btn{width:100%;justify-content:center}
.club-header{display:flex;align-items:center;gap:14px;width:min(720px,96vw);
  background:rgba(0,0,0,.32);border:3px solid rgba(255,255,255,.16);border-radius:16px;padding:14px 18px}
.club-crest{font-size:38px}
.club-header h3{font-family:var(--display);font-style:italic;font-size:23px;letter-spacing:1px}
.club-code-line{font-size:12.5px;opacity:.85}
.club-code-line b{color:var(--gold);font-family:var(--display);font-style:italic;font-size:17px;letter-spacing:2px}
.club-header .ghost-btn{margin-left:auto}
.club-tip{width:min(720px,96vw);font-size:12.5px;opacity:.85;background:rgba(0,0,0,.28);
  padding:10px 14px;border-radius:12px;border-left:4px solid var(--gold)}
.club-only{display:flex;align-items:center;gap:7px;justify-content:center;margin-top:10px;
  font-size:12px;font-weight:800;opacity:.9;cursor:pointer}
.club-only input{width:17px;height:17px;accent-color:var(--gold)}

/* ================================================================
   ARRASTRAR LA CARTA A LA MESA
   ================================================================ */
.card.dragging{z-index:60;cursor:grabbing;pointer-events:none;
  transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--dr,0deg)) scale(1.08) !important;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.6))}
.card.dragging .card-inner{transition:none}
.card.will-drop{filter:drop-shadow(0 0 24px var(--gold)) drop-shadow(0 20px 24px rgba(0,0,0,.6))}
.card.snap-back{transition:transform .26s cubic-bezier(.2,1.6,.4,1)}
.slot.drop-target{border-color:rgba(255,212,46,.7);
  box-shadow:0 0 0 4px rgba(255,212,46,.16),0 0 30px rgba(255,212,46,.3);
  animation:dropIdle 1.1s ease-in-out infinite}
@keyframes dropIdle{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.slot.drop-hot{border-color:var(--gold);border-style:solid;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,212,46,.25),transparent 70%);
  box-shadow:0 0 0 6px rgba(255,212,46,.28),0 0 44px rgba(255,212,46,.55);
  transform:scale(1.06)}
.drag-hint{font-size:11.5px;font-weight:800;opacity:.72;letter-spacing:.5px;
  animation:pulseRing 1.8s infinite;text-align:center}
.drag-hint b{color:var(--gold);letter-spacing:1px}
.drag-hint i{font-style:normal;opacity:.62}
.hand{touch-action:pan-y}

/* la caja del Mega Pack: apaisada, la tapa se levanta recta */
.pack3d.is-box{aspect-ratio:1/1;width:min(620px,94vw,74vh)}
.pack3d.is-box .pk-strip{transform-origin:50% 100%;
  transform:translateY(calc(var(--rip) * -34%)) rotateX(calc(var(--rip) * 22deg)) scale(calc(1 + var(--rip) * .03));
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.6))}
.pack3d.is-box .pk-body::after{top:17%;height:7%;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.pack3d.is-box .pk-glow{top:14%;height:20%}
.pack3d.is-box.torn .pk-strip{animation:lidFly .6s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes lidFly{to{transform:translateY(-150%) rotateX(58deg) scale(1.06);opacity:0}}
.pack-title.mega{background:linear-gradient(90deg,#ffd42e,#ff6fae 45%,#43c8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.55))}
.prod-img.is-box{width:min(250px,66vw)}

/* el sobre real: grande y con sus proporciones */
.pack3d:has(.pk-art){aspect-ratio:1/1;width:min(560px,92vw,72vh)}
.pk-layer .pk-art{object-fit:contain}
.pack3d{width:min(360px,80vw)}

/* ================================================================
   TUTORIAL / CARTELES DE AYUDA
   ================================================================ */
.coach{position:fixed;z-index:958;transform:translate(-50%,0);pointer-events:none;
  display:flex;align-items:flex-start;gap:9px;max-width:min(360px,88vw);
  padding:11px 15px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,212,46,.97),rgba(255,160,26,.97));
  color:#2a1400;border:3px solid #fff;box-shadow:0 8px 22px rgba(0,0,0,.55);
  animation:coachIn .32s cubic-bezier(.2,1.6,.4,1)}
.coach.above{transform:translate(-50%,-100%)}
.coach.center{transform:translate(-50%,0)}
.coach.out{animation:coachOut .26s forwards}
@keyframes coachIn{from{opacity:0;transform:translate(-50%,10px) scale(.85)}}
@keyframes coachOut{to{opacity:0;transform:translate(-50%,-8px) scale(.9)}}
.coach.above.out{animation:coachOutUp .26s forwards}
@keyframes coachOutUp{to{opacity:0;transform:translate(-50%,-110%) scale(.9)}}
.coach p{font-size:13.5px;font-weight:800;line-height:1.4}
.coach p b{color:#7a2d00}
.coach-ico{font-size:20px;line-height:1.2}
.coach::after{content:'';position:absolute;left:50%;width:14px;height:14px;
  background:inherit;border:3px solid #fff;transform:translateX(-50%) rotate(45deg)}
.coach.below::after{top:-9px;border-right:0;border-bottom:0}
.coach.above::after{bottom:-9px;border-left:0;border-top:0}
.coach.center::after{display:none}
.coach-focus{position:relative;z-index:50;
  animation:coachGlow 1.3s ease-in-out infinite}
@keyframes coachGlow{0%,100%{filter:none}50%{filter:drop-shadow(0 0 22px rgba(255,212,46,.9))}}

.coach-big{position:fixed;inset:0;z-index:962;display:grid;place-items:center;padding:20px;
  background:rgba(3,9,31,.86);backdrop-filter:blur(7px);animation:screenIn .3s}
.coach-big.out{animation:comicOut .28s forwards}
.cb-panel{width:min(520px,94vw);text-align:center;padding:28px 26px;border-radius:22px;
  background:linear-gradient(180deg,#1b53c8,#061436);
  border:4px solid rgba(255,255,255,.3);
  box-shadow:0 14px 0 rgba(0,0,0,.5),0 26px 50px rgba(0,0,0,.6);
  animation:cbIn .45s cubic-bezier(.2,1.4,.35,1)}
@keyframes cbIn{from{transform:scale(.75) translateY(24px);opacity:0}}
.cb-title{font-family:var(--display);font-style:italic;font-size:clamp(24px,5vw,38px);letter-spacing:1.5px;
  color:var(--gold);-webkit-text-stroke:2px var(--ink);margin-bottom:10px}
.cb-text{font-size:14.5px;line-height:1.6;opacity:.95;margin-bottom:18px}
.cb-text b{color:var(--cyan)}
.cb-panel .big-btn{width:100%;justify-content:center}

/* ================================================================
   CINEMÁTICA DE FINAL DE PARTIDA
   ================================================================ */
.endcine{position:fixed;inset:0;z-index:957;pointer-events:none;overflow:hidden;
  display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 50%,rgba(3,9,31,.45),rgba(3,9,31,.9))}
.endcine.out{animation:cineOut .4s forwards}
.ec-word{font-family:var(--display);font-style:italic;font-size:clamp(48px,13vw,150px);letter-spacing:3px;
  -webkit-text-stroke:5px var(--ink);text-shadow:0 12px 0 rgba(0,0,0,.45);
  animation:ecIn .55s cubic-bezier(.2,1.5,.3,1) both}
.endcine.win .ec-word{color:#8dff9e;filter:drop-shadow(0 0 34px rgba(141,255,158,.7))}
.endcine.lose .ec-word{color:#ff8a7a}
@keyframes ecIn{from{transform:scale(3.4) rotate(-12deg);opacity:0;filter:blur(12px)}}
.ec-rays{position:absolute;inset:-50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.24) 0 3deg,transparent 3deg 12deg);
  animation:raySpin 12s linear infinite;opacity:.35;
  -webkit-mask-image:radial-gradient(circle,#000 8%,transparent 58%);
  mask-image:radial-gradient(circle,#000 8%,transparent 58%)}
.endcine.lose .ec-rays{opacity:.14}

/* ================================================================
   ACABADO FINAL DE PANTALLAS
   Lo que quedaba con pinta de provisional
   ================================================================ */

/* --- álbum / colección --- */
.album-holder{background:
  radial-gradient(ellipse at 50% 20%,rgba(47,127,255,.16),transparent 60%)}
.binder-shell{background:
  linear-gradient(160deg,#33456e,#101c3c 52%,#1e2f56),
  var(--halftone);background-size:auto,5px 5px;
  box-shadow:var(--e3),inset 0 2px 0 rgba(255,255,255,.16),inset 0 -4px 0 rgba(0,0,0,.55)}

/* --- constructor de mazo --- */
.deck-pool{background:
  radial-gradient(ellipse at 50% 0%,rgba(47,127,255,.12),transparent 62%)}
.deck-side{border-radius:0;backdrop-filter:blur(12px);border-width:0 0 0 3px}
.deck-side h3{font-family:var(--display);font-style:italic;padding:14px 18px;letter-spacing:1.2px;font-size:18px;
  border-bottom:2px solid rgba(255,255,255,.12);color:var(--gold)}
.deck-row{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
  border:2px solid transparent;cursor:pointer;box-shadow:var(--bevel-soft);
  transition:transform .13s var(--ease-out),background .15s,border-color .15s}
.deck-row:hover{transform:translateX(-4px);background:linear-gradient(180deg,rgba(224,36,42,.4),rgba(107,7,24,.3));
  border-color:#ff8a7a}
.deck-row .dr-pow{font-family:var(--display);font-style:italic;color:var(--gold);min-width:40px;text-align:right;font-size:17px}
.deck-row .dr-name{font-size:12.5px;font-weight:800;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-row .dr-f{width:10px;height:10px;border-radius:50%;box-shadow:0 0 8px currentColor}
.deck-row.hero .dr-f{background:var(--cyan);color:var(--cyan)}
.deck-row.villain .dr-f{background:var(--red);color:var(--red)}
.deck-tip{padding:9px 20px;font-size:12.5px;opacity:.9;
  background:linear-gradient(180deg,rgba(0,0,0,.35),transparent);
  border-bottom:2px solid rgba(255,255,255,.07)}
.side-tab{padding:9px 20px;border-radius:14px 14px 0 0;font-family:var(--display);font-style:italic;letter-spacing:1.2px;
  font-size:15px;border:2px solid rgba(255,255,255,.16);border-bottom:0;opacity:.6;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
  box-shadow:var(--bevel-soft);transition:.16s var(--ease-out);position:relative;overflow:hidden}
.side-tab:hover{opacity:.9;transform:translateY(-2px)}
.side-tab.active{opacity:1;transform:translateY(-3px);box-shadow:var(--e1),var(--bevel)}

/* --- ranking --- */
.rank-row{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
  border:2px solid rgba(255,255,255,.1);box-shadow:var(--bevel-soft);
  transition:transform .13s var(--ease-out),border-color .15s}
.rank-row:not(.rank-head):hover{transform:translateX(4px);border-color:rgba(255,212,46,.4)}
.rank-row.is-me{box-shadow:var(--bevel-soft),0 0 20px rgba(255,212,46,.35)}
.club-header,.club-tip{background:var(--glass),var(--halftone);background-size:auto,5px 5px;
  border:2px solid var(--glass-edge);box-shadow:var(--e1),var(--bevel-soft)}
.club-card{border-radius:20px;transition:transform .18s var(--ease-out)}
.club-card:hover{transform:translateY(-5px)}
.club-crest{filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}

/* --- batalla --- */
.arena-banner{padding:4px}
.arena-tag{font-family:var(--display);font-style:italic;font-size:13px;letter-spacing:1.6px;padding:4px 16px;
  border-radius:999px;border:2px solid rgba(255,255,255,.3);
  box-shadow:var(--e1),var(--bevel-soft)}
.round-tag{font-weight:900;font-size:12px;letter-spacing:1px;opacity:.9}
.round-tag b{font-family:var(--display);font-style:italic;font-size:19px;color:var(--gold)}
.hud{backdrop-filter:blur(4px)}
.avatar{box-shadow:var(--e1),var(--bevel)}
.stat{background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.3));
  border:2px solid rgba(255,255,255,.18);box-shadow:var(--bevel-soft)}
.play-btn{font-family:var(--display);font-style:italic;font-size:20px;letter-spacing:1.6px;padding:12px 36px;
  border-radius:16px;background:linear-gradient(180deg,#55e08a,#0b6f4a);
  border:3px solid rgba(255,255,255,.35);box-shadow:var(--e2),var(--bevel);
  transition:transform .13s var(--ease-out),box-shadow .13s,filter .13s;
  text-shadow:0 2px 0 rgba(0,0,0,.45)}
.play-btn:hover:not(:disabled){transform:translateY(-3px);filter:brightness(1.12)}
.play-btn:active:not(:disabled){transform:translateY(4px);box-shadow:var(--e1),var(--bevel-soft)}
.play-btn:disabled{filter:grayscale(.8) brightness(.55);cursor:default}
.play-btn.waiting{background:linear-gradient(180deg,#6b7794,#333c52)}
.play-btn.next{background:linear-gradient(180deg,#ffc44f,#e2531a)}
.power-info{border-radius:16px;box-shadow:var(--e1),var(--bevel-soft)}
.crown{box-shadow:var(--bevel-soft)}

/* --- tienda --- */
.product{border-radius:24px}
.buy-btn{box-shadow:var(--e2),var(--bevel)}
.buy-btn:active{box-shadow:var(--e1),var(--bevel-soft)}

/* --- barra de navegación del álbum --- */
.page-btn{width:48px;height:48px;border-radius:50%;font-family:var(--display);font-style:italic;font-size:26px;
  background:linear-gradient(180deg,#4fb0ff,#0d3fa8);border:3px solid rgba(255,255,255,.32);
  box-shadow:var(--e2),var(--bevel);transition:.13s var(--ease-out)}
.page-btn:hover:not(:disabled){transform:translateY(-3px);filter:brightness(1.14)}
.page-btn:active:not(:disabled){transform:translateY(3px);box-shadow:var(--e1)}
.page-btn:disabled{filter:grayscale(1) brightness(.45);cursor:default}

/* --- foco de teclado visible y bonito --- */
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}

/* ================================================================
   CARTA QUE SALE DE LA FUNDA
   ================================================================ */
.lift-layer{position:fixed;inset:0;z-index:966;pointer-events:none}
.lift-back{position:absolute;inset:0;pointer-events:auto;cursor:zoom-out;
  background:radial-gradient(ellipse at 50% 42%,rgba(3,9,31,.55),rgba(3,9,31,.9));
  opacity:0;transition:opacity .45s var(--ease-out);backdrop-filter:blur(0px)}
.lift-layer.on .lift-back{opacity:1;backdrop-filter:blur(6px)}

/* El envoltorio hace el viaje: sale de la funda y se planta en el centro.
   El giro se queda en -16° → 0°: NUNCA cruza los 90°, porque las caras llevan
   backface-visibility:hidden y se vería el dorso a mitad de camino. */
.lift-wrap{position:fixed;pointer-events:auto;z-index:2;
  transform-origin:50% 50%;will-change:transform;
  transform:translate(0,0) scale(1) rotateY(-16deg) rotateX(6deg);
  transition:transform .58s cubic-bezier(.2,.86,.24,1);
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.55))}
.lift-wrap.up{
  transform:translate(var(--dx),var(--dy)) scale(var(--s)) rotateY(0deg) rotateX(0deg);
  filter:drop-shadow(0 26px 42px rgba(0,0,0,.72))}
/* al aterrizar se queda completamente quieta: nada de temblores */
.lift-wrap.settled{transition:transform .3s var(--ease-out)}
.lift-wrap .card{width:100%;height:100%;cursor:zoom-out}
.lift-wrap .card.lifted{--card-w:100%}
/* la inclinación con el ratón, suave y solo cuando ya está posada */
.lift-wrap .card.lifted .card-inner{transition:transform .22s var(--ease-out)}

.lift-info{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);z-index:3;
  pointer-events:auto;width:min(520px,92vw);text-align:center;padding:16px 20px;border-radius:18px;
  background:var(--glass),var(--halftone);background-size:auto,5px 5px;
  border:2px solid var(--glass-edge);backdrop-filter:blur(12px);
  box-shadow:var(--e2),var(--bevel-soft);
  opacity:0;transform:translateX(-50%) translateY(20px);
  transition:opacity .4s .45s var(--ease-out),transform .4s .45s var(--ease-out)}
.lift-layer.on .lift-info{opacity:1;transform:translateX(-50%) translateY(0)}
.lift-info>b{display:block;font-family:var(--display);font-style:italic;color:var(--gold);font-size:20px;
  letter-spacing:1px;margin-bottom:4px}
.lift-info>span{font-size:13.5px;opacity:.92;line-height:1.45}
.lift-meta{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.lift-meta em{font-style:normal;font-size:11.5px;font-weight:800;padding:4px 11px;border-radius:999px;
  background:rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.14)}
.lift-info .chip{margin-top:11px}
.lift-tip{margin-top:9px;font-size:11px;opacity:.6;font-weight:700}

/* ================================================================
   TUTORIAL ANIMADO
   ================================================================ */
.rules-wrap{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;
  gap:16px;align-items:center}
.film{width:min(1100px,97vw);display:flex;flex-direction:column;gap:12px}

/* sin marco ni caja: solo un halo suave, para que manden las cartas */
.film-screen{position:relative;aspect-ratio:16/11;min-height:520px;overflow:visible;
  background:radial-gradient(ellipse at 50% 45%,rgba(47,127,255,.16),transparent 66%);
  border:none;box-shadow:none}

.film-title{position:absolute;left:18px;top:14px;z-index:4;font-family:var(--display);font-style:italic;
  font-size:clamp(15px,2.2vw,22px);letter-spacing:1.4px;color:var(--gold);
  text-shadow:0 3px 0 rgba(0,0,0,.55);animation:riseIn .4s var(--ease-out) both}

.film-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:clamp(2px,1.2vw,14px);padding:40px 10px 12px;perspective:1200px;overflow:hidden}
.film-card{--card-w:clamp(84px,13vw,180px);flex:0 1 auto;min-width:0;transition:transform .5s var(--ease-out),opacity .4s}
.film-card.in-hand{opacity:0;transform:translateY(60px) rotate(calc(var(--i) * 3deg - 6deg)) scale(.8)}
.film-card.in-hand.dealt{opacity:1;transform:translateY(0) rotate(calc(var(--i) * 3deg - 6deg))}
.film-card.solo{--card-w:clamp(190px,26vw,320px)}
.film-card.zoom-in{transform:scale(1.08)}
.film-card.arriba,.film-card.abajo{position:absolute;left:50%;--card-w:clamp(150px,20vw,250px)}
.film-card.arriba{top:2%;transform:translateX(-50%)}
.film-card.abajo{bottom:1%;transform:translateX(-50%)}
.film-card.gana{animation:filmGana .6s var(--ease-pop);filter:drop-shadow(0 0 22px #8dff9e)}
@keyframes filmGana{0%{transform:translateX(-50%)}45%{transform:translateX(-50%) scale(1.12)}100%{transform:translateX(-50%)}}
.film-card.pierde{filter:grayscale(.8) brightness(.6);opacity:.75}
.film-card.brilla{filter:drop-shadow(0 0 20px #c07bff)}
.film-card.tacha::after{content:'✕';position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-style:italic;font-size:5em;color:rgba(255,90,80,.9);
  -webkit-text-stroke:4px rgba(0,0,0,.5);animation:tachaIn .35s var(--ease-pop)}
@keyframes tachaIn{from{transform:scale(2.4) rotate(-20deg);opacity:0}}

/* fila de los 6 turnos, con el cambio de roles a mitad */
.film-turnos{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;gap:clamp(6px,1.4vw,14px)}
.ft-turno{width:clamp(34px,5vw,54px);aspect-ratio:1;border-radius:14px;display:grid;place-items:center;
  font-family:var(--display);font-style:italic;font-size:clamp(16px,2.4vw,24px);
  background:rgba(255,255,255,.08);border:3px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.4);transition:.3s}
.ft-turno.on{color:#fff;transform:translateY(-6px) scale(1.06)}
.ft-turno.ft-hero.on{background:linear-gradient(180deg,#2f9bff,#1b3fa0);border-color:#8dd0ff;
  box-shadow:0 0 18px rgba(47,155,255,.6)}
.ft-turno.ft-villain.on{background:linear-gradient(180deg,#e33b3b,#7a1030);border-color:#ff9d9d;
  box-shadow:0 0 18px rgba(227,59,59,.6)}

.film-slot{position:absolute;left:50%;top:18%;transform:translateX(-50%);
  width:clamp(110px,15vw,168px);aspect-ratio:5/7;border-radius:16px;display:grid;place-items:center;
  border:3px dashed rgba(255,255,255,.3);transition:.3s}
.film-slot span{font-size:10px;font-weight:900;letter-spacing:2px;opacity:.45}
.film-slot.filled{border-color:var(--gold);border-style:solid;
  box-shadow:0 0 0 5px rgba(255,212,46,.18),0 0 34px rgba(255,212,46,.4)}
.film-card.drag-to-slot{transform:translate(0,-38%) scale(.92) !important;
  transition:transform .72s cubic-bezier(.3,.85,.3,1)}

/* flechas que señalan */
.film-arrows{position:absolute;inset:0;pointer-events:none;z-index:5}
.film-arrow{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;animation:arrowIn .38s var(--ease-pop) both}
.film-arrow.ar-abajo{flex-direction:column}
.film-arrow.ar-arriba{flex-direction:column-reverse;transform:translate(-50%,-100%)}
@keyframes arrowIn{from{opacity:0;transform:translateX(-50%) scale(.6)}}
.film-arrow.ar-arriba{animation-name:arrowInUp}
@keyframes arrowInUp{from{opacity:0;transform:translate(-50%,-100%) scale(.6)}}
.ar-line{width:3px;height:22px;border-radius:2px;background:currentColor;
  box-shadow:0 0 10px currentColor}
.ar-tag{font-family:var(--display);font-style:italic;font-size:12.5px;letter-spacing:.8px;white-space:nowrap;
  padding:5px 12px;border-radius:999px;background:rgba(6,16,42,.94);
  border:2.5px solid currentColor;box-shadow:0 4px 12px rgba(0,0,0,.55);
  max-width:min(280px,60vw);overflow:hidden;text-overflow:ellipsis}
.ar-gold{color:#ffd42e}.ar-verde{color:#8dff9e}.ar-rojo{color:#ff8a7a}.ar-violeta{color:#c07bff}
.ar-tag{color:#fff}
.ar-gold .ar-tag{color:#ffd42e}.ar-verde .ar-tag{color:#8dff9e}
.ar-rojo .ar-tag{color:#ff8a7a}.ar-violeta .ar-tag{color:#c07bff}

/* pie de foto y controles */
.film-caption{width:100%;padding:13px 18px;border-radius:16px;font-size:14.5px;line-height:1.5;
  background:var(--glass),var(--halftone);background-size:auto,5px 5px;
  border:2px solid var(--glass-edge);box-shadow:var(--e1),var(--bevel-soft);
  min-height:56px;display:flex;align-items:center}
.film-caption b{color:var(--gold)}
.film-caption.in{animation:riseIn .45s var(--ease-out) both}

.film-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.film-btn{width:42px;height:42px;border-radius:50%;font-size:14px;
  background:linear-gradient(180deg,#4fb0ff,#0d3fa8);border:3px solid rgba(255,255,255,.3);
  box-shadow:var(--e1),var(--bevel);transition:.13s var(--ease-out)}
.film-btn:hover{transform:translateY(-2px);filter:brightness(1.15)}
.film-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(4,12,36,.5)}
.film-play{background:linear-gradient(180deg,#ffc44f,#e2531a)}
.film-dots{display:flex;gap:7px}
.film-dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.2);
  border:2px solid rgba(255,255,255,.28);transition:.2s var(--ease-out)}
.film-dot:hover{background:rgba(255,255,255,.45)}
.film-dot.on{background:var(--gold);border-color:#fff;transform:scale(1.35);
  box-shadow:0 0 12px var(--gold)}
.film-step{font-family:var(--display);font-style:italic;font-size:13px;opacity:.6;letter-spacing:1px;min-width:44px}

/* las fichas de consulta van en rejilla: se lee mejor que una columna larga */
.film-extra{width:min(1040px,96vw);display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));align-items:start}
.film-extra .rule-card{width:100%;height:100%}
.film-extra .rule-ancha{grid-column:1/-1}
.rule-nota{margin-top:12px;font-size:12.5px;opacity:.8;padding-top:10px;
  border-top:2px solid rgba(255,255,255,.14)}

@media (max-width:640px){
  .film-screen{aspect-ratio:4/3}
  .ar-tag{font-size:11px;padding:4px 9px}
}

/* ================================================================
   ASISTENTE DEL JUEGO
   ================================================================ */
.ai-fab{position:fixed;right:18px;bottom:18px;z-index:940;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;font-size:27px;
  background:linear-gradient(180deg,#4fb0ff,#0d3fa8);
  border:3px solid rgba(255,255,255,.35);
  box-shadow:var(--e2),var(--bevel),0 0 26px rgba(47,155,255,.5);
  transition:transform .16s var(--ease-pop),filter .16s;
  animation:aiFloat 4s ease-in-out infinite}
.ai-fab:hover{transform:scale(1.1) translateY(-3px);filter:brightness(1.15)}
.ai-fab:active{transform:scale(.96)}
@keyframes aiFloat{0%,100%{box-shadow:var(--e2),var(--bevel),0 0 26px rgba(47,155,255,.5)}
  50%{box-shadow:var(--e2),var(--bevel),0 0 40px rgba(47,155,255,.8)}}

.ai-panel{position:fixed;right:16px;bottom:88px;z-index:941;width:min(390px,94vw);
  max-height:min(620px,78dvh);display:flex;flex-direction:column;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(16,36,84,.97),rgba(6,16,42,.98)),var(--halftone);
  background-size:auto,5px 5px;
  border:3px solid rgba(255,255,255,.22);
  box-shadow:var(--e3),0 30px 60px rgba(0,0,0,.6);
  opacity:0;transform:translateY(24px) scale(.94);
  transition:opacity .26s var(--ease-out),transform .26s var(--ease-pop)}
.ai-panel.on{opacity:1;transform:none}

.ai-head{display:flex;align-items:center;gap:11px;padding:13px 15px;
  background:linear-gradient(180deg,rgba(47,127,255,.4),transparent);
  border-bottom:2px solid rgba(255,255,255,.12)}
.ai-ava{font-size:26px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.ai-head div{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.ai-head b{font-family:var(--display);font-style:italic;font-size:14.5px;letter-spacing:1px}
.ai-head i{font-style:normal;font-size:10.5px;opacity:.7}
.ai-close{width:30px;height:30px;border-radius:50%;font-size:14px;font-weight:900;
  background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.2);transition:.14s}
.ai-close:hover{background:var(--red);transform:rotate(90deg)}

.ai-log{flex:1;min-height:120px;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.ai-msg{max-width:88%;padding:11px 14px;border-radius:16px;font-size:13.2px;line-height:1.5;
  animation:aiIn .3s var(--ease-out) both;word-wrap:break-word}
@keyframes aiIn{from{opacity:0;transform:translateY(10px)}}
.ai-bot{align-self:flex-start;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border:2px solid rgba(255,255,255,.16);border-bottom-left-radius:5px}
.ai-yo{align-self:flex-end;background:linear-gradient(180deg,#2f7fff,#0d3fa8);
  border:2px solid rgba(255,255,255,.24);border-bottom-right-radius:5px;font-weight:700}
.ai-msg b{color:var(--gold)}
.ai-yo b{color:#fff}
.ai-msg code{font-family:monospace;background:rgba(0,0,0,.45);padding:2px 6px;border-radius:5px}

.ai-dots{display:inline-flex;gap:5px;padding:3px 0}
.ai-dots i{width:7px;height:7px;border-radius:50%;background:var(--gold);
  animation:aiDot 1s ease-in-out infinite}
.ai-dots i:nth-child(2){animation-delay:.15s}
.ai-dots i:nth-child(3){animation-delay:.3s}
@keyframes aiDot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}

.ai-sugg{display:flex;gap:6px;overflow-x:auto;padding:0 14px 10px;scrollbar-width:none}
.ai-sugg::-webkit-scrollbar{display:none}
.ai-chip{flex:0 0 auto;font-size:11.5px;font-weight:800;padding:7px 12px;border-radius:999px;
  background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.18);
  white-space:nowrap;transition:.14s}
.ai-chip:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}

.ai-form{display:flex;gap:8px;padding:12px 14px;border-top:2px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25)}
.ai-form input{flex:1;min-width:0;padding:10px 14px;border-radius:999px;color:#fff;font-weight:600;
  background:rgba(0,0,0,.45);border:2px solid rgba(255,255,255,.2);outline:none;font-size:13px}
.ai-form input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,212,46,.2)}
.ai-form button{width:42px;height:42px;border-radius:50%;font-size:16px;
  background:linear-gradient(180deg,#ffc44f,#e2531a);border:2px solid rgba(255,255,255,.3);
  box-shadow:var(--e1),var(--bevel);transition:.14s}
.ai-form button:hover{transform:scale(1.08)}

@media (max-width:560px){
  .ai-panel{right:8px;left:8px;width:auto;bottom:80px}
  .ai-fab{width:52px;height:52px;font-size:24px;right:12px;bottom:12px}
}

/* ---------------- Responsive ---------------- */
@media (max-width:900px){
  .deck-layout{grid-template-columns:1fr}
  .deck-side{max-height:34dvh;border-left:0;border-top:3px solid rgba(255,255,255,.12)}
  .emotes{flex-direction:row;bottom:auto;top:8px;right:8px}
  /* el álbum pasa a una sola hoja visible */
  .book .page-left{display:none}
  .book .page-right,.book .page{width:min(86vw,420px)}
  .rings{display:none}
}
@media (max-height:820px){
  :root{--card-base:clamp(150px,19vw,210px)}
  .hand{padding-top:8px}
  .avatar{width:34px;height:34px;font-size:17px}
}
@media (max-height:620px){
  :root{--card-base:clamp(122px,15vw,160px)}
}
@media (max-width:560px){
  :root{--card-base:clamp(94px,26vw,124px)}
  .top-bar{gap:8px;padding:8px 10px}
  .filters{width:100%;margin-left:0}
  .hand{gap:2px}
  .hand .card{margin-left:-14px}
  .hand .card:first-child{margin-left:0}
}



/* ================================================================
   LOS DOS MAZOS A LOS LADOS
   Héroes a la izquierda y villanos a la derecha, para dejar libre
   el centro y que se vea la mesa.
   ================================================================ */
.side-deck{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.side-deck.izq{left:clamp(10px,3vw,46px)}
.side-deck.der{right:clamp(10px,3vw,46px)}
.sd-pile{position:relative;width:clamp(58px,6.4vw,92px);aspect-ratio:1;border-radius:12px}
.sd-pile i{position:absolute;inset:0;border-radius:12px;display:block;
  background:linear-gradient(160deg,var(--c1),var(--c2));
  border:2.5px solid rgba(255,255,255,.4);
  box-shadow:0 5px 0 rgba(0,0,0,.45),0 10px 18px rgba(0,0,0,.45);
  transform:translate(calc(var(--k) * 3px),calc(var(--k) * -3px)) rotate(calc(var(--k) * -1.6deg))}
.sd-pile i::after{content:'';position:absolute;inset:16%;border-radius:50%;
  border:2.5px dashed rgba(255,255,255,.3)}
/* con el reverso de verdad se ve la foto y se quita el adorno dibujado */
.sd-pile i.con-foto{background-size:cover;background-position:center;
  background-color:transparent}
.sd-pile i.con-foto::after{display:none}
.sd-label{font-family:var(--display);font-style:italic;font-size:11px;letter-spacing:1.3px;
  padding:2px 10px;border-radius:999px;background:rgba(0,0,0,.5);
  border:2px solid rgba(255,255,255,.2);white-space:nowrap}
.sd-count{font-family:var(--display);font-style:italic;font-size:20px;line-height:1}
.side-deck.hero{--c1:#2f9bff;--c2:#0d2f7a}
.side-deck.hero .sd-count{color:#8dd0ff}
.side-deck.villain{--c1:#e33b3b;--c2:#6d0f28}
.side-deck.villain .sd-count{color:#ff9db0}
/* el bando que te toca este turno se enciende */
.side-deck.activo .sd-pile i{border-color:var(--gold);
  box-shadow:0 5px 0 rgba(0,0,0,.45),0 10px 18px rgba(0,0,0,.45),0 0 22px rgba(255,212,46,.55)}
.side-deck:not(.activo){opacity:.5;filter:saturate(.6)}
@media (max-width:900px){ .side-deck{display:none} }

/* ================================================================
   SELLO DE LAS METALIZADAS Y SELECTOR DE MODO
   ================================================================ */
/* el sello UR, pequeño y arriba a la derecha de su sección */
.chk-sello{width:clamp(20px,2.4vw,30px);height:auto;order:4;margin-left:6px;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.6))}
.page-ur{position:absolute;top:2%;right:2.2%;width:clamp(20px,2.4vw,32px);height:auto;
  z-index:5;pointer-events:none;filter:drop-shadow(0 3px 8px rgba(0,0,0,.55))}

/* --- modo básico / avanzado: un interruptor de dos colores --- */
.modo-switch{display:flex;align-items:center;gap:0;padding:3px;border-radius:999px;
  background:rgba(0,0,0,.45);border:2.5px solid rgba(255,255,255,.2);
  box-shadow:var(--e1),inset 0 2px 4px rgba(0,0,0,.5)}
.modo-switch button{padding:6px 16px;border-radius:999px;font-family:var(--display);font-style:italic;
  font-size:13px;letter-spacing:1.2px;color:rgba(255,255,255,.6);transition:.16s}
.modo-switch button:hover{color:#fff}
.modo-switch button.on{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.45);
  box-shadow:var(--bevel-soft),0 3px 0 rgba(0,0,0,.4)}
/* básico en verde, avanzado en morado: se distinguen de un vistazo */
.modo-switch button[data-modo="basico"].on{
  background:linear-gradient(180deg,#3ad16b,#0b6f4a);
  box-shadow:var(--bevel-soft),0 3px 0 rgba(0,0,0,.4),0 0 18px rgba(58,209,107,.6)}
.modo-switch button[data-modo="avanzado"].on{
  background:linear-gradient(180deg,#b04dff,#4a0f9e);
  box-shadow:var(--bevel-soft),0 3px 0 rgba(0,0,0,.4),0 0 18px rgba(176,77,255,.65)}
.modo-switch .ms-ico{font-size:14px;margin-right:5px}


/* ================================================================
   CAMINO DE TROFEOS
   Los niveles en fila hacia arriba, con la línea que los enhebra.
   Lo conseguido queda marcado y el siguiente escalón late.
   ================================================================ */
#screen-road{--accent:#ffd42e;--accent-2:#ff7a1a}

.road-wrap{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  gap:14px;padding:18px 16px 30px;overflow:hidden}

.road-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  padding:12px 22px;border-radius:20px;
  background:linear-gradient(180deg,#123c96,#04143f);
  border:3.5px solid #fff;
  box-shadow:5px 6px 0 rgba(2,11,38,.9),8px 14px 24px rgba(0,0,0,.45),
             inset 0 3px 0 rgba(255,255,255,.28)}
.rh-lv{font-family:var(--display);font-style:italic;font-size:16px;letter-spacing:1px}
.rh-lv b{font-size:26px;color:var(--gold);margin-left:6px;text-shadow:2px 3px 0 rgba(2,11,38,.8)}
.rh-rank{font-size:11.5px;font-weight:900;letter-spacing:2px;color:#8fe3ff;
  padding:4px 14px;border-radius:999px;background:rgba(0,0,0,.4);
  border:2.5px solid rgba(255,255,255,.3)}
.rh-xp{font-size:12px;font-weight:800;opacity:.8}

.road{position:relative;flex:1;min-height:0;width:min(760px,96vw);overflow-y:auto;
  display:flex;flex-direction:column-reverse;padding:20px 8px 30px}

/* cada escalón: el nodo del nivel en el centro y la chapa del premio
   a un lado y a otro, como las paradas de un mapa */
.rd-paso{position:relative;display:grid;align-items:center;
  grid-template-columns:1fr 86px 1fr;min-height:112px;
  animation:rdIn .34s var(--ease-out) both;
  animation-delay:calc(var(--i,0) * 14ms)}
@keyframes rdIn{from{opacity:0;transform:scale(.9)}}

/* el raíl que enhebra los nodos: sube desde el centro del nodo */
.rd-linea{position:absolute;left:50%;bottom:50%;width:9px;height:100%;
  transform:translateX(-50%);border-radius:5px;background:rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.08)}
.rd-paso.hecho .rd-linea{background:linear-gradient(180deg,#ffd42e,#ff9c2b);
  border-color:rgba(255,255,255,.35);box-shadow:0 0 14px rgba(255,212,46,.55)}

.rd-nodo{position:relative;z-index:2;grid-row:1;grid-column:2;justify-self:center;
  width:76px;height:76px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  background:linear-gradient(180deg,#1b4fb8,#04143f);
  border:4px solid rgba(255,255,255,.6);
  box-shadow:4px 5px 0 rgba(2,11,38,.85),8px 12px 20px rgba(0,0,0,.4),
             inset 0 3px 0 rgba(255,255,255,.3)}
.rd-nodo i{font-style:normal;font-size:27px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.rd-nodo b{font-family:var(--display);font-style:italic;font-size:13px;
  color:#fff;text-shadow:1px 2px 0 rgba(2,11,38,.9);margin-top:2px}

/* la chapa del premio, alternando lado */
.rd-info{position:relative;z-index:2;display:flex;flex-direction:column;gap:2px;line-height:1.2;
  padding:9px 15px;border-radius:15px;
  background:linear-gradient(180deg,rgba(30,99,224,.5),rgba(4,20,63,.85));
  border:3px solid rgba(255,255,255,.4);
  box-shadow:4px 5px 0 rgba(2,11,38,.7),inset 0 2px 0 rgba(255,255,255,.22)}
.rd-paso:nth-child(odd) .rd-info{grid-row:1;grid-column:1;justify-self:end;margin-right:12px;text-align:right;
  align-items:flex-end}
.rd-paso:nth-child(even) .rd-info{grid-row:1;grid-column:3;justify-self:start;margin-left:12px}
.rd-info b{font-family:var(--display);font-style:italic;font-size:16px;letter-spacing:.4px;
  text-shadow:2px 3px 0 rgba(2,11,38,.7);white-space:nowrap}
.rd-info i{font-style:normal;font-size:11.5px;font-weight:800;opacity:.75;white-space:nowrap}
.rd-rango{margin-top:5px;font-size:10px;font-weight:900;letter-spacing:1.6px;
  color:#04143f;background:linear-gradient(180deg,#8fe3ff,#3a8dff);
  padding:2px 10px;border-radius:999px;border:2px solid #fff;white-space:nowrap}

.rd-tick{position:absolute;z-index:3;left:50%;top:50%;
  transform:translate(14px,10px);font-size:20px;color:#8dff9e;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.7))}

/* los sobres dorados y los normales se distinguen desde lejos */
.rd-oro .rd-nodo{background:linear-gradient(180deg,#ffe14f,#e28a05);border-color:#fff}
.rd-oro .rd-nodo b{color:#4a2600;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.rd-oro .rd-info{background:linear-gradient(180deg,rgba(255,190,60,.4),rgba(90,44,0,.85));
  border-color:var(--gold)}
.rd-oro .rd-info b{color:var(--gold)}
.rd-sobre .rd-nodo{background:linear-gradient(180deg,#b268ff,#4a0f9e)}
.rd-sobre .rd-info{background:linear-gradient(180deg,rgba(178,104,255,.4),rgba(40,4,80,.85));
  border-color:rgba(214,176,255,.7)}
.rd-sobre .rd-info b{color:#e0c6ff}

/* lo ya conseguido se apaga; lo siguiente late */
.rd-paso.hecho{opacity:.55}
.rd-paso.hecho .rd-nodo{filter:saturate(.45)}
.rd-paso.ahora .rd-nodo{border-color:var(--gold);animation:rdLate 1.3s ease-in-out infinite}
@keyframes rdLate{0%,100%{box-shadow:4px 5px 0 rgba(2,11,38,.85),0 0 0 rgba(255,212,46,.6)}
  50%{box-shadow:4px 5px 0 rgba(2,11,38,.85),0 0 30px rgba(255,212,46,.9)}}
.rd-paso.ahora .rd-info{border-color:var(--gold);
  box-shadow:4px 5px 0 rgba(2,11,38,.7),0 0 22px rgba(255,212,46,.45)}

@media (max-width:640px){
  .rd-paso{grid-template-columns:1fr 66px 1fr;min-height:92px}
  .rd-nodo{width:60px;height:60px;border-width:3px}
  .rd-nodo i{font-size:21px}
  .rd-info{padding:7px 11px}
  .rd-info b{font-size:13px}
}

/* ================================================================
   SUPERRIVALS — pantalla del evento
   Se entra desde la tarjeta de la derecha del menú. Cartel arriba,
   panel de inscripción en medio y lista de apuntados abajo.
   ================================================================ */
.rivals-wrap{flex:1;overflow-y:auto;padding:20px 18px 34px;display:flex;flex-direction:column;
  gap:18px;align-items:center}
.rivals-wrap > *{width:min(760px,94vw)}

/* el cartel */
.rv-cartel{position:relative;padding:26px 22px 22px;border-radius:26px;overflow:hidden;
  text-align:center;
  background:linear-gradient(150deg,#8a3cff 0%,#ff2fb0 55%,#ff7a3d 100%);
  border:4px solid #fff;
  box-shadow:0 10px 0 rgba(60,4,90,.7),0 20px 34px rgba(0,0,0,.5),
             inset 0 3px 0 rgba(255,255,255,.5),inset 0 -6px 0 rgba(0,0,0,.2)}
.rv-rayos{position:absolute;left:50%;top:50%;width:190%;aspect-ratio:1;z-index:0;
  transform:translate(-50%,-50%);pointer-events:none;opacity:.32;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.5) 0 3deg,transparent 3deg 13deg);
  -webkit-mask-image:radial-gradient(circle,#000 10%,transparent 62%);
  mask-image:radial-gradient(circle,#000 10%,transparent 62%);
  animation:raySpin 24s linear infinite}
.rv-cartel > *:not(.rv-rayos){position:relative;z-index:1}
/* con el cartel de verdad de fondo, los rayos pintados sobran */
.rv-cartel.con-fondo{background:var(--fondo) center/cover no-repeat;min-height:min(340px,42vh);
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.rv-cartel.con-fondo .rv-rayos{display:none}
.rv-cartel.con-fondo .rv-titulo{margin:0}
.rv-cartel.con-fondo .rv-titulo img{max-width:min(420px,64%)}
.rv-cartel.con-fondo .rv-eyebrow,.rv-cartel.con-fondo .rv-fecha{
  display:inline-block;background:rgba(0,0,0,.5);padding:4px 16px;border-radius:999px}
.rv-eyebrow{font-size:10.5px;font-weight:900;letter-spacing:3.6px;
  text-shadow:0 2px 0 rgba(0,0,0,.4)}
.rv-titulo{font-family:var(--display);font-style:italic;font-size:clamp(30px,6vw,46px);letter-spacing:1.6px;
  line-height:1;margin:6px 0 8px;text-shadow:0 4px 0 rgba(0,0,0,.4)}
.rv-fecha{font-family:var(--display);font-style:italic;font-size:19px;letter-spacing:1.2px;color:#fff;
  text-shadow:0 3px 0 rgba(0,0,0,.5)}
.rv-cuenta{display:flex;gap:10px;justify-content:center;margin-top:16px}
.rv-cuenta span{flex:1;max-width:170px;padding:9px 6px;border-radius:16px;
  background:rgba(0,0,0,.34);border:3px solid rgba(255,255,255,.42);
  display:flex;flex-direction:column;line-height:1.05}
.rv-cuenta b{font-family:var(--display);font-style:italic;font-size:27px;text-shadow:0 3px 0 rgba(0,0,0,.45)}
.rv-cuenta i{font-style:normal;font-size:9.5px;font-weight:900;letter-spacing:1.4px;opacity:.8}

/* el panel de inscripción */
.rv-panel{display:flex;flex-direction:column;align-items:center;gap:13px;
  padding:20px 20px 22px;border-radius:22px;
  background:linear-gradient(170deg,rgba(20,32,84,.94),rgba(7,14,44,.96));
  border:3px solid rgba(255,255,255,.24);
  box-shadow:0 8px 0 rgba(4,10,34,.7),0 16px 30px rgba(0,0,0,.45),
             inset 0 2px 0 rgba(255,255,255,.22)}
.rv-estado{font-size:15px;font-weight:800;line-height:1.5;text-align:center}
.rv-estado b{color:var(--gold)}
.rv-estado .rv-ok{color:#8dff9e}
.rv-acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.rv-nota{font-size:12px;opacity:.65;line-height:1.5;text-align:center;max-width:52ch}

/* la lista de apuntados */
.rv-lista-caja{display:flex;flex-direction:column;gap:10px;
  padding:16px 18px 18px;border-radius:22px;
  background:rgba(8,16,48,.72);border:3px solid rgba(255,255,255,.16);
  box-shadow:0 8px 0 rgba(4,10,34,.6),0 14px 26px rgba(0,0,0,.4)}
.rv-lista-tit{font-family:var(--display);font-style:italic;font-size:15px;letter-spacing:1.8px;
  display:flex;align-items:center;gap:10px}
.rv-lista-tit b{font-size:16px;color:var(--gold);padding:2px 11px;border-radius:999px;
  background:rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.2)}
.rv-lista{display:flex;flex-direction:column;gap:7px}
.rv-row{display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:13px;
  background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.12)}
.rv-row.yo{border-color:var(--gold);background:rgba(255,212,46,.16)}
.rv-dorsal{font-family:var(--display);font-style:italic;font-size:16px;color:var(--gold);min-width:26px}
.rv-nombre{flex:1;font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-nivel{font-size:11px;font-weight:800;opacity:.6}
.rv-vacia{text-align:center;padding:20px;opacity:.6;font-weight:700;font-size:13px}

/* --- logos de verdad de las habilidades y del evento --- */
.ability-chip .ab-logo{width:auto;height:1.5em;max-width:2.4em;object-fit:contain;
  display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.abil-item .ab-logo{height:1.9em;max-width:3em}
.rv-titulo .rv-logo{display:block;width:100%;max-width:280px;height:auto;margin:0 auto;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}

/* --- iconos de sección de Assets/, si están --- */
.ico-img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.55))}
.mb-ico.con-icono{background:none;border:none;padding:2px;filter:none}
.sp-ico.con-icono,.ev-ico.con-icono{display:block;width:46px;height:46px}
.ev-ico.con-icono{width:54px;height:54px}

/* ================================================================
   ALTA · primer arranque
   Cuenta de Google, datos del jugador y política. Está por encima de
   todo hasta que se completa.
   ================================================================ */
.alta{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  padding:16px;overflow-y:auto;animation:altaIn .4s var(--ease-out)}
@keyframes altaIn{from{opacity:0}}
.alta.fuera{animation:altaOut .38s var(--ease-in) forwards}
@keyframes altaOut{to{opacity:0;transform:scale(1.04)}}
.alta-fondo{position:absolute;inset:0;z-index:0;
  background:
    repeating-conic-gradient(from 0deg at 50% 34%,rgba(255,255,255,.05) 0 2deg,transparent 2deg 9deg),
    radial-gradient(ellipse at 50% 30%,#3a8dff 0%,#1146bd 38%,#082a72 66%,#04143f 100%)}

.alta-caja{position:relative;z-index:1;width:min(620px,100%);max-height:96vh;overflow-y:auto;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:24px 26px 28px;border-radius:26px;
  background:linear-gradient(170deg,rgba(20,44,116,.96),rgba(5,16,52,.98));
  border:4px solid #fff;
  box-shadow:6px 8px 0 rgba(2,11,38,.9),0 26px 60px rgba(0,0,0,.6),
             inset 0 3px 0 rgba(255,255,255,.28)}
.alta-logo img,.alta-logo svg{display:block;width:min(300px,70%);height:auto;margin:0 auto;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.6))}

.alta-pasos{display:flex;gap:10px;align-items:center}
.ap{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-style:italic;font-size:15px;
  background:rgba(255,255,255,.12);border:2.5px solid rgba(255,255,255,.3);
  transition:background .25s,border-color .25s,transform .25s}
.ap.on{background:linear-gradient(180deg,#ffd42e,#f08a00);border-color:#fff;color:#3a2000;
  transform:scale(1.1)}

.alta-paso{display:none;flex-direction:column;gap:13px;width:100%;align-items:stretch;
  animation:apIn .3s var(--ease-out)}
.alta-paso.on{display:flex}
@keyframes apIn{from{opacity:0;transform:translateY(12px)}}
.alta-paso h2{font-family:var(--display);font-style:italic;font-size:clamp(22px,4vw,30px);
  text-align:center;letter-spacing:.6px;text-shadow:2px 4px 0 rgba(2,11,38,.7)}
.alta-sub{font-size:13.5px;opacity:.82;text-align:center;line-height:1.5}

.gbtn-holder{display:flex;justify-content:center;min-height:46px}
.alta-avisogoogle{display:flex;flex-direction:column;gap:6px;text-align:center;
  padding:14px 16px;border-radius:16px;background:rgba(255,212,46,.12);
  border:2.5px solid rgba(255,212,46,.5);font-size:12.5px;line-height:1.5}
.alta-avisogoogle b{font-size:13.5px;color:var(--gold)}
.alta-avisogoogle code{background:rgba(0,0,0,.4);padding:1px 6px;border-radius:5px;font-size:11.5px}
.alta-omitir{align-self:center}

.alta-quien{display:flex;justify-content:center}
.aq-card{display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:999px;
  background:rgba(255,255,255,.1);border:2.5px solid rgba(255,255,255,.3)}
.aq-card img{width:44px;height:44px;border-radius:50%;object-fit:cover;
  border:2.5px solid rgba(255,255,255,.5)}
.aq-ini{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:22px;
  background:rgba(0,0,0,.35);border:2.5px solid rgba(255,255,255,.3)}
.aq-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.aq-txt b{font-size:14.5px}
.aq-txt i{font-style:normal;font-size:11.5px;opacity:.7;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:240px}
.aq-extra{font-size:11px;opacity:.6;font-weight:800}
.aq-sin{opacity:.85}

.alta-campo{display:flex;flex-direction:column;gap:5px}
.alta-campo > span{font-size:11.5px;font-weight:900;letter-spacing:1.4px;opacity:.75}
.alta-campo input,.alta-campo select{
  padding:12px 15px;border-radius:14px;font-size:15px;font-weight:800;color:#fff;
  background:rgba(0,0,0,.4);border:2.5px solid rgba(255,255,255,.28);outline:none;
  transition:border-color .18s,box-shadow .18s}
.alta-campo input:focus,.alta-campo select:focus{border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(255,212,46,.18)}
.alta-campo select option{background:#0b2a72;color:#fff}

.alta-politica{max-height:min(300px,38vh);overflow-y:auto;text-align:left;
  padding:16px 18px;border-radius:16px;line-height:1.6;font-size:12.8px;
  background:rgba(0,0,0,.34);border:2.5px solid rgba(255,255,255,.2)}
.alta-politica h3{font-family:var(--display);font-style:italic;font-size:15px;color:var(--gold);
  margin:16px 0 6px;letter-spacing:.4px}
.alta-politica h3:first-child{margin-top:0}
.alta-politica p{margin-bottom:9px;opacity:.9}
.alta-politica ul{margin:0 0 10px 20px}
.alta-politica li{margin-bottom:5px;opacity:.9}
.alta-politica a{color:var(--cyan);font-weight:800}
.alta-politica b{color:#fff}
.pol-pie{margin-top:16px;padding-top:10px;border-top:2px solid rgba(255,255,255,.14);
  font-size:11px;opacity:.6;text-align:center}

.alta-check{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;line-height:1.5;
  padding:11px 14px;border-radius:14px;cursor:pointer;
  background:rgba(255,255,255,.06);border:2.5px solid rgba(255,255,255,.16);
  transition:border-color .18s,background .18s}
.alta-check:hover{background:rgba(255,255,255,.1)}
.alta-check:has(input:checked){border-color:#3ad16b;background:rgba(58,209,107,.14)}
.alta-check input{flex:none;width:22px;height:22px;accent-color:#3ad16b;cursor:pointer;margin-top:1px}
.alta-check b{color:var(--gold)}

.alta-error{font-size:12.5px;font-weight:800;color:#ff9a8a;text-align:center;
  padding:8px 12px;border-radius:12px;background:rgba(224,36,42,.18);
  border:2px solid rgba(255,120,110,.4)}

/* ================================================================
   AJUSTES Y CRÉDITOS
   ================================================================ */
#screen-settings{--accent:#8fe3ff;--accent-2:#1b53c8}

.gear-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;
  font-size:20px;line-height:1;
  background:linear-gradient(180deg,#1b4fb8,#071e57);
  border:3px solid rgba(255,255,255,.6);
  box-shadow:4px 5px 0 rgba(2,11,38,.9),inset 0 2px 0 rgba(255,255,255,.28);
  transition:transform .14s var(--ease-out),filter .14s}
.gear-btn:hover{transform:rotate(45deg) scale(1.08);filter:brightness(1.2)}
.gear-btn:active{transform:translate(3px,4px);box-shadow:1px 1px 0 rgba(2,11,38,.9)}

.set-wrap{flex:1;overflow-y:auto;padding:20px 18px 34px;display:flex;flex-direction:column;
  gap:16px;align-items:center}
.set-box{width:min(680px,96vw);display:flex;flex-direction:column;gap:11px;
  padding:18px 20px 20px;border-radius:22px;
  background:linear-gradient(170deg,rgba(30,99,224,.34),rgba(6,20,66,.86));
  border:3px solid rgba(255,255,255,.34);
  box-shadow:5px 6px 0 rgba(2,11,38,.7),0 14px 26px rgba(0,0,0,.4),
             inset 0 2px 0 rgba(255,255,255,.2)}
.set-box h3{font-family:var(--display);font-style:italic;font-size:17px;letter-spacing:1px;
  color:var(--gold);text-shadow:2px 3px 0 rgba(2,11,38,.7)}
.set-row{display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:9px 13px;border-radius:14px;cursor:pointer;
  background:rgba(0,0,0,.26);border:2px solid rgba(255,255,255,.14)}
.set-lbl{font-size:13.5px;font-weight:800}
.set-row select{padding:8px 12px;border-radius:11px;font-weight:800;font-size:13px;color:#fff;
  background:rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.24);outline:none}
.set-row select option{background:#0b2a72}
.set-nota{font-size:11.5px;opacity:.62;line-height:1.5}
.set-acciones{display:flex;gap:11px;flex-wrap:wrap}
.set-acciones .big-btn{flex:1 1 200px;margin-top:0}

/* interruptor de palanca */
.switch{appearance:none;flex:none;width:54px;height:30px;border-radius:999px;cursor:pointer;
  background:rgba(0,0,0,.55);border:2.5px solid rgba(255,255,255,.26);position:relative;
  transition:background .2s,border-color .2s}
.switch::after{content:'';position:absolute;left:2px;top:1.5px;width:21px;height:21px;
  border-radius:50%;background:linear-gradient(180deg,#fff,#c7d5ee);
  box-shadow:0 2px 4px rgba(0,0,0,.5);transition:transform .2s var(--ease-out)}
.switch:checked{background:linear-gradient(180deg,#3ad16b,#0b6f4a);border-color:#fff}
.switch:checked::after{transform:translateX(24px)}
.switch:disabled{opacity:.4;cursor:not-allowed}

.slider{appearance:none;flex:1;max-width:220px;height:10px;border-radius:999px;cursor:pointer;
  background:linear-gradient(90deg,#3ad16b,#ffd42e);
  border:2px solid rgba(255,255,255,.24)}
.slider::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#c7d5ee);border:2.5px solid #0b2a72;
  box-shadow:0 2px 5px rgba(0,0,0,.5);cursor:pointer}
.slider:disabled{opacity:.4;cursor:not-allowed}

/* créditos */
.cred-fila{display:flex;gap:14px;flex-wrap:wrap}
.cred-card{flex:1 1 240px;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:18px 16px;border-radius:18px;text-align:center;text-decoration:none;color:inherit;
  background:rgba(255,255,255,.94);border:3px solid #fff;
  box-shadow:4px 5px 0 rgba(2,11,38,.7),0 12px 22px rgba(0,0,0,.35);
  transition:transform .15s var(--ease-out),box-shadow .15s}
.cred-card:hover{transform:translate(-2px,-3px);
  box-shadow:6px 8px 0 rgba(2,11,38,.7),0 18px 30px rgba(0,0,0,.45)}
.cred-logo{max-width:min(190px,80%);max-height:64px;width:auto;height:auto;object-fit:contain}
.cred-card b{font-size:11px;font-weight:900;letter-spacing:1.4px;color:#5a6a86;text-transform:uppercase}
.cred-card i{font-style:normal;font-family:var(--display);font-size:19px;color:#0b2a72;
  letter-spacing:.4px}
.cred-web{font-size:11.5px;font-weight:800;color:#1b53c8}

.pol-modal{max-width:min(720px,92vw)}
.pol-modal h2{font-family:var(--display);font-style:italic;font-size:24px;margin-bottom:12px;
  color:var(--gold)}
.pol-modal .alta-politica{max-height:min(460px,60vh)}

/* la cara del asistente, si has dejado Bot Logo.png en Assets/ */
.ai-cara{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.ai-fab .ai-cara{padding:5px}
.ai-ava{width:34px;height:34px;display:grid;place-items:center}

/* ================================================================
   MÓVIL Y TABLET
   Va al final a propósito: aquí se recolocan las pantallas cuando no
   hay sitio, sin tocar el diseño de escritorio.
   ================================================================ */

/* respeta la muesca y la barra de gestos del móvil */
#app{padding:env(safe-area-inset-top) env(safe-area-inset-right)
            env(safe-area-inset-bottom) env(safe-area-inset-left)}
/* que el rebote del scroll no arrastre la página entera */
html,body{overscroll-behavior:none;touch-action:manipulation}

/* ---------------- TABLET (hasta 1080px) ---------------- */
@media (max-width:1080px){
  .menu-wrap{justify-content:flex-start;overflow-y:auto}
  .menu-cols{overflow:visible}
  /* JUGAR manda: ocupa toda la fila y los otros dos se reparten debajo */
  .play-row{flex-wrap:wrap}
  .play-bar{order:-1;flex:1 1 100%;min-width:0}
  .side-play{flex:1 1 0;min-width:0;flex-direction:row;justify-content:center;gap:10px}
  .rail{flex-direction:row;flex-wrap:wrap}
  .mbtn{flex:1 1 46%}
  .events{flex-direction:row;flex-wrap:wrap}
  .ev-card{flex:1 1 46%}
  /* los rótulos no se cortan: si no caben, bajan de línea */
  .mb-txt b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15}
}

/* ---------------- MÓVIL (hasta 760px) ---------------- */
@media (max-width:760px){
  :root{--card-base:clamp(150px,44vw,220px)}

  /* --- cabecera: dos filas apretadas --- */
  .hud-top{padding:8px 10px 10px;gap:8px;row-gap:8px}
  .player-chip{flex:1 1 100%;min-width:0;padding:5px 14px 5px 5px;gap:9px;border-width:3px}
  .pc-ring{width:46px;height:46px;padding:3px}
  .lv-badge b{font-size:19px}
  .pc-info{flex:1;min-width:0}
  .pc-info input{font-size:17px;max-width:100%;width:100%}
  .level-bar{flex:1 1 100%;order:3;max-width:none;padding:7px 11px;border-width:3px}
  .lv-top{font-size:9.5px;margin-bottom:4px}
  .lv-fill-bg{height:11px}
  .wallet-big{order:2;margin-left:auto}
  .wallet-big span{font-size:13px;padding:6px 11px}
  .wallet-big .w-energy b,.wallet-big .w-cards b{font-size:18px}
  .lang-btn{order:2;padding:6px 10px}
  .gear-btn{order:2;width:36px;height:36px;font-size:17px;border-width:2.5px}

  /* --- menú --- */
  .menu-wrap{gap:8px;padding:8px 0 6px}
  .logo-holder svg,.logo-holder img{max-width:74vw;max-height:19vh}
  .logo-holder::before{width:230vmax}
  .menu-cols{gap:9px;padding:0 10px 12px}
  .mbtn{flex:1 1 46%;padding:11px 12px;gap:9px;border-width:3px}
  .mb-ico{width:36px;height:36px;font-size:20px}
  .mb-txt b{font-size:14px}
  .play-bar{padding:15px 18px;border-width:3px}
  .pb-txt b{font-size:clamp(30px,10vw,44px)}
  .pb-txt i{font-size:11px;padding:2px 10px}
  .side-play{padding:12px 10px;border-width:3px}
  .sp-ico{font-size:24px}
  .sp-ico.con-icono{width:32px;height:32px}
  .sp-txt{font-size:12px}
  .ev-card{padding:11px;border-width:3px}
  .ev-rivals{min-height:104px}
  .ev-logo img{max-width:140px}

  /* --- pie del menú: cabe y se puede desplazar --- */
  .menu-foot{gap:7px;padding:6px 8px;flex-wrap:wrap;justify-content:center}
  /* en la batalla .field va en columna; aquí no, que se come el alto */
  .menu-foot .field{flex:0 0 auto;flex-direction:row;align-items:center;gap:6px;font-size:9.5px}
  .menu-foot select{font-size:11.5px;padding:4px 7px}
  .modo-switch button{padding:6px 10px;font-size:11px}
  .menu-foot .ghost-btn{padding:6px 9px;font-size:14px}

  /* --- barras superiores de las demás pantallas --- */
  .top-bar{padding:9px 12px 10px;gap:9px}
  .top-bar h2{font-size:clamp(17px,5.4vw,24px);padding-left:14px}
  .top-bar h2 small{display:block;margin-left:0;font-size:.55em}
  .back-btn{padding:7px 11px;font-size:12px}
  .filters{gap:6px;width:100%;order:5}
  .chip{font-size:11px;padding:5px 10px}

  /* --- tienda --- */
  .shop-wrap{padding:14px 12px 90px;gap:14px}
  .shelf{gap:14px;width:100%}
  .product{width:100%}
  .cart-bar{flex-wrap:wrap;gap:8px;padding:9px 11px}
  .cart-lines{display:none}
  .cart-bar .big-btn{flex:1 1 140px}

  /* --- colección y álbum --- */
  .album-holder{padding:2px}
  .binder{gap:4px}
  .binder-shell{padding:5px;border-width:2px}
  /* en vertical no caben dos hojas: se enseña solo la de la derecha */
  .book{max-width:100%}
  .binder-keys{display:none}
  .coll-tab{font-size:11px;padding:7px 11px}

  /* --- camino de trofeos --- */
  .road{width:100%}
  .rd-info b{font-size:12.5px;white-space:normal}
  .rd-info i{font-size:10px;white-space:normal}
  .road-head{padding:9px 14px;gap:9px}
  .rh-lv{font-size:13px}
  .rh-lv b{font-size:21px}

  /* --- superrivals --- */
  .rivals-wrap{padding:12px 10px 26px;gap:12px}
  .rivals-wrap > *{width:100%}
  .rv-cartel{padding:18px 14px 14px;border-width:3px}
  .rv-cartel.con-fondo{min-height:min(230px,32vh)}
  .rv-cuenta{gap:6px}
  .rv-cuenta b{font-size:21px}

  /* --- ajustes --- */
  .set-wrap{padding:14px 11px 26px;gap:12px}
  .set-box{width:100%;padding:14px 14px 16px}
  .set-row{flex-wrap:wrap;gap:8px}
  .slider{max-width:none;flex:1 1 100%}
  .cred-fila{flex-direction:column}

  /* --- alta --- */
  .alta{padding:0;align-items:stretch}
  .alta-caja{width:100%;max-height:none;min-height:100%;border-radius:0;border-width:0 0 3px 0;
    padding:18px 16px 26px}
  .alta-logo img,.alta-logo svg{width:min(230px,64%)}
  .alta-politica{max-height:34vh;font-size:12.2px;padding:13px 14px}
  .alta-check{font-size:11.8px;padding:10px 12px}

  /* --- asistente --- */
  .ai-panel{width:calc(100vw - 20px);right:10px;left:10px;max-height:70vh}
}

/* ---------------- MÓVIL TUMBADO ---------------- */
@media (max-width:900px) and (orientation:landscape){
  .hud-top{padding:5px 10px 6px;gap:7px}
  .player-chip{flex:0 1 auto}
  .level-bar{flex:1 1 auto;order:0}
  .logo-holder svg,.logo-holder img{max-height:26vh}
  .menu-cols{grid-template-columns:1fr 1.3fr 1fr;align-items:center}
  .rail,.events{flex-direction:column}
  .mbtn,.ev-card{flex:0 0 auto}
  .play-bar{flex:0 1 auto;order:0}
  .menu-foot{padding:5px 10px}
}

/* ---------------- PANTALLAS TÁCTILES ---------------- */
@media (hover:none){
  /* sin ratón no hay estados de hover que valgan: se quitan para que no se
     queden "pegados" tras un toque */
  .mbtn:hover,.side-play:hover,.ev-card:hover,.play-bar:hover,
  .cred-card:hover,.level-bar:hover,.pc-ring:hover{transform:none;filter:none}
  /* objetivos de toque de al menos 44px, que es lo que pide el dedo */
  .chip,.coll-tab,.page-btn,.ghost-btn,.back-btn{min-height:40px}
  .gear-btn,.lang-btn{min-height:40px}
}

/* --- el interruptor de la narración del tutorial --- */
.film-voz{font-size:15px}
.film-voz.off{opacity:.45;filter:grayscale(1)}
/* mientras habla la voz, la escena respira para que no se quede congelada */
.film-stage{animation:filmDrift 9s ease-in-out infinite alternate}
@keyframes filmDrift{from{transform:scale(1) translateY(0)}to{transform:scale(1.035) translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.film-stage{animation:none}}

/* el separador 'o' entre el botón de Google y el correo a mano */
.alta-o{position:relative;text-align:center;font-size:11px;font-weight:900;letter-spacing:2px;
  opacity:.55;margin:2px 0}
.alta-o::before,.alta-o::after{content:'';position:absolute;top:50%;width:calc(50% - 22px);
  height:2px;background:rgba(255,255,255,.18)}
.alta-o::before{left:0}.alta-o::after{right:0}

/* ---- el sello de las metalizadas, pequeño siempre ----
   La lámina de "UR Logo.png" son 1000 px. Sin un ancho encima, un <img>
   se pinta a tamaño original y tapa la pantalla entera. Esto lo ata en
   corto en todos los sitios donde puede aparecer. */
.ur-badge img,.ur-badge svg,img.page-ur,img.chk-sello{
  max-width:100%;height:auto;display:block}
.ur-badge{max-height:34px}
.has-photo .ur-badge{max-height:30px}