@import url('https://fonts.googleapis.com/css2?family=Teko:wght@500;600;700&family=Inter:wght@400;500;600;700&family=Bangers&family=Pixelify+Sans:wght@400;600&display=swap');

/* Letra de títulos y supertécnicas.
   Si tienes la fuente de fans instalada ("Inazuma Neue" o "Playhouse") se usa sola;
   también puedes copiar el archivo a assets/fonts/inazuma.ttf (o .otf / .woff2).
   Si no hay ninguna, se usa Bangers (Google Fonts, licencia libre). */
@font-face{
  font-family: 'InazumaFont';
  src: local('Inazuma Neue'), local('InazumaNeue'), local('Playhouse'),
       url('assets/fonts/inazuma.woff2') format('woff2'),
       url('assets/fonts/inazuma.otf') format('opentype'),
       url('assets/fonts/inazuma.ttf') format('truetype');
  font-display: swap;
}

:root{
  --pitch-dark: #0b1f16;
  --pitch: #163a26;
  --pitch-light: #1f5536;
  --line: #e8f5e9;
  --gold: #f2b705;
  --sky: #5ec8f2;
  --coral: #ff6b5e;
  --ink: #eafff3;
  --ink-dim: #9fc8ad;
  --title-font: 'InazumaFont', 'Bangers', 'Teko', sans-serif;
  --common: #8fa39a;
  --rare: #4fb8e6;
  --epic: #b377e0;
  --legendary: #f2b705;
  --radius: 10px;
}

*{ box-sizing: border-box; }

html,body{
  height:100%;
  margin:0;
  background: radial-gradient(circle at 50% 0%, var(--pitch) 0%, var(--pitch-dark) 70%);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  overflow: hidden;
}

h1,h2,h3{
  font-family: var(--title-font);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0;
}

.screen{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 24px;
  position: relative;
}

.hidden{ display:none !important; }

/* ---------- Title screen (estilo "PokéSurvivor": campo + panel lateral) ---------- */
#screen-title{
  padding: 0;
  display: block;
  overflow: hidden;
}
.title-screen{
  background:
    repeating-linear-gradient(90deg, transparent 0 140px, rgba(0,0,0,0.05) 140px 280px),
    radial-gradient(ellipse at 50% 20%, var(--pitch-light) 0%, var(--pitch-dark) 78%);
}

/* criaturas decorativas paseando por el césped */
.field-decor{
  position:absolute; inset:0;
  pointer-events:none;
  z-index: 1;
}
.field-critter{
  position:absolute;
  font-size: 34px;
  opacity: 0.55;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,0.35));
  animation: critter-bob 3.2s ease-in-out infinite;
}
@keyframes critter-bob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* barra superior */
.topbar{
  position:absolute;
  top: 16px; left: 16px; right: 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index: 3;
}
.topbar-pill{
  background: rgba(8,24,16,0.65);
  border: 1px solid rgba(234,255,243,0.18);
  border-radius: 24px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 14px;
}
.topbar-right{ display:flex; gap:8px; }
.ticket-pill{ margin-left: 8px; margin-right: auto; }
.icon-btn{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(234,255,243,0.18);
  background: rgba(8,24,16,0.65);
  color: var(--ink-dim);
  font-size: 15px;
  cursor: not-allowed;
}

/* título, más discreto, arriba a la izquierda del escaparate */
.title-logo{
  position:absolute;
  top: 70px; left: 6%;
  z-index: 2;
  text-align:left;
}
.logo{
  font-size: 46px;
  line-height: 0.85;
  color: var(--ink);
  text-shadow: 0 4px 0 rgba(0,0,0,0.3);
}
.logo span{
  display:block;
  font-size: 30px;
  color: var(--gold);
}
.tagline{
  color: var(--ink-dim);
  font-size: 13px;
  margin: 8px 0 0;
}

/* escaparate del jugador titular, centrado como en la referencia */
.showcase{
  position:absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 12px;
}
.showcase-box{
  position:relative;
  width: 230px; height: 230px;
  border-radius: 18px;
  background: radial-gradient(ellipse at 50% 35%, rgba(234,255,243,0.08), rgba(5,16,10,0.55) 70%);
  border: 2px solid rgba(234,255,243,0.25);
  box-shadow: 0 0 36px rgba(242,183,5,0.25), inset 0 0 30px rgba(0,0,0,0.4);
  display:flex;
  align-items:center;
  justify-content:center;
}
.showcase-emoji{
  font-size: 96px;
  filter: drop-shadow(0 8px 6px rgba(0,0,0,0.45));
  animation: critter-bob 2.6s ease-in-out infinite;
}
.showcase-shadow{
  position:absolute;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 22px;
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  filter: blur(2px);
}
.showcase-label{ text-align:center; }
.showcase-name{
  font-family: var(--title-font);
  font-size: 30px;
  font-weight: 600;
}
.showcase-tags{
  display:flex;
  gap: 6px;
  justify-content:center;
  margin-top: 4px;
}

/* menú lateral de modos de juego */
.side-menu{
  position:absolute;
  top: 70px; right: 16px; bottom: 16px;
  width: 290px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  padding: 10px;
  background: rgba(8,24,16,0.6);
  border: 1px solid rgba(234,255,243,0.14);
  border-radius: 16px;
  z-index: 3;
  overflow-y:auto;
}
.menu-item{
  display:flex;
  align-items:center;
  gap: 12px;
  width: 100%;
  background: rgba(234,255,243,0.04);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 12px;
  text-align:left;
  color: var(--ink);
  cursor:pointer;
  font-family:'Inter', sans-serif;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.menu-item:not(.menu-disabled):hover{
  border-color: var(--gold);
  background: rgba(242,183,5,0.08);
  transform: translateX(-2px);
}
.menu-item:not(.menu-disabled):active{ transform: scale(0.98); }
.menu-ico{ font-size: 22px; width: 26px; text-align:center; flex-shrink:0; }
.menu-text{ display:flex; flex-direction:column; line-height:1.25; }
.menu-text b{ font-size: 15px; font-weight:600; }
.menu-text small{ font-size: 11px; color: var(--ink-dim); }
.menu-disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 760px){
  .title-logo{ top: 64px; left: 50%; transform: translateX(-50%); text-align:center; }
  .showcase{ top: 42%; left: 50%; }
  .side-menu{
    top: auto; bottom: 10px; left: 10px; right: 10px;
    width: auto; height: auto; max-height: 46%;
    flex-direction: row; flex-wrap: wrap;
  }
  .menu-item{ width: calc(50% - 4px); }
}

/* ---------- Buttons ---------- */
.btn{
  font-family:'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 28px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  min-width: 220px;
  transition: transform 0.12s ease, filter 0.12s ease;
  position: relative;
}
.btn:active{ transform: scale(0.96); }
.btn-primary{
  background: var(--gold);
  color: #2a1d00;
  box-shadow: 0 3px 0 #a97d00;
}
.btn-primary:hover{ filter: brightness(1.07); }
.btn-secondary{
  background: var(--sky);
  color: #012233;
  box-shadow: 0 3px 0 #1f6c8c;
}
.btn-ghost{
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid rgba(234,255,243,0.25);
}
.btn-big{ min-width: 260px; font-size: 17px; }
.coin-badge{
  display:inline-block;
  margin-left: 8px;
  font-size: 13px;
  opacity: 0.85;
}

/* ---------- Section titles ---------- */
.section-title{
  font-size: 36px;
  margin-bottom: 18px;
  color: var(--ink);
}
.gacha-sub{
  color: var(--ink-dim);
  font-size: 13px;
  margin: -8px 0 20px;
  text-align:center;
}

/* ---------- Card grid (roster / select) ---------- */
.card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
  max-width: 720px;
  width: 100%;
  max-height: 55vh;
  overflow-y: auto;
  padding: 4px;
  margin-bottom: 20px;
}
.char-card{
  background: var(--pitch-light);
  border-radius: var(--radius);
  padding: 12px;
  text-align:center;
  cursor:pointer;
  border: 2px solid transparent;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.char-card:hover{ transform: translateY(-3px); }
.char-card.selected{ border-color: var(--gold); }
.char-card.locked{ opacity: 0.35; cursor:not-allowed; }
.char-emoji{ font-size: 36px; }
.char-name{ font-weight:600; font-size: 14px; margin-top: 6px; }
.char-role{ font-size: 11px; color: var(--ink-dim); }
.char-rarity{
  display:inline-block;
  margin-top: 6px;
  font-size: 10px;
  font-weight:700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 20px;
}
.rarity-common{ background: var(--common); color:#0b1f16;}
.rarity-rare{ background: var(--rare); color:#012233;}
.rarity-epic{ background: var(--epic); color:#1d0230;}
.rarity-legendary{ background: var(--legendary); color:#2a1d00;}

/* ---------- Gacha reveal ---------- */
.gacha-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 14px;
}
.gacha-reveal{
  width: 200px;
  min-height: 220px;
  background: var(--pitch-light);
  border-radius: 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 16px;
  animation: pop 0.35s ease;
}
.gacha-reveal.rarity-legendary{ box-shadow: 0 0 40px 6px rgba(242,183,5,0.55); }
.gacha-reveal.rarity-epic{ box-shadow: 0 0 30px 4px rgba(179,119,224,0.5); }
.gacha-reveal.rarity-rare{ box-shadow: 0 0 20px 3px rgba(79,184,230,0.45); }
.gacha-reveal.rarity-common{ box-shadow: 0 0 10px 2px rgba(143,163,154,0.3); }
.gacha-reveal .char-emoji{ font-size: 54px; }
.gacha-multi{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  max-width: 480px;
}
.gacha-multi .char-card{ min-width: 90px; }
@keyframes pop{
  0%{ transform: scale(0.6); opacity:0; }
  100%{ transform: scale(1); opacity:1; }
}

/* ---------- HUD (compacto, estilo survivor) ---------- */
#screen-game{ padding:0; display:block; }
#game-stage{
  position:relative;
  width:100%; height:100%;
  overflow:hidden;
}
#hud{
  position:absolute;
  top:0; left:0; right:0;
  z-index: 5;
  pointer-events:none;
  font-size: 13px;
  font-weight:600;
}
#hud button{ pointer-events:auto; }

/* barra de experiencia a lo ancho de toda la pantalla */
.xp-strip{
  position:relative;
  height: 14px;
  background: rgba(0,0,0,0.55);
  border-bottom: 1px solid rgba(234,255,243,0.15);
}
.xp-strip-fill{
  height:100%; width:0;
  background: linear-gradient(90deg, #3a9fd0, var(--sky));
  transition: width .15s linear;
}
.xp-strip-level{
  position:absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  font-family:'Teko', sans-serif;
  font-size: 15px; line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.hud-row{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  padding: 6px 12px 0;
}
.hud-left{ display:flex; align-items:center; gap:8px; }
.hud-portrait{
  width: 30px; height:30px;
  border-radius: 50%;
  background: var(--pitch-light);
  display:flex; align-items:center; justify-content:center;
  font-size: 16px;
  flex-shrink:0;
}
.hud-hp{ position:relative; width: 150px; }
.hud-hp .bar{ height: 14px; border-radius: 5px; background: rgba(0,0,0,0.5); }
.hud-hp span{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size: 10px; font-weight:700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.bar{ height:7px; border-radius: 4px; background: rgba(255,255,255,0.12); overflow:hidden; }
.bar-fill{ height:100%; width:100%; }
.hp-bar .bar-fill{ background: var(--coral); }

.hud-mid{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.hud-timer{ font-family:'Teko', sans-serif; font-size: 28px; text-shadow: 0 2px 3px rgba(0,0,0,0.6); }
.hud-right{ display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.pause-btn{
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(234,255,243,0.3);
  background: rgba(0,0,0,0.4);
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
}
.pause-btn:hover{ border-color: var(--gold); }

/* mejoras conseguidas como iconos con nivel */
.inventory{
  display:flex; flex-wrap:wrap; gap:4px;
  padding: 6px 12px 0;
  max-width: 340px;
}
.inv-slot{
  position:relative;
  width: 30px; height: 30px;
  border-radius: 6px;
  background: rgba(8,24,16,0.7);
  border: 1px solid rgba(234,255,243,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size: 16px;
}
.inv-slot i{
  position:absolute; right:-3px; bottom:-3px;
  min-width: 14px; height: 14px;
  padding: 0 2px;
  border-radius: 4px;
  background: #0b1f16;
  border: 1px solid rgba(234,255,243,0.3);
  font: 700 9px/12px 'Inter', sans-serif;
  text-align:center;
  font-style: normal;
}
.inv-slot.max{ border-color: var(--gold); }
.inv-slot.max i{ background: var(--gold); color:#2a1d00; border-color: var(--gold); }

/* efectos temporales de objetos */
.buffs{ display:flex; gap:6px; padding: 6px 12px 0; }
.buff{
  display:flex; align-items:center; gap:4px;
  padding: 2px 8px 2px 4px;
  border-radius: 20px;
  background: rgba(8,24,16,0.75);
  border: 1px solid var(--c);
  font-size: 11px;
}
.buff span{ font-size: 15px; }
.buff b{ color: var(--c); font-variant-numeric: tabular-nums; }

#game-canvas{
  display:block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

#joystick-zone{
  position:absolute;
  bottom:0; left:0;
  width: 40%; height: 40%;
  z-index: 4;
}

/* ---------- Pausa: estadísticas completas ---------- */
.overlay-box.pause-box{ max-width: 620px; max-height: 90vh; overflow-y:auto; text-align:left; }
.pause-cols{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pause-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top: 18px; }
.pause-actions .btn{ min-width: 180px; }

.sp-head{ display:flex; align-items:center; gap:10px; }
.sp-portrait{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--pitch);
  display:flex; align-items:center; justify-content:center;
  font-size: 24px;
  flex-shrink:0;
}
.sp-id{ flex:1; min-width:0; }
.sp-name{ font-family: var(--title-font); font-size: 24px; line-height: 1; font-weight:400; letter-spacing:.02em; }
.sp-role{ font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.sp-level{
  font-family:'Teko',sans-serif;
  font-size: 22px;
  color: #2a1d00;
  background: var(--gold);
  border-radius: 6px;
  padding: 0 8px;
  line-height: 1.4;
}
.sp-title{
  font-size: 18px;
  color: var(--gold);
  margin: 14px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(234,255,243,0.12);
}
.sp-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 2px; }
.sp-list li{
  display:flex; align-items:center; gap:8px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 13px;
}
.sp-list li:nth-child(odd){ background: rgba(234,255,243,0.04); }
.sp-ico{ width: 20px; text-align:center; flex-shrink:0; }
.sp-lbl{ flex:1; color: var(--ink-dim); }
.sp-val{ font-weight:700; font-variant-numeric: tabular-nums; }
.sp-val.up{ color: #8be28f; }
.sp-upgrades .sp-lbl{ color: var(--ink); font-weight:500; }
.sp-lvl{
  font-weight:700; font-size: 11px;
  padding: 1px 8px;
  border-radius: 20px;
  background: rgba(242,183,5,0.18);
  color: var(--gold);
  white-space:nowrap;
}
.sp-lvl.max{ background: var(--gold); color:#2a1d00; }
.sp-empty{ color: var(--ink-dim); font-size: 12px; padding: 6px; }

@media (max-width: 720px){
  .hud-hp{ width: 96px; }
  .hud-timer{ font-size: 22px; }
  .inventory{ max-width: 220px; }
  .inv-slot{ width: 26px; height: 26px; font-size: 14px; }
  .pause-cols{ grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Arquetipos ---------- */
.char-element{
  display:inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  color: var(--c, var(--ink));
  border: 1px solid var(--c, var(--ink-dim));
  background: rgba(0,0,0,0.25);
}
.char-card .char-element + .char-rarity{ margin-left: 4px; }

.sp-element{
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(234,255,243,0.04);
  border-left: 3px solid var(--ink-dim);
  font-size: 12px;
  color: var(--ink-dim);
}
.el-chip{
  display:inline-block;
  font-weight:700; font-size: 13px;
  color: var(--c);
  margin-bottom: 4px;
}
.el-cycle{ display:flex; align-items:center; justify-content:space-between; margin-top: 6px; }
.el-node{
  font-size: 16px;
  line-height: 1;
  opacity: .5;
}
.el-node.own{ opacity:1; font-size: 20px; }
.el-node.ghost{ opacity:.25; }
.el-arrow{ color: var(--ink-dim); font-size: 14px; }

/* ---------- Overlays ---------- */
.overlay{
  position:fixed;
  inset:0;
  background: rgba(5,12,8,0.82);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 20;
}
.overlay-box{
  background: var(--pitch-light);
  border-radius: 14px;
  padding: 26px;
  text-align:center;
  max-width: 420px;
  width: 90%;
}
.overlay-box h3{ font-size: 32px; margin-bottom: 6px; }
.overlay-box p{ color: var(--ink-dim); font-size: 14px; margin-bottom: 16px; }
.upgrade-row{ display:flex; flex-direction:column; gap: 10px; }
.upgrade-option{
  background: var(--pitch);
  border: 1px solid rgba(234,255,243,0.15);
  border-radius: var(--radius);
  padding: 12px 14px;
  text-align:left;
  cursor:pointer;
  color: var(--ink);
}
.upgrade-option:hover{ border-color: var(--gold); }
.upgrade-special{
  border-color: rgba(242,183,5,0.5);
  background: rgba(242,183,5,0.08);
}
.upgrade-option b{ display:block; font-family: var(--title-font); font-weight:400; font-size: 17px; letter-spacing:.03em; }
.upgrade-option span{ font-size: 12px; color: var(--ink-dim); }

@media (max-width: 480px){
  .logo{ font-size: 56px; }
  .logo span{ font-size: 34px; }
}

.upgrade-key{
  display:inline-block; min-width:20px; padding:1px 6px; margin-right:4px;
  border:1px solid var(--gold); border-radius:5px; text-align:center;
  font: inherit; font-size:12px; color: var(--gold);
}

/* ---------- Supertécnicas en partida (Q / E / R) ---------- */
.tech-bar{
  --el: var(--gold);
  position:absolute;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  z-index: 6;
  display:flex;
  align-items:flex-end;
  gap: 10px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.45));   /* se lee bien sobre la tierra clara */
}
.tech-slots{ display:flex; flex-direction:column; gap:6px; }
.tech-btn{
  display:flex; align-items:center; gap:8px;
  width: 200px;
  padding: 6px 10px 6px 6px;
  border-radius: 10px;
  border: 1px solid rgba(234,255,243,0.2);
  background: rgba(8,24,16,0.9);
  color: var(--ink);
  font-family:'Inter', sans-serif;
  text-align:left;
  cursor:pointer;
  opacity: 0.85;
  transition: opacity .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.tech-btn kbd, .ult-core kbd{
  font-family:'Teko', sans-serif;
  font-weight:700;
}
.tech-btn kbd{
  flex-shrink:0;
  width: 24px; height: 24px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 6px;
  border: 1px solid rgba(234,255,243,0.35);
  font-size: 18px; line-height: 1;
}
.tech-btn.active{
  opacity: 1;
  border-color: var(--el);
  background: rgba(8,24,16,0.92);
  box-shadow: 0 0 0 1px var(--el), 0 0 14px -2px var(--el);
}
.tech-btn.active kbd{ background: var(--el); border-color: var(--el); color:#0b1f16; }
.tech-btn.empty{ opacity: 0.8; cursor: default; border-style: dashed; }
.tech-btn.empty .tech-name{ color: var(--ink-dim); }
.tech-ico{ font-size: 20px; flex-shrink:0; }
.tech-info{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.tech-name{ font-family: var(--title-font); font-size: 15px; font-weight:400; letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tech-lvl{ font-size: 10px; color: var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tech-btn.evolved .tech-name{ color: var(--el); }

.ult-btn{
  width: 78px; height: 78px;
  flex-shrink:0;
  border-radius: 50%;
  border: none;
  padding: 4px;
  cursor: pointer;
  background: conic-gradient(var(--el) var(--fill, 0%), rgba(234,255,243,0.12) 0);
}
.ult-core{
  width:100%; height:100%;
  border-radius:50%;
  background: rgba(8,24,16,0.94);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color: var(--ink);
}
.ult-core kbd{ font-size: 30px; line-height: .85; }
.ult-state{ font-size: 9px; color: var(--ink-dim); text-align:center; padding: 0 6px; }
.ult-btn.locked{ opacity: .85; cursor: not-allowed; }
.ult-btn.ready{ animation: ult-pulse 1s ease-in-out infinite; }
.ult-btn.ready .ult-state{ color: var(--el); font-weight:700; font-size: 11px; }
@keyframes ult-pulse{
  0%, 100%{ box-shadow: 0 0 0 0 transparent; }
  50%{ box-shadow: 0 0 22px 2px var(--el); }
}
@media (prefers-reduced-motion: reduce){
  .ult-btn.ready{ animation: none; box-shadow: 0 0 18px 2px var(--el); }
}
@media (max-width: 720px){
  .tech-bar{ bottom: 10px; gap: 6px; }
  .tech-slots{ gap: 4px; }
  .tech-btn{ width: 128px; padding: 4px 8px 4px 4px; }
  .tech-name{ font-size: 13px; }
  .tech-lvl{ display:none; }
  .ult-btn{ width: 64px; height: 64px; }
}

/* supertécnica en uso dentro de la pausa */
.sp-list li.sp-active{ outline: 1px solid var(--gold); }
.slot-key{
  display:inline-block; min-width:18px; padding:0 5px;
  border:1px solid rgba(234,255,243,0.4); border-radius:5px; text-align:center;
  font: inherit; font-size:11px; font-weight:700; color: var(--ink);
}

/* opciones especiales en la subida de nivel */
.upgrade-evolve{
  border-color: #b377e0;
  background: rgba(179,119,224,0.14);
  box-shadow: 0 0 16px rgba(179,119,224,0.35);
}
.tag-new{
  font-style: normal;
  font-size: 10px; font-weight:700;
  margin-left: 4px; padding: 1px 6px;
  border-radius: 20px;
  background: var(--gold); color:#2a1d00;
}

/* ---------- Barra del boss ---------- */
.boss-bar{
  --c: var(--coral);
  position:absolute;
  top: 62px; left: 50%;
  transform: translateX(-50%);
  width: min(420px, 44%);
  z-index: 5;
  pointer-events:none;
}
.boss-head{
  display:flex; align-items:baseline; gap:6px;
  margin-bottom: 3px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.boss-head #boss-emoji{ font-size: 18px; }
.boss-head b{ font-family: var(--title-font); font-size: 22px; line-height: 1; font-weight:400; letter-spacing:.03em; }
.boss-head #boss-team{ font-size: 11px; color: var(--ink-dim); margin-left:auto; }
.boss-hp{
  height: 10px;
  border-radius: 4px;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--c);
  overflow:hidden;
}
#boss-hp-fill{ height:100%; width:100%; background: var(--c); transition: width .1s linear; }
@media (max-width: 720px){
  .boss-bar{ top:auto; bottom: 120px; width: 80%; }
}

/* ---------- Cuaderno de talentos ---------- */
.talent-box{ border: 2px solid #b377e0; box-shadow: 0 0 30px rgba(179,119,224,0.35); }
.upgrade-talent{
  border-color: rgba(179,119,224,0.6);
  background: rgba(179,119,224,0.12);
}
div.upgrade-talent{ cursor: default; }
.inv-slot.talent{ border-color: #b377e0; background: rgba(60,30,80,0.75); }
.inv-sep{ width: 1px; height: 26px; margin: 2px 3px; background: rgba(234,255,243,0.25); align-self:center; }
div.upgrade-talent:hover{ border-color: rgba(179,119,224,0.6); }

/* talentos a la derecha de la R */
.talent-slots{ display:flex; flex-direction:column; gap:6px; }
.talent-slot{
  display:flex; align-items:center; gap:8px;
  width: 170px;
  padding: 6px 10px 6px 6px;
  border-radius: 10px;
  border: 1px solid rgba(179,119,224,0.7);
  background: rgba(40,20,55,0.82);
}
.talent-slot.empty{ border-style: dashed; border-color: rgba(234,255,243,0.3); background: rgba(8,24,16,0.88); opacity: .85; }
.talent-slot.max{ border-color: var(--gold); }
.talent-ico{ font-size: 20px; flex-shrink:0; width: 24px; text-align:center; }
.talent-info{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.talent-name{ font-size: 13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.talent-lvl{ font-size: 10px; color: #cfa8ef; }
.talent-slot.max .talent-lvl{ color: var(--gold); }
.talent-slot.empty .talent-lvl{ color: var(--ink-dim); }
@media (max-width: 720px){
  .talent-slot{ width: auto; padding: 4px; }
  .talent-info{ display:none; }
}

/* botón de rechazar cuaderno */
.talent-reject{
  display:flex; align-items:center; gap:12px;
  width: 100%;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px dashed rgba(255,107,94,0.55);
  background: rgba(255,107,94,0.06);
  color: var(--ink);
  font-family:'Inter', sans-serif;
  text-align:left;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease;
}
.talent-reject:hover, .talent-reject:focus-visible{
  border-style: solid;
  border-color: var(--coral);
  background: rgba(255,107,94,0.16);
  outline: none;
}
.reject-ico{
  flex-shrink:0;
  width: 30px; height: 30px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,107,94,0.2);
  color: var(--coral);
  font-weight:700; font-size: 15px;
}
.reject-text{ flex:1; display:flex; flex-direction:column; line-height:1.25; }
.reject-text b{ font-size: 14px; }
.reject-text small{ font-size: 12px; color: var(--ink-dim); }
.talent-reject kbd{
  font: 700 11px 'Inter', sans-serif;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid rgba(234,255,243,0.3);
  color: var(--ink-dim);
}

/* ---------- Mejoras permanentes ---------- */
#screen-upgrades{ justify-content:flex-start; overflow-y:auto; }
.meta-chars{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:14px; max-width: 960px; }
.meta-char{
  display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; cursor:pointer;
  background: rgba(8,24,16,0.7); border:1px solid rgba(234,255,243,0.2); color:var(--ink); font-family:'Inter',sans-serif;
}
.meta-char span{ font-size:20px; } .meta-char b{ font-size:13px; } .meta-char small{ font-size:10px; color:var(--ink-dim); }
.meta-char.active{ border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); background: rgba(242,183,5,0.12); }
.meta-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px;
  width:100%; max-width: 960px; margin-bottom: 18px;
}
@media (max-width: 900px){ .meta-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px){ .meta-grid{ grid-template-columns: 1fr; } }
.meta-card{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px;
  background: linear-gradient(180deg, #17324f, #12273f); border:1px solid rgba(160,190,230,0.25);
}
.meta-card.max{ border-color: rgba(242,183,5,0.6); }
.meta-ico{ font-size:28px; width:36px; text-align:center; flex-shrink:0; }
.meta-body{ flex:1; min-width:0; }
.meta-title{ line-height:1; margin-bottom:2px; }
.meta-title b{ font-family: var(--title-font); font-weight:400; font-size:20px; letter-spacing:.02em; }
.meta-per{ font-size:12px; color:#b8c9e6; margin: 0 0 6px; }
.meta-pips{ display:flex; gap:3px; flex-wrap:wrap; }
.meta-pips i{ width:14px; height:5px; border-radius:2px; background: rgba(255,255,255,0.15); }
.meta-pips i.on{ background: var(--gold); }
.meta-actions{ display:flex; flex-direction:column; gap:6px; align-items:stretch; flex-shrink:0; }
.meta-buy, .meta-pick{
  font-family:'Inter',sans-serif; font-weight:700; font-size:12px; line-height:1.2; padding:7px 10px; border-radius:8px; cursor:pointer;
  border:2px solid #cfd6dd; background:#3b4148; color:#e9eef2; min-width:84px;
}
.meta-buy:not(:disabled){ background: var(--gold); color:#2a1d00; border-color:#ffe08a; }
.meta-buy:disabled{ opacity:.75; cursor:default; }
.meta-pick{ background:#2c4a8a; border-color:#ffffff; }
.meta-picker-box{ max-width: 460px; max-height: 88vh; overflow-y:auto; }
.upgrade-option.picked{ border-color: var(--gold); background: rgba(242,183,5,0.12); }
.upgrade-option:disabled{ opacity:.45; cursor:default; }
.reroll-btn{
  margin-top:4px; padding:9px 12px; border-radius: var(--radius); cursor:pointer; font-family:'Inter',sans-serif; font-weight:600;
  background: rgba(94,200,242,0.12); color: var(--ink); border:1px dashed rgba(94,200,242,0.7);
}
.reroll-btn kbd{ font-family:'Teko',sans-serif; font-size:16px; padding:0 5px; border:1px solid rgba(234,255,243,0.35); border-radius:4px; }

/* objeto equipado en el inventario del HUD */
.inv-slot.relic-slot{ border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 8px rgba(242,183,5,0.5); background: rgba(242,183,5,0.15); }

/* ---- letra estilo Inazuma: blanca con borde negro (supertécnicas y textos importantes) ---- */
:root{
  --outline: -2px -2px 0 #000, 0 -2px 0 #000, 2px -2px 0 #000, 2px 0 0 #000,
             2px 2px 0 #000, 0 2px 0 #000, -2px 2px 0 #000, -2px 0 0 #000,
             0 4px 4px rgba(0,0,0,0.45);
  --outline-thin: -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000,
                  1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000,
                  0 2px 3px rgba(0,0,0,0.5);
}
h1, h2, h3, .logo, .showcase-name, .sp-name, .boss-head b, .meta-title b{
  color: #fff;
  text-shadow: var(--outline);
}
.logo span{ color: var(--gold); text-shadow: var(--outline); }
.tech-name, .upgrade-option b, .tech-btn.evolved .tech-name{
  color: #fff;
  text-shadow: var(--outline-thin);
}
.tech-btn.empty .tech-name{ color: #c9d6cd; }

/* subtítulos de las cartas: texto claro, algo más grande, con una línea de acento */
.upgrade-option > span{
  display:block;
  margin: 6px 0 0 2px;
  padding-left: 9px;
  border-left: 3px solid rgba(242,183,5,0.7);
  font-family:'Inter', sans-serif;
  font-size: 13px; font-weight: 600; line-height: 1.35;
  color: #f1f8f3;
  text-shadow: 0 1px 2px rgba(0,0,0,0.75);
}
.upgrade-option.upgrade-special > span{ border-left-color: rgba(94,200,242,0.85); }
.upgrade-option.upgrade-talent > span{ border-left-color: rgba(179,119,224,0.85); }

/* botón de cambiar cartas: azul oscuro estilo Inazuma Eleven */
.reroll-btn{
  background: linear-gradient(180deg, #1a3f9e 0%, #0d2464 55%, #0a1b4d 100%);
  border: 2px solid #4f8df0;
  color: #fff;
  font-weight: 700; letter-spacing: .02em;
  text-shadow: 0 1px 0 #000, 0 0 2px #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 3px 0 #050f2e, 0 0 10px rgba(30,80,200,0.35);
  transition: filter .12s ease, transform .08s ease;
}
.reroll-btn:hover{ filter: brightness(1.18); border-color: #f2b705; }
.reroll-btn:active{ transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 1px 0 #050f2e; }
.reroll-btn kbd{ color:#0a1b4d; background: #f2b705; border-color: #fff3c4; font-weight:700; }

/* texto bajo "¡Subida de nivel!": cinta azul oscuro con las teclas */
.levelup-hint{
  display: inline-flex; align-items: center; gap: 10px;
  margin: 6px auto 12px !important;
  padding: 5px 8px 5px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #16388f 0%, #0b1f57 100%);
  border: 1px solid #4f8df0;
  color: #fff !important;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000;
  box-shadow: 0 2px 0 #050f2e;
}
.hint-keys{ display: inline-flex; gap: 4px; }
.hint-keys kbd{
  min-width: 20px; padding: 1px 5px; border-radius: 6px;
  background: #f2b705; color: #0a1b4d; border: 1px solid #fff3c4;
  font-family: 'Teko', sans-serif; font-size: 16px; line-height: 1.1; text-shadow: none; text-align: center;
}

/* etiqueta "Nueva" y tecla del hueco en las cartas: sin el borde negro de la letra del título */
.upgrade-option b .tag-new{
  display: inline-block; vertical-align: 2px;
  margin-left: 6px; padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #16388f 0%, #0b1f57 100%);
  border: 1px solid #4f8df0;
  color: #fff;
  font-family: 'Inter', sans-serif; font-style: normal;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.2;
  text-shadow: none;
}
.upgrade-option b .slot-key{
  display: inline-block; vertical-align: 2px;
  margin-left: 4px; padding: 1px 6px;
  border-radius: 5px;
  background: #f2b705; color: #0a1b4d; border: 1px solid #fff3c4;
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 800; line-height: 1.3;
  text-shadow: none;
}

/* iconos de afinidad (hexágonos) */
.el-ico{ display:inline-block; vertical-align:-0.28em; line-height:0; flex:none; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)); }
.el-ico svg{ width:100%; height:100%; display:block; }
.el-node{ font-size: 0; display:inline-flex; opacity:.8; }
.el-node.own{ opacity:1; }
.el-node.ghost{ opacity:.3; }
.el-node.own .el-ico{ filter: drop-shadow(0 0 6px rgba(255,255,255,0.55)); }

/* "Elige una mejora" sin recuadro: texto limpio con las teclas */
.levelup-hint{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 13px; letter-spacing: .06em;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* ---- pausa: recuadros azules estilo Inazuma Eleven ---- */
.sp-boxes{ display:flex; flex-direction:column; gap:10px; }
.sp-box{
  margin-top: 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, #13306f 0%, #0c2052 100%);
  border: 2px solid #4f8df0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 3px 0 #050f2e;
  overflow: hidden;
}
.sp-boxes .sp-box{ margin-top: 0; }
.sp-boxes{ margin-top: 12px; }
.sp-box .sp-title{
  margin: 0;
  padding: 5px 12px 4px;
  border-bottom: 2px solid #4f8df0;
  background: linear-gradient(180deg, #2a62d6 0%, #163e9c 100%);
  color: #fff;
  text-shadow: var(--outline-thin);
  font-size: 18px;
  letter-spacing: .03em;
}
.sp-box .sp-list{ padding: 6px; }
.sp-box .sp-list li:nth-child(odd){ background: rgba(120,170,255,0.08); }
.sp-box .sp-lbl{ color: #c9dbff; }
.sp-box .sp-empty, .sp-box .sp-list > p{ color: #c9dbff; }

/* ---- arquetipo en la pausa ---- */
.sp-element.sp-box{ margin-top: 12px; padding: 0; border-left: none; font-size: inherit; }
.sp-arch{ display:flex; align-items:center; gap:10px; padding: 8px 12px; }
.sp-arch b{ font-family: var(--title-font); font-weight:400; font-size: 22px; letter-spacing:.03em; color:#fff; text-shadow: var(--outline-thin); }

/* ---- recuadros azules estilo Inazuma Eleven en el resto de menús ---- */
:root{
  --ie-bg: linear-gradient(180deg, #13306f 0%, #0c2052 100%);
  --ie-bg-hi: linear-gradient(180deg, #1a3f8f 0%, #10296a 100%);
  --ie-border: #4f8df0;
  --ie-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 3px 0 #050f2e;
}
/* menú principal */
.side-menu{ background: var(--ie-bg); border: 2px solid var(--ie-border); box-shadow: var(--ie-shadow); }
.menu-item{ background: rgba(120,170,255,0.08); border: 1px solid rgba(79,141,240,0.45); }
.menu-item small{ color: #c9dbff; }
.menu-item:not(.menu-disabled):hover{ background: rgba(242,183,5,0.12); border-color: var(--gold); }
/* cartas de jugadores (plantilla, selección y gacha) */
.char-card, .gacha-reveal{ background: var(--ie-bg); border: 2px solid var(--ie-border); box-shadow: var(--ie-shadow); }
.char-card.selected{ border-color: var(--gold); box-shadow: var(--ie-shadow), 0 0 12px rgba(242,183,5,0.45); }
/* mejoras permanentes */
.meta-card{ background: var(--ie-bg); border: 2px solid var(--ie-border); box-shadow: var(--ie-shadow); }
.meta-card.max{ border-color: var(--gold); }
/* cartas al subir de nivel, Hillman, talentos y objetos */
.upgrade-option{ background: var(--ie-bg); border: 2px solid var(--ie-border); box-shadow: var(--ie-shadow); }
.upgrade-option:hover{ border-color: var(--gold); }
.upgrade-special{ background: var(--ie-bg-hi); border-color: #7cb4ff; }
.upgrade-evolve{ background: linear-gradient(180deg, #3b2a8f 0%, #22175e 100%); border-color: #b377e0; }
.upgrade-talent, div.upgrade-talent:hover{ background: linear-gradient(180deg, #32237a 0%, #1d1450 100%); border-color: #b377e0; }
.upgrade-option.picked{ border-color: var(--gold); background: var(--ie-bg-hi); }
/* fin del partido: resumen en recuadro azul */
#gameover-stats{
  background: var(--ie-bg); border: 2px solid var(--ie-border); box-shadow: var(--ie-shadow);
  border-radius: 10px; padding: 12px 14px; color: #e3ecff !important; line-height: 1.7;
}

/* ---- letra Inazuma (blanca con borde negro) también en el menú principal y pantallas ---- */
.menu-text b{
  font-family: var(--title-font); font-weight: 400; font-size: 19px; letter-spacing: .04em;
  color: #fff; text-shadow: var(--outline-thin);
}
.menu-item.menu-disabled .menu-text b{ color: #b8c4d8; }
.menu-text small{ color: #c9dbff; }
.tagline{ font-family: var(--title-font); font-size: 16px; letter-spacing: .05em; color: #fff; text-shadow: var(--outline-thin); }
.char-name{ font-family: var(--title-font); font-weight: 400; font-size: 17px; letter-spacing: .03em; color: #fff; text-shadow: var(--outline-thin); }
.section-title{ text-shadow: var(--outline); }
.btn{ font-family: var(--title-font); font-weight: 400; font-size: 20px; letter-spacing: .05em; }
.btn-primary{ color: #fff; text-shadow: var(--outline-thin); }
.meta-char b, .meta-char{ font-family: var(--title-font); font-weight: 400; letter-spacing: .03em; }

/* botón Jugar del menú principal: naranja Inazuma Eleven */
#btn-play.menu-item{
  background: linear-gradient(180deg, #ffb02e 0%, #f37a0c 55%, #d85a00 100%);
  border: 2px solid #ffd27a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 3px 0 #8a3a00, 0 0 14px rgba(243,122,12,0.45);
}
#btn-play.menu-item .menu-text small{ color: #fff3dc; text-shadow: 0 1px 1px rgba(0,0,0,0.6); }
#btn-play.menu-item:not(.menu-disabled):hover{
  background: linear-gradient(180deg, #ffc04e 0%, #ff8a1c 55%, #e86600 100%);
  border-color: #fff;
}

/* botones de volver / abandonar: verde oscuro */
.btn-ghost{
  background: linear-gradient(180deg, #1f5a35 0%, #123d23 100%);
  color: #fff;
  border: 2px solid #3f8f5c;
  text-shadow: var(--outline-thin);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 3px 0 #08200f;
}
.btn-ghost:hover{ filter: brightness(1.15); border-color: #6fcf8f; }

/* logo del juego (imagen) */
@media (min-width: 761px){ .title-logo{ top: 64px; left: 22px; } }
.logo-img-wrap{ margin:0; line-height:0; }
.logo-img{ width: 220px; max-width: 32vw; height:auto; display:block; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.45)); }

/* fondo animado de césped en la portada */
.title-bg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events:none; }
.title-screen{ background: #1b4a2e; }

.field-decor{ display:none; }
/* el personaje queda justo en el centro del campo */
.showcase{ transform: translate(-50%, -115px); }

/* jugador de la portada con el estilo de los recuadros azules */
.showcase-box{
  background: radial-gradient(ellipse at 50% 35%, #1d4296 0%, #0c2052 72%);
  border: 3px solid var(--ie-border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 4px 0 #050f2e, 0 0 26px rgba(79,141,240,0.45);
}
.showcase-label{
  background: var(--ie-bg); border: 2px solid var(--ie-border); box-shadow: var(--ie-shadow);
  border-radius: 10px; padding: 6px 16px 8px;
}

/* destello del relámpago al pulsar Jugar */
.lightning-flash{
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: #fff;
  animation: lightning .9s ease-out forwards;
}
@keyframes lightning{
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  14%  { opacity: .25; }
  22%  { opacity: .95; background: #eaf4ff; }
  32%  { opacity: .5; }
  40%  { opacity: 1; background: #fff; }
  100% { opacity: 0; }
}

/* moneda arcade en píxeles (se genera en game.js) */
.coin-ico{ display:inline-block; width:1.05em; height:1.05em; vertical-align:-0.18em; background: var(--coin-img) center / contain no-repeat; image-rendering: pixelated; font-style: normal; }

.buff-ico{ width:18px; height:18px; image-rendering: pixelated; vertical-align: middle; }

/* letra arcade (píxel) para subtítulos y descripciones */
:root{ --sub-font: 'Pixelify Sans', 'Inter', sans-serif; }
.menu-text small, .upgrade-option > span, .upgrade-option span, .meta-per, .gacha-sub, .char-role, .tech-lvl,
.sp-lbl, .sp-empty, .talent-lvl, .boss-head #boss-team, .levelup-hint, .overlay-box p, .ult-state, .meta-pick,
#hillman-sub, #relic-sub, .reject-text small, .tagline{
  font-family: var(--sub-font) !important;
  letter-spacing: .02em;
}
.upgrade-option > span{ font-size: 14px; font-weight: 400; }
.menu-text small{ font-size: 12px; }
.meta-per{ font-size: 13px; }
/* iconos arcade de las mejoras */
.px-ico{ width: 36px; height: 36px; image-rendering: pixelated; display:block; margin: 0 auto; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.5)); }

/* casilla del objeto equipado, debajo de la barra de vida */
.hud-hpcol{ display:flex; flex-direction:column; gap: 5px; }
.hud-relic{
  width: 34px; height: 34px; border-radius: 7px;
  display:flex; align-items:center; justify-content:center; font-size: 20px;
  background: linear-gradient(180deg, #13306f 0%, #0c2052 100%);
  border: 2px solid var(--gold);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 2px 0 #050f2e, 0 0 8px rgba(242,183,5,0.4);
}
.hud-relic.empty{ border: 2px dashed rgba(201,219,255,0.45); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3); background: rgba(8,20,50,0.55); }

.px-mini{ image-rendering: pixelated; vertical-align: middle; display:inline-block; }
.sp-ico{ display:flex; align-items:center; justify-content:center; }

/* casilla del objeto: debajo de la vida y de las mejoras, más grande */
.hud-relic{ width: 48px; height: 48px; font-size: 28px; border-radius: 9px; margin: 6px 0 0 12px; position: relative; }
.hud-relic::after{ content:'OBJETO'; position:absolute; left: 54px; top: 50%; transform: translateY(-50%); font-family: var(--sub-font); font-size: 11px; color: #c9dbff; text-shadow: 0 1px 2px rgba(0,0,0,0.8); letter-spacing: .05em; white-space: nowrap; }

/* ---- tamaños más grandes: subida de nivel, barra Q/E/R y talentos ---- */
#levelup-overlay .overlay-box, #hillman-overlay .overlay-box, #talent-overlay .overlay-box, #relic-overlay .overlay-box{ max-width: 540px; padding: 30px; }
.upgrade-option{ padding: 14px 16px; }
.upgrade-option b{ font-size: 21px; display:block; line-height: 1.35; }
.upgrade-option b .px-mini{ vertical-align: -6px; margin-right: 2px; }
.upgrade-option > span{ font-size: 15px; }
.upgrade-option .px-mini{ flex: none; }
.tech-btn{ width: 250px; padding: 8px 12px 8px 8px; gap: 10px; }
.tech-btn kbd{ width: 30px; height: 30px; font-size: 22px; }
.tech-ico{ display:flex; align-items:center; gap: 2px; }
.tech-name{ font-size: 18px; }
.tech-lvl{ font-size: 12px; }
.ult-btn{ width: 98px; height: 98px; }
.ult-core kbd{ font-size: 40px; }
.ult-state{ font-size: 11px; }
.ult-btn.ready .ult-state{ font-size: 13px; }
.talent-slot{ width: 210px; padding: 8px 12px 8px 8px; gap: 10px; }
.talent-ico{ width: 28px; display:flex; align-items:center; justify-content:center; }
.talent-name{ font-size: 15px; }
.talent-lvl{ font-size: 12px; }
#sp-talent-logo{ display:inline-flex; vertical-align: -3px; }
/* nombre de la afinidad en la pausa con letra arcade */
.sp-arch b{ font-family: var(--sub-font) !important; font-weight: 600; font-size: 22px; letter-spacing: .04em; text-shadow: 0 2px 0 rgba(0,0,0,0.6); }

/* ---- colores de las cartas al subir de nivel ----
   mejoras normales: azul · supertécnicas: color de su afinidad · talentos: morado */
.upgrade-option.upgrade-special{ border-width: 2px; }
.upgrade-option.upgrade-special[data-el="fire"]{     background: linear-gradient(180deg, #7a2214 0%, #3d0c06 100%); border-color: #ff6b5e; }
.upgrade-option.upgrade-special[data-el="air"]{      background: linear-gradient(180deg, #2a78a8 0%, #12405f 100%); border-color: #9fdcff; }
.upgrade-option.upgrade-special[data-el="mountain"]{ background: linear-gradient(180deg, #7a4c22 0%, #3a220e 100%); border-color: #e8b26a; }
.upgrade-option.upgrade-special[data-el="forest"]{   background: linear-gradient(180deg, #24742f 0%, #0f3a16 100%); border-color: #86e06a; }
.upgrade-option.upgrade-special[data-el="neutral"]{  background: linear-gradient(180deg, #4a5262 0%, #23283a 100%); border-color: #c9d6cd; }
.upgrade-option.upgrade-special[data-el="book"]{     background: linear-gradient(180deg, #2c6a6a 0%, #133838 100%); border-color: #8fe0d8; }
.upgrade-option.upgrade-special > span{ border-left-color: rgba(255,255,255,0.7); }
/* evolución: mismo color de su afinidad, con borde dorado que brilla */
.upgrade-option.upgrade-evolve{ border-color: var(--gold) !important; box-shadow: var(--ie-shadow), 0 0 16px rgba(242,183,5,0.55); }
/* talentos: morado */
.upgrade-option.upgrade-talent{ background: linear-gradient(180deg, #5a2a9a 0%, #2c1356 100%) !important; border: 2px solid #c48af0 !important; }
.upgrade-option.upgrade-talent > span{ border-left-color: #e0c2ff; }
.upgrade-option:hover{ filter: brightness(1.12); }

.hud-relic{ width: 58px; height: 58px; }
.hud-relic::after{ left: 64px; }

/* ---- elegir Veto / Técnica inicial: todo en una pantalla, en casillas ---- */
.meta-picker-box{ max-width: 880px !important; width: 94%; max-height: none; overflow: visible; padding: 24px 26px; }
#meta-picker-options{ display:block; text-align:left; }
.mp-section{ font-family: var(--title-font); font-size: 20px; color:#fff; text-shadow: var(--outline-thin); margin: 10px 0 8px; }
.mp-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.mp-tile{
  position: relative; display:flex; flex-direction:column; align-items:center; gap: 4px;
  padding: 10px 8px 8px; border-radius: 10px; cursor: pointer; color:#fff; min-height: 118px;
  background: var(--ie-bg); border: 2px solid var(--ie-border); box-shadow: var(--ie-shadow);
  transition: transform .08s ease, filter .12s ease;
}
.mp-tile:hover{ filter: brightness(1.15); transform: translateY(-2px); }
.mp-tile .mp-ico{ height: 42px; display:flex; align-items:center; justify-content:center; }
.mp-tile .mp-ico .px-mini{ width: 48px; height: 48px; }
.mp-tile b{ font-family: var(--title-font); font-weight: 400; font-size: 15px; line-height: 1.1; text-align:center; text-shadow: var(--outline-thin); }
.mp-tile small{ font-family: var(--sub-font); font-size: 11px; color: #c9dbff; text-align:center; line-height: 1.2; }
.mp-tile.is-tech[data-el="fire"]{ background: linear-gradient(180deg, #7a2214, #3d0c06); border-color:#ff6b5e; }
.mp-tile.is-tech[data-el="air"]{ background: linear-gradient(180deg, #2a78a8, #12405f); border-color:#9fdcff; }
.mp-tile.is-tech[data-el="mountain"]{ background: linear-gradient(180deg, #7a4c22, #3a220e); border-color:#e8b26a; }
.mp-tile.is-tech[data-el="forest"]{ background: linear-gradient(180deg, #24742f, #0f3a16); border-color:#86e06a; }
.mp-tile.is-tech[data-el="neutral"]{ background: linear-gradient(180deg, #4a5262, #23283a); border-color:#c9d6cd; }
.mp-tile.is-tech[data-el="book"]{ background: linear-gradient(180deg, #2c6a6a, #133838); border-color:#8fe0d8; }
.mp-tile.picked{ border-color: var(--gold) !important; box-shadow: var(--ie-shadow), 0 0 14px rgba(242,183,5,0.6); }
.mp-tile.vetoed{ border-color: #ff4d4d !important; filter: grayscale(0.6) brightness(0.8); }
.mp-tile.vetoed .mp-ico{ position: relative; }
.mp-tile:disabled{ opacity: .4; cursor: not-allowed; transform: none; }
.mp-badge{
  position:absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center; font-style: normal; font-weight: 800; font-size: 14px;
  background: var(--gold); color: #0a1b4d; border: 2px solid #1b1d26;
}
.mp-tile.vetoed .mp-badge{ background: #ff4d4d; color: #fff; }
.mp-count{ color: var(--gold); }

.meta-picker-box{ max-width: 1000px !important; padding: 18px 22px; }
.mp-grid{ grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.mp-tile{ min-height: 0; padding: 8px 6px; }
.mp-tile b{ font-size: 14px; }
.mp-tile small{ font-size: 10px; }
.mp-section{ margin: 6px 0 6px; }
#meta-picker-sub{ margin-bottom: 6px; }

/* nuevas afinidades: Dragón (azul oscuro) y Celestial (amarillo) */
.upgrade-option.upgrade-special[data-el="dragon"], .mp-tile.is-tech[data-el="dragon"]{ background: linear-gradient(180deg, #2a3592 0%, #0f1448 100%); border-color: #a24de0; }
.upgrade-option.upgrade-special[data-el="celestial"], .mp-tile.is-tech[data-el="celestial"]{ background: linear-gradient(180deg, #b8901a 0%, #5e4508 100%); border-color: #fff2a0; }

/* plantilla: 12 jugadores en 2 filas de 6, sin barra de desplazamiento */
.card-grid{ max-width: 920px; max-height: none; overflow: visible; grid-template-columns: repeat(6, minmax(120px, 1fr)); }
@media (max-width: 900px){ .card-grid{ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } }

/* Dragón: azul índigo eléctrico con borde azul lavanda, para no confundirse con el azul de las mejoras normales */
.upgrade-option.upgrade-special[data-el="dragon"], .mp-tile.is-tech[data-el="dragon"]{
  background: linear-gradient(180deg, #3a34d6 0%, #120e5a 100%);
  border-color: #8fa0ff;
  box-shadow: inset 0 0 0 1px rgba(143,160,255,0.3), 0 3px 0 #08062e, 0 0 12px rgba(90,110,255,0.45);
}
.upgrade-option.upgrade-special[data-el="dragon"] > span{ border-left-color: #b39cff; }

/* Dragón: morado (por encima de lo anterior) */
.upgrade-option.upgrade-special[data-el="dragon"], .mp-tile.is-tech[data-el="dragon"]{
  background: linear-gradient(180deg, #6a2fc4 0%, #2a0f63 100%) !important;
  border-color: #c99bff !important;
  box-shadow: inset 0 0 0 1px rgba(201,155,255,0.3), 0 3px 0 #12052e, 0 0 12px rgba(170,100,255,0.45);
}
.upgrade-option.upgrade-special[data-el="dragon"] > span{ border-left-color: #d9b8ff; }
/* Talento: morado muy oscuro, casi negro */
.upgrade-option.upgrade-talent{ background: linear-gradient(180deg, #2a1240 0%, #0c0514 100%) !important; border: 2px solid #8a4fc4 !important; box-shadow: inset 0 0 0 1px rgba(138,79,196,0.25), 0 3px 0 #000; }
.upgrade-option.upgrade-talent > span{ border-left-color: #b98ae6; }

/* indicador del temporal bajo el tiempo */
.hud-weather{
  display:block; margin-top: 2px; padding: 2px 10px; border-radius: 999px;
  font-family: var(--sub-font); font-size: 13px; color: #fff; text-shadow: 0 1px 2px #000;
  background: rgba(8,20,40,0.75); border: 2px solid var(--c, #fff); box-shadow: 0 0 10px var(--c, transparent);
  white-space: nowrap;
}
.hud-weather b{ color: var(--c, #fff); margin-left: 4px; }
.hud-weather.hidden{ display:none; }

/* ---- iconos arcade que sustituyen a los emojis ---- */
img.px-emo{ width:1.15em; height:1.15em; vertical-align:-0.22em; image-rendering:pixelated; display:inline-block; margin:0 .06em; pointer-events:none; }

/* iconos del menú principal: mismo estilo y tamaño que los de Mejoras */
.menu-ico{ width: 36px; display:flex; align-items:center; justify-content:center; }
.menu-ico .px-ico{ width: 34px; height: 34px; }
.icon-btn .px-ico{ width: 22px; height: 22px; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.5)); }

/* cuenta atrás del duelo contra el boss (1:30) */
.hud-timer.boss-clock{ color:#ffd21f; }
.hud-timer.boss-clock-low{ color:#ff4a3a; animation: bossClockPulse .5s steps(2) infinite; }
@keyframes bossClockPulse{ 50%{ opacity:.45; } }

/* ---- ajustes ---- */
#settings-overlay{ z-index: 60; }
.settings-box{ max-width: 560px; width: 92%; padding: 26px; text-align: left; }
.settings-box h3{ text-align: center; }
.settings-box .sp-box{ margin-top: 12px; }
.set-row{ display: grid; grid-template-columns: 90px 1fr 46px; align-items: center; gap: 12px; padding: 8px 4px; font-weight: 700; }
.set-row b{ text-align: right; font-variant-numeric: tabular-nums; }
.set-row input[type=range]{ width: 100%; accent-color: #f2b705; cursor: pointer; }
.set-check{ grid-template-columns: 24px 1fr; font-weight: 600; cursor: pointer; }
.set-check input{ width: 18px; height: 18px; accent-color: #f2b705; }
.keys-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14px; }
.keys-list li{ display: grid; grid-template-columns: 240px 1fr; align-items: center; gap: 10px; }
.keys-list kbd{ display: inline-block; min-width: 22px; padding: 2px 6px; margin: 0 2px 2px 0; border-radius: 4px; background: #1b2a4a; border: 1px solid #5d7fc0; box-shadow: 0 2px 0 #0c1428; font: 700 12px Inter, sans-serif; text-align: center; color: #fff; }
@media (max-width: 560px){ .keys-list li{ grid-template-columns: 1fr; } }
/* los botones que funcionan (Ajustes) llevan el cursor de mano; los "Próximamente" siguen bloqueados */
.icon-btn:not(:disabled), .menu-item:not(:disabled){ cursor: pointer; }
.icon-btn:not(:disabled):hover{ border-color: #f2b705; background: rgba(20,48,32,0.85); transform: translateY(-1px); }
.sp-passive{ margin: 8px 2px 0; font-size: 13px; line-height: 1.35; color: #eafff3; }
.sp-passive b{ color: #ffd21f; }

/* pasiva de afinidad: solo al pasar el ratón por el nombre / logo */
.sp-arch-tip{ position: relative; cursor: help; width: fit-content; }
.sp-passive-tip{
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 20; width: 240px;
  padding: 8px 10px; font-size: 13px; line-height: 1.35; color: #eafff3;
  background: #0d2416; border: 2px solid #3f8f5c; border-radius: 6px;
  box-shadow: 0 3px 0 #08200f; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .12s;
}
.sp-passive-tip b{ font-family: inherit !important; font-size: 13px !important; color: #ffd21f; text-shadow: none; letter-spacing: 0; }
.sp-arch-tip:hover .sp-passive-tip{ opacity: 1; visibility: visible; }

/* botones de la pausa: Ajustes azul, Abandonar rojo */
.btn-ghost.btn-blue{
  background: linear-gradient(180deg, #2f7fd8 0%, #1a4f9a 100%);
  border-color: #6fb4ff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 3px 0 #0b2550;
}
.btn-ghost.btn-blue:hover{ border-color: #bfe0ff; }
.btn-ghost.btn-red{
  background: linear-gradient(180deg, #d83a2f 0%, #9a1a14 100%);
  border-color: #ff7b6f; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 3px 0 #4a0a06;
}
.btn-ghost.btn-red:hover{ border-color: #ffc0b8; }
.sp-element.sp-box{ overflow: visible; position: relative; z-index: 5; }

/* =====================================================================
   PANTALLA DE JUGADORES (estilo Pokédex de PokéSurvivor, por equipos)
   ===================================================================== */
:root{ --uncommon: #5fcf7a; }
.rarity-uncommon{ background: var(--uncommon); color:#062612; }
.char-face{ image-rendering: pixelated; display:block; }
.char-emoji .char-face, .hud-portrait .char-face, .sp-portrait .char-face{ margin: 0 auto; }
.showcase-emoji .char-face{ margin: 0 auto; }
.field-critter .char-face{ filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.keep-emo .char-face{ display:inline-block; vertical-align:middle; }
.face-fallback{ display:inline-block; line-height:1; }

#screen-roster{ padding: 14px; }
.rs-panel{
  width: min(1180px, 100%); height: 100%; display:flex; flex-direction:column; gap:10px;
  background: var(--ie-bg); border: 2px solid var(--ie-border); box-shadow: var(--ie-shadow);
  border-radius: 14px; padding: 14px 16px; min-height:0;
}
.rs-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rs-heading{ font-size: 32px; color:#fff; text-shadow: var(--outline-thin); }
.rs-heading small{ font-family:'Inter',sans-serif; font-size:14px; color:#c9dbff; text-shadow:none; margin-left:6px; }
.rs-back{ margin:0 !important; padding: 6px 16px; }

.rs-teams{ display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; flex-shrink:0; }
.rs-tab{
  flex: 0 0 auto; display:flex; flex-direction:column; align-items:center; gap:1px; min-width: 76px;
  padding: 5px 8px; border-radius: 9px; cursor:pointer; color:#fff;
  background: rgba(120,170,255,0.08); border: 2px solid rgba(79,141,240,0.45);
}
.rs-tab b{ font-family: var(--title-font); font-weight:400; font-size:14px; letter-spacing:.03em; white-space:nowrap; text-shadow: var(--outline-thin); }
.rs-tab small{ font-size: 10px; color:#c9dbff; }
.rs-tab:hover{ border-color: #7cb4ff; }
.rs-tab.active{ border-color: var(--gold); background: rgba(242,183,5,0.14); }
.rs-tab-all{ font-size: 22px; line-height:30px; }
.rs-crest{ image-rendering: pixelated; object-fit: contain; vertical-align: middle; }

.rs-body{ flex:1; display:flex; gap:14px; min-height:0; }
.rs-left{ flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; min-height:0; }
.rs-toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.rs-input{
  background: rgba(8,20,50,.7); color:#fff; border:1px solid rgba(124,180,255,.5); border-radius:8px;
  padding: 7px 10px; font-family:'Inter',sans-serif; font-size:13px;
}
#rs-search{ flex: 1 1 200px; min-width: 160px; }
.rs-select{ cursor:pointer; }
.rs-shown{ font-size:12px; color:#c9dbff; margin-left:auto; }
.rs-chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.rs-inline{ display:inline-flex; }
.rs-label{ font-size:12px; color:#c9dbff; }
.rs-chip{
  display:inline-flex; align-items:center; gap:5px; padding: 4px 11px; border-radius: 999px; cursor:pointer;
  background: rgba(120,170,255,0.08); border: 1.5px solid rgba(79,141,240,0.5); color:#e3ecff;
  font-family:'Inter',sans-serif; font-weight:600; font-size:12px;
}
.rs-chip:hover{ border-color:#7cb4ff; }
.rs-chip.active{ border-color: var(--gold); color:#fff; background: rgba(242,183,5,0.14); }
.rs-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.4); }

.rs-grid{
  flex:1; overflow-y:auto; min-height:0; display:grid; gap:8px; align-content:start;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); padding: 2px 4px 6px 2px;
}
.rs-card{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer;
  padding: 18px 4px 7px; border-radius: 10px; color:#fff;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.1)), #0f2660;
  border: 2px solid rgba(79,141,240,.45); box-shadow: inset 0 -3px 0 var(--team, #4f8df0);
}
.rs-card:hover{ border-color:#7cb4ff; transform: translateY(-1px); }
.rs-card.picked{ border-color: var(--gold); box-shadow: inset 0 -3px 0 var(--team, #4f8df0), 0 0 10px rgba(242,183,5,.45); }
.rs-no{ position:absolute; top:4px; left:7px; font-size:10px; color:#c9dbff; font-weight:700; }
.rs-star{ position:absolute; top:2px; right:6px; color: var(--gold); font-size:13px; }
.rs-lock{ position:absolute; top:3px; right:6px; font-size:11px; }
.rs-face{ height:56px; display:flex; align-items:center; justify-content:center; }
.rs-card.locked .char-face, .rs-portrait.locked .char-face{ filter: brightness(0) opacity(.55); }
.rs-card.locked .rs-name{ color:#9fb3d9; }
.rs-name{ font-family: var(--title-font); font-weight:400; font-size:14px; letter-spacing:.02em; text-align:center; line-height:1.05; text-shadow: var(--outline-thin); min-height: 30px; display:flex; align-items:center; }
.rs-meta{ display:flex; align-items:center; gap:4px; font-size:10px; color:#c9dbff; font-weight:700; }
.rs-empty{ color:#c9dbff; text-align:center; grid-column: 1 / -1; margin-top: 30px; }

.rs-detail{
  width: 310px; flex-shrink:0; overflow-y:auto; display:flex; flex-direction:column; align-items:center; gap:6px;
  background: rgba(6,16,44,.55); border: 2px solid rgba(79,141,240,.45); border-radius: 12px; padding: 14px;
}
.rs-portrait{
  width: 190px; height: 190px; border-radius: 12px; display:flex; align-items:flex-end; justify-content:center;
  border: 3px solid var(--team, #4f8df0); overflow:hidden; flex-shrink:0;
  background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--team, #4f8df0) 35%, transparent), #081633 72%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--team, #4f8df0) 45%, transparent);
}
.rs-sub{ font-size:12px; color:#c9dbff; display:flex; align-items:center; gap:4px; margin-top:4px; }
.rs-title{ font-size: 28px; color:#fff; text-shadow: var(--outline-thin); line-height:1; text-align:center; }
.rs-nick{ font-size:12px; color:#c9dbff; margin-top:-2px; }
.rs-tags{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.rs-tag{ padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight:700; background: rgba(120,170,255,.14); border:1px solid rgba(124,180,255,.45); }
.rs-stats{ width:100%; display:flex; flex-direction:column; gap:5px; margin-top:6px; }
.rs-stat{ display:grid; grid-template-columns: 86px 1fr 50px; align-items:center; gap:8px; font-size:12px; font-weight:600; }
.rs-stat b{ text-align:right; font-variant-numeric: tabular-nums; }
.rs-bar{ height: 9px; border-radius: 6px; background: rgba(255,255,255,.1); overflow:hidden; }
.rs-bar i{ display:block; height:100%; border-radius:6px; }
.rs-portrait .rs-big{ width:210px !important; height:210px !important; max-width:none; margin-bottom:-10px; flex-shrink:0; }
.rs-action{ width:100%; margin-top: 6px; }

@media (max-width: 820px){
  .rs-body{ flex-direction: column; }
  .rs-detail{ width:100%; max-height: 46%; order:-1; }
}

/* ===================== PANTALLA DE MEJORAS (lista de jugadores + tarjetas grandes) ===================== */
.mt-panel{ display:flex; gap:14px; width:min(1180px, 96vw); height: min(640px, calc(100vh - 210px)); min-height: 380px; margin-bottom: 12px; }
.mt-side{ width: 270px; flex-shrink:0; display:flex; flex-direction:column; gap:8px;
  background: rgba(6,16,44,.55); border: 2px solid rgba(79,141,240,.45); border-radius: 12px; padding: 10px; }
.mt-search{ width:100%; padding: 9px 12px; border-radius: 9px; border: 2px solid rgba(124,180,255,.5); background:#0b1a3d; color:#fff; font: inherit; font-size:14px; }
.mt-search:focus{ outline:none; border-color: var(--gold); }
.mt-list{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:5px; padding-right:2px; }
.mt-pl{ position:relative; display:flex; align-items:center; gap:9px; text-align:left; padding: 5px 10px 5px 6px; cursor:pointer; color:#fff;
  border-radius: 9px; border: 2px solid transparent; border-left: 5px solid var(--team, #4f8df0); background: rgba(120,170,255,.08); font: inherit; }
.mt-pl:hover{ background: rgba(120,170,255,.18); }
.mt-pl.active{ border-color: var(--gold); border-left-color: var(--gold); background: rgba(242,183,5,.16); }
.mt-pl .char-face{ width:40px; height:40px; flex-shrink:0; background: rgba(0,0,0,.25); border-radius: 7px; }
.mt-pl span{ flex:1; min-width:0; display:flex; flex-direction:column; }
.mt-pl b{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mt-pl small{ font-size:11px; color:#b8c9e6; display:flex; align-items:center; gap:3px; white-space:nowrap; overflow:hidden; }
.mt-pl em{ font-style:normal; font-weight:800; font-size:13px; min-width:28px; text-align:center; padding: 2px 6px; border-radius: 999px; background: rgba(242,183,5,.2); color: var(--gold); }
.mt-star{ font-style:normal; color: var(--gold); font-size: 13px; }
.mt-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
.mt-head{ display:flex; align-items:center; gap:14px; padding: 10px 14px; border-radius: 12px;
  border: 2px solid var(--team, #4f8df0); background: linear-gradient(90deg, color-mix(in srgb, var(--team, #4f8df0) 30%, #081633), #081633 70%); }
.mt-face{ width:84px; height:84px; flex-shrink:0; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; border-radius: 10px; background: rgba(0,0,0,.3); }
.mt-face .char-face{ width:96px !important; height:96px !important; max-width:none; margin-bottom:-5px; }
.mt-who{ flex:1; min-width:0; }
.mt-who h3{ font-size: 28px; line-height:1; margin: 2px 0 6px; color:#fff; text-shadow: var(--outline-thin); }
.mt-who small{ font-size:12px; color:#c9dbff; display:flex; align-items:center; gap:4px; }
.mt-prog{ height:8px; border-radius: 6px; background: rgba(255,255,255,.12); overflow:hidden; margin-bottom: 3px; max-width: 360px; }
.mt-prog i{ display:block; height:100%; background: var(--gold); border-radius: 6px; }
.mt-grid{ flex:1; overflow-y:auto; display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap:10px; align-content:start; padding-right: 2px; }
.mt-card{ display:flex; flex-direction:column; gap:8px; padding: 12px; border-radius: 12px;
  background: var(--ie-bg, #0d1f4a); border: 2px solid var(--ie-border, rgba(124,180,255,.45)); }
.mt-card.can{ border-color: rgba(242,183,5,.75); }
.mt-card.max{ border-color: #3fd84a; background: rgba(63,216,74,.08); }
.mt-top{ display:flex; align-items:center; gap:10px; }
.mt-ico{ width:42px; height:42px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:30px; }
.mt-ico .px-ico{ width:40px; height:40px; image-rendering: pixelated; }
.mt-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.mt-txt b{ font-family: var(--title-font); font-weight:400; font-size: 20px; line-height:1.05; letter-spacing:.02em; }
.mt-txt small{ font-size: 12px; color:#b8c9e6; line-height:1.25; }
.mt-lv{ font-size: 24px; font-weight: 800; color:#fff; }
.mt-lv small{ font-size: 13px; color:#b8c9e6; }
.mt-card .meta-pips i{ flex:1; min-width:8px; }
.mt-buy, .mt-pick{ width:100%; padding: 10px; border-radius: 9px; font: inherit; font-weight: 800; font-size: 15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:5px; border: 2px solid rgba(255,255,255,.35); color:#fff; }
.mt-buy:not(:disabled){ background: var(--gold); color:#2a1d00; border-color:#ffe08a; }
.mt-buy:not(:disabled):hover{ filter: brightness(1.1); transform: translateY(-1px); }
.mt-buy:disabled{ background: rgba(255,255,255,.08); cursor: default; opacity:.8; }
.mt-card.max .mt-buy{ background: rgba(63,216,74,.25); border-color:#3fd84a; opacity:1; }
.mt-pick{ background:#2c4a8a; font-size: 13px; padding: 7px; }
@media (max-width: 820px){
  .mt-panel{ flex-direction:column; height:auto; }
  .mt-side{ width:100%; max-height: 240px; }
  .mt-grid{ overflow: visible; }
}

/* =====================================================================
   PORTADA: jugador centrado y recuadro del color de su rareza
   ===================================================================== */
.showcase-box{
  --rar: #4f8df0;
  overflow: hidden;
  border: 4px solid var(--rar) !important;
  border-radius: 6px !important;
  background:
    radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--rar) 38%, #0c2052) 0%, #081633 75%) !important;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.55), inset 0 0 0 4px color-mix(in srgb, var(--rar) 45%, transparent),
              0 5px 0 #040b22, 0 0 28px color-mix(in srgb, var(--rar) 55%, transparent) !important;
}
.showcase-box[data-rarity="legendary"]::after{
  content:''; position:absolute; inset:-40%; pointer-events:none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.28) 50%, transparent 58%);
  animation: sc-shine 3.2s ease-in-out infinite;
}
@keyframes sc-shine{ 0%{ transform: translateX(-60%); } 60%,100%{ transform: translateX(60%); } }
.showcase-emoji{ display:flex; align-items:center; justify-content:center; line-height:0; font-size:0; position:relative; z-index:1; }
.showcase-emoji .showcase-face{ width:150px !important; height:150px !important; }
.showcase-shadow{ bottom: 26px; width: 120px; height: 18px; }
.showcase-tags{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:6px; }
.showcase-tags .char-element, .showcase-tags .char-rarity{
  margin: 0 !important; height: 26px; display:inline-flex; align-items:center; justify-content:center; gap:4px;
  padding: 0 12px; font-size: 13px; line-height: 1; box-sizing: border-box; vertical-align: middle;
}
.showcase-tags .char-element img, .showcase-tags .char-element svg{ display:block; }
.showcase-tags .char-rarity{ border: 1px solid rgba(0,0,0,.35); }

/* =====================================================================
   ESTILO PIXEL INAZUMA ELEVEN
   Recuadros con esquinas en escalón, bordes dobles (azul oscuro + azul claro),
   cabeceras amarillas como en los menús de los juegos de la DS.
   ===================================================================== */
:root{
  --px-dark: #071233;
  --px-mid: #1a3a8a;
  --px-light: #6fb0ff;
  --px-panel: repeating-linear-gradient(180deg, #14307a 0 4px, #112a6c 4px 8px);
  --px-cut: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
  --px-cut-s: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}
/* ---- ventanas de elección: subida de nivel, objeto, talento, Hillman ---- */
#levelup-overlay .overlay-box, #talent-overlay .overlay-box, #relic-overlay .overlay-box, #hillman-overlay .overlay-box{
  position: relative;
  border-radius: 0 !important;
  border: none !important;
  clip-path: var(--px-cut);
  background: var(--px-panel) !important;
  box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px var(--px-light), inset 0 0 0 10px var(--px-dark) !important;
  padding: 26px 30px 28px !important;
  image-rendering: pixelated;
}
#levelup-overlay .overlay-box h3, #talent-overlay .overlay-box h3, #relic-overlay .overlay-box h3, #hillman-overlay .overlay-box h3{
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 22px 6px;
  color: #fff;
  background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%);
  clip-path: var(--px-cut-s);
  box-shadow: inset 0 0 0 3px #5a3200;
  text-shadow: var(--outline);
  letter-spacing: .04em;
}
#levelup-overlay .overlay-box p, #talent-overlay .overlay-box p, #relic-overlay .overlay-box p, #hillman-overlay .overlay-box p{ color:#cfe2ff; }
.upgrade-option{
  position: relative;
  border-radius: 0 !important;
  border: none !important;
  clip-path: var(--px-cut-s);
  background: linear-gradient(180deg, #2456b8 0 50%, #1c469c 50% 100%) !important;
  box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #8cc4ff, inset 0 -8px 0 rgba(0,0,0,.18) !important;
  padding: 14px 18px !important;
  transition: transform .08s steps(2), filter .08s;
}
.upgrade-option:hover, .upgrade-option:focus-visible{
  transform: translateX(6px);
  box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #ffe14a, inset 0 -8px 0 rgba(0,0,0,.18) !important;
  outline: none;
}
.upgrade-option:hover::before, .upgrade-option:focus-visible::before{      /* cursor de selección amarillo */
  content:''; position:absolute; left: 6px; top: 50%; width: 0; height: 0; transform: translateY(-50%);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 9px solid #ffe14a;
  filter: drop-shadow(1px 0 0 #5a3200);
}
.upgrade-option b{ text-shadow: var(--outline-thin); color:#fff; }
.upgrade-option > span{ color:#dbe9ff !important; border-left: 3px solid #ffe14a !important; }
.upgrade-option.upgrade-special{ box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #ffe14a, inset 0 -8px 0 rgba(0,0,0,.18) !important; }
.upgrade-option.upgrade-talent{ background: linear-gradient(180deg, #5a2aa8 0 50%, #48208c 50% 100%) !important; }
.upgrade-option.upgrade-talent > span{ border-left-color: #e0b0ff !important; }
.upgrade-key{
  border-radius: 0 !important; border: none !important;
  background: #ffe14a; color: #2a1800 !important; font-weight: 800;
  box-shadow: inset 0 0 0 2px #5a3200; padding: 2px 7px !important;
}
.reroll-btn, .talent-reject{
  border-radius: 0 !important; clip-path: var(--px-cut-s);
  box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #8cc4ff !important;
  border: none !important;
}
.reroll-btn{ background: linear-gradient(180deg, #2b8a3e 0 50%, #22702f 50% 100%) !important; }
.talent-reject{ background: linear-gradient(180deg, #8a2b2b 0 50%, #6e2222 50% 100%) !important; }

/* ---- HUD de supertécnicas (Q / E) como los paneles de técnicas de Inazuma ---- */
.tech-btn{
  border-radius: 0 !important; border: none !important;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  background: linear-gradient(180deg, #f4f8ff 0 46%, #cfdcf4 46% 100%) !important;
  color: #0b1a44 !important;
  box-shadow: inset 6px 0 0 var(--el, #8fa3c8), inset 0 0 0 3px var(--px-dark) !important;
  padding: 6px 22px 6px 12px !important;
  opacity: .82;
}
.tech-btn .tech-name{ color: #0b1a44 !important; text-shadow: none !important; font-size: 17px; }
.tech-btn .tech-lvl{ color: #3a4a74 !important; }
.tech-btn kbd{
  border-radius: 0 !important; border: none !important;
  background: #0b1a44 !important; color: #ffe14a !important;
  box-shadow: inset 0 0 0 2px #ffe14a;
}
.tech-btn.active{
  opacity: 1;
  background: linear-gradient(180deg, #fff7c8 0 46%, #ffe070 46% 100%) !important;
  box-shadow: inset 8px 0 0 var(--el, #f2b705), inset 0 0 0 3px var(--px-dark) !important;
  transform: translateX(6px);
}
.tech-btn.active kbd{ background: #ffe14a !important; color: #0b1a44 !important; box-shadow: inset 0 0 0 2px #0b1a44; }
.tech-btn.empty{ background: repeating-linear-gradient(135deg, #1a2f63 0 6px, #14264f 6px 12px) !important; color:#9fb4dd !important; }
.tech-btn.empty .tech-name, .tech-btn.empty .tech-lvl{ color: #9fb4dd !important; }
.tech-btn.evolved .tech-name{ color: #b0170d !important; }

/* ---- botón de la R: anillo de carga en escalones y, cargada, el balón azul con el rayo ---- */
.ult-btn{
  border-radius: 0 !important;
  clip-path: polygon(30% 0, 70% 0, 70% 6%, 85% 6%, 85% 15%, 94% 15%, 94% 30%, 100% 30%, 100% 70%, 94% 70%, 94% 85%, 85% 85%, 85% 94%, 70% 94%, 70% 100%, 30% 100%, 30% 94%, 15% 94%, 15% 85%, 6% 85%, 6% 70%, 0 70%, 0 30%, 6% 30%, 6% 15%, 15% 15%, 15% 6%, 30% 6%);
  background: conic-gradient(var(--el) var(--fill, 0%), #0b1a44 0) !important;
  padding: 6px !important;
}
.ult-core{
  position: relative; overflow: hidden;
  border-radius: 0 !important;
  clip-path: polygon(30% 0, 70% 0, 70% 6%, 85% 6%, 85% 15%, 94% 15%, 94% 30%, 100% 30%, 100% 70%, 94% 70%, 94% 85%, 85% 85%, 85% 94%, 70% 94%, 70% 100%, 30% 100%, 30% 94%, 15% 94%, 15% 85%, 6% 85%, 6% 70%, 0 70%, 0 30%, 6% 30%, 6% 15%, 15% 15%, 15% 6%, 30% 6%);
  background: repeating-linear-gradient(180deg, #14307a 0 4px, #112a6c 4px 8px) !important;
}
.ult-core kbd{ position: relative; z-index: 2; color:#ffe14a; text-shadow: var(--outline-thin); }
.ult-state{ position: relative; z-index: 2; color: #cfe2ff !important; text-shadow: var(--outline-thin); }
.ult-ball{
  position: absolute; inset: 6%; width: 88%; height: 88%;
  image-rendering: pixelated; opacity: 0; transform: scale(.4);
  transition: opacity .15s steps(3), transform .15s steps(3);
  z-index: 1; pointer-events: none;
}
.ult-btn.ready .ult-ball{ opacity: 1; transform: scale(1); animation: ult-ball 0.9s steps(4) infinite; }
.ult-btn.ready .ult-core kbd{ font-size: 26px; margin-top: 52%; }
.ult-btn.ready .ult-state{ display:none; }
.ult-btn.ready{ animation: ult-pulse-px .6s steps(2) infinite !important; }
@keyframes ult-ball{ 0%,100%{ transform: scale(1) rotate(0deg); } 25%{ transform: scale(1.06) rotate(-6deg); } 75%{ transform: scale(1.06) rotate(6deg); } }
@keyframes ult-pulse-px{ 0%,100%{ filter: drop-shadow(0 0 0 transparent); } 50%{ filter: drop-shadow(0 0 10px #4fb0ff) brightness(1.15); } }

/* ---- huecos de talento del HUD con el mismo estilo ---- */
.talent-slot{
  border-radius: 0 !important; border: none !important; clip-path: var(--px-cut-s);
  background: linear-gradient(180deg, #4a2392 0 50%, #3a1b76 50% 100%) !important;
  box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #c69cff !important;
}
.talent-slot.empty{ background: repeating-linear-gradient(135deg, #2a1b4f 0 6px, #22163f 6px 12px) !important; box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #6a5a99 !important; }

/* =====================================================================
   SOBRES DE FICHAJES
   ===================================================================== */
#screen-gacha{ justify-content:flex-start; overflow-y:auto; padding-top: 22px; }
.pack-row{ display:flex; gap: 46px; justify-content:center; flex-wrap:wrap; margin: 6px 0 18px; }
.pack-col{ display:flex; flex-direction:column; align-items:center; gap: 10px; width: 260px; }
.pack-col .btn{ width: 100%; }
.pack-info{ text-align:center; display:flex; flex-direction:column; gap:3px; }
.pack-info > b{ font-family: var(--title-font); font-weight:400; font-size: 22px; letter-spacing:.03em; text-shadow: var(--outline-thin); }
.pack-info small{ color:#cfe2ff; font-size: 12px; line-height:1.35; }
.pack-tk{ font-size: 14px; display:inline-flex; align-items:center; justify-content:center; gap:4px; }
.pack-tk img, .tk-ico{ width: 22px; height: 22px; image-rendering: pixelated; vertical-align: middle; }
.btn-purple{ background: linear-gradient(180deg, #9a55e0, #6a2fb0) !important; border-color:#d3b0ff !important; color:#fff !important; }
.btn:disabled{ opacity: .45; cursor: default; filter: grayscale(.4); }
.pack-msg{ background:#3a0f14; border: 2px solid #ff6b5e; padding: 8px 14px; margin-bottom: 12px; clip-path: var(--px-cut-s); font-size: 14px; }

/* el sobre */
.pk-pack{
  --c1:#ffe14a; --c2:#f2a705; --c3:#b86e00; --ink:#3a2200;
  position: relative; width: 170px; height: 236px; overflow: hidden;
  clip-path: var(--px-cut);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 6px, transparent 6px 14px),
    linear-gradient(180deg, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
  box-shadow: inset 0 0 0 4px #1b1200, inset 0 0 0 7px rgba(255,255,255,.55), inset 0 14px 0 rgba(0,0,0,.12);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 8px;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,.35));
  transition: transform .12s steps(2);
}
.pack-col .pk-pack:hover{ transform: translateY(-6px) rotate(-2deg); }
.pk-purple{ --c1:#d3a6ff; --c2:#8a3fe0; --c3:#4a1690; --ink:#1d0640; }
.pk-pack::before{                                   /* tira de arriba (zona de rasgar) */
  content:''; position:absolute; left:0; right:0; top: 18px; height: 6px;
  background: repeating-linear-gradient(90deg, #1b1200 0 6px, transparent 6px 12px); opacity:.45;
}
.pk-shine{ position:absolute; inset:-30%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%); animation: sc-shine 2.8s ease-in-out infinite; pointer-events:none; }
.pk-logo{
  width: 74px; height: 74px; position: relative; z-index:1;
  background: url(assets/ui/r_ball.png) center/contain no-repeat; image-rendering: pixelated;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.4));
}
.pk-title{ position:relative; z-index:1; text-align:center; font-family: var(--title-font); color:#fff; font-size: 18px; line-height: 1; text-shadow: var(--outline); letter-spacing:.06em; }
.pk-title b{ font-weight:400; font-size: 26px; color: #fff; }
.pk-count{ position:relative; z-index:1; font-size: 12px; font-weight: 800; color: var(--ink); background: rgba(255,255,255,.75); padding: 2px 10px; clip-path: var(--px-cut-s); }

/* pantalla de apertura */
.pack-open{
  position: fixed; inset: 0; z-index: 60; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 16px;
  background: radial-gradient(circle at 50% 45%, rgba(255,214,74,.35), rgba(3,8,26,.96) 60%);
  cursor: pointer; user-select: none;
}
.pack-open.pk-purple{ background: radial-gradient(circle at 50% 45%, rgba(170,90,255,.42), rgba(6,2,22,.97) 60%); }
.pack-open.flash::after{ content:''; position:absolute; inset:0; background:#fff; animation: po-flash .5s ease-out forwards; pointer-events:none; }
@keyframes po-flash{ from{ opacity:.85; } to{ opacity:0; } }
.po-pack{ width: 220px; height: 306px; transform-origin: 50% 90%; }
.po-pack.shake{ animation: po-shake .5s steps(4) infinite; }
@keyframes po-shake{ 0%,100%{ transform: rotate(0); } 25%{ transform: rotate(-4deg) translateX(-4px); } 75%{ transform: rotate(4deg) translateX(4px); } }
.pk-tear{ position:absolute; left:0; right:0; top:0; height: 22px; background: inherit; z-index: 3; }
.po-pack.torn{ animation: po-down .65s steps(6) forwards; }
.po-pack.torn .pk-tear{ animation: po-tear .45s steps(5) forwards; background: linear-gradient(180deg, #fff, #ffe14a); box-shadow: inset 0 0 0 3px #1b1200; }
@keyframes po-tear{ to{ transform: translate(70px, -120px) rotate(28deg); opacity: 0; } }
@keyframes po-down{ 0%{ transform: none; } 40%{ transform: scale(1.06); filter: brightness(1.6) drop-shadow(0 0 30px #fff); } 100%{ transform: translateY(140px) scale(.9); opacity: 0; } }
.po-hint{ color:#fff; font-family: var(--title-font); font-size: 22px; letter-spacing:.04em; text-shadow: var(--outline); animation: po-blink 1s steps(2) infinite; }
@keyframes po-blink{ 50%{ opacity: .45; } }
.po-count{ font-family: var(--title-font); font-size: 26px; color:#fff; text-shadow: var(--outline); }
.po-stage{ display:flex; align-items:center; gap: 34px; }
.po-left{ width: 90px; display:flex; flex-direction:column; align-items:center; gap:6px; color:#cfe2ff; font-size: 12px; }
.po-stack{ position: relative; width: 70px; height: 96px; }
.po-stack i{ position:absolute; inset:0; background: linear-gradient(180deg, #2456b8, #10296a); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 3px #071233, inset 0 0 0 5px #8cc4ff; }
.po-stack i:nth-child(2){ transform: translate(4px, -4px); } .po-stack i:nth-child(3){ transform: translate(8px, -8px); }
.po-stack i:nth-child(4){ transform: translate(12px, -12px); } .po-stack i:nth-child(5){ transform: translate(16px, -16px); }
.po-flip{ animation: po-flip .45s steps(6); }
.po-flip.big .pk-card{ animation: po-glow 1.2s ease-in-out infinite; }
@keyframes po-flip{ 0%{ transform: rotateY(90deg) scale(.7); } 100%{ transform: none; } }
@keyframes po-glow{ 50%{ filter: drop-shadow(0 0 22px var(--rar)) brightness(1.12); } }
.po-title{ font-size: 34px; text-shadow: var(--outline); }
.po-sum{ color:#e8f0ff; font-size: 15px; display:flex; align-items:center; gap:4px; }
.po-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap: 10px; max-width: 980px; max-height: 62vh; overflow-y:auto; padding: 6px; }
.po-grid .pk-card{ width: 132px; padding: 6px 6px 8px; }
.po-grid .pk-face .char-face{ width: 76px !important; height: 76px !important; }
.po-grid .pk-name{ font-size: 15px; }
.po-close{ cursor: pointer; }

/* carta de jugador */
.pk-card{
  --rar:#8fa39a;
  position: relative; width: 220px; padding: 10px 10px 12px; text-align:center;
  clip-path: var(--px-cut);
  background:
    radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--rar) 45%, #10296a) 0%, #0a1a48 70%);
  box-shadow: inset 0 0 0 4px #050c26, inset 0 0 0 8px var(--rar), inset 0 0 0 10px #050c26;
  display:flex; flex-direction:column; align-items:center; gap: 4px; color:#fff;
}
.pk-card.rar-legendary{ background: radial-gradient(ellipse at 50% 35%, #fff3b0 0%, #d99a00 38%, #5a3a00 85%); }
.pk-card.rar-epic{ background: radial-gradient(ellipse at 50% 35%, #e8ccff 0%, #8a3fe0 40%, #2a0d5a 88%); }
.pk-card-top{ width:100%; display:flex; justify-content:space-between; align-items:center; padding: 6px 8px 0; }
.pk-rar{ font-size: 11px; font-weight: 800; color:#071233; background: var(--rar); padding: 2px 8px; clip-path: var(--px-cut-s); }
.pk-crest{ width: 24px; height: 24px; image-rendering: pixelated; }
.pk-face .char-face{ filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
.pk-name{ font-family: var(--title-font); font-size: 22px; line-height: 1; text-shadow: var(--outline-thin); letter-spacing:.03em; }
.pk-meta{ font-size: 12px; color:#e6efff; display:flex; align-items:center; gap:4px; }
.pk-tag{ font-size: 11px; font-weight: 800; padding: 2px 8px; clip-path: var(--px-cut-s); display:flex; align-items:center; gap:3px; margin-bottom: 4px; }
.pk-tag.new{ background:#ffe14a; color:#3a2200; }
.pk-tag.dupe{ background: rgba(0,0,0,.45); color:#e6efff; }
.ticket-pill .tk-ico{ width: 20px; height: 20px; }
.topbar .ticket-pill{ margin-left: 8px; margin-right: 0; }
.topbar .ticket-pill.ticket-epic{ margin-right: auto; }
.pack-open{ background: radial-gradient(circle at 50% 45%, rgba(255,214,74,.38), transparent 62%), #04081c !important; }
.pack-open.pk-purple{ background: radial-gradient(circle at 50% 45%, rgba(170,90,255,.45), transparent 62%), #06021a !important; }
.upgrade-key{ min-width: 24px; font-size: 14px !important; line-height: 1.2; text-align:center; }
/* número de cada opción (1, 2, 3…): cuadrado amarillo con el número en grande y fácil de leer */
.upgrade-option .upgrade-key, .upgrade-key{
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 26px; height: 26px; min-width: 26px; padding: 0 !important; margin-right: 8px;
  font-family: 'Inter', 'Arial Black', Arial, sans-serif !important; font-style: normal !important;
  font-weight: 900 !important; font-size: 16px !important; line-height: 1 !important; letter-spacing: 0 !important;
  text-shadow: none !important; transform: none !important;
  color: #0b1a44 !important; background: #ffe14a !important;
  box-shadow: inset 0 0 0 2px #0b1a44, 2px 2px 0 rgba(0,0,0,.45) !important;
  vertical-align: 2px;
}

/* cartas de supertécnica al subir de nivel: del color de su afinidad (estilo pixel); talentos en morado */
.overlay .upgrade-option.upgrade-option[data-el="fire"]{ background: linear-gradient(180deg, #d8402a 0 50%, #b02a18 50% 100%) !important;
  box-shadow: inset 0 0 0 3px #071233, inset 0 0 0 5px #ffb0a0, inset 0 -8px 0 rgba(0,0,0,.18) !important; }
.overlay .upgrade-option.upgrade-option[data-el="fire"] > span{ border-left-color: #ffb0a0 !important; color: #ffffff !important; }
.overlay .upgrade-option.upgrade-option[data-el="air"]{ background: linear-gradient(180deg, #5cc4f0 0 50%, #3aa6d8 50% 100%) !important;
  box-shadow: inset 0 0 0 3px #071233, inset 0 0 0 5px #e0f6ff, inset 0 -8px 0 rgba(0,0,0,.18) !important; }
.overlay .upgrade-option.upgrade-option[data-el="air"] > span{ border-left-color: #e0f6ff !important; color: #0b1a44 !important; }
.overlay .upgrade-option.upgrade-option[data-el="air"] > span{ font-weight: 600; }
.overlay .upgrade-option.upgrade-option[data-el="forest"]{ background: linear-gradient(180deg, #3aa83e 0 50%, #26882c 50% 100%) !important;
  box-shadow: inset 0 0 0 3px #071233, inset 0 0 0 5px #c4f5b0, inset 0 -8px 0 rgba(0,0,0,.18) !important; }
.overlay .upgrade-option.upgrade-option[data-el="forest"] > span{ border-left-color: #c4f5b0 !important; color: #ffffff !important; }
.overlay .upgrade-option.upgrade-option[data-el="celestial"]{ background: linear-gradient(180deg, #f0c626 0 50%, #d4a80c 50% 100%) !important;
  box-shadow: inset 0 0 0 3px #071233, inset 0 0 0 5px #fff6c0, inset 0 -8px 0 rgba(0,0,0,.18) !important; }
.overlay .upgrade-option.upgrade-option[data-el="celestial"] > span{ border-left-color: #fff6c0 !important; color: #0b1a44 !important; }
.overlay .upgrade-option.upgrade-option[data-el="celestial"] > span{ font-weight: 600; }
.overlay .upgrade-option.upgrade-option[data-el="mountain"]{ background: linear-gradient(180deg, #9a6232 0 50%, #7c4c22 50% 100%) !important;
  box-shadow: inset 0 0 0 3px #071233, inset 0 0 0 5px #f0c89a, inset 0 -8px 0 rgba(0,0,0,.18) !important; }
.overlay .upgrade-option.upgrade-option[data-el="mountain"] > span{ border-left-color: #f0c89a !important; color: #ffffff !important; }
.overlay .upgrade-option.upgrade-option[data-el="dragon"]{ background: linear-gradient(180deg, #1f3a9e 0 50%, #132a7a 50% 100%) !important;
  box-shadow: inset 0 0 0 3px #071233, inset 0 0 0 5px #9fb8ff, inset 0 -8px 0 rgba(0,0,0,.18) !important; }
.overlay .upgrade-option.upgrade-option[data-el="dragon"] > span{ border-left-color: #9fb8ff !important; color: #ffffff !important; }
.overlay .upgrade-option.upgrade-option[data-el="neutral"]{ background: linear-gradient(180deg, #6a7488 0 50%, #545e72 50% 100%) !important;
  box-shadow: inset 0 0 0 3px #071233, inset 0 0 0 5px #e2e8f0, inset 0 -8px 0 rgba(0,0,0,.18) !important; }
.overlay .upgrade-option.upgrade-option[data-el="neutral"] > span{ border-left-color: #e2e8f0 !important; color: #ffffff !important; }
.overlay .upgrade-option.upgrade-option[data-el="book"]{ background: linear-gradient(180deg, #2c8a86 0 50%, #1e6e6a 50% 100%) !important;
  box-shadow: inset 0 0 0 3px #071233, inset 0 0 0 5px #b0f0e8, inset 0 -8px 0 rgba(0,0,0,.18) !important; }
.overlay .upgrade-option.upgrade-option[data-el="book"] > span{ border-left-color: #b0f0e8 !important; color: #ffffff !important; }
.overlay .upgrade-option.upgrade-option[data-el]:hover, .overlay .upgrade-option.upgrade-option[data-el]:focus-visible{ box-shadow: inset 0 0 0 3px #071233, inset 0 0 0 5px #ffe14a, inset 0 -8px 0 rgba(0,0,0,.18) !important; }
.upgrade-option.upgrade-talent{ background: linear-gradient(180deg, #8a3fe0 0 50%, #6e2cc0 50% 100%) !important;
  box-shadow: inset 0 0 0 3px #071233, inset 0 0 0 5px #e0b0ff, inset 0 -8px 0 rgba(0,0,0,.18) !important; }
.upgrade-option.upgrade-talent:hover{ box-shadow: inset 0 0 0 3px #071233, inset 0 0 0 5px #ffe14a, inset 0 -8px 0 rgba(0,0,0,.18) !important; }
.upgrade-option.upgrade-talent > span{ border-left-color: #f0d8ff !important; color:#fff !important; }
.overlay .upgrade-option[data-el="air"] > span, .overlay .upgrade-option[data-el="celestial"] > span{ text-shadow: none !important; }
.overlay .upgrade-option.upgrade-talent{ border: none !important; outline: none !important; }

/* =====================================================================
   TIENDA DE SOBRES (estilo pixel Inazuma)
   ===================================================================== */
.shop-screen{ justify-content:flex-start !important; overflow-y:auto; padding: 18px 16px 24px !important;
  background: repeating-linear-gradient(0deg, #0d2160 0 6px, #0b1c52 6px 12px) !important; }
.shop-head{ display:flex; flex-direction:column; align-items:center; gap: 10px; }
.shop-sign{
  display:flex; align-items:center; gap: 14px; padding: 8px 26px 10px;
  background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%);
  clip-path: var(--px-cut); box-shadow: inset 0 0 0 4px #5a3200, inset 0 0 0 7px #fff1a0;
}
.shop-sign h2{ margin:0; font-size: 34px; color:#fff; text-shadow: var(--outline); letter-spacing:.04em; }
.shop-sign-ico{ width: 40px; height: 40px; image-rendering: pixelated; }
.shop-wallet{ display:flex; gap: 10px; }
.shop-wallet span{
  display:inline-flex; align-items:center; gap: 6px; padding: 5px 14px 5px 8px; font-size: 16px;
  background: #071233; clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 2px #6fb0ff;
}
.shop-wallet img{ width: 22px; height: 22px; image-rendering: pixelated; }
.shop-wallet b{ font-family: 'Inter', sans-serif; font-weight: 900; color:#fff; }
.shop-sub{ color:#cfe2ff; font-size: 13px; margin: 8px 0 14px; text-align:center; }
.shop-shelf{ display:flex; gap: 28px; justify-content:center; flex-wrap:wrap; margin-bottom: 16px; }
.shop-slot{
  --acc:#ffe14a; --acc2:#f2a705;
  width: 290px; padding: 16px 18px 18px; display:flex; flex-direction:column; align-items:center; gap: 8px;
  background: var(--px-panel); clip-path: var(--px-cut);
  box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px var(--acc), inset 0 0 0 10px var(--px-dark);
}
.slot-purple{ --acc:#c48bff; --acc2:#8a3fe0; }
.shop-tag{
  font-family: var(--title-font); font-size: 24px; color:#fff; text-shadow: var(--outline); letter-spacing:.04em;
  padding: 2px 18px 4px; background: linear-gradient(180deg, var(--acc) 0 50%, var(--acc2) 50% 100%);
  clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 3px #071233;
}
.shop-pedestal{ position:relative; padding: 8px 0 18px; }
.shop-pedestal::after{                                  /* peana */
  content:''; position:absolute; left: 50%; bottom: 4px; width: 190px; height: 16px; transform: translateX(-50%);
  background: linear-gradient(180deg, #6fb0ff 0 4px, #1a3a8a 4px 100%); clip-path: var(--px-cut-s);
  box-shadow: inset 0 0 0 2px #071233;
}
.shop-pedestal .pk-pack{ animation: shop-float 2.4s steps(6) infinite; }
@keyframes shop-float{ 50%{ transform: translateY(-6px); } }
.shop-cards{ font-family: 'Inter', sans-serif; font-weight: 900; font-size: 15px; color:#071233; background: var(--acc); padding: 2px 12px; clip-path: var(--px-cut-s); }
.shop-odds{ list-style:none; margin: 2px 0; padding: 8px 10px; width: 100%; background: rgba(4,10,34,.65); clip-path: var(--px-cut-s); display:flex; flex-direction:column; gap: 3px; }
.shop-odds li{ display:flex; align-items:center; gap: 8px; font-size: 12px; color:#e6efff; }
.shop-odds li i{ width: 10px; height: 10px; box-shadow: inset 0 0 0 1px #071233; }
.shop-odds li span{ flex:1; }
.shop-odds li b{ font-family:'Inter',sans-serif; font-weight: 900; }
.shop-odds .odds-last{ color: var(--acc); font-weight: 800; justify-content:center; margin-top: 2px; }
.shop-own{ font-size: 14px; display:flex; align-items:center; gap: 5px; }
.shop-own img{ width: 22px; height: 22px; image-rendering: pixelated; }
.shop-btn{
  width: 100%; padding: 10px 12px; border: none; cursor: pointer; display:flex; align-items:center; justify-content:center; gap: 6px;
  font-family: var(--title-font); font-size: 20px; letter-spacing:.03em; color:#fff; text-shadow: var(--outline-thin);
  clip-path: var(--px-cut-s); transition: transform .08s steps(2), filter .08s;
}
.shop-btn img{ width: 22px; height: 22px; image-rendering: pixelated; }
.shop-btn-y{ background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%); box-shadow: inset 0 0 0 3px #5a3200, inset 0 -6px 0 rgba(0,0,0,.15); }
.shop-btn-p{ background: linear-gradient(180deg, #b77cff 0 50%, #8a3fe0 50% 100%); box-shadow: inset 0 0 0 3px #2a0d5a, inset 0 -6px 0 rgba(0,0,0,.15); }
.shop-btn-c{ background: linear-gradient(180deg, #2b8a3e 0 50%, #22702f 50% 100%); box-shadow: inset 0 0 0 3px #0b2a12, inset 0 -6px 0 rgba(0,0,0,.15); }
.shop-btn:not(:disabled):hover{ transform: translateY(-2px); filter: brightness(1.12); }
.shop-btn:disabled{ filter: grayscale(.7) brightness(.7); cursor: default; }
.shop-shelf{ align-items: stretch; } .shop-slot .shop-own{ margin-top: auto; }

/* ---- sobres: logo de Inazuma Survivor y corte con el ratón ---- */
.pk-band{
  position: relative; z-index: 1; width: 118%; margin: 6px 0 2px; padding: 6px 0 4px;
  display:flex; justify-content:center; transform: rotate(-6deg);
  background: linear-gradient(180deg, #0b1a44 0 50%, #071233 50% 100%);
  box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.4);
}
.pk-logo-img{ width: 76%; height: auto; display:block; filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); pointer-events:none; user-select:none; }
.pk-pack .pk-logo{ width: 46px; height: 46px; }
.pk-pack .pk-title b{ font-size: 24px; }
.po-pack .pk-logo{ width: 60px; height: 60px; }
.po-pack .pk-title b{ font-size: 30px; }
.pk-cutzone{ position:absolute; left: 0; right: 0; top: 0; height: 38%; z-index: 5; cursor: crosshair; touch-action: none; }
.pk-cutguide{ position:absolute; left: 6px; right: 6px; top: 24px; height: 0; border-top: 3px dashed rgba(255,255,255,.9);
  filter: drop-shadow(0 1px 0 #1b1200); animation: po-blink 1s steps(2) infinite; }
.pk-cutline{ position:absolute; left: 0; width: 0; top: 21px; height: 8px; background: #fff;
  box-shadow: 0 0 10px 3px #fff8b0, 0 0 22px 6px rgba(255,225,74,.7); }
.pk-scissors{ position:absolute; top: 6px; left: 50%; transform: translateX(-50%) rotate(90deg); font-size: 30px; color:#fff;
  text-shadow: var(--outline); pointer-events:none; transition: left .03s linear; }
.po-pack.cutting{ transform: scale(1.03); }
.po-pack.torn .pk-cutzone{ display:none; }
.reroll-btn kbd{ margin-right: 4px; }

/* =====================================================================
   PAUSA / ESTADÍSTICAS (Esc) con estilo pixel Inazuma Eleven
   ===================================================================== */
#pause-overlay{ background: repeating-linear-gradient(0deg, rgba(4,10,34,.86) 0 4px, rgba(4,10,34,.8) 4px 8px) !important; }
#pause-overlay .pause-box{
  border-radius: 0 !important; border: none !important;
  background: var(--px-panel) !important;
  box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px var(--px-light), inset 0 0 0 10px var(--px-dark), 8px 8px 0 rgba(0,0,0,.45) !important;
  padding: 22px 24px 20px !important; max-width: 700px !important;
}
/* cabecera: ficha del jugador como en la pantalla de estado de los juegos */
#pause-overlay .sp-head{
  position: relative; padding: 10px 14px; gap: 14px;
  background: linear-gradient(180deg, #f4f8ff 0 48%, #cfdcf4 48% 100%);
  clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 3px var(--px-dark), inset 6px 0 0 #ffe14a;
}
#pause-overlay .sp-portrait{ border-radius: 0 !important; clip-path: var(--px-cut-s); background: #0b1a44 !important; }
#pause-overlay .sp-name{ color: #0b1a44; text-shadow: none; font-size: 28px; }
#pause-overlay .sp-role{ color: #3a4a74 !important; font-weight: 700; }
#pause-overlay .sp-level{
  border-radius: 0 !important; border: none !important; clip-path: var(--px-cut-s);
  background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%) !important; color: #2a1800 !important;
  box-shadow: inset 0 0 0 3px #5a3200 !important; font-family: 'Inter', sans-serif; font-weight: 900; padding: 6px 12px;
}
/* secciones */
#pause-overlay .sp-box{
  border-radius: 0 !important; border: none !important;
  background: rgba(4,10,34,.55) !important;
  box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #3f6fc8 !important;
  padding: 0 0 6px;
}
#pause-overlay .sp-box .sp-title{
  margin: 0 0 4px; padding: 5px 12px 6px; border-radius: 0 !important; border: none !important;
  background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%) !important;
  color: #fff !important; text-shadow: var(--outline-thin) !important;
  box-shadow: inset 0 0 0 3px var(--px-dark) !important;
  font-family: var(--title-font); font-weight: 400; font-size: 19px; letter-spacing: .04em;
  display:flex; align-items:center; gap: 6px;
}
#pause-overlay .sp-box .sp-list{ padding: 4px 8px; }
#pause-overlay .sp-list li{ border-radius: 0 !important; padding: 5px 8px; }
#pause-overlay .sp-box .sp-list li:nth-child(odd){ background: rgba(111,176,255,.12) !important; }
#pause-overlay .sp-box .sp-list li:nth-child(even){ background: rgba(0,0,0,.18) !important; }
#pause-overlay .sp-lbl{ color: #dbe9ff !important; }
#pause-overlay .sp-val{ font-family: 'Inter', sans-serif; font-weight: 900; color: #fff; }
#pause-overlay .sp-val.up{ color: #8bf28f; }
#pause-overlay .sp-lvl{ border-radius: 0 !important; clip-path: var(--px-cut-s); background: #0b1a44 !important; color: #ffe14a !important; font-weight: 900; box-shadow: inset 0 0 0 2px #ffe14a; }
#pause-overlay .sp-lvl.max{ background: #ffe14a !important; color: #2a1800 !important; box-shadow: inset 0 0 0 2px #5a3200; }
#pause-overlay .sp-list li.sp-active{ outline: none !important; box-shadow: inset 4px 0 0 #ffe14a, inset 0 0 0 2px #ffe14a; }
#pause-overlay .sp-element.sp-box{ box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px var(--c, #3f6fc8) !important; }
/* botones de la pausa */
#pause-overlay .pause-actions .btn{
  border-radius: 0 !important; border: none !important; clip-path: var(--px-cut-s);
  font-family: var(--title-font); font-weight: 400; font-size: 20px; letter-spacing: .03em; text-shadow: var(--outline-thin);
}
#pause-overlay #btn-resume{ background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%) !important; color: #fff !important; box-shadow: inset 0 0 0 3px #5a3200 !important; }
#pause-overlay #btn-settings-pause{ background: linear-gradient(180deg, #2b62c8 0 50%, #1d4aa0 50% 100%) !important; color: #fff !important; box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #8cc4ff !important; }
#pause-overlay #btn-quit{ background: linear-gradient(180deg, #c8322b 0 50%, #a0241e 50% 100%) !important; color: #fff !important; box-shadow: inset 0 0 0 3px #3a0806, inset 0 0 0 5px #ffb0a0 !important; }
#pause-overlay .pause-actions .btn:hover{ filter: brightness(1.12); transform: translateY(-2px); }

/* ---- sobres: sin la bola de la R y animaciones fluidas ---- */
.pk-pack .pk-logo{ display: none !important; }
.pk-pack{ transition: transform .25s cubic-bezier(.2,.8,.3,1.2), filter .25s ease; }
.pack-col .pk-pack:hover, .shop-pedestal .pk-pack:hover{ transform: translateY(-8px) rotate(-2deg) scale(1.03); filter: drop-shadow(0 12px 0 rgba(0,0,0,.3)) brightness(1.06); }
.shop-pedestal .pk-pack{ animation: shop-float-s 3s ease-in-out infinite !important; }
@keyframes shop-float-s{ 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-8px) rotate(-1deg); } }
.shop-pedestal .pk-pack:hover{ animation-play-state: paused !important; }
.pk-shine{ animation: pk-shine-s 3.2s ease-in-out infinite !important; }
@keyframes pk-shine-s{ 0%{ transform: translateX(-70%); } 55%,100%{ transform: translateX(70%); } }
.po-pack{ animation: po-in .45s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes po-in{ from{ transform: translateY(40px) scale(.85); opacity: 0; } to{ transform: none; opacity: 1; } }
.po-pack.shake{ animation: po-in .45s cubic-bezier(.2,.9,.3,1.25) both, po-wobble 1.6s ease-in-out .45s infinite !important; }
@keyframes po-wobble{ 0%,100%{ transform: rotate(0); } 25%{ transform: rotate(-2.5deg) translateY(-3px); } 75%{ transform: rotate(2.5deg) translateY(-3px); } }
.po-pack.cutting{ animation: none !important; transform: scale(1.04); transition: transform .2s ease; }
.po-pack.torn{ animation: po-down-s .8s cubic-bezier(.5,0,.6,1) forwards !important; }
@keyframes po-down-s{ 0%{ transform: scale(1.04); } 30%{ transform: scale(1.1); filter: brightness(1.5) drop-shadow(0 0 30px #fff); } 100%{ transform: translateY(160px) scale(.9); opacity: 0; filter: brightness(1); } }
.po-pack.torn .pk-tear{ animation: po-tear-s .6s cubic-bezier(.3,.7,.4,1) forwards !important; }
@keyframes po-tear-s{ to{ transform: translate(90px, -150px) rotate(32deg); opacity: 0; } }
.pk-cutline{ transition: width .06s linear, left .06s linear; }
.pk-scissors{ transition: left .05s linear; }
.po-flip{ animation: po-flip-s .55s cubic-bezier(.2,.9,.3,1.2) both !important; perspective: 800px; }
@keyframes po-flip-s{ 0%{ transform: rotateY(90deg) scale(.75); opacity: .3; } 60%{ transform: rotateY(-8deg) scale(1.04); opacity: 1; } 100%{ transform: none; } }
.po-hint{ animation: po-breathe 1.6s ease-in-out infinite !important; }
.pk-cutguide{ animation: po-breathe 1.2s ease-in-out infinite !important; }
@keyframes po-breathe{ 0%,100%{ opacity: 1; } 50%{ opacity: .45; } }
.po-grid .pk-card{ animation: po-pop .4s cubic-bezier(.2,.9,.3,1.3) both; }
.po-grid .pk-card:nth-child(2){ animation-delay: .05s } .po-grid .pk-card:nth-child(3){ animation-delay: .1s }
.po-grid .pk-card:nth-child(4){ animation-delay: .15s } .po-grid .pk-card:nth-child(5){ animation-delay: .2s }
.po-grid .pk-card:nth-child(6){ animation-delay: .25s } .po-grid .pk-card:nth-child(7){ animation-delay: .3s }
@keyframes po-pop{ from{ transform: scale(.6) translateY(20px); opacity: 0; } to{ transform: none; opacity: 1; } }
.shop-btn{ transition: transform .15s ease, filter .15s ease !important; }

/* ---- tercer sobre: azul (3 jugadores) ---- */
.pk-blue{ --c1:#9fdcff; --c2:#3a8ee8; --c3:#1a4aa8; --ink:#06204a; }
.slot-blue{ --acc:#7cc4ff; --acc2:#2f7fd6; }
.shop-btn-b{ background: linear-gradient(180deg, #5cb4ff 0 50%, #2f7fd6 50% 100%); box-shadow: inset 0 0 0 3px #06204a, inset 0 -6px 0 rgba(0,0,0,.15); }
.pack-open.pk-blue{ background: radial-gradient(circle at 50% 45%, rgba(90,170,255,.45), transparent 62%), #030a1e !important; }
.po-pack.torn.pk-blue .pk-tear{ background: linear-gradient(180deg, #fff, #9fdcff); }
.shop-shelf{ gap: 20px !important; }
.shop-slot{ width: 270px !important; }
@media (max-width: 900px){ .shop-slot{ width: 100% !important; max-width: 320px; } }

/* =====================================================================
   CROMÁTICOS
   ===================================================================== */
@keyframes holo{ 0%{ background-position: 0% 50%; } 100%{ background-position: 200% 50%; } }
.pk-card.shiny{
  box-shadow: inset 0 0 0 4px #050c26, inset 0 0 0 10px #050c26 !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 45%, rgba(255,255,255,0) 60%),
    radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--rar) 55%, #ffffff) 0%, color-mix(in srgb, var(--rar) 60%, #10296a) 45%, #0a1a48 90%) !important;
}
.pk-card.shiny::before{                        /* borde arcoíris que se mueve */
  content:''; position:absolute; inset: 0; pointer-events:none; z-index: 0;
  padding: 5px; clip-path: var(--px-cut);
  background: linear-gradient(90deg, #ff4d6d, #ffd84a, #6dff8a, #4fc8ff, #b77cff, #ff4d6d); background-size: 200% 100%;
  animation: holo 2.4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.pk-card.shiny > *{ position: relative; z-index: 1; }
.pk-shiny-tag{
  font-family: 'Inter', sans-serif; font-weight: 900; font-size: 11px; letter-spacing: .08em; color: #2a0d5a;
  padding: 2px 10px; clip-path: var(--px-cut-s);
  background: linear-gradient(90deg, #ff9ab0, #ffe68a, #a8ffb8, #a8e4ff, #d8b8ff); background-size: 200% 100%; animation: holo 2s linear infinite;
}
.pk-card.shiny .pk-face .char-face{ filter: drop-shadow(0 0 6px #fff) drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
.pk-tag.new:has(+ *), .pk-card.shiny .pk-tag.new{ background: linear-gradient(90deg, #ffe14a, #fff6c0, #ffe14a); }

/* jugadores: insignia de cromático y botones de aspecto */
.rs-shiny{ position:absolute; top: 4px; left: 50%; transform: translateX(-50%); font-size: 13px; color: #c8b8ff; text-shadow: 0 0 4px #fff; z-index: 2; }
.rs-shiny.on{ color: #fff36a; text-shadow: 0 0 6px #ffe14a, 0 0 2px #000; }
.char-name .rs-shiny{ position: static; transform: none; }
.rs-look{ display:flex; gap: 6px; width: 100%; justify-content:center; margin: 2px 0; }
.rs-look-btn{
  flex: 1; padding: 6px 8px; border: none; cursor: pointer; color: #fff; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 13px;
  clip-path: var(--px-cut-s); background: #1a3a8a; box-shadow: inset 0 0 0 2px #071233, inset 0 0 0 4px #4f7fd6;
}
.rs-look-btn.on{ background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%); color:#2a1800; box-shadow: inset 0 0 0 2px #5a3200; }
.rs-look-btn.shiny.on{ background: linear-gradient(90deg, #ff9ab0, #ffe68a, #a8ffb8, #a8e4ff, #d8b8ff); background-size: 200% 100%; animation: holo 2s linear infinite; color: #2a0d5a; }
.rs-look-btn:disabled{ opacity: .5; cursor: default; }
.rs-portrait.shiny{ box-shadow: 0 0 0 3px #fff, 0 0 24px #fff36a !important; }

/* =====================================================================
   SOBRES: personaje en el sobre, elegir sobre y última carta con tensión
   ===================================================================== */
.pk-char{ position:absolute; right: -6px; bottom: -4px; height: 72%; width: auto; z-index: 2; image-rendering: pixelated; pointer-events:none;
  filter: drop-shadow(-3px 0 0 rgba(0,0,0,.35)); }
.pk-pack .pk-title, .pk-pack .pk-count{ align-self: flex-start; margin-left: 12px; }
.pk-pack .pk-band{ margin-top: -40px; }
.po-choose{ display:flex; gap: 34px; align-items: flex-end; justify-content:center; }
.po-pick{ background: none; border: none; cursor: pointer; display:flex; flex-direction:column; align-items:center; gap: 8px; color:#fff;
  transition: transform .3s cubic-bezier(.2,.8,.3,1.3), opacity .3s ease; animation: po-in .5s cubic-bezier(.2,.9,.3,1.25) both; }
.po-pick:nth-child(2){ animation-delay: .08s; } .po-pick:nth-child(3){ animation-delay: .16s; }
.po-pick b{ font-family: var(--title-font); font-size: 26px; text-shadow: var(--outline); font-weight: 400; letter-spacing: .04em; }
.po-pick .pk-pack{ width: 190px; height: 264px; }
.po-pick:hover{ transform: translateY(-12px) rotate(-2deg) scale(1.05); }
.po-pick.picked{ transform: translateY(-20px) scale(1.12); }
.po-pick.gone{ opacity: 0; transform: translateY(40px) scale(.8); }
.po-pack .pk-char{ height: 74%; }

.po-suspense{ position: relative; width: 240px; height: 330px; display:flex; align-items:center; justify-content:center; }
.pk-back{
  position: relative; z-index: 2; width: 220px; height: 300px; clip-path: var(--px-cut);
  background: repeating-linear-gradient(135deg, #14307a 0 10px, #10296a 10px 20px);
  box-shadow: inset 0 0 0 4px #050c26, inset 0 0 0 8px #6fb0ff, inset 0 0 0 10px #050c26;
  display:flex; align-items:center; justify-content:center;
  animation: po-in .4s cubic-bezier(.2,.9,.3,1.25) both, back-wobble 1.2s ease-in-out .4s infinite;
}
.pk-back-logo{ width: 120px; height: 120px; background: url(assets/logo.png) center/contain no-repeat; filter: drop-shadow(0 3px 0 rgba(0,0,0,.6)); }
@keyframes back-wobble{ 0%,100%{ transform: rotate(0); } 50%{ transform: rotate(1.5deg) translateY(-3px); } }
.po-rays{ position:absolute; inset: -80px; z-index: 1; opacity: 0; transition: opacity .6s ease;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rar) 70%, transparent) 0 10deg, transparent 10deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%);
  animation: rays-spin 6s linear infinite; }
@keyframes rays-spin{ to{ transform: rotate(360deg); } }
.po-suspense.shiny .po-rays{ background: repeating-conic-gradient(from 0deg, #ff4d6d 0 8deg, #ffd84a 8deg 16deg, #6dff8a 16deg 24deg, #4fc8ff 24deg 32deg, #b77cff 32deg 40deg, transparent 40deg 52deg); }
.po-suspense.s2 .po-rays{ opacity: .55; }
.po-suspense.s2 .pk-back{ animation: back-shake .18s linear infinite; box-shadow: inset 0 0 0 4px #050c26, inset 0 0 0 8px var(--rar), inset 0 0 0 10px #050c26; }
.po-suspense.s3 .po-rays{ opacity: 1; animation-duration: 1.6s; }
.po-suspense.s3 .pk-back{ animation: back-shake .08s linear infinite; filter: brightness(1.3) drop-shadow(0 0 26px var(--rar)); }
.po-suspense.s3::after{ content:''; position:absolute; inset: 0; z-index: 3; background: radial-gradient(circle, rgba(255,255,255,.9), transparent 60%); animation: glow-up 1s ease-in forwards; }
@keyframes glow-up{ from{ opacity: 0; transform: scale(.4); } to{ opacity: 1; transform: scale(1.6); } }
@keyframes back-shake{ 0%{ transform: translate(0,0) rotate(0); } 25%{ transform: translate(-4px,2px) rotate(-2deg); } 50%{ transform: translate(3px,-3px) rotate(2deg); } 75%{ transform: translate(-2px,-2px) rotate(-1deg); } 100%{ transform: translate(0,0) rotate(0); } }
.pack-open.final-reveal .po-flip.final{ animation: final-pop .8s cubic-bezier(.2,1.4,.3,1) both !important; }
@keyframes final-pop{ 0%{ transform: scale(.2) rotate(-12deg); opacity: 0; filter: brightness(3); } 60%{ transform: scale(1.18) rotate(3deg); opacity: 1; } 100%{ transform: none; filter: none; } }
.pack-open.final-reveal .po-flip.final .pk-card{ animation: po-glow 1.2s ease-in-out .8s infinite; }
.pack-open.shiny-reveal::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(90deg, rgba(255,77,109,.25), rgba(255,216,74,.25), rgba(109,255,138,.25), rgba(79,200,255,.25), rgba(183,124,255,.25)); background-size: 200% 100%; animation: holo 3s linear infinite; }

/* =====================================================================
   PORTADA: el jugador fijo y encuadrado (sin botar), como en Jugadores
   ===================================================================== */
.showcase-box{ align-items: flex-end !important; }
.showcase-emoji{ animation: none !important; filter: none !important; align-items: flex-end !important; height: 100%; }
.showcase-emoji .showcase-face{ width: 250px !important; height: 250px !important; max-width: none; margin-bottom: -12px; filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
.showcase-shadow{ display: none; }
.showcase-box.is-shiny{ box-shadow: inset 0 0 0 2px rgba(0,0,0,.55), 0 5px 0 #040b22, 0 0 26px #fff36a !important; }

/* =====================================================================
   JUGADORES y MEJORAS con estilo pixel Inazuma
   ===================================================================== */
#screen-roster, #screen-upgrades{ background: repeating-linear-gradient(0deg, #0d2160 0 6px, #0b1c52 6px 12px) !important; }
.rs-panel, .mt-side, .rs-detail, .mt-head{
  border-radius: 0 !important; border: none !important;
  background: var(--px-panel) !important;
  box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px var(--px-light), inset 0 0 0 10px var(--px-dark) !important;
}
.rs-panel{ padding: 18px 20px !important; }
.rs-detail{ padding: 18px 16px !important; }
.mt-side{ padding: 14px !important; }
.mt-head{ padding: 14px 18px !important; }
.rs-heading, #screen-upgrades .section-title{
  display:inline-flex; align-items:center; gap: 10px; padding: 4px 18px 6px !important; margin: 0;
  background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 3px #5a3200;
  color: #fff !important; text-shadow: var(--outline) !important;
}
.rs-heading small{ color: #3a2200 !important; text-shadow: none; font-family: 'Inter', sans-serif; font-weight: 900; }
.rs-tab, .rs-card, .mt-pl, .mt-card, .rs-chip, .rs-input, .mt-search, .rs-tag, .rs-portrait, .mt-face{
  border-radius: 0 !important;
}
.rs-tab{ border: none !important; clip-path: var(--px-cut-s); background: linear-gradient(180deg, #2456b8 0 50%, #1c469c 50% 100%) !important;
  box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #6fa6ec !important; }
.rs-tab.active{ background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%) !important; box-shadow: inset 0 0 0 3px #5a3200 !important; }
.rs-tab.active b, .rs-tab.active small{ color: #2a1800 !important; text-shadow: none !important; }
.rs-card{ border: none !important; clip-path: var(--px-cut-s);
  background: linear-gradient(180deg, #1f4ba8 0 50%, #173d8c 50% 100%) !important;
  box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px color-mix(in srgb, var(--team, #4f8df0) 80%, #ffffff) !important; }
.rs-card:hover{ transform: translateY(-3px); }
.rs-card.picked{ box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 6px #ffe14a !important; }
.rs-card.locked{ background: repeating-linear-gradient(135deg, #142a5e 0 6px, #10234f 6px 12px) !important; }
.rs-chip{ border: none !important; clip-path: var(--px-cut-s); background: #0b1a44 !important; box-shadow: inset 0 0 0 2px #4f7fd6 !important; }
.rs-chip.active{ background: #ffe14a !important; color: #2a1800 !important; box-shadow: inset 0 0 0 2px #5a3200 !important; }
.rs-input, .mt-search{ border: none !important; background: #071233 !important; box-shadow: inset 0 0 0 2px #6fb0ff !important; clip-path: var(--px-cut-s); }
.rs-portrait{ border: none !important; clip-path: var(--px-cut); box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px var(--team, #4f8df0) !important; }
.rs-bar{ border-radius: 0 !important; background: #071233 !important; box-shadow: inset 0 0 0 1px #3f6fc8; }
.rs-bar i{ border-radius: 0 !important; background-image: linear-gradient(180deg, rgba(255,255,255,.35) 0 40%, transparent 40%) !important; }
.rs-tag{ border: none !important; background: #0b1a44 !important; box-shadow: inset 0 0 0 2px #4f7fd6; clip-path: var(--px-cut-s); }
.rs-action{ border-radius: 0 !important; border: none !important; clip-path: var(--px-cut-s); font-family: var(--title-font) !important; font-weight: 400 !important; font-size: 20px !important; text-shadow: var(--outline-thin); }
.rs-action.btn-primary{ background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%) !important; color: #fff !important; box-shadow: inset 0 0 0 3px #5a3200 !important; }
.rs-action.btn-secondary{ background: linear-gradient(180deg, #2b62c8 0 50%, #1d4aa0 50% 100%) !important; color: #fff !important; box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #8cc4ff !important; }
.rs-back, #btn-back-title-4{ border-radius: 0 !important; clip-path: var(--px-cut-s); }
/* mejoras */
.mt-pl{ border: none !important; clip-path: var(--px-cut-s); background: linear-gradient(180deg, #1f4ba8 0 50%, #173d8c 50% 100%) !important;
  box-shadow: inset 5px 0 0 var(--team, #4f8df0), inset 0 0 0 2px var(--px-dark) !important; }
.mt-pl.active{ background: linear-gradient(180deg, #fff7c8 0 50%, #ffe070 50% 100%) !important; box-shadow: inset 6px 0 0 #f2a705, inset 0 0 0 2px var(--px-dark) !important; }
.mt-pl.active b{ color: #0b1a44 !important; } .mt-pl.active small{ color: #3a4a74 !important; }
.mt-card{ border: none !important; clip-path: var(--px-cut);
  background: var(--px-panel) !important; box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #4f7fd6, inset 0 0 0 7px var(--px-dark) !important; }
.mt-card.can{ box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #ffe14a, inset 0 0 0 7px var(--px-dark) !important; }
.mt-card.max{ box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #3fd84a, inset 0 0 0 7px var(--px-dark) !important; background: linear-gradient(180deg, #1d5a3a, #143f29) !important; }
.mt-txt b{ text-shadow: var(--outline-thin); }
.mt-buy, .mt-pick{ border-radius: 0 !important; border: none !important; clip-path: var(--px-cut-s); }
.mt-buy:not(:disabled){ background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%) !important; box-shadow: inset 0 0 0 3px #5a3200 !important; color: #2a1800 !important; }
.mt-buy:disabled{ background: #0b1a44 !important; box-shadow: inset 0 0 0 2px #3f6fc8 !important; }
.mt-card.max .mt-buy{ background: linear-gradient(180deg, #3fd84a 0 50%, #2aa835 50% 100%) !important; color: #0b2a12 !important; box-shadow: inset 0 0 0 3px #0b2a12 !important; }
.mt-pick{ background: linear-gradient(180deg, #2b62c8 0 50%, #1d4aa0 50% 100%) !important; box-shadow: inset 0 0 0 2px var(--px-dark), inset 0 0 0 4px #8cc4ff !important; }
.mt-card .meta-pips i{ border-radius: 0 !important; }
.mt-prog{ border-radius: 0 !important; } .mt-prog i{ border-radius: 0 !important; }
.mt-pl em{ border-radius: 0 !important; clip-path: var(--px-cut-s); }
#meta-picker .overlay-box{ border-radius: 0 !important; background: var(--px-panel) !important;
  box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px var(--px-light), inset 0 0 0 10px var(--px-dark) !important; }
#meta-picker .mp-tile{ border-radius: 0 !important; clip-path: var(--px-cut-s); }

/* =====================================================================
   FIN DEL PARTIDO
   ===================================================================== */
#gameover-overlay{ background: repeating-linear-gradient(0deg, rgba(4,10,34,.9) 0 4px, rgba(4,10,34,.84) 4px 8px) !important; }
#gameover-overlay .overlay-box{
  border-radius: 0 !important; border: none !important; max-width: 520px !important;
  background: var(--px-panel) !important;
  box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px var(--px-light), inset 0 0 0 10px var(--px-dark), 8px 8px 0 rgba(0,0,0,.45) !important;
  padding: 26px 28px 26px !important; animation: po-in .5s cubic-bezier(.2,.9,.3,1.25) both;
}
#gameover-title{
  display:inline-block; margin: 0 0 14px !important; padding: 6px 26px 8px;
  background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 3px #5a3200;
  color: #fff !important; text-shadow: var(--outline) !important; font-size: 34px !important;
}
#gameover-stats{
  margin: 0 0 18px !important; padding: 12px 16px; text-align: left; line-height: 1.9 !important;
  background: rgba(4,10,34,.6); box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #3f6fc8;
  color: #e6efff !important; font-size: 15px !important;
}
#gameover-stats b{ color: #ffe14a; }
#btn-gameover-title{ border-radius: 0 !important; border: none !important; clip-path: var(--px-cut-s);
  background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%) !important; box-shadow: inset 0 0 0 3px #5a3200 !important;
  color: #fff !important; font-family: var(--title-font); font-size: 22px; text-shadow: var(--outline-thin); padding: 10px 26px; }
.po-flip.final .pk-card{ width: 270px; } .po-flip.final .pk-face .char-face{ width: 150px !important; height: 150px !important; }
/* foto del jugador en Jugadores: encuadrada dentro del marco (el marco va por encima de la cara) */
.rs-portrait{ position: relative; box-shadow: none !important; background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--team, #4f8df0) 35%, transparent), #081633 72%) !important; align-items: flex-end !important; justify-content: center !important; }
.rs-portrait::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index: 2;
  box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px var(--team, #4f8df0), inset 0 0 0 9px var(--px-dark); }
.rs-portrait.shiny::after{ box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px #fff36a, inset 0 0 0 9px var(--px-dark); }
.rs-portrait .rs-big{ width: 186px !important; height: 186px !important; margin-bottom: -2px !important; position: relative; z-index: 1; }

/* ---- portada: jugador encuadrado (más pequeño) ---- */
.showcase-emoji .showcase-face{ width: 206px !important; height: 206px !important; margin-bottom: -8px !important; }

/* ---- sobre con personaje (solo al elegir sobre y al abrirlo) ---- */
.pk-pack:has(.pk-char-wrap){ justify-content: flex-start !important; }
.pk-pack:has(.pk-char-wrap) .pk-band{ margin-top: 14px !important; z-index: 3; }
.pk-char-wrap{ position: absolute; left: 7px; right: 7px; top: 30%; bottom: 7px; z-index: 1; overflow: hidden;
  display: flex; justify-content: center; align-items: flex-end; }
.pk-burst{ position: absolute; inset: -20% -10% 0; background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%); }
.pk-char-wrap .pk-char{ position: relative !important; right: auto !important; bottom: 0 !important; height: 96% !important; width: auto; max-width: 100%;
  object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)) !important; }
.pk-pack:has(.pk-char-wrap) .pk-title{ position: absolute; left: 7px; right: 7px; bottom: 30px; z-index: 3; margin: 0 !important; align-self: auto !important;
  text-align: center; padding: 3px 0 4px; background: linear-gradient(180deg, rgba(7,18,51,.0), rgba(7,18,51,.85) 35%, rgba(7,18,51,.85)); }
.pk-pack:has(.pk-char-wrap) .pk-count{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 3; margin: 0 !important; align-self: auto !important; }
.pk-pack:not(:has(.pk-char-wrap)) .pk-title, .pk-pack:not(:has(.pk-char-wrap)) .pk-count{ align-self: center !important; margin-left: 0 !important; }
/* personaje del sobre delante del logo (como en tu boceto): ya no se le corta la cabeza */
.pk-char-wrap{ top: 18% !important; bottom: 7px !important; overflow: visible !important; z-index: 4 !important; }
.pk-char-wrap .pk-char{ height: 100% !important; }
.pk-burst{ inset: 10% -10% 0 !important; }
.pk-pack:has(.pk-char-wrap) .pk-band{ margin-top: 10px !important; }
.pk-pack:has(.pk-char-wrap) .pk-title, .pk-pack:has(.pk-char-wrap) .pk-count{ z-index: 5 !important; }
/* personajes del sobre un poco más pequeños */
.pk-char-wrap{ top: 30% !important; bottom: 24px !important; }
.pk-char-wrap .pk-char{ height: 100% !important; }
/* personajes pegados al borde de abajo del sobre (deja ver el logo) */
.pk-char-wrap{ top: 40% !important; bottom: 7px !important; align-items: flex-end !important; }
.pk-char-wrap .pk-char{ height: 100% !important; margin-bottom: 0 !important; }
/* personajes del sobre en dibujo normal (no pixelado), con borde negro */
.pk-char-wrap .pk-char{ image-rendering: auto !important; }
/* botón de cambiar cartas: icono pixel + texto + tecla R en cuadrado amarillo */
.overlay .reroll-btn{ display:flex !important; align-items:center; justify-content:center; gap: 10px; padding: 9px 14px !important;
  font-family: var(--title-font) !important; font-weight: 400 !important; font-size: 20px !important; letter-spacing: .03em; color: #fff !important; text-shadow: var(--outline-thin); }
.overlay .reroll-btn .px-mini{ width: 32px; height: 32px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.overlay .reroll-btn .rr-left{ font-family: 'Inter', sans-serif; font-weight: 800; font-size: 13px; color: #d8ffd8; text-shadow: none;
  background: rgba(0,0,0,.28); padding: 2px 8px; clip-path: var(--px-cut-s); }
.overlay .reroll-btn .rr-key{ display:inline-flex; align-items:center; justify-content:center; width: 26px; height: 26px;
  font-family: 'Inter', 'Arial Black', sans-serif; font-weight: 900; font-size: 15px; color: #0b1a44; text-shadow: none;
  background: #ffe14a; box-shadow: inset 0 0 0 2px #0b1a44, 2px 2px 0 rgba(0,0,0,.45); }
.overlay .reroll-btn kbd{ display:none; }

/* ---- cara del jugador (HUD y estadísticas) y casilla del objeto: marcos pixel bien encuadrados ---- */
.hud-portrait, .sp-portrait, #pause-overlay .sp-portrait{
  position: relative; overflow: hidden; border-radius: 0 !important; clip-path: none !important; box-shadow: none !important;
  display:flex !important; align-items:flex-end !important; justify-content:center !important;
  background: radial-gradient(circle at 50% 65%, color-mix(in srgb, var(--elc, #4f8df0) 45%, #10296a), #081633 75%) !important;
}
.hud-portrait{ width: 48px !important; height: 48px !important; }
.sp-portrait, #pause-overlay .sp-portrait{ width: 64px !important; height: 64px !important; }
.hud-portrait::after, .sp-portrait::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index: 2;
  box-shadow: inset 0 0 0 2px #071233, inset 0 0 0 4px var(--elc, #4f8df0), inset 0 0 0 5px #071233; }
.hud-portrait .char-face{ width: 46px !important; height: 46px !important; margin: 0 0 -1px !important; position: relative; z-index: 1; }
.sp-portrait .char-face{ width: 62px !important; height: 62px !important; margin: 0 0 -2px !important; position: relative; z-index: 1; }

.hud-relic{
  border-radius: 0 !important; border: none !important; overflow: visible;
  background: repeating-linear-gradient(180deg, #14307a 0 4px, #112a6c 4px 8px) !important;
  box-shadow: inset 0 0 0 2px #071233, inset 0 0 0 4px #ffe14a, inset 0 0 0 5px #071233, 3px 3px 0 rgba(0,0,0,.4) !important;
}
.hud-relic.empty{ background: rgba(7,18,51,.65) !important;
  box-shadow: inset 0 0 0 2px #071233, inset 0 0 0 4px rgba(150,180,240,.55), inset 0 0 0 5px #071233 !important; }
.hud-relic img, .hud-relic .px-mini{ width: 70% !important; height: 70% !important; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.hud-relic::after{ font-family: 'Inter', sans-serif !important; font-weight: 900 !important; font-size: 10px !important; letter-spacing: .08em !important;
  color: #0b1a44 !important; text-shadow: none !important; background: #ffe14a; padding: 2px 6px; box-shadow: inset 0 0 0 1px #5a3200; }
.hud-relic.empty::after{ background: rgba(150,180,240,.85); box-shadow: inset 0 0 0 1px #071233; }

/* =====================================================================
   AJUSTES con estilo pixel Inazuma
   ===================================================================== */
#settings-overlay{ background: repeating-linear-gradient(0deg, rgba(4,10,34,.88) 0 4px, rgba(4,10,34,.82) 4px 8px) !important; }
#settings-overlay .settings-box{
  border-radius: 0 !important; border: none !important; text-align: center;
  background: var(--px-panel) !important;
  box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px var(--px-light), inset 0 0 0 10px var(--px-dark), 8px 8px 0 rgba(0,0,0,.45) !important;
  padding: 24px 26px 22px !important; max-width: 600px !important;
}
#settings-overlay .settings-box h3{
  display: inline-block; margin: 0 0 8px !important; padding: 5px 28px 7px;
  background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 3px #5a3200;
  color: #fff !important; text-shadow: var(--outline) !important; font-size: 30px !important;
}
#settings-overlay .sp-box{ text-align: left; border-radius: 0 !important; border: none !important; background: rgba(4,10,34,.55) !important;
  box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #3f6fc8 !important; padding: 0 0 8px; }
#settings-overlay .sp-title{ margin: 0 0 6px; padding: 5px 12px 6px; border-radius: 0 !important; border: none !important;
  background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%) !important; color: #fff !important; text-shadow: var(--outline-thin) !important;
  box-shadow: inset 0 0 0 3px var(--px-dark) !important; font-family: var(--title-font); font-weight: 400; font-size: 19px; letter-spacing: .04em; }
#settings-overlay .set-row{ padding: 8px 14px; color: #e6efff; }
#settings-overlay .set-row b{ font-family: 'Inter', sans-serif; font-weight: 900; color: #ffe14a; }
/* deslizadores pixel */
#settings-overlay input[type=range]{ -webkit-appearance: none; appearance: none; height: 14px; background: transparent; cursor: pointer; }
#settings-overlay input[type=range]::-webkit-slider-runnable-track{ height: 12px; background: #071233; box-shadow: inset 0 0 0 2px #6fb0ff; }
#settings-overlay input[type=range]::-moz-range-track{ height: 12px; background: #071233; box-shadow: inset 0 0 0 2px #6fb0ff; }
#settings-overlay input[type=range]::-moz-range-progress{ height: 12px; background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%); }
#settings-overlay input[type=range]::-webkit-slider-thumb{ -webkit-appearance: none; width: 18px; height: 22px; margin-top: -5px;
  background: linear-gradient(180deg, #fff 0 50%, #d6e2f8 50% 100%); box-shadow: inset 0 0 0 2px #071233, 2px 2px 0 rgba(0,0,0,.45); border: none; border-radius: 0; }
#settings-overlay input[type=range]::-moz-range-thumb{ width: 18px; height: 22px; border: none; border-radius: 0;
  background: linear-gradient(180deg, #fff 0 50%, #d6e2f8 50% 100%); box-shadow: inset 0 0 0 2px #071233, 2px 2px 0 rgba(0,0,0,.45); }
/* casilla de silenciar */
#settings-overlay .set-check input{ -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 0; cursor: pointer;
  background: #071233; box-shadow: inset 0 0 0 2px #6fb0ff; position: relative; }
#settings-overlay .set-check input:checked{ background: #ffe14a; box-shadow: inset 0 0 0 2px #5a3200; }
#settings-overlay .set-check input:checked::after{ content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-weight: 900; font-size: 15px; color: #2a1800; }
/* lista de controles */
#settings-overlay .keys-list li{ border-radius: 0 !important; padding: 6px 12px; color: #dbe9ff; }
#settings-overlay .keys-list li:nth-child(odd){ background: rgba(111,176,255,.12); }
#settings-overlay .keys-list li:nth-child(even){ background: rgba(0,0,0,.18); }
#settings-overlay kbd{ display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; margin: 0 1px;
  border: none !important; border-radius: 0 !important; font-family: 'Inter', sans-serif; font-weight: 900; font-size: 12px;
  color: #0b1a44 !important; background: #ffe14a !important; box-shadow: inset 0 0 0 2px #0b1a44, 2px 2px 0 rgba(0,0,0,.4) !important; }
#settings-overlay #btn-settings-close{ border-radius: 0 !important; border: none !important; clip-path: var(--px-cut-s);
  background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%) !important; box-shadow: inset 0 0 0 3px #5a3200 !important;
  color: #fff !important; font-family: var(--title-font); font-size: 22px; text-shadow: var(--outline-thin); padding: 10px 34px; }
/* pausa: botones de prueba de las definitivas */
#pause-overlay .sp-dev{ margin-top: 12px; }
.dev-ults{ display:flex; flex-wrap:wrap; gap: 8px; padding: 6px 10px 4px; }
.dev-ult{ display:inline-flex; align-items:center; gap: 6px; padding: 6px 12px; border: none; cursor: pointer; color: #fff;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 13px; clip-path: var(--px-cut-s);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff) 0 50%, var(--c) 50% 100%);
  box-shadow: inset 0 0 0 2px #071233; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.dev-ult:hover{ filter: brightness(1.12); transform: translateY(-1px); }
/* pausa: cuadrícula de pruebas (tipo × afinidad) */
.dev-ults{ display:flex; flex-direction:column; gap: 6px; }
.dev-row{ display:grid; grid-template-columns: 74px repeat(6, 1fr); gap: 5px; align-items:stretch; }
.dev-kind{ display:flex; align-items:center; font-family:'Inter',sans-serif; font-weight:800; font-size:11px; color:#ffd862; text-transform:uppercase; letter-spacing:.02em; line-height:1.1; }
.dev-row .dev-ult{ flex-direction:column; justify-content:center; gap: 2px; padding: 5px 4px; font-size: 10.5px; line-height: 1.1; text-align:center; min-height: 44px; }
@media (max-width: 640px){ .dev-row{ grid-template-columns: repeat(3, 1fr); } .dev-kind{ grid-column: 1 / -1; } }

/* ======================================================================
   MENÚ PRINCIPAL Y BOTONES "VOLVER" — estilo Inazuma pixel arcade
   (esquinas en escalón, bordes dobles, dos tonos planos; como las mejoras de nivel)
   ====================================================================== */
.side-menu{
  border-radius: 0 !important; border: none !important;
  clip-path: var(--px-cut);
  background: var(--px-panel) !important;
  box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px var(--px-light), inset 0 0 0 10px var(--px-dark) !important;
  padding: 18px 16px !important;
}
.menu-item{
  position: relative;
  border-radius: 0 !important; border: none !important;
  clip-path: var(--px-cut-s);
  background: linear-gradient(180deg, #2456b8 0 50%, #1c469c 50% 100%) !important;
  box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #8cc4ff, inset 0 -8px 0 rgba(0,0,0,.18) !important;
  transition: transform .08s steps(2), filter .08s !important;
}
.menu-item .menu-text b{ text-shadow: var(--outline-thin); color: #fff; }
.menu-item .menu-text small{ color: #dbe9ff !important; }
.menu-item:not(.menu-disabled):hover, .menu-item:not(.menu-disabled):focus-visible{
  transform: translateX(-6px) !important;
  background: linear-gradient(180deg, #2a62cc 0 50%, #2050ac 50% 100%) !important;
  box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #ffe14a, inset 0 -8px 0 rgba(0,0,0,.18) !important;
  outline: none;
}
.menu-item:not(.menu-disabled):hover::after, .menu-item:not(.menu-disabled):focus-visible::after{   /* cursor de selección */
  content:''; position:absolute; right: 9px; top: 50%; width: 0; height: 0; transform: translateY(-50%);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 9px solid #ffe14a;
  filter: drop-shadow(-1px 0 0 #5a3200);
}
.menu-item:not(.menu-disabled):active{ transform: translateX(-6px) translateY(2px) !important; }
/* Jugar: botón principal en amarillo Inazuma */
#btn-play.menu-item{
  background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%) !important;
  box-shadow: inset 0 0 0 3px #5a3200, inset 0 0 0 5px #fff3b0, inset 0 -8px 0 rgba(120,60,0,.25) !important;
}
#btn-play.menu-item .menu-text b{ color: #fff; text-shadow: var(--outline); }
#btn-play.menu-item .menu-text small{ color: #4a2800 !important; text-shadow: none !important; font-weight: 700; }
#btn-play.menu-item:not(.menu-disabled):hover{
  background: linear-gradient(180deg, #ffe066 0 50%, #ffb41e 50% 100%) !important;
  box-shadow: inset 0 0 0 3px #5a3200, inset 0 0 0 5px #ffffff, inset 0 -8px 0 rgba(120,60,0,.25) !important;
}
#btn-play.menu-item:not(.menu-disabled):hover::after{ border-right-color: #fff; filter: drop-shadow(-1px 0 0 #5a3200); }
.menu-item.menu-disabled{
  background: linear-gradient(180deg, #2a3656 0 50%, #232d48 50% 100%) !important;
  box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #55648a !important;
  opacity: .8;
}
/* cartel del jugador del menú y monedas / tickets / iconos de arriba */
.showcase-label{
  border-radius: 0 !important; border: none !important;
  clip-path: var(--px-cut-s);
  background: var(--px-panel) !important;
  box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px var(--px-light), inset 0 0 0 7px var(--px-dark) !important;
}
.showcase-tags .char-element, .showcase-tags .char-rarity{ border-radius: 0 !important; clip-path: var(--px-cut-s); }
.topbar-pill, .icon-btn{
  border-radius: 0 !important; border: none !important;
  clip-path: var(--px-cut-s);
  background: linear-gradient(180deg, #14307a 0 50%, #102766 50% 100%) !important;
  box-shadow: inset 0 0 0 2px var(--px-dark), inset 0 0 0 4px #6fb0ff !important;
}
.icon-btn:not(:disabled):hover{
  transform: translateY(-2px) !important;
  box-shadow: inset 0 0 0 2px var(--px-dark), inset 0 0 0 4px #ffe14a !important;
}
/* botones "Volver" (tienda, mejoras, jugadores…) */
.btn-ghost{
  border-radius: 0 !important; border: none !important;
  clip-path: var(--px-cut-s);
  background: linear-gradient(180deg, #2456b8 0 50%, #1c469c 50% 100%) !important;
  box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #8cc4ff, inset 0 -8px 0 rgba(0,0,0,.18) !important;
  color: #fff !important; text-shadow: var(--outline-thin);
  font-weight: 800; letter-spacing: .04em;
  transition: transform .08s steps(2) !important;
}
.btn-ghost:hover, .btn-ghost:focus-visible{
  filter: none !important;
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #ffe14a, inset 0 -8px 0 rgba(0,0,0,.18) !important;
  outline: none;
}
.btn-ghost:active{ transform: translateY(1px); }
/* pausa: fila para ir a un boss */
.dev-row.dev-bosses{ grid-template-columns: 74px 1fr; }
.dev-boss-list{ display:flex; flex-wrap:wrap; gap: 5px; }
.dev-boss{ display:inline-flex; align-items:center; gap: 5px; padding: 4px 10px 4px 5px; border:none; cursor:pointer; color:#fff;
  font-family:'Inter',sans-serif; font-weight:800; font-size: 11px; clip-path: var(--px-cut-s);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff) 0 50%, var(--c) 50% 100%);
  box-shadow: inset 0 0 0 2px #071233; text-shadow: 0 1px 0 rgba(0,0,0,.7); }
.dev-boss img{ width: 22px; height: 22px; image-rendering: pixelated; }
.dev-boss:hover{ filter: brightness(1.12); transform: translateY(-1px); }

/* ---- barra del boss: recuadro pixel arcade con el escudo de su equipo ---- */
.boss-bar{
  display:flex; align-items:center; gap: 10px;
  width: min(470px, 50%) !important;
  padding: 10px 14px 11px 10px;
  clip-path: var(--px-cut);
  background: var(--px-panel);
  box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px var(--c), inset 0 0 0 8px var(--px-dark);
}
.boss-crest{ width: 44px; height: 44px; object-fit: contain; flex: none; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
.boss-main{ flex: 1; min-width: 0; }
.boss-head{ align-items:center !important; margin-bottom: 5px !important; }
.boss-head #boss-emoji img{ width: 26px; height: 26px; image-rendering: pixelated; }
.boss-head b{ color:#fff; text-shadow: var(--outline); }
.boss-head #boss-team{ color:#cfe2ff !important; font-weight: 700; display:inline-flex; align-items:center; gap: 4px; }
.boss-hp{
  height: 12px !important; border-radius: 0 !important; border: none !important;
  background: #050b22 !important;
  box-shadow: inset 0 0 0 2px var(--px-dark), 0 0 0 2px rgba(255,255,255,.15);
}
#boss-hp-fill{ background: linear-gradient(180deg, color-mix(in srgb, var(--c) 60%, #fff) 0 40%, var(--c) 40% 100%) !important; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
@media (max-width: 720px){ .boss-bar{ width: 86% !important; } }
.boss-head #boss-emoji{ display:inline-flex; align-items:center; gap: 1px; flex: none; }
.boss-head #boss-emoji > *{ display:block; }
.boss-head b, .boss-head #boss-team{ white-space: nowrap; }
.boss-head b{ overflow:hidden; text-overflow: ellipsis; min-width: 0; }
/* Mejoras: cartel centrado y las monedas debajo, como en la tienda */
#screen-upgrades .mt-top{ display:flex; flex-direction:column; align-items:center; gap: 8px; margin-bottom: 2px; }
#screen-upgrades .section-title{ font-size: 34px; padding: 4px 26px 6px !important; letter-spacing: .04em; }
#screen-upgrades .gacha-sub{ text-align:center; margin: 8px 0 12px; color:#cfe2ff; }
/* la barra del boss baja cuando hay temporal, para que se vea el aviso del tiempo */
.boss-bar.with-weather{ top: 100px !important; }
/* recuadro del jugador del HUD (arriba a la izquierda), más grande */
.hud-portrait{ width: 78px !important; height: 78px !important; }
.hud-portrait .char-face{ width: 74px !important; height: 74px !important; margin: 0 0 -2px !important; }
.hud-portrait::after{ box-shadow: inset 0 0 0 3px #071233, inset 0 0 0 6px var(--elc, #4f8df0), inset 0 0 0 8px #071233 !important; }
.hud-left .hud-hp{ min-width: 190px; }
/* ---- balones de poder (abajo a la izquierda) ---- */
.pball-bar{ position:absolute; left: 14px; bottom: 16px; z-index: 6; display:flex; gap: 8px; pointer-events:none; }
.pball-bar.hidden{ display:none; }
.pb-slot{ position:relative; width: 54px; height: 54px; display:flex; align-items:center; justify-content:center;
  clip-path: var(--px-cut-s); background: linear-gradient(180deg, #14307a 0 50%, #102766 50% 100%);
  box-shadow: inset 0 0 0 3px #071233, inset 0 0 0 5px var(--c), inset 0 0 0 7px #071233; }
.pb-slot.pb-empty{ filter: grayscale(.85) brightness(.7); }
.pb-slot.pb-on{ box-shadow: inset 0 0 0 3px #071233, inset 0 0 0 6px #ffffff, inset 0 0 0 8px #071233, 0 0 12px var(--c); animation: pbGlow .5s steps(2) infinite; }
@keyframes pbGlow{ 50%{ filter: brightness(1.25); } }
.pb-ico{ width: 32px; height: 32px; background-image: url('assets/ui/pballs.png'); background-size: 128px 32px; image-rendering: pixelated; }
.pb-slot kbd{ position:absolute; left: 4px; top: 3px; font: 900 11px Inter, sans-serif; color:#2a1800; background:#ffe14a; padding: 0 4px; box-shadow: inset 0 0 0 1px #5a3200; }
.pb-slot b{ position:absolute; right: 5px; bottom: 3px; font: 900 13px Inter, sans-serif; color:#fff; text-shadow: var(--outline-thin); }
.pb-slot em{ position:absolute; left: 50%; top: -18px; transform: translateX(-50%); font: 900 12px Inter, sans-serif; font-style: normal; color: var(--c); text-shadow: var(--outline-thin); }
@media (max-width: 720px){ .pball-bar{ bottom: 130px; } }

/* escudo de la Cinta de Mark: tramo azul pegado a la vida */
.hud-hp .hp-bar{ position:relative; overflow:hidden; }
#hp-shield{ position:absolute; top:0; bottom:0; left:100%; width:0; background: linear-gradient(180deg, #9ee6ff 0 40%, #2f8fff 40% 100%); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), inset 1px 0 0 #dff6ff; transition: width .1s linear, left .1s linear; }

/* ===== Guía (documentación): mismo estilo pixel Inazuma que Jugadores y Mejoras ===== */
#screen-docs{ justify-content:flex-start; overflow-y:auto; background: repeating-linear-gradient(0deg, #0d2160 0 6px, #0b1c52 6px 12px) !important; }
#screen-docs .mt-top{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:2px; }
#screen-docs .section-title{ display:inline-flex; align-items:center; gap:10px; padding:4px 18px 6px !important; margin:0;
  background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 3px #5a3200;
  color:#fff !important; text-shadow: var(--outline) !important; }
.docs-panel{ display:flex; gap:14px; width:min(1180px, 96vw); height:min(640px, calc(100vh - 210px)); min-height:380px; margin-bottom:12px; }
.docs-tabs, .docs-body{ background: var(--px-panel) !important;
  box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px var(--px-light), inset 0 0 0 10px var(--px-dark) !important; }
.docs-tabs{ flex:0 0 260px; display:flex; flex-direction:column; gap:6px; overflow-y:auto; padding:14px; }
.docs-tab{ flex-shrink:0; text-align:left; font:700 14px Inter, sans-serif; color:#fff; border:none; cursor:pointer; display:flex; align-items:center; gap:9px;
  padding:9px 12px; clip-path: var(--px-cut-s); text-shadow: var(--outline-thin);
  background: linear-gradient(180deg, #1f4ba8 0 50%, #173d8c 50% 100%); box-shadow: inset 5px 0 0 #4f8df0, inset 0 0 0 2px var(--px-dark); }
.docs-tab:hover{ filter: brightness(1.15); }
.docs-tab.on{ background: linear-gradient(180deg, #fff7c8 0 50%, #ffe070 50% 100%); box-shadow: inset 6px 0 0 #f2a705, inset 0 0 0 2px var(--px-dark); color:#0b1a44; text-shadow:none; }
.docs-tab .px-ico, .docs-tab img{ width:22px; height:22px; image-rendering: pixelated; }
.docs-body{ flex:1; min-width:0; overflow-y:auto; padding:18px 20px; color:#dfe9ff; font:14px/1.45 Inter, sans-serif; }
.docs-body h3{ display:inline-block; margin:0 0 10px; padding:3px 14px 5px; font-family: var(--title-font); font-weight:400; font-size:24px; letter-spacing:.02em; color:#fff;
  text-shadow: var(--outline-thin); background: linear-gradient(180deg, #2b62c8 0 50%, #1d4aa0 50% 100%); clip-path: var(--px-cut-s);
  box-shadow: inset 0 0 0 2px var(--px-dark), inset 0 0 0 4px #8cc4ff; }
.docs-body h4{ margin:16px 0 6px; font-family: var(--title-font); font-weight:400; font-size:19px; color:#ffd84a; text-shadow: var(--outline-thin); }
.docs-body p.intro{ margin:0 0 12px; padding:10px 12px; color:#e6efff; background:#0b1a44; box-shadow: inset 0 0 0 2px #3f6fc8; clip-path: var(--px-cut-s); }
.docs-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:10px; }
.docs-card{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; clip-path: var(--px-cut);
  background: var(--px-panel); box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #4f7fd6, inset 0 0 0 7px var(--px-dark); }
.docs-card .dc-ico{ flex:0 0 auto; display:flex; gap:2px; align-items:center; min-width:34px; padding-top:2px; }
.docs-card .dc-ico img{ image-rendering:pixelated; }
.docs-card b{ font-family: var(--title-font); font-weight:400; font-size:18px; line-height:1.1; letter-spacing:.02em; color:#fff; text-shadow: var(--outline-thin); }
.docs-card small{ display:block; font-size:12px; color:#b8c9e6; line-height:1.3; margin-top:3px; }
.docs-card small b{ font-family: Inter, sans-serif; font-size:12px; font-weight:800; text-shadow:none; color:#ffe27a; }
.docs-card .dc-tag{ display:inline-block; vertical-align:middle; font:800 10px Inter, sans-serif; padding:2px 7px; margin-left:6px; background:#0b1a44; color:#ffd84a; box-shadow: inset 0 0 0 2px #4f7fd6; clip-path: var(--px-cut-s); }
.docs-list{ margin:4px 0 8px; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.docs-list li{ padding:10px 12px 10px 16px; background: var(--px-panel); clip-path: var(--px-cut-s); box-shadow: inset 5px 0 0 #f2a705, inset 0 0 0 2px var(--px-dark); }
#btn-back-title-docs{ border-radius:0 !important; clip-path: var(--px-cut-s); }
@media (max-width: 760px){ .docs-panel{ flex-direction:column; height:auto; } .docs-tabs{ flex:none; flex-direction:row; flex-wrap:wrap; } .docs-tab{ font-size:12px; padding:6px 8px; } }
#screen-docs .gacha-sub{ margin-top: 8px; }
.docs-tab .emo-ico, .docs-tab img{ width:22px !important; height:22px !important; }

/* ===== Presentación VS al entrar a un duelo (estilo arcade pixel) ===== */
.vs-ov{ position:fixed; inset:0; z-index:60; pointer-events:none; overflow:hidden;
  background: repeating-linear-gradient(0deg, rgba(6,14,40,.88) 0 4px, rgba(10,22,60,.88) 4px 8px); animation: vsFadeIn .18s steps(3) both; }
.vs-ov.hidden{ display:none; }
.vs-ov.out{ animation: vsFadeOut .35s steps(4) forwards; }
.vs-flash{ position:absolute; inset:0; background:#fff; opacity:0; animation: vsFlash .5s steps(4) .42s both; }
/* cada luchador: banda en zigzag que llega desde el borde + recuadro con la cara + nombre */
.vs-side{ position:absolute; width:50%; display:flex; align-items:center; --h: 190px; height: var(--h); }
.vs-l{ left:0; top:50%; transform: translateY(-50%); justify-content:flex-end; padding-right: 100px; animation: vsInL .38s steps(6) both; }
.vs-rcol{ position:absolute; right:0; top:0; bottom:0; width:50%; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.vs-rcol .vs-side{ position:relative; width:100%; justify-content:flex-start; padding-left: 100px; animation: vsInR .38s steps(6) both; }
.vs-rcol .vs-side:nth-child(2){ animation-delay:.08s; } .vs-rcol .vs-side:nth-child(3){ animation-delay:.16s; }
.vs-band{ position:absolute; top:0; bottom:0; width:100%;
  background: repeating-linear-gradient(90deg, var(--c) 0 18px, color-mix(in srgb, var(--c) 68%, #000) 18px 24px);
  filter: drop-shadow(0 6px 0 #040b22); }
.vs-l .vs-band{ left:0; clip-path: polygon(0 30%, 12% 0, 80% 16%, 80% 84%, 9% 62%, 0 76%); }
.vs-rcol .vs-band{ right:0; clip-path: polygon(20% 16%, 88% 0, 100% 22%, 100% 70%, 90% 58%, 20% 84%); }
.vs-box{ position:relative; z-index:1; width: calc(var(--h) * .86); height: calc(var(--h) * .86); flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, #0b1a44) 0 50%, color-mix(in srgb, var(--c) 28%, #071233) 50% 100%);
  clip-path: var(--px-cut); box-shadow: inset 0 0 0 5px #0b1430, inset 0 0 0 9px #ffe14a, inset 0 0 0 13px #0b1430; }
.vs-box .char-face{ width: calc(100% - 26px) !important; height: calc(100% - 26px) !important; object-fit: contain; image-rendering: pixelated; margin:0 !important; }
.vs-name{ position:absolute; z-index:2; bottom: 4px; font-family: var(--title-font); font-size: 26px; color:#fff; text-shadow: var(--outline); letter-spacing:.03em;
  padding: 2px 14px 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, #fff) 0 50%, var(--c) 50% 100%); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 3px #0b1430; white-space:nowrap; }
.vs-l .vs-name{ right: 92px; }
.vs-rcol .vs-name{ left: 92px; }
.vs-rcol.multi .vs-side{ --h: 150px; } .vs-rcol.multi .vs-name{ font-size: 20px; bottom: 2px; }
.vs-mid{ position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); z-index:3; animation: vsSlam .5s steps(6) .3s both; }
.vs-mid span{ display:block; font-family: var(--title-font); font-size: 120px; line-height:1; color:#ffe14a; letter-spacing:-.02em;
  text-shadow: 0 6px 0 #c46a00, -6px 0 0 #0b1430, 6px 0 0 #0b1430, 0 -6px 0 #0b1430, 0 12px 0 #0b1430, 6px 6px 0 #0b1430, -6px 6px 0 #0b1430; }
@keyframes vsFadeIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes vsFadeOut{ to{ opacity:0 } }
@keyframes vsInL{ from{ transform: translate(-110%, -50%) } to{ transform: translate(0, -50%) } }
@keyframes vsInR{ from{ transform: translateX(110%) } to{ transform: translateX(0) } }
@keyframes vsSlam{ 0%{ transform: translate(-50%, -50%) scale(3.2); opacity:0 } 60%{ transform: translate(-50%, -50%) scale(.85); opacity:1 } 80%{ transform: translate(-46%, -52%) scale(1.06) } 100%{ transform: translate(-50%, -50%) scale(1) } }
@keyframes vsFlash{ 0%{ opacity:0 } 25%{ opacity:.85 } 100%{ opacity:0 } }
@media (max-width: 760px){ .vs-side{ --h: 120px; } .vs-rcol.multi .vs-side{ --h: 96px; } .vs-mid span{ font-size:64px; } .vs-l{ padding-right:46px; } .vs-rcol .vs-side{ padding-left:46px; } .vs-name{ font-size:16px; } .vs-l .vs-name{ right:40px; } .vs-rcol .vs-name{ left:40px; } }

/* la barra del boss va justo debajo del reloj (sin taparlo) */
.boss-bar{ top: 80px; }
.boss-bar.with-weather{ top: 108px !important; }
@media (max-width: 720px){ .boss-bar{ top:auto; } }

/* muerte: el campo en blanco y negro */
#game-canvas{ transition: filter .9s steps(6); }
#game-canvas.dead-bw{ filter: grayscale(1) contrast(1.15) brightness(.92); }
#gameover-overlay .overlay-box{ animation: goIn .35s steps(5) both; }
@keyframes goIn{ from{ transform: scale(.6); opacity:0 } to{ transform: scale(1); opacity:1 } }
#screen-game.dead-bw > :not(.overlay):not(#vs-overlay){ filter: grayscale(1) contrast(1.1); transition: filter .9s steps(6); }

/* ===== Ajustes · Acerca de y Aviso legal ===== */
#settings-overlay .settings-box{ max-height: 92vh; overflow-y: auto; }
.about-txt{ padding: 6px 14px 10px; color:#e6efff; font-size: 13px; line-height: 1.45; }
.about-txt p{ margin: 0 0 6px; }
.about-btn{ width:100%; margin-top: 6px; border-radius:0 !important; clip-path: var(--px-cut-s); }
#legal-overlay{ z-index: 61; background: repeating-linear-gradient(0deg, rgba(4,10,34,.9) 0 4px, rgba(4,10,34,.84) 4px 8px) !important; }
.legal-box{ max-width: 640px; width: 94%; max-height: 90vh; display:flex; flex-direction:column; text-align:left; padding: 22px 24px !important;
  border-radius:0 !important; border:none !important; clip-path: var(--px-cut); background: var(--px-panel) !important;
  box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px var(--px-light), inset 0 0 0 10px var(--px-dark) !important; }
.legal-box h3{ align-self:center; margin: 0 0 10px; padding: 4px 18px 6px; background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 3px #5a3200; color:#fff; text-shadow: var(--outline); }
.legal-body{ overflow-y:auto; padding: 4px 6px 4px 2px; color:#dfe9ff; font: 13px/1.5 Inter, sans-serif; }
.legal-body h4{ margin: 12px 0 4px; font-family: var(--title-font); font-weight:400; font-size: 18px; color:#ffd84a; text-shadow: var(--outline-thin); }
.legal-body p{ margin: 0 0 6px; }
.legal-body b{ color:#fff; }

/* ===== Bienvenida (3 sobres de regalo) ===== */
.welcome-ov{ z-index: 70; background: repeating-linear-gradient(0deg, rgba(4,10,34,.9) 0 4px, rgba(4,10,34,.84) 4px 8px) !important; }
.welcome-box{ max-width: 620px; width: 94%; text-align:center; padding: 24px !important; border-radius:0 !important; border:none !important; clip-path: var(--px-cut);
  background: var(--px-panel) !important; box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px var(--px-light), inset 0 0 0 10px var(--px-dark) !important; }
.welcome-box h3{ display:inline-block; margin:0 0 12px; padding:4px 18px 6px; background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 3px #5a3200; color:#fff; text-shadow: var(--outline); }
.welcome-box p{ color:#e6efff; margin: 6px 0; }
.welcome-sub{ font-size: 13px; color:#b8c9e6 !important; }
.welcome-packs{ display:flex; justify-content:center; gap: 14px; margin: 14px 0 8px; }
.welcome-packs .pk-pack{ transform: scale(.62); transform-origin: top center; margin: 0 -28px -90px; }
.welcome-box .btn{ margin-top: 10px; }

/* ===================== INTERCAMBIOS (estilo pixel, como la Tienda) ===================== */
.trade-screen{ align-items:center; }
.tr-tabs{ display:flex; gap: 8px; flex-wrap:wrap; justify-content:center; margin-bottom: 14px; }
.tr-tab{
  display:flex; align-items:center; gap: 8px; padding: 6px 14px; border:none; cursor:pointer;
  font-family: var(--title-font); font-size: 18px; letter-spacing:.03em; color:#fff; text-shadow: var(--outline-thin);
  background:#071233; clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 3px var(--rar);
  transition: transform .08s steps(2), filter .08s;
}
.tr-tab b{ font-family:'Inter',sans-serif; font-weight:900; font-size: 13px; color:#071233; background: var(--rar); padding: 1px 7px; clip-path: var(--px-cut-s); text-shadow:none; }
.tr-tab.on{ background: linear-gradient(180deg, var(--rar) 0 50%, color-mix(in srgb, var(--rar) 70%, #000) 50% 100%); box-shadow: inset 0 0 0 3px #071233; }
.tr-tab.on b{ background:#071233; color:#fff; }
.tr-tab:hover{ transform: translateY(-2px); filter: brightness(1.12); }
.tr-body{ display:flex; gap: 20px; justify-content:center; align-items:stretch; flex-wrap:wrap; width: 100%; max-width: 1040px; margin-bottom: 14px; }
.tr-panel{
  --acc:#ffe14a; --acc2:#f2a705;
  padding: 16px 18px 18px; display:flex; flex-direction:column; align-items:center; gap: 10px;
  background: var(--px-panel); clip-path: var(--px-cut);
  box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px var(--acc), inset 0 0 0 10px var(--px-dark);
}
.tr-left{ flex: 1 1 520px; min-height: 360px; }
.tr-right{ flex: 0 0 300px; --acc:#ffe14a; --acc2:#f2a705; }
.tr-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; width: 100%; max-height: 460px; overflow-y:auto; padding: 6px; justify-items:center; }
.tr-card{ border:none; padding:0; background:none; cursor:pointer; transition: transform .12s ease, filter .12s ease; }
.tr-card:not(:disabled):hover{ transform: translateY(-5px) rotate(-1deg); filter: brightness(1.15) drop-shadow(0 6px 0 rgba(0,0,0,.35)); }
.tr-card:not(:disabled):active{ transform: scale(.95); }
.tr-card.used{ filter: grayscale(1) brightness(.5); cursor: default; }
.pk-card.tr-mini{ width: 132px; padding: 6px 6px 8px; gap: 3px; }
.pk-card.tr-mini .pk-card-top{ padding: 5px 6px 0; }
.pk-card.tr-mini .pk-rar{ font-size: 9px; padding: 1px 6px; }
.pk-card.tr-mini .pk-crest{ width: 18px; height: 18px; }
.pk-card.tr-mini .pk-name{ font-size: 16px; max-width: 118px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pk-card.tr-mini .pk-meta{ font-size: 10px; }
.pk-card.tr-mini .pk-tag{ font-size: 10px; margin-bottom: 2px; }
.pk-card.tr-mini .char-face{ image-rendering: pixelated; }
.tr-empty{ color:#cfe2ff; font-size: 14px; text-align:center; margin: 40px 20px; grid-column: 1 / -1; }
.tr-slots{ display:flex; gap: 6px; }
.tr-slot{
  width: 50px; height: 50px; display:flex; align-items:center; justify-content:center; border:none; padding:0;
  background: rgba(4,10,34,.75); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rar) 55%, #071233);
}
.tr-slot.full{ cursor:pointer; box-shadow: inset 0 0 0 3px var(--rar); animation: tr-pop .18s steps(3); }
.tr-slot.full:hover{ filter: brightness(.7); }
@keyframes tr-pop{ 0%{ transform: scale(.6); } 100%{ transform: scale(1); } }
.tr-arrow{ width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 14px solid #ffe14a; filter: drop-shadow(0 3px 0 #071233); }
.tr-result{ display:flex; align-items:center; gap: 12px; color:#e6efff; font-size: 14px; }
.tr-result p{ margin:0; line-height: 1.35; }
.tr-result small{ color:#9fb8e0; }
.tr-mystery{
  width: 64px; height: 76px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, var(--rar) 0 50%, color-mix(in srgb, var(--rar) 65%, #000) 50% 100%);
  clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 3px #071233, inset 0 0 0 6px rgba(255,255,255,.35);
  animation: shop-float 2.4s steps(6) infinite;
}
.tr-mystery b{ font-family: var(--title-font); font-size: 40px; color:#fff; text-shadow: var(--outline); }
.tr-mystery.max b{ font-size: 22px; }
.tr-sep{ width: 100%; height: 4px; background: repeating-linear-gradient(90deg, #6fb0ff 0 8px, transparent 8px 14px); margin: 4px 0; }
.tr-price{ margin:0; color:#e6efff; font-size: 13px; text-align:center; display:flex; align-items:center; gap: 4px; flex-wrap:wrap; justify-content:center; }
.tr-right .shop-btn{ font-size: 18px; }
.tr-msg{
  margin: 0 0 12px; padding: 8px 16px; font-size: 14px; color:#fff; display:flex; align-items:center; gap: 5px;
  background:#5a1220; clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 3px #ff6b6b;
}
.tr-msg.good{ background:#0b3a1a; box-shadow: inset 0 0 0 3px #6be07a; }
.tr-reveal{ position: fixed; inset: 0; z-index: 60; display:flex; align-items:center; justify-content:center; background: rgba(2,6,24,.82); }
.tr-reveal-box{ display:flex; flex-direction:column; align-items:center; gap: 14px; animation: tr-pop .3s steps(4); }
.tr-reveal-title{ margin:0; font-family: var(--title-font); font-size: 38px; color:#ffe14a; text-shadow: var(--outline); letter-spacing:.04em; }
.tr-reveal-card .pk-card{ width: 190px; }
.tr-reveal-card.big .pk-card{ animation: po-glow 1.2s ease-in-out infinite; }
.tr-reveal-box .shop-btn{ width: 200px; }
@media (max-width: 760px){ .tr-right{ flex-basis: 100%; } .tr-slot{ width: 44px; height: 44px; } }

/* huecos de la fusión: como mini cartas boca abajo */
.tr-slot{ width: 50px; height: 64px; background: repeating-linear-gradient(135deg, #14307a 0 6px, #10296a 6px 12px); box-shadow: inset 0 0 0 2px #050c26, inset 0 0 0 4px color-mix(in srgb, var(--rar) 45%, #10296a), inset 0 0 0 5px #050c26; }
.tr-slot.full{ background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--rar) 45%, #10296a) 0%, #0a1a48 75%); box-shadow: inset 0 0 0 2px #050c26, inset 0 0 0 4px var(--rar), inset 0 0 0 5px #050c26; }
.tr-slot.full .char-face{ width: 40px !important; height: 40px !important; }
.tr-mystery{ width: 70px; height: 96px; background: repeating-linear-gradient(135deg, #14307a 0 8px, #10296a 8px 16px) !important; box-shadow: inset 0 0 0 3px #050c26, inset 0 0 0 6px var(--rar), inset 0 0 0 8px #050c26 !important; }
.tr-mystery b{ color: var(--rar); }
/* animación de la fusión: las 5 cartas se juntan en el centro */
.tr-merge{ position: relative; width: 640px; max-width: 94vw; height: 230px; }
.tr-merge-card{ position:absolute; left: 50%; top: 50%; transform: translate(calc(-50% + var(--i) * var(--sp, 128px)), -50%);
  animation: tr-merge 1.05s cubic-bezier(.6,-0.25,.7,.4) .25s forwards; }
.tr-merge-card .pk-card{ animation: back-shake .2s linear infinite; }
@keyframes tr-merge{
  0%{ transform: translate(calc(-50% + var(--i) * var(--sp, 128px)), -50%) rotate(0); opacity: 1; }
  70%{ transform: translate(-50%, -50%) rotate(calc(var(--i) * 6deg)) scale(.85); opacity: 1; filter: brightness(1.6); }
  100%{ transform: translate(-50%, -50%) scale(.3); opacity: 0; filter: brightness(4); }
}
.tr-reveal .po-flip.final .pk-card{ width: 270px; }
.tr-reveal .po-flip.final .pk-face .char-face{ width: 150px !important; height: 150px !important; }
@media (max-width: 760px){ .tr-merge-card{ --s: .6; } .pk-card.tr-mini{ width: 112px; } .tr-grid{ grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } }

/* ===================== BARRAS DE DESPLAZAMIENTO estilo pixel (todo el juego) ===================== */
@supports not selector(::-webkit-scrollbar){ *{ scrollbar-width: thin; scrollbar-color: #ffd84a #071233; } }   /* Firefox */
::-webkit-scrollbar{ width: 14px; height: 14px; }
::-webkit-scrollbar-track{ background: #071233; box-shadow: inset 0 0 0 2px #050c26, inset 0 0 0 4px #1a3a8a; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(90deg, #ffe27a 0 3px, #ffd84a 3px 9px, #f2a705 9px 100%);
  box-shadow: inset 0 0 0 2px #5a3200, inset 0 3px 0 2px rgba(255,255,255,.25);
  border: 2px solid #071233; border-radius: 0;
}
::-webkit-scrollbar-thumb:hover{ background: linear-gradient(90deg, #fff1a0 0 3px, #ffe14a 3px 9px, #ffb81a 9px 100%); }
::-webkit-scrollbar-thumb:active{ background: #f2a705; }
::-webkit-scrollbar-thumb:horizontal{ background: linear-gradient(180deg, #ffe27a 0 3px, #ffd84a 3px 9px, #f2a705 9px 100%); }
::-webkit-scrollbar-button{ display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner{ background: #071233; }

/* ===================== BOTONES PRINCIPALES estilo arcade pixel (Continuar, Listo, Jugar de nuevo…) ===================== */
.btn-primary, .btn-secondary, .btn-purple{
  border-radius: 0 !important; border: none !important;
  clip-path: var(--px-cut-s);
  color: #fff !important; text-shadow: var(--outline-thin);
  font-family: var(--title-font); font-weight: 400; letter-spacing: .05em;
  transition: transform .08s steps(2), filter .08s steps(2) !important;
}
.btn-primary{
  background: linear-gradient(180deg, #ffe27a 0 4px, #ffd84a 4px 50%, #f2a705 50% 100%) !important;
  box-shadow: inset 0 0 0 3px #5a3200, inset 0 0 0 5px #fff1a0, inset 0 -8px 0 rgba(0,0,0,.18) !important;
}
.btn-secondary{
  background: linear-gradient(180deg, #5cb4ff 0 4px, #3f8fe0 4px 50%, #2f6fc8 50% 100%) !important;
  box-shadow: inset 0 0 0 3px #06204a, inset 0 0 0 5px #bfe0ff, inset 0 -8px 0 rgba(0,0,0,.18) !important;
}
.btn-purple{
  background: linear-gradient(180deg, #c48bff 0 4px, #9a55e0 4px 50%, #6a2fb0 50% 100%) !important;
  box-shadow: inset 0 0 0 3px #2a0d5a, inset 0 0 0 5px #e2c8ff, inset 0 -8px 0 rgba(0,0,0,.18) !important;
}
.btn-primary:not(:disabled):hover, .btn-secondary:not(:disabled):hover, .btn-purple:not(:disabled):hover,
.btn-primary:focus-visible, .btn-secondary:focus-visible{ transform: translateY(-2px); filter: brightness(1.1); outline: none; }
.btn-primary:not(:disabled):active, .btn-secondary:not(:disabled):active, .btn-purple:not(:disabled):active{
  transform: translateY(2px); filter: brightness(.95);
}

/* ===================== SUBIDA DE NIVEL más grande y visual ===================== */
#levelup-overlay .overlay-box{ max-width: 720px !important; width: min(720px, 94vw); padding: 28px 32px !important; }
#levelup-overlay .upgrade-row{ gap: 14px; }
#levelup-overlay .upgrade-option{ padding: 13px 18px !important; }
#levelup-overlay .upgrade-option b{ font-size: 24px !important; display:flex !important; align-items:center; gap: 12px; }
#levelup-overlay .upgrade-option b img, #levelup-overlay .upgrade-option b svg{ width: 48px !important; height: 48px !important; image-rendering: pixelated; flex-shrink: 0; }
#levelup-overlay .upgrade-option > span{ font-size: 15px !important; margin-top: 4px; }
#levelup-overlay .upgrade-key{ min-width: 34px !important; font-size: 20px !important; }
#levelup-overlay .overlay-box{ display:flex !important; flex-direction:column !important; align-items:stretch; }
#levelup-overlay .overlay-box > h3{ align-self:center; font-size: 34px !important; }
#levelup-overlay .levelup-hint{ align-self:center; font-size: 15px; }

/* ===================== PANEL DE ESTADÍSTICAS (Tab) a la izquierda ===================== */
.stats-side{
  position:absolute; left: 10px; top: 210px; z-index: 30; width: 250px; pointer-events:none;
  background: var(--px-panel); clip-path: var(--px-cut);
  box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px #ffe14a, inset 0 0 0 10px var(--px-dark);
  padding: 12px 14px 12px; animation: ss-in .18s steps(4);
}
.stats-side.hidden{ display:none; }
@keyframes ss-in{ from{ transform: translateX(-110%); } to{ transform: none; } }
.ss-head{ display:flex; align-items:center; justify-content:space-between; margin: 0 0 8px; padding: 3px 10px 5px;
  font-family: var(--title-font); font-size: 22px; color:#fff; text-shadow: var(--outline-thin); letter-spacing:.04em;
  background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 3px #5a3200; }
.ss-head kbd{ font-family:'Inter',sans-serif; font-weight:900; font-size: 11px; color:#071233; background:#fff1a0; padding: 1px 6px; clip-path: var(--px-cut-s); text-shadow:none; }
.ss-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 3px; }
.ss-list li{ display:flex; align-items:center; gap: 7px; padding: 3px 6px; background: rgba(4,10,34,.6); clip-path: var(--px-cut-s); font-size: 13px; color:#e6efff; }
.ss-ico img{ width: 18px; height: 18px; image-rendering: pixelated; display:block; }
.ss-lbl{ flex:1; }
.ss-val{ font-family:'Inter',sans-serif; font-weight:900; color:#fff; }
.ss-val.up{ color:#7dffa8; }
.ss-foot{ display:flex; justify-content:space-between; margin-top: 8px; font-size: 12px; font-weight: 800; color:#ffe14a; }
.ss-foot span{ display:flex; align-items:center; gap: 4px; }
.hud-kills{ display:inline-flex; align-items:center; gap: 3px; }
.hud-kills img{ image-rendering: pixelated; }

/* ===================== COMPARAR JUGADORES (estilo arcade) ===================== */
.rs-cmp-bar{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin: 4px 0 8px; padding: 6px 8px 6px 14px;
  background: linear-gradient(180deg, #c48bff 0 50%, #9a55e0 50% 100%); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 3px #2a0d5a;
  color:#fff; font-weight: 800; font-size: 14px; text-shadow: var(--outline-thin); animation: po-breathe 1.6s ease-in-out infinite; }
.rs-cmp-bar.hidden{ display:none; }
.rs-cmp-bar .btn{ min-width: 0; padding: 6px 14px; font-size: 15px; }
.rs-card.cmp-a{ outline: 3px solid #c48bff; outline-offset: -3px; }
.cmp-ov{ position: fixed; inset: 0; z-index: 70; display:flex; align-items:center; justify-content:center; overflow-y:auto; padding: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(170,90,255,.35), transparent 60%), rgba(3,6,22,.92); }
.cmp-ov.hidden{ display:none; }
.cmp-box{ width: min(860px, 100%); display:flex; flex-direction:column; align-items:center; gap: 14px; padding: 18px 22px 20px;
  background: var(--px-panel); clip-path: var(--px-cut); box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px #ffe14a, inset 0 0 0 10px var(--px-dark);
  animation: tr-pop .25s steps(4); }
.cmp-sign{ padding: 4px 26px 6px !important; } .cmp-sign h2{ font-size: 28px !important; }
.cmp-top{ display:flex; align-items:center; justify-content:center; gap: 22px; }
.cmp-card{ position:relative; }
.cmp-card .pk-card{ width: 200px; }
.cmp-card .pk-face .char-face{ width: 110px !important; height: 110px !important; }
.cmp-card.best .pk-card{ animation: po-glow 1.2s ease-in-out infinite; }
.cmp-score{ position:absolute; bottom: -10px; left: 50%; transform: translateX(-50%); min-width: 40px; text-align:center;
  font-family: var(--title-font); font-size: 24px; color:#fff; text-shadow: var(--outline-thin);
  background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 3px #5a3200; padding: 0 10px; }
.cmp-card:not(.best) .cmp-score{ background: linear-gradient(180deg, #5cb4ff 0 50%, #2f6fc8 50% 100%); box-shadow: inset 0 0 0 3px #06204a; }
.cmp-vs{ font-family: var(--title-font); font-size: 64px; color:#ffe14a; text-shadow: var(--outline), 0 0 18px rgba(255,200,40,.6); transform: rotate(-8deg); animation: shop-float 1.2s steps(4) infinite; }
.cmp-rows{ width: 100%; display:flex; flex-direction:column; gap: 6px; margin-top: 6px; }
.cmp-row{ display:grid; grid-template-columns: 70px 1fr 130px 1fr 70px; align-items:center; gap: 8px; padding: 4px 8px; background: rgba(4,10,34,.6); clip-path: var(--px-cut-s); }
.cmp-lbl{ text-align:center; font-family: var(--title-font); font-size: 18px; color:#fff; text-shadow: var(--outline-thin); letter-spacing:.03em; }
.cmp-v{ font-family:'Inter',sans-serif; font-weight:900; font-size: 15px; color:#cfe2ff; text-align:center; }
.cmp-v.win{ color:#071233; background:#ffe14a; clip-path: var(--px-cut-s); }
.cmp-bar{ height: 14px; background:#071233; box-shadow: inset 0 0 0 2px #1a3a8a; display:flex; }
.cmp-bar.left{ justify-content:flex-end; }
.cmp-bar i{ display:block; height: 100%; background: repeating-linear-gradient(90deg, var(--c) 0 6px, color-mix(in srgb, var(--c) 70%, #000) 6px 8px); box-shadow: inset 0 0 0 2px rgba(0,0,0,.35); }
.cmp-btns{ display:flex; gap: 12px; flex-wrap:wrap; justify-content:center; }
.cmp-btns .btn{ min-width: 200px; }
@media (max-width: 700px){ .cmp-card .pk-card{ width: 140px; } .cmp-vs{ font-size: 40px; } .cmp-row{ grid-template-columns: 52px 1fr 84px 1fr 52px; } .cmp-lbl{ font-size: 14px; } }

/* retrato del jugador en la partida, un poco más grande */
.hud-portrait{ width: 96px !important; height: 96px !important; }
.hud-portrait .char-face{ width: 92px !important; height: 92px !important; margin: 0 0 -2px !important; }
/* contador de eliminados y monedas: todo alineado */
#hud-coins{ display:inline-flex !important; align-items:center; gap: 6px; line-height: 1; }
#hud-coins img, #hud-coins .coin-ico{ vertical-align: middle; display:inline-block; }
.hud-kills{ display:inline-flex; align-items:center; gap: 4px; line-height: 1; }
.hud-kills img{ width: 18px; height: 18px; display:block; }

/* ===================== RAREZA DE LAS CARTAS DE MEJORA: esquina de color con estrellas ===================== */
#levelup-overlay .upgrade-option.urar{ position: relative; }
.urar-corner{ position:absolute; top: -3px; right: -3px; z-index: 3; display:flex; align-items:center; justify-content:center;
  height: 44px; min-width: 176px; padding: 0 14px 0 46px; box-sizing: border-box; font-style: normal; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5) 0 4px, transparent 4px),
    linear-gradient(180deg, color-mix(in srgb, var(--urc) 70%, #fff) 0 50%, var(--urc) 50% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 36px 100%, 36px calc(100% - 8px), 28px calc(100% - 8px), 28px calc(100% - 16px), 20px calc(100% - 16px), 20px 16px, 12px 16px, 12px 8px, 0 8px);
  box-shadow: inset 0 0 0 4px var(--urd), inset 0 0 0 6px rgba(0,0,0,.35), inset 0 -8px 0 rgba(0,0,0,.2); }
.urar-corner::before{ content:''; position:absolute; left: 22px; top: 9px; width: 4px; height: 4px; background:#fff; box-shadow: 6px 0 0 rgba(255,255,255,.6); opacity:.85; }
.urar-corner u{ display:block; width: 15px; height: 15px; background:#fff;
  clip-path: polygon(50% 0, 62% 36%, 100% 36%, 70% 60%, 82% 100%, 50% 76%, 18% 100%, 30% 60%, 0 36%, 38% 36%);
}
/* borde negro arcade alrededor de las estrellas (el filtro va en el contenedor porque el clip-path recorta las sombras) */
.urar-stars{ display:flex; gap: 4px; align-items:center; margin-top: -2px;
  filter: drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000) drop-shadow(0 3px 0 rgba(0,0,0,.45)); }
.urar-common .urar-corner u{ background:#f2f4f7; }
.urar-epic .urar-corner u{ background:#fff3a0; }
.urar-legendary .urar-corner u{ background:#fffbe0; animation: urar-star 0.8s steps(2) infinite; }
.urar-legendary .urar-corner u:nth-child(2n){ animation-delay: .4s; }
@keyframes urar-star{ 50%{ transform: scale(1.25); background:#ffffff; } }
.urar-legendary .urar-corner, .urar-epic .urar-corner{ animation: urar-tag 1.1s steps(3) infinite; }
@keyframes urar-tag{ 50%{ filter: brightness(1.2); } }
#levelup-overlay .upgrade-option.urar{ border-color: var(--urc) !important; }
#levelup-overlay .upgrade-option.urar b{ padding-right: 182px; }
.rar-gain{ font-style: normal; font-weight: 900; color:#071233; background: var(--urc, #ffe14a); padding: 0 6px; clip-path: var(--px-cut-s); text-shadow: none; }
.docs-rar{ display:inline-block; width: 30px; height: 30px; background: linear-gradient(180deg, color-mix(in srgb, var(--urc) 80%, #fff) 0 50%, var(--urc) 50% 100%); box-shadow: inset 0 0 0 3px var(--urd); clip-path: var(--px-cut-s); }

/* contador de eliminados y monedas: recuadro azul arcade */
#hud-coins{ padding: 5px 12px 6px 9px; gap: 7px !important; font-family:'Inter',sans-serif; font-weight: 900; font-size: 15px; color:#fff; text-shadow: var(--outline-thin);
  background: linear-gradient(180deg, #2456b8 0 50%, #1c469c 50% 100%); clip-path: var(--px-cut-s);
  box-shadow: inset 0 0 0 2px var(--px-dark), inset 0 0 0 4px #8cc4ff, inset 0 -5px 0 rgba(0,0,0,.18); }
#hud-coins .hud-kills{ padding-right: 7px; margin-right: 1px; box-shadow: 2px 0 0 0 rgba(140,196,255,.45); }
/* panel de Tab sin cabecera */
.stats-side{ padding-top: 12px !important; }
.hud-coin-n{ display:inline-flex; align-items:center; gap: 4px; }

/* ===================== RÉCORDS en la portada (izquierda) ===================== */
.records-panel{ position:absolute; left: 18px; bottom: 18px; z-index: 4; width: 270px; box-sizing: border-box; padding: 12px 12px 12px;
  background: var(--px-panel); clip-path: var(--px-cut);
  box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px #ffe14a, inset 0 0 0 10px var(--px-dark);
  display:flex; flex-direction:column; gap: 5px; }
.rec-head{ display:flex; align-items:center; justify-content:center; gap: 7px; margin: 2px 0 4px; padding: 0 10px; height: 32px; line-height: 1; overflow: hidden;
  font-family: var(--title-font); font-size: 17px; white-space: nowrap; color:#fff; text-shadow: var(--outline-thin); letter-spacing:.04em;
  background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 3px #5a3200; }
.rec-head img{ image-rendering: pixelated; }
.rec-row{ display:grid; grid-template-columns: 48px 1fr auto; align-items:center; gap: 6px; padding: 4px 8px 4px 6px;
  background: rgba(4,10,34,.65); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 2px #1a3a8a; }
.rec-row.best{ box-shadow: inset 0 0 0 2px #ffe14a; background: linear-gradient(90deg, rgba(242,183,5,.28), rgba(4,10,34,.65)); }
.rec-pos{ font-family: var(--title-font); font-size: 20px; color:#ffe14a; text-shadow: var(--outline-thin); text-align:center; }
.rec-face .char-face{ width: 44px !important; height: 44px !important; image-rendering: pixelated; display:block; }
.rec-main{ display:flex; flex-direction:column; min-width: 0; }
.rec-main b{ font-family: var(--title-font); font-weight: 400; font-size: 17px; color:#fff; text-shadow: var(--outline-thin); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rec-main small, .rec-stats small{ font-size: 11px; color:#9fb8e0; display:flex; align-items:center; gap: 3px; }
.rec-stats{ display:flex; flex-direction:column; align-items:flex-end; }
.rec-stats b{ font-family:'Inter',sans-serif; font-weight: 900; font-size: 15px; color:#fff; }
.rec-stats img{ image-rendering: pixelated; }
.rec-empty{ margin: 6px 4px 4px; font-size: 13px; line-height: 1.35; color:#cfe2ff; text-align:center; }
.new-record{ color:#ffe14a; }
@media (max-width: 1100px){ .records-panel{ display:none; } }
/* contador de bajas/monedas/tickets: azul oscuro como el panel de estadísticas */
#hud-coins{ background: var(--px-panel) !important; box-shadow: inset 0 0 0 2px var(--px-dark), inset 0 0 0 4px #ffe14a, inset 0 0 0 6px var(--px-dark) !important; padding: 7px 14px 7px 11px !important; }

.upgrade-option b .up-nm{ text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap: 6px; vertical-align: middle; }
.upgrade-option b .up-nm .px-mini{ vertical-align: 0; margin-right: 0; }

/* ===================== MISIONES ===================== */
.ms-screen{ align-items:center; }
.ms-sign-ico{ width: 34px; height: 34px; image-rendering: pixelated; }
.ms-wallet{ display:flex; gap: 14px; align-items:center; }
.ms-wallet span{ display:flex; align-items:center; gap: 5px; font-family:'Inter',sans-serif; font-weight:900; font-size: 16px; color:#fff; }
.ms-tab{ position: relative; }
.ms-dot{ position:absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 4px; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
  font-style: normal; font-family:'Inter',sans-serif; font-weight: 900; font-size: 12px; color:#fff; background:#e0453a; clip-path: var(--px-cut-s); text-shadow:none; }
.ms-all{ margin: 0 0 14px; font-size: 18px; width: auto !important; min-width: 240px; padding: 8px 24px !important; }
.ms-all:disabled{ filter: grayscale(.8) brightness(.7); cursor: default; }
.ms-grid{ column-count: 2; column-gap: 16px; width: 100%; max-width: 1180px; margin-bottom: 16px; }
.ms-grid > .ms-card{ break-inside: avoid; margin-bottom: 16px; }
@media (max-width: 960px){ .ms-grid{ column-count: 1; } }
.ms-card{ --acc:#ffe14a; padding: 14px 16px 14px; background: var(--px-panel); clip-path: var(--px-cut);
  box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px var(--acc), inset 0 0 0 10px var(--px-dark); display:flex; flex-direction:column; gap: 8px; }
.ms-card.full{ --acc:#5fcf7a; }
.ms-head{ display:flex; align-items:center; gap: 10px; padding: 4px 4px 2px; }
.ms-ico{ font-size: 28px; width: 40px; height: 40px; display:flex; align-items:center; justify-content:center; flex: 0 0 40px; background:#071233; clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 2px var(--acc); }
.ms-ico img{ width: 32px !important; height: 32px !important; image-rendering: pixelated; }
.ms-ttl{ display:flex; flex-direction:column; flex: 1; min-width: 0; }
.ms-ttl b{ font-family: var(--title-font); font-weight: 400; font-size: 21px; color:#fff; text-shadow: var(--outline-thin); letter-spacing:.03em; }
.ms-ttl small{ font-size: 13px; color:#cfe2ff; line-height: 1.3; }
.ms-cnt{ font-style: normal; font-family:'Inter',sans-serif; font-weight: 900; font-size: 14px; color:#071233; background: var(--acc); padding: 2px 8px; clip-path: var(--px-cut-s); }
.ms-rows{ display:flex; flex-direction:column; gap: 5px; padding: 2px; }
.ms-row{ display:grid; grid-template-columns: 1fr auto 104px; align-items:center; gap: 10px; padding: 6px 8px 6px 10px; background: rgba(4,10,34,.6); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 2px #1a3a8a; }
.ms-row.done{ box-shadow: inset 0 0 0 2px #ffe14a; background: linear-gradient(90deg, rgba(242,183,5,.25), rgba(4,10,34,.6)); }
.ms-row.got{ box-shadow: inset 0 0 0 2px #2b6a3a; background: rgba(4,20,14,.55); }
.ms-row.got .ms-lbl b, .ms-row.got .ms-rw{ opacity: .55; }
.ms-lbl{ display:flex; flex-direction:column; gap: 3px; min-width: 0; }
.ms-lbl b{ font-family:'Inter',sans-serif; font-weight: 800; font-size: 14px; color:#fff; }
.ms-bar{ display:block; height: 8px; background:#071233; box-shadow: inset 0 0 0 1px #2a4aa0; }
.ms-bar i{ display:block; height: 100%; background: linear-gradient(180deg, #ffe14a 0 50%, #f2a705 50% 100%); }
.ms-num{ font-size: 11px; color:#9fb8e0; }
.ms-rw{ display:flex; gap: 6px; align-items:center; justify-content:flex-end; flex-wrap: wrap; }
.ms-rw span{ display:flex; align-items:center; gap: 3px; font-family:'Inter',sans-serif; font-weight: 900; font-size: 13px; color:#fff; padding: 2px 6px; background:#071233; clip-path: var(--px-cut-s); white-space: nowrap; }
.ms-rw img{ image-rendering: pixelated; }
.ms-rw .ms-rw-y{ box-shadow: inset 0 0 0 2px #f2c94c; }
.ms-rw .ms-rw-p{ box-shadow: inset 0 0 0 2px #b77cff; }
.ms-claim{ font-size: 15px !important; padding: 6px 8px !important; width: 104px; }
.ms-got{ font-size: 13px; font-weight: 800; color:#6fdc8c; text-align:center; }
.ms-lock{ font-size: 12px; color:#7f95c0; text-align:center; }
.menu-item.has-claim small{ color:#ffe14a !important; font-weight: 800; }
.menu-item.has-claim .menu-ico{ animation: ms-pulse 1s steps(2) infinite; }
@keyframes ms-pulse{ 50%{ filter: brightness(1.4) drop-shadow(0 0 6px #ffe14a); } }
/* aviso de misión completada */
#mission-toasts{ position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 9999; display:flex; flex-direction:column; gap: 8px; pointer-events:none; }
.ms-toast{ display:flex; align-items:center; gap: 10px; padding: 10px 18px 10px 12px; background: var(--px-panel); clip-path: var(--px-cut);
  box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 6px #ffe14a, inset 0 0 0 9px var(--px-dark); animation: ms-in .25s steps(4); }
.ms-toast img{ image-rendering: pixelated; }
.ms-toast span{ display:flex; flex-direction:column; line-height: 1.15; }
.ms-toast small{ font-size: 11px; font-weight: 800; color:#ffe14a; text-transform: uppercase; letter-spacing: .08em; }
.ms-toast b{ font-family: var(--title-font); font-weight: 400; font-size: 20px; color:#fff; text-shadow: var(--outline-thin); }
.ms-toast em{ font-style: normal; font-size: 13px; color:#cfe2ff; }
.ms-toast.out{ opacity: 0; transform: translateY(-10px); transition: opacity .5s, transform .5s; }
@keyframes ms-in{ from{ transform: translateY(-16px); opacity: 0; } }

/* ===================== RANDOMLOCKE ===================== */
.menu-item.menu-rl{ background: linear-gradient(180deg, #c81e2a 0 50%, #8e0f18 50% 100%) !important; box-shadow: inset 0 0 0 3px #2a0306, inset 0 -6px 0 rgba(0,0,0,.2) !important; }
.menu-item.menu-rl .menu-text b{ color:#fff; text-shadow: var(--outline-thin); }
.menu-item.menu-rl .menu-text small{ color:#ffd84a !important; font-weight: 800; }
.menu-item.menu-rl:hover{ filter: brightness(1.15); }
.rl-ico img{ width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.rl-pick{ position: fixed; inset: 0; z-index: 9000; display:flex; align-items:center; justify-content:center; background: rgba(20,0,4,.62); }
.rl-pick.hidden{ display:none; }
.rl-box{ display:flex; flex-direction:column; align-items:center; gap: 10px; padding: 26px 34px 24px; max-width: 94vw;
  background: repeating-linear-gradient(180deg, #7a0c14 0 4px, #6a0910 4px 8px); clip-path: var(--px-cut);
  box-shadow: inset 0 0 0 4px #1a0204, inset 0 0 0 7px #ffd84a, inset 0 0 0 10px #1a0204; }
.rl-logo{ width: 80px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(0,0,0,.4)); }
.rl-box h2{ font-family: var(--title-font); font-weight: 400; font-size: 40px; color:#fff; text-shadow: var(--outline); letter-spacing:.05em; margin: 0; }
.rl-sub{ color:#ffd9d4; font-size: 15px; text-align:center; max-width: 560px; margin: 0; }
.rl-sub img{ vertical-align: -4px; image-rendering: pixelated; }
.rl-cards{ display:flex; gap: 22px; margin: 12px 0 6px; flex-wrap: wrap; justify-content:center; }
.rl-card{ width: 170px; height: 250px; border:none; padding:0; background:none; cursor:pointer; perspective: 900px; }
.rl-card:hover:not(.flip) .rl-in{ transform: translateY(-8px) rotate(-1.5deg); }
.rl-in{ position: relative; width:100%; height:100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,1.4,.5,1); }
.rl-card.flip .rl-in{ transform: rotateY(180deg); }
.rl-card.other{ filter: grayscale(.85) brightness(.55); cursor: default; }
.rl-card.chosen .rl-in{ transform: rotateY(180deg) scale(1.06); }
.rl-back, .rl-front{ position:absolute; inset: 0; backface-visibility: hidden; display:flex; align-items:center; justify-content:center; }
.rl-back{ flex-direction: column; gap: 6px; clip-path: var(--px-cut);
  background: repeating-linear-gradient(45deg, #1a1418 0 10px, #2a0a10 10px 20px);
  box-shadow: inset 0 0 0 4px #000, inset 0 0 0 8px #d81e28, inset 0 0 0 11px #000; }
.rl-back img{ width: 96px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 #000); }
.rl-back b{ font-family: var(--title-font); font-weight: 400; font-size: 44px; color:#ffd84a; text-shadow: var(--outline); }
.rl-front{ transform: rotateY(180deg); }
.rl-front .pk-card{ width: 170px; height: 250px; box-sizing: border-box; }
.rl-actions{ display:flex; gap: 14px; align-items:center; margin-top: 6px; }
.rl-actions .shop-btn{ width: auto !important; padding: 10px 26px !important; font-size: 20px; }
.rl-actions .hidden{ display:none; }
.rl-tag{ color:#ff5a4a; }
/* menús del partido en rojo */
body.rl-mode #levelup-overlay .overlay-box, body.rl-mode #talent-overlay .overlay-box, body.rl-mode #relic-overlay .overlay-box{
  background: repeating-linear-gradient(180deg, #7a0c14 0 4px, #6a0910 4px 8px) !important;
  box-shadow: inset 0 0 0 4px #1a0204, inset 0 0 0 7px #ff5a4a, inset 0 0 0 10px #1a0204 !important; }
body.rl-mode #levelup-overlay .overlay-box h3, body.rl-mode #talent-overlay .overlay-box h3, body.rl-mode #relic-overlay .overlay-box h3{
  background: linear-gradient(180deg, #ff4a3c 0 50%, #c81e2a 50% 100%) !important; box-shadow: inset 0 0 0 3px #2a0306 !important; }
body.rl-mode #levelup-overlay .overlay-box p, body.rl-mode #talent-overlay .overlay-box p{ color:#ffd9d4 !important; }
body.rl-mode #levelup-overlay .upgrade-option{
  background: linear-gradient(180deg, #a8121e 0%, #4a060c 100%) !important; border-color: #ff6b5e !important; }
body.rl-mode #levelup-overlay .upgrade-option > span{ border-left-color: #ffd84a !important; color:#ffd9d4 !important; }
body.rl-mode #levelup-overlay .upgrade-option.urar, body.rl-mode #levelup-overlay .upgrade-option{ border: 2px solid #ffd84a !important; }
body.rl-mode .upgrade-option .up-nm{ letter-spacing: .12em; }

/* RandomLocke: se distingue el tipo de carta (pero no cuál es) */
.rl-kind{ font-style: normal; font-family:'Inter',sans-serif; font-weight: 900; font-size: 12px !important; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; color:#fff; background: rgba(0,0,0,.45); clip-path: var(--px-cut-s); text-shadow: none; }
body.rl-mode #levelup-overlay .upgrade-option[data-rlk="tech"]{
  background: linear-gradient(180deg, #3a060c 0%, #12020a 100%) !important; border-color: #ff6b5e !important; }
body.rl-mode #levelup-overlay .upgrade-option[data-rlk="tech"] .rl-kind{ background:#ff4a3c; color:#1a0204; }
body.rl-mode #levelup-overlay .upgrade-option[data-rlk="book"]{ background: linear-gradient(180deg, #1f4a4a 0%, #0a1f22 100%) !important; border-color: #8fe0d8 !important; }
body.rl-mode #levelup-overlay .upgrade-option[data-rlk="book"] .rl-kind{ background:#8fe0d8; color:#0a1f22; }
body.rl-mode #levelup-overlay .upgrade-option[data-rlk="talent"]{ background: linear-gradient(180deg, #5a2a9a 0%, #2c1356 100%) !important; border-color: #c48af0 !important; }
body.rl-mode #levelup-overlay .upgrade-option[data-rlk="talent"] .rl-kind{ background:#c48af0; color:#2c1356; }
body.rl-mode #levelup-overlay .upgrade-option[data-rlk="basic"] .rl-kind{ background:#ffd84a; color:#5a3200; }
/* carta de objeto inicial */
.rl-item{ width: 170px; height: 250px; box-sizing: border-box; padding: 18px 12px; display:flex; flex-direction:column; align-items:center; gap: 10px; text-align:center;
  background: repeating-linear-gradient(180deg, #14307a 0 4px, #112a6c 4px 8px); clip-path: var(--px-cut);
  box-shadow: inset 0 0 0 4px #071233, inset 0 0 0 7px #ffd84a, inset 0 0 0 10px #071233; }
.rl-item-ico{ width: 72px; height: 72px; display:flex; align-items:center; justify-content:center; background:#071233; clip-path: var(--px-cut-s); }
.rl-item-ico img{ width: 64px !important; height: 64px !important; image-rendering: pixelated; }
.rl-item b{ font-family: var(--title-font); font-weight: 400; font-size: 19px; color:#fff; text-shadow: var(--outline-thin); line-height: 1.1; }
.rl-item small{ font-size: 12px; color:#cfe2ff; line-height: 1.3; }
body.rl-mode #levelup-overlay .upgrade-option{ box-shadow: inset 0 -4px 0 rgba(0,0,0,.25) !important; }
.rl-kind{ margin-left: 10px; }

/* RandomLocke: barra de vida verde arcade (el rojo no se veía sobre el campo rojizo) */
.hill-head{ image-rendering: pixelated; }

/* RandomLocke: la vida en un rojo algo más oscuro para que se distinga del campo */
body.rl-mode .hp-bar .bar-fill{ background: #c8261c !important; }
body.rl-mode #talent-overlay .rl-kind{ background:#c48af0; color:#2c1356; }
body.rl-mode #levelup-overlay .upgrade-option[data-rlk="basic"] .rl-kind{ background:#ffd84a; color:#5a3200; }

/* la vista del partido tiene tamaño fijo: el lienzo se escala para llenar su hueco sin deformarse */
#game-canvas{ object-fit: contain; }
#btn-fullscreen.on{ filter: brightness(1.3) drop-shadow(0 0 4px #ffd84a); }
/* RandomLocke: menú de Hillman también rojo (sus técnicas se ven; las nuevas, ???) */
body.rl-mode #hillman-overlay .overlay-box{ background: repeating-linear-gradient(180deg, #7a0c14 0 4px, #6a0910 4px 8px) !important;
  box-shadow: inset 0 0 0 4px #1a0204, inset 0 0 0 7px #ff5a4a, inset 0 0 0 10px #1a0204 !important; }
body.rl-mode #hillman-overlay .overlay-box h3{ background: linear-gradient(180deg, #ff4a3c 0 50%, #c81e2a 50% 100%) !important; box-shadow: inset 0 0 0 3px #2a0306 !important; }
body.rl-mode #hillman-overlay .overlay-box p{ color:#ffd9d4 !important; }
body.rl-mode #hillman-overlay .upgrade-option{ background: linear-gradient(180deg, #a8121e 0%, #4a060c 100%) !important; border: 2px solid #ffd84a !important; box-shadow: inset 0 -4px 0 rgba(0,0,0,.25) !important; }
body.rl-mode #hillman-overlay .upgrade-option[data-rlk="tech"]{ background: linear-gradient(180deg, #3a060c 0%, #12020a 100%) !important; border-color: #ff6b5e !important; }
body.rl-mode #hillman-overlay .upgrade-option[data-rlk="book"]{ background: linear-gradient(180deg, #1f4a4a 0%, #0a1f22 100%) !important; border-color: #8fe0d8 !important; }
body.rl-mode #hillman-overlay .upgrade-option[data-rlk="tech"] .rl-kind{ background:#ff4a3c; color:#1a0204; }
body.rl-mode #hillman-overlay .upgrade-option[data-rlk="book"] .rl-kind{ background:#8fe0d8; color:#0a1f22; }
body.rl-mode #hillman-overlay .upgrade-option > span{ border-left-color: #ffd84a !important; color:#ffd9d4 !important; }

/* iconos pixel: siempre nítidos (sin suavizado) */
.px-mini, .px-ico{ image-rendering: pixelated; }
/* comparar: sin animación de entrada de las cartas (aparece directamente) */
.cmp-ov .cmp-box, .cmp-ov .pk-card, .cmp-ov .pk-card *{ animation: none !important; transition: none !important; }
.cmp-ov .cmp-card.best .pk-card{ animation: po-glow 1.2s ease-in-out infinite !important; }
#settings-overlay .set-note{ margin: -2px 14px 6px 50px; font-size: 12px; line-height: 1.35; color: #9fb3d6; font-weight: 500; }
/* cuenta atrás del árbitro / Hillman, pequeña bajo el temporal */
.hud-timers{ display:block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; font-family: var(--sub-font); font-size: 11px; color: #e6efff;
  text-shadow: 0 1px 2px #000; background: rgba(8,20,40,0.6); white-space: nowrap; }
.hud-timers b{ color: #ffe14a; }
.hud-timers.hidden{ display:none; }

/* 10 huecos de fusión: dos filas de 5 */
.tr-slots{ flex-wrap: wrap; justify-content: center; max-width: 320px; }
.tr-slots{ gap: 5px; max-width: 250px; }
.tr-slots .tr-slot{ width: 44px; height: 56px; }
.tr-slots .tr-slot.full .char-face{ width: 36px !important; height: 36px !important; }

/* =====================================================================
   CUENTA Y RANKING (mismo estilo pixel que Ajustes)
   ===================================================================== */
.px-ov{ background: repeating-linear-gradient(0deg, rgba(4,10,34,.88) 0 4px, rgba(4,10,34,.82) 4px 8px) !important; z-index: 60; }
.px-ov .settings-box{ border-radius: 0 !important; border: none !important; text-align: center; background: var(--px-panel) !important;
  box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px var(--px-light), inset 0 0 0 10px var(--px-dark), 8px 8px 0 rgba(0,0,0,.45) !important;
  padding: 24px 26px 22px !important; max-width: 560px !important; max-height: 92vh; overflow-y: auto; }
.px-ov .rk-box{ max-width: 760px !important; }
.px-ov .settings-box h3{ display: inline-block; margin: 0 0 8px !important; padding: 5px 28px 7px;
  background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 3px #5a3200;
  color: #fff !important; text-shadow: var(--outline) !important; font-size: 30px !important; }
.px-ov .sp-box{ text-align: left; border-radius: 0 !important; border: none !important; background: rgba(4,10,34,.55) !important;
  box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #3f6fc8 !important; padding: 0 0 12px; }
.px-ov .sp-title{ margin: 0 0 8px; padding: 5px 12px 6px; background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%) !important; color: #fff !important;
  text-shadow: var(--outline-thin) !important; box-shadow: inset 0 0 0 3px var(--px-dark) !important; font-family: var(--title-font); font-weight: 400; font-size: 19px; letter-spacing: .04em; }
.px-ov .px-close{ border-radius: 0 !important; border: none !important; clip-path: var(--px-cut-s); background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%) !important;
  box-shadow: inset 0 0 0 3px #5a3200 !important; color: #fff !important; font-family: var(--title-font); font-size: 22px; text-shadow: var(--outline-thin); padding: 10px 34px; }
.acc-p{ margin: 6px 14px; color: #dbe9ff; font-size: 14px; }
.acc-user{ color: #ffe14a; font-size: 17px; }
.acc-note{ margin: 10px 14px 0; font-size: 12px; line-height: 1.4; color: #9fb3d6; }
.acc-msg{ margin: 10px 14px 0; min-height: 18px; font-size: 13px; font-weight: 700; color: #8be28f; }
.acc-msg.err{ color: #ff8a7a; }
.acc-tabs, .rk-tabs{ display: flex; gap: 6px; margin: 4px 14px 10px; flex-wrap: wrap; justify-content: center; }
.rk-sep{ width: 14px; }
.acc-tab{ flex: 0 0 auto; padding: 6px 16px; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 13px; color: #cfe0ff;
  background: #10296a; box-shadow: inset 0 0 0 2px #050c26, inset 0 0 0 3px #3f6fc8; }
.acc-tab.on{ color: #2a1800; background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%); box-shadow: inset 0 0 0 2px #5a3200; }
.acc-form{ display: flex; flex-direction: column; gap: 8px; margin: 0 14px; }
.acc-in{ padding: 9px 12px; border: none; outline: none; font-family: 'Inter', sans-serif; font-size: 15px; color: #fff; background: #071233;
  box-shadow: inset 0 0 0 2px #6fb0ff; border-radius: 0; min-width: 0; }
.acc-in:focus{ box-shadow: inset 0 0 0 2px #ffe14a; }
.acc-row{ display: flex; gap: 8px; margin: 8px 14px 0; flex-wrap: wrap; }
.acc-row .acc-in{ flex: 1 1 160px; }
.acc-btn{ flex: 1 1 auto; padding: 9px 14px; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 14px; color: #fff;
  background: linear-gradient(180deg, #4f8ff0 0 50%, #2f6fd6 50% 100%); box-shadow: inset 0 0 0 2px #071233; clip-path: var(--px-cut-s); text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.acc-btn:hover{ filter: brightness(1.12); }
.acc-btn.main{ color: #2a1800; text-shadow: none; background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%); box-shadow: inset 0 0 0 2px #5a3200; font-size: 16px; }
.acc-btn.ghost{ background: linear-gradient(180deg, #44506a 0 50%, #2e384d 50% 100%); }
.acc-btn.danger{ background: linear-gradient(180deg, #e2543f 0 50%, #b8321f 50% 100%); }
.acc-btn.google{ display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 14px; width: calc(100% - 28px); color: #1b1d26; text-shadow: none;
  background: linear-gradient(180deg, #ffffff 0 50%, #e4e9f2 50% 100%); }
.g-ico{ font-style: normal; font-weight: 900; font-size: 18px; color: #4285f4; }
.acc-or{ display: flex; align-items: center; gap: 10px; margin: 10px 14px; color: #9fb3d6; font-size: 12px; }
.acc-or::before, .acc-or::after{ content: ''; flex: 1; height: 2px; background: #3f6fc8; }
.acc-pick{ display: block; width: calc(100% - 28px); margin: 8px 14px 0; padding: 10px 14px; text-align: left; border: none; cursor: pointer; color: #fff;
  background: #10296a; box-shadow: inset 0 0 0 2px #050c26, inset 0 0 0 4px #3f6fc8; font-family: 'Inter', sans-serif; }
.acc-pick:hover{ box-shadow: inset 0 0 0 2px #050c26, inset 0 0 0 4px #ffe14a; }
.acc-pick b{ display: block; font-size: 15px; color: #ffe14a; }
.acc-pick small{ display: block; margin-top: 3px; font-size: 12px; color: #cfe0ff; }
#btn-account.logged{ box-shadow: inset 0 0 0 2px var(--px-dark), inset 0 0 0 4px #8be28f !important; }
/* tabla del ranking */
.rk-list{ max-height: 56vh; overflow-y: auto; background: rgba(4,10,34,.55); box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #3f6fc8; padding: 6px; }
.rk-table{ width: 100%; border-collapse: collapse; font-family: 'Inter', sans-serif; font-size: 14px; color: #e6efff; }
.rk-table th{ position: sticky; top: 0; background: #0b1a48; color: #ffd862; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 6px; text-align: left; }
.rk-table td{ padding: 4px 6px; text-align: left; }
.rk-table tbody tr:nth-child(odd){ background: rgba(111,176,255,.10); }
.rk-table tr.me{ background: rgba(255,225,74,.22) !important; }
.rk-table tr.top1 td:first-child{ color: #ffd84a; font-weight: 900; }
.rk-table tr.top2 td:first-child{ color: #d6e2f8; font-weight: 900; }
.rk-table tr.top3 td:first-child{ color: #e0a060; font-weight: 900; }
.rk-char{ display: flex; align-items: center; gap: 6px; }
.rk-char span{ font-size: 12px; color: #bcd0f5; }
.rk-me{ margin: 10px 0 0; font-weight: 800; color: #ffe14a; }
.acc-run{ margin-top: 8px; }
.acc-run small{ color: #bcd0f5; }
.acc-run-btn{ margin-top: 4px; padding: 6px 12px; border: none; cursor: pointer; font-weight: 800; color: #2a1800; background: #ffe14a; clip-path: var(--px-cut-s); }

/* =====================================================================
   PAUSA COMPACTA: todo a la vista sin desplazar (3 columnas)
   ===================================================================== */
#pause-overlay .pause-box{ max-width: 1180px !important; width: 96vw; max-height: 96vh; overflow-y: auto; padding: 16px 18px 14px !important; }
#pause-overlay .sp-head{ padding: 6px 12px; gap: 12px; }
#pause-overlay .sp-portrait{ width: 52px !important; height: 52px !important; }
#pause-overlay .sp-name{ font-size: 24px; line-height: 1.05; }
#pause-overlay .sp-id{ flex: 1 1 auto; min-width: 0; }
#pause-overlay .sp-head-el{ flex: 0 0 auto; margin-left: auto; }
#pause-overlay .sp-head-el .sp-arch{ padding: 4px 12px; gap: 8px; background: #0b1a44; clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 2px var(--c, #3f6fc8); }
#pause-overlay .sp-head-el .sp-arch b{ font-size: 18px; color: #fff; }
#pause-overlay .sp-head-el .sp-passive-tip{ left: auto; right: 0; }
#pause-overlay .pause-cols.pause-3{ display: grid; grid-template-columns: 1fr 1.15fr 1.25fr; gap: 10px; margin-top: 10px; align-items: start; }
#pause-overlay .pause-3 .sp-boxes{ margin-top: 0; gap: 10px; }
#pause-overlay .sp-box{ padding: 0 0 4px; }
#pause-overlay .sp-box .sp-title{ font-size: 16px; padding: 3px 10px 4px; margin-bottom: 2px; }
#pause-overlay .sp-box .sp-list{ padding: 3px 6px; gap: 1px; }
#pause-overlay .sp-list li{ padding: 3px 8px; min-height: 0; font-size: 13px; }
#pause-overlay .sp-list li .sp-ico img{ max-width: 18px; max-height: 18px; }
#pause-overlay .sp-lvl{ font-size: 11px; padding: 1px 7px; }
/* mejoras en dos columnas */
#pause-overlay .sp-mejoras .sp-list{ display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
#pause-overlay .sp-mejoras .sp-list li.sp-empty{ grid-column: 1 / -1; }
/* objeto con su descripción */
#pause-overlay .sp-relic-li{ align-items: center; gap: 8px; }
#pause-overlay .sp-relic-li .sp-lbl{ display: flex; flex-direction: column; gap: 1px; }
#pause-overlay .sp-relic-li .sp-lbl b{ color: #ffe14a; font-size: 13px; }
#pause-overlay .sp-relic-li .sp-lbl small{ font-size: 11px; line-height: 1.3; color: #bcd0f5; }
#pause-overlay .sp-relic-li .sp-ico img, #pause-overlay .sp-relic-li .sp-ico canvas{ max-width: 30px !important; max-height: 30px !important; }
#pause-overlay .sp-empty{ font-size: 12px !important; color: #9fb3d6 !important; }
#pause-overlay .pause-actions{ margin-top: 10px; }
#pause-overlay .pause-actions .btn{ padding: 8px 22px; font-size: 18px; }
@media (max-width: 900px){ #pause-overlay .pause-cols.pause-3{ grid-template-columns: 1fr 1fr; } #pause-overlay .sp-mejoras{ grid-column: 1 / -1; } }
@media (max-width: 600px){ #pause-overlay .pause-cols.pause-3{ grid-template-columns: 1fr; } #pause-overlay .sp-mejoras .sp-list{ grid-template-columns: 1fr; } }
#pause-overlay .pause-3 > .sp-box, #pause-overlay .pause-3 .sp-boxes .sp-box{ margin-top: 0 !important; }
#pause-overlay .sp-head-el .sp-arch-tip{ border: none; }
/* panel de pruebas (solo versión de pruebas) más compacto */
#pause-overlay .sp-dev{ margin-top: 10px; }
#pause-overlay .sp-dev .dev-row .dev-ult{ min-height: 30px; padding: 3px 4px; }
#pause-overlay .sp-head-el{ border: none !important; box-shadow: none !important; background: none !important; padding: 0 !important; }
/* nombre de la cuenta en la barra de arriba */
.acc-name-pill{ height: 38px; padding: 0 14px; border: none; cursor: pointer; display: inline-flex; align-items: center;
  font-family: 'Inter', sans-serif; font-weight: 900; font-size: 14px; color: #ffe14a; text-shadow: 0 1px 0 #000; max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  clip-path: var(--px-cut-s); background: linear-gradient(180deg, #14307a 0 50%, #102766 50% 100%); box-shadow: inset 0 0 0 2px var(--px-dark), inset 0 0 0 4px #8be28f; }
.acc-name-pill:hover{ transform: translateY(-2px); }
.acc-name-pill.hidden{ display: none; }

/* =====================================================================
   PAUSA VERTICAL (2 columnas en un panel estrecho y alto) + botón Reiniciar
   ===================================================================== */
#pause-overlay .pause-box{ max-width: 680px !important; width: 94vw; max-height: 96vh; overflow-y: auto; padding: 14px 16px 12px !important; }
#pause-overlay .pause-cols.pause-v{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; align-items: start; }
#pause-overlay .pause-v .sp-boxes{ margin-top: 0; gap: 10px; }
#pause-overlay .pause-v .sp-box{ margin-top: 0 !important; }
#pause-overlay .pause-v .sp-mejoras .sp-list{ display: flex; flex-direction: column; }
#pause-overlay .pause-v .sp-list li{ font-size: 12.5px; padding: 3px 7px; }
#pause-overlay .pause-v .sp-relic-li .sp-lbl small{ font-size: 10.5px; }
#pause-overlay .sp-head-el .sp-arch b{ font-size: 15px; }
#pause-overlay .sp-name{ font-size: 21px; }
#pause-overlay .pause-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
#pause-overlay .pause-actions .btn{ width: 100%; margin: 0; padding: 8px 10px; font-size: 17px; }
#pause-overlay #btn-restart{ background: linear-gradient(180deg, #3fae4a 0 50%, #2b8a36 50% 100%) !important; color: #fff !important;
  box-shadow: inset 0 0 0 3px #0c3311, inset 0 0 0 5px #a6e36e !important; border: none !important; border-radius: 0 !important; clip-path: var(--px-cut-s); font-family: var(--title-font); text-shadow: var(--outline-thin); }
@media (max-width: 560px){ #pause-overlay .pause-cols.pause-v{ grid-template-columns: 1fr; } }
.dev-relic.on{ box-shadow: inset 0 0 0 3px #ffe14a !important; }
/* Revista de Fútbol: mejora extra que trae cada carta */
.upgrade-option .rev-bonus{ display:flex; align-items:center; gap:6px; margin-top:6px; padding:4px 8px; border-radius:6px;
  background: rgba(63,143,224,.18); border:1px solid rgba(159,210,255,.45); color:#cfe8ff; font-size:12.5px; font-weight:600; text-align:left; }
.upgrade-option .rev-bonus .px-mini{ flex:none; }
/* RandomLocke bloqueado */
.menu-item.menu-rl.rl-locked{ filter: grayscale(.85) brightness(.75); cursor: not-allowed; }
.menu-item.menu-rl.rl-locked:hover{ filter: grayscale(.85) brightness(.8); }
#btn-restart kbd{ font: inherit; font-size: .8em; padding: 0 5px; margin-left: 6px; border-radius: 4px; background: rgba(0,0,0,.25); }
/* ---- tutorial (estilo arcade pixel) ---- */
.tut-ov{ z-index:300; background: rgba(4,10,32,.82) !important; }
.tut-box{ position:relative; max-width:800px !important; width:94vw; text-align:center; border-radius:0 !important; border:none !important;
  clip-path: var(--px-cut); background: var(--px-panel) !important; image-rendering: pixelated; padding: 22px 26px 24px !important;
  box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px var(--px-light), inset 0 0 0 10px var(--px-dark) !important; }
.tut-box h3{ display:inline-block; margin:0 0 12px; padding:4px 24px 6px; color:#fff; font-family: var(--title-font); font-weight:400; font-size:26px; letter-spacing:.04em;
  background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 3px #5a3200; text-shadow: var(--outline); }
.tut-img{ padding:6px; background:#071233; clip-path: var(--px-cut); box-shadow: inset 0 0 0 3px #8cc4ff, inset 0 0 0 6px #071233; }
.tut-img img{ width:100%; display:block; clip-path: var(--px-cut-s); image-rendering: auto; }
.tut-t{ display:inline-block; margin:14px 0 6px; padding:3px 16px 5px; font-family: var(--title-font); font-weight:400; font-size:24px; letter-spacing:.03em; color:#fff;
  text-shadow: var(--outline-thin); background: linear-gradient(180deg, #2b62c8 0 50%, #1d4aa0 50% 100%); clip-path: var(--px-cut-s);
  box-shadow: inset 0 0 0 2px var(--px-dark), inset 0 0 0 4px #8cc4ff; }
.tut-d{ margin:0 auto 10px; max-width:680px; min-height:3.2em; padding:10px 14px; color:#e6efff; font:15px/1.45 Inter, sans-serif;
  background:#0b1a44; box-shadow: inset 0 0 0 2px #3f6fc8; clip-path: var(--px-cut-s); }
.tut-d b{ color:#ffd84a; }
.tut-d kbd, .tut-doc kbd{ display:inline-block; min-width:18px; padding:0 5px; font:700 12px Inter, sans-serif; color:#0b1a44; background:linear-gradient(180deg,#fff 0 55%,#cfd8e6 55%);
  box-shadow: inset 0 0 0 2px #071233; clip-path: var(--px-cut-s); }
.tut-dots{ display:flex; gap:6px; justify-content:center; margin:8px 0 14px; }
.tut-dots i{ width:12px; height:12px; background:#1d3f8f; box-shadow: inset 0 0 0 2px #071233; cursor:pointer; }
.tut-dots i.on{ background:#ffd84a; box-shadow: inset 0 0 0 2px #5a3200; }
.tut-nav{ display:flex; gap:10px; justify-content:center; }
.tut-nav .btn{ min-width:150px; }
.tut-nav button[disabled]{ opacity:.35; pointer-events:none; }
.tut-doc{ display:flex; gap:12px; align-items:flex-start; margin:10px 0; padding:12px 14px; clip-path: var(--px-cut);
  background: var(--px-panel); box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px #4f7fd6, inset 0 0 0 7px var(--px-dark); }
.tut-doc img{ width:220px; max-width:40%; cursor:pointer; flex-shrink:0; clip-path: var(--px-cut-s); box-shadow: 0 0 0 3px #8cc4ff; }
.tut-doc b{ font-family: var(--title-font); font-weight:400; font-size:18px; color:#fff; text-shadow: var(--outline-thin); }
.tut-doc p{ margin:4px 0 0; line-height:1.4; }
.tut-open{ margin-left:8px; font-size:16px !important; padding:4px 14px !important; }
/* ---- llave de evolución en las cartas de mejora ---- */
.evo-key{ display:block; margin-top:6px; padding:3px 8px; font:700 11px Inter, sans-serif; color:#0b1a44; background:linear-gradient(180deg,#ffe27a 0 50%,#f2b705 50%); clip-path: var(--px-cut-s); }
/* ---- tienda: abrir varios sobres ---- */
.shop-qty{ display:flex; gap:6px; align-items:center; justify-content:center; margin:2px 0 8px; color:#cfe2ff; font:700 14px Inter, sans-serif; }
.shop-qty-b{ border:none; cursor:pointer; padding:5px 12px; font-family: var(--title-font); font-size:18px; color:#fff; text-shadow: var(--outline-thin); clip-path: var(--px-cut-s);
  background: linear-gradient(180deg, #1f4ba8 0 50%, #173d8c 50% 100%); box-shadow: inset 0 0 0 2px var(--px-dark); }
.shop-qty-b.on{ background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%); box-shadow: inset 0 0 0 2px #5a3200; }
.pack-open.bulk{ overflow-y:auto; justify-content:flex-start; padding-top:24px; }
.bk-grid{ max-width:min(1100px, 94vw); }
.bk-reps{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; align-items:center; }
.bk-rep{ padding:2px 8px; color:#fff; background:#0b1a44; box-shadow: inset 0 0 0 2px var(--rar); clip-path: var(--px-cut-s); }
/* ---- movimiento con ratón: cursor de balón ---- */
/* cursor arcade: punta de flecha pixel (azul, borde dorado y contorno marino, como los paneles del juego) */
html, body, *:not(input[type="text"]):not(input[type="email"]):not(input[type="password"]):not(textarea){ cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABKklEQVR4nM3XvUrDUBjG8X9EaOeW4tSxq4NxqpdQOngJuknBS+igs4vQVbwDB3Fyz2S1dBBcnJzsB4LL6RSH9i0kbQ8pNnnfZ8k5IR/n+RFIQqkSxqVKGKOUPa0bryxAS0JdYF8GbvICQLl6HAPMpv2giAXYEZC46ACAcjMsRMKewM34CQAXtYD8JQwJfLQWg7nAyf0dAC46B/KTMCSwIXlL2BX4/hwk5o3uJQAuugV2J2FH4PfteT6o+08QiVGvDUCt8z8JdYFAvgFGvSEARw+P3hNeT9tr99c6h8D2EuoCq2/Dn6/E/P3sIjGXppsiolkl7AlIpHm68Wzav8547avFtus7yJ5AurmnsbdZ1tgT8DTfSeN01AWC9N9QUc0l6gLLZ6Do5hJ1gT+lFGyrkqHW1QAAAABJRU5ErkJggg==") 1 1, auto !important; }
.bk-cell{ position:relative; }
.bk-n{ position:absolute; top:-6px; right:-6px; z-index:2; padding:2px 7px; font-family: var(--title-font); font-weight:400; font-size:18px; color:#fff; text-shadow: var(--outline-thin);
  background: linear-gradient(180deg, #ff6b5e 0 50%, #d8352a 50%); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 2px #3a0a06; }
/* 2º hueco de objeto (tras la mezcla de 4) */
#hud-relic, #hud-relic2{ display:inline-flex; vertical-align: top; }
#hud-relic2{ margin-left: 8px !important; }
#hud-relic2.hidden{ display:none !important; }
#hud-relic.two::after{ content: none; }
#hud-relic2::after{ content: 'OBJETOS'; }
/* ---- novedades (campanita) ---- */
#btn-news{ position: relative; }
#btn-news.has-dot::after{ content:''; position:absolute; top:4px; right:4px; width:10px; height:10px; background:#ff3b30; box-shadow: 0 0 0 2px #071233; border-radius:50%; }
.news-box{ text-align:left; }
.news-box > h3{ display:table; margin:0 auto 12px; }
.news-body{ max-height: min(62vh, 560px); overflow-y:auto; padding:4px 6px 4px 2px; }
.news-ver .tut-t{ margin-top:4px; }
.news-date{ color:#9fc0ff; font:600 13px Inter, sans-serif; margin:0 0 8px; }
.news-g{ margin:0 0 12px; padding:10px 14px; background:#0b1a44; box-shadow: inset 0 0 0 2px #3f6fc8; clip-path: var(--px-cut-s); }
.news-g ul{ margin:8px 0 0; padding-left:20px; color:#e6efff; font:14px/1.5 Inter, sans-serif; }
.news-g li{ margin:3px 0; }
.news-g li b{ color:#ffd84a; }
.news-tag{ display:inline-block; padding:2px 12px 3px; font-family: var(--title-font); font-weight:400; font-size:18px; color:#fff; text-shadow: var(--outline-thin); clip-path: var(--px-cut-s); }
.news-new{ background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50%); box-shadow: inset 0 0 0 2px #5a3200; }
.news-chg{ background: linear-gradient(180deg, #3a78e8 0 50%, #2456b8 50%); box-shadow: inset 0 0 0 2px #071233; }
.news-fix{ background: linear-gradient(180deg, #4fd05a 0 50%, #2f9a3a 50%); box-shadow: inset 0 0 0 2px #0a3a12; }
.rk-note{ margin: 6px 0 8px; font: 600 13px Inter, sans-serif; color: #9fc0ff; text-align: center; }
/* versión debajo del logo */
.logo-ver{ display:inline-block; margin: -6px 0 0 18px; padding: 3px 14px 4px; font-family: var(--title-font); font-size: 20px; letter-spacing: .06em; color:#fff;
  text-shadow: var(--outline-thin); background: linear-gradient(180deg, #2b62c8 0 50%, #1d4aa0 50% 100%); clip-path: var(--px-cut-s);
  box-shadow: inset 0 0 0 2px #071233, inset 0 0 0 4px #8cc4ff; }
/* balones de poder: se pueden usar con clic */
.pball-bar .pb-slot{ pointer-events: auto; }
/* =====================================================================
   BANQUILLO (debajo del titular) Y SINERGIAS
   ===================================================================== */
.showcase{ transform: translate(-50%, -200px) !important; gap: 8px !important; }
.bench{ display:flex; flex-direction:column; align-items:center; gap:6px; padding: 8px 10px 10px; min-width: 300px;
  background: var(--px-panel); clip-path: var(--px-cut); box-shadow: inset 0 0 0 3px var(--px-dark), inset 0 0 0 5px var(--px-light), inset 0 0 0 7px var(--px-dark); }
.bench-head{ display:flex; align-items:baseline; gap:8px; }
.bench-head b{ font-family: var(--title-font); font-weight:400; font-size:18px; letter-spacing:.06em; color:#fff; text-shadow: var(--outline-thin); text-transform: uppercase; }
.bench-head small{ color:#9fc0ff; font:600 11px Inter, sans-serif; }
.bench-slots{ display:flex; gap:8px; }
.bench-slot{ position:relative; width: 82px; height: 92px; border:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:4px 2px 4px;
  background: linear-gradient(180deg, #1d4296 0%, #0c2052 80%); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 2px #071233, inset 0 0 0 4px #4f7fd6; }
.bench-slot.full{ box-shadow: inset 0 0 0 2px #071233, inset 0 0 0 4px var(--rar, #4f7fd6); }
.bench-slot:hover{ filter: brightness(1.15); }
.bench-slot .char-face{ width:52px !important; height:52px !important; }
.bench-slot em{ font: 700 10px Inter, sans-serif; font-style: normal; color:#fff; max-width: 78px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: var(--outline-thin); }
.bench-el{ position:absolute; top:4px; right:5px; line-height:0; }
.bench-plus{ font-family: var(--title-font); font-size: 34px; color:#8cc4ff; line-height: 1; margin-bottom: 8px; text-shadow: var(--outline-thin); }
.bench-syn{ border:none; cursor:pointer; padding: 4px 16px 5px; font-family: var(--title-font); font-size: 17px; color:#fff; text-shadow: var(--outline-thin);
  background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 2px #5a3200; }
.bench-syn b{ display:inline-block; min-width: 20px; margin-left: 4px; padding: 0 5px; background:#071233; color:#ffd84a; clip-path: var(--px-cut-s); }
/* ventana de elegir suplente / ver sinergias */
.bench-ov{ z-index: 290; background: rgba(4,10,32,.82) !important; }
.bench-box{ max-width: 1040px !important; width: 96vw; max-height: 92vh; display:flex; flex-direction:column; text-align:left; border-radius:0 !important; border:none !important;
  clip-path: var(--px-cut); background: var(--px-panel) !important; padding: 18px 22px 20px !important;
  box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px var(--px-light), inset 0 0 0 10px var(--px-dark) !important; }
.bench-box > h3{ align-self:center; margin:0 0 10px; padding:4px 24px 6px; color:#fff; font-family: var(--title-font); font-weight:400; font-size:26px; letter-spacing:.04em;
  background: linear-gradient(180deg, #ffd84a 0 50%, #f2a705 50% 100%); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 3px #5a3200; text-shadow: var(--outline); }
.bench-filters{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom: 10px; }
.bench-filters input, .bench-filters select{ font: 600 13px Inter, sans-serif; color:#fff; background:#0b1a44; border:none; padding: 6px 8px; box-shadow: inset 0 0 0 2px #3f6fc8; clip-path: var(--px-cut-s); }
.bench-filters input{ flex: 1 1 160px; }
.bench-cols{ display:flex; gap:12px; min-height:0; flex:1; }
.bench-grid{ flex: 1 1 60%; overflow-y:auto; display:grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap:6px; align-content:start; max-height: 58vh; padding-right: 4px; }
.bench-side, .syn-col{ flex: 1 1 40%; overflow-y:auto; max-height: 58vh; padding: 8px 10px; background:#0b1a44; box-shadow: inset 0 0 0 2px #3f6fc8; clip-path: var(--px-cut-s); }
.syn-col{ flex-basis: 50%; }
.bench-side h4, .syn-col h4{ margin: 2px 0 6px; font-family: var(--title-font); font-weight:400; font-size:18px; color:#ffd84a; text-shadow: var(--outline-thin); }
.bench-pick{ position:relative; display:flex; align-items:center; gap:8px; padding: 5px 8px; border:none; cursor:pointer; text-align:left; color:#fff;
  background: linear-gradient(180deg, #2456b8 0 50%, #1c469c 50% 100%); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 2px #071233, inset 3px 0 0 var(--rar, #8cc4ff); }
.bench-pick:hover{ filter: brightness(1.15); }
.bench-pick.on{ background: linear-gradient(180deg, #fff7c8 0 50%, #ffe070 50% 100%); color:#0b1a44; }
.bench-pick .char-face{ width:48px !important; height:48px !important; flex: none; }
.bp-txt{ display:flex; flex-direction:column; min-width:0; }
.bp-txt b{ font: 700 13px Inter, sans-serif; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; }
.bp-txt small{ font: 600 10px Inter, sans-serif; opacity:.85; display:flex; align-items:center; gap:3px; white-space:nowrap; }
.bp-gain{ position:absolute; top:4px; right:6px; font: 800 12px Inter, sans-serif; font-style: normal; color:#0b1a44; padding: 0 5px; background:#7dff8a; clip-path: var(--px-cut-s); }
.bench-remove{ justify-content:center; font: 700 13px Inter, sans-serif; background: linear-gradient(180deg, #ff6b5e 0 50%, #d8352a 50%); }
.bench-empty{ color:#9fc0ff; font: 600 13px Inter, sans-serif; }
.bench-tip{ color:#9fc0ff; font: 12px Inter, sans-serif; margin-top: 8px; }
.syn-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.syn-list li{ padding: 6px 8px; background: #14307a; box-shadow: inset 0 0 0 2px #071233, inset 4px 0 0 var(--sc, #8cc4ff); clip-path: var(--px-cut-s); color:#e6efff; }
.syn-list li b{ font-family: var(--title-font); font-weight:400; font-size:16px; color:#fff; text-shadow: var(--outline-thin); margin-right: 6px; }
.syn-list li small{ display:block; font: 12px/1.35 Inter, sans-serif; color:#cfe2ff; }
.syn-list li.syn-off{ opacity: .55; }
.syn-list.compact li small{ font-size: 11px; }
.syn-tag{ display:inline-block; margin-right:6px; padding: 0 6px; font: 800 10px Inter, sans-serif; text-transform: uppercase; color:#0b1a44; background: var(--sc, #8cc4ff); clip-path: var(--px-cut-s); vertical-align: 2px; }
.syn-list .cat-el{ --sc:#ff8a5e; } .syn-list .cat-rar{ --sc:#ffd84a; } .syn-list .cat-pos{ --sc:#7dff8a; } .syn-list .cat-size{ --sc:#c7a6ff; } .syn-list .cat-team{ --sc:#6bd3ff; }
.syn-pips{ display:inline-flex; gap:3px; vertical-align: 1px; }
.syn-pips u{ display:inline-block; width:9px; height:9px; background:#1d3f8f; box-shadow: inset 0 0 0 2px #071233; }
.syn-pips u.on{ background:#ffd84a; box-shadow: inset 0 0 0 2px #5a3200; }
.syn-total{ color:#fff; font: 600 13px/1.5 Inter, sans-serif; }
.syn-total small{ color:#ffd84a; }
@media (max-height: 760px){ .showcase{ transform: translate(-50%, -230px) scale(.9) !important; } }
.sp-syn-box .sp-relic-li{ padding: 3px 8px !important; }
.sp-syn-box .sp-relic-li b{ font-size: 12px; }
.sp-syn-box .sp-relic-li small{ font-size: 10.5px; }
/* ---- banquillo sencillo (v2) ---- */
.bench{ padding: 6px 8px 8px; min-width: 0; gap: 6px; background: none; clip-path: none; box-shadow: none; }
.bench-slots{ gap: 8px; }
.bench-slot{ width: 76px; height: 84px; }
.bench-box{ max-width: 860px !important; }
.bench-help{ margin: 0 0 10px; text-align:center; color:#cfe2ff; font: 14px/1.4 Inter, sans-serif; }
.bench-help b{ color:#ffd84a; }
.bench-help.small{ font-size: 12px; color:#9fc0ff; margin: 8px 0 4px; }
.bench-search{ align-self:center; width: min(360px, 100%); margin-bottom: 10px; font: 600 14px Inter, sans-serif; color:#fff; background:#0b1a44; border:none; padding: 8px 10px; box-shadow: inset 0 0 0 2px #3f6fc8; clip-path: var(--px-cut-s); }
.bench-box .bench-grid{ grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); max-height: 56vh; gap: 8px; }
.bench-box .bench-pick{ flex-direction:column; justify-content:center; gap: 2px; padding: 6px 4px 6px; text-align:center; min-height: 96px; }
.bench-box .bench-pick b{ font: 700 11px Inter, sans-serif; max-width: 88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bench-box .bench-pick .char-face{ width:56px !important; height:56px !important; }
.bench-box .bp-gain{ font-size: 13px; }
.bench-box .bench-remove .bench-plus{ color:#fff; margin: 0; }
.syn-h{ margin: 6px 0 8px; font-family: var(--title-font); font-weight:400; font-size:20px; color:#ffd84a; text-shadow: var(--outline-thin); }
.syn-box{ overflow-y: auto; }
.syn-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.syn-card{ padding: 8px 10px; background:#14307a; clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 2px #071233, inset 5px 0 0 var(--sc); }
.syn-top{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.syn-top b{ font-family: var(--title-font); font-weight:400; font-size:18px; color:#fff; text-shadow: var(--outline-thin); }
.syn-eff{ margin-top: 2px; font: 700 13px Inter, sans-serif; color: var(--sc); }
.syn-why{ margin-top: 2px; font: 12px Inter, sans-serif; color:#cfe2ff; }
.syn-why b{ color:#fff; }
.syn-total{ margin: 10px 0 0; padding: 8px 10px; color:#fff; font: 600 13px/1.5 Inter, sans-serif; background:#0b1a44; box-shadow: inset 0 0 0 2px #3f6fc8; clip-path: var(--px-cut-s); }
.syn-total b{ color:#ffd84a; }
/* ---- banquillo v3: filtros claros y botón de sinergias ---- */
.bench-syn-btn{ font-size: 18px !important; padding: 6px 22px !important; min-width: 0 !important; }
.bf-row{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin: 0 0 6px; }
.bf-lbl{ width: 70px; font: 800 11px Inter, sans-serif; text-transform: uppercase; color:#9fc0ff; }
.bf-chip{ display:inline-flex; align-items:center; gap:4px; border:none; cursor:pointer; padding: 4px 8px; font: 700 12px Inter, sans-serif; color:#fff;
  background: linear-gradient(180deg, #1f4ba8 0 50%, #173d8c 50% 100%); clip-path: var(--px-cut-s); box-shadow: inset 0 0 0 2px #071233; }
.bf-chip:hover{ filter: brightness(1.2); }
.bf-chip.on{ color:#0b1a44; background: linear-gradient(180deg, #fff7c8 0 50%, #ffe070 50% 100%); box-shadow: inset 0 0 0 2px #5a3200; }
.bf-chip .rs-crest{ display:block; }
.bench-box .bench-grid{ grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); max-height: 46vh; }
.bench-box .bench-pick{ min-height: 120px; padding-top: 8px; }
.bp-crest{ position:absolute; top:4px; left:5px; line-height:0; }
.bp-tags{ display:flex; gap:3px; justify-content:center; flex-wrap:wrap; }
.bp-el{ display:inline-flex; align-items:center; gap:2px; padding: 0 4px; font: 800 9.5px Inter, sans-serif; color:#0b1a44; background: var(--ec); clip-path: var(--px-cut-s); }
.bp-pos{ padding: 0 4px; font: 800 9.5px Inter, sans-serif; color:#fff; background:#071233; box-shadow: inset 0 0 0 1px #8cc4ff; }
.bench-pick.on .bp-pos{ color:#fff; }
/* ---- Banquillo v4: cartas más grandes y limpias ---- */
.bench-box .bench-grid{ grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; max-height: 48vh; padding: 2px 6px 2px 2px; }
.bench-box .bench-pick{ min-height: 158px; padding: 12px 6px 10px; gap: 5px; justify-content:flex-start;
  background: linear-gradient(180deg, #2a5fc4 0%, #1a3f8f 100%);
  box-shadow: inset 0 0 0 2px #071233, inset 0 0 0 4px var(--rar, #8cc4ff), inset 0 -26px 0 rgba(4,12,40,.35); }
.bench-box .bench-pick:hover{ filter:none; transform: translateY(-2px); box-shadow: inset 0 0 0 2px #071233, inset 0 0 0 4px #ffd84a, inset 0 -26px 0 rgba(4,12,40,.35); }
.bench-box .bench-pick.on{ background: linear-gradient(180deg, #3a72d8 0%, #24509f 100%); box-shadow: inset 0 0 0 2px #071233, inset 0 0 0 4px #ffd84a, 0 0 0 2px #ffd84a; color:#fff; }
.bench-box .bench-pick .char-face{ width:64px !important; height:64px !important; margin-top: 6px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.bench-box .bench-pick b{ font: 800 13px Inter, sans-serif; max-width: 116px; text-shadow: 0 1px 0 #000; letter-spacing:.2px; }
.bp-crest{ top:7px; left:7px; width:30px; height:30px; display:grid; place-items:center; }
.bp-crest .rs-crest{ image-rendering:auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.bf-chip .rs-crest{ image-rendering:auto; }
.bench-box .bp-gain{ top:8px; right:8px; font-size: 13px; padding: 1px 6px; }
.bp-tags{ gap:6px; margin-top: auto; align-items:center; }
.bp-el{ clip-path:none; background:none; padding:0; gap:3px; font: 800 11px Inter, sans-serif; color: var(--ec); text-shadow: 0 1px 0 #000, 0 0 2px #000; }
.bp-el img, .bp-el svg{ filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.bp-pos{ padding: 1px 6px; font: 800 10px Inter, sans-serif; color:#cfe4ff; background: rgba(4,12,40,.55); box-shadow:none; border-radius: 3px; letter-spacing:.4px; }
.bench-pick.on .bp-el{ color: var(--ec); }
.bench-box .bench-pick{ min-height: 140px; }
.bp-el{ color: color-mix(in srgb, var(--ec) 65%, #fff); }
.bench-pick.on .bp-el{ color: color-mix(in srgb, var(--ec) 65%, #fff); }
/* cofre rojo: carta del jugador (aparece y se va sola) */
.rc-pop{ position:fixed; right:24px; top:50%; z-index:60; pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:6px;
  transform: translateY(-50%); animation: rc-in .35s cubic-bezier(.2,.9,.3,1.3) both; }
.rc-pop.out{ animation: rc-out .45s ease-in both; }
.rc-pop .pk-card{ width: 150px; animation: po-glow 1.2s ease-in-out infinite; }
.rc-pop .pk-face .char-face{ width:96px !important; height:96px !important; }
.rc-pop-h{ font-family: var(--title-font); font-size: 22px; color:#ff6a5c; text-shadow: var(--outline-thin); }
@keyframes rc-in{ from{ opacity:0; transform: translate(60px,-50%) scale(.8); } to{ opacity:1; transform: translate(0,-50%) scale(1); } }
@keyframes rc-out{ from{ opacity:1; transform: translate(0,-50%); } to{ opacity:0; transform: translate(60px,-50%); } }
/* pausa: banquillo con las caras de los 3 suplentes */
.sp-bench-row{ display:flex !important; gap:6px; justify-content:center; padding: 2px 0 !important; background:none !important; box-shadow:none !important; }
.sp-bench-p{ display:flex; flex-direction:column; align-items:center; width: 64px; padding: 4px 2px 3px; background:#0b1a44; box-shadow: inset 0 0 0 2px var(--rar, #3f6fc8); clip-path: var(--px-cut-s); }
.sp-bench-p .char-face{ width:40px !important; height:40px !important; }
.sp-bench-p em{ font: 700 10px Inter, sans-serif; font-style:normal; color:#fff; max-width: 60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-bench-p.empty{ justify-content:center; min-height: 58px; opacity:.6; }
.sp-bench-n{ display:block !important; text-align:center; font: 700 11px Inter, sans-serif; color:#ffd84a; padding: 1px 0 !important; background:none !important; box-shadow:none !important; }
/* hueco vacío del banquillo: silueta en vez del "+" */
.bench-ghost{ color:#3f6fc8; opacity:.75; line-height:0; margin-bottom: 6px; }
.bench-slot:not(.full){ background: repeating-linear-gradient(45deg, #102a66 0 6px, #0e2459 6px 12px); box-shadow: inset 0 0 0 2px #071233, inset 0 0 0 4px #2a4f9c; }
.bench-slot:not(.full):hover .bench-ghost{ color:#8cc4ff; opacity:1; }
.bench-slot:not(.full) em{ color:#8cc4ff; }
/* =====================================================================
   ANÁLISIS DEL PARTIDO (estadísticas al acabar)
   ===================================================================== */
#btn-gameover-stats{ border-radius: 0 !important; border: none !important; clip-path: var(--px-cut-s); margin-right: 8px;
  background: linear-gradient(180deg, #2f6fd6 0 50%, #2456b8 50% 100%) !important; box-shadow: inset 0 0 0 3px #071233 !important;
  color: #fff !important; font-family: var(--title-font); font-size: 22px; text-shadow: var(--outline-thin); padding: 10px 22px; }
.st-ov{ z-index: 80; }
.st-box{ max-width: 780px !important; width: 94vw; max-height: 92vh; overflow-y: auto; text-align: left;
  border-radius: 0 !important; border: none !important; background: var(--px-panel) !important;
  box-shadow: inset 0 0 0 4px var(--px-dark), inset 0 0 0 7px var(--px-light), inset 0 0 0 10px var(--px-dark), 8px 8px 0 rgba(0,0,0,.45) !important;
  padding: 22px 24px !important; }
.st-box h3{ text-align:center; }
.st-tiles{ display:grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.st-tile{ display:flex; flex-direction:column; gap: 2px; padding: 8px 10px; background:#0b1a44; box-shadow: inset 0 0 0 2px #071233, inset 0 0 0 4px #3f6fc8; clip-path: var(--px-cut-s); min-width:0; }
.st-tile small{ font: 700 10px Inter, sans-serif; color:#8cc4ff; text-transform: uppercase; letter-spacing:.5px; }
.st-tile b{ font-family: var(--title-font); font-weight:400; font-size: 18px; color:#ffe14a; text-shadow: var(--outline-thin); line-height:1.15; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow-wrap:anywhere; }
.st-tile em{ font: 600 11px Inter, sans-serif; font-style: normal; color:#cfe0ff; }
.st-h{ margin: 12px 0 6px; font-family: var(--title-font); font-weight:400; font-size: 18px; color:#ffd84a; text-shadow: var(--outline-thin); }
.st-stack{ display:flex; height: 22px; background:#071233; box-shadow: inset 0 0 0 2px #071233; overflow:hidden; }
.st-stack i{ display:block; height:100%; min-width: 2px; box-shadow: inset -2px 0 0 #071233; }
.st-legend{ display:flex; flex-wrap:wrap; gap: 4px 14px; margin-top: 6px; font: 600 12px Inter, sans-serif; color:#e6efff; }
.st-legend u{ display:inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; box-shadow: 0 0 0 1px #071233; }
.st-legend b{ color:#ffe14a; }
.st-table-wrap{ overflow-x:auto; background: rgba(4,10,34,.55); box-shadow: inset 0 0 0 2px #071233, inset 0 0 0 4px #2a4f9c; padding: 4px; }
.st-table{ width:100%; border-collapse: collapse; font: 600 12.5px Inter, sans-serif; color:#e6efff; }
.st-table th{ text-align:right; padding: 5px 8px; font: 800 10.5px Inter, sans-serif; color:#8cc4ff; text-transform: uppercase; letter-spacing:.4px; border-bottom: 2px solid #2a4f9c; white-space: nowrap; }
.st-table th:first-child, .st-table td:first-child{ text-align:left; }
.st-table td{ text-align:right; padding: 5px 8px; border-bottom: 1px solid rgba(63,111,200,.35); white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-table td:first-child{ white-space: normal; min-width: 170px; }
.st-table tr:nth-child(2n) td{ background: rgba(63,111,200,.08); }
.st-src{ display:flex; align-items:baseline; gap: 6px; flex-wrap: wrap; border-left: 4px solid var(--sc); padding-left: 6px; }
.st-src b{ color:#fff; display:inline-flex; align-items:center; gap:4px; }
.st-src small{ font: 600 10px Inter, sans-serif; color:#9fb4dc; }
.st-bar{ display:block; height: 6px; margin: 3px 0 0 10px; background:#071233; }
.st-bar i{ display:block; height:100%; }
.st-note{ font: 500 11.5px Inter, sans-serif; color:#b9cbec; margin: 6px 2px 0; line-height: 1.45; }
@media (max-width: 600px){
  .st-box{ padding: 16px 12px !important; }
  .st-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-tile b{ font-size: 17px; }
  .st-table{ font-size: 11.5px; }
  .st-table th, .st-table td{ padding: 4px 5px; }
  .st-table td:first-child{ min-width: 130px; }
  #btn-gameover-stats, #btn-gameover-title{ font-size: 18px; padding: 8px 14px; margin: 4px; }
}
/* misiones semanales: cuánto falta para renovarse */
.ms-week{ display:flex; justify-content:center; max-width: 1180px; margin: 0 auto 10px; width: calc(100% - 32px); box-sizing: border-box; align-items:center; gap: 8px; padding: 8px 12px; background:#0b1a44; box-shadow: inset 0 0 0 2px #071233, inset 0 0 0 4px #3f6fc8; clip-path: var(--px-cut-s); font: 600 13px Inter, sans-serif; color:#e6efff; }
.ms-week b{ color:#ffe14a; }

/* =====================================================================
   MÓVIL Y TABLET (html.touch-ui): controles táctiles e interfaz del partido.
   En PC no se aplica nada de esto (la clase solo se pone en pantallas táctiles sin ratón).
   ===================================================================== */
#joystick-zone .joy-base, .swap-btn{ display:none; }
.rotate-overlay{ display:none; }
html.touch-ui, html.touch-ui body{ overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
html.touch-ui body{ -webkit-user-select: none; user-select: none; touch-action: manipulation; }
html.touch-ui input, html.touch-ui textarea{ -webkit-user-select: text; user-select: text; }
html.touch-ui #screen-game, html.touch-ui #game-stage, html.touch-ui #game-canvas{ touch-action: none; }

/* --- girar el móvil (solo móviles en vertical) --- */
html.phone.portrait .rotate-overlay{ display:flex; position:fixed; inset:0; z-index: 9999; align-items:center; justify-content:center;
  background: repeating-linear-gradient(0deg, #0b1f5c 0 4px, #0a1a4f 4px 8px); }
.rot-box{ display:flex; flex-direction:column; align-items:center; gap: 14px; text-align:center; padding: 24px; }
.rot-box b{ font-family: var(--title-font); font-weight:400; font-size: 34px; color:#ffe14a; text-shadow: var(--outline); }
.rot-box small{ font: 600 15px Inter, sans-serif; color:#cfe0ff; }
.rot-phone{ width: 70px; height: 120px; background:#0b1a44; box-shadow: inset 0 0 0 4px #071233, inset 0 0 0 8px #8cc4ff, inset 0 0 0 10px #071233; clip-path: var(--px-cut-s);
  animation: rotPhone 2s steps(6) infinite; }
@keyframes rotPhone{ 0%, 30%{ transform: rotate(0); } 60%, 100%{ transform: rotate(-90deg); } }

/* --- joystick (abajo a la izquierda, fijo) --- */
html.touch-ui #joystick-zone{ display:block; left: 0; bottom: 0; width: 36%; height: 74%; z-index: 7; touch-action: none; }
html.touch-ui #joystick-zone .joy-base{ display:block; position:absolute; left: calc(26px + env(safe-area-inset-left, 0px)); bottom: 22px;
  width: 188px; height: 188px; border-radius: 50%; pointer-events:none;
  background: radial-gradient(circle, rgba(20,48,122,.30) 0 55%, rgba(20,48,122,.42) 56% 100%);
  box-shadow: inset 0 0 0 4px rgba(7,18,51,.75), inset 0 0 0 8px rgba(140,196,255,.55), inset 0 0 0 11px rgba(7,18,51,.6);
  opacity: .78; transition: opacity .12s; }
html.touch-ui #joystick-zone .joy-base::before{ content:''; position:absolute; inset: 30%; border-radius:50%; border: 3px dashed rgba(140,196,255,.35); }
html.touch-ui #joystick-zone .joy-base.on{ opacity: 1; }
html.touch-ui .joy-knob{ position:absolute; left: 50%; top: 50%; width: 82px; height: 82px; margin: -41px 0 0 -41px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff2a8 0 18%, #ffd84a 19% 62%, #e09a00 63% 100%);
  box-shadow: inset 0 0 0 4px #5a3200, 0 4px 0 rgba(0,0,0,.35); will-change: transform; }
html.touch-ui .joy-base.on .joy-knob{ box-shadow: inset 0 0 0 4px #5a3200, 0 0 18px rgba(255,216,74,.7); }

/* --- HUD de arriba --- */
html.touch-ui #hud .hud-row{ padding: 6px calc(12px + env(safe-area-inset-right, 0px)) 0 calc(12px + env(safe-area-inset-left, 0px)); }
html.touch-ui #hud-relic, html.touch-ui #hud-inventory, html.touch-ui #hud-buffs{ margin-left: calc(12px + env(safe-area-inset-left, 0px)); }
html.touch-ui .pause-btn{ width: 54px !important; height: 54px !important; font-size: 22px !important; }
html.touch-ui .hud-portrait{ width: 68px !important; height: 68px !important; }
html.touch-ui .hud-portrait .char-face{ width: 64px !important; height: 64px !important; }

/* --- botones del partido: abajo (balones y Q/E en el centro) y a la derecha (R y Cambio) --- */
html.touch-ui .tech-bar{ left: 0; right: 0; top: 0; bottom: 0; transform: none; display:block; pointer-events:none; filter:none; z-index: 8; }
html.touch-ui .tech-bar > *{ pointer-events:auto; }
html.touch-ui .tech-slots{ position:absolute; left: 50%; bottom: 18px; transform: translateX(-50%); flex-direction: row; gap: 10px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
html.touch-ui .tech-btn{ width: 156px !important; min-height: 58px; padding: 6px 10px 6px 8px !important; gap: 8px !important; }
html.touch-ui .tech-btn kbd{ display:none; }
html.touch-ui .tech-name{ font-size: 16px !important; }
html.touch-ui .tech-lvl{ display:block !important; font-size: 11px !important; }
html.touch-ui .tech-btn.tap, html.touch-ui .ult-btn.tap, html.touch-ui .swap-btn.tap, html.touch-ui .pause-btn.tap{ filter: brightness(1.35); transform: scale(.94); }
html.touch-ui .ult-btn{ position:absolute; right: calc(24px + env(safe-area-inset-right, 0px)); bottom: 20px; width: 124px !important; height: 124px !important; }
html.touch-ui .ult-core kbd{ font-size: 46px !important; }
html.touch-ui .ult-state{ font-size: 11px !important; }
html.touch-ui .talent-slots{ position:absolute; right: calc(24px + 124px + 18px + env(safe-area-inset-right, 0px)); bottom: 20px; flex-direction: column; gap: 8px; }
html.touch-ui .talent-slot{ width: 52px !important; height: 52px; padding: 0 !important; justify-content:center; pointer-events:none; }
html.touch-ui .talent-slot .talent-info, html.touch-ui .talent-slot .talent-name, html.touch-ui .talent-slot .talent-lvl{ display:none !important; }
html.touch-ui .swap-btn{ display:flex; position:absolute; z-index: 8; right: calc(24px + 26px + env(safe-area-inset-right, 0px)); bottom: calc(20px + 124px + 16px);
  width: 76px; height: 76px; flex-direction:column; align-items:center; justify-content:center; gap: 0; border: none; padding: 0; cursor:pointer;
  background: linear-gradient(180deg, #2f6fd6 0 50%, #2456b8 50% 100%); clip-path: var(--px-cut-s);
  box-shadow: inset 0 0 0 3px #071233, inset 0 0 0 6px #8cc4ff, inset 0 0 0 8px #071233; color:#fff; touch-action: none; }
html.touch-ui .swap-btn .swap-ico{ font: 900 30px Inter, sans-serif; line-height: 1; text-shadow: var(--outline-thin); }
html.touch-ui .swap-btn small{ font: 800 11px Inter, sans-serif; text-shadow: var(--outline-thin); }
html.touch-ui #screen-game:not(.has-2techs) .swap-btn{ opacity: .45; }
html.touch-ui .pball-bar{ left: 50%; bottom: calc(18px + 58px + 12px); transform: translateX(-50%); gap: 10px; }
html.touch-ui .pb-slot{ width: 58px; height: 58px; touch-action: none; }
html.touch-ui .pb-slot kbd{ display:none; }
/* pantallas más estrechas (16:9): todo un poco más compacto */
@media (max-width: 1000px){
  html.touch-ui .tech-btn{ width: 136px !important; }
  html.touch-ui #joystick-zone .joy-base{ width: 170px; height: 170px; }
  html.touch-ui .ult-btn{ width: 112px !important; height: 112px !important; }
  html.touch-ui .talent-slots{ right: calc(24px + 112px + 14px + env(safe-area-inset-right, 0px)); }
  html.touch-ui .swap-btn{ bottom: calc(20px + 112px + 14px); right: calc(24px + 18px + env(safe-area-inset-right, 0px)); }
}

/* --- MÓVIL EN HORIZONTAL: menús (todo cabe o se puede desplazar; nada se corta) --- */
html.phone .screen:not(#screen-title):not(#screen-game){ justify-content: flex-start; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  padding: 12px calc(14px + env(safe-area-inset-right, 0px)) 18px calc(14px + env(safe-area-inset-left, 0px)); }
html.phone .overlay{ overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 0; }
html.phone .overlay > div, html.phone .overlay > .overlay-box{ max-height: calc(100% - 12px); overflow-y: auto; -webkit-overflow-scrolling: touch; margin: auto; }
html.phone .overlay-box{ max-height: calc(100vh - 16px); }
html.phone .btn, html.phone .menu-item, html.phone .upgrade-option, html.phone .shop-btn, html.phone .tr-tab{ min-height: 44px; }
html.phone kbd.upgrade-key{ min-width: 28px; }
/* inicio: logo arriba a la izquierda, titular a la izquierda del centro y el menú en dos columnas a la derecha (cabe entero) */
html.phone.landscape .title-logo{ top: 56px; left: calc(18px + env(safe-area-inset-left, 0px)); transform: scale(.82); transform-origin: top left; }
html.phone.landscape .records-panel{ display:none; }
html.phone.landscape .showcase{ left: 38% !important; transform: translate(-50%, -50%) scale(.9) !important; top: 54% !important; }
html.phone.landscape .side-menu{ top: 64px !important; bottom: 10px !important; right: calc(12px + env(safe-area-inset-right, 0px)) !important; width: 486px !important;
  display:grid !important; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: 6px !important; padding: 12px !important; overflow-y: auto; }
html.phone.landscape .side-menu .menu-item{ padding: 6px 10px !important; gap: 8px !important; min-height: 0; }
html.phone.landscape .side-menu .menu-ico{ transform: scale(.82); }
html.phone.landscape .side-menu .menu-text b{ font-size: 19px !important; }
html.phone.landscape .side-menu .menu-text small{ font-size: 11.5px !important; }
html.phone .topbar{ padding-left: calc(12px + env(safe-area-inset-left, 0px)) !important; padding-right: calc(12px + env(safe-area-inset-right, 0px)) !important; }
html.phone .icon-btn{ min-width: 44px; min-height: 44px; }
html.phone.portrait .rotate-overlay{ z-index: 2147483647; }
@media (max-width: 1000px){
  html.phone.landscape .side-menu{ width: 404px !important; }
  html.phone.landscape .side-menu .menu-text b{ font-size: 17px !important; }
  html.phone.landscape .side-menu .menu-text small{ font-size: 10.5px !important; }
  html.phone.landscape .side-menu .menu-ico{ transform: scale(.7); margin: 0 -4px; }
  html.phone.landscape .showcase{ left: 31% !important; transform: translate(-50%, -50%) scale(.8) !important; }
  html.phone.landscape .title-logo{ transform: scale(.7); }
}
/* Ajustes: la opción del joystick solo sale en pantallas táctiles */
.touch-only{ display:none !important; }
html.touch-ui .touch-only{ display:grid !important; }
/* MÓVIL: joystick a la derecha (opción de Ajustes); la R, el Cambio y los talentos pasan a la izquierda */
html.touch-ui.joy-right #joystick-zone{ left: auto; right: 0; }
html.touch-ui.joy-right #joystick-zone .joy-base{ left: auto; right: calc(26px + env(safe-area-inset-right, 0px)); }
html.touch-ui.joy-right .ult-btn{ right: auto; left: calc(24px + env(safe-area-inset-left, 0px)); }
html.touch-ui.joy-right .talent-slots{ right: auto; left: calc(24px + 124px + 18px + env(safe-area-inset-left, 0px)); }
html.touch-ui.joy-right .swap-btn{ right: auto; left: calc(24px + 26px + env(safe-area-inset-left, 0px)); }
@media (max-width: 1000px){
  html.touch-ui.joy-right .talent-slots{ left: calc(24px + 112px + 14px + env(safe-area-inset-left, 0px)); }
  html.touch-ui.joy-right .swap-btn{ left: calc(24px + 18px + env(safe-area-inset-left, 0px)); }
}

/* ya no se pide girar el móvil: se juega en vertical (por defecto) o en horizontal */
html .rotate-overlay, html.phone.portrait .rotate-overlay{ display:none !important; }

/* =====================================================================
   MÓVIL EN VERTICAL (por defecto): HUD como la referencia
   arriba izq.: retrato, vida y objeto · arriba der.: eliminaciones/monedas, pausa, talentos y Q/E
   izquierda: Cambio · abajo izq.: joystick · abajo der.: R y debajo los balones de poder
   ===================================================================== */
html.touch-ui.portrait #hud .hud-row{ padding-top: calc(6px + env(safe-area-inset-top, 0px)); grid-template-columns: 1fr auto; }
html.touch-ui.portrait .hud-mid{ position:absolute; left: 50%; top: calc(80px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); }
html.touch-ui.portrait .hud-timer{ font-size: 26px; }
html.touch-ui.portrait .hud-left .hud-hp{ min-width: 150px !important; width: 150px; }
html.touch-ui.portrait .hud-portrait{ width: 60px !important; height: 60px !important; }
html.touch-ui.portrait .hud-portrait .char-face{ width: 56px !important; height: 56px !important; }
html.touch-ui.portrait .pause-btn{ width: 50px !important; height: 50px !important; }
html.touch-ui.portrait #hud-inventory{ max-width: 230px; }
html.touch-ui.portrait .talent-slots{ position:absolute; top: calc(78px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); bottom: auto; left: auto; flex-direction: column; gap: 6px; }
html.touch-ui.portrait .talent-slot{ width: 196px !important; height: 44px; padding: 4px 8px 4px 6px !important; justify-content:flex-start; }
html.touch-ui.portrait .talent-slot .talent-info, html.touch-ui.portrait .talent-slot .talent-name, html.touch-ui.portrait .talent-slot .talent-lvl{ display:block !important; }
html.touch-ui.portrait .talent-slot .talent-info{ display:flex !important; }
html.touch-ui.portrait .talent-name{ font-size: 13px !important; }
html.touch-ui.portrait .talent-lvl{ font-size: 10px !important; }
html.touch-ui.portrait .tech-slots{ top: calc(78px + 2 * 44px + 6px + 10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); left: auto; bottom: auto; transform: none; flex-direction: column; gap: 6px; }
html.touch-ui.portrait .tech-btn{ width: 196px !important; min-height: 50px; }
html.touch-ui.portrait .tech-name{ font-size: 15px !important; }
html.touch-ui.portrait #joystick-zone{ width: 52%; height: 46%; left: 0; right: auto; }
html.touch-ui.portrait #joystick-zone .joy-base{ left: calc(18px + env(safe-area-inset-left, 0px)); right: auto; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); width: 200px; height: 200px; }
html.touch-ui.portrait .swap-btn{ left: calc(26px + env(safe-area-inset-left, 0px)); right: auto; bottom: calc(26px + 200px + 22px + env(safe-area-inset-bottom, 0px)); }
html.touch-ui.portrait .ult-btn{ right: calc(18px + env(safe-area-inset-right, 0px)); left: auto; bottom: calc(18px + 56px + 16px + env(safe-area-inset-bottom, 0px)); width: 140px !important; height: 140px !important; }
html.touch-ui.portrait .ult-core kbd{ font-size: 52px !important; }
html.touch-ui.portrait .pball-bar{ left: auto; right: calc(10px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: none; gap: 6px; }
html.touch-ui.portrait .pb-slot{ width: 54px; height: 54px; }
/* vertical con "joystick a la derecha": todo en espejo */
html.touch-ui.portrait.joy-right #joystick-zone{ left: auto; right: 0; }
html.touch-ui.portrait.joy-right #joystick-zone .joy-base{ left: auto; right: calc(18px + env(safe-area-inset-right, 0px)); }
html.touch-ui.portrait.joy-right .swap-btn{ left: auto; right: calc(26px + env(safe-area-inset-right, 0px)); }
html.touch-ui.portrait.joy-right .ult-btn{ right: auto; left: calc(18px + env(safe-area-inset-left, 0px)); }
html.touch-ui.portrait.joy-right .pball-bar{ right: auto; left: calc(10px + env(safe-area-inset-left, 0px)); }
/* menús en vertical */
html.phone.portrait .title-logo{ transform: scale(.82); transform-origin: top center; }
html.phone.portrait .showcase{ top: 39% !important; transform: translate(-50%, -50%) scale(.8) !important; }
html.phone.portrait .records-panel{ display:none; }

/* =====================================================================
   MÓVIL: menos texto, más visual (todo lo de aquí solo se aplica en pantallas táctiles)
   ===================================================================== */
html.touch-ui{ background:#2456b8; }                                   /* color de la barra del navegador (Safari la toma del fondo) */
html.touch-ui .pc-only{ display:none !important; }
.touch-only-b{ display:none; }
html.touch-ui .touch-only-b{ display:block; }
.set-sel{ grid-template-columns: 1fr auto !important; }
.set-sel select{ font: 700 15px Inter, sans-serif; color:#fff; background:#0b1a44; border: none; padding: 8px 12px; min-height: 40px;
  box-shadow: inset 0 0 0 2px #071233, inset 0 0 0 4px #8cc4ff; border-radius: 0; }
/* aviso de girar: solo si en Ajustes elegiste una orientación y el móvil está en la otra */
html.touch-ui.orient-wrong .rotate-overlay{ display:flex !important; position:fixed; inset:0; z-index: 2147483647; align-items:center; justify-content:center;
  background: repeating-linear-gradient(0deg, #0b1f5c 0 4px, #0a1a4f 4px 8px); }
.rot-want-p, .rot-want-l{ display:none; }
html.want-portrait .rot-want-p, html.want-landscape .rot-want-l{ display:block; }
html.want-portrait .rot-phone{ animation-direction: reverse; }
/* textos de ayuda largos fuera (la información sigue en la Guía) */
html.phone .shop-sub, html.phone .gacha-sub, html.phone .rk-note, html.phone .hint-keys, html.phone .bench-help, html.phone #rs-shown,
html.phone .docs-body > .intro, html.phone .rs-nick{ display:none !important; }
html.touch-ui kbd.upgrade-key, html.touch-ui .upgrade-option kbd.esc-key{ display:none !important; }
html.phone .section-title, html.phone .rs-heading, html.phone .tr-title{ font-size: 28px !important; }
/* subida de nivel: la etiqueta de rareza ya no tapa el nombre */
html.touch-ui .urar-corner{ height: 26px; min-width: 0; padding: 0 8px 0 22px; top: -2px; right: -2px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 18px calc(100% - 6px), 12px calc(100% - 6px), 12px 6px, 0 6px); }
html.touch-ui .urar-corner::before{ display:none; }
html.touch-ui .urar-corner u{ width: 9px; height: 9px; }
html.touch-ui .urar-stars{ gap: 3px; margin: 0; }
html.touch-ui .upgrade-option.urar b{ padding-right: 74px; }
html.phone .upgrade-option b{ font-size: 17px !important; line-height: 1.25 !important; }
html.phone .upgrade-option > span{ font-size: 13.5px !important; }
html.phone .upgrade-option{ padding: 10px 12px !important; }
/* JUGADORES (móvil): ficha compacta arriba con los botones a mano, y la lista debajo; se desplaza la pantalla entera */
html.phone #screen-roster .rs-panel{ height: auto !important; min-height: 100%; }
html.phone #screen-roster .rs-body{ flex-direction: column; flex: none; }
html.phone #screen-roster .rs-left{ flex: none; }
html.phone #screen-roster .rs-grid{ overflow: visible; flex: none; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; }
html.phone #screen-roster .rs-tab b{ display:none; }
html.phone #screen-roster .rs-tab{ min-width: 52px; padding: 4px 6px !important; }
html.phone #screen-roster .rs-detail{ order: -1; width: 100% !important; max-height: none !important; overflow: visible;
  display: grid !important; grid-template-columns: 112px 1fr 1fr 1fr; column-gap: 8px; row-gap: 6px; align-items: center; justify-items: start; padding: 12px !important; }
html.phone #screen-roster .rs-detail > *{ grid-column: 2 / -1; margin: 0 !important; }
html.phone #screen-roster .rs-portrait{ grid-column: 1; grid-row: 1 / span 5; width: 108px !important; height: 108px !important; align-self: start; }
html.phone #screen-roster .rs-portrait .rs-big{ width: 104px !important; height: 104px !important; margin-bottom: -4px !important; }
html.phone #screen-roster .rs-title{ font-size: 24px !important; text-align: left; }
html.phone #screen-roster .rs-sub{ font-size: 12px; }
html.phone #screen-roster .rs-look{ display:flex; gap: 6px; }
html.phone #screen-roster .rs-look-btn{ padding: 4px 10px !important; font-size: 12px !important; min-height: 32px; }
html.phone #screen-roster .rs-tags{ gap: 4px; }
html.phone #screen-roster .rs-action{ grid-column: auto / span 1; order: 5; width: 100% !important; min-height: 46px; padding: 6px 4px !important; font-size: 15px !important; justify-self: stretch; }
html.phone #screen-roster .rs-action:first-of-type{ grid-column: 1 / span 2; }
html.phone #screen-roster .rs-stats{ order: 6; grid-column: 1 / -1; width: 100%; display:grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
html.phone #screen-roster .rs-detail{ grid-template-columns: 108px repeat(3, minmax(0, 1fr)) !important; }
html.phone #screen-roster .rs-detail > *{ min-width: 0; max-width: 100%; }
html.phone #screen-roster .rs-look{ width: 100%; }
html.phone #screen-roster .rs-look-btn{ flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.phone #screen-roster .rs-stats{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
html.phone #screen-roster .rs-stat{ min-width: 0; }
html.phone .upgrade-option b, html.phone .upgrade-option .up-nm{ white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
html.phone .overlay-box > h3{ font-size: 30px !important; line-height: 1.1 !important; }
html.phone #levelup-overlay .overlay-box, html.phone #talent-overlay .overlay-box, html.phone #relic-overlay .overlay-box, html.phone #hillman-overlay .overlay-box{ padding: 16px 14px !important; width: min(720px, 96vw); }
html.phone #levelup-overlay .upgrade-option b{ font-size: 19px !important; gap: 8px; flex-wrap: wrap; }
html.phone #levelup-overlay .upgrade-option b .up-nm{ white-space: normal !important; display: inline !important; flex: 1 1 0; min-width: 0; }
html.phone #levelup-overlay .upgrade-option b img, html.phone #levelup-overlay .upgrade-option b svg{ width: 34px !important; height: 34px !important; vertical-align: middle; }
html.phone #levelup-overlay .upgrade-option > span{ font-size: 14px !important; }
html.phone .levelup-hint{ margin: 4px 0 8px !important; }
html.phone #levelup-overlay .upgrade-option b{ display:block !important; }
html.phone #levelup-overlay .upgrade-option b .up-nm{ display:inline !important; flex: none; }
html.phone #levelup-overlay .upgrade-option b img, html.phone #levelup-overlay .upgrade-option b svg, html.phone #levelup-overlay .upgrade-option b .px-mini{ display:inline-block; vertical-align: middle !important; margin-right: 4px; }
html.phone #levelup-overlay .overlay-box{ width: 96vw !important; max-width: 96vw !important; }
html.touch-ui .upgrade-option.urar b{ padding-right: 58px; }

/* =====================================================================
   MÓVIL (2): cruceta, botones, menús
   ===================================================================== */
/* CRUCETA en vez de joystick: 8 flechas (arriba, abajo, lados y diagonales); siempre velocidad completa */
html.touch-ui #joystick-zone .joy-base{ background: radial-gradient(circle, rgba(20,48,122,.38) 0 62%, rgba(20,48,122,.5) 63% 100%) !important; }
html.touch-ui #joystick-zone .joy-base::before{ inset: 34%; border: none; border-radius: 50%; background: rgba(7,18,51,.45); }
html.touch-ui .joy-base .dp{ position:absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events:none; }
html.touch-ui .joy-base .dp::after{ content:''; position:absolute; left: -14px; top: -11px; width: 28px; height: 22px; background: rgba(234,244,255,.85);
  clip-path: polygon(0 0, 100% 50%, 0 100%); transform: translateX(var(--r)); filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
html.touch-ui .joy-base{ --r: 62px; }
html.touch-ui .joy-base .dp1, html.touch-ui .joy-base .dp3, html.touch-ui .joy-base .dp5, html.touch-ui .joy-base .dp7{ --r: 58px; }
html.touch-ui .joy-base .dp1::after, html.touch-ui .joy-base .dp3::after, html.touch-ui .joy-base .dp5::after, html.touch-ui .joy-base .dp7::after{ transform: translateX(var(--r)) scale(.78); }
html.touch-ui .dp0{ transform: rotate(0deg); }   html.touch-ui .dp1{ transform: rotate(45deg); }
html.touch-ui .dp2{ transform: rotate(90deg); }  html.touch-ui .dp3{ transform: rotate(135deg); }
html.touch-ui .dp4{ transform: rotate(180deg); } html.touch-ui .dp5{ transform: rotate(225deg); }
html.touch-ui .dp6{ transform: rotate(270deg); } html.touch-ui .dp7{ transform: rotate(315deg); }
html.touch-ui .joy-base[data-dir="0"] .dp0::after, html.touch-ui .joy-base[data-dir="1"] .dp1::after, html.touch-ui .joy-base[data-dir="2"] .dp2::after, html.touch-ui .joy-base[data-dir="3"] .dp3::after,
html.touch-ui .joy-base[data-dir="4"] .dp4::after, html.touch-ui .joy-base[data-dir="5"] .dp5::after, html.touch-ui .joy-base[data-dir="6"] .dp6::after, html.touch-ui .joy-base[data-dir="7"] .dp7::after{ background: #ffd84a; filter: drop-shadow(0 0 6px rgba(255,216,74,.9)); }
html.touch-ui .joy-knob{ width: 58px !important; height: 58px !important; margin: -29px 0 0 -29px !important; transition: transform .05s linear; }
@media (max-width: 1000px){ html.touch-ui .joy-base{ --r: 56px; } html.touch-ui .joy-base .dp1, html.touch-ui .joy-base .dp3, html.touch-ui .joy-base .dp5, html.touch-ui .joy-base .dp7{ --r: 52px; } }
/* vertical: el botón de Cambio va encima de la R */
html.touch-ui.portrait .swap-btn{ left: auto; right: calc(18px + 32px + env(safe-area-inset-right, 0px)); bottom: calc(18px + 56px + 16px + 140px + 14px + env(safe-area-inset-bottom, 0px)); }
html.touch-ui.portrait.joy-right .swap-btn{ right: auto; left: calc(18px + 32px + env(safe-area-inset-left, 0px)); }
/* subida de nivel: sin estrellas; barra lateral del color de la rareza */
html.touch-ui .urar-corner{ display:none !important; }
html.touch-ui .upgrade-option.urar{ box-shadow: inset 9px 0 0 var(--urc), inset 12px 0 0 var(--urd) !important; padding-left: 20px !important; }
html.touch-ui .upgrade-option.urar b{ padding-right: 0 !important; }
/* volver: arriba del todo en cada menú (no se pierde al final) */
html.phone .screen:not(#screen-title):not(#screen-game) > .btn-ghost{ order: -1; align-self: flex-start; margin: 0 0 8px !important; min-width: 120px; }
html.phone #screen-upgrades .mt-panel{ height: auto !important; min-height: 0 !important; flex-direction: column; width: 100% !important; }
html.phone #screen-upgrades .mt-side{ width: 100% !important; max-height: 220px; }
/* elegir sobre (Mark, Axel, Jude): caben los tres */
html.phone .po-choose{ gap: 10px; flex-wrap: nowrap; max-width: 100vw; padding: 0 8px; }
html.phone .po-pick .pk-pack{ width: min(150px, 28vw) !important; height: calc(min(150px, 28vw) * 1.39) !important; }
html.phone .po-pick b{ font-size: 18px; }
/* móvil: los paneles de cada menú no se encogen (antes la lista se salía del recuadro); la pantalla se desplaza entera */
html.phone .screen:not(#screen-title):not(#screen-game) > *{ flex-shrink: 0; }
/* móvil: la vida del boss va arriba, dentro del HUD (no abajo) */
html.touch-ui .boss-bar{ bottom: auto !important; }
html.touch-ui.landscape .boss-bar{ top: calc(70px + env(safe-area-inset-top, 0px)) !important; width: min(440px, 40%) !important; }
html.touch-ui.portrait .boss-bar{ top: calc(112px + env(safe-area-inset-top, 0px)) !important; left: 136px; right: calc(214px + env(safe-area-inset-right, 0px)); transform: none;
  width: auto !important; padding: 6px 8px 7px 6px; gap: 6px; }
html.touch-ui.portrait .boss-crest{ width: 26px; height: 26px; }
html.touch-ui.portrait .boss-head b{ font-size: 15px !important; }
html.touch-ui.portrait .boss-head #boss-team, html.touch-ui.portrait .boss-head #boss-emoji{ display:none !important; }
html.touch-ui.portrait .boss-hp{ height: 9px !important; }
html.touch-ui .boss-bar.with-weather{ top: calc(150px + env(safe-area-inset-top, 0px)) !important; }
html.touch-ui.landscape .boss-bar.with-weather{ top: calc(98px + env(safe-area-inset-top, 0px)) !important; }
/* el titular de la portada se puede tocar: abre Jugadores */
.showcase-box{ cursor: pointer; }
/* MANDO: elemento seleccionado en los menús */
.gp-focus{ outline: 4px solid #ffd84a !important; outline-offset: 2px; box-shadow: 0 0 0 7px rgba(255,216,74,.35) !important; filter: brightness(1.12); }
#gp-ring{ position:fixed; z-index: 2147483000; pointer-events:none; display:none; box-shadow: 0 0 0 4px #ffd84a, 0 0 0 7px #071233, 0 0 16px 6px rgba(255,216,74,.55); transition: left .08s, top .08s, width .08s, height .08s; }
/* mando: recuadro de selección más fino */
#gp-ring{ box-shadow: 0 0 0 2px #ffd84a, 0 0 0 4px rgba(7,18,51,.85), 0 0 10px 2px rgba(255,216,74,.45) !important; transition: none !important; }
/* móvil: con una elección abierta (subida de nivel, objeto, Hillman, talento) la cruceta queda por encima y se puede seguir usando */
html.touch-ui.choice-open #joystick-zone{ z-index: 30; pointer-events: none; }
html.touch-ui.choice-open #joystick-zone .joy-base{ pointer-events: auto; opacity: .95; }
@media (orientation: landscape){ html.phone.choice-open #levelup-overlay .overlay-box, html.phone.choice-open #talent-overlay .overlay-box, html.phone.choice-open #relic-overlay .overlay-box, html.phone.choice-open #hillman-overlay .overlay-box{ width: min(620px, 56vw) !important; max-width: min(620px, 56vw) !important; } }
/* MANDO conectado y en uso: sin cursor del ratón y con los botones del mando en vez de las teclas */
html.gp-active, html.gp-active body, html.gp-active body *:not(#gp-x){ cursor: none !important; }
html.gp-active kbd[data-gp], html.gp-active .rr-key[data-gp]{ font-size: 0 !important; letter-spacing: 0 !important; display: inline-flex !important; align-items:center; justify-content:center;
  min-width: 26px; height: 26px; padding: 0 5px !important; border-radius: 13px !important; background: #2b2f3a !important; color:#fff !important; border: 2px solid #0b0d12 !important; box-shadow: none !important; vertical-align: middle; }
html.gp-active kbd[data-gp]::after, html.gp-active .rr-key[data-gp]::after{ content: attr(data-gp); font: 900 13px Inter, sans-serif; color: inherit; }
html.gp-active kbd[data-gp="A"]{ background: #3fa34d !important; } html.gp-active kbd[data-gp="B"], html.gp-active .rr-key[data-gp="B"]{ background: #d6453d !important; }
html.gp-active kbd[data-gp="Y"]{ background: #e0b520 !important; color:#2a1800 !important; } html.gp-active kbd[data-gp="X"]{ background: #2f6fd6 !important; }
html.gp-active kbd[data-gp=""], html.gp-active kbd.upgrade-key, html.gp-active .hint-keys{ display: none !important; }
html.gp-active .pb-slot kbd[data-gp]{ position:absolute; left: 2px; top: 2px; min-width: 22px; height: 16px; border-radius: 8px !important; padding: 0 3px !important; }
html.gp-active .pb-slot kbd[data-gp]::after{ font-size: 9px; }
html.gp-active .ult-core kbd[data-gp]{ min-width: 40px; height: 40px; border-radius: 50% !important; }
html.gp-active .ult-core kbd[data-gp]::after{ font-size: 24px; }
html.gp-active kbd.slot-key{ display:none !important; }