/* ============================================================
   WORLD CUP STICKER ARENA — main styles
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; width:100%; overflow-x:hidden; }
body {
  font-family: 'Rajdhani', system-ui, -apple-system, sans-serif;
  color: #f6f8fc;
  background:
    radial-gradient(ellipse at top, rgba(34,52,98,0.6) 0%, transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(155,77,255,0.25) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(94,211,255,0.2) 0%, transparent 50%),
    linear-gradient(180deg, #0a0e1c 0%, #050810 100%);
  min-height: 100vh;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow-y: auto;
}
body.hud-hidden #hud { display: none !important; }
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.04) 0, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.03) 0, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,0.04) 0, transparent 2px);
  background-size: 60px 60px, 80px 80px, 100px 100px;
  pointer-events: none; z-index: 0;
}
button { font-family: inherit; cursor: pointer; border: none; outline: none; color: inherit; }
.hidden { display: none !important; }

/* ============================================================
   LOADING SCREEN
   ============================================================ */
#loading-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(ellipse at center, #1f2c4d 0%, #050810 100%);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  transition: opacity 0.5s;
}
#loading-screen.fade { opacity: 0; pointer-events: none; }
/* B&W → colour reveal logo: two stacked images, the top one is full colour
   and unclipped from the top, animating its clip-path downward so the colour
   "drips" from the crown of the logo to the bottom. Total ~1.8s — matches
   the previous bar duration. */
.loading-logo-wrap {
  position: relative;
  width: clamp(180px, 50vw, 280px);
  aspect-ratio: 5 / 7; /* matches the logo.webp shape */
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6));
}
.loading-logo-bw,
.loading-logo-color {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
/* Bottom layer — desaturated. saturate(0) + brightness(0.95) gives a clean
   matte gray look without going pitch-black for dark logo areas. */
.loading-logo-bw {
  filter: saturate(0) brightness(0.92) contrast(0.95);
}
/* Top layer — full colour, revealed from top to bottom via clip-path.
   Uses TRANSITION (not @keyframes) so the reveal is JS-driven by adding
   the .revealing class — this guarantees the user sees the B&W base
   first, then the colour drips down. CSS-only @keyframes auto-started
   on page load, which on mobile sometimes completed before the splash
   was even visible due to image-decode timing. */
.loading-logo-color {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 2s cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Subtle gold sheen behind the colour edge */
  filter: drop-shadow(0 0 12px rgba(255, 210, 74, 0.55));
}
.loading-logo-color.revealing {
  clip-path: inset(0 0 0% 0);
}
/* Watchdog text — empty during normal boot, populated only on stall. */
.loading-text {
  margin-top: 20px; opacity: 0.7; font-size: 14px; letter-spacing: 2px;
  min-height: 1em;
  text-align: center;
}
/* Studio credit pinned near the bottom of the loading screen */
.loading-studio {
  position: absolute;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  left: 0; right: 0;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 4px;
  color: #ffd24a;
  opacity: 0.85;
  text-shadow: 0 0 12px rgba(255, 210, 74, 0.4), 0 2px 4px rgba(0,0,0,0.6);
}
/* Build version chip — sits just under GAMEZ-STUDIO. Lets the user
   confirm at a glance whether the PWA has actually picked up the
   latest release (vs. serving a stale cache). */
.loading-version {
  position: absolute;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  left: 0; right: 0;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255, 210, 74, 0.5);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
/* Recovery UI — hidden by default, revealed by the inline boot-watchdog if
   the app doesn't finish booting in 8s or a script error fires. Hard-coded
   in Spanish because i18n.js may be exactly what failed to load. */
.loading-recover {
  margin-top: 36px;
  text-align: center;
  max-width: 320px;
  padding: 0 20px;
  animation: loadingRecoverIn 0.5s ease-out;
}
.loading-recover.hidden { display: none; }
.loading-recover-msg {
  color: rgba(255,210,74,0.95);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 13px; letter-spacing: 1px;
  line-height: 1.4;
  margin: 0 0 16px;
}
.loading-recover-btn {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 12px 22px;
  background: linear-gradient(135deg, #5ed3ff, #3a8dde);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 12px; letter-spacing: 1.5px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 24px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(58,141,222,0.5);
  -webkit-tap-highlight-color: transparent;
}
.loading-recover-btn:hover  { transform: scale(1.03); }
.loading-recover-btn:active { transform: scale(0.97); }
.loading-recover-btn-danger {
  background: linear-gradient(135deg, #ff7a7a, #d92a2a);
  box-shadow: 0 6px 18px rgba(217,42,42,0.5);
}
.loading-recover-nuclear {
  margin-top: 16px;
  color: rgba(255,255,255,0.45);
  font-size: 11px;
  font-family: 'Orbitron', sans-serif;
}
.loading-recover-nuclear summary {
  cursor: pointer;
  padding: 6px 0;
  letter-spacing: 1px;
  text-align: center;
  list-style: none;
}
.loading-recover-nuclear summary::-webkit-details-marker { display: none; }
.loading-recover-nuclear[open] summary { color: rgba(255,255,255,0.75); }
@keyframes loadingRecoverIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HUD
   ============================================================ */
#hud {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(180deg, rgba(10,14,28,0.96), rgba(10,14,28,0.82));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,210,74,0.25);
  /* 20px MIN side padding (+ iOS safe-area top). Logo and title always fit
     on a single line — see clamp() on .hud-title for the auto-shrink. */
  padding: calc(6px + env(safe-area-inset-top, 0px)) 20px 6px;
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
  flex-wrap: nowrap;
  overflow: hidden;
  height: auto;
  min-height: 52px;
  scrollbar-width: none;
}
/* Mobile: center the brand horizontally — lang selector is a FAB so the top bar
   only carries the logo + title and looks better centered than left-aligned.
   The short "WC2026" title fits comfortably even with the absolutely-positioned
   trophy stars on the right (~111px max at 5⭐+2). */
@media (max-width: 720px) {
  #hud { justify-content: center; }
  .hud-brand { position: relative; top: -7px; }
}
/* Boost touch target on every HUD button so they're easy to tap on mobile */
.hud-back-btn, .hud-lang-btn, #hud-back {
  position: relative;
}
.hud-back-btn::after, #hud-back::after {
  /* Invisible 12px halo around the back button → fully tappable even near the screen edge */
  content: '';
  position: absolute; inset: -12px;
  border-radius: 50%;
}
#hud::-webkit-scrollbar { display: none; }
.hud-brand {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; text-decoration: none;
  flex-shrink: 1; min-width: 0;
  transition: transform 0.2s;
}
.hud-brand:hover { transform: scale(1.04); }
#hud-logo {
  height: 40px; width: auto;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.5));
  flex-shrink: 0;
}
.hud-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  /* Auto-shrink between 320px and 1200px viewports: 8px ↔ 14px.
     Always visible — never hidden — so logo + title stay on one line. */
  font-size: clamp(8px, 1.6vw, 14px);
  letter-spacing: clamp(0.5px, 0.25vw, 2px);
  line-height: 1.05;
  background: linear-gradient(180deg, #fff 0%, #ffd24a 60%, #ff8a00 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto; min-width: 0;
}
.hud-stats {
  display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; flex: 1; min-width: 0;
}
/* Desktop: dock to the top-right corner where the HUD bar sits.
   (.hud-lang lives at body level, not inside #hud, so it must position itself.) */
.hud-lang {
  position: fixed;
  top: 10px;
  right: 14px;
  z-index: 96;
}
.hud-lang-btn {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 5px 10px; border-radius: 16px;
  font-weight: 700; font-size: 12px;
  display: flex; align-items: center; gap: 4px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.hud-lang-btn:hover { background: rgba(255,210,74,0.15); border-color: rgba(255,210,74,0.5); }
/* ── MOBILE: detach lang button from the HUD and FAB it bottom-right.
   The very top of the screen is hard to tap because of the browser URL bar. ── */
@media (max-width: 720px) {
  .hud-lang {
    position: fixed;
    top: auto;                                      /* override desktop's top: 10px */
    right: 14px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    z-index: 95;
  }
  .hud-lang-btn {
    width: 68px; height: 68px;
    border-radius: 50%;
    /* Clip emoji glyph to the circle so an oversize flag never spills out. */
    overflow: hidden;
    padding: 0;
    background: linear-gradient(135deg, #ffd24a, #ff8a00);
    color: #1a1a1a;
    border: 3px solid #fff;
    /* Flag emoji size capped so it fits comfortably inside the 68px circle
       even with the natural glyph bleed flag emojis have. */
    font-size: 38px;
    line-height: 1;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(0,0,0,0.75), 0 0 26px rgba(255,210,74,0.55);
  }
  /* Hide the "ES" label and the chevron on the FAB — only the flag emoji */
  #hud-lang-name, .hud-lang-caret, .hud-lang-btn::after { display: none !important; }
  .hud-lang-btn { font-weight: 900; }
  /* The flag emoji itself: drop-shadow so it pops against the gold background;
     fixed wrapper size with overflow:hidden as a second clip so the glyph
     can NEVER paint outside its slot inside the circle. */
  #hud-lang-flag {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    overflow: hidden;
    font-size: inherit; line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.55));
  }
  /* When the bottom stats bar is hidden, drop closer to edge */
  body.hud-hidden .hud-lang,
  body.on-team   .hud-lang { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}
.hud-lang-menu {
  position: fixed; top: 58px; right: 10px;
  background: rgba(20,28,50,0.98);
  border: 1px solid rgba(255,210,74,0.3);
  border-radius: 12px;
  padding: 6px;
  min-width: 160px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
  z-index: 9999;
  display: flex; flex-direction: column; gap: 2px;
}
.hud-lang-item {
  background: transparent;
  color: #fff;
  text-align: left;
  padding: 8px 12px; border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.hud-lang-item:hover { background: rgba(255,210,74,0.18); }
@media (max-width: 700px) { #hud-logo { height: 36px; } }
@media (max-width: 480px) {
  #hud-logo { height: 30px; }
  /* Keep the 20px min side padding even on the smallest screens */
  #hud { padding-top: calc(4px + env(safe-area-inset-top, 0px)); padding-bottom: 4px; gap: 6px; height: 46px; }
  /* On the smallest screens the FAB stays a flag-only circle (the ≤720px
     rule already sets width/height + big font-size). Hide the ES label and
     don't shrink the flag — the flag must dominate the circle. */
  .hud-lang-btn #hud-lang-name { display: none; }
}

/* ============================================================
   BOTTOM STATS BAR
   ============================================================ */
.hud-bottom {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: linear-gradient(0deg, rgba(10,14,28,0.96), rgba(10,14,28,0.78));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,210,74,0.25);
  /* 20px MIN side padding + iOS home-indicator safe-area */
  padding: 6px 20px calc(6px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center;
  overflow: hidden;
  scrollbar-width: none;
}
.hud-bottom::-webkit-scrollbar { display: none; }
.hud-bottom .hud-stats {
  display: flex; gap: 6px; align-items: center;
  width: max-content; min-width: 100%;
}
/* Mobile: center the stats horizontally inside the bar (still scrollable if they overflow). */
@media (max-width: 720px) {
  .hud-bottom { justify-content: center; }
  .hud-bottom .hud-stats { justify-content: center; min-width: auto; width: auto; margin: 0 auto; }
}
body.hud-hidden .hud-bottom { display: none; }
/* On team builder, the picker tab lives at the very bottom — hide the stats bar there */
body.on-team .hud-bottom { display: none; }
/* Bottom stats bar reserves ~52px of viewport. Each screen needs enough
   bottom padding so its tallest content (daily button on menu, jump tab on album,
   continue button on opening, etc.) doesn't get clipped by it. */
body:not(.hud-hidden):not(.on-team) .screen { padding-bottom: 110px; }
/* Album & opening have their own bottom-fixed UI (page indicator / continue btn)
   that already accounts for the bar — give them extra room. */
body:not(.hud-hidden) #screen-album    { padding-bottom: 120px; }
body:not(.hud-hidden) #screen-opening  { padding-bottom: 120px; }
body:not(.hud-hidden) #screen-menu     { padding-bottom: 130px; } /* daily button needs room */
@media (max-width: 600px) {
  body:not(.hud-hidden):not(.on-team) .screen { padding-bottom: 120px; }
  body:not(.hud-hidden) #screen-menu          { padding-bottom: 140px; }
}
.hud-section {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.06);
  padding: 4px 9px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  font-weight: 700;
  /* Auto-shrink between 320px and 1200px viewports so the row fits */
  font-size: clamp(9px, 1.3vw, 12px);
  white-space: nowrap;
  flex-shrink: 1;       /* allow shrinking when total exceeds container */
  min-width: 0;
}
.hud-icon { font-size: clamp(11px, 1.6vw, 14px); }
.level-section { display: flex; align-items: center; gap: 6px; min-width: 80px; }
.lvl-circle {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  display: flex; justify-content: center; align-items: center;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900; color: #1a1a1a;
  box-shadow: 0 0 12px rgba(255,210,74,0.6);
  flex-shrink: 0;
}
.xp-bar { flex: 1; height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; min-width: 30px; }
.xp-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #4ade80, #22d3ee); transition: width 0.4s; box-shadow: 0 0 6px rgba(34,211,238,0.6); }
.coins-section { color: #ffd24a; }
.packs-section { color: #5ed3ff; }
.rank-section { color: #fff; }
/* Top-HUD trophy stars — one ⭐ per Mundial won, pinned to the right edge
   of the header on ALL viewports. Absolutely positioned so the centered
   brand on mobile (justify-content:center) doesn't drag the stars into the
   middle. Cap at 5 visible + "+N" overflow chip. */
.hud-stars {
  position: absolute;
  right: calc(12px + env(safe-area-inset-right, 0px));
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 2px;
  flex-shrink: 0;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(255,210,74,0.18), rgba(255,138,0,0.18));
  border: 1px solid rgba(255,210,74,0.6);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(255,210,74,0.45), inset 0 0 8px rgba(255,210,74,0.2);
}
.hud-stars.hidden { display: none; }
.hud-star {
  font-size: 16px; line-height: 1;
  filter: drop-shadow(0 0 4px rgba(255,210,74,0.85));
}
.hud-star-extra {
  margin-left: 4px;
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 11px;
  color: #ffd24a;
  text-shadow: 0 0 6px rgba(255,210,74,0.8);
}
@media (max-width: 600px){
  .hud-stars { padding: 3px 8px; gap: 1px; }
  .hud-star  { font-size: 14px; }
}
/* Album progress section in HUD */
.album-progress-section {
  display: flex; align-items: center; gap: 6px;
  min-width: 130px;
  color: #ffb74d;
}
.album-progress-section .hud-album-count { font-size: 10px; opacity: 0.8; color: #fff; }
.hud-album-bar {
  flex: 1; min-width: 40px;
  height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px;
  overflow: hidden;
}
.hud-album-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #4ade80, #ffd24a, #ff4b4b);
  transition: width 0.4s;
  box-shadow: 0 0 6px rgba(255,210,74,0.5);
}
#hud-album-pct { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 11px; color: #ffd24a; }
@media (max-width: 600px) {
  .album-progress-section .hud-album-count { display: none; }
  .album-progress-section { min-width: 70px; }
  .level-section { min-width: 50px; }
  .lvl-circle { width: 22px; height: 22px; font-size: 11px; }
  .hud-section { padding: 3px 6px; }
  .hud-bottom { padding-left: 20px; padding-right: 20px; }
  .hud-bottom .hud-stats { gap: 4px; }
}
@media (max-width: 380px) {
  /* Tighter still on very small phones — keep 20px sides, shrink everything else */
  .hud-section { padding: 3px 5px; }
  .hud-bottom .hud-stats { gap: 3px; }
  .album-progress-section { min-width: 56px; }
  .hud-album-bar { min-width: 24px; }
}

/* ============================================================
   SCREENS
   ============================================================ */
.screen { padding: 16px; max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }
.screen-header {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0 20px;
  flex-wrap: wrap;
}
.screen-header h2 {
  font-family: 'Orbitron', sans-serif;
  margin: 0; font-size: 24px; letter-spacing: 3px;
  background: linear-gradient(180deg, #fff, #5ed3ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.back-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.1); color: #fff;
  font-size: 22px; font-weight: 700;
  border: 1px solid rgba(255,255,255,0.15);
  transition: all 0.2s;
  backdrop-filter: blur(6px);
}
.back-btn:hover { background: rgba(255,210,74,0.2); border-color: #ffd24a; transform: translateX(-2px); }

/* ============================================================
   MAIN MENU
   ============================================================ */
#screen-menu {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 20px 16px;
  position: relative;
  min-height: calc(100vh - 100px);
}
#screen-menu::before {
  content: ''; position: absolute;
  width: 800px; height: 800px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,210,74,0.18) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(255,75,75,0.12) 0%, transparent 50%);
  filter: blur(60px); top: -100px; pointer-events: none; z-index: -1;
}
.menu-grid {
  display: grid;
  /* Desktop: 4 columns. Mobile (≤720px): 2 columns. */
  grid-template-columns: repeat(4, 1fr);
  /* Each row tall enough for the full icon (285px) + body (~55px) + paddings.
     Using minmax so rows still equalize when there's extra space, but never
     collapse below what the icon needs. Without this, `grid-auto-rows: 1fr`
     was capping rows at ~140px and crushing the icons. */
  grid-auto-rows: minmax(345px, 1fr);
  gap: 18px; width: 100%; max-width: 980px;
}
@media (max-width: 720px) {
  .menu-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 100%; grid-auto-rows: minmax(300px, 1fr); }
}
@media (max-width: 480px) {
  .menu-grid { grid-auto-rows: minmax(260px, 1fr); }
}
.menu-card {
  /* Grid with TWO rows: top "1fr" holds the icon centered vertically + horizontally,
     bottom "auto" holds the title+desc block at the card's lower edge.
     This guarantees every icon sits at the visual center of the available area
     above the text, regardless of icon height (163px vs 204px). */
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  gap: 8px;
}
.menu-card {
  background:
    linear-gradient(165deg, rgba(255,255,255,0.12) 0%, rgba(94,211,255,0.06) 50%, rgba(0,0,0,0.4) 100%);
  border: 2px solid rgba(255,210,74,0.18);
  border-radius: 20px;
  padding: 20px 12px 16px; text-align: center;
  transition: all 0.28s cubic-bezier(.2,.9,.3,1.2);
  position: relative;
  overflow: visible;          /* allow badge to overflow */
  backdrop-filter: blur(12px);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
.menu-card::after {
  content: ''; position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(circle at center, rgba(255,210,74,0.22), transparent 60%);
  opacity: 0; transition: opacity 0.35s;
  pointer-events: none;
}
.menu-card:hover::after { opacity: 1; }
/* Feature card (Packs) — extra glow when has badge */
.menu-card-feature {
  border-color: rgba(255,75,75,0.6);
  box-shadow:
    0 12px 32px rgba(255,75,75,0.25),
    0 0 24px rgba(255,210,74,0.2),
    inset 0 1px 0 rgba(255,255,255,0.2);
}
/* Badge */
.menu-badge {
  position: absolute; top: -8px; right: -8px;
  min-width: 28px; height: 28px;
  padding: 0 8px;
  background: linear-gradient(135deg, #ff4b4b, #c81e1e);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900; font-size: 13px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(255,75,75,0.7), 0 0 16px rgba(255,75,75,0.5);
  z-index: 10;
  animation: badgePulse 1.4s ease-in-out infinite;
}
.menu-new-badge {
  position: absolute; top: -10px; right: -10px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #46e07a, #1d8a3e);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900; font-size: 12px;
  letter-spacing: 1.5px;
  border-radius: 12px;
  border: 2px solid #fff;
  box-shadow: 0 4px 14px rgba(70,224,122,0.7), 0 0 20px rgba(70,224,122,0.55);
  z-index: 10;
  animation: badgePulse 1.4s ease-in-out infinite;
  pointer-events: none;
}
.menu-new-badge.hidden { display: none; }
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
.menu-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,210,74,0.18) 50%, transparent 70%);
  background-size: 200% 200%; background-position: 0 0;
  opacity: 0; transition: opacity 0.3s;
}
.menu-card:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: rgba(255,210,74,0.7);
  box-shadow:
    0 22px 50px rgba(255,210,74,0.22),
    0 0 30px rgba(255,210,74,0.18),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
.menu-card:hover::before { opacity: 1; animation: holo 2s linear infinite; }
/* On touch devices / mobile, :hover never fires reliably. Mirror the highlighted
   "hover" look as the default state so the cards already look "lit up" — but
   skip the translateY lift so they stay at their grid origin and don't shift. */
@media (max-width: 720px), (hover: none) {
  .menu-card {
    transform: scale(1.03);
    border-color: rgba(255,210,74,0.7);
    box-shadow:
      0 22px 50px rgba(255,210,74,0.22),
      0 0 30px rgba(255,210,74,0.18),
      inset 0 1px 0 rgba(255,255,255,0.25);
  }
  .menu-card::after  { opacity: 1; }
  .menu-card-icon    { transform: scale(1.12) rotate(-3deg); }
  .menu-card-icon img { filter: drop-shadow(0 14px 30px rgba(255,210,74,0.6)); }
}
/* Icon sits ABOVE the title — base size (logros, mundial, duplicados, tienda) */
.menu-card-icon {
  /* All tiles use the same large icon size (matches the ONLINE tile that
     was bumped +75% over the previous "highlighted" group). Per-tile size
     overrides removed for consistency across the menu grid. */
  width: 100%;
  height: 285px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.35s cubic-bezier(.2,.9,.3,1.5);
}
.menu-card-icon img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.6));
}
@media (max-width: 720px) { .menu-card-icon { height: 241px; } }
@media (max-width: 480px) { .menu-card-icon { height: 201px; } }
/* Title + desc stacked below the icon */
/* Body sits in the bottom grid row of .menu-card (grid-template-rows: 1fr auto)
   — no margin-top:auto needed; grid already anchors it to the lower edge. */
.menu-card-body { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.menu-card:hover .menu-card-icon { transform: scale(1.12) rotate(-4deg); }
.menu-card:hover .menu-card-icon img { filter: drop-shadow(0 14px 30px rgba(255,210,74,0.6)); }
.menu-card-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px; letter-spacing: 2px; font-weight: 800;
  background: linear-gradient(180deg, #fff, #ffd24a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
/* Force every desc to the same min-height (chip vs plain text) so titles align
   across all cards in a row. 38px ≈ height of the chip with its padding+border. */
.menu-card-desc { font-size: 12px; opacity: 0.75; min-height: 38px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 480px) {
  .menu-card-title { font-size: 15px; letter-spacing: 1.5px; }
  .menu-card-desc  { font-size: 11px; }
}

/* Daily reward — now a menu-grid card (after COMPARTIR), not a floating btn.
   Keeps the warm red→gold tint so it still feels rewarding. The icon container
   has overflow:hidden so the wiggle/scale never spills past the card border. */
.menu-card-daily .menu-card-icon {
  overflow: hidden;
  filter: drop-shadow(0 6px 18px rgba(255,138,0,0.55));
}
.menu-card-daily .menu-card-emoji {
  /* Size relative to the icon container so it always fits even when the
     wiggle adds a tiny translateY. 0.7em on a typical 14px root keeps the
     emoji visually big without busting out of the 163px / 138px / 115px
     icon containers used at each breakpoint. */
  font-size: 96px; line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(255,138,0,0.6));
  animation: dailyGiftWiggle 2.4s ease-in-out infinite;
  display: inline-block;
  transform-origin: center;
}
@keyframes dailyGiftWiggle {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-2px) rotate(4deg); }
}
.menu-card-daily:disabled,
.menu-card-daily.claimed { opacity: 0.55; cursor: default; }
.menu-card-daily.claimed .menu-card-emoji { animation: none; filter: none; }
@media (max-width: 720px) { .menu-card-daily .menu-card-emoji { font-size: 80px; } }
@media (max-width: 480px) { .menu-card-daily .menu-card-emoji { font-size: 64px; } }


/* ============================================================
   PRIMARY BUTTON
   ============================================================ */
.primary-btn {
  background: linear-gradient(135deg, #5ed3ff 0%, #3a8dde 100%);
  color: #062035; font-weight: 800;
  padding: 12px 28px; border-radius: 24px;
  font-size: 15px; letter-spacing: 2px;
  box-shadow: 0 6px 18px rgba(58,141,222,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: all 0.2s;
}
.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(58,141,222,0.7); }
.primary-btn:active { transform: translateY(0); }
.primary-btn:disabled { opacity: 0.4; cursor: default; }

/* ============================================================
   CROMO PANINI
   ============================================================ */
.card.panini {
  width: 200px; height: 290px;
  border-radius: 14px;
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--c1, #1c2540), var(--c2, #0c1326));
  border: 4px solid #f4e8d0;
  box-shadow:
    0 8px 20px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.1);
  font-family: 'Rajdhani', sans-serif;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  isolation: isolate;
}
.card.panini:hover { transform: translateY(-6px) scale(1.04); box-shadow: 0 16px 36px rgba(0,0,0,0.6); z-index: 5; }

.card.panini .card-bg-stripes {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.03) 0 12px,
      rgba(0,0,0,0.05) 12px 24px);
  pointer-events: none;
}

.card.panini .card-photo-wrap {
  position: absolute;
  top: 14px; left: 10px; right: 10px;
  height: 60%;
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0.2)),
    linear-gradient(180deg, var(--c1, #1c2540) 0%, var(--c2, #0c1326) 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15);
}
.card.panini .card-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

/* ─────────────────────────────────────────────────────────────────────
   GLOBAL: prevent native HTML5 drag on ALL player photos / card images.
   The browser's default img-drag would otherwise intercept pointermove
   anywhere in the game (team builder, battle hand, picker, duplicates,
   album, etc.) and prevent our custom pointer-based drag handlers from
   ever firing. Same trick as .hand-tile but applied universally.
   ───────────────────────────────────────────────────────────────────── */
.card-photo,
.card img,
.mini-card img,
img.card-photo,
.card-photo-wrap img,
.mini-card-photo-wrap img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

.card.panini .card-flag-badge {
  position: absolute; top: 8px; left: 8px;
  font-size: 24px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
  z-index: 4;
}
.card.panini .card-overall {
  position: absolute; top: 8px; right: 8px;
  background: linear-gradient(135deg, #fff8d6, #ffd24a);
  border-radius: 8px; padding: 4px 8px;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
  z-index: 4;
  color: #4a3000;
  line-height: 1;
}
.card.panini .card-ovr-num {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900; font-size: 18px;
}
.card.panini .card-ovr-pos {
  font-size: 9px; font-weight: 700;
  letter-spacing: 1px;
  margin-top: 2px;
}
.card.panini .card-rarity-strip {
  position: absolute;
  top: calc(60% + 20px);
  left: 0; right: 0;
  padding: 2px 10px;
  font-size: 9px; font-weight: 900;
  letter-spacing: 2px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  z-index: 2;
}
.card.panini .card-info {
  /* Anchored from just below the rarity strip down to the bottom — fills the
     full lower half. padding-top creates a small visual gap between the
     strip and the name; flex column with stats pinned to the bottom
     (margin-top:auto) so the name + team sit under the strip with breathing
     room and the stat row stays anchored to the bottom edge. */
  position: absolute;
  top: calc(60% + 30px);
  bottom: 0; left: 0; right: 0;
  padding: 14px 10px 8px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.92) 35%);
  z-index: 3;
  display: flex;
  flex-direction: column;
}
.card.panini .card-name {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  letter-spacing: 0.5px;
  line-height: 1.1;
  margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card.panini .card-team-name {
  text-align: center;
  font-size: 9px;
  opacity: 0.8;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card.panini .card-stats { margin-top: auto; }
.card.panini .card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2px;
  font-size: 9px;
}
.card.panini .card-stat {
  text-align: center;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 2px 0;
  display: flex; flex-direction: column;
}
.card.panini .card-stat span {
  opacity: 0.7;
  font-size: 8px;
  letter-spacing: 0.5px;
}
.card.panini .card-stat b {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 11px;
  color: #ffd24a;
}
.card.panini .card-glare {
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 40%,
    rgba(255,255,255,0.15) 50%,
    transparent 60%);
  background-size: 200% 200%;
  pointer-events: none;
  z-index: 6;
}

/* Rarity styling */
.card-comun.panini { border-color: #d4d4d4; }
.card-plata.panini {
  border-color: #e5e5e5;
  box-shadow: 0 8px 20px rgba(192,192,192,0.4), inset 0 0 0 1px rgba(255,255,255,0.4);
}
.card-plata.panini .card-glare {
  background: linear-gradient(115deg,
    transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
  background-size: 200% 200%;
  animation: holo 4s linear infinite;
}
.card-oro.panini {
  border-color: #ffd24a;
  box-shadow: 0 10px 28px rgba(255,210,74,0.55), inset 0 0 0 1px rgba(255,217,102,0.6);
  animation: goldShine 4s ease-in-out infinite;
}
.card-oro.panini .card-glare {
  background: linear-gradient(115deg,
    transparent 30%, rgba(255,217,102,0.4) 50%, transparent 70%);
  background-size: 200% 200%;
  animation: holo 3s linear infinite;
}
.card-estrella.panini {
  border-color: #d6a3ff;
  box-shadow: 0 12px 32px rgba(155,77,255,0.7), inset 0 0 0 1px rgba(214,163,255,0.7);
}
.card-estrella.panini .card-glare {
  background: linear-gradient(115deg,
    transparent 20%,
    rgba(214,163,255,0.4) 35%,
    rgba(94,211,255,0.4) 50%,
    rgba(255,217,102,0.4) 65%,
    transparent 80%);
  background-size: 200% 200%;
  animation: holo 2.5s linear infinite;
  mix-blend-mode: screen;
}
.card-leyenda.panini {
  border-color: #ffd966;
  box-shadow:
    0 14px 40px rgba(255,75,75,0.7),
    0 0 50px rgba(255,217,102,0.5),
    inset 0 0 0 2px rgba(255,217,102,0.8);
  animation: legendaryPulse 2.2s ease-in-out infinite;
}
.card-leyenda.panini::before {
  content: ''; position: absolute; inset: -4px;
  background: linear-gradient(45deg, #ff4b4b, #ffd24a, #ff4b4b, #ffd24a);
  background-size: 400% 400%;
  border-radius: 16px;
  z-index: -1;
  animation: holo 3s linear infinite;
}
.card-leyenda.panini .card-glare {
  background: linear-gradient(115deg,
    transparent 15%,
    rgba(255,217,102,0.5) 35%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,75,75,0.4) 65%,
    transparent 85%);
  background-size: 200% 200%;
  animation: holo 2s linear infinite;
  mix-blend-mode: screen;
}

/* size variants */
.card.panini.small { width: 150px; height: 218px; }
.card.panini.small .card-name { font-size: 12px; }
.card.panini.small .card-team-name { font-size: 8px; }
.card.panini.small .card-ovr-num { font-size: 16px; }
.card.panini.small .card-stat b { font-size: 10px; }
.card.panini.small .card-flag-badge { width: 30px; height: 30px; font-size: 20px; }

.card.panini.tiny { width: 90px; height: 132px; border-width: 2px; }
.card.panini.tiny .card-info { padding: 4px 4px 4px; }
.card.panini.tiny .card-name { font-size: 10px; }
.card.panini.tiny .card-team-name, .card.panini.tiny .card-stats, .card.panini.tiny .card-rarity-strip { display: none; }
.card.panini.tiny .card-photo-wrap { top: 18px; left: 6px; right: 6px; height: 65%; }
.card.panini.tiny .card-ovr-num { font-size: 13px; }
.card.panini.tiny .card-ovr-pos { font-size: 8px; }
.card.panini.tiny .card-overall { padding: 2px 4px; }
.card.panini.tiny .card-flag-badge { width: 22px; height: 22px; font-size: 14px; top: 4px; left: 4px; }

/* ============================================================
   PANINI EMPTY SLOT (album silhouette)
   ============================================================ */
.card-slot-empty {
  width: 150px; height: 218px;
  border-radius: 12px;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.03) 0 6px,
      rgba(0,0,0,0.05) 6px 12px),
    rgba(0,0,0,0.3);
  border: 2px dashed rgba(255,255,255,0.18);
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 8px;
  text-align: center;
}
.card-slot-empty .slot-silhouette {
  width: 65px; height: 65px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  position: relative;
  margin: 10px 0;
}
.card-slot-empty .slot-silhouette::before {
  content: ''; position: absolute;
  width: 35px; height: 35px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  top: 12px; left: 50%; transform: translateX(-50%);
}
.card-slot-empty .slot-silhouette::after {
  content: ''; position: absolute;
  width: 55px; height: 30px;
  background: rgba(255,255,255,0.15);
  border-radius: 30px 30px 0 0;
  bottom: 0; left: 50%; transform: translateX(-50%);
}
.card-slot-empty .slot-num {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1px;
}
.card-slot-empty .slot-flag {
  font-size: 18px;
  margin-top: 4px;
  opacity: 0.5;
}
.card-slot-empty .slot-name {
  font-size: 10px;
  opacity: 0.5;
  margin-top: 4px;
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}

/* ============================================================
   PACKS LIST
   ============================================================ */
.packs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.pack-item {
  background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 22px; text-align: center;
  transition: all 0.25s;
  backdrop-filter: blur(8px);
}
.pack-item:hover { border-color: rgba(255,210,74,0.6); transform: translateY(-4px); box-shadow: 0 10px 30px rgba(255,210,74,0.2); }
.pack-visual {
  width: 160px; height: 240px; margin: 0 auto 16px;
  border-radius: 14px;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,0.6));
  transition: transform 0.3s;
}
.pack-visual img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5));
}
.pack-visual::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.18) 50%, transparent 65%);
  background-size: 200% 200%;
  animation: holo 4s linear infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.pack-item:hover .pack-visual { transform: translateY(-4px) scale(1.04); }
.pack-item h3 { margin: 0 0 6px; font-family: 'Orbitron', sans-serif; font-size: 15px; letter-spacing: 1px; }
.pack-count { font-size: 13px; opacity: 0.7; margin-bottom: 12px; }
.pack-open-btn {
  width: 100%; padding: 12px;
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a; font-weight: 800; border-radius: 12px;
  letter-spacing: 1px; transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(255,138,0,0.4);
}
.pack-open-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,138,0,0.6); }
.pack-open-btn:disabled { opacity: 0.3; cursor: default; transform: none; background: #555; box-shadow: none; }

/* Mobile: SOBRES screen — fit all pack types in viewport with NO scroll.
   Horizontal cards (image · info · ABRIR button) stacked vertically,
   each flex-growing to share the available space. */
@media (max-width: 720px) {
  #screen-packs {
    height: calc(100vh - 95px);
    height: calc(100dvh - 95px - env(safe-area-inset-bottom, 0px));
    padding: 10px 10px 8px;
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .packs-list {
    display: flex !important;
    flex-direction: column;
    gap: 10px !important;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
  }
  .pack-item {
    flex: 1 1 0;
    min-height: 0;
    position: relative;
    display: grid !important;
    grid-template-columns: 78px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    border: 1.5px solid var(--rarity-color, rgba(255,255,255,0.18)) !important;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--rarity-color, #5ed3ff) 22%, transparent) 0%, rgba(10,14,28,0.85) 70%) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.55), inset 0 0 30px color-mix(in srgb, var(--rarity-color, #5ed3ff) 18%, transparent);
    overflow: hidden;
    text-align: left;
  }
  .pack-item:hover { transform: none; }
  .pack-item-glow {
    position: absolute;
    top: -40%; right: -20%;
    width: 60%; height: 180%;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--rarity-color) 70%, transparent) 0%, transparent 60%);
    filter: blur(28px);
    pointer-events: none;
    opacity: 0.65;
  }
  .pack-item .pack-visual {
    width: 78px !important;
    height: 100% !important;
    max-height: 120px;
    margin: 0 !important;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 1;
    border-radius: 10px;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6));
  }
  .pack-item .pack-visual img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
  .pack-item-body { min-width: 0; position: relative; z-index: 1; }
  .pack-item h3 {
    margin: 0 !important;
    font-family: 'Orbitron', sans-serif;
    font-size: 12.5px !important;
    font-weight: 900;
    letter-spacing: 1px !important;
    color: var(--rarity-color, #fff);
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.85);
    line-height: 1.15;
    word-break: break-word;
  }
  .pack-item .pack-count {
    margin: 4px 0 0 !important;
    font-size: 10.5px;
    opacity: 0.85;
    letter-spacing: 0.4px;
    color: #fff;
  }
  .pack-item .pack-open-btn {
    width: auto !important;
    padding: 12px 14px !important;
    font-size: 12px !important;
    font-weight: 900;
    letter-spacing: 1.5px;
    border-radius: 10px !important;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--rarity-color, #ffd24a), color-mix(in srgb, var(--rarity-color, #ffd24a) 60%, #000)) !important;
    color: #fff !important;
    border: 1px solid color-mix(in srgb, var(--rarity-color, #fff) 70%, #fff) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--rarity-color, #ffd24a) 60%, transparent) !important;
    position: relative; z-index: 1;
  }
  .pack-item .pack-open-btn:disabled {
    background: rgba(60,60,80,0.6) !important;
    color: rgba(255,255,255,0.5) !important;
    border-color: rgba(255,255,255,0.1) !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   PACK OPENING ARENA
   ============================================================ */
#screen-opening {
  position: fixed; inset: 0;
  /* Override the .screen class defaults (max-width 1280, padding 16,
     margin: 0 auto) so the grass background covers the WHOLE viewport
     on wide desktop screens. Without this the green strip is centred at
     1280 px wide and the body background shows on the sides. */
  width: 100vw; height: 100vh; height: 100dvh;
  max-width: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column;
  /* IMPORTANT: justify-content must NOT be `center` while overflow-y: auto.
     Centering inside a scrollable flex pushes the top of overflowing content
     ABOVE the viewport top (where the scrollbar can't reach), so the title
     and first row of reveal cards become unreachable. Start at top instead;
     short content centers via .reveal-final's `margin: auto` block below. */
  justify-content: flex-start; align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Stadium pitch — same visual language as the match-result screen */
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.92) 80%),
    /* Center circle */
    radial-gradient(circle at center, transparent 80px, rgba(255,255,255,0.16) 80px 82px, transparent 84px),
    /* Center vertical line */
    linear-gradient(to right,
      transparent calc(50% - 1px),
      rgba(255,255,255,0.16) calc(50% - 1px) calc(50% + 1px),
      transparent calc(50% + 1px)),
    /* Mowing stripes */
    repeating-linear-gradient(90deg,
      #0a5a14 0px, #0a5a14 90px,
      #0c6c18 90px, #0c6c18 180px);
  z-index: 30;
}
/* Subtle net overlay for stadium depth */
#screen-opening::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg,  transparent 0 40px, rgba(255,255,255,0.035) 40px 41px),
    repeating-linear-gradient(90deg, transparent 0 40px, rgba(255,255,255,0.035) 40px 41px);
  pointer-events: none;
}
#pack-stage {
  position: relative; width: 100%;
  /* Fill all available vertical space inside #screen-opening (the HUD is
     hidden during opening, so the screen IS the viewport). align-items +
     justify-content center the pack on BOTH axes. */
  flex: 1 1 auto; min-height: 100%;
  display: flex; align-items: center; justify-content: center;
}
#pack-stage .big-pack {
  width: 320px; max-width: 80vw;
  aspect-ratio: 2/3;
  position: relative;
  cursor: pointer;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,0.8)) drop-shadow(0 0 40px rgba(255,210,74,0.3));
  transition: transform 0.2s;
}
#pack-stage .big-pack:hover { transform: scale(1.03); }
.big-pack-half {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.big-pack-half img {
  width: 100%; height: 100%; object-fit: contain;
  display: block;
  -webkit-user-drag: none; user-select: none;
}
/* Clean scissor cut — straight line with a slight downward slope from left
   (~12%) to right (~17%). No more zigzag/sawtooth. The same two points on
   the top and bottom halves mean the cut edges line up perfectly. */
.big-pack-top {
  clip-path: polygon(0 0, 100% 0, 100% 17%, 0 12%);
  pointer-events: auto;
  z-index: 2;
}
.big-pack-bottom {
  clip-path: polygon(0 12%, 100% 17%, 100% 100%, 0 100%);
  z-index: 1;
}
/* Invisible tear edge — kept for animation hook (tearFlash) but no static line shown */
.tear-edge {
  position: absolute; left: 0; right: 0; top: 14%; height: 3px;
  z-index: 3; pointer-events: none;
  opacity: 0;
}
/* Invisible progress tracker — still tracks swipe distance but renders nothing */
.tear-progress {
  position: absolute; left: 0; top: 0; width: 0%; height: 0;
  pointer-events: none;
}
/* Animated finger/cursor hint sliding across the tear line */
.tear-finger {
  position: absolute; top: calc(14% - 14px); left: 6%;
  width: 30px; height: 30px;
  background: rgba(0,0,0,0.55);
  border: 2px solid #ffd24a;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #ffd24a;
  z-index: 5; pointer-events: none;
  animation: tearSwipeHint 1.8s ease-in-out infinite;
}
@keyframes tearSwipeHint {
  0%, 100% { left: 6%; opacity: 1; }
  50%      { left: 80%; opacity: 1; }
}
.big-pack.tearing .tear-finger { display: none; }
.big-pack-hint {
  position: absolute; bottom: -42px; left: 0; right: 0;
  text-align: center;
  font-family: 'Orbitron', sans-serif; font-size: 14px;
  letter-spacing: 3px; color: #ffd24a;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
  animation: pulse 1.5s ease-in-out infinite;
  pointer-events: none;
}
/* TEAR ANIMATION */
.big-pack.tearing .big-pack-top {
  animation: tearUp 0.6s cubic-bezier(.5,.1,.2,1) forwards;
}
.big-pack.tearing .big-pack-bottom {
  animation: tearShake 0.6s ease-in;
}
.big-pack.tearing .tear-edge {
  animation: tearFlash 0.5s ease-out forwards;
}
@keyframes tearUp {
  0%   { transform: translateY(0) rotate(0); }
  20%  { transform: translateY(-4%) rotate(-2deg); }
  100% { transform: translateY(-130%) rotate(-18deg); opacity: 0; }
}
@keyframes tearShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}
@keyframes tearFlash {
  0%   { opacity: 0.7; transform: scaleX(1); }
  40%  { opacity: 1; box-shadow: 0 0 30px rgba(255,255,255,0.9); transform: scaleX(1.05); }
  100% { opacity: 0; }
}
#reveal-stage {
  position: relative; width: 100%;
  flex: 1 0 auto;                 /* grow to push CONTINUAR down; don't shrink */
  min-height: 100%;
  /* Center the revealed card on BOTH axes within the viewport. The final-grid
     view overrides this to align-items: flex-start via the :has() rule below,
     so single-card reveals stay centered while the 5-card grid scrolls from
     the top with bottom padding for the fixed CONTINUAR button. */
  display: flex; align-items: center; justify-content: center;
  padding: 10px 20px;
  perspective: 1500px;
}
/* Final grid: keep both axes centered like single-card reveals. Bottom padding
   leaves room for the fixed #opening-continue button without offsetting the
   visual center too much. */
#reveal-stage:has(.reveal-final) {
  padding-bottom: 120px;
}
.reveal-card-stage {
  position: relative;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  touch-action: none;            /* prevent scroll while dragging for parallax */
}
.reveal-card-shell {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}
/* Make the revealed card ~3x bigger than default */
.reveal-card-shell .card.panini {
  /* The calc() reserves ~240px vertical room (top hint + bottom progress)
     so the card never overlaps them on short phones. Aspect-ratio derives
     the height — width must carry the constraint to keep the 5/7 proportion. */
  width: min(360px, 78vw, calc((100dvh - 240px) * 5 / 7));
  height: auto;
  aspect-ratio: 5/7;
  box-shadow: 0 30px 80px rgba(0,0,0,0.8), 0 0 60px rgba(255,210,74,0.3);
}
.reveal-card-glow {
  position: absolute; inset: 0;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.35), transparent 50%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 10;
}

/* ─── PACK REVEAL FLOURISH ───────────────────────────────────────────────
   Three quick layered effects fired the instant a card lands:
     1) .pack-shake on the .card.panini — a tactile 6-frame stop-motion
        wobble (translate + rotate) that reads as IMPACT.
     2) .pack-rim-glow — a bright gold halo right around the card edges,
        fades fast (no soft cloudy halo, no neon).
     3) .pack-glint — a single bright streak sweeping diagonally across
        the card face — the visual "shine" peak.
   No confetti, no concentric rings, no falling dust.
   ─────────────────────────────────────────────────────────────────────── */

/* Card shake — applied to the .card.panini inside the shell so it doesn't
   fight the shell's gsap entrance / parallax transforms. */
.card.panini.pack-shake {
  animation: packShake 0.55s cubic-bezier(.36,.07,.19,.97) both;
}
.card.panini.pack-shake.intensity-sm { animation-name: packShakeSm; }
.card.panini.pack-shake.intensity-md { animation-name: packShakeMd; }
.card.panini.pack-shake.intensity-lg { animation-name: packShakeLg; }

@keyframes packShakeSm {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  10%      { transform: translate(-2px, -1px) rotate(-0.6deg); }
  25%      { transform: translate(3px, 1px)  rotate(0.9deg); }
  45%      { transform: translate(-2px, 2px) rotate(-0.5deg); }
  65%      { transform: translate(2px, -1px) rotate(0.4deg); }
  82%      { transform: translate(-1px, 1px) rotate(-0.2deg); }
}
@keyframes packShakeMd {
  0%, 100% { transform: translate(0, 0) rotate(0) scale(1); }
  8%       { transform: translate(-4px, -2px) rotate(-1.2deg) scale(1.025); }
  22%      { transform: translate(5px, 2px)  rotate(1.6deg)  scale(1.01); }
  40%      { transform: translate(-4px, 3px) rotate(-1deg); }
  58%      { transform: translate(3px, -2px) rotate(0.8deg); }
  76%      { transform: translate(-2px, 1px) rotate(-0.4deg); }
  90%      { transform: translate(1px, -1px) rotate(0.2deg); }
}
@keyframes packShakeLg {
  0%, 100% { transform: translate(0, 0) rotate(0) scale(1); }
  7%       { transform: translate(-7px, -3px) rotate(-2deg) scale(1.05); }
  20%      { transform: translate(8px, 3px)  rotate(2.6deg) scale(1.02); }
  35%      { transform: translate(-6px, 4px) rotate(-1.6deg) scale(1.02); }
  52%      { transform: translate(5px, -3px) rotate(1.3deg); }
  70%      { transform: translate(-3px, 2px) rotate(-0.8deg); }
  86%      { transform: translate(2px, -1px) rotate(0.4deg); }
}

/* Gold rim glow — bright halo right at the card border, fades fast.
   Sits BEHIND the card so it reads as light spilling out from the edges. */
.pack-rim-glow {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  z-index: -1;
  background: transparent;
  animation: packRimGlow 0.65s cubic-bezier(.18,.85,.22,1) forwards;
  will-change: box-shadow, opacity;
}
.pack-rim-glow.intensity-sm { --rim-color: rgba(255, 220, 140, 0.85); --rim-blur: 28px;  --rim-outer: 60px; }
.pack-rim-glow.intensity-md { --rim-color: rgba(255, 210, 80, 0.95);  --rim-blur: 44px;  --rim-outer: 90px; }
.pack-rim-glow.intensity-lg { --rim-color: rgba(255, 200, 50, 1.0);   --rim-blur: 60px;  --rim-outer: 130px; }

@keyframes packRimGlow {
  0% {
    opacity: 0;
    box-shadow:
      0 0 0   var(--rim-color),
      0 0 0   var(--rim-color);
  }
  35% {
    opacity: 1;
    box-shadow:
      0 0 var(--rim-blur)  var(--rim-color),
      0 0 var(--rim-outer) var(--rim-color);
  }
  100% {
    opacity: 0;
    box-shadow:
      0 0 calc(var(--rim-blur)  * 0.5) transparent,
      0 0 calc(var(--rim-outer) * 0.5) transparent;
  }
}

/* Diagonal gold glint sweep across the card face — single bright streak
   that fades OUT before reaching the bottom-left edge so the exit isn't
   abrupt. Softer gradient stops so the streak feels like polished metal
   shine instead of a hard line. */
.pack-glint {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  z-index: 11;
  overflow: hidden;
  mix-blend-mode: screen;
}
.pack-glint::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent              30%,
    rgba(255, 255, 255, 0.75) 46%,
    rgba(255, 235, 160, 0.90) 50%,
    rgba(255, 210, 90, 0.55)  54%,
    transparent              70%);
  background-size: 300% 300%;
  background-position: 130% -30%;
  opacity: 0;
  animation: packGlint 0.55s ease-out forwards;
}
.pack-glint.intensity-sm::after { --g-opacity: 0.65; }
.pack-glint.intensity-md::after { --g-opacity: 0.85; }
.pack-glint.intensity-lg::after { --g-opacity: 1.0;  }
@keyframes packGlint {
  0%   { background-position: 130% -30%; opacity: 0; }
  20%  { opacity: var(--g-opacity, 0.9); }
  55%  { opacity: var(--g-opacity, 0.9); }
  100% { background-position: -100% 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .card.panini.pack-shake,
  .pack-rim-glow,
  .pack-glint::after { animation: none !important; opacity: 0 !important; }
}
.reveal-new-badge {
  position: absolute;
  top: -16px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a; font-weight: 900; font-size: 14px;
  letter-spacing: 2px;
  padding: 4px 18px; border-radius: 14px;
  z-index: 15;
  box-shadow: 0 4px 16px rgba(255,138,0,0.6);
  border: 2px solid #fff;
  font-family: 'Orbitron', sans-serif;
}
/* Progress + tap-hint are pinned ABSOLUTELY to the bottom of the stage so
   only the card shell participates in the flex-column centering. That puts
   the CARD itself at the exact visual center of the viewport (otherwise the
   [shell, progress, hint] stack was centered as a column, pushing the card
   above the midpoint). */
.reveal-progress {
  position: absolute;
  bottom: 64px; left: 50%; transform: translateX(-50%);
  font-family: 'Orbitron', sans-serif;
  font-size: 18px; letter-spacing: 4px;
  color: #ffd24a;
  background: rgba(0,0,0,0.7);
  padding: 6px 18px;
  border-radius: 14px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
  z-index: 5;
}
.reveal-tap-hint:empty { display: none; }
.reveal-tap-hint {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  font-family: 'Orbitron', sans-serif;
  font-size: 12px; letter-spacing: 2px;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.55);
  padding: 8px 18px;
  border-radius: 14px;
  text-align: center;
  max-width: 90vw;
  line-height: 1.5;
  z-index: 5;
}
@keyframes tapHintPulse {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 1; transform: scale(1.04); }
}
@media (max-width: 600px) {
  .reveal-card-shell .card.panini { width: min(280px, 85vw, calc((100dvh - 240px) * 5 / 7)); }
  .reveal-progress { font-size: 14px; }
  .reveal-tap-hint { font-size: 11px; }
}
#opening-continue {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  z-index: 10;
  /* Attention-grabbing pulse so the user knows to press it */
  animation: continuePulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(255,210,74,0.7);
}
#opening-continue:hover { animation-play-state: paused; }
@keyframes continuePulse {
  0%   { transform: translateX(-50%) scale(1);    box-shadow: 0 8px 24px rgba(255,138,0,0.5), 0 0 0 0 rgba(255,210,74,0.7); }
  50%  { transform: translateX(-50%) scale(1.08); box-shadow: 0 10px 28px rgba(255,138,0,0.7), 0 0 0 16px rgba(255,210,74,0); }
  100% { transform: translateX(-50%) scale(1);    box-shadow: 0 8px 24px rgba(255,138,0,0.5), 0 0 0 0 rgba(255,210,74,0); }
}
@media (max-width: 600px) {
  #opening-continue { bottom: 64px; }
}

/* ── FINAL GRID with all 5 cards visible — centered both axes ── */
.reveal-final {
  width: 100%;
  /* The parent #screen-opening uses `justify-content: flex-start` (so
     overflowing content stays reachable). To still centre the 5-card grid
     vertically when it fits in the viewport, use `margin: auto 0` — in
     flex layout this distributes free space above + below the block, but
     collapses to 0 automatically when content overflows. Result: short
     content centres, long content scrolls from the top. */
  margin: auto 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  padding: 20px 12px;
}
.reveal-final-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900; font-size: 22px; letter-spacing: 4px;
  background: linear-gradient(180deg, #fff, #ffd24a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  margin-bottom: 12px;
}
.reveal-final-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 1200px;
  padding: 0 16px;
  margin: 0 auto;
  align-items: start;
  justify-items: center;
}
.reveal-final-item {
  position: relative;
  width: 100%;
}
.reveal-final-item .card.panini {
  width: 100%;
  height: auto;
  max-height: 62vh;
  aspect-ratio: 5/7;
  box-shadow: 0 14px 36px rgba(0,0,0,0.6), 0 0 30px rgba(255,210,74,0.2);
}
@media (max-width: 900px) {
  /* Mobile: 5 cards laid out 3-on-top + 2-on-bottom for a podium-style
     reveal. The 6-column grid lets each card span 2 cols (effectively
     a 3-up grid); the bottom row's two cards are offset to cols 2-3 and
     4-5 so they land centred under the 3-up row above. */
  .reveal-final { padding: 14px 6px 130px; gap: 14px; }
  .reveal-final-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: 460px;
    gap: 10px 8px;
    padding: 0 4px;
    justify-items: center;
  }
  .reveal-final-grid > :nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
  .reveal-final-grid > :nth-child(2) { grid-column: 3 / span 2; grid-row: 1; }
  .reveal-final-grid > :nth-child(3) { grid-column: 5 / span 2; grid-row: 1; }
  .reveal-final-grid > :nth-child(4) { grid-column: 2 / span 2; grid-row: 2; }
  .reveal-final-grid > :nth-child(5) { grid-column: 4 / span 2; grid-row: 2; }
  .reveal-final-item { width: 100%; max-width: 140px; }
  .reveal-final-item .card.panini { max-height: none; }
  .reveal-final-title { font-size: 16px; margin-bottom: 0; }
}
@media (max-width: 480px) {
  .reveal-final-grid { gap: 8px 6px; padding: 0 2px; max-width: 100vw; }
  .reveal-final-item { max-width: 120px; }
}
/* Stage padding is what eats most of the horizontal space — slim down on mobile
   so cards have ~150px to work with instead of ~120px. Bottom padding only
   kicks in for the final-grid view (clears the fixed CONTINUAR pill). */
@media (max-width: 600px) {
  #reveal-stage { padding: 6px 6px; }
  #reveal-stage:has(.reveal-final) { padding-bottom: 90px; }
}
/* ── Scale down floating elements inside the final summary so they don't crowd the photo ── */
.reveal-final-item .reveal-new-badge {
  font-size: 10px;
  padding: 2px 9px;
  letter-spacing: 1px;
  top: -8px;
  border-width: 1.5px;
}
.reveal-final-item .card.panini .card-overall {
  padding: 2px 6px;
  border-radius: 6px;
  top: 6px; right: 6px;
}
.reveal-final-item .card.panini .card-ovr-num { font-size: 13px; }
.reveal-final-item .card.panini .card-ovr-pos { font-size: 7px; margin-top: 1px; }
.reveal-final-item .card.panini .card-flag-badge {
  width: 26px; height: 26px;
  font-size: 16px;
  top: 6px; left: 6px;
}
/* On the small reveal cards (≈155px wide on mobile) the default
   `top: calc(60% + 30px)` + 14px padding-top of .card-info eats too much
   vertical space and clips the player name. Tighten the offset and trim
   font sizes so name + team + stats all fit in the bottom strip. */
/* On the small reveal cards the default top offsets put the rarity strip
   (LEYENDA/ORO/PLATA…) and the name on top of each other. Push the strip
   up tight against the photo and pack everything tightly below it so the
   rarity, name, team and stats all fit without overlapping. */
.reveal-final-item .card.panini .card-rarity-strip {
  top: calc(60% + 14px);
  font-size: 7px;
  padding: 1px 6px;
  letter-spacing: 1.5px;
}
.reveal-final-item .card.panini .card-info {
  top: calc(60% + 27px);
  padding: 3px 6px 5px;
}
/* Name on a single line with ellipsis — most player surnames + a first
   initial fit comfortably at 10.5 px in ≈120 px width. Truncating super-
   long names is preferable to either crashing into the rarity strip or
   pushing the stats off the bottom of the card. */
.reveal-final-item .card.panini .card-name {
  font-size: 10.5px;
  line-height: 1.15;
  letter-spacing: 0.3px;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reveal-final-item .card.panini .card-team-name {
  font-size: 7px;
  margin-bottom: 2px;
  letter-spacing: 1px;
}
/* Compact stats row — labels still visible, just smaller so the whole
   4-stat strip fits in ≈18 px instead of the default ≈26 px. */
.reveal-final-item .card.panini .card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  font-size: 7px;
  margin-top: auto;
}
.reveal-final-item .card.panini .card-stat {
  padding: 0;
  line-height: 1.1;
}
.reveal-final-item .card.panini .card-stat span {
  font-size: 5px;
  letter-spacing: 0.4px;
}
.reveal-final-item .card.panini .card-stat b {
  font-size: 9px;
}
@media (max-width: 480px) {
  .reveal-final-item .reveal-new-badge { font-size: 9px; padding: 2px 8px; top: -7px; letter-spacing: 0.5px; }
  .reveal-final-item .card.panini .card-overall { padding: 1px 5px; }
  .reveal-final-item .card.panini .card-ovr-num { font-size: 11px; }
  .reveal-final-item .card.panini .card-ovr-pos { font-size: 6px; }
  .reveal-final-item .card.panini .card-flag-badge { width: 22px; height: 22px; font-size: 13px; }
}

.pack-burst {
  position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  pointer-events: none;
}

/* ============================================================
   ALBUM — libro paginado con flip 3D
   ============================================================ */
/* Album header — premium collection card */
.album-header { padding: 14px 16px 4px; }
.album-progress-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,210,74,0.18) 0%, transparent 60%),
    linear-gradient(135deg, rgba(20,28,52,0.85) 0%, rgba(10,15,30,0.85) 100%);
  border: 2px solid rgba(255,210,74,0.45);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.12);
  position: relative;
  overflow: hidden;
}
.album-progress-icon {
  flex-shrink: 0;
  font-size: 42px;
  line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
}
.album-progress-body { flex: 1; min-width: 0; }
.album-progress-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 6px;
}
.album-progress-label {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800; letter-spacing: 2px;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.album-progress-pct {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 26px;
  background: linear-gradient(180deg, #fff8d6, #ffd24a 60%, #ff8a00);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  line-height: 1;
}
.album-progress-bar {
  height: 12px;
  background: rgba(0,0,0,0.55);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,210,74,0.25);
  position: relative;
}
#album-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #fff8d6 0%, #ffd24a 30%, #ff8a00 70%, #ff4b4b 100%);
  transition: width 0.5s ease;
  box-shadow: 0 0 10px rgba(255,210,74,0.6), inset 0 1px 0 rgba(255,255,255,0.4);
  position: relative;
}
#album-progress-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.4), transparent 50%);
  border-radius: 6px;
}
.album-progress-bottom {
  margin-top: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700; letter-spacing: 1px;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
}
.album-progress-bottom strong {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  color: #ffd24a;
  font-size: 16px;
  margin-right: 2px;
}
.album-progress-of { margin: 0 4px; color: rgba(255,255,255,0.5); }
.album-progress-unit { margin-left: 4px; font-weight: 600; }
@media (max-width: 480px) {
  .album-header { padding: 10px 10px 0; }
  .album-progress-card { padding: 12px 14px; gap: 10px; }
  .album-progress-icon { font-size: 34px; }
  .album-progress-label { font-size: 11px; letter-spacing: 1.5px; }
  .album-progress-pct { font-size: 22px; }
  .album-progress-bottom { font-size: 12px; }
  .album-progress-bottom strong { font-size: 14px; }
}

#album-book-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  perspective: 2200px;
  padding: 8px 60px;
  /* Take all the vertical space left between the album header above and the
     page indicator / bottom stats bar below, so the book is truly centered
     in the visible area. */
  min-height: calc(100vh - 200px);
}
@media (max-width: 720px) { #album-book-stage { padding: 6px 18px; min-height: calc(100vh - 210px); } }
@media (max-width: 480px) { #album-book-stage { padding: 4px 8px;  min-height: calc(100vh - 220px); } }

.album-book {
  /* WIDTH-bound: the book sizes from horizontal space first so portrait phones
     don't stretch the cover. Height is derived via aspect-ratio. */
  width: min(620px, 92vw);
  aspect-ratio: 3/4;
  /* Safety cap on tall narrow screens so the book never overflows vertically. */
  max-height: calc(100vh - 200px);
  height: auto;
  position: relative;
  transform-style: preserve-3d;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at top, rgba(255,210,74,0.15), transparent 60%),
    linear-gradient(160deg, #1a2440 0%, #0a0e1c 100%);
  box-shadow:
    0 0 0 2px rgba(255,210,74,0.5),
    0 0 0 6px rgba(20,28,50,0.95),
    0 0 0 8px rgba(255,210,74,0.25),
    0 30px 80px rgba(0,0,0,0.85),
    0 0 60px rgba(255,210,74,0.18);
  transition: all 0.3s ease;
}
@media (max-width: 600px) {
  .album-book {
    width: min(96vw, 480px);
    max-height: calc(100vh - 220px);
    border-radius: 10px;
    box-shadow:
      0 0 0 2px rgba(255,210,74,0.4),
      0 0 0 4px rgba(20,28,50,0.95),
      0 14px 30px rgba(0,0,0,0.7);
  }
}
/* Double-page mode: 2 pages side by side like an open book */
.album-book.album-book-double {
  width: min(96vw, 1080px);
  aspect-ratio: 3/2;       /* 2× wider, half as tall in ratio */
}
.album-book.album-book-double .album-page {
  width: 50%; right: auto;
}
.album-book.album-book-double .album-page.album-page-left  { left: 0;   border-right: 1px solid rgba(0,0,0,0.25); }
.album-book.album-book-double .album-page.album-page-right { left: 50%; border-left:  1px solid rgba(0,0,0,0.25); }
.album-book.album-book-double .album-page.album-page-left  { transform-origin: right center; }
.album-book.album-book-double .album-page.album-page-right { transform-origin: left  center; }
/* Subtle spine shadow between pages */
.album-book.album-book-double::after {
  content: ''; position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 24px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.35), transparent);
  pointer-events: none; z-index: 3;
}
/* Zoom mode — fill the viewport */
#screen-album.zoomed { padding: 0; max-width: 100vw; }
#screen-album.zoomed .album-header, #screen-album.zoomed #album-page-indicator { display: none; }
#screen-album.zoomed #album-book-stage { padding: 0; height: 100vh; }
#screen-album.zoomed .album-book {
  height: calc(100vh - 20px);
  max-height: 100vh;
  width: auto;
  max-width: 100vw;
}
#screen-album.zoomed #album-zoom-btn {
  position: fixed; top: 14px; right: 14px;
  background: rgba(0,0,0,0.7); color: #fff;
}
.album-zoom-btn {
  position: absolute; top: 8px; right: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #ffd24a; font-size: 18px;
  border: 1px solid rgba(255,210,74,0.5);
  z-index: 12;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: all 0.2s;
}
.album-zoom-btn:hover { background: #ffd24a; color: #1a1a1a; transform: scale(1.1); }
.album-book::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(90deg, rgba(0,0,0,0.7), rgba(0,0,0,0));
  z-index: 4;
  pointer-events: none;
}
/* Subtle stadium shimmer across the top of the book */
.album-book::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,210,74,0.9), transparent);
  filter: blur(1px);
  z-index: 5; pointer-events: none;
}

.album-page {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at top, rgba(94,211,255,0.06), transparent 60%),
    linear-gradient(180deg, #f6f1e3 0%, #ede5cf 100%);
  border-radius: 12px;
  overflow: hidden;
  transform-origin: left center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  display: flex; flex-direction: column;
}
/* Subtle leather/paper grain (CSS-only, no images) */
.album-page::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.012) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.012) 0 2px, transparent 2px 4px);
  pointer-events: none; z-index: 1;
}
/* ── Realistic page-flip animations ──
   - Origin is the SPINE (right edge for "advance to next page" → page leaves
     toward the LEFT; left edge for "go back to previous").
   - Curved easing + 180° rotation simulates a real paper turn.
   - Subtle dynamic shadow grows mid-flip then fades.
*/
.album-page.flip-out-right { animation: flipOutRight 0.55s cubic-bezier(.5,.05,.25,1) forwards; transform-origin: left center; z-index: 5; box-shadow: 0 6px 24px rgba(0,0,0,0.5); }
.album-page.flip-in-right  { animation: flipInRight  0.55s cubic-bezier(.5,.05,.25,1) forwards; transform-origin: left center; z-index: 4; }
.album-page.flip-out-left  { animation: flipOutLeft  0.55s cubic-bezier(.5,.05,.25,1) forwards; transform-origin: right center; z-index: 5; box-shadow: -6px 6px 24px rgba(0,0,0,0.5); }
.album-page.flip-in-left   { animation: flipInLeft   0.55s cubic-bezier(.5,.05,.25,1) forwards; transform-origin: right center; z-index: 4; }

/* Forward = next page: visible page peels OUT toward the left (its right edge
   sweeps up-and-over), new page slides IN from the right edge. */
@keyframes flipOutRight {
  0%   { transform: perspective(1800px) rotateY(0deg);   box-shadow: 0 6px 18px rgba(0,0,0,0.35); filter: brightness(1); }
  35%  { transform: perspective(1800px) rotateY(-30deg); box-shadow: -8px 12px 30px rgba(0,0,0,0.55); filter: brightness(0.95); }
  60%  { transform: perspective(1800px) rotateY(-90deg) translateZ(8px); box-shadow: -22px 16px 36px rgba(0,0,0,0.7); filter: brightness(0.78); }
  100% { transform: perspective(1800px) rotateY(-178deg); box-shadow: -10px 8px 24px rgba(0,0,0,0.45); filter: brightness(0.88); }
}
@keyframes flipInRight {
  0%   { transform: perspective(1800px) rotateY(0deg) translateX(20px); opacity: 0.85; }
  60%  { transform: perspective(1800px) rotateY(0deg); opacity: 1; }
  100% { transform: perspective(1800px) rotateY(0deg); opacity: 1; }
}

/* Backward = previous page: hinge swings from the left edge */
@keyframes flipOutLeft {
  0%   { transform: perspective(1800px) rotateY(0deg);  box-shadow: 0 6px 18px rgba(0,0,0,0.35); filter: brightness(1); }
  35%  { transform: perspective(1800px) rotateY(30deg); box-shadow: 8px 12px 30px rgba(0,0,0,0.55); filter: brightness(0.95); }
  60%  { transform: perspective(1800px) rotateY(90deg) translateZ(8px); box-shadow: 22px 16px 36px rgba(0,0,0,0.7); filter: brightness(0.78); }
  100% { transform: perspective(1800px) rotateY(178deg); box-shadow: 10px 8px 24px rgba(0,0,0,0.45); filter: brightness(0.88); }
}
@keyframes flipInLeft {
  0%   { transform: perspective(1800px) rotateY(0deg) translateX(-20px); opacity: 0.85; }
  60%  { transform: perspective(1800px) rotateY(0deg); opacity: 1; }
  100% { transform: perspective(1800px) rotateY(0deg); opacity: 1; }
}

.album-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a;
  font-size: 36px; font-weight: 900;
  line-height: 1;
  border: 3px solid #fff;
  box-shadow: 0 8px 22px rgba(255,138,0,0.5), 0 4px 12px rgba(0,0,0,0.6);
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  cursor: pointer;
}
.album-nav:hover:not(:disabled) { transform: translateY(-50%) scale(1.12); box-shadow: 0 10px 28px rgba(255,210,74,0.7), 0 4px 14px rgba(0,0,0,0.6); }
.album-nav:disabled { opacity: 0.35; cursor: default; filter: grayscale(0.5); }
.album-nav-prev { left: 6px; padding-bottom: 4px; }
.album-nav-next { right: 6px; padding-bottom: 4px; }
@media (max-width: 600px) {
  .album-nav { width: 42px; height: 42px; font-size: 26px; border-width: 2px; }
  .album-nav-prev { left: -4px; }
  .album-nav-next { right: -4px; }
}

#album-page-indicator {
  position: relative;
  text-align: center;
  margin-top: 14px;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px; letter-spacing: 3px;
  opacity: 0.95;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
}
.album-jump-btn {
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a;
  border: 2px solid #fff;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255,138,0,0.5);
  transition: transform 0.15s;
}
.album-jump-btn:hover { transform: scale(1.1); }
.album-jump-menu {
  position: absolute;
  bottom: 120%; left: 50%;
  transform: translateX(-50%);
  width: min(640px, 92vw);
  max-height: 70vh;
  overflow-y: auto;
  background: rgba(20,28,50,0.98);
  border: 2px solid rgba(255,210,74,0.5);
  border-radius: 14px;
  padding: 12px;
  z-index: 300;
  box-shadow: 0 18px 50px rgba(0,0,0,0.7);
  text-align: left;
}
.jump-section { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.jump-special {
  background: rgba(255,210,74,0.15);
  border: 1px solid rgba(255,210,74,0.4);
  color: #ffd24a;
  padding: 6px 12px; border-radius: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px; font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
}
.jump-special:hover { background: rgba(255,210,74,0.28); }
.jump-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
}
.jump-group {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 6px;
}
.jump-group-letter {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px; letter-spacing: 1px;
  color: #ffd24a;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,210,74,0.2);
  padding-bottom: 2px;
}
.jump-team {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  background: transparent;
  color: #fff;
  border: none;
  padding: 4px 6px; border-radius: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  letter-spacing: 0;
}
.jump-team:hover { background: rgba(255,210,74,0.18); }
.jump-team.current { background: rgba(255,210,74,0.3); color: #ffd24a; font-weight: 800; }
.jt-flag { font-size: 14px; }
.jt-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jt-pct { font-size: 10px; opacity: 0.7; font-family: 'Orbitron', sans-serif; }

/* Cover */
.page-cover {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.page-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.page-cover-open {
  position: absolute;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  font-size: 14px;
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a;
  box-shadow: 0 8px 24px rgba(255,138,0,0.6);
}

/* Back cover */
.page-backcover {
  width: 100%; height: 100%;
  background: linear-gradient(160deg, #1c2540, #0c1326);
  display: flex; align-items: center; justify-content: center;
  color: #f6f8fc;
}
.bc-inner { text-align: center; padding: 30px; }
.bc-inner h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 28px; letter-spacing: 4px;
  margin: 0 0 8px;
  background: linear-gradient(180deg, #fff, #ffd24a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.bc-inner p { opacity: 0.7; margin: 0 0 24px; }
.bc-big {
  font-family: 'Orbitron', sans-serif;
  font-size: 90px; font-weight: 900;
  background: linear-gradient(180deg, #ffd24a, #ff4b4b);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1;
  margin: 16px 0;
}
.bc-line { font-size: 16px; margin: 6px 0; opacity: 0.9; }
.bc-inner .primary-btn { margin-top: 24px; }

/* Paper page */
.page-paper {
  width: 100%; height: 100%;
  padding: 14px 16px;
  color: #2a1a05;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  position: relative; z-index: 2;
}
.page-paper-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px; letter-spacing: 3px;
  color: #5c3d10;
  text-align: center;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 3px double #5c3d10;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .page-paper { padding: 8px 8px; }
  .page-paper-title { font-size: 13px; letter-spacing: 2px; margin-bottom: 6px; }
}

/* Index */
.index-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.index-group {
  background: rgba(92,61,16,0.06);
  border: 1px solid rgba(92,61,16,0.2);
  border-radius: 10px;
  padding: 10px;
}
.index-group-letter {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800; font-size: 13px;
  letter-spacing: 2px;
  color: #5c3d10;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(92,61,16,0.2);
}
.index-group-teams { display: flex; flex-direction: column; gap: 2px; }
.index-team-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: transparent;
  border-radius: 6px;
  color: #2a1a05;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  width: 100%;
  transition: background 0.15s;
}
.index-team-row:hover { background: rgba(255,210,74,0.3); }
.itr-flag { font-size: 18px; }
.itr-name { flex: 1; }
.itr-pct { font-family: 'Orbitron', sans-serif; font-size: 12px; opacity: 0.7; }

/* Team page header — modern shield-style with metallic edge */
.team-page-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.35),
    inset 0 2px 0 rgba(255,255,255,0.25),
    inset 0 -2px 0 rgba(0,0,0,0.25);
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.25);
}
/* Subtle inner shine */
.team-page-header::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  pointer-events: none;
}
.team-page-flag {
  font-size: 28px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  background: rgba(255,255,255,0.95);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255,210,74,0.7);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  position: relative; z-index: 1;
}
.team-page-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 17px; letter-spacing: 1.5px;
  font-weight: 900;
  line-height: 1.1;
  position: relative; z-index: 1;
}
.team-page-sub {
  font-size: 10px; opacity: 0.92;
  margin-top: 3px; font-weight: 700;
  letter-spacing: 1px;
  position: relative; z-index: 1;
}
@media (max-width: 600px) {
  .team-page-header { padding: 6px 10px; gap: 8px; margin-bottom: 6px; border-radius: 10px; }
  .team-page-flag { width: 34px; height: 34px; font-size: 20px; border-width: 1.5px; }
  .team-page-title { font-size: 13px; letter-spacing: 1px; }
  .team-page-sub { font-size: 9px; margin-top: 1px; }
}

/* Team-page row title — modern chip instead of underline */
.team-page-row-title {
  display: inline-block;
  background: linear-gradient(135deg, #5c3d10, #8b5a14);
  color: #fff8d6 !important;
  border: none !important;
  border-radius: 10px;
  padding: 3px 12px !important;
  font-size: 10px !important;
  font-weight: 900;
  letter-spacing: 2px;
  align-self: flex-start;
  box-shadow: 0 2px 6px rgba(92,61,16,0.4);
  margin-bottom: 6px !important;
}
@media (max-width: 600px) {
  .team-page-row-title { font-size: 8px !important; padding: 2px 8px !important; letter-spacing: 1px; }
}

.team-page-row {
  margin-bottom: 6px;
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 0;
}
.team-page-row-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px; letter-spacing: 2px;
  color: #5c3d10;
  margin: 0 0 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(92,61,16,0.25);
  flex-shrink: 0;
}
.team-grid {
  display: flex;
  gap: 4px;
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.team-grid .card.panini.small,
.team-grid .card-slot-empty {
  /* Scale by HEIGHT, keep aspect-ratio so cards never overlap horizontally */
  height: 100%;
  width: auto;
  aspect-ratio: 5/7;
  min-height: 0;
  flex-shrink: 1;
  /* Allow up to 5 cards in a row with gaps: each ≤ 20% of grid width */
  max-width: 19%;
}
/* All rows use flex centering — already handled by parent. Nothing extra needed. */
/* Tighten panini card content for very small sizes */
.team-grid .card.panini.small .card-name { font-size: 9px; padding: 1px 2px; }
.team-grid .card.panini.small .card-team-name { font-size: 7px; margin-bottom: 2px; }
.team-grid .card.panini.small .card-info { padding: 3px 4px 4px; }
.team-grid .card.panini.small .card-stats { font-size: 7px; gap: 1px; }
.team-grid .card.panini.small .card-stat b { font-size: 8px; }
.team-grid .card.panini.small .card-stat span { font-size: 6px; }
.team-grid .card.panini.small .card-ovr-num { font-size: 11px; }
.team-grid .card.panini.small .card-ovr-pos { font-size: 6px; }
.team-grid .card.panini.small .card-overall { padding: 2px 4px; }
.team-grid .card.panini.small .card-flag-badge { width: 18px; height: 18px; font-size: 12px; top: 3px; left: 3px; }
.team-grid .card.panini.small .card-rarity-strip { font-size: 6px; padding: 1px 4px; letter-spacing: 1px; }
.team-grid .card.panini.small .card-photo-wrap { top: 14px; left: 6px; right: 6px; height: 55%; }
.team-grid .card-slot-empty .slot-silhouette { width: 36px; height: 36px; margin: 4px 0; }
.team-grid .card-slot-empty .slot-silhouette::before { width: 20px; height: 20px; top: 6px; }
.team-grid .card-slot-empty .slot-silhouette::after { width: 30px; height: 16px; }
.team-grid .card-slot-empty .slot-num { font-size: 8px; }
.team-grid .card-slot-empty .slot-flag { font-size: 12px; margin-top: 2px; }
.team-grid .card-slot-empty .slot-name { font-size: 8px; margin-top: 2px; }

.page-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; opacity: 0.5; font-size: 18px;
}

/* Zoom overlay for album cards */
#album-zoom-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(12px);
  z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto;
  padding: 24px 0;
  opacity: 0;
  transition: opacity 0.25s;
  cursor: pointer;
}
#album-zoom-overlay.show { opacity: 1; }
#album-zoom-overlay .zoom-card-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  perspective: 1200px;
}
#album-zoom-overlay .card.panini {
  width: 320px; height: 460px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.8), 0 0 50px rgba(255,210,74,0.3);
}
#album-zoom-overlay .card.panini .card-name { font-size: 20px; }
#album-zoom-overlay .card.panini .card-team-name { font-size: 12px; }
#album-zoom-overlay .card.panini .card-ovr-num { font-size: 24px; }
#album-zoom-overlay .card.panini .card-stat b { font-size: 15px; }
#album-zoom-overlay .card.panini .card-flag-badge { width: 50px; height: 50px; font-size: 30px; }
#album-zoom-overlay .zoom-hint {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px; letter-spacing: 3px;
  color: rgba(255,255,255,0.6);
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
@media (max-width: 600px) {
  #album-zoom-overlay .card.panini { width: 260px; height: 374px; }
}
/* Special cromo zoom — full pre-designed artwork, no name/stats overlay
   (that template doesn't apply to a complete poster-style card). Same
   width as the regular panini zoom card, aspect-ratio derived from the
   source art (600×800) instead of the panini 600×907 ratio. */
#album-zoom-overlay .special-zoom-card {
  width: 320px;
  aspect-ratio: 600 / 800;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.8), 0 0 50px rgba(255,210,74,0.3);
  cursor: default;
}
@media (max-width: 600px) {
  #album-zoom-overlay .special-zoom-card { width: 260px; }
}

@media (max-width: 700px) {
  #album-book-stage { padding: 8px 50px; }
  .album-nav { width: 40px; height: 40px; font-size: 28px; }
  .album-book { width: 96vw; }
  .team-grid .card.panini.small,
  .team-grid .card-slot-empty { width: 90px; height: 130px; }
  .page-paper { padding: 14px 16px; }
  .index-groups { grid-template-columns: 1fr; }
  .bc-big { font-size: 70px; }
}

/* ============================================================
   FORMATION / TEAM BUILDER
   ============================================================ */
/* ── FUT-style team stats bar — INTEGRATED in header, no extra row ── */
.team-top-bar {
  display: flex; align-items: stretch; gap: 10px;
  padding: 6px 0 12px;
}
.team-top-bar .back-btn { flex-shrink: 0; align-self: center; }
.team-reset-btn {
  flex-shrink: 0; align-self: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4b4b, #c81e1e);
  color: #fff; border: 2px solid rgba(255,255,255,0.4);
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,75,75,0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.team-reset-btn:hover { transform: scale(1.1); box-shadow: 0 6px 18px rgba(255,75,75,0.7); }
.team-reset-btn:active { transform: scale(0.95); }
@media (max-width: 600px) {
  .team-reset-btn { width: 38px; height: 38px; font-size: 16px; }
}
.team-stats-panel {
  flex: 1; min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,210,74,0.04), transparent 50%),
    linear-gradient(135deg, rgba(20,28,50,0.96), rgba(10,14,28,0.96));
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}
/* Tier-based glow ring around the panel */
.team-stats-panel::before {
  content: ''; position: absolute; inset: -2px;
  border-radius: 14px; padding: 2px;
  background: linear-gradient(135deg, #5b6373, #2a3045);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.team-stats-panel.tier-elite::before  { background: linear-gradient(135deg, #ff4b4b, #ffd24a, #ff4b4b); animation: tsRing 3s linear infinite; }
.team-stats-panel.tier-gold::before   { background: linear-gradient(135deg, #ffd24a, #ff8a00, #ffd24a); animation: tsRing 4s linear infinite; }
.team-stats-panel.tier-silver::before { background: linear-gradient(135deg, #d9d9d9, #8a8a8a, #d9d9d9); }
.team-stats-panel.tier-bronze::before { background: linear-gradient(135deg, #cd7f32, #6e4a20); }
@keyframes tsRing { 0% { filter: hue-rotate(0); } 100% { filter: hue-rotate(360deg); } }

/* Hexagonal OVR badge */
.ts-overall {
  width: 64px; height: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative;
  background: linear-gradient(180deg, #ffd24a, #ff8a00);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-shadow: 0 0 18px rgba(255,210,74,0.5);
}
.ts-overall::after {
  content: ''; position: absolute; inset: 3px;
  background: linear-gradient(180deg, #1a2440, #0a0e1c);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 0;
}
.ts-ovr-num, .ts-ovr-label { position: relative; z-index: 1; }
.ts-ovr-num {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 26px; line-height: 1;
  background: linear-gradient(180deg, #fff, #ffd24a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.ts-ovr-label { font-size: 8px; letter-spacing: 2px; color: #ffd24a; margin-top: 1px; font-weight: 800; }

/* Stat bars: 2×2 grid for compact horizontal use */
.ts-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; min-width: 0; }
.ts-bar { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ts-bar-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px; font-weight: 900; letter-spacing: 1.5px;
  width: 26px; text-align: right;
}
.ts-bar[data-k="ata"] .ts-bar-label { color: #ff8a8a; }
.ts-bar[data-k="med"] .ts-bar-label { color: #c89bff; }
.ts-bar[data-k="def"] .ts-bar-label { color: #5ed3ff; }
.ts-bar[data-k="por"] .ts-bar-label { color: #4ade80; }
.ts-bar-track {
  flex: 1; height: 7px; min-width: 0;
  background: rgba(255,255,255,0.07);
  border-radius: 4px; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.ts-bar-fill {
  height: 100%; width: 0;
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(.4,.0,.2,1);
}
.ts-bar[data-k="ata"] .ts-bar-fill { background: linear-gradient(90deg, #5a1010, #ff4b4b); box-shadow: 0 0 6px rgba(255,75,75,0.5); }
.ts-bar[data-k="med"] .ts-bar-fill { background: linear-gradient(90deg, #3a1c5a, #9b4dff); box-shadow: 0 0 6px rgba(155,77,255,0.5); }
.ts-bar[data-k="def"] .ts-bar-fill { background: linear-gradient(90deg, #053a55, #5ed3ff); box-shadow: 0 0 6px rgba(94,211,255,0.5); }
.ts-bar[data-k="por"] .ts-bar-fill { background: linear-gradient(90deg, #0a4a25, #4ade80); box-shadow: 0 0 6px rgba(74,222,128,0.5); }
.ts-bar-num {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px; font-weight: 900;
  color: #fff; min-width: 24px; text-align: right;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Player count chip on the right */
.ts-filled {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif;
  background: rgba(255,210,74,0.12);
  border: 1px solid rgba(255,210,74,0.4);
  border-radius: 10px;
  padding: 6px 10px;
  color: #ffd24a;
  font-size: 13px; font-weight: 900;
  line-height: 1;
}
.ts-filled-label { font-size: 7px; opacity: 0.7; letter-spacing: 1.5px; margin-top: 2px; font-weight: 700; color: #fff; }

@media (max-width: 600px) {
  .team-top-bar { padding: 4px 0 8px; gap: 6px; }
  .team-stats-panel { grid-template-columns: auto 1fr auto; gap: 8px; padding: 6px 8px; }
  .ts-overall { width: 52px; height: 60px; }
  .ts-ovr-num { font-size: 20px; }
  .ts-ovr-label { font-size: 7px; }
  .ts-bars { gap: 2px 8px; }
  .ts-bar-label { font-size: 8px; width: 22px; }
  .ts-bar-track { height: 5px; }
  .ts-bar-num { font-size: 10px; min-width: 20px; }
  .ts-filled { padding: 4px 6px; font-size: 11px; }
}
@media (max-width: 420px) {
  .team-stats-panel { gap: 6px; padding: 5px 6px; }
  .ts-bars { display: flex; flex-direction: column; gap: 1px; }
  .ts-bar-label { width: 20px; font-size: 7px; }
}

.formation-pitch {
  position: relative;
  width: 100%; max-width: 760px;
  aspect-ratio: 3/4;
  height: auto; max-height: calc(100vh - 230px);
  margin: 0 auto;
  background:
    repeating-linear-gradient(0deg, #0a5a14 0px, #0a5a14 32px, #0c6818 32px, #0c6818 64px),
    #0c6818;
  border-radius: 16px;
  border: 4px solid #fff;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7);
}
.formation-pitch::before {
  content: ''; position: absolute;
  top: 50%; left: 0; right: 0; height: 3px; background: #fff;
}
.formation-pitch::after {
  content: ''; position: absolute;
  top: 50%; left: 50%;
  width: 110px; height: 110px; border-radius: 50%;
  border: 3px solid #fff;
  transform: translate(-50%, -50%);
}
.formation-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 88px; height: 130px;
  border: 2px dashed rgba(255,255,255,0.4);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: rgba(0,0,0,0.2);
  transition: all 0.2s;
}
.formation-slot:hover { border-color: #ffd24a; transform: translate(-50%,-50%) scale(1.06); }
.formation-slot.empty .slot-label {
  font-size: 11px; letter-spacing: 1px;
  color: rgba(255,255,255,0.8);
  text-align: center;
}
.formation-slot.filled { border-style: solid; border-color: #ffd24a; padding: 0; background: transparent; }
.formation-slot .card.panini.tiny { width: 84px; height: 124px; }
.picker-title {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0; z-index: 52;
  margin: 0; padding: 8px 22px;
  font-family: 'Orbitron',sans-serif; letter-spacing: 2px; font-size: 12px;
  background: linear-gradient(180deg, #ffd24a, #ff8a00);
  color: #1a1a1a; font-weight: 900;
  border-radius: 14px 14px 0 0;
  border: 2px solid #fff; border-bottom: none;
  box-shadow: 0 -4px 14px rgba(0,0,0,0.5);
  cursor: pointer;
  user-select: none;
  display: flex; align-items: center; gap: 8px;
  transition: bottom 0.32s cubic-bezier(.5,.1,.2,1);
}
.picker-title::before { content: '▲'; font-size: 10px; transition: transform 0.32s; }
.picker-title.open { bottom: 260px; }
.picker-title.open::before { transform: rotate(180deg); }
.player-picker {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex; gap: 12px; overflow-x: auto;
  padding: 18px 14px 22px; align-items: center;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 2px solid rgba(255,210,74,0.5);
  box-shadow: 0 -10px 28px rgba(0,0,0,0.6);
  height: 260px;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(.5,.1,.2,1);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Same compositor hints as #battle-hand so JS-driven scrollLeft
     writes don't trigger a main-thread layout per frame. */
  will-change: scroll-position;
}
/* Picker cards: same `pan-x` deal as .hand-tile — browser owns horizontal
   momentum scroll; vertical/diagonal motion falls through to the JS drag
   handler so the user can lift a card into a pitch slot. */
.player-picker .card.panini { touch-action: pan-x; }
.player-picker.open { transform: translateY(0); }
.player-picker::-webkit-scrollbar { height: 6px; }
.player-picker::-webkit-scrollbar-thumb { background: rgba(255,210,74,0.4); border-radius: 3px; }
.player-picker .card.panini { flex-shrink: 0; }
.picker-empty { padding: 18px; text-align: center; opacity: 0.7; width: 100%; color: #fff; flex: 1; }
#screen-team { padding-bottom: 60px; }

/* ============================================================
   BATTLE — TCG táctico (campo cenital vertical fullscreen)
   ============================================================ */
#screen-battle {
  padding: 0; max-width: none;
  position: fixed; inset: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: #050810;
  z-index: 30;
}
/* ABANDONAR PARTIDO — labelled pill pinned to the BOTTOM-CENTRE of the
   hand-wrap, in the dedicated 56px strip we reserved with padding-bottom
   on #battle-hand-wrap so it never overlaps the player's cards. */
.battle-quit-btn {
  position: absolute;
  left: 50%;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 26;            /* above the dim overlay (22) and ATACAR (25) */
  /* Glass-morph: translucent red gradient + blur + thin red ring, instead
     of the solid 2 px white border + opaque red flat fill. */
  background: linear-gradient(135deg, rgba(255,75,75,0.40), rgba(200,30,30,0.40));
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 1.4px;
  line-height: 1;
  padding: 8px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,75,75,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 0 0 1px rgba(255,75,75,0.10),
    0 6px 18px rgba(0,0,0,0.55),
    0 0 22px rgba(255,75,75,0.22);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  transition: transform 0.15s, box-shadow 0.15s;
}
.battle-quit-btn .bq-icon  { font-size: 12px; line-height: 1; }
.battle-quit-btn .bq-label { font-size: 11px; letter-spacing: 1.3px; }
.battle-quit-btn:hover {
  transform: translateX(-50%) translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 0 0 1px rgba(255,75,75,0.20),
    0 8px 22px rgba(0,0,0,0.65),
    0 0 28px rgba(255,75,75,0.45);
}
@media (max-width: 380px) {
  .battle-quit-btn { padding: 6px 13px; }
  .battle-quit-btn .bq-label { font-size: 10px; letter-spacing: 1.2px; }
  .battle-quit-btn .bq-icon  { font-size: 11px; }
}

/* ---------- THE PITCH ----------
   The green grass background lives on the OUTER container so it fills the
   full width × height of the pitch area on every viewport. The inner
   #pitch-visual stays at a 2:3 aspect ratio centred — it only carries the
   white pitch border + the line elements (center line/circle, areas,
   goals) so the football shape stays correctly proportioned regardless
   of how wide the green carpet is around it. */
#battle-pitch {
  flex: 1;
  position: relative;
  overflow: hidden;
  /* Real grass texture from cesped.webp — horizontal mowing stripes baked
     in. Layered with a soft vignette so the centre stays bright and the
     edges fall off into shadow, giving the pitch a stadium feel without
     hiding the texture. */
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(0,0,0,0)   0%,
      rgba(0,0,0,0)   40%,
      rgba(0,0,0,0.35) 80%,
      rgba(0,0,0,0.55) 100%),
    url('../assets/menu/cesped.webp') center/cover no-repeat,
    linear-gradient(180deg, #0e7a1d 0%, #0c6818 50%, #0e7a1d 100%);
  background-blend-mode: multiply, normal, normal;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.55);
  display: flex; flex-direction: column;
  align-items: stretch;
  min-height: 0;
}
/* Subtle scanline overlay on top of the grass for cinematic feel.
   Pure CSS, no extra DOM — sits behind everything via z-index:0 inside
   the pitch's stacking context. */
#battle-pitch::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg,
      transparent 0px,
      transparent 4px,
      rgba(0,0,0,0.06) 4px,
      rgba(0,0,0,0.06) 5px);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}
/* The 2:3 framed pitch — transparent (background lives on #battle-pitch
   now). Only carries the white outer border + the line decorations. */
#pitch-visual {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  height: 100%;
  aspect-ratio: 2 / 3;
  max-width: 100%;
  background: transparent;
  box-shadow: inset 0 0 0 3px #fff;
  z-index: 0;
  pointer-events: none;
}
.pitch-center-line {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 3px; background: rgba(255,255,255,0.7); z-index: 1;
}
.pitch-center-circle {
  position: absolute; top: 50%; left: 50%;
  width: 26%; aspect-ratio: 1/1;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.6);
  transform: translate(-50%, -50%); z-index: 1;
}
.pitch-goal {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 42%; height: 14px;
  border: 3px solid #fff; background: rgba(255,255,255,0.15);
  z-index: 2;
}
.pitch-goal-top    { top: -2px; }
.pitch-goal-bottom { bottom: -2px; }
.goal-shake { animation: goalShake 0.7s ease; }
@keyframes goalShake {
  0%, 100% { transform: translateX(-50%); background: rgba(255,210,74,0.8); }
  20%, 60% { transform: translateX(-50%) translateY(-3px); background: rgba(255,210,74,1); }
  40%      { transform: translateX(-50%) translateY(3px); }
}
.pitch-area {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 60%; height: 18%;
  border: 3px solid rgba(255,255,255,0.6); z-index: 1;
}
.pitch-area-top    { top: 0; border-top: none; }
.pitch-area-bottom { bottom: 0; border-bottom: none; }

/* ---------- HUD bar pinned to top of pitch ---------- */
#battle-hud {
  /* IMPORTANT: no position here, so .bhud-score (absolute) escapes upward to
     #battle-pitch and gets centered on the FIELD, not on the HUD bar.
     2-col grid: TÚ flag/name on left, RIVAL flag/name on right. */
  z-index: 4;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; align-items: center;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.85), transparent);
}
.bhud-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bhud-right { flex-direction: row-reverse; }
.bhud-flag {
  font-size: 24px; background: #fff; width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.bhud-name { font-weight: 800; font-size: 12px; text-shadow: 0 2px 4px rgba(0,0,0,0.9); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Scoreboard — FLOATING in the centre of the pitch, just above the phase banner.
   Contains: round counter + goals + close (✕). Does not overlap rival cards (above)
   nor the phase banner (below). */
.bhud-score {
  /* JUGADA n/m + score chip — corner-bracket framed glass panel matching
     the empty drop-zone language. The dashed border is gone; instead, 4
     small gold L-shaped brackets pin the corners and a translucent dark
     gradient + heavy blur fill the centre. */
  position: relative;
  text-align: center;
  background: linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.50));
  padding: 9px 26px 7px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -20px 30px -10px rgba(0,0,0,0.45),
    0 6px 20px rgba(0,0,0,0.55),
    0 0 22px rgba(255,210,74,0.18);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  min-width: 130px;
  pointer-events: auto;
}
/* Corner brackets that frame the JUGADA chip — same gold "targeting
   reticle" used on the empty drop zones, so the field UI reads as one
   coherent system instead of one-chip-per-style. */
.bhud-bracket {
  position: absolute;
  width: 14px; height: 14px;
  border-color: rgba(255,210,74,0.85);
  border-style: solid;
  border-width: 0;
  filter: drop-shadow(0 0 4px rgba(255,210,74,0.45));
  pointer-events: none;
}
.bhud-bracket-tl { top: 3px;    left: 3px;    border-top-width: 2px;    border-left-width: 2px;  border-top-left-radius: 6px; }
.bhud-bracket-tr { top: 3px;    right: 3px;   border-top-width: 2px;    border-right-width: 2px; border-top-right-radius: 6px; }
.bhud-bracket-bl { bottom: 3px; left: 3px;    border-bottom-width: 2px; border-left-width: 2px;  border-bottom-left-radius: 6px; }
.bhud-bracket-br { bottom: 3px; right: 3px;   border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; }
#bhud-round { font-size: 10px; opacity: 0.85; letter-spacing: 1.5px; font-weight: 700; }
#bhud-goals { font-family: 'Orbitron', sans-serif; font-size: 24px; font-weight: 900; color: #ffd24a; line-height: 1; margin-top: 2px; }
@media (max-width: 600px) {
  .bhud-score { min-width: 110px; padding: 5px 16px; }
  #bhud-goals { font-size: 20px; }
}

/* ---------- PHASE BANNER ---------- */
/* Phase banner — vertical stack centred on the pitch. Order:
       1) MARCADOR  (JUGADA n/5 · score)
       2) HINT      ("Coloca 3 cromos…")
       3) TU TURNO / ATACAR chip
   Anchored slightly above pitch centre (top: 42%) so the chip lands ABOVE
   the play-zones grid (which starts at top: 58-59%). The marcador on top
   stays well clear of the rival defenders row at the very top of the pitch. */
#battle-phase-banner {
  position: absolute; left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  z-index: 6;
  text-align: center;
  padding: 0;
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: max-content; max-width: 90%;
}
#bhud-phase {
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px; font-weight: 900;
  letter-spacing: 2.5px;
  padding: 7px 22px;
  border-radius: 18px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -2px 6px rgba(0,0,0,0.3),
    0 4px 16px rgba(0,0,0,0.55),
    0 0 24px rgba(0,0,0,0.4);
  pointer-events: auto;
  animation: phaseTagPulse 2.6s ease-in-out infinite;
  border: 1px solid rgba(255,255,255,0.16);
}
@keyframes phaseTagPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
#bhud-phase.phase-attack  {
  background: linear-gradient(135deg, rgba(255,75,75,0.55), rgba(255,138,0,0.55));
  color: #fff;
}
#bhud-phase.phase-defense {
  background: linear-gradient(135deg, rgba(94,211,255,0.55), rgba(58,141,222,0.55));
  color: #ffffff;
}
#battle-hint {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px; color: #fff;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: rgba(8,12,20,0.42);
  display: inline-block; padding: 6px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 4px 14px rgba(0,0,0,0.45);
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  pointer-events: auto;
}
#battle-hint strong { color: #ffd24a; }
@media (max-width: 600px) {
  #bhud-phase  { font-size: 12px; padding: 5px 14px; letter-spacing: 1.5px; }
  #battle-hint { font-size: 10px; padding: 4px 11px; }
}

/* ---------- RIVAL row ---------- */
/* Floats on the upper third of the pitch in formation, no dark layer.
   Cards sit ON the green grass so the field stays clean and visible. */
.rival-defense {
  /* Single horizontal ROW of the rival's 3 cards near the TOP of the pitch.
     Raised so the marcador chip floating at ~42% of the pitch has clear
     space below. Explicit height keeps the cards from stretching to the
     full empty band. */
  position: absolute;
  top: 4%; left: 12%; right: 12%;
  height: 22%;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  gap: 14px;
  pointer-events: none;
}
.rival-defense > * { pointer-events: auto; }
.rival-defense .pz-card-standalone:nth-child(2) { grid-column: 1; grid-row: 1; }
.rival-defense .pz-card-standalone:nth-child(3) { grid-column: 2; grid-row: 1; }
.rival-defense .pz-card-standalone:nth-child(4) { grid-column: 3; grid-row: 1; }

/* Marvel-Snap-style "settle" — when the player has placed all 3 cards
   (body.attack-ready), the rival's row reacts: side cards drop 50 px,
   centre card drops 30 px. Back-out spring easing for the
   characteristic "thunk" of a Marvel Snap placement. Clearing
   .attack-ready (player removes any card) springs them back to
   origin via the same transition. */
.rival-defense .pz-card-standalone {
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
  position: relative;
}
body.attack-ready .rival-defense .pz-card-standalone:nth-child(2),
body.attack-ready .rival-defense .pz-card-standalone:nth-child(4) {
  transform: translateY(50px);
}
body.attack-ready .rival-defense .pz-card-standalone:nth-child(3) {
  transform: translateY(30px);
}

/* ── Continuous cyan aura around each rival card ──
   A smooth, gentle electric halo that "breathes" while body.attack-ready
   is set. No rapid flicker / brightness crackle — just the box-shadow
   pulse. Stops automatically when the player removes a card from a zone
   or presses ATACAR/DEFENDER (both paths re-render Battle, which drops
   .attack-ready from <body>).
   Each card gets a different animation-delay so the three don't pulse
   in lockstep — the row reads as ALIVE rather than synthetic. */
body.attack-ready .rival-defense .pz-card-standalone {
  animation: rivalAuraFlicker 1.4s infinite ease-in-out;
  /* Guard against any global rule that might trim the halo. */
  clip-path: none;
}
body.attack-ready .rival-defense .pz-card-standalone:nth-child(2) { animation-delay: 0s; }
body.attack-ready .rival-defense .pz-card-standalone:nth-child(3) { animation-delay: -0.45s; }
body.attack-ready .rival-defense .pz-card-standalone:nth-child(4) { animation-delay: -0.9s; }

@keyframes rivalAuraFlicker {
  0%, 100% {
    box-shadow:
      0 0  6px 1px rgba(95,208,255,0.55),
      0 0 16px 3px rgba(95,208,255,0.35),
      0 0 30px 6px rgba(95,208,255,0.20),
      inset 0 0  8px rgba(95,208,255,0.28);
  }
  50% {
    box-shadow:
      0 0 14px 2px rgba(255,255,255,0.85),
      0 0 28px 6px rgba(95,208,255,0.95),
      0 0 48px 14px rgba(95,208,255,0.55),
      0 0 70px 22px rgba(120,220,255,0.32),
      inset 0 0 18px rgba(95,208,255,0.55);
  }
}
/* Standalone cards INSIDE the rival grid — match the player's pz-card sizing
   exactly. Player cards live inside a .play-zone with `padding: 6px 4px`
   and a card `inset: 4px`, which collapses ~8-10px on each axis. Rival
   cards have no such wrapper, so we add the same insets directly via
   `margin: 6px 4px` to reach identical physical dimensions. */
.rival-defense {
  /* Each grid cell becomes a positioning context for the card inside. */
  isolation: isolate;
}
.rival-defense .pz-card.pz-card-standalone {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  /* Match the player's play-zone cell sizing — 110px tall on mobile (where
     .play-zone has `min-height: 110px`). The 4px outer margin mirrors the
     player's `.play-zone` border + card inset combo so visible card sizes
     line up between the two teams. */
  min-height: 110px;
  margin: 4px 4px;
}
@media (max-width: 600px) {
  /* Mobile: raised to top:3% so the marcador chip (~ y=42% of pitch) has
     clear vertical separation. Cards in one row, explicit height so they
     don't stretch into the marcador band. */
  .rival-defense {
    top: 3%; left: 6%; right: 6%; bottom: auto;
    height: 22%;
    gap: 5px;
    padding: 8px 6px 6px;
  }
}
.rd-label {
  /* Sits 10px BELOW the rival row's middle card, centered horizontally.
     The +4px offset compensates for the container's `padding-bottom: 6px`
     so the visible gap from the CARD bottom to the label is exactly 10px.
     Glass-morph: translucent red gradient + heavy blur + thin red ring,
     same language as the player-side buttons but in opponent colour. */
  position: absolute;
  top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  font-family: 'Orbitron', sans-serif;
  font-size: 10px; letter-spacing: 2px; font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, rgba(255,75,75,0.40), rgba(200,30,30,0.40));
  padding: 5px 14px; border-radius: 12px;
  border: 1px solid rgba(255,75,75,0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 0 0 1px rgba(255,75,75,0.10),
    0 4px 14px rgba(0,0,0,0.50),
    0 0 22px rgba(255,75,75,0.30);
  margin: 0;
  animation: rdLabelPulse 2.6s ease-in-out infinite;
}
@keyframes rdLabelPulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 1px rgba(255,75,75,0.10), 0 4px 14px rgba(0,0,0,0.50), 0 0 22px rgba(255,75,75,0.30); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 0 0 1px rgba(255,75,75,0.20), 0 6px 18px rgba(0,0,0,0.60), 0 0 30px rgba(255,75,75,0.55); }
}
/* Mobile: hide the "ATAQUE RIVAL" / "DEFENSA RIVAL" caption entirely —
   the rival's row of cards is already self-evidently the rival's, the
   pulsing red border + position on the upper half of the pitch make it
   redundant, and the label was eating vertical space we need for zones. */
@media (max-width: 600px) { .rd-label { display: none !important; } }

/* ---------- MINI CARD ---------- */
.mini-card {
  position: relative;
  width: 72px; height: 100px;
  border-radius: 10px;
  overflow: hidden;
  background: #1c2540;
  border: 2px solid #f4e8d0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  flex-shrink: 0;
  display: flex; flex-direction: column;
}
/* In the player's hand, mini-cards are bigger and more readable */
#battle-hand .mini-card { width: 80px; height: 112px; }
@media (max-width: 600px) {
  #battle-hand .mini-card { width: 64px; height: 90px; }
}
.mini-card.rival { border-color: #ff6b6b; }
.mini-card.player { border-color: #5ed3ff; }
.mini-card-photo-wrap {
  width: 100%; height: 60%;
  overflow: hidden;
  background: linear-gradient(180deg, #1c2540, #0c1326);
}
.mini-card-photo-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%;
}
.mini-card.card-leyenda .mini-card-photo-wrap { box-shadow: inset 0 0 0 2px #ffd966; }
.mini-card.card-estrella .mini-card-photo-wrap { box-shadow: inset 0 0 0 2px #d6a3ff; }
.mini-card.card-oro .mini-card-photo-wrap { box-shadow: inset 0 0 0 2px #ffd24a; }
.mini-card-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 8px; font-weight: 800;
  color: #fff; text-align: center;
  padding: 1px 2px;
  background: rgba(0,0,0,0.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-card-stat {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1px 3px;
  background: rgba(0,0,0,0.85);
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
}
.mini-card-stat span { color: #ffd24a; opacity: 0.8; }
.mini-card-stat b { color: #fff; font-size: 10px; }
.mini-card-flag {
  position: absolute; top: 2px; left: 2px;
  font-size: 11px; width: 16px; height: 16px;
  background: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
/* Position chip top-right of the mini card photo. Color-coded so the
   player can tell POR/DEF/MED/DEL apart at a glance while selecting. */
.mini-card-pos {
  position: absolute;
  top: 2px; right: 2px;
  z-index: 2;
  font-family: 'Orbitron', sans-serif;
  font-size: 8px; font-weight: 900;
  padding: 2px 5px;
  border-radius: 5px;
  letter-spacing: 0.5px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
.mini-card-pos.pos-POR { background: linear-gradient(135deg, #ffd24a, #ff8a00); color: #1a1a1a; text-shadow: none; }
.mini-card-pos.pos-DEF { background: linear-gradient(135deg, #5ed3ff, #3a8dde); }
.mini-card-pos.pos-MED { background: linear-gradient(135deg, #6fd96f, #2aa84b); }
.mini-card-pos.pos-DEL { background: linear-gradient(135deg, #ff7a7a, #d92a2a); }

/* ---------- PLAY ZONES (triangle on the LOCAL half) ----------
   Forms an attacking triangle on the player's half of the pitch:
       [REMATE]                  ← apex (top, closer to rival goal)
   [INICIO]  [CONDUCCIÓN]         ← base (further back)
*/
.play-zones {
  position: absolute;
  left: 12%; right: 12%;
  top: 58%; bottom: 16%;     /* below the center banner, on the local half */
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* minmax(0, 1fr) — NOT plain 1fr — so rows cannot grow taller than the
     container when cell content's min-content size would otherwise push
     them past .play-zones' bottom. This was the root cause of INICIO /
     CONDUCCIÓN being clipped by #battle-hand-wrap on short phones. */
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
/* Triangle slot placement — ATTACK: 0=REMATE, 1=CONDUCCIÓN, 2=INICIO
   Apex up (toward rival goal). Each zone spans 2 of 6 cols → ~33% width. */
.play-zones [data-slot="0"] { grid-column: 3 / span 2; grid-row: 1; } /* REMATE apex (center top) */
.play-zones [data-slot="2"] { grid-column: 1 / span 2; grid-row: 2; } /* INICIO base-left */
.play-zones [data-slot="1"] { grid-column: 5 / span 2; grid-row: 2; } /* CONDUCCIÓN base-right */
/* DEFENSE: 0=PORTERO, 1=DEFENSA, 2=INTERCEPCIÓN — inverted triangle, apex DOWN toward own goal */
.play-zones.defense [data-slot="0"] { grid-column: 3 / span 2; grid-row: 2; } /* PORTERO apex bottom */
.play-zones.defense [data-slot="2"] { grid-column: 1 / span 2; grid-row: 1; } /* INTERCEPCIÓN top-left */
.play-zones.defense [data-slot="1"] { grid-column: 5 / span 2; grid-row: 1; } /* DEFENSA top-right */
@media (max-width: 600px) {
  /* HARD 15 px gap, never a percentage. The bottom edge of #battle-pitch
     coincides exactly with the top edge of #battle-hand-wrap (sibling
     flex items in the column flex of #screen-battle), so `bottom: 15px`
     measured from #battle-pitch == 15 px gap to the start of the dark
     player-cards container on every viewport.
     Why not a %: on shorter phones the pitch shrinks and a % gap shrinks
     with it, which is what kept clipping INICIO / CONDUCCIÓN. */
  .play-zones { left: 6%; right: 6%; top: 59%; bottom: 15px; gap: 8px; padding-bottom: 0; }
}
.play-zone {
  position: relative;            /* anchor for the .pz-remove ✕ button */
  /* Glass-morphism: soft tinted gradient + subtle inner ring instead of
     a harsh dashed border. Border kept transparent so the .pz-drop-target
     corner brackets read as the "drop here" boundary. */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.45));
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 8px 4px 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  overflow: visible;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    inset 0 -20px 30px -10px rgba(0,0,0,0.45),
    0 4px 14px rgba(0,0,0,0.35);
  animation: pzIdleBreathe 3.6s ease-in-out infinite;
}
@keyframes pzIdleBreathe {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), inset 0 -20px 30px -10px rgba(0,0,0,0.45), 0 4px 14px rgba(0,0,0,0.35); }
  50%      { box-shadow: inset 0 0 0 1px rgba(255,210,74,0.30), inset 0 -20px 30px -10px rgba(0,0,0,0.45), 0 4px 18px rgba(255,210,74,0.18); }
}
/* Cornered drop-target frame — replaces the old dashed border with a
   futuristic "targeting reticle" look made of 4 right-angle brackets in
   each corner of the zone. Looks much more designed than a uniform
   dashed line. */
.pz-drop-target {
  position: absolute;
  inset: 4px;
  pointer-events: none;
  z-index: 0;
}
.pz-drop-bracket {
  position: absolute;
  width: 18px; height: 18px;
  border-color: rgba(255,210,74,0.85);
  border-style: solid;
  border-width: 0;
  filter: drop-shadow(0 0 4px rgba(255,210,74,0.45));
}
.pz-drop-bracket-tl { top: 0;    left: 0;    border-top-width: 2px; border-left-width: 2px;  border-top-left-radius: 6px; }
.pz-drop-bracket-tr { top: 0;    right: 0;   border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 6px; }
.pz-drop-bracket-bl { bottom: 0; left: 0;    border-bottom-width: 2px; border-left-width: 2px;  border-bottom-left-radius: 6px; }
.pz-drop-bracket-br { bottom: 0; right: 0;   border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; }
/* Position-bonus chip — "+5 DEL" style pill on top of each empty zone.
   The single most useful piece of info for the user: WHICH position is
   rewarded if you drop a card here. */
.pz-pos-chip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #06141d;
  background: linear-gradient(135deg, #fff8d4 0%, #ffd24a 55%, #ff9a1a 100%);
  padding: 3px 10px 2px;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 1px 0 rgba(0,0,0,0.4),
    0 4px 12px rgba(0,0,0,0.6);
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
  margin-bottom: 1px;
}
/* ---------- FILLED play-zone card (redesign) ----------
   Replaces the old mini-card + tiny-text label. New layout:
     [hero photo + flag + zone-icon watermark]
     [player surname + position chip]
     [big gold total badge with +bonus indicator]
   Background uses the team's two colours so each placed card looks
   distinctive on the pitch. */
.pz-card {
  position: absolute;
  inset: 4px;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 4px;
  border-radius: 10px;
  padding: 4px 6px 6px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.55)),
    linear-gradient(160deg, var(--pzc1, #1c2540), var(--pzc2, #0c1326));
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.18),
    0 4px 14px rgba(0,0,0,0.55);
  overflow: hidden;
  cursor: pointer;
}
/* Standalone variant — used in the rival row at the top of the pitch.
   Positions itself instead of filling a parent (.play-zone). Same visual
   identity as the in-zone player cards so both teams read consistently. */
.pz-card.pz-card-standalone {
  position: relative;
  inset: auto;
  width: 100px; height: 140px;
}
.pz-card.pz-card-rival {
  /* Red-tinted glow to distinguish rival cards from the player's gold ones */
  box-shadow:
    inset 0 0 0 1.5px rgba(255,80,80,0.55),
    0 6px 18px rgba(0,0,0,0.6),
    0 0 14px rgba(255,75,75,0.35);
}
.pz-card.pz-card-rival.pz-card-leyenda  { box-shadow: inset 0 0 0 2px #ffd24a, 0 0 18px rgba(255,210,74,0.55), 0 6px 18px rgba(0,0,0,0.6); }
.pz-card.pz-card-rival.pz-card-estrella { box-shadow: inset 0 0 0 2px #d6a3ff, 0 0 14px rgba(214,163,255,0.5),  0 6px 18px rgba(0,0,0,0.6); }
@media (max-width: 600px) {
  .pz-card.pz-card-standalone { width: 78px; height: 112px; }
}
.pz-card.pz-card-leyenda  { box-shadow: inset 0 0 0 2px #ffd24a, 0 0 18px rgba(255,210,74,0.6), 0 4px 14px rgba(0,0,0,0.55); }
.pz-card.pz-card-estrella { box-shadow: inset 0 0 0 2px #d6a3ff, 0 0 14px rgba(214,163,255,0.5), 0 4px 14px rgba(0,0,0,0.55); }
.pz-card.pz-card-oro      { box-shadow: inset 0 0 0 2px #ffb84a, 0 0 12px rgba(255,184,74,0.4), 0 4px 14px rgba(0,0,0,0.55); }
.pz-photo-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.25));
  min-height: 0;
}
.pz-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 12%;
}
.pz-flag {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  z-index: 2;
}
.pz-zone-icon {
  position: absolute; right: 3px; bottom: 3px;
  font-size: 16px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.7));
  z-index: 2;
}
.pz-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 5px;
  text-align: center;
  min-height: 0;
}
.pz-name {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800; font-size: 10px;
  color: #fff;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.pz-pos {
  background: rgba(255,210,74,0.95);
  color: #1a1a1a;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900; font-size: 8px;
  padding: 2px 5px;
  border-radius: 6px;
  letter-spacing: 1px;
  line-height: 1;
}
.pz-total {
  display: flex; align-items: center; justify-content: center;
  gap: 5px;
  background: linear-gradient(135deg, #fff8d6, #ffd24a);
  color: #1a1a1a;
  border-radius: 10px;
  padding: 4px 8px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  border: 1.5px solid rgba(255,255,255,0.85);
  box-shadow: 0 2px 8px rgba(255,138,0,0.5), inset 0 1px 0 rgba(255,255,255,0.6);
  line-height: 1;
}
.pz-total.has-bonus { background: linear-gradient(135deg, #b4ff96, #4ade80); }
.pz-total-num   { font-size: 18px; letter-spacing: 0.5px; }
.pz-total-bonus { font-size: 9px; background: rgba(0,0,0,0.18); padding: 1px 4px; border-radius: 5px; }
.pz-total-label { font-size: 7px; letter-spacing: 0.8px; opacity: 0.75; }
@media (max-width: 600px) {
  .pz-card { gap: 3px; padding: 3px 4px 4px; }
  .pz-name { font-size: 9px; }
  .pz-pos  { font-size: 7px; padding: 2px 4px; }
  .pz-total-num { font-size: 15px; }
  .pz-total { padding: 3px 6px; gap: 4px; }
  .pz-flag { width: 18px; height: 18px; font-size: 11px; }
  .pz-zone-icon { font-size: 13px; }
}

/* Small red ✕ chip on a filled zone — visual cue that tapping removes the
   card. Anchored top-right; both the chip and the zone trigger remove. */
.pz-remove {
  position: absolute;
  top: -8px; right: -8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4b4b, #c81e1e);
  color: #fff;
  border: 2px solid #fff;
  font-weight: 900; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.55), 0 0 12px rgba(255,75,75,0.5);
  z-index: 6;
  touch-action: manipulation;
}
.pz-remove:hover { filter: brightness(1.12); transform: scale(1.08); }
@media (max-width: 600px) {
  .pz-remove { width: 22px; height: 22px; font-size: 12px; top: -6px; right: -6px; }
}
.play-zone:hover {
  background: linear-gradient(180deg, rgba(255,210,74,0.18), rgba(0,0,0,0.45));
  transform: translateY(-2px);
  animation-play-state: paused;
  box-shadow:
    inset 0 0 0 1px rgba(255,210,74,0.55),
    inset 0 -20px 30px -10px rgba(0,0,0,0.45),
    0 6px 20px rgba(255,210,74,0.30);
}
.play-zone:hover .pz-drop-bracket {
  border-color: #ffd24a;
  filter: drop-shadow(0 0 8px rgba(255,210,74,0.85));
}
.play-zone.filled {
  border-style: solid;
  border-color: #4ade80;
  background: transparent;
  box-shadow: 0 0 18px rgba(74,222,128,0.55);
  padding: 0;                /* let .pz-card take the full zone area */
}
.play-zone.filled:hover { transform: none; }
/* Legacy .pz-icon kept for code paths that still inject it; in the new
   empty-zone design we use .pz-pos-chip instead, so .pz-icon is hidden
   visually but the rule survives for backwards compat with older calls. */
.pz-icon { display: none; }
.pz-label {
  position: relative;
  z-index: 1;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px; font-weight: 900;
  letter-spacing: 1.5px;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 8px rgba(255,210,74,0.35);
  text-transform: uppercase;
}
.pz-sub {
  position: relative; z-index: 1;
  font-family: 'Orbitron', sans-serif;
  font-size: 8.5px;
  letter-spacing: 1px;
  opacity: 0.85;
  color: #c9e3ff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
  text-transform: uppercase;
}
.pz-mini { display: flex; justify-content: center; }
.pz-contribution {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  letter-spacing: 1px;
  color: #ffd24a;
  margin-top: 4px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9);
}
.pz-contribution b {
  display: block;
  font-size: 18px;
  color: #fff;
  margin-top: 2px;
}

/* ---------- COMBOS ----------
   Lives inside #battle-hand-wrap, anchored RIGHT BELOW the ATACAR/DEFENDER
   button (which is itself centred at top:50% of the wrap). The combos chip
   row sits in the empty band between the button and the ABANDONAR pill
   at the bottom, perfectly centred horizontally. */
.combos-row {
  position: absolute;
  left: 50%;
  top: calc(50% + 46px);   /* ≈10px below the ~63-px-tall action button */
  transform: translateX(-50%);
  z-index: 27;             /* above the dim overlay (22) and ATACAR (25) */
  display: flex; gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 92vw;
  padding: 0 8px;
  pointer-events: none;
}
.combos-row:empty { display: none; }
@media (max-width: 600px) {
  .combos-row { top: calc(50% + 41px); }
}
.combo-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px; font-weight: 900;
  border-radius: 14px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5), 0 0 16px rgba(255,210,74,0.4);
  border: 1px solid #fff;
  animation: comboPulse 1.6s ease-in-out infinite;
}
@keyframes comboPulse {
  0%, 100% { box-shadow: 0 3px 8px rgba(0,0,0,0.5), 0 0 16px rgba(255,210,74,0.4); }
  50%      { box-shadow: 0 3px 12px rgba(0,0,0,0.6), 0 0 28px rgba(255,210,74,0.8); }
}
.cc-icon { font-size: 14px; }
.cc-bonus { background: rgba(0,0,0,0.25); padding: 1px 6px; border-radius: 8px; }

/* ---------- ATTACK BUTTON ---------- */
/* Pinned OVER the hand-wrap area at the bottom of the screen. When this
   button shows, the player has already placed all 3 cards and can no longer
   swap them, so covering the hand row is harmless and keeps the pitch
   (PORTERO, rival defenders, play-zones) completely uncovered.
   Big, prominent CTA. No `transform: scale()` on hover — the button must
   NOT shift horizontally when the cursor moves over it. */
/* Play-total chip — appears ABOVE the ATACAR/DEFENDER button once the
   third card is placed, so the player sees the running play value before
   committing. Outer .play-attack-score handles positioning; an inner
   wrapper holds the pop-in animation so the centering transform isn't
   overwritten by the animation's transform property. */
.play-attack-score {
  position: absolute;
  /* Bottom-of-chip sits ~10px above the button's top edge (empirically
     tuned — accounts for button border/shadow and the chip's own border). */
  left: 50%; bottom: calc(50% + 46px);
  transform: translateX(-50%);
  z-index: 26;                   /* above the dim overlay (22) and button (25) */
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(255,210,74,0.98), rgba(255,138,0,0.98));
  color: #1a1a1a;
  border: 2px solid #fff;
  border-radius: 20px;
  padding: 6px 18px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(255,138,0,0.6), 0 0 28px rgba(255,210,74,0.5), inset 0 1px 0 rgba(255,255,255,0.55);
  white-space: nowrap;
  /* Fade-only entrance — no transform, so the centering translateX is safe. */
  animation: playScoreFadeIn 0.28s ease-out;
  pointer-events: none;
}
.play-attack-score.hidden { display: none; }
.play-attack-score .pas-label { font-size: 10px; letter-spacing: 1.6px; opacity: 0.82; }
.play-attack-score .pas-value { font-size: 22px; letter-spacing: 0.5px; }
@keyframes playScoreFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@media (max-width: 600px) {
  /* Empirical: 41px below container midline = ~10px clear of the button. */
  .play-attack-score { padding: 5px 14px; gap: 6px; bottom: calc(50% + 41px); }
  .play-attack-score .pas-value { font-size: 18px; }
  .play-attack-score .pas-label { font-size: 9px; letter-spacing: 1.3px; }
}

.play-attack-btn {
  /* Two-half button cut by a diagonal line:
       LEFT  → JUGADA score + combo name + bonus (dark glass)
       RIGHT → ATACAR / DEFENDER text (phase-tinted)
     The diagonal split is baked into a SINGLE linear-gradient background
     on the button itself, with a thin white line embedded as a hard color
     stop. That guarantees the separator is exactly where dark→colour
     transitions — no clip-path math, no overlap fudging. */
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 25;
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  /* WIDER button so the JUGADA block + ATACAR text both have outer
     padding 40 px without crowding the diagonal central cut. */
  min-width: min(440px, 92vw);
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 36px;
  overflow: hidden;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.55),
    0 0 50px rgba(255,210,74,0.32),
    inset 0 1px 0 rgba(255,255,255,0.30);
  animation: attackBtnPulse 1.4s ease-in-out infinite;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  line-height: 1;
}
.play-attack-btn.hidden { display: none; }

/* The diagonal split + white line live in the BUTTON's background
   gradient. Hard stops force a crisp dark→white→colour transition at the
   exact same diagonal line — no separate ::before pseudo needed.
   Split at 40 / 60: dark on the left 40%, colour on the right 60%. */
.play-attack-btn.phase-attack {
  background: linear-gradient(76deg,
    rgba(8,12,20,0.96) 0%,
    rgba(20,30,55,0.96) 39.4%,
    rgba(255,255,255,0.95) 39.7%,
    rgba(255,255,255,0.95) 40.3%,
    #ff8a00 40.6%,
    #ff4b4b 100%);
}
.play-attack-btn.phase-defense {
  background: linear-gradient(76deg,
    rgba(8,12,20,0.96) 0%,
    rgba(20,30,55,0.96) 39.4%,
    rgba(255,255,255,0.95) 39.7%,
    rgba(255,255,255,0.95) 40.3%,
    #5ed3ff 40.6%,
    #3a8dde 100%);
}
/* Default if no phase class is set yet (initial render). */
.play-attack-btn:not(.phase-attack):not(.phase-defense) {
  background: linear-gradient(76deg,
    rgba(8,12,20,0.96) 0%,
    rgba(20,30,55,0.96) 39.4%,
    rgba(255,255,255,0.95) 39.7%,
    rgba(255,255,255,0.95) 40.3%,
    #ff8a00 40.6%,
    #ff4b4b 100%);
}

/* LEFT half — fixed 40% width, content CENTRED. Outer (left) padding
   40 px so the block breathes from the rim; inner (right) padding 40 px
   so the text never crosses the white diagonal separator. */
.play-attack-btn .paq-left {
  position: relative;
  display: inline-flex;
  flex: 0 0 40%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 18px 40px;
  background: transparent;
  color: #ffd24a;
  box-sizing: border-box;
}
.play-attack-btn .paq-left-label {
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(255,210,74,0.85);
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}
.play-attack-btn .paq-left-value {
  font-size: 30px;
  letter-spacing: 0.5px;
  color: #ffd24a;
  text-shadow:
    0 1px 0 #ff9a1a,
    0 2px 0 #c4640a,
    0 3px 6px rgba(0,0,0,0.85),
    0 0 18px rgba(255,210,74,0.6);
}
/* Combo NAME (e.g. "✨ TRÍO LEGENDARIO") — appears between the value
   and the +N chip when at least one combo is triggered. */
.play-attack-btn .paq-left-combo {
  display: inline-block;
  margin-top: 2px;
  font-size: 9px;
  letter-spacing: 0.8px;
  color: rgba(255, 245, 200, 0.95);
  text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 6px rgba(255,210,74,0.45);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.play-attack-btn .paq-left-combo.hidden { display: none; }
/* Combo bonus chip — small gold pill sitting under the combo name. */
.play-attack-btn .paq-left-bonus {
  display: inline-block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #06141d;
  background: linear-gradient(135deg, #fff8d4, #ffd24a);
  padding: 1px 7px;
  border-radius: 999px;
  line-height: 1.4;
  box-shadow: 0 0 8px rgba(255,210,74,0.85), inset 0 1px 0 rgba(255,255,255,0.5);
}
.play-attack-btn .paq-left-bonus.hidden { display: none; }

/* RIGHT half — fixed 60% width, ATACAR/DEFENDER CENTRED. Outer (right)
   padding 40 px + inner (left) padding 40 px so the text stays clear of
   both the rim and the central diagonal separator. */
.play-attack-btn .paq-right {
  position: relative;
  display: inline-flex;
  flex: 0 0 60%;
  align-items: center;
  justify-content: center;
  padding: 18px 40px;
  background: transparent;
  color: #fff;
  font-size: 22px;
  letter-spacing: 2.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 2px 6px rgba(0,0,0,0.6);
  box-sizing: border-box;
}

.play-attack-btn:hover {
  box-shadow:
    0 12px 36px rgba(0,0,0,0.7),
    0 0 70px rgba(255,210,74,0.55),
    inset 0 1px 0 rgba(255,255,255,0.45);
  filter: brightness(1.06);
}

@media (max-width: 600px) {
  /* Mobile rule: the button must always leave EXACTLY 8 px from each
     screen edge AND sit 10 px above the ABANDONAR PARTIDO chip. We
     anchor by `bottom` instead of vertical-centring so the gap to
     ABANDONAR stays constant regardless of hand-wrap height.
     ABANDONAR is at bottom = 8 px + safe-area, with mobile padding
     6 + 6 px and font-size 10 px (≈ 24 px tall + 2 px border = 26 px).
     8 (its bottom) + 26 (its height) + 10 (gap) = 44 px + safe-area. */
  .play-attack-btn {
    border-width: 2px;
    left: 8px;
    right: 8px;
    width: auto;
    min-width: 0;
    max-width: none;
    top: auto;
    /* ABANDONAR is ~30 px tall on phones ≥ 381 px (uses the default
       8 + 18 padding) and ~24 px on the ≤ 380 px override. Anchoring
       at safe-area + 48 px guarantees ≥ 10 px gap to ABANDONAR's top
       across both — slightly more breathing room on the smallest
       phones, exactly 10 px elsewhere. */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 48px);
    transform: none;
  }
  /* Tighter horizontal padding on BOTH halves + smaller right-side
     letter-spacing so even the longest label (FR "🛡️ DÉFENDRE !")
     fits inside the right 60% on a 360 px-wide phone with margin to
     spare. The 40/60 visual split + diagonal separator stay exactly
     where the gradient hard stops put them. */
  .play-attack-btn .paq-left  { padding: 14px 12px; }
  .play-attack-btn .paq-left-label { font-size: 9px; letter-spacing: 1.4px; }
  .play-attack-btn .paq-left-value { font-size: 24px; }
  .play-attack-btn .paq-left-combo { font-size: 8px; letter-spacing: 0.6px; }
  .play-attack-btn .paq-left-bonus { font-size: 10px; padding: 1px 6px; }
  .play-attack-btn .paq-right {
    padding: 14px 12px;
    font-size: 16px;
    letter-spacing: 1.4px;
    min-width: 0;
  }
}
/* Even smaller phones (≤ 360 px) — drop a touch more so the label
   keeps breathing room from the diagonal cut. */
@media (max-width: 360px) {
  .play-attack-btn .paq-right { font-size: 15px; letter-spacing: 1.2px; padding: 14px 8px; }
  .play-attack-btn .paq-left  { padding: 14px 8px; }
}

/* ---------- ATTACK-READY SPOTLIGHT ----------
   When the ATACAR/DEFENDER button is visible, dim everything below it (the
   hand row) so the player focuses on the single action. The hand can't be
   interacted with at this point anyway (the 3 cards are locked in).
   IMPORTANT: the dim overlay (::after) blocks the hand cards because it
   has pointer-events: auto. We must NOT set pointer-events: none on the
   hand-wrap itself, because the ATACAR button is a CHILD of the hand-wrap
   and would inherit it — making the button un-clickable. The overlay alone
   is enough to block hand interaction, and the button (z-index 25) sits
   above the overlay (z-index 22) so it stays clickable. */
body.attack-ready #battle-hand-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 22;          /* above the cards, below the .play-attack-btn (25) */
  pointer-events: auto;
  animation: handDimIn 0.25s ease-out;
}
@keyframes handDimIn {
  from { background: rgba(0, 0, 0, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
  to   { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
}
@keyframes attackBtnPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(255,75,75,0.6), 0 0 20px rgba(255,210,74,0.4); }
  50%      { box-shadow: 0 8px 24px rgba(255,75,75,0.8), 0 0 40px rgba(255,210,74,0.8); }
}

/* ---------- BALL ---------- */
#battle-ball {
  position: absolute;
  top: 85%; left: 50%;
  font-size: 22px;
  z-index: 6;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.8));
  pointer-events: none;
  animation: ballSpin 3s linear infinite;
}
@keyframes ballSpin { from { rotate: 0deg; } to { rotate: 360deg; } }

/* ---------- RESULT BANNER — dramatic, full-bleed pill with shockwave ---------- */
/* ──────────────────────────────────────────────────────────────────────
   DUEL BANNERS — cinematic outcome announcements.
   Modal-box look is gone. The label floats as huge 3D extruded chrome
   text (same treatment used in the penalty animation), with a radial
   light burst pulsing behind it and 8 sun-ray beams sweeping outward
   from the centre. Score sits underneath in a small chip. Variants
   change the chrome gradient + glow colour for GOL / SAVE / RIVAL GOAL.
   ────────────────────────────────────────────────────────────────────── */
.duel-banner {
  /* Fixed so the dim layer fills the WHOLE viewport, not just the pitch
     container — the user wants a true full-screen black wash. */
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;   /* mobile dynamic viewport — handles browser chrome */
  z-index: 50;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  text-align: center;
  pointer-events: none;
  isolation: isolate;
  perspective: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* Anchor the parent font-size to the label clamp so em-based values
     scale with the label without affecting the label's own clamp. */
  font-size: clamp(46px, 13vw, 110px);
  background: rgba(0, 0, 0, 0.70);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  --b-glow: rgba(255,255,255,0.9);
  --b-rays: rgba(255,255,255,0.35);
}
/* Soft radial light pool behind the text — single dramatic pulse, no
   spinning. Confined to the band so it never leaks above/below. */
.duel-banner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%,
      var(--b-glow) 0%,
      var(--b-glow) 12%,
      transparent 65%),
    radial-gradient(ellipse at 50% 50%,
      rgba(255,255,255,0.85) 0%,
      transparent 25%);
  z-index: -2;
  opacity: 0;
  pointer-events: none;
  animation: duelBurstPulse 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  mix-blend-mode: screen;
  filter: blur(10px);
}
/* Horizontal scan beam that streaks across the band ONCE, left → right.
   Replaces the previous "windmill" of conic rays — same dramatic energy
   without the rotational artefact. */
.duel-banner::after {
  content: '';
  position: absolute;
  top: 0; left: -40%;
  width: 50%; height: 100%;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,0)   30%,
    rgba(255,255,255,0.55) 48%,
    var(--b-glow)         50%,
    rgba(255,255,255,0.55) 52%,
    rgba(255,255,255,0)   70%,
    transparent 100%);
  filter: blur(2px);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  mix-blend-mode: screen;
  animation: duelScanSweep 1.0s 0.18s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes duelBurstPulse {
  0%   { opacity: 0;    transform: scale(0.4); }
  18%  { opacity: 1.0;  transform: scale(1.55); }
  100% { opacity: 0;    transform: scale(2.4); }
}
@keyframes duelScanSweep {
  0%   { opacity: 0;    left: -40%; }
  15%  { opacity: 1;    }
  85%  { opacity: 1;    }
  100% { opacity: 0;    left: 140%; }
}
/* Shockwave RING expanding outward — replaces the rotational rays
   with a single dramatic radial pulse. */
.duel-banner-shock {
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid var(--b-glow);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  box-shadow: 0 0 30px var(--b-glow);
  animation: duelShock 1.1s 0.05s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}
.duel-banner-shock.shock2 {
  animation-delay: 0.22s;
  animation-duration: 1.0s;
  border-width: 2px;
}
@keyframes duelShock {
  0%   { opacity: 0.9; width: 40px;   height: 40px;   border-width: 3px; }
  25%  { opacity: 1;   }
  100% { opacity: 0;   width: 1400px; height: 1400px; border-width: 0.5px; }
}

/* Main label — huge 3D chrome text, NO box.
   Bumped up now that the longest label is "GOL RIVAL" (9 chars). Generous
   clamp scales with viewport while the breakpoints below keep it on a
   single line on phones. */
.duel-banner-label {
  display: inline-block;
  font-size: clamp(50px, 14vw, 120px);
  letter-spacing: 3.5px;
  line-height: 1.05;
  text-transform: uppercase;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  padding: 0 6px;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #fff 0%, #ddd 30%, #888 65%, #ccc 100%);
  transform: rotateX(14deg);
  transform-origin: 50% 100%;
  animation:
    duelLabelPop    0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    duelLabelHover  1.6s 0.55s ease-in-out infinite;
  filter:
    drop-shadow(0 2px 0 #444)
    drop-shadow(0 4px 0 #2a2a2a)
    drop-shadow(0 6px 0 #1a1a1a)
    drop-shadow(0 8px 0 #0a0a0a)
    drop-shadow(0 14px 18px rgba(0,0,0,0.75))
    drop-shadow(0 0 28px var(--b-glow));
  position: relative;
  z-index: 2;
}
/* Glossy shine SWEEP overlaid on top of the label. Sits as ::after of
   the label, masked to the band height so it doesn't bleed outside.
   Pure-CSS, no clip-path math. */
.duel-banner-label::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255,255,255,0)   30%,
    rgba(255,255,255,0.85) 48%,
    #ffffff                50%,
    rgba(255,255,255,0.85) 52%,
    rgba(255,255,255,0)   70%,
    transparent 100%);
  filter: blur(1.5px);
  mix-blend-mode: overlay;
  pointer-events: none;
  opacity: 0;
  animation: duelLabelShine 1.2s 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes duelLabelPop {
  0%   { opacity: 0; transform: rotateX(14deg) scale(0.2) translateY(20px); }
  55%  { opacity: 1; transform: rotateX(14deg) scale(1.22) translateY(-4px); }
  78%  { opacity: 1; transform: rotateX(14deg) scale(0.96) translateY(2px); }
  100% { opacity: 1; transform: rotateX(14deg) scale(1) translateY(0); }
}
@keyframes duelLabelShine {
  0%   { opacity: 0;    left: -60%; }
  15%  { opacity: 1;    }
  85%  { opacity: 1;    }
  100% { opacity: 0;    left: 160%; }
}
@keyframes duelLabelHover {
  0%, 100% { transform: rotateX(14deg) scale(1)    translateY(0); }
  50%      { transform: rotateX(14deg) scale(1.03) translateY(-2px); }
}

/* Score chip — modest pill beneath the label, tinted by variant. */
.duel-banner-score {
  display: inline-block;
  margin: 18px auto 0;
  padding: 6px 18px;
  font-size: clamp(15px, 3.2vw, 22px);
  letter-spacing: 4px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.55);
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  animation: duelScoreSlide 0.6s 0.25s cubic-bezier(.2,.9,.3,1.4) both;
  position: relative;
  z-index: 2;
}
@keyframes duelScoreSlide {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ─── Variants — chrome gradient + glow tint per outcome ────────────── */
.banner-goal     { --b-glow: rgba(255,210,74,0.95);  --b-rays: rgba(255,210,74,0.45); }
.banner-goal     .duel-banner-label {
  background-image: linear-gradient(180deg, #fff8d6 0%, #ffd24a 30%, #ff8a00 65%, #ffe999 100%);
  filter:
    drop-shadow(0 2px 0 #c4640a)
    drop-shadow(0 4px 0 #8a4707)
    drop-shadow(0 6px 0 #4a2304)
    drop-shadow(0 12px 14px rgba(0,0,0,0.7))
    drop-shadow(0 0 28px rgba(255,210,74,0.95))
    drop-shadow(0 0 50px rgba(255,138,0,0.55));
}
.banner-save     { --b-glow: rgba(94,211,255,0.92); --b-rays: rgba(94,211,255,0.45); }
.banner-save     .duel-banner-label {
  background-image: linear-gradient(180deg, #d8f1ff 0%, #8fdcff 30%, #2da8e0 65%, #95e0ff 100%);
  filter:
    drop-shadow(0 2px 0 #1a5a78)
    drop-shadow(0 4px 0 #0e3045)
    drop-shadow(0 6px 0 #06141d)
    drop-shadow(0 12px 14px rgba(0,0,0,0.7))
    drop-shadow(0 0 28px rgba(94,211,255,0.95))
    drop-shadow(0 0 50px rgba(58,141,222,0.55));
}
.banner-goal-rival { --b-glow: rgba(255,75,75,0.95);  --b-rays: rgba(255,75,75,0.45); }
.banner-goal-rival .duel-banner-label {
  background-image: linear-gradient(180deg, #ffdada 0%, #ff8e8e 30%, #d83030 65%, #ff9595 100%);
  filter:
    drop-shadow(0 2px 0 #781a1a)
    drop-shadow(0 4px 0 #450e0e)
    drop-shadow(0 6px 0 #1d0606)
    drop-shadow(0 12px 14px rgba(0,0,0,0.7))
    drop-shadow(0 0 28px rgba(255,107,107,0.95))
    drop-shadow(0 0 50px rgba(200,30,30,0.55));
  animation: duelLabelPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             duelLabelShakeRival 0.5s 0.55s ease-in-out 2 alternate;
}
@keyframes duelLabelShakeRival {
  0%   { transform: rotateX(14deg) translateX(0) scale(1); }
  20%  { transform: rotateX(14deg) translateX(-6px) scale(1.02); }
  40%  { transform: rotateX(14deg) translateX(6px)  scale(1.02); }
  60%  { transform: rotateX(14deg) translateX(-4px) scale(1.02); }
  80%  { transform: rotateX(14deg) translateX(4px)  scale(1.02); }
  100% { transform: rotateX(14deg) translateX(0)    scale(1); }
}

/* Phones — the longest label is "GOL RIVAL" (9 chars) so we can afford a
   chunkier clamp than for the old "¡GOL DEL RIVAL!". Still single-line. */
@media (max-width: 600px) {
  .duel-banner-label { font-size: clamp(42px, 13vw, 78px); letter-spacing: 2px; }
  .duel-banner-score { font-size: clamp(13px, 3.8vw, 18px); letter-spacing: 2px; }
}
/* Tablets in portrait (~600–1024 px wide). At the base clamp (13vw on
   768 = 100 px) the label overflows the viewport by ~47 px each side.
   Tighten the ceiling so the text always fits inside the band. */
@media (min-width: 601px) and (max-width: 1024px) {
  .duel-banner-label { font-size: clamp(40px, 9vw, 72px); letter-spacing: 2px; }
  .duel-banner-score { font-size: clamp(14px, 2.4vw, 18px); letter-spacing: 2.5px; }
}
/* Extra-narrow phones (SE class, ≤380 px) — small step down so the chrome
   extrude shadows still don't graze the viewport edge. */
@media (max-width: 380px) {
  .duel-banner-label { font-size: clamp(36px, 12vw, 56px); letter-spacing: 1.5px; }
}
/* Score chip — show PTS so it reads as PLAY POINTS, not goal count. */
.duel-banner-score-vs {
  display: inline-block;
  margin: 0 6px;
  padding: 0 6px;
  font-size: 0.65em;
  letter-spacing: 1.5px;
  opacity: 0.85;
  vertical-align: middle;
  border-radius: 4px;
  background: rgba(255,255,255,0.10);
}

/* ─── DUEL BANNER — TEAM BREAKDOWN ─────────────────────────────────────
   Two side-by-side team blocks under the score chip. Each block shows
   the team flag + name + "TÚ" or "RIVAL" tag, then 3 mini-cards with
   photo + last name + per-card stat + a +5 chip for the position bonus.
   Combo bonus shown as its own row when > 0.
   ──────────────────────────────────────────────────────────────────── */
.duel-banner-teams {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
  position: relative;
  z-index: 2;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  animation: duelTeamsRise 0.55s 0.35s cubic-bezier(.2,.9,.3,1.4) both;
  max-width: min(720px, 96vw);
  width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
}
@keyframes duelTeamsRise {
  0%   { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}
.db-team {
  flex: 1 1 0;
  min-width: 0;
  background: rgba(0,0,0,0.55);
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 10px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.db-team-us    { border-color: rgba(78,233,255,0.55);  box-shadow: 0 0 18px rgba(78,233,255,0.30); }
.db-team-rival { border-color: rgba(255,75,75,0.55);   box-shadow: 0 0 18px rgba(255,75,75,0.30); }
.db-team-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  text-align: center;
}
.db-team-flag {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.db-team-name {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  text-transform: uppercase;
  /* Truncate long team names so they don't push the tag onto a new row */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-team-tag {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 1.5px;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}
.db-team-us    .db-team-tag { background: linear-gradient(135deg, #4ee9ff, #2da8e0); color: #06141d; }
.db-team-rival .db-team-tag { background: linear-gradient(135deg, #ff8e8e, #d83030); color: #fff; }

/* VS divider between the two team blocks. */
.db-vs {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 3px;
  color: #ffd24a;
  text-shadow: 0 0 12px rgba(255,210,74,0.7), 0 2px 4px rgba(0,0,0,0.9);
  align-self: center;
  padding: 0 6px;
  flex-shrink: 0;
}

/* Player rows — stacked vertically, 3 rows per team. */
.db-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.db-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 5px 8px 5px 5px;
  min-width: 0;
}
.db-row-photo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(180deg, #233 0%, #011 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.22), 0 2px 6px rgba(0,0,0,0.5);
  position: relative;
}
.db-row-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
}
.db-row-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  gap: 2px;
  text-align: left;
}
.db-row-name {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  line-height: 1.1;
}
.db-row-stat-line {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  line-height: 1;
}
.db-row-stat-label {
  font-size: 9px;
  letter-spacing: 1.2px;
  color: #ffd24a;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  text-transform: uppercase;
}
.db-row-stat {
  font-size: 18px;
  color: #fff;
  text-shadow:
    0 1px 0 #444,
    0 2px 4px rgba(0,0,0,0.9),
    0 0 10px rgba(255,255,255,0.4);
}
.db-row-bonus {
  font-size: 10px;
  font-weight: 900;
  color: #06141d;
  background: linear-gradient(135deg, #fff8d4, #ffd24a);
  padding: 1px 5px;
  border-radius: 5px;
  letter-spacing: 0.5px;
  box-shadow: 0 0 8px rgba(255,210,74,0.85);
  line-height: 1.2;
}

/* Combo row — ALWAYS present (.db-combo-empty when the side has no combo).
   Reserves the same vertical footprint on both teams so the two blocks
   align cleanly even when only one side scored a bonus. */
.db-combo {
  margin-top: 4px;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #ffd24a;
  text-shadow: 0 0 10px rgba(255,210,74,0.7), 0 1px 2px rgba(0,0,0,0.9);
  padding: 4px 6px;
  border-top: 1px dashed rgba(255,210,74,0.4);
}
.db-combo b {
  color: #fff8d4;
  font-size: 13px;
  letter-spacing: 1px;
  margin-left: 2px;
}
.db-combo.db-combo-empty {
  border-top-color: rgba(255,255,255,0.10);
}
.db-combo.db-combo-empty .db-combo-content {
  visibility: hidden;
}

/* RNG / SUERTE row — surfaces the hidden 0-19 jitter so the per-card
   breakdown adds up to the headline PTS total. Cyan tone so it visually
   reads as "luck/random" instead of competing with the gold COMBO row. */
.db-extra {
  margin-top: 2px;
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #7fe7ff;
  text-shadow: 0 0 8px rgba(127,231,255,0.55), 0 1px 2px rgba(0,0,0,0.85);
  padding: 2px 6px;
  border-top: 1px dashed rgba(127,231,255,0.35);
}
.db-extra b {
  color: #e9faff;
  font-size: 12px;
  letter-spacing: 0.8px;
  margin-left: 2px;
}
.db-extra.db-extra-empty {
  border-top-color: rgba(255,255,255,0.08);
}
.db-extra.db-extra-empty .db-extra-content {
  visibility: hidden;
}
@media (max-width: 600px) {
  .db-extra { font-size: 9px; min-height: 20px; padding: 2px 4px; }
  .db-extra b { font-size: 11px; }
}

/* Phone portrait — compact rows so the whole layout fits in ≤380px viewports. */
@media (max-width: 600px) {
  .duel-banner-teams { gap: 8px; margin-top: 14px; padding: 0 4px; }
  .db-team { padding: 8px 6px 6px; gap: 6px; border-radius: 12px; }
  .db-team-name { font-size: 12px; letter-spacing: 1px; }
  .db-team-flag { font-size: 18px; }
  .db-team-tag { font-size: 9px; padding: 1px 5px; }
  .db-rows { gap: 4px; }
  .db-row { gap: 7px; padding: 4px 6px 4px 4px; border-radius: 8px; }
  .db-row-photo { width: 36px; height: 36px; }
  .db-row-name { font-size: 11px; letter-spacing: 0.5px; }
  .db-row-stat-label { font-size: 8px; letter-spacing: 1px; }
  .db-row-stat { font-size: 16px; }
  .db-row-bonus { font-size: 9px; padding: 0 4px; }
  .db-vs { font-size: 14px; letter-spacing: 1.5px; padding: 0 2px; }
  .db-combo { font-size: 10px; min-height: 22px; padding: 3px 4px; }
  .db-combo b { font-size: 12px; }
}
@media (max-width: 380px) {
  .db-team { padding: 6px 4px 4px; }
  .db-team-name { font-size: 10px; letter-spacing: 0.4px; }
  .db-team-tag { font-size: 8px; padding: 1px 4px; }
  .db-row-photo { width: 32px; height: 32px; }
  .db-row-name { font-size: 10px; }
  .db-row-stat { font-size: 14px; }
  .db-row-bonus { font-size: 8px; }
  .duel-banner-teams { gap: 6px; padding: 0 2px; }
}

/* ─── TAP-TO-CONTINUE HINT ─────────────────────────────────────────────
   Sits under the team blocks. Fades in 1.2s after the banner appears
   (so it doesn't compete with the GOL/PARADA pop), then pulses gently
   to draw the eye. */
.duel-banner-tap-hint {
  margin-top: 18px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 10px rgba(255, 210, 74, 0.6);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.20);
  position: relative;
  z-index: 2;
  opacity: 0;
  animation: duelTapHintIn 0.5s 1.2s ease-out forwards,
             duelTapHintPulse 1.4s 1.7s ease-in-out infinite;
  white-space: nowrap;
  max-width: 96vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes duelTapHintIn {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes duelTapHintPulse {
  0%, 100% { opacity: 0.85; transform: translateY(0)    scale(1); }
  50%      { opacity: 1.0;  transform: translateY(-2px) scale(1.03); }
}
@media (max-width: 600px) {
  .duel-banner-tap-hint { font-size: 11px; letter-spacing: 1.8px; padding: 5px 12px; margin-top: 14px; }
}
@media (max-width: 380px) {
  .duel-banner-tap-hint { font-size: 9.5px; letter-spacing: 1.2px; padding: 4px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .duel-banner-tap-hint { animation: duelTapHintIn 0.3s 0.3s ease-out forwards; }
}
@media (prefers-reduced-motion: reduce) {
  .duel-banner::before, .duel-banner::after { animation: none; opacity: 0; }
  .duel-banner-label, .duel-banner-score { animation: none; }
}
/* Timeout banners pack a lot of text (⏱️ + outcome). Shrink the font so the
   message never wraps awkwardly or blows out the viewport on narrow phones. */
.banner-timeout {
  font-size: clamp(18px, 4.2vw, 30px);
  letter-spacing: 1.5px;
  padding: 16px 26px;
}

/* Online only — short suspense banner shown once both peers commit, right
   before the ball animation starts. Same shape as the goal/save banners but a
   distinct purple gradient so it reads as "play happening" not "result". */
.banner-play {
  background: linear-gradient(135deg, #fff0c8 0%, #ffd24a 40%, #b97aff 100%);
  color: #1a1a1a;
  box-shadow:
    0 0 60px rgba(185,122,255,0.85),
    0 0 30px rgba(255,210,74,0.65),
    0 16px 36px rgba(0,0,0,0.65);
  border: 4px solid #fff;
}
/* Random in-match incident banners (yellow / red / injury). Sit between the
   main GOL / PARADA banner and nextPhase. */
.banner-yellow {
  background: linear-gradient(135deg, #fff7c2 0%, #ffd700 45%, #c69500 100%);
  color: #2a1f00;
  box-shadow:
    0 0 50px rgba(255,215,0,0.85),
    0 0 24px rgba(198,149,0,0.7),
    0 14px 32px rgba(0,0,0,0.6);
  border: 4px solid #fff8d6;
}
.banner-red {
  background: linear-gradient(135deg, #6e0000 0%, #c81e1e 45%, #ff3838 100%);
  color: #fff;
  box-shadow:
    0 0 50px rgba(255,56,56,0.9),
    0 0 24px rgba(200,30,30,0.75),
    0 14px 32px rgba(0,0,0,0.7);
  border: 4px solid #fff;
}
.banner-injury {
  background: linear-gradient(135deg, #1a3a5a 0%, #3c8dce 45%, #ffffff 100%);
  color: #062035;
  box-shadow:
    0 0 50px rgba(255,255,255,0.85),
    0 0 24px rgba(60,141,206,0.7),
    0 14px 32px rgba(0,0,0,0.65);
  border: 4px solid #fff;
}
/* ════════════════════════════════════════════════════════════════
   Incident overlay — dedicated centered popup for yellow/red/injury
   events. Replaces the previous re-use of the goal banner so the
   moment feels distinct: backdrop, player photo, big icon + label
   + effect line, kind-specific animation.
   ════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   INCIDENT MODALS — visual rebuild aligned with the in-match aesthetic
   (TARJETA AMARILLA / TARJETA ROJA / LESIONADO / CAMBIO DEL RIVAL).
   Shared chrome: glass-morph navy shell, gold-or-themed accent strip,
   bracket-style label chip, cinematic icon, glass effect pill. Each
   kind tints the accents — never the body — so the cards read as
   "the same UI, with a state colour" rather than four different boxes.
   ═══════════════════════════════════════════════════════════════════ */
.incident-overlay {
  position: fixed; inset: 0; z-index: 6000;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 65%),
    radial-gradient(ellipse at center, rgba(255,210,74,0.05) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
.incident-overlay.show { opacity: 1; }
.incident-card {
  /* Theme variable seeded per kind below — used by the accent strip,
     the border glow, the label chip, and the effect pill. */
  --inc-accent: #ffd24a;
  --inc-accent-2: #ff8a00;
  --inc-text: #fff;
  position: relative;
  width: min(86vw, 360px);
  border-radius: 22px;
  padding: 22px 18px 18px;
  text-align: center;
  /* Glass-morph navy — same DNA as the substitution modal so all
     overlays share a consistent house style. The accent colour
     bleeds in via the radial-gradient on top. */
  background:
    radial-gradient(ellipse at top, color-mix(in srgb, var(--inc-accent) 14%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, rgba(12,18,32,0.97) 0%, rgba(6,9,18,0.99) 100%);
  color: var(--inc-text);
  border: 1.5px solid color-mix(in srgb, var(--inc-accent) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 0 32px color-mix(in srgb, var(--inc-accent) 10%, transparent),
    0 18px 48px rgba(0,0,0,0.75),
    0 0 60px color-mix(in srgb, var(--inc-accent) 25%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transform: scale(0.5) rotateX(-25deg);
  opacity: 0;
  transition: transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease;
  overflow: hidden;
}
.incident-overlay.show .incident-card { transform: scale(1) rotateX(0); opacity: 1; }
/* Top accent strip — gradient bar of the kind colour, the same chrome
   the substitution modal uses. */
.incident-card::before {
  content: '';
  position: absolute;
  left: 18px; right: 18px; top: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--inc-accent) 25%,
    var(--inc-accent-2) 50%,
    var(--inc-accent) 75%,
    transparent);
  filter: blur(0.4px);
  border-radius: 2px;
}
/* Soft inner highlight at the top for depth. */
.incident-card::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% -10%, rgba(255,255,255,0.10) 0%, transparent 55%);
  pointer-events: none;
}
.incident-icon {
  font-size: 64px;
  line-height: 1;
  margin: 4px 0 10px;
  filter:
    drop-shadow(0 4px 10px rgba(0,0,0,0.7))
    drop-shadow(0 0 22px color-mix(in srgb, var(--inc-accent) 70%, transparent));
  animation: incidentIconPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
  position: relative;
  z-index: 1;
}
@keyframes incidentIconPop {
  0%   { transform: scale(0) rotate(-90deg); }
  60%  { transform: scale(1.28) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}
/* Bracket-style label chip — mirrors the JUGADA / SALE / ENTRA chips. */
.incident-label {
  position: relative;
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 2.4px;
  padding: 6px 22px;
  margin-bottom: 14px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--inc-accent) 22%, transparent),
    color-mix(in srgb, var(--inc-accent-2) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--inc-accent) 65%, transparent);
  border-radius: 999px;
  color: var(--inc-text);
  text-shadow: 0 1px 4px rgba(0,0,0,0.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 2px 10px rgba(0,0,0,0.55),
    0 0 16px color-mix(in srgb, var(--inc-accent) 35%, transparent);
  z-index: 1;
}
/* Wrap around the panini card render with a subtle gold rim. */
.incident-card-wrap {
  display: flex;
  justify-content: center;
  margin: 4px auto 0;
  transform: scale(0.78);
  transform-origin: top center;
  margin-bottom: -45px;
  pointer-events: none;
  position: relative;
  z-index: 1;
}
.incident-card-wrap .card.panini {
  margin: 0;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.75),
    0 0 0 3px color-mix(in srgb, var(--inc-accent) 80%, white 20%),
    0 0 28px color-mix(in srgb, var(--inc-accent) 50%, transparent);
}
.incident-fallback {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  background: rgba(0,0,0,0.4); border-radius: 14px; padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.18);
  font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 14px;
}
.incident-fallback span { font-size: 22px; }
/* Effect pill — glass-morph, accent-tinted, like the rd-label / pos-chip
   in the match. */
.incident-effect {
  margin-top: 26px;
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1.8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--inc-accent) 18%, rgba(0,0,0,0.55)),
    color-mix(in srgb, var(--inc-accent-2) 12%, rgba(0,0,0,0.65)));
  border: 1px solid color-mix(in srgb, var(--inc-accent) 60%, transparent);
  color: var(--inc-text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 2px 10px rgba(0,0,0,0.55),
    0 0 18px color-mix(in srgb, var(--inc-accent) 35%, transparent);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  position: relative;
  z-index: 1;
}
/* ────── Per-kind accent theming (only the colour vars + a flourish) ────── */
.incident-card.incident-yellow {
  --inc-accent: #ffd700;
  --inc-accent-2: #ffac1c;
  --inc-text: #fff8d6;
}
.incident-card.incident-red {
  --inc-accent: #ff3838;
  --inc-accent-2: #c81e1e;
  --inc-text: #fff;
}
.incident-overlay.show .incident-card.incident-red {
  animation: incidentShake 0.5s ease-in-out 0.4s 2;
}
@keyframes incidentShake {
  0%, 100% { transform: scale(1) translateX(0); }
  20%      { transform: scale(1) translateX(-6px); }
  40%      { transform: scale(1) translateX(6px); }
  60%      { transform: scale(1) translateX(-4px); }
  80%      { transform: scale(1) translateX(4px); }
}
.incident-card.incident-injury {
  --inc-accent: #5ed3ff;
  --inc-accent-2: #1c5b8a;
  --inc-text: #fff;
}
.incident-card.incident-injury .incident-icon { animation: incidentSiren 1.6s ease-in-out infinite; }
@keyframes incidentSiren {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,75,75,0)) drop-shadow(0 4px 10px rgba(0,0,0,0.6)); }
  50%      { filter: drop-shadow(0 0 16px rgba(255,75,75,0.95)) drop-shadow(0 4px 10px rgba(0,0,0,0.6)); }
}
.incident-card.incident-sub {
  --inc-accent: #46e07a;
  --inc-accent-2: #1a8a3a;
  --inc-text: #fff;
}
.incident-card.incident-sub .incident-icon { animation: incidentSwap 1.2s ease-in-out infinite; }
@keyframes incidentSwap {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(180deg); }
}

@media (max-width: 380px){
  .incident-card { padding: 18px 14px 14px; }
  .incident-icon { font-size: 52px; }
  .incident-label { font-size: 15px; letter-spacing: 1.8px; padding: 5px 18px; }
  .incident-effect { font-size: 12px; letter-spacing: 1.4px; padding: 7px 14px; }
}

/* ---------- HAND (bottom) ---------- */
#battle-hand-wrap {
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(10,14,28,0.96), rgba(0,0,0,0.96));
  /* Extra bottom padding reserves a strip under the cards for the centred
     ABANDONAR PARTIDO button so it never overlaps the player's cards. */
  padding: 10px 18px 56px;
  border-top: 3px solid #ffd24a;
  box-shadow: 0 -6px 22px rgba(0,0,0,0.7), 0 -2px 14px rgba(255,210,74,0.25);
  z-index: 5;
  position: relative;
}
/* Visual hint that the hand is horizontally scrollable — two chevrons on each
   side of the cards row, vertically centered with the cards. */
#battle-hand-wrap::before,
#battle-hand-wrap > .hand-scroll-hint-l,
#battle-hand-wrap > .hand-scroll-hint-r {
  /* Reusing both pseudo-element + explicit fallback below; this block only
     keeps the gradient strip (::before already used). */
}
#battle-hand-wrap .hand-scroll-hint {
  position: absolute;
  top: 60%; transform: translateY(-50%);
  z-index: 6;
  font-size: 22px; font-weight: 900;
  color: rgba(255,210,74,0.85);
  text-shadow: 0 0 8px rgba(0,0,0,0.95), 0 1px 3px rgba(0,0,0,0.9);
  pointer-events: none;
  animation: handScrollHint 1.6s ease-in-out infinite;
  font-family: 'Orbitron', sans-serif;
}
.hand-scroll-hint.left  { left: 4px; }
.hand-scroll-hint.right { right: 4px; }
@keyframes handScrollHint {
  0%, 100% { opacity: 0.55; transform: translateY(-50%) translateX(0); }
  50%      { opacity: 1;    transform: translateY(-50%) translateX(var(--dx, 0)); }
}
.hand-scroll-hint.left  { --dx: -3px; }
.hand-scroll-hint.right { --dx:  3px; }
/* Highlight strip on top — visually separates player area from the pitch */
#battle-hand-wrap::before {
  content: '';
  position: absolute; left: 0; right: 0; top: -3px; height: 3px;
  background: linear-gradient(90deg, transparent, #ffd24a 30%, #ff8a00 50%, #ffd24a 70%, transparent);
  filter: blur(1px);
}
/* Header row: title on the LEFT, CAMBIO button on the RIGHT — they share a
   flex row so neither can clip the other regardless of label length. */
.battle-hand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* Was 2 px — too tight, the CAMBIO chip sat right on top of the cards.
     7 px gives a clean visual break between the header row and the cards. */
  margin-bottom: 7px;
  min-height: 22px;
}
.battle-hand-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px; letter-spacing: 2.5px; font-weight: 900;
  color: #ffd24a;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.battle-hand-title-wrap {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 0;
}
/* Running play-score chip — sits next to "TU EQUIPO". Live total of the
   contributions of every card placed so far this play. */
.battle-hand-score {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, rgba(255,210,74,0.95), rgba(255,138,0,0.95));
  color: #1a1a1a;
  border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,0.85);
  padding: 3px 9px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(255,138,0,0.45), inset 0 1px 0 rgba(255,255,255,0.5);
  line-height: 1;
  animation: handScorePop 0.32s ease-out;
}
.battle-hand-score.hidden { display: none; }
.battle-hand-score .bhs-label { font-size: 8px; letter-spacing: 1.2px; opacity: 0.78; }
.battle-hand-score .bhs-value { font-size: 14px; letter-spacing: 0.5px; }
@keyframes handScorePop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1);    opacity: 1; }
}
@media (max-width: 380px) {
  .battle-hand-title-wrap { gap: 6px; }
  .battle-hand-score { padding: 2px 7px; gap: 4px; }
  .battle-hand-score .bhs-value { font-size: 12px; }
  .battle-hand-score .bhs-label { font-size: 7px; letter-spacing: 1px; }
}
/* Instruction line below — HIDDEN per user request. The "Toca un cromo y
   luego una zona" hint was overlapping the player cards visually and the
   user already understood the interaction from the drop-zone targeting
   reticles. Element kept in DOM (i18n still sets its text) but never
   shown. */
.battle-hand-hint {
  display: none !important;
}
@media (max-width: 600px) {
  .battle-hand-title { font-size: 11px; letter-spacing: 1.8px; }
}
#battle-hand {
  display: flex; gap: 10px;
  overflow-x: auto;
  padding: 6px 12px;       /* horizontal padding so first/last cards don't kiss the edge */
  /* No snap — even `proximity` was triggering extra browser work that
     showed up as micro-stutters under JS-driven scrollLeft writes. The
     JS momentum decay glides smoothly to a stop on its own. */
  scroll-snap-type: none;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* GPU-promote the row so scrollLeft writes paint on the compositor
     thread instead of forcing a main-thread layout per frame. */
  will-change: scroll-position;
  transform: translateZ(0);
}
/* Center when content fits, allow natural scroll when it overflows */
#battle-hand { justify-content: safe center; }
#battle-hand .hand-tile { scroll-snap-align: center; }
#battle-hand::-webkit-scrollbar { height: 4px; }
#battle-hand::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
.hand-tile {
  position: relative;          /* anchor for .hand-uses badge */
  cursor: grab;
  transition: transform 0.15s, filter 0.15s, opacity 0.15s;
  flex-shrink: 0;
  /* Pointer goes straight to the tile, never to the player photo / name /
     stat chips inside. Without this the user can grab the inner photo,
     which fires HTML5 image-drag and prevents our pointermove handler from
     starting the custom drag-to-zone. */
  -webkit-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
          user-drag: none;
  -webkit-touch-callout: none;
  /* `none` — JS owns the full gesture (scroll + drag). On iOS, `pan-x`
     made the browser commit to scroll too aggressively and fire
     pointercancel mid-gesture, killing the drag before it could start.
     Horizontal carousel scroll runs in JS with velocity-tracked
     momentum (see Battle.renderHand) so it still feels native, and
     drag fires on the first hint of non-horizontal motion. */
  touch-action: none;
}
.hand-tile > * {
  pointer-events: none;
}
.hand-tile img { -webkit-user-drag: none; user-drag: none; }
.hand-tile:hover { transform: translateY(-4px); }
/* Per-card usage badge — small chip in the top-left of each card showing
   how many of the MAX_CARD_USES (3) plays the card has already played. */
.hand-uses {
  position: absolute;
  top: -6px; left: -6px;
  z-index: 5;
  background: rgba(0,0,0,0.82);
  color: #ffd24a;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 9px;
  letter-spacing: 0.6px;
  padding: 3px 6px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,210,74,0.85);
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  line-height: 1;
  pointer-events: none;
}
.hand-uses.is-maxed {
  color: #fff;
  background: linear-gradient(135deg, #c81e1e, #8a1010);
  border-color: #ff8a8a;
}
/* Exhausted card (used MAX_CARD_USES times) — desaturate + dim + disable
   pointer events so the player can't select it again. */
.hand-tile.maxed {
  filter: grayscale(0.95) brightness(0.55);
  opacity: 0.55;
  cursor: not-allowed;
}
.hand-tile.maxed:hover { transform: none; }
.hand-tile.maxed .mini-card { pointer-events: none; }
/* Card is out of the match (red / second yellow / injury). Stronger visual
   than just "maxed" so the user can tell at a glance that a sub is needed. */
.hand-tile.is-out {
  filter: grayscale(0.85) brightness(0.5) contrast(0.95);
  opacity: 0.55;
  cursor: not-allowed;
}
.hand-tile.is-out:hover { transform: none; }
.hand-tile.is-out .mini-card { pointer-events: none; }
.hand-tile.is-out .mini-card-photo-wrap {
  box-shadow: inset 0 0 0 2px rgba(255,75,75,0.65);
}
/* Status corner badge (yellow / red / injury). Sits top-right, opposite the
   uses badge in the top-left. */
.hand-status {
  position: absolute;
  top: -6px; right: -6px;
  z-index: 5;
  background: rgba(0,0,0,0.85);
  font-size: 12px;
  line-height: 1;
  padding: 4px 5px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.7);
  pointer-events: none;
}
.hand-status.status-yellow { border-color: #ffd700; box-shadow: 0 0 10px rgba(255,215,0,0.55); }
.hand-status.status-red    { border-color: #ff4b4b; box-shadow: 0 0 10px rgba(255,75,75,0.65); }
.hand-status.status-injury { border-color: #5ed3ff; box-shadow: 0 0 10px rgba(94,211,255,0.6); }
.hand-tile.selected .mini-card {
  border-color: #ffd24a;
  box-shadow: 0 0 18px rgba(255,210,74,0.9), 0 0 0 3px rgba(255,210,74,0.6);
  transform: translateY(-6px);
}
.hand-tile.used .mini-card { opacity: 0.35; filter: grayscale(0.7); }
.hand-tile.used { cursor: not-allowed; }

@media (max-width: 600px) {
  .play-zones { padding: 8px 6px 0; gap: 5px; }
  /* min-height was 110 px — on short phones (≤ 640 tall) two rows × 110 px
     overflowed the play-zones container by ~30 px, pushing the bottom
     row of zones underneath the hand-wrap. min-height: 0 lets the cells
     shrink to fit the available container height. */
  .play-zone { padding: 8px 4px; min-height: 0; }
  .pz-label { font-size: 10px; }
  .pz-sub { font-size: 8px; }
  .pz-icon { font-size: 22px; }
  .pz-contribution { font-size: 8px; }
  .pz-contribution b { font-size: 14px; }
  .mini-card { width: 54px; height: 76px; }
  .mini-card-name { font-size: 7px; }
  .mini-card-stat b { font-size: 9px; }
  .mini-card-flag { width: 14px; height: 14px; font-size: 9px; }
  /* .play-attack-btn mobile sizing now lives next to the main rule */
  .combo-chip { font-size: 9px; padding: 2px 8px; }
  .rival-defense { gap: 6px; padding: 6px 6px 4px; }
  .rd-label { display: none !important; }
  #bhud-goals { font-size: 18px; }
  .bhud-flag { width: 28px; height: 28px; font-size: 18px; }
  .bhud-name { font-size: 10px; }
  #bhud-phase { font-size: 11px; padding: 3px 12px; }
  #battle-hint { font-size: 10px; padding: 3px 10px; }
}

#battle-result {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 50;
  /* Stadium-style football pitch background */
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.88) 80%),
    /* Center line + circle (white pitch markings) */
    radial-gradient(circle at center, transparent 80px, rgba(255,255,255,0.18) 80px 82px, transparent 84px),
    linear-gradient(to right, transparent calc(50% - 1px), rgba(255,255,255,0.18) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    /* Mowing stripes */
    repeating-linear-gradient(90deg,
      #0a5a14 0px, #0a5a14 80px,
      #0c6c18 80px, #0c6c18 160px);
  backdrop-filter: blur(4px);
}
/* Goal-net overlay for depth */
#battle-result::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 36px, rgba(255,255,255,0.04) 36px 37px),
    repeating-linear-gradient(90deg, transparent 0 36px, rgba(255,255,255,0.04) 36px 37px);
  pointer-events: none;
}
/* Floating soccer balls decoration */
#battle-result::after {
  content: '⚽';
  position: absolute;
  top: 12%; left: 8%;
  font-size: 56px;
  opacity: 0.18;
  animation: floatBall 6s ease-in-out infinite;
  text-shadow:
    18vw 8vh 0 rgba(255,255,255,0.12),
    -16vw 24vh 0 rgba(255,255,255,0.1),
    22vw -4vh 0 rgba(255,255,255,0.1);
  pointer-events: none;
}
@keyframes floatBall {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-12px) rotate(20deg); }
}
.result-title, .result-score, .result-rewards, #battle-result > div { position: relative; z-index: 1; }
.result-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 36px; letter-spacing: 5px;
  font-weight: 900;
  background: linear-gradient(180deg, #fff, #ffd24a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  text-shadow: 0 4px 18px rgba(0,0,0,0.6);
  animation: popIn 0.6s ease;
  padding: 0 12px;
}
.result-title.lose { background: linear-gradient(180deg, #fff, #ff4b4b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.result-title.draw { background: linear-gradient(180deg, #fff, #5ed3ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.result-score {
  font-family: 'Orbitron', sans-serif;
  font-size: 38px; margin: 12px 0; color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 6px 22px; border-radius: 14px;
  border: 2px solid rgba(255,210,74,0.5);
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  letter-spacing: 4px;
}
.result-rewards { display: flex; gap: 10px; margin: 10px 0; font-size: 13px; flex-wrap: wrap; justify-content: center; padding: 0 16px; }
.result-rewards span {
  background: rgba(0,0,0,0.55);
  padding: 6px 12px; border-radius: 16px;
  border: 1px solid rgba(255,210,74,0.35);
  font-family:'Rajdhani',sans-serif; font-weight: 700;
  color: #fff;
  backdrop-filter: blur(4px);
}
@media (max-width: 480px) {
  .result-title { font-size: 26px; letter-spacing: 3px; }
  .result-score { font-size: 28px; padding: 4px 16px; letter-spacing: 3px; }
  .result-rewards { font-size: 11px; gap: 6px; }
  .result-rewards span { padding: 4px 9px; }
}

/* ============================================================
   TOURNAMENT
   ============================================================ */
.bracket { display: flex; gap: 14px; overflow-x: auto; padding: 10px; align-items: stretch; }
.bracket-round { display: flex; flex-direction: column; gap: 14px; min-width: 220px; flex-shrink: 0; }
.bracket-round-title {
  text-align: center; font-family: 'Orbitron', sans-serif;
  letter-spacing: 2px; font-size: 13px;
  padding: 8px; background: rgba(255,255,255,0.08);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
}
.bracket-match {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1; justify-content: center;
  min-height: 76px;
}
.bracket-match.current { border-color: #ffd24a; box-shadow: 0 0 14px rgba(255,210,74,0.5); animation: pulse 2s infinite; cursor: pointer; }
.bracket-match.played { opacity: 0.75; }
.bracket-team { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 6px; border-radius: 6px; }
.bracket-team.winner { background: rgba(255,210,74,0.22); font-weight: 800; }
.bracket-team.loser { opacity: 0.5; text-decoration: line-through; }
.bracket-team-flag { font-size: 18px; }
.bracket-team-score { margin-left: auto; font-weight: 800; font-family: 'Orbitron', sans-serif; }

/* ── Mobile: compress bracket so the user doesn't scroll forever.
   r32 has 16 matches stacked vertically and a 76px min-height each = ~1500px
   of scroll. Drop to ~32px per match (single-line, tight) and 18 matches
   become ~580px. */
@media (max-width: 600px) {
  .bracket { gap: 6px; padding: 4px; }
  .bracket-round { gap: 5px; min-width: 158px; }
  .bracket-round-title { font-size: 10px; letter-spacing: 1px; padding: 4px 6px; border-radius: 7px; }
  .bracket-match {
    padding: 3px 5px; gap: 1px;
    border-radius: 7px;
    min-height: 0;
  }
  .bracket-team {
    font-size: 11px; line-height: 1.15;
    padding: 1px 4px;
    gap: 5px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bracket-team > span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
  }
  .bracket-team-flag { font-size: 13px; flex-shrink: 0; }
  .bracket-team-score { font-size: 12px; margin-left: 4px; }
  .bracket-match.current { box-shadow: 0 0 8px rgba(255,210,74,0.55); }
  .bracket-match.current > div[style] { font-size: 9px !important; margin-top: 1px !important; }
}
/* Very narrow phones (≤ 380): squeeze even tighter so 4 simultaneous rounds
   are reachable with a single short horizontal swipe. */
@media (max-width: 380px) {
  .bracket-round { min-width: 138px; }
  .bracket-team { font-size: 10px; padding: 0 3px; }
  .bracket-team-flag { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════
   "Actualizando contenido" banner — visible during the first-load
   pre-cache of all player photos. Sits at the BOTTOM of the screen
   so it doesn't compete with the menu, slides up on show, fades out
   on done. Non-blocking — the user can keep playing while photos
   download in the background.
   ════════════════════════════════════════════════════════════════ */
.updating-banner {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  z-index: 4000;
  background: linear-gradient(135deg, rgba(10,14,28,0.96), rgba(20,28,55,0.96));
  border: 1px solid rgba(255,210,74,0.55);
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.55), 0 0 14px rgba(255,210,74,0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  max-width: 460px;
  margin-left: auto; margin-right: auto;
  pointer-events: none;
}
.updating-banner.show { transform: translateY(0); opacity: 1; }
.updating-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.updating-spinner {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 3px solid rgba(255,210,74,0.25);
  border-top-color: #ffd24a;
  animation: updatingSpin 0.85s linear infinite;
  flex-shrink: 0;
}
@keyframes updatingSpin { to { transform: rotate(360deg); } }
.updating-text { flex: 1; min-width: 0; }
.updating-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #ffd24a;
  text-shadow: 0 0 8px rgba(255,210,74,0.5);
}
.updating-sub {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  opacity: 0.85;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.updating-bar {
  height: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  overflow: hidden;
}
.updating-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffd24a, #ff8a00);
  border-radius: 999px;
  transition: width 0.25s ease-out;
  box-shadow: 0 0 8px rgba(255,210,74,0.65);
}
/* "Done" green state for the brief moment before the banner fades */
.updating-banner.done {
  border-color: rgba(70,224,122,0.7);
  box-shadow: 0 12px 28px rgba(0,0,0,0.55), 0 0 14px rgba(70,224,122,0.45);
}
.updating-banner.done .updating-spinner {
  border-color: rgba(70,224,122,0.25);
  border-top-color: #46e07a;
  animation: none;
}
.updating-banner.done .updating-title { color: #46e07a; text-shadow: 0 0 8px rgba(70,224,122,0.5); }
.updating-banner.done .updating-bar-fill { background: linear-gradient(90deg, #46e07a, #1a8a3a); width: 100% !important; }

.groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.group-table {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 12px;
}
.group-table h4 { margin: 0 0 10px; font-family: 'Orbitron', sans-serif; font-size: 14px; letter-spacing: 1px; }
.group-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
.group-table th, .group-table td { padding: 5px 6px; text-align: center; }
.group-table th { opacity: 0.6; font-weight: 600; font-size: 11px; }
.group-table tr.qualified td { color: #ffd24a; font-weight: 800; }
.group-table .gt-name { text-align: left; }

.tour-toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; padding: 12px; background: rgba(255,255,255,0.05); border-radius: 12px; }

/* Tournament team picker */
.tour-picker {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}
.tour-picker-title {
  font-family: 'Orbitron', sans-serif;
  text-align: center;
  letter-spacing: 2px;
  margin: 0 0 6px;
}
.tour-picker-hint {
  text-align: center; opacity: 0.75; font-size: 13px;
  margin: 0 0 18px;
}
.tour-picker-hint strong { color: #ffd24a; }
.picker-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.picker-group {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px;
}
.picker-group-letter {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800; font-size: 12px;
  letter-spacing: 2px;
  color: #ffd24a;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,210,74,0.25);
}
.picker-team {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  padding: 6px 10px; border-radius: 8px;
  margin-bottom: 4px;
  font-size: 13px; font-weight: 600;
  text-align: left;
  transition: all 0.15s;
}
.picker-team:hover { background: rgba(255,210,74,0.15); border-color: rgba(255,210,74,0.4); }
.picker-team.selected {
  background: linear-gradient(135deg, rgba(255,210,74,0.35), rgba(255,138,0,0.35));
  border-color: #ffd24a;
  color: #fff;
  box-shadow: 0 0 12px rgba(255,210,74,0.5);
}
.picker-team-flag { font-size: 18px; }
.picker-team-name { flex: 1; }
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

/* ============================================================
   SHOP
   ============================================================ */
.shop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.shop-item {
  background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 20px; text-align: center;
  backdrop-filter: blur(8px);
}
.shop-item .pack-visual { width: 120px; height: 165px; font-size: 65px; }
.shop-price { font-family: 'Orbitron', sans-serif; font-size: 20px; color: #ffd24a; margin: 10px 0; }
.shop-buy-btn { width: 100%; padding: 12px; background: linear-gradient(135deg, #5ed3ff, #3a8dde); color: #062035; font-weight: 800; border-radius: 12px; box-shadow: 0 4px 14px rgba(58,141,222,0.5); }
.shop-buy-btn:disabled { opacity: 0.4; cursor: default; background: #555; color: #999; box-shadow: none; }

/* Mobile shop redesign — full-width horizontal cards, one per pack rarity,
   stacked to fill the viewport with NO scroll. Pack image at left, info in
   the middle, COMPRAR button on the right. Each card uses --rarity-color
   set inline by renderShop() so the gradient and glow track the pack's
   theme (blue normal · gold premium · purple estrella · red leyenda). */
@media (max-width: 720px) {
  #screen-shop {
    height: calc(100vh - 95px);
    height: calc(100dvh - 95px - env(safe-area-inset-bottom, 0px));
    padding: 10px 10px 8px;
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .shop-list {
    display: flex !important;
    flex-direction: column;
    gap: 10px !important;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
  }
  .shop-item {
    flex: 1 1 0;
    min-height: 0;
    position: relative;
    display: grid !important;
    grid-template-columns: 78px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    border: 1.5px solid var(--rarity-color, rgba(255,255,255,0.18)) !important;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--rarity-color, #5ed3ff) 22%, transparent) 0%, rgba(10,14,28,0.85) 70%) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.55), inset 0 0 30px color-mix(in srgb, var(--rarity-color, #5ed3ff) 18%, transparent);
    overflow: hidden;
  }
  .shop-item-glow {
    position: absolute;
    top: -40%; right: -20%;
    width: 60%; height: 180%;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--rarity-color) 70%, transparent) 0%, transparent 60%);
    filter: blur(28px);
    pointer-events: none;
    opacity: 0.65;
  }
  .shop-item .pack-visual {
    width: 78px !important;
    height: 100% !important;
    max-height: 110px;
    font-size: 0 !important;
    margin: 0 !important;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 1;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6));
  }
  .shop-item .pack-visual img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
  .shop-item-body { min-width: 0; position: relative; z-index: 1; }
  .shop-item-title {
    margin: 0 !important;
    font-family: 'Orbitron', sans-serif;
    font-size: 12.5px !important;
    font-weight: 900;
    letter-spacing: 1px !important;
    color: var(--rarity-color, #fff);
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.85);
    white-space: normal;
    overflow: visible;
    line-height: 1.15;
    word-break: break-word;
  }
  .shop-item-sub {
    margin: 2px 0 0 !important;
    font-size: 10px; opacity: 0.75; letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
  }
  .shop-item .shop-price {
    margin: 6px 0 0 !important;
    font-family: 'Orbitron', sans-serif;
    font-size: 17px !important;
    color: #ffd24a !important;
    text-shadow: 0 0 8px rgba(255,210,74,0.45);
  }
  .shop-item .shop-buy-btn {
    width: auto !important;
    padding: 12px 14px !important;
    font-size: 12px !important;
    font-weight: 900;
    letter-spacing: 1.5px;
    border-radius: 10px !important;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--rarity-color, #5ed3ff), color-mix(in srgb, var(--rarity-color, #5ed3ff) 60%, #000)) !important;
    color: #fff !important;
    border: 1px solid color-mix(in srgb, var(--rarity-color, #fff) 70%, #fff) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--rarity-color, #5ed3ff) 60%, transparent) !important;
    position: relative; z-index: 1;
  }
  .shop-item .shop-buy-btn:disabled {
    background: rgba(60,60,80,0.6) !important;
    color: rgba(255,255,255,0.5) !important;
    border-color: rgba(255,255,255,0.1) !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   ACHIEVEMENTS
   ============================================================ */
/* Sticky bulk-claim bar — sits above the achievement grid. Hidden via
   .hidden when there's nothing claimable; rises into view only when at
   least one achievement is pending. */
.ach-claimall-bar {
  position: sticky;
  top: 6px;
  z-index: 5;
  margin: 0 0 14px;
  display: flex;
  justify-content: center;
  pointer-events: none;     /* let only the inner button accept taps */
}
.ach-claimall-bar.hidden { display: none; }
.ach-claimall-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 2px;
  color: #06141d;
  background: linear-gradient(135deg, #fff8d4 0%, #ffd24a 55%, #ff9a1a 100%);
  border: 1.5px solid rgba(255,255,255,0.55);
  border-radius: 999px;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 4px 14px rgba(0,0,0,0.45),
    0 0 24px rgba(255,210,74,0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  animation: achClaimAllPulse 1.6s ease-in-out infinite;
}
.ach-claimall-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 6px 18px rgba(0,0,0,0.55),
    0 0 32px rgba(255,210,74,0.75);
}
.ach-claimall-btn:active { transform: translateY(0) scale(0.98); }
.ach-claimall-btn.is-disabled,
.ach-claimall-btn:disabled {
  filter: grayscale(0.4) brightness(0.85);
  cursor: default;
  animation: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 2px 6px rgba(0,0,0,0.35);
}
.ach-claimall-icon { font-size: 18px; line-height: 1; }
.ach-claimall-label { letter-spacing: 2.2px; }
.ach-claimall-count {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  font-size: 12px;
  letter-spacing: 0.8px;
  background: rgba(6,20,29,0.85);
  color: #ffd24a;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  text-shadow: none;
}
@keyframes achClaimAllPulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 4px 14px rgba(0,0,0,0.45), 0 0 24px rgba(255,210,74,0.55); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 6px 20px rgba(0,0,0,0.55), 0 0 40px rgba(255,210,74,0.95); }
}

.achievements-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.ach-item {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
}
.ach-icon { font-size: 30px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.ach-info { flex: 1; }
.ach-name { font-weight: 700; font-size: 14px; }
.ach-progress { font-size: 11px; opacity: 0.7; margin-top: 2px; }
.ach-bar { height: 5px; background: rgba(0,0,0,0.4); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.ach-bar-fill { height: 100%; background: linear-gradient(90deg, #4ade80, #ffd24a); transition: width 0.4s; }
.ach-item.done { background: rgba(255,210,74,0.12); border-color: rgba(255,210,74,0.5); }
.ach-item.done .ach-icon { animation: pulse 2s infinite; }

/* ============================================================
   DUPLICATES
   ============================================================ */
.dup-summary {
  display: flex; gap: 18px; align-items: center;
  padding: 16px; margin-bottom: 12px;
  background: rgba(255,255,255,0.06);
  border-radius: 14px; flex-wrap: wrap;
  border: 1px solid rgba(255,255,255,0.12);
}
/* CONVERTIR TODO + QR scan button sit on the same row. The QR button stays
   compact so the primary action keeps visual weight. */
.dup-actions-row {
  display: flex; gap: 8px; align-items: center;
  margin-left: auto;
}
.dup-scan-btn {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: linear-gradient(135deg, rgba(255,210,74,0.15), rgba(255,138,0,0.10));
  border: 1.5px solid rgba(255,210,74,0.45);
  color: #ffd24a;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.dup-scan-btn:hover { transform: translateY(-1px); border-color: #ffd24a; background: linear-gradient(135deg, rgba(255,210,74,0.28), rgba(255,138,0,0.18)); }
.dup-scan-btn:active { transform: scale(0.94); }
/* Reuse the album checker styling (.album-checker, .album-check-input, .album-check-btn).
   Large bottom padding clears the .dup-cell-num badge that sits ABOVE each
   card via translateY(-50%) — without it, the badge overlaps the COMPROBAR
   row whenever the user hovers the card and it lifts. */
.dup-checker { margin-bottom: 18px; padding-bottom: 6px; }
#screen-duplicates .duplicates-list { padding-top: 22px; }
/* 🌐 Globe button — same compact pill as the QR button, sits to the right
   of COMPROBAR. Opens a team picker that filters the duplicates grid. */
.dup-browse-btn {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.18), rgba(40, 105, 200, 0.10));
  border: 1.5px solid rgba(74, 144, 226, 0.55);
  color: #6bb6ff;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.dup-browse-btn:hover  { transform: translateY(-1px); border-color: #6bb6ff; background: linear-gradient(135deg, rgba(74,144,226,0.30), rgba(40,105,200,0.18)); }
.dup-browse-btn:active { transform: scale(0.94); }

/* Active-filter chip — shows the country flag/name/count plus a clear ✕. */
.dup-filter-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  margin: 0 0 14px;
  background: linear-gradient(135deg, rgba(74,144,226,0.22), rgba(40,105,200,0.12));
  border: 1.5px solid rgba(74,144,226,0.6);
  border-radius: 12px;
  font-family: 'Orbitron', sans-serif;
  color: #fff;
  animation: dupChipIn 0.25s cubic-bezier(.2,.8,.2,1);
}
.dup-filter-chip.hidden { display: none; }
.dup-filter-chip-flag  { font-size: 20px; line-height: 1; }
.dup-filter-chip-name  { font-weight: 800; font-size: 13px; letter-spacing: 0.8px; }
.dup-filter-chip-count {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800; font-size: 12px;
  padding: 2px 8px;
  background: rgba(0,0,0,0.5);
  border-radius: 8px;
  margin-left: auto;
}
.dup-filter-chip-clear {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.4);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
}
.dup-filter-chip-clear:hover { background: rgba(231, 76, 60, 0.5); border-color: #e74c3c; }
@keyframes dupChipIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.duplicates-list {
  display: grid;
  /* minmax(0, 1fr) lets tracks shrink below child intrinsic width — without it,
     `.card.panini.small` (150px) would force columns wider than the viewport. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.dup-cell {
  position: relative;
  width: 100%;
  min-width: 0;       /* needed for the parent grid's minmax(0,1fr) to actually shrink */
  display: flex; flex-direction: column; align-items: center;
}
.dup-cell .card.panini,
.dup-cell .card.panini.small {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 5/7;
  max-width: 100%;
}
/* Mobile: 2 per line as requested */
@media (max-width: 720px) {
  .duplicates-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 480px) {
  .duplicates-list { gap: 10px; }
}
.dup-count {
  position: absolute; top: -8px; right: -8px;
  background: linear-gradient(135deg, #ff4b4b, #c81e1e); color: #fff;
  font-weight: 800; font-size: 13px;
  padding: 3px 10px; border-radius: 12px;
  /* z-index > 5 because .card.panini:hover lifts to z-index:5 and would
     otherwise cover this corner badge when the user taps. */
  z-index: 10;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}
/* ════════════════════════════════════════════════════════════════
   PWA install — big centered modal + persistent floating reminder.
   The bottom-banner CSS below (.pwa-install) stays in the file as
   a no-op (it's now hidden by JS) for backward-compat with older
   service-worker caches that may still pre-load it.
   ════════════════════════════════════════════════════════════════ */
.pwa-modal {
  text-align: center;
  padding: 2px 0 4px;
}
.pwa-modal-icon-wrap {
  display: inline-block;
  position: relative;
  margin: 4px auto 10px;
  animation: pwaIconFloat 3.4s ease-in-out infinite;
}
.pwa-modal-icon {
  width: 88px; height: 88px;
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 36px rgba(255,210,74,0.45);
}
.pwa-modal-icon-wrap::before {
  content: '';
  position: absolute; inset: -14px;
  border-radius: 30px;
  background: radial-gradient(circle, rgba(255,210,74,0.4), transparent 70%);
  z-index: -1;
  animation: pwaIconHalo 2.4s ease-in-out infinite;
}
@keyframes pwaIconFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes pwaIconHalo {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
.pwa-modal-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 22px; letter-spacing: 3px;
  background: linear-gradient(180deg, #fff8d6 0%, #ffd24a 50%, #ff8a00 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 14px rgba(255,210,74,0.45);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
  margin: 2px 0 4px;
}
.pwa-modal-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  margin-bottom: 16px;
}
.pwa-modal-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 6px auto 18px;
  max-width: 360px;
}
.pwa-benefit {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, rgba(255,210,74,0.10), rgba(0,0,0,0.45));
  border: 1px solid rgba(255,210,74,0.4);
  border-radius: 12px;
  padding: 9px 12px;
  text-align: left;
  font-size: 12px;
  color: #fff;
}
.pwa-benefit-emoji { font-size: 18px; }
.pwa-benefit-text { font-weight: 700; letter-spacing: 0.3px; }
.pwa-modal-install-btn {
  display: inline-block;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 14px 32px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 15px; letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(37,211,102,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
  text-shadow: 0 2px 5px rgba(0,0,0,0.5);
  animation: pwaInstallPulse 1.6s ease-in-out infinite;
  margin-bottom: 8px;
}
.pwa-modal-install-btn:hover  { transform: scale(1.05); }
.pwa-modal-install-btn:active { transform: scale(0.96); }
@keyframes pwaInstallPulse {
  0%, 100% { box-shadow: 0 10px 26px rgba(37,211,102,0.55), inset 0 1px 0 rgba(255,255,255,0.35); }
  50%      { box-shadow: 0 14px 34px rgba(37,211,102,0.85), 0 0 28px rgba(37,211,102,0.5), inset 0 1px 0 rgba(255,255,255,0.45); }
}
.pwa-modal-skip {
  display: block;
  margin: 10px auto 0;
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: 12px; letter-spacing: 0.5px;
  cursor: pointer;
  padding: 6px 12px;
  text-decoration: underline;
}
.pwa-modal-skip:hover { color: #fff; }

/* iOS-specific step illustration when there's no native install prompt. */
.pwa-modal-ios {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,210,74,0.4);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0 auto 8px;
  max-width: 360px;
  text-align: left;
}
.pwa-modal-ios-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 12px; letter-spacing: 1px;
  color: #ffd24a;
  text-align: center;
  margin-bottom: 10px;
}
.pwa-modal-ios-steps {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.pwa-modal-ios-steps li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #fff;
}
.pwa-step-num {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a; font-weight: 900;
  font-family: 'Orbitron', sans-serif; font-size: 12px;
}
.pwa-step-txt { flex: 1; }
.pwa-step-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: 1.5px solid #ffd24a;
  border-radius: 6px;
  color: #ffd24a;
  font-size: 14px;
  flex-shrink: 0;
}

/* Floating install FAB — centered along the bottom edge, only on the menu. */
.pwa-install-fab {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  /* translateX(-50%) is baked into the keyframes so the pulse-scale animation
     doesn't fight the centering transform. */
  transform: translateX(-50%);
  z-index: 96;
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #fff;
  border: 3px solid #fff;
  border-radius: 30px;
  padding: 10px 18px 10px 14px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 13px; letter-spacing: 1.8px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(37,211,102,0.55), 0 0 24px rgba(37,211,102,0.4), inset 0 1px 0 rgba(255,255,255,0.35);
  text-shadow: 0 2px 4px rgba(0,0,0,0.55);
  animation: pwaFabPulse 1.8s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
.pwa-install-fab.hidden { display: none; }
.pwa-install-fab:active { transform: translateX(-50%) scale(0.95); }
.pwa-install-fab-icon { font-size: 18px; line-height: 1; }
@keyframes pwaFabPulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 8px 22px rgba(37,211,102,0.55), 0 0 24px rgba(37,211,102,0.4), inset 0 1px 0 rgba(255,255,255,0.35);
  }
  50% {
    transform: translateX(-50%) scale(1.04);
    box-shadow: 0 12px 30px rgba(37,211,102,0.85), 0 0 40px rgba(37,211,102,0.65), inset 0 1px 0 rgba(255,255,255,0.45);
  }
}
/* When the HUD-bottom is hidden (immersive screens), drop the FAB closer to
   the bottom edge so it isn't floating in the middle of nothing. */
body.hud-hidden .pwa-install-fab,
body.on-team   .pwa-install-fab { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
/* FAB shows ONLY on the main menu (and only when no overlay sits on top). On
   other screens the player has work to do — we don't want a CTA floating in
   their way. */
body:not(.screen-menu) .pwa-install-fab,
body.modal-open       .pwa-install-fab,
body.card-zoom-open    .pwa-install-fab { display: none !important; }

@media (max-width: 480px) {
  .pwa-modal-title { font-size: 18px; letter-spacing: 2px; }
  .pwa-modal-sub { font-size: 12px; }
  .pwa-modal-benefits { grid-template-columns: 1fr 1fr; max-width: 320px; }
  .pwa-modal-install-btn { padding: 12px 26px; font-size: 14px; }
}

/* ════════════════════════════════════════════════════════════════
   Daily-reward auto-pop modal — big centered "ACEPTAR" celebration.
   ════════════════════════════════════════════════════════════════ */
.daily-claim { text-align: center; padding: 4px 2px; }
.daily-claim-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 22px; letter-spacing: 3px;
  background: linear-gradient(180deg, #fff8d6 0%, #ffd24a 50%, #ff8a00 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 14px rgba(255,210,74,0.45);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
  margin: 2px 0 6px;
}
.daily-claim-streak {
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 12px; letter-spacing: 1.5px;
  color: #ffd24a;
  background: rgba(255,210,74,0.12);
  border: 1px solid rgba(255,210,74,0.4);
  padding: 4px 12px; border-radius: 14px;
  margin-bottom: 18px;
}
.daily-claim-rewards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 8px auto 18px;
  max-width: 460px;
}
.daily-claim-reward {
  position: relative;
  background: linear-gradient(180deg, rgba(255,210,74,0.12), rgba(0,0,0,0.55));
  border: 1.5px solid rgba(255,210,74,0.55);
  border-radius: 14px;
  padding: 10px 6px 8px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,210,74,0.25);
  animation: dailyRewardPulse 2.6s ease-in-out infinite;
}
.daily-claim-reward:nth-child(2) { animation-delay: 0.2s; }
.daily-claim-reward:nth-child(3) { animation-delay: 0.4s; }
.daily-claim-reward:nth-child(4) { animation-delay: 0.6s; }
@keyframes dailyRewardPulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,210,74,0.25); }
  50%      { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(255,138,0,0.45), inset 0 1px 0 rgba(255,210,74,0.45); }
}
.daily-claim-reward img {
  width: 56px; height: auto;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55));
}
.daily-claim-reward-coin .daily-claim-coin {
  font-size: 44px; line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55)) drop-shadow(0 0 12px rgba(255,210,74,0.5));
}
.daily-claim-count {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900; font-size: 16px;
  color: #ffd24a;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(255,210,74,0.55);
}
.daily-claim-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,0.7);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.daily-claim-btn {
  display: inline-block;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 14px 38px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 16px; letter-spacing: 2.5px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(37,211,102,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
  text-shadow: 0 2px 5px rgba(0,0,0,0.5);
  animation: dailyBtnPulse 1.6s ease-in-out infinite;
}
.daily-claim-btn:hover  { transform: scale(1.05); }
.daily-claim-btn:active { transform: scale(0.96); }
@keyframes dailyBtnPulse {
  0%, 100% { box-shadow: 0 10px 26px rgba(37,211,102,0.55), inset 0 1px 0 rgba(255,255,255,0.35); }
  50%      { box-shadow: 0 14px 34px rgba(37,211,102,0.85), 0 0 28px rgba(37,211,102,0.5), inset 0 1px 0 rgba(255,255,255,0.45); }
}
@media (max-width: 480px) {
  .daily-claim-title { font-size: 18px; letter-spacing: 2px; }
  .daily-claim-reward img { width: 44px; }
  .daily-claim-reward-coin .daily-claim-coin { font-size: 36px; }
  .daily-claim-count { font-size: 14px; }
  .daily-claim-label { font-size: 8px; }
  .daily-claim-btn { padding: 12px 28px; font-size: 14px; }
}

/* Album sticker checker — discreet strip between header and team tabs. */
.album-checker {
  display: flex; align-items: center; gap: 8px;
  max-width: 480px; margin: 8px auto 4px;
  padding: 0 14px;
}
.album-checker-icon { font-size: 18px; opacity: 0.7; }
.album-check-input {
  flex: 1; min-width: 0;
  background: rgba(0,0,0,0.4);
  border: 1.5px solid rgba(255,210,74,0.35);
  border-radius: 12px;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 14px; letter-spacing: 1px;
  padding: 9px 14px;
  outline: none;
  -moz-appearance: textfield;
}
.album-check-input::placeholder { color: rgba(255,255,255,0.4); font-weight: 500; letter-spacing: 0.5px; }
.album-check-input::-webkit-outer-spin-button,
.album-check-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.album-check-input:focus { border-color: #ffd24a; box-shadow: 0 0 0 3px rgba(255,210,74,0.18); }
.album-check-btn {
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a;
  border: none;
  border-radius: 12px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 12px; letter-spacing: 1.5px;
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255,138,0,0.45), inset 0 1px 0 rgba(255,255,255,0.35);
  white-space: nowrap;
}
.album-check-btn:hover  { transform: scale(1.04); }
.album-check-btn:active { transform: scale(0.97); }

/* Checker result modal — number/team header, card centered with a big
   LO TIENES (green) / NO LO TIENES (red) badge overlaid on the corner. */
.album-check-result { text-align: center; }
.album-check-num {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 14px; letter-spacing: 1.5px;
  color: #ffd24a;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  margin-bottom: 14px;
}
.album-check-card-wrap {
  position: relative;
  display: inline-flex; justify-content: center;
  margin: 0 auto;
}
.album-check-badge {
  position: absolute;
  top: -16px; right: -16px;
  z-index: 5;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 13px; letter-spacing: 2px;
  padding: 7px 14px;
  border-radius: 14px;
  border: 2px solid rgba(0,0,0,0.55);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.35);
  transform: rotate(8deg);
  white-space: nowrap;
}
.album-check-badge.is-owned {
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  box-shadow: 0 6px 22px rgba(37,211,102,0.6), inset 0 1px 0 rgba(255,255,255,0.45);
}
.album-check-badge.is-missing {
  background: linear-gradient(135deg, #ff4b4b, #c81e1e);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  box-shadow: 0 6px 22px rgba(200,30,30,0.6), inset 0 1px 0 rgba(255,255,255,0.35);
}

/* Instagram-style share button shown in the tournament-match-result modal
   when the player wins. Same gradient as the reveal/zoom share buttons. */
.match-share-btn {
  background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 45%, #6228d7 100%) !important;
  color: #fff !important;
  border: none !important;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  letter-spacing: 1.2px;
  box-shadow: 0 8px 22px rgba(238,42,123,0.55), 0 0 28px rgba(98,40,215,0.4), inset 0 1px 0 rgba(255,255,255,0.4) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  animation: matchSharePulse 2.2s ease-in-out infinite;
}
.match-share-btn:active { transform: scale(0.96); }
@keyframes matchSharePulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(238,42,123,0.55), 0 0 28px rgba(98,40,215,0.4),  inset 0 1px 0 rgba(255,255,255,0.4); }
  50%      { box-shadow: 0 12px 30px rgba(238,42,123,0.85), 0 0 44px rgba(249,206,52,0.55), inset 0 1px 0 rgba(255,255,255,0.5); }
}

/* Floating Instagram share button inside the leyenda/legacy zoom overlays
   (Top25 + Legacy). Sits centered just above the "toca fuera para cerrar"
   hint. Same gradient as .reveal-share-btn but positioned absolutely. */
/* Flow as the last flex item of the zoom-stage, aligned to its right edge —
   never overlaps the card no matter how small the viewport is. */
.zoom-share-hint {
  align-self: flex-end;
  margin-top: 6px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  text-align: right;
  max-width: 260px;
  line-height: 1.35;
}
.zoom-share-hint.is-claimed { color: rgba(255,255,255,0.45); font-weight: 600; }
.zoom-share-btn {
  align-self: flex-end;
  margin-top: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border: none;
  border-radius: 26px;
  background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 45%, #6228d7 100%);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 12px; letter-spacing: 1.4px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(238,42,123,0.55), 0 0 30px rgba(98,40,215,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  animation: zoomSharePulse 2.2s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
.zoom-share-btn:active { transform: scale(0.95); }
.zoom-share-icon { font-size: 14px; line-height: 1; }
@keyframes zoomSharePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 26px rgba(238,42,123,0.55), 0 0 30px rgba(98,40,215,0.4),  inset 0 1px 0 rgba(255,255,255,0.4);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 14px 32px rgba(238,42,123,0.8),  0 0 44px rgba(249,206,52,0.55), inset 0 1px 0 rgba(255,255,255,0.5);
  }
}
@media (max-width: 480px) {
  .zoom-share-btn { font-size: 11px; padding: 10px 16px; letter-spacing: 1.2px; }
}

.reveal-share-hint {
  margin-top: 6px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.8);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  text-align: center;
  max-width: 200px;
  line-height: 1.35;
}
.reveal-share-hint.is-claimed { color: rgba(255,255,255,0.4); font-weight: 600; }

/* Instagram-style share button shown beneath leyenda/legacy cards in the
   final pack-reveal grid. Tap → generates a 1080×1920 PNG of the card with
   the wc2026.es CTA and opens the native share sheet (Stories appears). */
.reveal-share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 9px 16px;
  border: none;
  border-radius: 22px;
  background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 45%, #6228d7 100%);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 11px; letter-spacing: 1.4px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(238,42,123,0.5), 0 0 22px rgba(98,40,215,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  animation: revealSharePulse 2.2s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
.reveal-share-btn:hover  { transform: scale(1.05); }
.reveal-share-btn:active { transform: scale(0.96); }
.reveal-share-icon { font-size: 14px; line-height: 1; }
@keyframes revealSharePulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(238,42,123,0.5),  0 0 22px rgba(98,40,215,0.35), inset 0 1px 0 rgba(255,255,255,0.35); }
  50%      { box-shadow: 0 10px 24px rgba(238,42,123,0.75), 0 0 36px rgba(249,206,52,0.55), inset 0 1px 0 rgba(255,255,255,0.45); }
}
@media (max-width: 480px) {
  .reveal-share-btn { font-size: 10px; padding: 8px 12px; letter-spacing: 1px; }
}

/* ════════════════════════════════════════════════════════════════
   Pack picker — TCGP-style horizontal carousel that appears between
   tapping "ABRIR" and the actual pack-tear flow when the user owns
   more than one pack of the selected type.
   ════════════════════════════════════════════════════════════════ */
.pack-picker-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background:
    radial-gradient(120% 60% at 50% 20%, rgba(255,210,74,0.18), transparent 55%),
    radial-gradient(100% 80% at 50% 100%, rgba(58,141,222,0.18), transparent 60%),
    rgba(8,10,22,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; flex-direction: column;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 0 calc(20px + env(safe-area-inset-bottom, 0px));
  animation: packPickerIn 0.35s cubic-bezier(.2,.8,.2,1);
}
.pack-picker-overlay.hidden { display: none; }
@keyframes packPickerIn {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}
.pack-picker-close {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 16px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1.5px solid rgba(255,255,255,0.25);
  color: #fff; font-size: 16px;
  cursor: pointer; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pack-picker-close:hover { background: rgba(255,75,75,0.3); border-color: #ff4b4b; }
.pack-picker-header {
  text-align: center;
  padding: 0 20px;
  margin-bottom: 10px;
}
.pack-picker-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 22px; letter-spacing: 4px;
  background: linear-gradient(180deg, #fff8d6 0%, #ffd24a 50%, #ff8a00 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
  margin-bottom: 4px;
}
.pack-picker-count {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700; font-size: 12px;
  letter-spacing: 1.8px;
  color: rgba(255,210,74,0.9);
}
.pack-picker-stage {
  flex: 1;
  /* Virtual carousel — JS positions every pack absolutely on a 3D arc.
     No native scrolling, no scroll-snap. Items overflow the stage edges
     freely so the off-screen packs can fade in from the sides. */
  overflow: visible;
  scrollbar-width: none;
  display: flex; align-items: center; justify-content: center;
  perspective: 1400px;
  position: relative;
  /* Critical for mobile: the browser must NOT eat horizontal pans for
     native scrolling — every drag goes straight to our pointer handler.
     Without this the iOS/Android touch engine pauses pointermove until
     the gesture is "recognised", producing the laggy/jumpy feel. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.pack-picker-stage::-webkit-scrollbar { display: none; }
.pack-picker-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d;
}
.pack-picker-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 168px;
  aspect-ratio: 600/907;
  cursor: pointer;
  /* JS owns the transform — sets the cylinder position via inline style
     based on the pack's angle on the wheel. */
  transform: translate3d(0,0,0);
  transform-origin: center center;
  -webkit-tap-highlight-color: transparent;
  perspective: 1100px;
  will-change: transform, filter, opacity;
  /* JS owns the gesture (delegated to .pack-picker-stage). touch-action
     here doesn't matter much — all pointer events route through stage. */
  touch-action: none;
}
/* Entrance animation — packs sweep in from below into their circle slot,
   staggered via inline transition-delay per index. The class is removed
   once the entrance finishes so subsequent drag rotation stays instant. */
.pack-picker-item.entering {
  transition:
    transform 0.7s cubic-bezier(.22,.8,.25,1),
    opacity  0.55s ease;
}
/* Inner flipper — driven by --rot CSS variable set from JS during drag */
.pack-picker-flipper {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(var(--rot, 0deg));
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.pack-picker-flipper-dragging { transition: none; }  /* finger-tight follow */
.pack-picker-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pack-picker-face-back { transform: rotateY(180deg); }
.pack-picker-item img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.65));
}
/* Back face stretches to the exact slot box (same width & height as the
   front pack). Source art aspect ratio differs, so we let it deform. */
.pack-picker-face-back img { object-fit: fill; }
.pack-picker-item.is-current {
  transform: scale(1.08);
  filter: brightness(1) saturate(1.05) drop-shadow(0 0 28px rgba(255,210,74,0.5));
}
.pack-picker-item.is-current .pack-picker-item-glow {
  opacity: 1;
  transform: scale(1);
}
.pack-picker-item-glow {
  position: absolute; inset: -8%;
  border-radius: 24px;
  background: radial-gradient(circle, rgba(255,210,74,0.45), transparent 65%);
  z-index: -1;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  animation: packPickerHalo 2.6s ease-in-out infinite;
}
@keyframes packPickerFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}
@keyframes packPickerHalo {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
.pack-picker-hint {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  padding: 0 30px;
  margin: 4px 0 14px;
  letter-spacing: 0.5px;
}
.pack-picker-open-btn {
  display: block;
  margin: 0 auto;
  background: linear-gradient(135deg, #ffd24a 0%, #ff8a00 100%);
  color: #1a1a1a;
  border: none;
  border-radius: 28px;
  padding: 14px 34px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 14px; letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(255,138,0,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
  animation: packPickerOpenPulse 1.6s ease-in-out infinite;
  text-shadow: 0 1px 2px rgba(255,255,255,0.4);
}
.pack-picker-open-btn:hover  { transform: scale(1.05); }
.pack-picker-open-btn:active { transform: scale(0.97); }
@keyframes packPickerOpenPulse {
  0%, 100% { box-shadow: 0 10px 26px rgba(255,138,0,0.5),  inset 0 1px 0 rgba(255,255,255,0.4); }
  50%      { box-shadow: 0 14px 34px rgba(255,138,0,0.85), 0 0 28px rgba(255,210,74,0.6), inset 0 1px 0 rgba(255,255,255,0.5); }
}
@media (max-width: 480px) {
  .pack-picker-title { font-size: 18px; letter-spacing: 3px; }
  .pack-picker-item { flex-basis: 170px; }
  .pack-picker-track { gap: 28px; padding: 0 max(16px, calc(50vw - 85px)); }
  .pack-picker-open-btn { padding: 12px 26px; font-size: 13px; }
}

/* ────────────────────────────────────────────────────────────────
   "VUELVE A WC 2026" screen — replaces the share-by-link modal on
   iOS after the user copies the gift code. Browsers can't close
   themselves, so this screen makes the next action unmissable.
   ──────────────────────────────────────────────────────────────── */
.trade-goback {
  text-align: center;
  padding: 6px 4px;
}
.trade-goback-status {
  display: inline-block;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 12px; letter-spacing: 1.5px;
  padding: 6px 14px; border-radius: 14px;
  box-shadow: 0 6px 16px rgba(37,211,102,0.5);
  margin: 2px 0 14px;
}
.trade-goback-logo-wrap {
  display: inline-block;
  position: relative;
  animation: gobackLogoFloat 3.2s ease-in-out infinite;
  margin: 4px 0 12px;
}
.trade-goback-logo {
  width: 110px; height: 110px;
  border-radius: 26px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.65), 0 0 40px rgba(255,210,74,0.5);
}
.trade-goback-logo-wrap::before {
  content: '';
  position: absolute; inset: -18px;
  border-radius: 36px;
  background: radial-gradient(circle, rgba(255,210,74,0.45), transparent 70%);
  z-index: -1;
  animation: gobackLogoHalo 2.4s ease-in-out infinite;
}
@keyframes gobackLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes gobackLogoHalo {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.12); }
}
.trade-goback-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 22px; letter-spacing: 3px;
  background: linear-gradient(180deg, #fff8d6 0%, #ffd24a 50%, #ff8a00 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 14px rgba(255,210,74,0.45);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
  margin: 4px 0 6px;
}
.trade-goback-arrow {
  font-size: 32px;
  color: #ffd24a;
  margin: 6px 0;
  filter: drop-shadow(0 2px 6px rgba(255,210,74,0.55));
  animation: gobackArrow 1.4s ease-in-out infinite;
}
@keyframes gobackArrow {
  0%, 100% { transform: translateY(0);   opacity: 0.7; }
  50%      { transform: translateY(8px); opacity: 1; }
}
.trade-goback-sub {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin: 6px auto 4px;
  max-width: 320px;
}
@media (max-width: 480px) {
  .trade-goback-title { font-size: 18px; letter-spacing: 2px; }
  .trade-goback-logo  { width: 90px; height: 90px; }
  .trade-goback-arrow { font-size: 28px; }
}

/* Big NUEVO / DUPLICADO badge that overlays the received card when a QR or
   gift link is redeemed. Top-right of the card, color-coded by status. */
.trade-recv-card-wrap {
  position: relative;
  /* Block-level flex (not inline-flex) so the CONTINUAR button below lands on
     its own row instead of sitting next to the card. */
  display: flex; justify-content: center; align-items: flex-start;
  margin: 18px auto;
}
/* The trade-receive flow renders the card-wrap followed immediately by a
   primary-btn — force the button to a new line, centered below. */
.trade-recv-card-wrap + .primary-btn {
  display: block;
  margin: 14px auto 0;
}
.trade-recv-badge {
  position: absolute;
  top: -14px; right: -14px;
  z-index: 5;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 14px; letter-spacing: 2px;
  padding: 6px 14px;
  border-radius: 14px;
  border: 2px solid rgba(0,0,0,0.55);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.35);
  transform: rotate(8deg);
}
.trade-recv-badge.is-new {
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  box-shadow: 0 6px 22px rgba(37,211,102,0.6), inset 0 1px 0 rgba(255,255,255,0.45);
}
.trade-recv-badge.is-dupe {
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a;
}

/* Global album number badge — same 1..768 numbering printed in the album,
   so the user can spot which slot the duplicate belongs to. Top-left so it
   doesn't fight the red copy-count badge in the top-right. */
.dup-cell-num {
  position: absolute; top: -8px; left: -8px;
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900; font-size: 11px;
  letter-spacing: 0.5px;
  padding: 3px 9px; border-radius: 10px;
  /* z-index > 5 because .card.panini:hover lifts to z-index:5 and would
     otherwise cover this corner badge when the user taps the card. */
  z-index: 10;
  border: 1.5px solid rgba(0,0,0,0.45);
  box-shadow: 0 3px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.35);
}
.dup-cell button {
  width: 100%; margin-top: 6px;
  padding: 6px; font-size: 11px;
  background: linear-gradient(135deg, rgba(255,210,74,0.3), rgba(255,138,0,0.3));
  border: 1px solid rgba(255,210,74,0.4);
  border-radius: 8px; color: #ffd24a; font-weight: 700;
}

/* ============================================================
   TOAST + MODAL
   ============================================================ */
#toast-container {
  position: fixed; top: 70px; right: 14px;
  z-index: 5000; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  background: rgba(20,28,50,0.95);
  border: 1px solid rgba(255,210,74,0.5);
  color: #fff; padding: 12px 20px; border-radius: 12px;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
  animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
  max-width: 320px;
  pointer-events: auto;
}
.toast.success { border-color: #4ade80; }
.toast.warn { border-color: #ffb74d; }
.toast.error { border-color: #ff4b4b; }

.modal {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
}
.modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(12px); }
.modal-content {
  position: relative; max-width: 500px; width: 90%;
  max-height: 86vh;             /* fit in viewport */
  overflow-y: auto;             /* enable scrolling when content overflows */
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(160deg, #1c2540, #0c1326);
  border: 2px solid rgba(255,210,74,0.4);
  border-radius: 20px;
  padding: 32px; text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,0.8);
  animation: popIn 0.3s ease;
}
.modal-content::-webkit-scrollbar { width: 6px; }
.modal-content::-webkit-scrollbar-thumb { background: rgba(255,210,74,0.4); border-radius: 3px; }
/* CLOSE button — clearly separated from the modal body so it doesn't visually
   collide with grids/flags above it. */
#modal-close { margin-top: 24px; min-width: 140px; }
@media (max-width: 480px) { #modal-close { margin-top: 20px; } }
.modal-content h2 { margin: 0 0 14px; font-family: 'Orbitron', sans-serif; }
.modal-content p { line-height: 1.5; opacity: 0.85; }

@media (max-width: 600px){
  .card.panini { width: 160px; height: 232px; }
  /* battle pitch adjustments for mobile */
  .field-card { width: 62px; height: 84px; }
  .field-card-name { font-size: 8px; }
  .field-card-pos { font-size: 7px; }
  .field-card-flag { width: 14px; height: 14px; font-size: 10px; }
  .field-card-ovr { font-size: 9px; padding: 1px 4px; }
  .pitch-goal { width: 96px; height: 12px; }
  .pitch-center-circle { width: 70px; height: 70px; }
  #battle-ball { font-size: 22px; }
  #bhud-phase { font-size: 14px; padding: 6px 16px; letter-spacing: 2px; }
  #battle-hint { font-size: 12px; padding: 5px 12px; }
  .bhud-flag { font-size: 22px; width: 32px; height: 32px; }
  .bhud-name { font-size: 11px; }
  #bhud-goals { font-size: 22px; }
  #bhud-round { font-size: 9px; }
  .stat-popup { padding: 3px 8px; }
  .stat-popup .sp-num { font-size: 14px; }
}

/* ============================================================
   PWA INSTALL BANNER
   ============================================================ */
.pwa-install {
  position: fixed; left: 12px; right: 12px; bottom: 14px;
  z-index: 9998;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(20,28,50,0.98), rgba(10,14,28,0.98));
  border: 2px solid rgba(255,210,74,0.55);
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.7), 0 0 30px rgba(255,210,74,0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  max-width: 520px; margin: 0 auto;
  animation: pwaSlide 0.45s cubic-bezier(.2,.8,.2,1);
}
@keyframes pwaSlide { from { transform: translateY(120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.pwa-install-icon {
  width: 52px; height: 52px; border-radius: 12px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.pwa-install-text { flex: 1; min-width: 0; }
.pwa-install-title {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 14px; letter-spacing: 1.5px;
  background: linear-gradient(180deg, #fff, #ffd24a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 2px;
}
.pwa-install-sub { font-size: 11px; color: rgba(255,255,255,0.78); line-height: 1.3; }
.pwa-install-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a; font-weight: 900;
  border: 2px solid #fff;
  border-radius: 22px;
  padding: 8px 16px;
  font-family: 'Orbitron', sans-serif; font-size: 11px; letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,138,0,0.5);
  transition: transform 0.15s;
}
.pwa-install-btn:hover { transform: scale(1.05); }
.pwa-install-close {
  flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.1); color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pwa-install-close:hover { background: rgba(255,75,75,0.3); border-color: #ff4b4b; }
/* iOS variant: hide install button (no programmatic install on iOS), show longer text */
.pwa-install.ios .pwa-install-btn { display: none; }
.pwa-install.ios .pwa-install-sub { font-size: 11px; }
@media (max-width: 380px) {
  .pwa-install-icon { width: 40px; height: 40px; }
  .pwa-install-title { font-size: 12px; }
  .pwa-install-btn { padding: 6px 12px; font-size: 10px; }
}

/* ============================================================
   ACHIEVEMENT NOTIFICATION BALLOON (Pokémon-GO style)
   ============================================================ */
.ach-notify {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%) translateY(-150%);
  z-index: 9997;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 14px;
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a;
  border: 3px solid #fff;
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(255,138,0,0.6), 0 0 30px rgba(255,210,74,0.5);
  cursor: pointer;
  min-width: 280px; max-width: 92vw;
  transition: transform 0.45s cubic-bezier(.34,1.56,.64,1), opacity 0.25s;
  opacity: 0;
}
.ach-notify.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  animation: achPulse 1.4s ease-in-out infinite 0.6s;
}
@keyframes achPulse { 0%, 100% { box-shadow: 0 14px 40px rgba(255,138,0,0.6), 0 0 30px rgba(255,210,74,0.5); } 50% { box-shadow: 0 14px 40px rgba(255,138,0,0.9), 0 0 50px rgba(255,210,74,0.9); } }
.ach-notify-icon {
  font-size: 32px;
  width: 50px; height: 50px;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);
  flex-shrink: 0;
}
.ach-notify-body { flex: 1; min-width: 0; }
.ach-notify-title { font-family:'Orbitron',sans-serif; font-weight:900; font-size:11px; letter-spacing:2px; opacity:0.85; }
.ach-notify-name  { font-family:'Orbitron',sans-serif; font-weight:900; font-size:14px; line-height:1.15; margin:2px 0; }
.ach-notify-hint  { font-size:10px; opacity:0.75; }
.ach-notify-arrow { font-size: 22px; font-weight: 900; opacity: 0.7; flex-shrink: 0; }

/* ── PENDING achievement (in list) ── */
.ach-item.pending {
  border-color: #ffd24a !important;
  background: linear-gradient(135deg, rgba(255,210,74,0.18), rgba(255,138,0,0.10)) !important;
  box-shadow: 0 0 18px rgba(255,210,74,0.4), inset 0 0 12px rgba(255,210,74,0.15) !important;
  position: relative;
  cursor: pointer;
  animation: achGlow 2s ease-in-out infinite;
}
@keyframes achGlow {
  0%, 100% { box-shadow: 0 0 18px rgba(255,210,74,0.4), inset 0 0 12px rgba(255,210,74,0.15); }
  50%      { box-shadow: 0 0 28px rgba(255,210,74,0.8), inset 0 0 18px rgba(255,210,74,0.25); }
}
.ach-item.pending .ach-name { color: #ffd24a; }
.ach-item.pending .ach-icon { animation: achIconBounce 1.2s ease-in-out infinite; }
@keyframes achIconBounce { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18) rotate(-6deg); } }
.ach-pending-dot {
  position: absolute; top: 8px; right: 8px;
  width: 12px; height: 12px;
  background: #ff4b4b;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(255,75,75,0.8);
  animation: achDot 1.2s ease-in-out infinite;
}
@keyframes achDot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } }
.ach-claim-btn {
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a; font-family:'Orbitron',sans-serif; font-weight:900;
  border: 2px solid #fff;
  border-radius: 18px;
  padding: 8px 16px;
  font-size: 11px; letter-spacing: 1.5px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,138,0,0.5);
  flex-shrink: 0;
  margin-left: 10px;
}
.ach-claim-btn:hover { transform: scale(1.06); }

/* Album counter chip on menu card — premium golden pill */
.menu-album-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, rgba(255,210,74,0.95), rgba(255,138,0,0.95));
  color: #1a1a1a !important;
  padding: 5px 12px;
  border-radius: 18px;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(255,138,0,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
  opacity: 1 !important;
  /* margin-top removed — was adding 8px that broke title alignment across cards.
     The body block is now pushed to bottom via margin-top:auto on .menu-card-body. */
  font-weight: 800;
  line-height: 1;
}
.menu-album-chip .ma-icon { font-size: 14px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3)); }
#menu-album-count {
  font-family:'Orbitron',sans-serif; font-weight:900;
  font-size: 14px;
  color: #1a1a1a;
  letter-spacing: 0.5px;
}
.menu-album-chip .ma-label {
  font-family:'Rajdhani',sans-serif; font-weight:700;
  font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.7);
}
@media (max-width: 480px) {
  .menu-album-chip { padding: 4px 10px; gap: 4px; }
  #menu-album-count { font-size: 12px; }
  .menu-album-chip .ma-label { font-size: 9px; letter-spacing: 1px; }
  .menu-album-chip .ma-icon { font-size: 12px; }
}

/* ============================================================
   LEGAL NOTICE — shown only on first launch
   ============================================================ */
.legal-notice {
  position: fixed; inset: 0;
  z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,8,16,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 16px;
  animation: legalFade 0.5s ease-out;
}
@keyframes legalFade { from { opacity: 0; } to { opacity: 1; } }
.legal-card {
  width: 100%; max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  background: linear-gradient(160deg, rgba(20,28,50,0.98), rgba(10,14,28,0.98));
  border: 2px solid rgba(255,210,74,0.55);
  border-radius: 18px;
  padding: 24px 22px 18px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.8), 0 0 40px rgba(255,210,74,0.18);
  color: #f6f8fc;
  animation: legalRise 0.5s cubic-bezier(.2,.8,.2,1.2);
}
@keyframes legalRise { from { transform: translateY(30px) scale(0.95); opacity: 0; } to { transform: none; opacity: 1; } }
.legal-title {
  font-family:'Orbitron',sans-serif; font-weight:900;
  font-size: 22px; letter-spacing: 4px;
  text-align: center;
  background: linear-gradient(180deg, #fff, #ffd24a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,210,74,0.3);
}
.legal-body { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.88); }
.legal-body p { margin: 0 0 10px; }
.legal-body strong { color: #ffd24a; font-weight: 700; }
.legal-accept-line {
  text-align: center;
  font-weight: 700;
  color: #ffd24a !important;
  margin-top: 12px !important;
}
.legal-accept-btn {
  display: block; margin: 16px auto 8px;
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a; font-weight: 900;
  font-family:'Orbitron',sans-serif; letter-spacing: 3px;
  border: 2px solid #fff;
  border-radius: 30px;
  padding: 12px 36px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(255,138,0,0.5);
  transition: transform 0.15s;
}
.legal-accept-btn:hover { transform: scale(1.06); }
/* Mobile: the popup itself must fit the viewport with NO page scroll —
   only the disclaimer TEXT scrolls, inside its own box. Title + ACEPTAR
   button stay fixed in place (flex 0 0 auto) so the button is always
   reachable without having to scroll past the whole message first. */
@media (max-width: 720px) {
  .legal-notice {
    padding: 20% 16px;
  }
  .legal-card {
    max-height: none;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .legal-title { flex: 0 0 auto; }
  .legal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .legal-accept-btn { flex: 0 0 auto; }
  .legal-copy { flex: 0 0 auto; }
}
.legal-copy {
  text-align: center;
  font-size: 11px; letter-spacing: 1.5px;
  color: rgba(255,255,255,0.5);
  margin-top: 8px;
  font-family:'Orbitron',sans-serif;
}
@media (max-width: 480px) {
  .legal-card { padding: 18px 16px 14px; }
  .legal-title { font-size: 18px; letter-spacing: 3px; }
  .legal-body { font-size: 12px; }
  .legal-accept-btn { padding: 10px 28px; font-size: 12px; }
}

/* ============================================================
   SPECIAL CARD BOOT REVEAL — one-off flip animation (dorso → cromo_00)
   shown the very first time the game loads. Card sits inert for 2s
   (JS adds .flipped), then rotates to reveal the front artwork.
   ============================================================ */
.special-reveal-overlay {
  position: fixed; inset: 0;
  z-index: 99998;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  background: rgba(5,8,16,0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 24px 16px;
  animation: legalFade 0.5s ease-out;
  overflow: hidden;
}
.special-reveal-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 60vw; height: 60vw; max-width: 480px; max-height: 480px;
  transform: translate(-50%,-50%);
  background: radial-gradient(ellipse at center, rgba(255,210,74,0.28) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  animation: specialGlowPulse 2.4s ease-in-out infinite;
}
@keyframes specialGlowPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%,-50%) scale(0.95); }
  50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.08); }
}
.special-reveal-title {
  position: relative; z-index: 1;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900; font-size: 18px; letter-spacing: 2px;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.special-reveal-stage {
  position: relative; z-index: 1;
  width: min(70vw, 260px);
  aspect-ratio: 600 / 800;
  perspective: 1400px;
  /* Shadow lives HERE, not on .special-reveal-flipper — applying `filter`
     to an element that also declares transform-style:preserve-3d forces
     the browser to flatten its 3D rendering (CSS Filter Effects spec:
     a filter other than none computes transform-style as flat). With the
     filter on the flipper itself, the flip-card illusion breaks and the
     revealed face renders as a flat horizontal MIRROR instead of a
     correctly-composited 3D flip. Keeping the filter on this ancestor
     (outside the preserve-3d chain) gives the same drop-shadow look
     without touching the flipper's 3D context. */
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.6));
}
.special-reveal-flipper {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(.34,1.56,.64,1);
}
.special-reveal-flipper.flipped { transform: rotateY(180deg); }
.special-reveal-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #0a0e1c;
}
.special-reveal-face img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.special-reveal-face.special-reveal-front { transform: rotateY(180deg); }
.special-reveal-actions {
  position: relative; z-index: 1;
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: 4px;
}
.special-reveal-share-btn,
.special-reveal-close-btn {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800; font-size: 12px; letter-spacing: 1px;
  padding: 12px 20px;
  border-radius: 26px;
  cursor: pointer;
  border: 0;
}
.special-reveal-share-btn {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(37,211,102,0.45);
}
.special-reveal-close-btn {
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a;
  box-shadow: 0 8px 20px rgba(255,138,0,0.4);
}
.special-reveal-share-btn:active,
.special-reveal-close-btn:active { transform: scale(0.96); }

/* ── Permanent showcase in the álbum screen (once owned) ─────────────── */
.special-card-section.hidden { display: none; }
.special-card-hero {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 10px 0 14px;
  padding: 14px 12px;
  background: linear-gradient(160deg, rgba(255,210,74,0.12), rgba(10,14,28,0.6));
  border: 1.5px solid rgba(255,210,74,0.4);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.special-card-badge {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900; font-size: 11px; letter-spacing: 1.5px;
  color: #ffd24a;
}
.special-card-photo-wrap { width: 110px; aspect-ratio: 600/800; cursor: pointer; }
.special-card-photo {
  width: 100%; height: 100%; object-fit: contain;
  border-radius: 10px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.5));
}
.special-card-share-btn {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800; font-size: 11px; letter-spacing: 1px;
  padding: 9px 18px;
  border-radius: 22px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(37,211,102,0.4);
}
.special-card-share-btn:active { transform: scale(0.96); }

/* ============================================================
   FLIP CARDS in the pack final summary
   (5th = best card, 6th = secret bonus — both start face-down)
   ============================================================ */
.reveal-final-item.flip-card {
  perspective: 1200px;
  transform-style: preserve-3d;
}
.reveal-final-item.flip-card .flip-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 5/7;
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(.5,.1,.2,1);
  transform: rotateY(180deg);
}
.reveal-final-item.flip-card.flipped .flip-inner { transform: rotateY(0); }
.flip-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex; align-items: stretch; justify-content: stretch;
}
.flip-face-front { transform: rotateY(0); }
.flip-face-front .card.panini { width: 100%; height: 100%; }
.flip-face-back { transform: rotateY(180deg); }

/* Back of card: premium golden seal */
.flip-back-inner {
  width: 100%; height: 100%;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,210,74,0.55), transparent 55%),
    linear-gradient(160deg, #ff8a00 0%, #c81e1e 60%, #6a0a0a 100%);
  border: 3px solid #fff;
  box-shadow:
    0 0 0 2px rgba(255,210,74,0.7),
    0 14px 32px rgba(0,0,0,0.7),
    inset 0 4px 14px rgba(255,255,255,0.25),
    inset 0 -8px 18px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 18px 12px;
  cursor: pointer;
}
.flip-back-inner::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-conic-gradient(rgba(255,255,255,0.05) 0deg 10deg, transparent 10deg 20deg);
  opacity: 0.5;
  pointer-events: none;
}
.flip-back-glow {
  position: absolute; inset: -50%;
  background: conic-gradient(from 0deg, transparent 60%, rgba(255,255,255,0.4) 70%, transparent 80%);
  animation: backRotate 3.5s linear infinite;
  pointer-events: none; filter: blur(2px);
}
@keyframes backRotate { to { transform: rotate(360deg); } }
.flip-back-emoji {
  font-size: 56px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
  margin-bottom: 8px;
  position: relative; z-index: 1;
  animation: backPulse 1.6s ease-in-out infinite;
}
@keyframes backPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.flip-back-label {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 16px; letter-spacing: 3px;
  color: #fff8d6;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  position: relative; z-index: 1;
}
.flip-back-hint {
  margin-top: 8px;
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: 10px; letter-spacing: 1.5px;
  color: rgba(255,248,214,0.85);
  position: relative; z-index: 1;
  animation: pulse 1.5s ease-in-out infinite;
}

/* Secret card: different palette (violet→gold) */
.reveal-final-item.secret-card .flip-back-inner {
  background:
    radial-gradient(circle at 50% 30%, rgba(255,210,74,0.55), transparent 55%),
    linear-gradient(160deg, #9b4dff 0%, #4b1d8a 60%, #1a0540 100%);
  border-color: #ffd24a;
  box-shadow:
    0 0 0 2px rgba(255,210,74,0.85),
    0 14px 32px rgba(155,77,255,0.5),
    inset 0 4px 14px rgba(255,255,255,0.25),
    inset 0 -8px 18px rgba(0,0,0,0.5);
}
.reveal-final-item.secret-card .flip-back-label { color: #ffd24a; }

/* When 6 cards exist, prefer 3+3 layout on mobile */
@media (max-width: 900px) {
  .reveal-final-grid > :nth-child(6) { display: grid; }
}

/* ============================================================
   LAST CARD FLIP (during one-by-one pack opening — golden back)
   ============================================================ */
.reveal-card-shell.best-shell {
  /* Same size as a normal revealed card so the flip-card fills properly */
  width: min(360px, 78vw);
  height: auto;
  aspect-ratio: 5/7;
  perspective: 1400px;
}
@media (max-width: 600px) {
  .reveal-card-shell.best-shell { width: min(280px, 85vw); }
}
.best-flip {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.95s cubic-bezier(.5,.1,.2,1);
  transform: rotateY(180deg);
}
.best-flip.flipped { transform: rotateY(0); }
.best-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.best-front { transform: rotateY(0); }
.best-front .card.panini { width: 100%; height: 100%; }
.best-back  { transform: rotateY(180deg); }
.best-back {
  border-radius: 14px;
  overflow: hidden;
  background-image: url('../assets/cards/back.webp');
  background-size: cover;
  background-position: center;
  background-color: #0a1532;
  /* Pulsing golden glow around the card */
  animation: bestBackGlow 2.2s ease-in-out infinite;
}
@keyframes bestBackGlow {
  0%, 100% { box-shadow: 0 24px 60px rgba(0,0,0,0.85), 0 0 40px rgba(255,210,74,0.45); }
  50%      { box-shadow: 0 24px 60px rgba(0,0,0,0.85), 0 0 80px rgba(255,210,74,0.95), 0 0 120px rgba(255,138,0,0.55); }
}
/* Bright diagonal sweep — like a sword of light slicing across */
.best-back::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,0.55) 48%,
    rgba(255,210,74,0.8)  50%,
    rgba(255,255,255,0.55) 52%,
    transparent 70%);
  background-size: 250% 250%;
  animation: bestSweep 3.2s linear infinite;
  mix-blend-mode: overlay;
  pointer-events: none;
}
@keyframes bestSweep {
  0%   { background-position: -120% -120%; }
  100% { background-position:  120%  120%; }
}
/* Sparkle particles layered over the artwork */
.best-back::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle 2px at 12% 18%, rgba(255,255,255,0.95) 0, transparent 60%),
    radial-gradient(circle 3px at 78% 22%, rgba(255,210,74,0.95) 0, transparent 60%),
    radial-gradient(circle 2px at 32% 70%, rgba(255,255,255,0.9)  0, transparent 60%),
    radial-gradient(circle 4px at 88% 78%, rgba(255,210,74,0.9)  0, transparent 60%),
    radial-gradient(circle 2px at 56% 12%, rgba(255,255,255,0.9)  0, transparent 60%),
    radial-gradient(circle 3px at 18% 88%, rgba(255,210,74,0.95) 0, transparent 60%),
    radial-gradient(circle 2px at 68% 50%, rgba(255,255,255,0.95) 0, transparent 60%),
    radial-gradient(circle 3px at 8%  52%, rgba(255,210,74,0.9)  0, transparent 60%);
  animation: bestSparkle 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bestSparkle {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
/* Rotating conic shine (existing element via .best-back-shine) */
.best-back-shine {
  position: absolute; inset: -40%;
  background: conic-gradient(from 0deg,
    transparent 50%,
    rgba(255,210,74,0.55) 65%,
    rgba(255,255,255,0.7) 70%,
    rgba(255,210,74,0.55) 75%,
    transparent 85%);
  animation: bestRotate 4.5s linear infinite;
  pointer-events: none;
  filter: blur(2px);
  opacity: 0.6;
  mix-blend-mode: screen;
}
@keyframes bestRotate { to { transform: rotate(360deg); } }
.best-back-frame { display: none; }

/* ============================================================
   MENU CARD with active alert (pending packs / achievements)
   ============================================================ */
.menu-card.has-alert {
  border-color: rgba(255,75,75,0.6);
  box-shadow:
    0 12px 32px rgba(255,75,75,0.35),
    0 0 30px rgba(255,210,74,0.35),
    inset 0 1px 0 rgba(255,255,255,0.2);
  animation: alertCardPulse 1.8s ease-in-out infinite;
}
@keyframes alertCardPulse {
  0%, 100% { box-shadow: 0 12px 32px rgba(255,75,75,0.35), 0 0 30px rgba(255,210,74,0.35), inset 0 1px 0 rgba(255,255,255,0.2); }
  50%      { box-shadow: 0 12px 32px rgba(255,75,75,0.55), 0 0 50px rgba(255,210,74,0.6),  inset 0 1px 0 rgba(255,255,255,0.3); }
}
/* Icon — wiggle + golden glow */
.menu-card.has-alert .menu-card-icon {
  animation: alertIconBounce 1.6s ease-in-out infinite;
}
.menu-card.has-alert .menu-card-icon img {
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.6)) drop-shadow(0 0 14px rgba(255,210,74,0.85));
  animation: alertIconGlow 1.6s ease-in-out infinite;
}
@keyframes alertIconBounce {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-6px) rotate(-3deg); }
  50%      { transform: translateY(0) rotate(0); }
  75%      { transform: translateY(-3px) rotate(3deg); }
}
@keyframes alertIconGlow {
  0%, 100% { filter: drop-shadow(0 8px 18px rgba(0,0,0,0.6)) drop-shadow(0 0 14px rgba(255,210,74,0.85)); }
  50%      { filter: drop-shadow(0 8px 18px rgba(0,0,0,0.6)) drop-shadow(0 0 26px rgba(255,210,74,1)); }
}
/* Title also gets a subtle pulse */
.menu-card.has-alert .menu-card-title {
  animation: alertTitlePulse 1.6s ease-in-out infinite;
}
@keyframes alertTitlePulse {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50%      { text-shadow: 0 0 14px rgba(255,210,74,0.7); }
}
/* Hover overrides animation pause to be polite */
.menu-card.has-alert:hover { animation-play-state: paused; }
.menu-card.has-alert:hover .menu-card-icon,
.menu-card.has-alert:hover .menu-card-icon img,
.menu-card.has-alert:hover .menu-card-title { animation-play-state: paused; }

/* HUD back button (replaces per-screen .back-btn) */
/* Floating back button — always a body-level element so no parent stacking
   context, overflow, or backdrop-filter can swallow it. Pure CSS visibility
   driven by body classes (see ui.js). */
#hud-back.hud-back-btn {
  position: fixed;
  /* Bottom-left on every viewport (was top-left on desktop). Keeps the FAB
     in thumb / pointer reach near the rest of the bottom HUD chrome instead
     of forcing the user to chase the top corner on big screens. */
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 14px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a; font-weight: 900;
  font-size: 26px; line-height: 1;
  border: 2px solid #fff;
  cursor: pointer;
  display: none;                          /* hidden by default — during boot and on menu */
  align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55), 0 0 18px rgba(255,210,74,0.4);
  transition: transform 0.15s;
  padding: 0;
  z-index: 9999;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#hud-back.hud-back-btn:hover  { transform: scale(1.1); }
#hud-back.hud-back-btn:active { transform: scale(0.92); }
/* Only show on sub-screens (NOT menu, NOT immersive battle/opening, NOT during boot) */
body[class*="screen-"]:not(.screen-menu):not(.hud-hidden) #hud-back.hud-back-btn {
  display: flex;
}
/* When a card-zoom overlay is open, hide the FAB so it doesn't sit over the
   enlarged card. It returns automatically when the overlay closes. The same
   applies while ANY modal is open — otherwise the back arrow floats over the
   modal content (e.g. the share-by-QR modal). */
body.card-zoom-open #hud-back.hud-back-btn,
body.modal-open    #hud-back.hud-back-btn { display: none !important; }
body.card-zoom-open .hud-lang,
body.modal-open    .hud-lang             { display: none !important; }

/* Language selector lives ONLY on the main menu — every other screen has
   its own focused chrome and doesn't need it cluttering the corner. */
body:not(.screen-menu) .hud-lang,
body:not(.screen-menu) #hud-lang-menu { display: none !important; }

/* Mobile only bumps the size & shadow — bottom-left positioning is already
   in the base rule for every viewport. */
@media (max-width: 720px) {
  #hud-back.hud-back-btn {
    width: 60px; height: 60px;
    font-size: 30px;
    border-width: 3px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.75), 0 0 26px rgba(255,210,74,0.55);
  }
}
/* Team builder hides the bottom stats bar — drop the FAB closer to the edge
   on every viewport so it doesn't float in empty space. */
body.on-team #hud-back.hud-back-btn { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

/* ============================================================
   TEAM BENCH (suplentes — 4 slots POR/DEF/MED/DEL)
   ============================================================ */
.bench-row {
  width: 100%; max-width: 760px;
  margin: 16px auto 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;                                  /* clear space between title and cards */
}
.bench-title {
  font-family:'Orbitron',sans-serif; font-weight:900;
  font-size: 12px; letter-spacing: 3px;
  color: #ffd24a;
  background: linear-gradient(135deg, rgba(255,210,74,0.18), rgba(0,0,0,0.55));
  padding: 6px 16px; border-radius: 12px;
  border: 1px solid rgba(255,210,74,0.4);
  flex-shrink: 0;
  z-index: 2; position: relative;
}
.bench-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
  align-items: stretch;
}
.bench-slot {
  /* Override formation-slot absolute positioning + transform */
  position: relative !important;
  left: auto !important; top: auto !important;
  transform: none !important;
  /* Card-sized: 84×130 matches .formation-slot .card.panini.tiny so the card fits inside */
  width: 100%;
  max-width: 96px;
  aspect-ratio: 84 / 130;
  height: auto;
  margin: 0 auto;
  /* No `overflow: hidden` here — the ✕ remove button sits at top:-8px right:-8px
     OUTSIDE the slot bounds, matching the starter slots. The card is forced to
     100% width/height below so it already fits without needing clipping. */
}
.bench-slot .card.panini.tiny {
  /* Force the tiny card to fill the slot so it never overflows upward and
     covers the BANQUILLO title. */
  width: 100% !important;
  height: 100% !important;
}
.bench-slot:hover { transform: scale(1.06) !important; }
@media (max-width: 600px) {
  .bench-row { margin-top: 12px; gap: 10px; }
  .bench-slot { max-width: 78px; }
}

/* ============================================================
   IN-GAME SUBSTITUTION
   ============================================================ */
.battle-sub-btn {
  /* Lives as an inline flex item inside .battle-hand-header (right side),
     paired with the running score chip — no absolute positioning. Glass-
     morph: translucent cyan gradient + heavy blur + thin cyan inner ring
     instead of the solid 2 px white border. */
  flex-shrink: 0;
  z-index: 8;
  background: linear-gradient(135deg, rgba(94,211,255,0.42), rgba(58,141,222,0.42));
  color: #fff; font-weight: 900;
  border: 1px solid rgba(94,211,255,0.55);
  border-radius: 14px;
  padding: 5px 14px;
  font-family:'Orbitron',sans-serif; font-size: 10px; letter-spacing: 1.5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 0 0 1px rgba(94,211,255,0.12),
    0 4px 14px rgba(0,0,0,0.45),
    0 0 18px rgba(94,211,255,0.22);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  transition: transform 0.15s, box-shadow 0.15s;
}
.battle-sub-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 0 0 1px rgba(94,211,255,0.22),
    0 6px 18px rgba(0,0,0,0.55),
    0 0 24px rgba(94,211,255,0.42);
}
.battle-sub-btn.hidden { display: none; }
@media (max-width: 600px) { .battle-sub-btn { font-size: 9px; padding: 3px 10px; } }
.battle-sub-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.battle-sub-btn .sub-count {
  background: rgba(0,0,0,0.4);
  border-radius: 8px; padding: 0 6px; margin-left: 4px;
}
/* ═════════════════════════════════════════════════════════════════
   SUBSTITUTION / INCIDENT MODAL  —  full visual-quality rebuild
   Matches the stadium/glass-morph aesthetic of #screen-battle:
     • Glass shell with dark navy gradient + animated gold edge
     • Bracket-styled SALE / ENTRA headers (same model as JUGADA chip)
     • Player rows redesigned as proper "chips" with hero portrait
       circle, Orbitron name, position pill, and chunky gold OVR badge
     • Glass status badges (LESIONADO / EXPULSADO / SIN TURNOS) with
       blur + colored ring instead of flat fills
     • Spring-out animation on selection
   Pure CSS — JS markup (sub-modal-card / smc-* spans) unchanged.
   ════════════════════════════════════════════════════════════════ */
.modal-content:has(.sub-modal-grid) {
  max-height: 96vh;
  /* Whole modal scrolls naturally — no flex-with-min-height:0 trick
     (that compressed the card chips and squashed long names). The
     CONFIRMAR/CANCELAR footer stays visible via position:sticky on
     itself, not via a constrained scroll region. */
  overflow-y: auto;
  /* `hidden` on the X axis prevents a horizontal scrollbar from
     appearing — the sticky footer uses negative margins to bleed
     its gradient past the modal's horizontal padding, which without
     this clamp would surface as a horizontal scroll. */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 22px 18px 18px;
  background:
    radial-gradient(ellipse at top, rgba(255,210,74,0.10) 0%, transparent 55%),
    linear-gradient(180deg, rgba(12,18,32,0.96) 0%, rgba(6,9,18,0.98) 100%);
  border: 1.5px solid rgba(255,210,74,0.45);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 32px rgba(255,210,74,0.08),
    0 18px 48px rgba(0,0,0,0.7),
    0 0 60px rgba(255,210,74,0.18);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  position: relative;
}
/* Gold accent strip at the top of the modal, mirroring the gold border
   that separates the pitch from the hand-wrap in the match. */
.modal-content:has(.sub-modal-grid)::before {
  content: '';
  position: absolute;
  left: 18px; right: 18px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #ffd24a 25%, #ff8a00 50%, #ffd24a 75%, transparent);
  filter: blur(0.4px);
  border-radius: 2px;
}
.modal-content:has(.sub-modal-grid) h2 {
  margin: 0 0 6px;
  font-family: 'Orbitron', sans-serif;
  font-size: 17px;
  letter-spacing: 3px;
  font-weight: 900;
  color: #ffd24a;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 0 18px rgba(255,210,74,0.4);
}
.modal-content:has(.sub-modal-grid) > p {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.7);
}
/* #modal-body is the wrapper UI.modal injects content into. Plain
   block layout — no flex / no overflow / no min-height: 0 — so the
   chips inside the grid render at their natural height and long
   player names stay fully readable. */
.modal-content:has(.sub-modal-grid) > #modal-body {
  display: block;
  position: relative;
}
.sub-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 4px;
}
/* Action footer (CONFIRMAR / CANCELAR row) — position:sticky pins it
   to the bottom edge of the scrollable .modal-content viewport. As
   the user scrolls the cards, the footer stays glued to the visible
   bottom. When the content is short, it sits naturally at the end.
   The sticky offset matches the modal's own bottom padding so the
   buttons hug the bottom of the gold frame without floating away. */
.modal-content:has(.sub-modal-grid) > #modal-body > div:last-child {
  position: sticky;
  bottom: 0;
  margin-top: 14px !important;
  /* Extend horizontally past the modal's padding so the gradient
     bleed-out reaches the gold frame edge. */
  margin-left: -18px;
  margin-right: -18px;
  padding: 14px 18px 14px;
  background: linear-gradient(180deg,
    rgba(12, 18, 32, 0) 0%,
    rgba(12, 18, 32, 0.92) 35%,
    rgba(6, 9, 18, 0.99) 100%);
  z-index: 10;
}
.sub-modal-col {
  display: flex; flex-direction: column; gap: 6px;
  min-height: 0;
  padding: 8px 6px 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.25));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
/* Bracket-style section header — same DNA as the JUGADA chip floating
   over the marcador in the match. */
.sub-modal-title {
  position: relative;
  align-self: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 2.4px;
  font-weight: 900;
  color: #ffd24a;
  text-align: center;
  margin-bottom: 4px;
  padding: 4px 18px;
  background: linear-gradient(180deg, rgba(255,210,74,0.18), rgba(255,138,0,0.08));
  border: 1px solid rgba(255,210,74,0.45);
  border-radius: 999px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 2px 10px rgba(0,0,0,0.45),
    0 0 14px rgba(255,210,74,0.22);
}
/* ── Player row chip ──
   Three-piece layout: hero flag bubble → name+pos → OVR pill.
   Glass-morph background, subtle inner highlight, ample padding. */
.sub-modal-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(28,37,64,0.65), rgba(12,19,38,0.65));
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  cursor: pointer;
  transition:
    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background   0.18s ease;
  min-height: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 2px 8px rgba(0,0,0,0.35);
  position: relative;
  overflow: hidden;
}
/* Subtle diagonal sheen on every card — anchors the glass look. */
.sub-modal-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,0) 75%,
    rgba(255,255,255,0.04) 100%);
  pointer-events: none;
}
.sub-modal-card:hover {
  background: linear-gradient(180deg, rgba(255,210,74,0.18), rgba(255,138,0,0.10));
  border-color: rgba(255,210,74,0.55);
  transform: translateY(-1px);
}
.sub-modal-card.selected {
  background: linear-gradient(180deg, rgba(255,210,74,0.42), rgba(255,138,0,0.25));
  border-color: #ffd24a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 0 0 1px rgba(255,210,74,0.55),
    0 0 0 2px rgba(255,210,74,0.45),
    0 4px 18px rgba(0,0,0,0.5),
    0 0 28px rgba(255,210,74,0.55);
  transform: translateY(-1px) scale(1.02);
}
/* The `.selected` highlight must beat the red/blue backgrounds of
   `.is-maxed` and `.is-out` so the user can SEE that an unavailable
   starter is selected. !important + a stronger gold ring. */
.sub-modal-card.is-maxed.selected,
.sub-modal-card.is-out.selected,
.sub-modal-card.is-out-injury.selected,
.sub-modal-card.is-out-red.selected {
  background: linear-gradient(180deg, rgba(255,210,74,0.55), rgba(255,138,0,0.40)) !important;
  border-color: #ffd24a !important;
  box-shadow:
    inset 0 0 0 2px #ffd24a,
    0 0 0 3px rgba(255,210,74,0.55),
    0 0 28px rgba(255,210,74,0.7) !important;
  transform: translateY(-1px) scale(1.02);
}
.sub-modal-card.is-maxed.selected .smc-name,
.sub-modal-card.is-out.selected   .smc-name { opacity: 1; color: #fff; }

/* ── Player avatar (hero photo + tiny flag in corner) ──
   Replaces the previous flag-only bubble. .smc-flag is now the
   wrapper circle, .smc-photo is the headshot filling it, and
   .smc-flag-mini is a small flag chip overlaid at bottom-right. */
.sub-modal-card .smc-flag {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;     /* fallback for emoji-only render */
  background: linear-gradient(160deg, var(--smc-c1, #1c2540), var(--smc-c2, #0c1326));
  border: 1.5px solid rgba(255,210,74,0.55);
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 2px 6px rgba(0,0,0,0.55),
    0 0 10px rgba(255,210,74,0.20);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.sub-modal-card .smc-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;   /* faces tend to sit upper-middle */
  border-radius: 50%;
}
.sub-modal-card .smc-flag-mini {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  background: linear-gradient(160deg, #0c1326, #050913);
  border: 1.5px solid rgba(255,210,74,0.85);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.65);
  z-index: 2;
}
/* ── Name + position ──
   Word-level wrap (overflow-wrap: break-word, word-break: normal) so
   long names break at spaces (e.g. "Lautaro Martínez" → 2 lines, not
   mid-word). The position pill and status badges sit on their own
   lines underneath thanks to the JS-injected <br> + the column flex. */
.sub-modal-card .smc-name {
  flex: 1; min-width: 0;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700; font-size: 11px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  text-align: left;
  line-height: 1.25;
  letter-spacing: 0.4px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sub-modal-card .smc-name small {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 9px;
  letter-spacing: 1.3px;
  font-weight: 700;
  margin-top: 2px;
  padding: 1px 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 6px;
  color: rgba(255,255,255,0.85);
  text-shadow: none;
  opacity: 1;
}
/* ── Chunky OVR badge — same DNA as .pz-pos-chip in match. */
.sub-modal-card .smc-ovr {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 14px;
  color: #06141d;
  flex-shrink: 0;
  background: linear-gradient(135deg, #fff8d4 0%, #ffd24a 55%, #ff9a1a 100%);
  padding: 4px 9px;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 1px 0 rgba(0,0,0,0.4),
    0 3px 8px rgba(0,0,0,0.55);
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
  position: relative; z-index: 1;
}
.sub-modal-card.empty { opacity: 0.35; cursor: not-allowed; }

/* ── Starter at per-position usage cap (red border, soft red wash) ── */
.sub-modal-card.is-maxed {
  background: linear-gradient(180deg, rgba(255,75,75,0.18), rgba(120,20,20,0.30));
  border-color: rgba(255,75,75,0.65);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,75,75,0.25),
    0 2px 8px rgba(0,0,0,0.4);
}
.sub-modal-card.is-maxed .smc-name { opacity: 0.92; }
.smc-maxed-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 3px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 8px;
  letter-spacing: 0.6px;
  background: linear-gradient(135deg, rgba(255,75,75,0.92), rgba(170,30,30,0.92));
  color: #fff;
  padding: 2px 7px;
  border-radius: 6px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,75,75,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 1px 4px rgba(255,75,75,0.4);
}
/* ── OUT of match (red card / 2nd yellow / injury) ── */
.sub-modal-card.is-out {
  background: linear-gradient(180deg, rgba(255,40,40,0.28), rgba(110,10,10,0.42));
  border-color: rgba(255,75,75,0.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,75,75,0.4),
    0 2px 8px rgba(0,0,0,0.45);
}
.sub-modal-card.is-out-injury {
  background: linear-gradient(180deg, rgba(94,211,255,0.20), rgba(28,91,138,0.32));
  border-color: rgba(94,211,255,0.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(94,211,255,0.35),
    0 2px 8px rgba(0,0,0,0.45);
}
.sub-modal-card.is-out .smc-name { opacity: 0.92; }
.smc-out-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 3px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 8px;
  letter-spacing: 0.6px;
  color: #fff;
  padding: 2px 7px;
  border-radius: 6px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
.smc-out-badge.smc-out-red {
  background: linear-gradient(135deg, rgba(255,75,75,0.95), rgba(140,10,10,0.95));
  border: 1px solid rgba(255,75,75,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 1px 4px rgba(255,75,75,0.4);
}
.smc-out-badge.smc-out-injury {
  background: linear-gradient(135deg, rgba(94,211,255,0.95), rgba(28,91,138,0.95));
  color: #062035;
  text-shadow: none;
  border: 1px solid rgba(94,211,255,0.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 1px 4px rgba(94,211,255,0.45);
}
/* Confirm + Cancel buttons inside the sub modal — restyle to feel
   like proper match controls instead of flat primary buttons. */
.modal-content:has(.sub-modal-grid) .primary-btn {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  letter-spacing: 2.2px;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,210,74,0.55), rgba(255,138,0,0.55));
  border: 1.5px solid rgba(255,210,74,0.85);
  color: #06141d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 4px 14px rgba(0,0,0,0.5),
    0 0 22px rgba(255,210,74,0.35);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.modal-content:has(.sub-modal-grid) .primary-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 6px 18px rgba(0,0,0,0.6),
    0 0 32px rgba(255,210,74,0.55);
}
/* Cancel = slightly desaturated glass — sits next to confirm */
.modal-content:has(.sub-modal-grid) #sub-cancel {
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 4px 14px rgba(0,0,0,0.5);
}

/* ════════════════════════════════════════════════════════════════
   Penalty shootout — interactive modal that replaces the previous
   silent random sim. Shoots/saves are picked with the 3 big dir
   buttons; feedback flashes between turns.
   ════════════════════════════════════════════════════════════════ */
.pen-title {
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 18px; letter-spacing: 2px;
  margin: 4px 0 12px;
  background: linear-gradient(180deg, #fff8d6 0%, #ffd24a 60%, #ff8a00 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pen-score-row {
  display: flex; align-items: center; justify-content: center;
  gap: 22px;
  margin: 0 0 18px;
}
.pen-team {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 110px;
}
.pen-flag { font-size: 32px; line-height: 1; }
.pen-name {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700; font-size: 11px;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.85);
}
.pen-tally { font-size: 16px; letter-spacing: 1px; min-height: 18px; }
.pen-big {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 42px; line-height: 1;
  color: #ffd24a;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.pen-vs {
  font-size: 28px;
  opacity: 0.4;
  font-weight: 900;
}
.pen-prompt {
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 14px; letter-spacing: 1.2px;
  color: #fff;
  margin: 10px 0 18px;
}
.pen-buttons {
  display: flex; gap: 14px; justify-content: center;
  margin-bottom: 16px;
}
.pen-dir-btn {
  width: 84px; height: 84px;
  font-size: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a;
  border: 3px solid #fff;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(255,138,0,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.pen-dir-btn:hover  { transform: scale(1.06); }
.pen-dir-btn:active { transform: scale(0.94); }
.pen-dir-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pen-feedback {
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 14px; letter-spacing: 1px;
  min-height: 30px;
  margin-top: 6px;
  padding: 8px 14px;
  border-radius: 14px;
  transition: all 0.25s;
}
.pen-feedback.is-goal {
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  animation: penGoalPop 0.5s ease-out;
}
.pen-feedback.is-miss {
  background: linear-gradient(135deg, #ff4b4b, #c81e1e);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
@keyframes penGoalPop {
  0%   { transform: scale(0.85); }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@media (max-width: 480px) {
  .pen-dir-btn { width: 70px; height: 70px; font-size: 32px; }
  .pen-team { min-width: 90px; }
  .pen-big { font-size: 36px; }
}

/* ============================================================
   PENALTY CINEMATIC ANIMATION
   Fullscreen overlay shown between pick→resolution. Shooter card
   on the left, keeper card on the right, soccer goal in the middle.
   Countdown 3-2-1, then ball animates to shooter's pick + keeper
   dives to keeper's pick, then a GOL / PARADA / FUERA banner.
   ============================================================ */
.pen-anim-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,30,15,0.97), rgba(0,0,0,0.97));
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  animation: penAnimFadeIn 0.25s ease;
  padding: 16px;
  overflow: hidden;
}
.pen-anim-overlay.pen-anim-fadeout { animation: penAnimFadeOut 0.25s ease forwards; }
@keyframes penAnimFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes penAnimFadeOut { from { opacity: 1; } to { opacity: 0; } }

.pen-anim-stage {
  width: 100%; max-width: 620px;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
}

/* Cinematic title — chrome 3D text with perspective tilt + heavy shadow
   layers. Mimics the reference image's "LANZAMIENTO DE PENALES" stack:
   two lines, slightly skewed, with chrome gradient + depth shadows. */
.pen-anim-title {
  margin: 0; padding: 0;
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: clamp(26px, 7.2vw, 42px);
  letter-spacing: 2.5px;
  line-height: 0.95;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  perspective: 600px;
  animation: penTitleSlide 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.pen-anim-title span {
  display: inline-block;
  background: linear-gradient(180deg, #ffffff 0%, #f1f1f1 28%, #bcbcbc 52%, #f5f5f5 65%, #d4d4d4 90%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 3D stacked shadows behind the text for the chrome-extrusion feel */
  filter:
    drop-shadow(0 2px 0 #4f4f4f)
    drop-shadow(0 4px 0 #2a2a2a)
    drop-shadow(0 6px 0 #181818)
    drop-shadow(0 10px 12px rgba(0,0,0,0.7))
    drop-shadow(0 0 22px rgba(255,210,74,0.55));
  transform: rotateX(14deg);
  transform-origin: 50% 100%;
}
@keyframes penTitleSlide {
  from { opacity: 0; transform: translateY(-20px) scale(0.7); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Cards row — shooter | VS | keeper. 3D perspective on the row so the
   tilted-toward-each-other cards have depth instead of looking flat. */
.pen-anim-cards-row {
  display: flex; align-items: stretch; justify-content: center;
  gap: 0; width: 100%;
  position: relative;
  perspective: 1100px;
  perspective-origin: 50% 60%;
}
.pen-anim-card-slot {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px;
  max-width: 210px;
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  transition: transform 0.4s ease;
}
/* Shooter tilts to the RIGHT (toward the keeper), keeper tilts to the
   LEFT (toward the shooter) — looks like they're squaring up. */
.pen-anim-card-shooter { transform: rotateY(14deg) translateX(8px) translateZ(-4px); transform-origin: right center; }
.pen-anim-card-keeper  { transform: rotateY(-14deg) translateX(-8px) translateZ(-4px); transform-origin: left  center; }
/* Make the card itself larger inside the slot */
.pen-anim-card-slot .card.panini.small { width: 100%; max-width: 100%; }
.pen-anim-card-slot .card.panini { transform: scale(1.05); transform-origin: top center; }
/* Themed glow behind the card — blue for shooter, red for keeper, like the
   reference. Sits behind via z-index so the card sits crisp on top. */
.pen-anim-card-glow {
  position: absolute;
  inset: 28px -6px -6px -6px;
  border-radius: 20px;
  z-index: -1;
  filter: blur(14px);
  opacity: 0.85;
}
.pen-anim-card-shooter .pen-anim-card-glow {
  background: radial-gradient(ellipse at center, rgba(60,140,255,0.7), rgba(20,40,120,0.35) 60%, transparent 80%);
}
.pen-anim-card-keeper .pen-anim-card-glow {
  background: radial-gradient(ellipse at center, rgba(255,80,80,0.7), rgba(120,20,20,0.35) 60%, transparent 80%);
}
.pen-anim-card-label {
  font-family: 'Orbitron', sans-serif; font-weight: 800;
  font-size: 11px; letter-spacing: 1.2px;
  color: #ffd24a; text-shadow: 0 0 6px rgba(255,210,74,0.5);
}
/* Role badge — coloured pill above the card */
.pen-anim-role-badge {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 11px; letter-spacing: 1.4px;
  padding: 5px 14px;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
  border: 1px solid rgba(255,255,255,0.18);
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  white-space: nowrap;
}
.pen-anim-role-shooter {
  background: linear-gradient(180deg, #4f8eff 0%, #1f54c8 100%);
}
.pen-anim-role-keeper {
  background: linear-gradient(180deg, #ff5f5f 0%, #b81e1e 100%);
}
.pen-anim-card-mini {
  width: 100%; padding: 8px 6px 6px;
  background: linear-gradient(180deg, rgba(20,30,55,0.95), rgba(8,14,28,0.95));
  border: 2px solid rgba(255,210,74,0.7);
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  position: relative;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), inset 0 0 18px rgba(255,210,74,0.08);
  animation: penCardSlideIn 0.4s ease both;
}
.pen-anim-card-slot:nth-child(1) .pen-anim-card-mini { animation-delay: 0s; transform-origin: right center; }
.pen-anim-card-slot:nth-child(3) .pen-anim-card-mini { animation-delay: 0.08s; transform-origin: left center; }
@keyframes penCardSlideIn {
  from { opacity: 0; transform: translateY(10px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pen-anim-card-flag { font-size: 22px; line-height: 1; }
.pen-anim-card-photo {
  width: 84px; height: 84px;
  object-fit: cover; border-radius: 50%;
  border: 2px solid #ffd24a;
  background: #1a2240;
}
.pen-anim-card-photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
}
/* Hidden by default; shown when the <img> sibling fires onerror */
.pen-anim-card-photo-fallback { display: none; }
.pen-anim-card-photo-fallback.pen-anim-card-photo-fallback-show {
  display: flex; align-items: center; justify-content: center;
}
.pen-anim-card-name {
  font-family: 'Orbitron', sans-serif; font-weight: 800;
  font-size: 11px; color: #fff; letter-spacing: 0.5px;
  text-align: center;
}
.pen-anim-card-stat {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 13px; color: #ffd24a;
  text-shadow: 0 0 6px rgba(255,210,74,0.6);
}
/* Rarity-tinted borders */
.pen-anim-card-leyenda .pen-anim-card-mini  { border-color: #ffd24a; box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 22px rgba(255,210,74,0.4), inset 0 0 18px rgba(255,210,74,0.15); }
.pen-anim-card-estrella .pen-anim-card-mini { border-color: #ff8a00; }
.pen-anim-card-oro .pen-anim-card-mini      { border-color: #c89a3a; }
.pen-anim-card-plata .pen-anim-card-mini    { border-color: #9aa0aa; }
.pen-anim-card-comun .pen-anim-card-mini    { border-color: #6b7280; }

.pen-anim-vs {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100px; height: 100px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  z-index: 5;
  pointer-events: none;
}
.pen-anim-vs span {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 56px; line-height: 1;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #ffe9a0 0%, #ffd24a 30%, #ff8a00 70%, #c8520a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 14px rgba(255,210,74,0.9))
    drop-shadow(0 4px 8px rgba(0,0,0,0.7))
    drop-shadow(0 0 2px #4a2a00);
  animation: penVsPulse 1.2s ease-in-out infinite alternate;
}
/* Energy rays radiating from VS — pseudo-elements */
.pen-anim-vs::before,
.pen-anim-vs::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,210,74,0.55) 0%, rgba(255,138,0,0.25) 35%, transparent 70%);
  z-index: -1;
  animation: penVsRays 1.4s ease-in-out infinite alternate;
}
.pen-anim-vs::after {
  inset: -14px;
  background: conic-gradient(from 0deg, rgba(255,210,74,0.6), transparent 25%, rgba(255,210,74,0.6) 50%, transparent 75%, rgba(255,210,74,0.6));
  filter: blur(6px);
  animation: penVsRays 2.5s linear infinite, penVsSpin 4s linear infinite;
  opacity: 0.5;
}
@keyframes penVsPulse {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}
@keyframes penVsRays {
  from { opacity: 0.6; transform: scale(0.95); }
  to   { opacity: 1;   transform: scale(1.15); }
}
@keyframes penVsSpin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Goal scene */
.pen-anim-scene {
  position: relative;
  width: 100%; aspect-ratio: 16/9;
  background:
    /* Crowd silhouette band (dark dots) */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.45) 0 5px,
      rgba(255,255,255,0.04) 5px 9px,
      rgba(0,0,0,0.45) 9px 14px,
      rgba(255,255,255,0.05) 14px 18px) 0 0/auto 14% no-repeat,
    /* Sky + pitch gradient */
    linear-gradient(180deg, #1a1f2e 0%, #1a1f2e 12%, #0a3d11 24%, #176b1f 65%, #2da836 100%);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6), inset 0 0 60px rgba(0,0,0,0.3);
}
/* Subtle stadium lighting + perspective floor lines */
.pen-anim-stadium-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    /* Two diagonal stadium spotlights from top corners */
    radial-gradient(ellipse 50% 80% at 18% -10%, rgba(255,255,255,0.18), transparent 55%),
    radial-gradient(ellipse 50% 80% at 82% -10%, rgba(255,255,255,0.18), transparent 55%),
    /* Penalty arc on the grass */
    radial-gradient(ellipse 75% 22% at 50% 95%, transparent 78%, rgba(255,255,255,0.35) 79%, rgba(255,255,255,0.35) 80%, transparent 81%);
  z-index: 0;
}
.pen-anim-scene > .pen-anim-goal,
.pen-anim-scene > .pen-anim-whistle { z-index: 2; }
/* Goal posts + net */
.pen-anim-goal {
  position: absolute;
  left: 14%; right: 14%; top: 12%; bottom: 26%;
  border: 7px solid #ffffff;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.10) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.40));
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.pen-anim-goal-shadow {
  position: absolute;
  left: -7%; right: -7%; bottom: -28px;
  height: 24px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.5), transparent 70%);
  filter: blur(4px);
}
/* Keeper figure */
.pen-anim-keeper-figure {
  position: absolute;
  bottom: 4px; left: 50%;
  width: 56px; height: 56px;
  font-size: 44px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transform: translateX(-50%);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7));
  z-index: 2;
}
.pen-anim-keeper-figure[data-pos="L"].pen-anim-keeper-dive { transform: translateX(-220%) rotate(-30deg); }
.pen-anim-keeper-figure[data-pos="C"].pen-anim-keeper-dive { transform: translateX(-50%) scale(1.1); }
.pen-anim-keeper-figure[data-pos="R"].pen-anim-keeper-dive { transform: translateX(120%) rotate(30deg); }
/* Ball */
.pen-anim-ball {
  position: absolute;
  bottom: -45px; left: 50%;
  width: 36px; height: 36px;
  font-size: 36px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.7));
  z-index: 3;
}
.pen-anim-ball-shoot {
  transition: bottom 0.5s cubic-bezier(0.6,0.0,0.7,1),
              left   0.5s cubic-bezier(0.6,0.0,0.7,1),
              transform 0.5s ease-out;
}
.pen-anim-ball[data-pos="L"].pen-anim-ball-shoot { left: 22%; bottom: 60%; transform: translateX(-50%) rotate(540deg); }
.pen-anim-ball[data-pos="C"].pen-anim-ball-shoot { left: 50%; bottom: 60%; transform: translateX(-50%) rotate(540deg); }
.pen-anim-ball[data-pos="R"].pen-anim-ball-shoot { left: 78%; bottom: 60%; transform: translateX(-50%) rotate(540deg); }
/* Bad shot: ball flies over the bar */
.pen-anim-ball.pen-anim-ball-out { bottom: 105% !important; transform: translateX(-50%) rotate(900deg) !important; }

/* Referee whistle — replaces the old 3-2-1 countdown. Shown for 1 second
   while the whistle sound plays, then fades out as the shot fires. */
.pen-anim-whistle {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6));
  animation: penWhistlePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
             penWhistlePulse 0.45s ease-in-out 0.4s infinite alternate;
}
.pen-anim-whistle-svg {
  width: clamp(120px, 28%, 180px);
  height: auto;
  display: block;
  /* The PNG is photorealistic — drop a yellow halo behind to keep the
     glow vibe from the old SVG-with-wave-lines. */
  filter:
    drop-shadow(0 0 22px rgba(255,210,74,0.7))
    drop-shadow(0 4px 8px rgba(0,0,0,0.6));
}
.pen-anim-whistle.pen-anim-whistle-fade {
  animation: penWhistleOut 0.25s ease-out forwards;
}
@keyframes penWhistlePop {
  0%   { transform: translate(-50%,-50%) scale(0.2) rotate(-12deg); opacity: 0; }
  60%  { transform: translate(-50%,-50%) scale(1.15) rotate(4deg);  opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1)    rotate(0deg);  opacity: 1; }
}
@keyframes penWhistlePulse {
  from { transform: translate(-50%,-50%) scale(1);    }
  to   { transform: translate(-50%,-50%) scale(1.06); }
}
@keyframes penWhistleOut {
  from { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%,-50%) scale(0.6) rotate(20deg); }
}
/* Sound wave lines emanating from the whistle */
.pen-anim-whistle-waves path {
  animation: penWhistleWave 0.55s ease-out infinite alternate;
  transform-origin: 90px 45px;
}
.pen-anim-whistle-waves path:nth-child(2) { animation-delay: 0.08s; }
.pen-anim-whistle-waves path:nth-child(3) { animation-delay: 0.16s; }
@keyframes penWhistleWave {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(2px);  }
}

/* Result banner — chrome-tinted 3D text matching the title's depth style.
   Each variant (GOL/PARADA/FUERA) uses a coloured gradient + glow but
   shares the stacked drop-shadow recipe for that extruded look. */
.pen-anim-result {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: clamp(46px, 11vw, 64px);
  letter-spacing: 4px;
  text-align: center;
  min-height: 72px;
  display: flex; align-items: center; justify-content: center;
  perspective: 600px;
  text-transform: uppercase;
}
/* Apply the 3D chrome treatment to the INNER <span>, not the flex parent —
   background-clip:text breaks when combined with display:flex + filter on
   the same element in WebKit. Wrapping in a span lets the inner element be
   inline-block with the clip/filter while the parent keeps centering. */
.pen-anim-result-goal span,
.pen-anim-result-save span,
.pen-anim-result-out span {
  display: inline-block;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: rotateX(12deg);
  transform-origin: 50% 100%;
  animation: penResultPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* GOL — bright green chrome */
.pen-anim-result-goal span {
  background-image: linear-gradient(180deg, #d8ffd8 0%, #8fee8f 30%, #2ec23a 65%, #95f095 100%);
  filter:
    drop-shadow(0 2px 0 #1a6b1f)
    drop-shadow(0 4px 0 #0e3812)
    drop-shadow(0 6px 0 #061806)
    drop-shadow(0 12px 14px rgba(0,0,0,0.7))
    drop-shadow(0 0 26px rgba(94,216,94,0.9));
}
/* PARADA — cyan/blue chrome */
.pen-anim-result-save span {
  background-image: linear-gradient(180deg, #d8f1ff 0%, #8fdcff 30%, #2da8e0 65%, #95e0ff 100%);
  filter:
    drop-shadow(0 2px 0 #1a5a78)
    drop-shadow(0 4px 0 #0e3045)
    drop-shadow(0 6px 0 #06141d)
    drop-shadow(0 12px 14px rgba(0,0,0,0.7))
    drop-shadow(0 0 26px rgba(94,211,255,0.9));
}
/* FUERA — red chrome */
.pen-anim-result-out span {
  background-image: linear-gradient(180deg, #ffdada 0%, #ff8e8e 30%, #d83030 65%, #ff9595 100%);
  filter:
    drop-shadow(0 2px 0 #781a1a)
    drop-shadow(0 4px 0 #450e0e)
    drop-shadow(0 6px 0 #1d0606)
    drop-shadow(0 12px 14px rgba(0,0,0,0.7))
    drop-shadow(0 0 26px rgba(255,107,107,0.9));
}
@keyframes penResultPop {
  0%   { opacity: 0; transform: rotateX(12deg) scale(0.3); }
  60%  { opacity: 1; transform: rotateX(12deg) scale(1.25); }
  100% { opacity: 1; transform: rotateX(12deg) scale(1); }
}

/* ============================================================
   PENALTY PICKER — clickable goal zones with the same cinematic
   look as the resolution animation. Title + cards + VS + goal,
   but the goal frame is split into 3 interactive zones (L/C/R).
   ============================================================ */
.pen-pick-stage {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; width: 100%; max-width: 620px; margin: 0 auto;
}
.pen-pick-title { font-size: clamp(20px, 5.4vw, 28px); margin-bottom: 4px; }
.pen-pick-score { width: 100%; }
.pen-pick-prompt {
  font-family: 'Orbitron', sans-serif; font-weight: 800;
  font-size: clamp(11px, 3vw, 14px); letter-spacing: 1.2px;
  color: #ffd24a;
  text-shadow: 0 0 10px rgba(255,210,74,0.55), 0 2px 4px rgba(0,0,0,0.7);
  text-align: center;
  text-transform: uppercase;
  padding: 0 12px;
}
/* The picker reuses .pen-anim-scene / .pen-anim-goal — same stadium +
   net look — but overlays 3 interactive zone buttons inside the goal. */
.pen-pick-scene { width: 100%; }
.pen-pick-goal {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  padding: 0; gap: 0;
}
.pen-pick-zone {
  flex: 1 1 33.33%;
  position: relative;
  border: 2px dashed rgba(255,255,255,0.28);
  border-top: none; border-bottom: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease, border-color 0.18s ease;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  color: inherit;
}
.pen-pick-zone:first-child { border-left: none; }
.pen-pick-zone:last-child  { border-right: none; }
.pen-pick-zone:hover,
.pen-pick-zone:focus-visible {
  background: radial-gradient(ellipse at center, rgba(255,210,74,0.28), transparent 70%);
  border-color: rgba(255,210,74,0.7);
  outline: none;
}
.pen-pick-zone:active {
  transform: scale(0.96);
  background: radial-gradient(ellipse at center, rgba(255,210,74,0.45), transparent 70%);
}
.pen-pick-zone:disabled {
  cursor: not-allowed; opacity: 0.4;
}
.pen-pick-arrow {
  font-size: clamp(34px, 9vw, 48px);
  color: #ffffff;
  filter: drop-shadow(0 0 8px rgba(255,210,74,0.6)) drop-shadow(0 4px 6px rgba(0,0,0,0.7));
  pointer-events: none;
  transition: transform 0.18s ease;
}
.pen-pick-zone:hover .pen-pick-arrow,
.pen-pick-zone:focus-visible .pen-pick-arrow {
  transform: scale(1.18);
}

/* Phones */
@media (max-width: 480px) {
  .pen-anim-cards-row { gap: 10px; }
  .pen-anim-card-photo { width: 64px; height: 64px; }
  .pen-anim-card-name { font-size: 10px; }
  .pen-anim-vs { font-size: 16px; }
  .pen-anim-countdown { font-size: 88px; }
  .pen-anim-result { font-size: 34px; min-height: 48px; }
  .pen-anim-keeper-figure { width: 44px; height: 44px; font-size: 34px; }
  .pen-anim-ball { width: 28px; height: 28px; font-size: 28px; }
}

/* ─── PICKER NO-SCROLL on short mobile viewports ────────────────────────
   iPhone SE (667h) and similar tall-narrow phones overflow the modal
   when the picker stage is at its desktop sizes. These rules tighten
   gaps, scale cards down, compact the score row and shorten the goal
   so everything fits in the visible modal area without scrolling. */
@media (max-height: 900px) {
  .pen-pick-stage { gap: 6px; }
  .pen-pick-title { font-size: clamp(16px, 4.6vw, 20px); margin-bottom: 0; }
  .pen-pick-title span { filter:
    drop-shadow(0 1px 0 #4f4f4f)
    drop-shadow(0 2px 0 #2a2a2a)
    drop-shadow(0 3px 0 #181818)
    drop-shadow(0 5px 6px rgba(0,0,0,0.7))
    drop-shadow(0 0 12px rgba(255,210,74,0.4));
  }
  .pen-pick-prompt { font-size: 10px; padding: 0; }
  .pen-pick-score .pen-score-row { gap: 4px; padding: 4px 8px; }
  .pen-pick-score .pen-team { gap: 0; min-width: 70px; }
  .pen-pick-score .pen-flag { font-size: 18px; }
  .pen-pick-score .pen-name { font-size: 8px; }
  .pen-pick-score .pen-tally { font-size: 8px; line-height: 1; }
  .pen-pick-score .pen-big { font-size: 20px; }
  .pen-pick-score .pen-vs  { font-size: 10px; }
  .pen-anim-card-slot { gap: 2px; max-width: 140px; }
  .pen-anim-role-badge { font-size: 8px; padding: 2px 7px; letter-spacing: 0.6px; }
  .pen-anim-card-slot .card.panini { transform: scale(0.58); transform-origin: top center; }
  .pen-anim-cards-row { margin-bottom: -82px; } /* absorb the scaled-down empty space */
  .pen-anim-vs { width: 56px; height: 56px; }
  .pen-anim-vs span { font-size: 32px; }
  /* Compress the goal: shorter scene → less vertical real estate */
  .pen-pick-scene { aspect-ratio: 24 / 9; }
  .pen-pick-goal { left: 8%; right: 8%; top: 10%; bottom: 16%; }
  .pen-pick-arrow { font-size: 28px; }
}
@media (max-height: 640px) {
  /* Extra-tight squeeze for very small phones (e.g. landscape orientation) */
  .pen-anim-card-slot .card.panini { transform: scale(0.56); }
  .pen-anim-cards-row { margin-bottom: -82px; }
  .pen-pick-title { font-size: 14px; }
  .pen-pick-score { display: none; }
}
/* Phones — switch to a SINGLE column (SALE list, then ENTRA list)
   so each player chip has the full modal width. With two columns at
   ≤375 px the chips were ~150 px wide → names wrapped weirdly and
   badges got cropped. One wide column reads better and matches the
   visual quality of the rest of the match UI. The grid scrolls
   vertically inside the modal frame, header + buttons stay pinned. */
@media (max-width: 600px) {
  .modal-content:has(.sub-modal-grid) {
    padding: 16px 14px 14px;
    max-height: 94vh;
    width: calc(100vw - 24px);
  }
  .modal-content:has(.sub-modal-grid) h2 { font-size: 15px; letter-spacing: 2px; }
  .modal-content:has(.sub-modal-grid) > p { font-size: 10.5px; margin-bottom: 6px; }
  .sub-modal-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .sub-modal-col { padding: 8px 8px 6px; }
  .sub-modal-card { padding: 8px 12px; gap: 12px; }
  .sub-modal-card .smc-flag { width: 32px; height: 32px; font-size: 19px; }
  .sub-modal-card .smc-name { font-size: 12px; }
  .sub-modal-card .smc-name small { font-size: 9px; }
  .sub-modal-card .smc-ovr  { font-size: 14px; padding: 4px 11px; }
  .sub-modal-title { font-size: 10px; letter-spacing: 2px; padding: 4px 16px; }
  .smc-maxed-badge, .smc-out-badge { font-size: 9px; padding: 2px 8px; }
  .modal-content:has(.sub-modal-grid) .primary-btn { padding: 9px 18px; font-size: 12px; }
}

/* Version footer on the main menu — small total-launches counter */
.version-footer {
  text-align: center;
  margin: 18px auto 4px;
  font-family:'Orbitron',sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.35);
  user-select: none;
}
.version-footer #visit-counter {
  color: #ffd24a;
  font-weight: 700;
}
.version-author {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(255,210,74,0.55);
  font-weight: 800;
}

/* ============================================================
   ONLINE MATCH — host code + join input
   ============================================================ */
.online-code-display {
  margin: 18px auto 8px;
  padding: 22px 18px;
  background: linear-gradient(135deg, rgba(255,210,74,0.12), rgba(255,138,0,0.06));
  border: 2px solid rgba(255,210,74,0.45);
  border-radius: 16px;
  font-family: 'Orbitron', 'Courier New', monospace;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 6px;
  color: #ffd24a;
  text-align: center;
  text-shadow: 0 0 24px rgba(255,210,74,0.5);
  user-select: all;
  max-width: 340px;
}
.online-code-input {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 14px auto 0;
  padding: 18px 14px;
  background: rgba(0,0,0,0.45);
  border: 2px solid rgba(255,210,74,0.35);
  border-radius: 14px;
  color: #ffd24a;
  font-family: 'Orbitron', 'Courier New', monospace;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 6px;
  text-align: center;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.online-code-input:focus {
  border-color: #ffd24a;
  box-shadow: 0 0 0 3px rgba(255,210,74,0.18);
}
.online-code-input::placeholder {
  color: rgba(255,210,74,0.25);
  letter-spacing: 6px;
}

/* Share row — WhatsApp + Copy buttons under the code display */
.online-share-row {
  display: flex;
  gap: 8px;
  max-width: 340px;
  margin: 12px auto 0;
}
.online-share-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 8px;
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.online-share-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.online-share-btn:active { transform: translateY(0); filter: brightness(0.95); }
.online-share-ico { font-size: 16px; }
.online-share-wa {
  background: linear-gradient(135deg, #25d366, #128c7e);
  box-shadow: 0 4px 14px rgba(37,211,102,0.45);
}
.online-share-copy {
  background: linear-gradient(135deg, #5e8aff, #2e5bd6);
  box-shadow: 0 4px 14px rgba(94,138,255,0.45);
}

/* QR code under the share row — tap-to-scan handoff for the rival's phone */
.online-qr-wrap {
  margin: 16px auto 0;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.online-qr-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(255,210,74,0.85);
  text-transform: uppercase;
}
.online-qr-box {
  background: #fff;
  padding: 10px;
  border-radius: 12px;
  width: 168px;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.online-qr-box svg { width: 100%; height: 100%; display: block; }

/* Small spinner — reused across HOST/PEER waiting screens */
.online-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 4px solid rgba(255,210,74,0.15);
  border-top-color: #ffd24a;
  animation: online-spin 0.9s linear infinite;
  margin: 18px auto;
}
@keyframes online-spin { to { transform: rotate(360deg); } }

/* Lineup picker — grid of 11 cards, 5 selectable */
.online-lineup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
  margin: 12px 0;
  max-height: 50vh;
  overflow-y: auto;
  padding: 4px;
}
.online-lineup-tile {
  background: none; border: 2px solid transparent; border-radius: 10px;
  padding: 4px; cursor: pointer; position: relative; transition: all 0.15s;
}
.online-lineup-tile.is-picked {
  border-color: #ffd24a;
  box-shadow: 0 0 0 3px rgba(255,210,74,0.2), 0 4px 14px rgba(255,210,74,0.35);
  background: rgba(255,210,74,0.06);
}
.lineup-tile-stat {
  font-size: 10px; letter-spacing: 1px; color: #ffd24a;
  text-align: center; margin-top: 4px; font-weight: 800;
}

/* Round play — pick 1 of your 5 cards */
.online-round-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.online-round-card {
  background: none; border: 2px solid transparent; border-radius: 12px;
  padding: 4px; cursor: pointer; position: relative; transition: all 0.15s;
}
.online-round-card.is-picked {
  border-color: #ffd24a;
  box-shadow: 0 0 0 3px rgba(255,210,74,0.25), 0 6px 18px rgba(255,210,74,0.4);
}
.online-round-card:disabled { cursor: default; }
.online-round-stat {
  font-size: 11px; letter-spacing: 1px; color: #ffd24a;
  text-align: center; margin-top: 4px; font-weight: 800;
}

/* Scoreboard ribbon — used everywhere */
.online-scoreboard {
  display: flex; justify-content: center; align-items: center; gap: 14px;
  font-family: 'Orbitron', sans-serif;
  font-size: 18px; letter-spacing: 2px;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15));
  border: 1px solid rgba(255,210,74,0.25);
  border-radius: 14px;
  margin: 8px auto;
  width: fit-content;
}
.online-scoreboard strong {
  color: #ffd24a;
  font-size: 24px;
  font-weight: 900;
}

/* Round reveal — both cards side by side */
.online-round-reveal {
  display: flex; justify-content: space-around; align-items: center;
  gap: 8px; margin: 16px 0;
}
.round-side { text-align: center; flex: 1; }
.round-side-label {
  font-size: 11px; letter-spacing: 2px; color: #ffd24a;
  font-weight: 800; margin-bottom: 6px;
}
.round-side-pow {
  font-size: 13px; letter-spacing: 1px; color: #ffd24a;
  font-weight: 800; margin-top: 6px;
}
.round-vs {
  font-family: 'Orbitron', sans-serif; font-size: 18px; font-weight: 900;
  color: rgba(255,255,255,0.4);
}
.round-result-tag {
  display: inline-block; margin-top: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
}
.round-result-tag.is-win  { background: rgba(70,224,122,0.18); color: #46e07a; }
.round-result-tag.is-loss { background: rgba(255,75,75,0.18); color: #ff7575; }
.round-result-tag.is-draw { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.6); }

/* ============================================================
   ONLINE BATTLE — blind rival placeholder + waiting overlay
   ============================================================ */
/* Render the rival's hidden picks in the SAME horizontal layout the real
   cards use so the reveal transition is seamless. Cards are centered just
   like Battle.renderRivalDefense does for the real cards. */
.online-blind-row {
  /* #rival-defense is a CSS grid with repeat(3, 1fr). Without spanning all
     three columns, this row collapses into a single cell and "justify-content:
     center" only centers the cards inside ~1/3 of the screen, not the full
     width. The 1 / -1 span makes the row reach edge to edge so the cards land
     on the actual screen midline. */
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 46px;
}
.online-blind-card {
  width: 60px; height: 84px;
  perspective: 600px;
}
.online-blind-card-inner {
  width: 100%; height: 100%;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,210,74,0.35), transparent 55%),
    linear-gradient(160deg, #1e293a 0%, #0c1422 100%);
  border: 2px solid rgba(255,210,74,0.4);
  box-shadow: 0 6px 14px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  animation: blind-pulse 2.4s ease-in-out infinite;
}
.online-blind-card-inner::before {
  content: '';
  position: absolute; inset: 6px;
  border-radius: 8px;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,210,74,0.08) 0 2px, transparent 2px 8px);
  opacity: 0.6;
}
.online-blind-mark {
  font-family: 'Orbitron', sans-serif;
  font-size: 36px; font-weight: 900;
  color: rgba(255,210,74,0.55);
  text-shadow: 0 0 16px rgba(255,210,74,0.4);
  z-index: 1;
}
@keyframes blind-pulse {
  0%,100% { transform: scale(1);    box-shadow: 0 6px 14px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08); }
  50%     { transform: scale(1.04); box-shadow: 0 8px 22px rgba(255,210,74,0.25), inset 0 1px 0 rgba(255,255,255,0.12); }
}

/* Big "waiting for opponent" overlay shown after we press JUGAR */
.online-wait-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,5,15,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: all;
}
.online-wait-overlay.is-visible { opacity: 1; }
.online-wait-card {
  background: linear-gradient(180deg, #0e1830 0%, #08111f 100%);
  border: 2px solid rgba(255,210,74,0.45);
  border-radius: 22px;
  padding: 32px 28px 26px;
  max-width: 360px;
  width: calc(100% - 40px);
  text-align: center;
  box-shadow:
    0 24px 70px rgba(0,0,0,0.7),
    0 0 60px rgba(255,210,74,0.18),
    inset 0 1px 0 rgba(255,255,255,0.06);
  animation: wait-card-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes wait-card-in {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.online-wait-spinner-large {
  width: 56px; height: 56px; border-radius: 50%;
  border: 5px solid rgba(255,210,74,0.15);
  border-top-color: #ffd24a;
  margin: 0 auto 18px;
  animation: online-spin 0.9s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255,210,74,0.35));
}
.online-wait-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 2.5px;
  color: #ffd24a;
  margin: 0 0 8px;
  text-shadow: 0 0 16px rgba(255,210,74,0.4);
}
.online-wait-sub {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,0.7);
  margin: 0;
}

/* 45-second turn timer — fixed at top center of the battle screen */
.battle-online-timer {
  position: fixed;
  top: calc(env(safe-area-inset-top, 8px) + 40px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  width: min(280px, calc(100vw - 24px));
  padding: 10px 14px 12px;
  background: linear-gradient(180deg, #0e1830 0%, #08111f 100%);
  border: 2px solid rgba(255,210,74,0.45);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.55), 0 0 30px rgba(255,210,74,0.18);
  text-align: center;
  pointer-events: none;
}
.battle-online-timer .bot-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: rgba(255,210,74,0.7);
  font-weight: 800;
  text-transform: uppercase;
}
.battle-online-timer .bot-numbers {
  font-family: 'Orbitron', monospace;
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  color: #ffd24a;
  text-shadow: 0 0 14px rgba(255,210,74,0.45);
  margin: 4px 0 6px;
}
.battle-online-timer .bot-bar {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.battle-online-timer .bot-bar-fill {
  height: 100%;
  width: 100%;
  background: #46e07a;
  border-radius: 999px;
  transition: width 0.2s linear, background 0.3s;
}
.battle-online-timer.is-urgent {
  animation: bot-pulse 0.55s ease-in-out infinite alternate;
}
@keyframes bot-pulse {
  from { box-shadow: 0 8px 22px rgba(0,0,0,0.55), 0 0 30px rgba(255,82,82,0.25); }
  to   { box-shadow: 0 8px 22px rgba(0,0,0,0.55), 0 0 50px rgba(255,82,82,0.55); border-color: rgba(255,82,82,0.7); }
}

/* Round head — role pill + mini scoreboard side by side */
.online-round-head {
  display: flex; justify-content: space-between; align-items: center;
  margin: -4px 0 8px; gap: 8px;
}
.online-round-pill {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px; letter-spacing: 2px; font-weight: 900;
  padding: 8px 14px; border-radius: 999px;
  border: 2px solid currentColor;
}
.online-round-pill.is-attack {
  background: rgba(255,210,74,0.15);
  color: #ffd24a;
  box-shadow: 0 0 18px rgba(255,210,74,0.25);
}
.online-round-pill.is-defense {
  background: rgba(94,211,255,0.15);
  color: #5ed3ff;
  box-shadow: 0 0 18px rgba(94,211,255,0.25);
}
.online-scoreboard-mini {
  margin: 0; padding: 5px 10px; font-size: 14px;
}
.online-scoreboard-mini strong { font-size: 16px; }

/* 15-second timer bar + countdown text */
.online-timer-bar {
  width: 100%; height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0 4px;
}
.online-timer-fill {
  height: 100%; width: 100%;
  background: #46e07a;
  border-radius: 999px;
  transition: width 0.1s linear, background 0.3s;
}
.online-timer-text {
  text-align: center;
  font-family: 'Orbitron', monospace;
  font-size: 18px; font-weight: 900;
  color: rgba(255,255,255,0.85);
  margin-bottom: 8px;
}

/* ============================================================
   IN-BATTLE CARD PREVIEW (long-press hand tile to enlarge)
   ============================================================ */
.battle-card-preview {
  position: fixed; inset: 0;
  z-index: 4500;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 20px;
}
.battle-card-preview.show { display: flex; }
.battle-card-preview .bcp-card-wrap {
  perspective: 1200px;
}
.battle-card-preview .card.panini {
  width: min(360px, 80vw);
  height: auto;
  aspect-ratio: 5/7;
  box-shadow: 0 30px 80px rgba(0,0,0,0.85), 0 0 60px rgba(255,210,74,0.4);
}

/* Sub button switches palette during defense so the player notices it stays available */
.battle-sub-btn.defense-phase {
  background: linear-gradient(135deg, #ff8a8a, #c81e1e);
  box-shadow: 0 6px 16px rgba(200,30,30,0.55), 0 0 18px rgba(255,75,75,0.4);
}

/* ============================================================
   GAME MODE SELECTION + KILLER mode result UI
   ============================================================ */
.mode-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-top: 14px;
}
@media (max-width: 600px) { .mode-grid { grid-template-columns: 1fr; } }
.mode-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  text-align: center;
}
.mode-card.mode-normal {
  background: linear-gradient(160deg, rgba(58,141,222,0.25), rgba(20,28,50,0.95));
  border: 2px solid rgba(94,211,255,0.6);
  color: #fff;
}
.mode-card.mode-killer {
  background: linear-gradient(160deg, rgba(255,75,75,0.3), rgba(60,8,8,0.95));
  border: 2px solid rgba(255,75,75,0.7);
  color: #fff;
  box-shadow: 0 0 18px rgba(255,75,75,0.35);
}
.mode-card.mode-online-host {
  background: linear-gradient(160deg, rgba(58,141,222,0.25), rgba(20,28,50,0.95));
  border: 2px solid rgba(94,211,255,0.6);
  color: #fff;
}
.mode-card.mode-online-join {
  background: linear-gradient(160deg, rgba(94,222,94,0.25), rgba(20,50,28,0.95));
  border: 2px solid rgba(120,255,140,0.55);
  color: #fff;
}
/* Mobile mode selectors:
   · NORMAL/KILLER (battle) → stacked vertically (1 column) so each card
     has full width and the image + description don't get squeezed.
   · HOST/JOIN (online) → side by side (2 columns) since they're shorter. */
@media (max-width: 600px) {
  /* NORMAL/KILLER mode picker — 1 column. Sized so both cards + buttons
     fit in the modal's 86vh budget on the shortest phones (iPhone SE). */
  .mode-grid { grid-template-columns: 1fr; gap: 6px; margin-top: 8px; }
  .mode-card {
    padding: 6px 10px;
    gap: 4px;
    border-radius: 12px;
    display: grid !important;
    grid-template-columns: 90px 1fr;
    align-items: center;
    text-align: left;
  }
  img.mode-icon { max-width: 90px; margin: 0; }
  .mode-name { font-size: 14px; letter-spacing: 2px; text-align: left; }
  .mode-desc { font-size: 10.5px; line-height: 1.3; text-align: left; }

  /* HOST/JOIN online picker — keep its 2-column, centered look. */
  .mode-grid:has(.mode-online-host) { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mode-grid:has(.mode-online-host) .mode-card {
    display: flex !important;
    grid-template-columns: none;
    text-align: center;
    padding: 10px 8px;
  }
  .mode-grid:has(.mode-online-host) img.mode-icon { max-width: 110px; }
  .mode-grid:has(.mode-online-host) .mode-name,
  .mode-grid:has(.mode-online-host) .mode-desc { text-align: center; }
  .mode-grid:has(.mode-online-host) .mode-desc { font-size: 10.5px; line-height: 1.3; }
}
.mode-card:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 22px rgba(0,0,0,0.6); }
.mode-icon { font-size: 42px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); }
img.mode-icon {
  display: block;
  width: 100%; max-width: 220px; height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55));
}
.mode-name { font-family:'Orbitron',sans-serif; font-weight: 900; font-size: 18px; letter-spacing: 4px; }
.mode-card.mode-killer .mode-name { color: #ff4b4b; text-shadow: 0 0 12px rgba(255,75,75,0.6); }
.mode-card.mode-normal .mode-name { color: #5ed3ff; text-shadow: 0 0 12px rgba(94,211,255,0.5); }
.mode-desc { font-size: 12px; line-height: 1.5; opacity: 0.9; }

/* Killer badge in result screen */
.result-mode-badge {
  font-family:'Orbitron',sans-serif; font-weight: 900;
  letter-spacing: 3px; font-size: 12px;
  padding: 5px 14px; border-radius: 12px;
  margin-bottom: 8px;
}
.result-mode-badge.killer {
  background: linear-gradient(135deg, #ff4b4b, #6a0a0a);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.3);
  box-shadow: 0 0 18px rgba(255,75,75,0.6);
  animation: killerPulse 1.4s ease-in-out infinite;
}
@keyframes killerPulse { 0%,100% { box-shadow: 0 0 18px rgba(255,75,75,0.6); } 50% { box-shadow: 0 0 28px rgba(255,75,75,1); } }

/* Match ended early — explains WHY above the WIN/LOSE/DRAW title. Two
   variants: player ran out (red) vs rival ran out (green). */
.result-reason-badge {
  font-family:'Orbitron',sans-serif; font-weight: 900;
  letter-spacing: 2px; font-size: 13px;
  padding: 10px 18px; border-radius: 14px;
  margin: 4px 0 12px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.result-reason-badge.reason-insufficient {
  background: linear-gradient(135deg, #4a0000, #c81e1e 55%, #ff3838);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 0 24px rgba(255,75,75,0.7), 0 8px 18px rgba(0,0,0,0.5);
}
.result-reason-badge.reason-insufficient-rival {
  background: linear-gradient(135deg, #003a14, #1a8a3a 55%, #46e07a);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 0 24px rgba(70,224,122,0.6), 0 8px 18px rgba(0,0,0,0.5);
}
.result-reason-sub {
  display: block;
  margin-top: 4px;
  font-family: inherit;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.6px;
  opacity: 0.95;
  text-transform: none;
}

/* Lost-cards strip in killer-loss result */
.result-killed {
  margin-top: 14px;
  background: rgba(40,5,5,0.7);
  border: 2px solid rgba(255,75,75,0.5);
  border-radius: 12px;
  padding: 10px 14px;
  max-width: 92vw;
}
.result-killed-title {
  font-family:'Orbitron',sans-serif; font-weight: 900;
  font-size: 12px; letter-spacing: 2px;
  color: #ff8a8a;
  margin-bottom: 8px; text-align: center;
}
.result-killed-grid {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.rk-card {
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,75,75,0.4);
  border-radius: 8px;
  padding: 6px 10px;
  text-align: center;
  min-width: 100px;
}
.rk-flag { font-size: 22px; margin-bottom: 2px; }
.rk-name { font-size: 12px; font-weight: 700; color: #fff; }
.rk-rar  { font-size: 9px; letter-spacing: 1.5px; color: #ff8a8a; margin-top: 2px; font-family:'Orbitron',sans-serif; }
.result-killed-hint {
  font-size: 11px; color: rgba(255,255,255,0.7); text-align: center;
  margin-top: 8px; font-style: italic;
}

/* ── Safe-area handling for PWA standalone mode (installed on iOS / Android) ── */
@supports (padding: max(0px)) {
  body {
    padding-left:  env(safe-area-inset-left,  0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

/* ============================================================
   HOW-TO-PLAY modal — pasos del partido explicados
   ============================================================ */
.howto-body {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  text-align: left;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}
.howto-step {
  display: flex; gap: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,210,74,0.25);
  border-radius: 10px;
  padding: 10px 12px;
  align-items: flex-start;
}
.howto-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a;
  font-family:'Orbitron',sans-serif; font-weight: 900;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(255,138,0,0.4);
}
.howto-text {
  flex: 1; font-size: 13px; line-height: 1.45;
  color: rgba(255,255,255,0.92);
}
.howto-text b { color: #ffd24a; }
.howto-body::-webkit-scrollbar { width: 6px; }
.howto-body::-webkit-scrollbar-thumb { background: rgba(255,210,74,0.4); border-radius: 3px; }

/* ============================================================
   TOP 25 — your most impactful cards, podium-style
   ============================================================ */
.top25-hero {
  text-align: center;
  padding: 20px 16px 8px;
  position: relative;
}
.top25-crown {
  font-size: 56px;
  filter: drop-shadow(0 6px 18px rgba(255,210,74,0.7));
  animation: top25CrownPulse 2.6s ease-in-out infinite;
}
@keyframes top25CrownPulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.06); }
}
.top25-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 32px; letter-spacing: 3px; font-weight: 900;
  background: linear-gradient(180deg, #fff 0%, #ffd24a 60%, #ff8a00 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-top: 6px;
}
.top25-sub {
  font-size: 14px; color: rgba(255,255,255,0.72);
  margin-top: 6px;
}
.top25-stat {
  display: inline-flex; align-items: baseline; gap: 4px;
  margin-top: 14px;
  background: linear-gradient(135deg, rgba(255,210,74,0.18), rgba(255,138,0,0.12));
  border: 1.5px solid rgba(255,210,74,0.5);
  padding: 8px 18px; border-radius: 24px;
  font-family: 'Orbitron', sans-serif; font-weight: 900;
}
.top25-stat > :first-child { font-size: 22px; color: #ffd24a; }
.top25-stat-sep { color: rgba(255,255,255,0.5); }
.top25-stat > :last-child { font-size: 14px; color: rgba(255,255,255,0.75); }
@media (max-width: 480px) {
  .top25-title { font-size: 22px; letter-spacing: 2px; }
  .top25-crown { font-size: 44px; }
}
.top25-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  padding: 18px 16px 24px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 980px) { .top25-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
@media (max-width: 720px) { .top25-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 480px) { .top25-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px 10px 20px; } }

/* width: 100% + align-items: center makes empty back-cards still fill the cell  */
.top25-cell {
  width: 100%;
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
  transition: transform 0.2s;
}
.top25-cell:hover { transform: translateY(-4px); }
.top25-cell .card.panini.small {
  width: 100%; max-width: 170px;
  height: auto; aspect-ratio: 200/290;
  align-self: center;
  flex-shrink: 0;
}

/* Rank chip: small, static, parked UNDER the card so it never covers the flag/name/stats */
.top25-rank {
  position: absolute;
  bottom: -8px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  min-width: 26px; height: 22px; padding: 0 8px;
  border-radius: 11px;
  background: rgba(20, 24, 42, 0.92);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 11px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
/* Podium tiers — solid colors, no pulsing/no halos. Just chip tint. */
.top25-cell.rank-gold   .top25-rank { background: #ffd24a; color: #1a1a1a; border-color: #fff8d6; }
.top25-cell.rank-silver .top25-rank { background: #d8d8d8; color: #1a1a1a; border-color: #fff; }
.top25-cell.rank-bronze .top25-rank { background: #c47b46; color: #fff; border-color: #ffd0a0; }
/* No border/glow change on the card itself — the chip alone marks the podium. */
.top25-empty {
  text-align: center;
  padding: 40px 24px;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
}

/* ============================================================
   SHARE — invite-friends screen
   ============================================================ */
.share-hero {
  max-width: 480px;
  margin: 40px auto 60px;
  padding: 28px 24px;
  text-align: center;
  background: linear-gradient(165deg, rgba(255,255,255,0.08) 0%, rgba(37,211,102,0.08) 60%, rgba(0,0,0,0.4) 100%);
  border: 2px solid rgba(37,211,102,0.35);
  border-radius: 24px;
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
}
.share-emoji {
  font-size: 64px;
  filter: drop-shadow(0 6px 18px rgba(255,210,74,0.6));
  animation: shareEmojiBounce 2.4s ease-in-out infinite;
}
@keyframes shareEmojiBounce {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-6px) rotate(6deg); }
}
.share-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 26px; letter-spacing: 2.5px; font-weight: 900;
  background: linear-gradient(180deg, #fff, #25d366);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-top: 10px;
}
.share-sub {
  font-size: 14px; color: rgba(255,255,255,0.85);
  line-height: 1.5; margin-top: 12px;
}
.share-counter {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-top: 18px;
  background: rgba(0,0,0,0.4);
  border: 1.5px solid rgba(37,211,102,0.5);
  padding: 8px 18px; border-radius: 20px;
  font-size: 13px; color: rgba(255,255,255,0.85);
}
.share-counter strong {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 16px; color: #25d366;
}
.share-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 24px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #fff;
  border: none;
  padding: 16px 28px; border-radius: 32px;
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 15px; letter-spacing: 1.5px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(37,211,102,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: all 0.2s;
}
.share-btn:hover { transform: scale(1.04); box-shadow: 0 14px 30px rgba(37,211,102,0.7); }
.share-btn:active { transform: scale(0.97); }
.share-btn-icon { font-size: 22px; }
.share-btn-disabled,
.share-btn:disabled {
  background: linear-gradient(135deg, #555, #333);
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}
.share-hint {
  font-size: 12px; color: rgba(255,255,255,0.55);
  margin-top: 14px;
}
.share-paste-wrap {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,210,74,0.18);
  display: flex; flex-direction: column; align-items: center;
}
.share-paste-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, #ffd24a 0%, #ff8a00 100%);
  color: #1a1a1a;
  border: none;
  padding: 14px 24px; border-radius: 28px;
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 13px; letter-spacing: 1.4px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(255,138,0,0.45), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: all 0.2s;
}
.share-paste-btn:hover { transform: scale(1.04); box-shadow: 0 12px 26px rgba(255,138,0,0.6); }
.share-paste-btn:active { transform: scale(0.97); }
.share-paste-icon { font-size: 18px; }
.share-paste-hint {
  font-size: 11px; color: rgba(255,255,255,0.5);
  margin-top: 10px; max-width: 260px; line-height: 1.4; text-align: center;
}

/* Mobile: compact the COMPARTIR screen so the whole hero block (title,
   counter, WhatsApp button, paste + QR buttons) fits without scrolling. */
@media (max-width: 720px) {
  #screen-share {
    height: calc(100vh - 95px);
    height: calc(100dvh - 95px - env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    padding: 8px 10px;
  }
  .share-hero {
    margin: 0 auto !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
    max-width: 100%; width: 100%;
    max-height: 100%;
    display: flex; flex-direction: column; align-items: center;
  }
  .share-emoji { font-size: 36px !important; animation: none !important; }
  .share-title { font-size: 17px !important; letter-spacing: 1.5px !important; margin-top: 4px !important; }
  .share-sub   { font-size: 11px !important; line-height: 1.35 !important; margin-top: 6px !important; }
  .share-counter {
    margin-top: 8px !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
  }
  .share-counter strong { font-size: 14px !important; }
  .share-btn {
    margin-top: 10px !important;
    padding: 11px 18px !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
    border-radius: 24px !important;
  }
  .share-btn-icon { font-size: 17px !important; }
  .share-hint { font-size: 10px !important; margin-top: 6px !important; }
  .share-paste-wrap {
    margin-top: 10px !important;
    padding-top: 10px !important;
    gap: 6px;
  }
  .share-paste-btn {
    margin-top: 4px !important;
    padding: 9px 16px !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    border-radius: 22px !important;
  }
  .share-paste-icon { font-size: 14px !important; }
  .share-paste-hint { font-size: 10px !important; margin-top: 4px !important; line-height: 1.3 !important; }
  .share-scan-btn { margin-top: 6px !important; }
}
.share-scan-btn {
  margin-top: 18px;
  background: linear-gradient(135deg, #5ed3ff 0%, #3a8dde 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(58,141,222,0.5), inset 0 1px 0 rgba(255,255,255,0.35);
}
.share-scan-btn:hover { box-shadow: 0 12px 26px rgba(58,141,222,0.7); }

/* ── QR sharing ─────────────────────────────────────────────────────── */
.qr-display {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  margin: 14px auto 6px;
  width: fit-content;
  max-width: 260px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.5);
}
.qr-display svg { display: block; width: 100%; height: auto; }
.qr-display-thanks { max-width: 200px; margin: 8px auto 4px; padding: 10px; }

/* "Thank the giver with 25 coins" block on the redeem modal */
.trade-thanks-block {
  margin: 16px -6px 4px;
  padding: 14px 12px 10px;
  background: linear-gradient(180deg, rgba(255,210,74,0.10), rgba(255,138,0,0.06));
  border: 1px solid rgba(255,210,74,0.35);
  border-radius: 14px;
  text-align: center;
}
.trade-thanks-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
  color: #ffd24a;
  text-transform: uppercase;
}
.trade-thanks-inst {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,0.85);
  margin: 4px 8px 0;
}

.qr-code-label {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: rgba(255,210,74,0.75);
  word-break: break-all;
  background: rgba(255,210,74,0.06);
  border: 1px solid rgba(255,210,74,0.18);
  border-radius: 8px;
  padding: 6px 10px;
  margin: 4px auto 0;
  max-width: 260px;
}
.qr-scanner-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.qr-scanner-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.qr-scanner-mask {
  position: absolute; inset: 0;
  background: radial-gradient(closest-side at 50% 50%, transparent 0, transparent 130px, rgba(0,0,0,0.65) 200px);
  pointer-events: none;
}
.qr-scanner-frame {
  position: relative;
  width: 260px; height: 260px;
  border-radius: 20px;
  box-shadow: 0 0 0 3px #ffd24a, 0 0 30px rgba(255,210,74,0.6);
  pointer-events: none;
}
.qr-scanner-frame::before,
.qr-scanner-frame::after {
  content: '';
  position: absolute; left: 8px; right: 8px; height: 2px;
  background: linear-gradient(90deg, transparent, #ffd24a, transparent);
  animation: qrScanSweep 1.8s ease-in-out infinite;
}
.qr-scanner-frame::before { top: 8px; }
.qr-scanner-frame::after  { bottom: 8px; animation-delay: 0.9s; }
@keyframes qrScanSweep {
  0%, 100% { opacity: 0.4; transform: scaleX(0.7); }
  50%      { opacity: 1;   transform: scaleX(1); }
}
.qr-scanner-title {
  position: absolute;
  top: calc(40px + env(safe-area-inset-top, 0px));
  left: 50%; transform: translateX(-50%);
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 14px; letter-spacing: 1.5px;
  color: #ffd24a;
  background: rgba(0,0,0,0.6);
  padding: 8px 16px; border-radius: 12px;
  text-align: center; max-width: 86vw;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
.qr-scanner-cancel {
  position: absolute;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.4);
  padding: 12px 28px; border-radius: 28px;
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 13px; letter-spacing: 2px;
  cursor: pointer;
}

/* ─── Top 25: locked slots show the card BACK ─── */
.top25-cell.locked { cursor: help; }
.top25-cell.locked:hover { transform: translateY(-2px); }
.card.panini.small.top25-back {
  background-image: url('../assets/cards/back.webp');
  background-size: cover; background-position: center;
  background-color: #0a1532;
  border: 4px solid rgba(255,210,74,0.25);
}
/* (removed dim filter on locked cards — was making the backs too dark to see) */

/* ── TOP 25 grid — neutralize the aggressive rarity glow ──
   The standard .card-leyenda / .card-estrella / .card-oro effects (huge halos,
   pulsing animations, holographic ::before borders) look great on a SINGLE card
   in a pack-opening or zoom view, but in the 25-card grid they overlap and
   wash everything out. Inside .top25-cell, replace the glow with a tame drop
   shadow and disable the animations so the cards read cleanly. */
.top25-cell .card.panini {
  animation: none !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.45) !important;
}
.top25-cell .card.panini::before { display: none !important; }   /* kill holographic outer halo */
.top25-cell .card.panini .card-glare { animation: none !important; opacity: 0.4; }
/* Stop the card's own :hover from lifting/scaling — it covers the rank chip
   that sits 8px below the card. The cell already handles its own hover transform. */
.top25-cell .card.panini:hover { transform: none !important; z-index: auto !important; box-shadow: 0 6px 14px rgba(0,0,0,0.45) !important; }
/* Make sure the rank chip stays on top of any hover lift the parent applies */
.top25-rank { z-index: 4; }

/* ─── Top 25 zoom overlay with parallax tilt — stadium-pitch backdrop ─── */
#top25-zoom-overlay {
  position: fixed; inset: 0;
  background:
    /* Subtle dark vignette so the card stays the focal point */
    radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.78) 85%),
    /* Center circle */
    radial-gradient(circle at center, transparent 110px, rgba(255,255,255,0.16) 110px 113px, transparent 116px),
    /* Center vertical line */
    linear-gradient(to right,
      transparent calc(50% - 1px),
      rgba(255,255,255,0.16) calc(50% - 1px) calc(50% + 1px),
      transparent calc(50% + 1px)),
    /* Mowing stripes (same visual language as battle/opening screens) */
    repeating-linear-gradient(90deg,
      #0a5a14 0px, #0a5a14 90px,
      #0c6c18 90px, #0c6c18 180px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  padding: 24px;
  cursor: pointer;
}
/* Faint grid overlay for stadium depth (same as #screen-opening::before) */
#top25-zoom-overlay::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg,  transparent 0 40px, rgba(255,255,255,0.035) 40px 41px),
    repeating-linear-gradient(90deg, transparent 0 40px, rgba(255,255,255,0.035) 40px 41px);
  pointer-events: none;
}
#top25-zoom-overlay.show { opacity: 1; }
#top25-zoom-overlay.hidden { display: none; }
.top25-zoom-stage {
  position: relative;
  width: min(360px, 80vw);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  perspective: 1200px;
  cursor: default;
  touch-action: none;
}
.top25-zoom-shell {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}
.top25-zoom-shell .card.panini {
  width: 100%;
  height: auto;
  aspect-ratio: 200/290;
  box-shadow: 0 30px 60px rgba(0,0,0,0.75);
}
.top25-zoom-hint {
  color: rgba(255,255,255,0.7);
  font-size: 12px; text-align: center;
  font-weight: 600; letter-spacing: 0.5px;
}
@media (max-width: 480px) {
  .top25-zoom-stage { width: min(320px, 88vw); }
  .top25-zoom-hint { font-size: 11px; }
}

/* ============================================================
   TOP 25 — spectacular zoom card (custom layout, not .card.panini).
   Hero photo, rank+WC-logo header, animated stat bars, OVR badge.
   ============================================================ */
/* Premium gold card — Panini-style proportions (3:4-ish), photo dominates the top.
   Team-tinted backdrop, holographic shine, gold accents, decorative corners. */
.t25z-card {
  width: 100%;
  /* Keep aspect close to a real Panini sticker (200×290 = 1:1.45) */
  aspect-ratio: 5 / 7;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,210,74,0.28) 0%, transparent 55%),
    linear-gradient(180deg,
      var(--t25c1, #1c2540) 0%,
      rgba(10,15,30,0.92) 45%,
      rgba(10,15,30,0.92) 55%,
      var(--t25c2, #0c1326) 100%);
  border: 3px solid #ffd24a;
  border-radius: 22px;
  padding: 22px 14px 14px;      /* top padding leaves room for ELITE tab */
  box-shadow:
    0 30px 60px rgba(0,0,0,0.8),
    0 0 24px rgba(255,210,74,0.35),
    inset 0 0 0 2px rgba(255,210,74,0.18),
    inset 0 1px 0 rgba(255,255,255,0.12);
  display: flex; flex-direction: column; gap: 10px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* Slow holographic shimmer that sweeps across the card every few seconds */
.t25z-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,210,74,0.10) 45%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,210,74,0.10) 55%,
    transparent 70%);
  background-size: 250% 250%;
  background-position: 0% 50%;
  animation: t25zShine 4.8s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes t25zShine {
  0%, 100% { background-position: -120% 50%; opacity: 0.6; }
  50%      { background-position:  120% 50%; opacity: 1;   }
}
/* Gold corner brackets — premium card feel (top-L, top-R, bottom-L, bottom-R) */
.t25z-card::after {
  content: ''; position: absolute; inset: 8px;
  border: 2px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(45deg, #ffd24a 0 18px, transparent 18px) top left/40px 40px no-repeat,
    linear-gradient(-45deg, #ffd24a 0 18px, transparent 18px) top right/40px 40px no-repeat,
    linear-gradient(135deg, #ffd24a 0 18px, transparent 18px) bottom left/40px 40px no-repeat,
    linear-gradient(-135deg, #ffd24a 0 18px, transparent 18px) bottom right/40px 40px no-repeat;
  -webkit-mask:
    linear-gradient(45deg, #000 0 12px, transparent 12px) top left/40px 40px no-repeat,
    linear-gradient(-45deg, #000 0 12px, transparent 12px) top right/40px 40px no-repeat,
    linear-gradient(135deg, #000 0 12px, transparent 12px) bottom left/40px 40px no-repeat,
    linear-gradient(-135deg, #000 0 12px, transparent 12px) bottom right/40px 40px no-repeat;
  mask:
    linear-gradient(45deg, #000 0 12px, transparent 12px) top left/40px 40px no-repeat,
    linear-gradient(-45deg, #000 0 12px, transparent 12px) top right/40px 40px no-repeat,
    linear-gradient(135deg, #000 0 12px, transparent 12px) bottom left/40px 40px no-repeat,
    linear-gradient(-135deg, #000 0 12px, transparent 12px) bottom right/40px 40px no-repeat;
  pointer-events: none;
  opacity: 0.85;
}
/* Rarity-tinted accents (border + outer glow tone) — gold stays as the dominant note */
.t25z-card.t25z-leyenda  { border-color: #ffd24a; box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 30px rgba(255,138,0,0.5), inset 0 0 0 2px rgba(255,210,74,0.22), inset 0 1px 0 rgba(255,255,255,0.15); }
.t25z-card.t25z-estrella { border-color: #d6a3ff; box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 28px rgba(155,77,255,0.45), inset 0 0 0 2px rgba(214,163,255,0.2),  inset 0 1px 0 rgba(255,255,255,0.12); }
.t25z-card.t25z-oro      { border-color: #ffd24a; box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 24px rgba(255,210,74,0.4),  inset 0 0 0 2px rgba(255,217,102,0.22), inset 0 1px 0 rgba(255,255,255,0.12); }
.t25z-card.t25z-plata    { border-color: #e8e8e8; }
.t25z-card.t25z-comun    { border-color: #9aa3b2; }
/* Podium border tone overrides rarity */
.t25z-card.rank-gold   { border-color: #ffd24a; }
.t25z-card.rank-silver { border-color: #e8e8e8; }
.t25z-card.rank-bronze { border-color: #d18a4e; }
/* ───── Pokémon-style holographic shine ─────
   Layered rainbow stripes + diagonal sheen that animate independently and
   blend over the card surface (mix-blend-mode: screen → only brightens). */
.t25z-holo {
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: 22px;
  z-index: 1;
  background:
    /* Diagonal rainbow stripes (the Pokémon "rainbow rare" feel) */
    repeating-linear-gradient(115deg,
      transparent              0px,
      rgba(255,  80, 180, 0.10) 16px,
      rgba(255, 210,  74, 0.12) 32px,
      rgba(120, 255, 200, 0.10) 48px,
      rgba(120, 180, 255, 0.10) 64px,
      rgba(220, 120, 255, 0.10) 80px,
      transparent              96px),
    /* Wide soft rainbow gradient layered behind */
    linear-gradient(135deg,
      rgba(255, 50, 100, 0.12),
      rgba(255, 200,  60, 0.12),
      rgba(120, 255, 180, 0.12),
      rgba( 80, 180, 255, 0.12),
      rgba(220, 120, 255, 0.12));
  background-size: 300% 300%, 200% 200%;
  background-position: 0% 50%, 0% 0%;
  mix-blend-mode: screen;
  /* Slower, more elegant — the shimmer should feel like a slow tilt, not a flicker */
  animation: t25zHoloShift 14s ease-in-out infinite;
  opacity: 0.85;
}
@keyframes t25zHoloShift {
  0%   { background-position:    0% 50%,   0%   0%; }
  50%  { background-position:  100% 50%, 100% 100%; }
  100% { background-position:  200% 50%, 200% 200%; }
}

/* "ELITE" stamp — gold tab anchored to the card's TOP edge (inside overflow).
   white-space: nowrap + fluid clamp() keep "ELITE TOP 25" on a single line at
   any viewport (including the narrowest phones). */
.t25z-elite-stamp {
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  z-index: 5;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(7px, 2.1vw, 10px);
  letter-spacing: clamp(1.2px, 0.6vw, 4px);
  padding: 5px clamp(8px, 3.2vw, 16px);
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #ffe27a 0%, #ffd24a 50%, #ff8a00 100%);
  color: #1a1a1a;
  box-shadow: 0 4px 12px rgba(255,138,0,0.65), inset 0 1px 0 rgba(255,255,255,0.5);
  border: 1.5px solid #fff8d6;
  border-top: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
  white-space: nowrap;
  max-width: calc(100% - 12px);
}
/* (padding-top: 30px is already set on .t25z-card to make room for the ELITE tab) */

/* (header/rar-row removed — those elements now overlay the photo) */
.t25z-rank-badge {
  /* Floating chip in TOP-LEFT corner of the photo */
  position: absolute;
  top: 10px; left: 10px;
  z-index: 4;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 22px;
  width: 50px; height: 50px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.5), transparent 60%),
    linear-gradient(135deg, #ffe27a, #ff8a00);
  color: #1a1a1a;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.4),
    0 0 14px rgba(255,210,74,0.4);
  border: 2.5px solid #fff8d6;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
@media (max-width: 480px) {
  .t25z-rank-badge { width: 42px; height: 42px; font-size: 18px; }
}
/* (is-two-digit shrinking no longer needed — the "#" prefix was removed,
   so "10".."25" fit comfortably at the default 22px font.) */
.t25z-card.rank-silver .t25z-rank-badge { background: linear-gradient(135deg, #f0f0f0, #b8b8b8); color: #1a1a1a; box-shadow: 0 4px 10px rgba(220,220,220,0.45); }
.t25z-card.rank-bronze .t25z-rank-badge { background: linear-gradient(135deg, #d6924f, #8a4a1a); color: #fff; box-shadow: 0 4px 10px rgba(209,138,78,0.45); }
.t25z-rar-pill {
  /* Bottom-left of the photo — rarity strip across the bottom edge of the hero image */
  position: absolute;
  left: 50%; bottom: 6px;
  transform: translateX(-50%);
  z-index: 4;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900; letter-spacing: 3px;
  font-size: 11px;
  color: #1a1a1a;
  padding: 4px 18px;
  background: linear-gradient(180deg, #ffe27a 0%, #ffd24a 50%, #ff8a00 100%);
  border: 1.5px solid #fff8d6;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.6);
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.t25z-wc-logo {
  /* TOP-RIGHT of the photo — visible but not dominant */
  position: absolute;
  top: 8px; right: 8px;
  z-index: 4;
  height: 64px; width: 64px; object-fit: contain;
  filter:
    drop-shadow(0 0 10px rgba(255,210,74,0.85))
    drop-shadow(0 4px 10px rgba(0,0,0,0.7));
}
@media (max-width: 480px) {
  .t25z-wc-logo { height: 52px; width: 52px; }
}
/* Empty spacer keeps the rank slot's width when there's no rank chip (album zoom) */
.t25z-rank-spacer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none;
  visibility: hidden;
}

/* Hero photo — dominant top half of the panini-style card */
.t25z-photo-wrap {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;                 /* takes all the spare vertical space */
  min-height: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,210,74,0.18), transparent 60%),
    linear-gradient(180deg, rgba(255,210,74,0.08), rgba(0,0,0,0.55));
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid rgba(255,210,74,0.55);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.1),
    inset 0 0 18px rgba(255,138,0,0.18),
    0 4px 14px rgba(0,0,0,0.5);
}
.t25z-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
.t25z-flag {
  /* Country flag — sits BOTTOM-LEFT of the photo (rank chip occupies top-left) */
  position: absolute; left: 8px; bottom: 6px;
  font-size: 52px;
  line-height: 1;
  filter:
    drop-shadow(0 0 6px rgba(0,0,0,0.85))
    drop-shadow(0 4px 8px rgba(0,0,0,0.7));
  z-index: 4;
  pointer-events: none;
}
@media (max-width: 480px) {
  .t25z-flag { font-size: 42px; }
}
.t25z-pos {
  position: absolute; top: 12px; right: 12px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900; font-size: 16px; letter-spacing: 1.5px;
  color: #1a1a1a;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.45), transparent 50%),
    linear-gradient(180deg, #ffe27a, #ffd24a 50%, #ff8a00);
  padding: 6px 14px;
  border-radius: 12px;
  border: 2px solid #fff8d6;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  z-index: 2;
}

/* Name + single team-line under the photo (Panini name+team strip) */
.t25z-id { text-align: center; position: relative; z-index: 2; padding: 2px 0 0; }
.t25z-name {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 24px;
  line-height: 1.05;
  background: linear-gradient(180deg, #fff8d6 0%, #ffd24a 55%, #ff8a00 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter:
    drop-shadow(0 1px 0 rgba(255,138,0,0.4))
    drop-shadow(0 0 8px rgba(255,210,74,0.45));
  letter-spacing: 0.3px;
  /* Truncate gracefully if it's a very long name */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 480px) { .t25z-name { font-size: 20px; } }
.t25z-team-line {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700; letter-spacing: 2px;
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  margin-top: 4px;
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
}
.t25z-team-rank-inline {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  color: #ffd24a;
  letter-spacing: 1px;
}
.t25z-team-rank-inline.is-top1 { color: #fff; text-shadow: 0 0 6px rgba(255,210,74,0.8); }

/* Stats — compact 2×2 grid of stat cells (Panini-style under-photo strip) */
.t25z-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  position: relative; z-index: 2;
}
.t25z-statc {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 4px 7px;
  background: linear-gradient(180deg, rgba(255,210,74,0.12), rgba(0,0,0,0.45));
  border: 1px solid rgba(255,210,74,0.45);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 5px rgba(0,0,0,0.4);
}
.t25z-statc-key {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.7);
  line-height: 1;
}
.t25z-statc-val {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 18px;
  color: #ffd24a;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  margin-top: 2px;
  line-height: 1;
}
@media (max-width: 480px) { .t25z-statc-val { font-size: 16px; } }

/* OVR insignia — vertical chip on TOP-RIGHT INSIDE the photo (FIFA-card style).
   Below the WC logo, stacks OVR + POSITION code. */
.t25z-ovr {
  position: absolute;
  top: 78px; right: 14px;
  z-index: 4;
  display: flex; flex-direction: column; align-items: center;
  padding: 4px 9px 5px;
  background: linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0.4));
  border: 1.5px solid rgba(255,210,74,0.7);
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.15);
  line-height: 1;
}
.t25z-ovr-num {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 26px;
  background: linear-gradient(180deg, #fff8d6, #ffd24a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6));
}
.t25z-ovr-pos {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.85);
  margin-top: 1px;
}
@media (max-width: 480px) {
  .t25z-ovr { top: 64px; right: 10px; padding: 3px 7px 4px; }
  .t25z-ovr-num { font-size: 22px; }
}

/* ============================================================
   ALBUM — football-themed backgrounds per national team.
   Each team page gets:
     1. A jersey-style color pattern (6 variants, picked deterministically from teamId)
        using team.color1 / team.color2 as CSS custom properties.
     2. A subtle pitch-markings overlay (center circle + halfway line) shared
        across all variants — keeps the stadium feel consistent.
     3. A faded soccer-ball watermark in the corner.
   All layers stay BEHIND the cards (z-index: 0) so the album content is readable.
   ============================================================ */
.page-paper.team-page { position: relative; z-index: 2; }
.page-paper.team-page > .team-page-header,
.page-paper.team-page > .team-page-row { position: relative; z-index: 3; }

.team-page-bg,
.team-page-pitch {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Subtle pitch markings — same on every team page */
.team-page-pitch {
  z-index: 2;
  background:
    radial-gradient(circle at 50% 45%, transparent 90px, rgba(0,0,0,0.07) 90px 92px, transparent 94px),
    linear-gradient(to right,
      transparent calc(50% - 1px),
      rgba(0,0,0,0.06) calc(50% - 1px) calc(50% + 1px),
      transparent calc(50% + 1px));
  opacity: 0.55;
}

/* Faded ball watermark — bottom-right corner */
.team-page-ball {
  position: absolute;
  right: 14px; bottom: 14px;
  font-size: 64px;
  opacity: 0.08;
  z-index: 1;
  pointer-events: none;
  transform: rotate(-12deg);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
@media (max-width: 600px) {
  .team-page-ball { font-size: 44px; right: 8px; bottom: 8px; }
}

/* ── Variant 0 — Vertical jersey stripes (Argentina, Croatia, Paraguay…) ── */
.bg-variant-0 .team-page-bg {
  background: repeating-linear-gradient(90deg,
    var(--team-c1) 0 28px,
    var(--team-c2) 28px 56px);
  opacity: 0.16;
}
/* ── Variant 1 — Horizontal hoops ── */
.bg-variant-1 .team-page-bg {
  background: repeating-linear-gradient(0deg,
    var(--team-c1) 0 32px,
    var(--team-c2) 32px 64px);
  opacity: 0.14;
}
/* ── Variant 2 — Halved kit ── */
.bg-variant-2 .team-page-bg {
  background: linear-gradient(to right,
    var(--team-c1) 50%,
    var(--team-c2) 50%);
  opacity: 0.13;
}
/* ── Variant 3 — Diagonal sash ── */
.bg-variant-3 .team-page-bg {
  background: linear-gradient(135deg,
    var(--team-c1) 0%, var(--team-c1) 38%,
    var(--team-c2) 38%, var(--team-c2) 62%,
    var(--team-c1) 62%, var(--team-c1) 100%);
  opacity: 0.15;
}
/* ── Variant 4 — Sunburst radial gradient ── */
.bg-variant-4 .team-page-bg {
  background:
    radial-gradient(circle at 50% 30%, var(--team-c2) 0%, transparent 60%),
    linear-gradient(180deg, var(--team-c1), var(--team-c1));
  opacity: 0.16;
}
/* ── Variant 5 — Soccer-ball hexagonal pattern ── */
.bg-variant-5 .team-page-bg {
  /* Approximate hexagonal honeycomb using two layered radial gradients */
  background:
    radial-gradient(circle at 25% 25%, var(--team-c2) 6px, transparent 7px) 0 0 / 36px 36px,
    radial-gradient(circle at 75% 75%, var(--team-c2) 6px, transparent 7px) 0 0 / 36px 36px,
    linear-gradient(180deg, var(--team-c1), var(--team-c1));
  opacity: 0.18;
}

/* ============================================================
   ALBUM v2 — horizontal team tabs + responsive grid of cards
   (replaces the old page-flip book layout)
   ============================================================ */
#screen-album { padding-bottom: 110px; max-width: 1200px; margin: 0 auto; }

/* Sticky horizontal team-tabs strip — scrollbar fully hidden */
.album-team-tabs {
  display: flex; flex-wrap: nowrap;
  gap: 8px;
  padding: 10px 14px 12px;
  overflow-x: auto;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* IE/old Edge */
  scroll-snap-type: x proximity;
  position: sticky; top: 56px;
  z-index: 50;
  background: linear-gradient(180deg, rgba(10,14,28,0.92), rgba(10,14,28,0.78) 80%, rgba(10,14,28,0) 100%);
  backdrop-filter: blur(10px);
}
.album-team-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }

.album-tab {
  flex-shrink: 0;
  scroll-snap-align: center;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(0,0,0,0.4));
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700; font-size: 13px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  position: relative;
  /* Faint left edge tinted with team primary color */
  border-left: 4px solid var(--ttc1, #444);
}
.album-tab:hover { transform: translateY(-1px); border-color: rgba(255,210,74,0.5); }
.album-tab.is-active {
  background: linear-gradient(135deg, rgba(255,210,74,0.25), rgba(255,138,0,0.15));
  border-color: #ffd24a;
  box-shadow: 0 4px 12px rgba(255,138,0,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  color: #ffd24a;
}
.album-tab.is-done { border-color: rgba(46,204,113,0.6); }
.album-tab-flag { font-size: 20px; line-height: 1; }
.album-tab-name { white-space: nowrap; letter-spacing: 0.5px; }
.album-tab-count {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 11px;
  padding: 2px 7px;
  background: rgba(0,0,0,0.55);
  border-radius: 10px;
  color: rgba(255,255,255,0.85);
}
.album-tab.is-active .album-tab-count { background: rgba(0,0,0,0.7); color: #ffd24a; }
.album-tab-count.is-done { background: linear-gradient(135deg, #2ecc71, #16a34a); color: #fff; }
@media (max-width: 480px) {
  .album-team-tabs { gap: 6px; padding: 8px 10px 10px; top: 50px; }
  .album-tab { padding: 6px 10px; font-size: 12px; }
  .album-tab-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
}

/* Active-team hero header (flag + name + bar) */
.album-team-header { padding: 14px 16px 4px; }
.album-team-header-inner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--ttc1, #1c2540), var(--ttc2, #0c1326));
  border: 2px solid rgba(255,210,74,0.4);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
}
.album-team-header-flag {
  font-size: 56px; line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
  flex-shrink: 0;
}
.album-team-header-body { flex: 1; min-width: 0; }
.album-team-header-name {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 24px; letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.album-team-header-bar {
  margin-top: 8px;
  height: 10px;
  background: rgba(0,0,0,0.5);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}
.album-team-header-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd24a, #ff8a00);
  transition: width 0.4s ease;
  box-shadow: 0 0 8px rgba(255,210,74,0.6);
}
.album-team-header-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px;
  gap: 8px;
}
/* "X / 16 cromos" — black text on light pill so it reads against the
   team's dark colour gradient. */
.album-team-header-count {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 12px;
  color: #1a1a1a;
  background: rgba(255,255,255,0.92);
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  line-height: 1;
}
/* "X%" — same treatment, gold gradient pill with black text for max
   contrast against any team colour. */
.album-team-header-pct {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 15px;
  color: #1a1a1a;
  background: linear-gradient(135deg, #fff8d6, #ffd24a);
  padding: 4px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: 0 2px 8px rgba(255,138,0,0.4);
  line-height: 1;
}
.album-team-header-done {
  padding: 6px 14px;
  background: linear-gradient(135deg, #2ecc71, #16a34a);
  border-radius: 12px;
  color: #fff;
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 12px; letter-spacing: 1.5px;
  box-shadow: 0 4px 10px rgba(46,204,113,0.4);
}
@media (max-width: 480px) {
  .album-team-header-flag { font-size: 44px; }
  .album-team-header-name { font-size: 19px; }
}

/* Grid container — stacked SECTIONS, one per position (PORTERO / DEFENSAS / …) */
.album-grid {
  display: flex; flex-direction: column;
  gap: 18px;
  padding: 18px 16px 24px;
}
.album-section {
  background: linear-gradient(180deg, rgba(255,210,74,0.04), rgba(0,0,0,0.18));
  border: 1px solid rgba(255,210,74,0.18);
  border-radius: 16px;
  padding: 12px 14px 16px;
}
.album-section-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800; letter-spacing: 2.5px;
  font-size: 13px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid rgba(255,210,74,0.35);
  color: #ffd24a;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.album-section-grid {
  display: grid;
  /* minmax(0, 1fr) prevents cells from growing past their share — without it,
     owned cards (with all their inner DOM) would end up wider than the
     empty .album-back cards next to them. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px) { .album-section-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 600px) {
  .album-grid { gap: 14px; padding: 14px 10px 20px; }
  .album-section { padding: 10px 10px 12px; }
  .album-section-title { font-size: 12px; letter-spacing: 2px; margin-bottom: 10px; padding-bottom: 6px; }
  /* Mobile: 2 cols so cards are big enough to actually see the player's photo */
  .album-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.album-cell {
  width: 100%;
  min-width: 0;       /* lets the parent grid's minmax(0,1fr) actually shrink */
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer;
  transition: transform 0.2s;
}
.album-cell:hover { transform: translateY(-3px); }
/* Force EVERY card on the album grid to the SAME width (cell width) and SAME
   aspect ratio — owned and locked cards must be visually identical in size. */
.album-cell .card.panini,
.album-cell .card.panini.small,
.album-cell .card.panini.small.album-back {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 200/290;
  max-width: 100%;
  align-self: center;
  flex-shrink: 0;
}
/* Global album number chip — sized for up to 3 digits (1..768) */
.album-cell-num {
  position: absolute;
  top: -6px; left: 6px;
  z-index: 4;
  min-width: 36px; height: 20px; padding: 0 8px;
  border-radius: 10px;
  background: rgba(20, 24, 42, 0.92);
  border: 1px solid rgba(255,210,74,0.45);
  color: #ffd24a;
  font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  letter-spacing: 0.5px;
  white-space: nowrap;
}
/* Locked card back-of-card. The base rule applies to ANY .card.panini.album-back
   (used by the album-checker modal at full size); the .small qualifier is just
   for inherited specificity inside album grid cells. */
.card.panini.album-back,
.card.panini.small.album-back {
  background-image: url('../assets/cards/back.webp');
  background-size: cover; background-position: center;
  background-color: #0a1532;
  border: 4px solid rgba(255,210,74,0.25);
}
.album-cell.locked .card.panini { filter: brightness(0.7) saturate(0.6); }
.album-cell-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700; letter-spacing: 0.5px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  text-align: center;
  margin-top: -2px;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ─── Album cover view (first tab) ─── */
.album-cover-view {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
  padding: 14px 16px;
}
.album-cover-img {
  width: min(420px, 85%);
  border-radius: 18px;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.7),
    0 0 24px rgba(255,210,74,0.4),
    inset 0 0 0 3px #ffd24a;
  filter: drop-shadow(0 6px 14px rgba(255,138,0,0.5));
}
.album-cover-stats {
  display: flex; gap: 18px;
  flex-wrap: wrap; justify-content: center;
}
.album-cover-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 20px;
  background: linear-gradient(180deg, rgba(255,210,74,0.12), rgba(0,0,0,0.45));
  border: 1.5px solid rgba(255,210,74,0.45);
  border-radius: 14px;
  min-width: 110px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 10px rgba(0,0,0,0.4);
}
.album-cover-stat-num {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900; font-size: 26px;
  background: linear-gradient(180deg, #fff8d6, #ffd24a 60%, #ff8a00);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1;
}
.album-cover-stat-sep { font-size: 16px; color: rgba(255,255,255,0.4); margin: 0 3px; }
.album-cover-stat-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700; letter-spacing: 1.5px;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  margin-top: 4px;
}
.album-cover-cta {
  margin-top: 4px;
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900; letter-spacing: 2px;
  padding: 14px 28px;
  border: 2px solid #fff8d6;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255,138,0,0.55), inset 0 1px 0 rgba(255,255,255,0.5);
  font-size: 14px;
  transition: transform 0.15s;
}
.album-cover-cta:hover { transform: scale(1.04); }
.album-cover-cta:active { transform: scale(0.97); }

/* Special cover tab styling (book emoji instead of country flag) */
.album-tab.album-tab-cover {
  border-left-color: #ffd24a;
  background: linear-gradient(135deg, rgba(255,210,74,0.18), rgba(0,0,0,0.4));
}
.album-tab.album-tab-cover.is-active {
  background: linear-gradient(135deg, rgba(255,210,74,0.32), rgba(255,138,0,0.18));
  color: #fff;
}

/* ─── Duplicates trade button ─── */
.dup-actions { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 4px; }
.dup-actions button {
  width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800; letter-spacing: 0.5px;
  font-size: 11px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.15s, filter 0.15s;
}
.dup-actions button:hover { transform: translateY(-1px); filter: brightness(1.1); }
.dup-btn-convert {
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a;
  border-color: #fff8d6;
}
.dup-btn-trade {
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}

/* Filter button — lives INSIDE the album header card (right edge),
   so it never overlaps the tab strip. SVG icon (3 horizontal bars) +
   gold/orange gradient circle. */
.album-progress-card .album-browse-btn {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd24a, #ff8a00);
  color: #1a1a1a;
  border: 2px solid #fff8d6;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(255,138,0,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 0.15s;
}
.album-progress-card .album-browse-btn svg { display: block; }
.album-progress-card .album-browse-btn:hover { transform: scale(1.08); }
.album-progress-card .album-browse-btn:active { transform: scale(0.95); }
@media (max-width: 480px) {
  .album-progress-card .album-browse-btn { width: 42px; height: 42px; }
  .album-progress-card .album-browse-btn svg { width: 20px; height: 20px; }
}

/* ── Active-filter chip strip above the album grid ── */
.album-filter-bar {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 10px;
  margin: 8px 10px 0;
  background: linear-gradient(180deg, rgba(255,210,74,0.06), rgba(0,0,0,0.18));
  border: 1px solid rgba(255,210,74,0.22);
  border-radius: 12px;
}
.album-filter-bar.is-visible { display: flex; }
.album-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #06141d;
  background: linear-gradient(135deg, #fff8d4 0%, #ffd24a 55%, #ff9a1a 100%);
  border: 1px solid rgba(255,210,74,0.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 6px rgba(255,138,0,0.35);
  cursor: pointer;
}
.album-filter-chip .fchip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(0,0,0,0.25);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}
.album-filter-chip.is-clear {
  background: linear-gradient(135deg, rgba(255,75,75,0.85), rgba(170,30,30,0.85));
  color: #fff;
  border-color: rgba(255,75,75,0.6);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* ── Filter modal — sections + chip groups + actions ── */
.album-filter-section {
  margin: 14px 0;
  text-align: left;
}
.album-filter-heading {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 2px;
  color: #ffd24a;
  margin-bottom: 8px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.65);
}
.album-filter-hint {
  font-size: 10.5px;
  opacity: 0.7;
  margin: -4px 0 6px;
  letter-spacing: 0.4px;
}
.album-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.album-filter-chip-pick {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.2px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, rgba(28,37,64,0.65), rgba(12,19,38,0.65));
  border: 1.5px solid rgba(255,255,255,0.16);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.album-filter-chip-pick:hover {
  border-color: rgba(255,210,74,0.55);
  background: linear-gradient(180deg, rgba(255,210,74,0.18), rgba(255,138,0,0.10));
}
.album-filter-chip-pick.is-active {
  color: #06141d;
  background: linear-gradient(135deg, #fff8d4 0%, #ffd24a 55%, #ff9a1a 100%);
  border-color: #ffd24a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 0 0 2px rgba(255,210,74,0.35),
    0 4px 14px rgba(255,138,0,0.4);
  transform: translateY(-1px);
}
.album-filter-chip-pick .afc-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
}
.album-filter-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  justify-content: center;
}
.album-filter-actions .primary-btn {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 10px 22px;
}

/* Empty state when no card matches the filter inside the current team tab */
.album-empty-filter {
  text-align: center;
  padding: 32px 18px;
  opacity: 0.85;
}
.album-empty-filter .aef-icon { font-size: 36px; margin-bottom: 8px; }
.album-empty-filter .aef-text { font-size: 13px; letter-spacing: 0.5px; }

/* Flag-grid picker — clean, scrollable grid of all 48 teams */
.flag-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 480px) { .flag-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; } }
.flag-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  background: rgba(0,0,0,0.45);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.15s, background 0.15s;
  font-family: 'Rajdhani', sans-serif;
}
.flag-tile:hover { transform: translateY(-2px); border-color: rgba(255,210,74,0.6); background: rgba(255,210,74,0.08); }
.flag-tile.is-done { border-color: rgba(46,204,113,0.6); background: rgba(46,204,113,0.08); }
.flag-tile-flag { font-size: 28px; line-height: 1; }
.flag-tile-name {
  font-weight: 700; font-size: 11px; letter-spacing: 0.5px;
  text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flag-tile-count {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800; font-size: 10px;
  padding: 1px 6px; border-radius: 6px;
  background: rgba(0,0,0,0.6); color: #ffd24a;
}
.flag-tile.is-done .flag-tile-count { background: linear-gradient(135deg, #2ecc71, #16a34a); color: #fff; }

/* ─── Simple album zoom: WC logo stacked above the card in the same
   flex column, so it never overlaps the card artwork/badges. ─── */
.zoom-wc-logo {
  width: 192px; height: 192px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 16px rgba(255,210,74,0.85))
    drop-shadow(0 8px 16px rgba(0,0,0,0.75));
  pointer-events: none;
}
@media (max-width: 480px) {
  .zoom-wc-logo { width: 144px; height: 144px; }
}

/* ============================================================
   TEAM BUILDER v2 — stats overlay inside the pitch · Fantasy-style
   chips next to each player · no scroll on this screen.
   ============================================================ */
/* Compact TOP-LEFT corner badge — never overlaps any slot.
   The DEL strikers sit at x=35/65 and the corners (x≈0..15) are completely free,
   so we tuck a small vertical OVR+team-count chip there. The detailed per-position
   averages are dropped here — each player already shows its OVR in its fc-chip. */
#formation-pitch .team-stats-panel {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 6;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20,28,50,0.95), rgba(10,14,28,0.95));
  border: 1.5px solid rgba(255,210,74,0.55);
  box-shadow: 0 4px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
  width: auto; min-width: 0; max-width: 64px;
  overflow: hidden;
}
#formation-pitch .team-stats-panel::before { display: none; }
#formation-pitch .ts-overall {
  display: flex; flex-direction: column; align-items: center; line-height: 1;
}
#formation-pitch .ts-ovr-num {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900; font-size: 20px;
  background: linear-gradient(180deg, #fff8d6, #ffd24a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
#formation-pitch .ts-ovr-label {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800; font-size: 8px; letter-spacing: 1px;
  color: rgba(255,255,255,0.7);
  margin-top: 1px;
}
/* Hide the detailed bars/per-position averages in this compact view — redundant
   with the fc-chip data already next to each player. */
#formation-pitch .ts-bars { display: none; }
#formation-pitch .ts-filled {
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  padding-top: 2px;
  border-top: 1px solid rgba(255,210,74,0.3);
  width: 100%;
}
#formation-pitch .ts-filled > div:first-child {
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 13px; color: #fff;
}
#formation-pitch .ts-filled-label { font-size: 7px; letter-spacing: 1px; color: rgba(255,255,255,0.65); }
@media (max-width: 480px) {
  #formation-pitch .team-stats-panel { padding: 5px 7px; max-width: 56px; }
  #formation-pitch .ts-ovr-num { font-size: 17px; }
  #formation-pitch .ts-filled > div:first-child { font-size: 11px; }
}

/* Reset button — top-right corner of the pitch */
#formation-pitch .team-reset-btn {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 6;
  width: 38px; height: 38px;
}
@media (max-width: 480px) {
  #formation-pitch .team-reset-btn { width: 34px; height: 34px; font-size: 14px; }
}

/* Fantasy-style chip next to each filled player on the pitch.
   Sits at the BOTTOM EDGE of the slot (inside) — pitch has overflow:hidden,
   so chips floating below would be clipped. */
.formation-slot .fc-chip {
  position: absolute;
  left: 50%; bottom: 2px;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  background: linear-gradient(180deg, rgba(20,28,50,0.95), rgba(10,14,28,0.95));
  border: 1.5px solid rgba(255,210,74,0.6);
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.55);
  font-family: 'Orbitron', sans-serif;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.formation-slot .fc-ovr {
  font-weight: 900; font-size: 12px;
  background: linear-gradient(180deg, #fff8d6, #ffd24a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.formation-slot .fc-pos {
  font-weight: 800; font-size: 8px; letter-spacing: 1px;
  color: rgba(255,255,255,0.75);
}
.formation-slot .fc-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800; font-size: 10px;
  color: #fff;
  max-width: 70px; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 480px) {
  .formation-slot .fc-chip { padding: 2px 6px; gap: 4px; bottom: -16px; }
  .formation-slot .fc-ovr { font-size: 11px; }
  .formation-slot .fc-name { max-width: 56px; font-size: 9px; }
}

/* Remove the aggressive rarity glow/animation on cards placed on the pitch —
   they were washing the small tiny cards out and hiding stats. */
.formation-pitch .card.panini,
.formation-slot   .card.panini {
  animation: none !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
}
.formation-pitch .card.panini::before,
.formation-slot   .card.panini::before { display: none !important; }
.formation-pitch .card.panini .card-glare,
.formation-slot   .card.panini .card-glare { animation: none !important; opacity: 0.25; }

/* ============================================================
   MOBILE MENU — compact cards so all 10 fit in viewport
   without scrolling (the desktop sizes were 253px tall × 10 = 2530px)
   ============================================================ */
@media (max-width: 720px) {
  /* Padding bumped to 17px so it cancels the .menu-card { scale(1.03) } shrink
     at the edges — the VISIBLE side gutter (≈14px) ends up matching the
     inter-card gap exactly. */
  #screen-menu { padding: 14px 17px 0; min-height: 0; justify-content: flex-start; }
  /* Shrink the whole card */
  .menu-card { padding: 8px 8px 10px; border-radius: 14px; gap: 4px; }
  /* Smaller body chip so card height stays under ~125px */
  .menu-card-desc { min-height: 28px; font-size: 11px; }
  .menu-card-title { font-size: 13px; letter-spacing: 1.2px; }
  /* All icons match the ONLINE tile's larger artwork size. Per-tile
     overrides removed for a uniform menu grid. */
  .menu-card-icon { height: 241px; }
  /* Grid gap compensates for the .menu-card { transform: scale(1.03) } hover-look
     each card extends ~2.5px past its box, so the inter-card gap loses ~5px while
     the edge gap only loses ~2.5px. Bump the gap +5 over the side padding to
     keep the visible gutters uniform (≈14px on both axes). */
  .menu-grid { gap: 19px; }
  /* Album-counter chip — compact on mobile so it fits */
  .menu-album-chip { padding: 3px 8px; gap: 4px; }
  #menu-album-count, #menu-top25-count, #menu-ach-count, #menu-share-count { font-size: 11px; }
  .menu-album-chip .ma-label { font-size: 8px; letter-spacing: 0.8px; }
  .menu-album-chip .ma-icon { font-size: 11px; }
  /* Daily button doesn't need to push past the screen */
  .daily-btn { margin-top: 14px; padding: 10px 24px; font-size: 13px; }
  body:not(.hud-hidden) #screen-menu { padding-bottom: 100px; }
}
@media (max-width: 480px) {
  /* Same compensation: side padding 15 cancels the scale shrink, visible ≈12px */
  #screen-menu { padding: 12px 15px 0; }
  .menu-card { padding: 6px 6px 8px; border-radius: 12px; }
  .menu-card-title { font-size: 12px; letter-spacing: 1px; }
  .menu-card-desc { min-height: 26px; font-size: 10px; }
  .menu-card-icon { height: 201px; }
  /* +5 over the 12px side padding compensates the card's scale(1.03) — visible
     gutters end up ≈12px on both axes. */
  .menu-grid { gap: 17px; }
}

/* ============================================================
   IMAGE-SAVE PROTECTION on zoom overlays
   Player photos shown in the zoomed cards must NOT trigger the
   browser's "Save image" / context menu on long-press. We disable
   the iOS callout, drag, selection and pointer events on the imgs,
   and add a transparent shield over the photo-wrap that swallows
   long-press events without breaking the close-on-outside-tap.
   ============================================================ */
#top25-zoom-overlay .t25z-photo,
#top25-zoom-overlay .t25z-wc-logo,
#album-zoom-overlay .card-photo,
#album-zoom-overlay .zoom-wc-logo,
#album-zoom-overlay .card .card-photo {
  pointer-events: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  -khtml-user-drag: none !important;
  user-drag: none !important;
}
#top25-zoom-overlay,
#album-zoom-overlay {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Transparent shield over photo-wrap — sits ABOVE the img but below
   all foreground badges (rank, flag, OVR, WC logo, rarity pill which
   are z-index 3-6). Blocks long-press from ever reaching the img. */
#top25-zoom-overlay .t25z-photo-wrap::after,
#album-zoom-overlay .card-photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  pointer-events: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

/* ============================================================
   TOP LEGACY — 10 iconic, eternal football legends (showcase)
   ============================================================ */
.legacy-hero {
  text-align: center;
  padding: 24px 16px 10px;
  position: relative;
}
.legacy-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 34px; letter-spacing: 4px; font-weight: 900;
  background: linear-gradient(180deg, #fff 0%, #ffd24a 40%, #ff8a00 80%, #a30000 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  text-shadow: 0 0 32px rgba(255,210,74,0.25);
  filter: drop-shadow(0 4px 12px rgba(255,138,0,0.4));
}
.legacy-sub {
  font-size: 14px; color: rgba(255,255,255,0.78);
  margin-top: 8px;
}
.legacy-stat {
  display: inline-flex; align-items: baseline; gap: 6px;
  margin-top: 14px;
  background: linear-gradient(135deg, rgba(255,210,74,0.22), rgba(163,0,0,0.18));
  border: 2px solid rgba(255,210,74,0.6);
  padding: 8px 22px; border-radius: 24px;
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  box-shadow: 0 0 22px rgba(255,210,74,0.3);
}
.legacy-stat > :first-child { font-size: 22px; }
.legacy-stat > :last-child { font-size: 18px; color: #ffd24a; }
@media (max-width: 480px) {
  .legacy-title { font-size: 24px; letter-spacing: 2.5px; }
}

.legacy-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  padding: 22px 16px 28px;
  max-width: 1180px;
  margin: 0 auto;
}
@media (max-width: 980px) { .legacy-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
@media (max-width: 720px) { .legacy-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (max-width: 480px) { .legacy-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px 10px 22px; } }

.legacy-cell {
  position: relative;
  padding-bottom: 22px; /* leave room for the rank chip pinned to the bottom */
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
  transition: transform 0.25s;
}
.legacy-cell:hover { transform: translateY(-6px); }
.legacy-rank {
  position: absolute;
  bottom: -4px; left: 50%; transform: translateX(-50%);
  z-index: 4;
  padding: 6px 18px;
  border-radius: 14px;
  background: #0a0a0a;
  color: #ffd24a;
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 14px; letter-spacing: 1px;
  border: 2px solid #ffd24a;
  box-shadow: 0 4px 14px rgba(0,0,0,0.6), 0 0 16px rgba(255,210,74,0.35);
  text-shadow: 0 0 8px rgba(255,210,74,0.6);
  white-space: nowrap;
}

/* Card itself — luxury black + gold edge, photo dominates */
.legacy-card {
  width: 100%; max-width: 200px;
  aspect-ratio: 200/300;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  /* Background only shows where the photo doesn't cover (rare) */
  background: linear-gradient(180deg, var(--lgc1, #1c2540), var(--lgc2, #0c1326));
  /* Double-gold leaf border with black bezel + halo glow for a premium feel */
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.9),
    0 0 0 3px #ffd24a,
    0 0 0 4px rgba(0,0,0,0.9),
    0 0 26px rgba(255,210,74,0.55),
    0 14px 32px rgba(0,0,0,0.75);
  display: block;
}
.legacy-holo {
  position: absolute; inset: 0;
  background:
    linear-gradient(115deg,
      transparent 30%,
      rgba(255,255,255,0.18) 45%,
      rgba(255,210,74,0.25) 50%,
      rgba(255,255,255,0.18) 55%,
      transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.85;
  animation: legacyHolo 3.6s linear infinite;
}
@keyframes legacyHolo {
  0%   { transform: translateX(-30%); }
  100% { transform: translateX(30%); }
}
/* Stamp floats over the photo at the top — gold-cut letters with a strong
   drop-shadow so they stay readable against any background. */
.legacy-stamp {
  position: absolute;
  top: 9px; left: 50%; transform: translateX(-50%);
  z-index: 6;
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 16px; letter-spacing: 4px;
  background: linear-gradient(180deg, #fff8d6 0%, #ffd24a 45%, #ff8a00 80%, #a30000 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.95))
          drop-shadow(0 0 8px rgba(255,210,74,0.65));
  white-space: nowrap;
}
.legacy-stamp.big {
  font-size: 42px; top: 18px; letter-spacing: 9px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.9))
          drop-shadow(0 0 20px rgba(255,210,74,0.75));
}

/* PHOTO is now the dominant element — fills the entire card. */
.legacy-photo-wrap {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 25%, var(--lgc1, #1c2540) 0%, #050810 95%);
}
/* Twin dark gradient: subtle top fade (stamp legibility) + heavy bottom
   fade (name + stats overlay band). */
.legacy-photo-wrap::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 12%,
    transparent 22%, transparent 50%,
    rgba(0,0,0,0.55) 72%, rgba(0,0,0,0.95) 100%);
  pointer-events: none;
}
.legacy-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%;
  display: block;
  filter: contrast(1.05) saturate(1.05);
  -webkit-user-drag: none;
}
.legacy-wc-logo {
  position: absolute;
  top: 8px; left: 8px;
  width: 24px; height: auto;
  z-index: 5;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.95));
  opacity: 0.95;
}
.legacy-flag {
  position: absolute;
  top: 8px; right: 8px;
  font-size: 22px;
  z-index: 5;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.95));
}
.legacy-flag.big { font-size: 38px; top: 18px; right: 18px; }
/* OVR badge — bigger, more dramatic, anchored bottom-left over the stats band */
.legacy-ovr {
  position: absolute;
  bottom: 58px; left: 8px;
  z-index: 5;
  background: linear-gradient(135deg, #fff8d6 0%, #ffd24a 45%, #ff8a00 100%);
  color: #1a1a1a;
  padding: 6px 10px 4px;
  border-radius: 10px;
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  line-height: 1;
  text-align: center;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.75),
    inset 0 1px 0 rgba(255,255,255,0.45);
  border: 2px solid #1a1a1a;
}
.legacy-ovr.big { padding: 12px 18px 9px; }
.legacy-ovr-num { font-size: 18px; display: block; line-height: 1; }
.legacy-ovr.big .legacy-ovr-num { font-size: 32px; }
.legacy-ovr-pos { font-size: 8px; opacity: 0.88; display: block; letter-spacing: 0.5px; margin-top: 2px; }
.legacy-ovr.big .legacy-ovr-pos { font-size: 13px; margin-top: 3px; }

/* NAME + TEAM overlay sitting just above the stats strip */
.legacy-id {
  position: absolute;
  bottom: 28px; left: 0; right: 0;
  z-index: 4;
  padding: 0 8px;
  text-align: center;
  color: #fff;
}
.legacy-name {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 13px; letter-spacing: 0.3px;
  text-transform: uppercase;
  text-shadow:
    0 2px 4px rgba(0,0,0,1),
    0 0 10px rgba(0,0,0,0.9);
  line-height: 1.1;
  color: #fff;
}
.legacy-team {
  font-size: 9px; letter-spacing: 1.5px;
  color: #ffd24a; margin-top: 3px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,1);
}
/* STATS strip at the very bottom, sitting on the photo's dark fade band */
.legacy-stats {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 4;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 3px 6px 5px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
}
.legacy-stats .legacy-stat {
  margin: 0; padding: 0; box-shadow: none;
  background: transparent !important;
  border: none !important;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-family: 'Rajdhani', sans-serif;
}
.legacy-stats .legacy-stat > :first-child {
  font-size: 7px; color: rgba(255,255,255,0.78);
  letter-spacing: 0.5px; font-weight: 700;
}
.legacy-stats .legacy-stat > :last-child {
  font-size: 13px; color: #ffd24a; font-weight: 900;
  text-shadow: 0 0 6px rgba(255,210,74,0.7), 0 1px 2px rgba(0,0,0,0.95);
}

/* ───── Legacy ZOOM overlay ───── */
#legacy-zoom-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(circle at center, rgba(20,12,0,0.95), rgba(0,0,0,0.98));
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.25s ease;
}
#legacy-zoom-overlay.show { opacity: 1; }
.legacy-zoom-stage {
  perspective: 1200px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 100%;
}
.legacy-zoom-shell {
  /* Bumped from 340/80vw → bigger overall so Legacy cards feel premium.
     NOTE: this element MUST NOT carry a transform-based CSS animation —
     bindParallax (mouse / touch tilt) drives `transform` here directly,
     and any CSS animation that sets transform overrides those inline
     updates every frame, freezing the parallax. The aura pulse + corner
     sparkles on .legacy-zoom-card still animate, so the card still feels
     alive when idle. */
  width: min(380px, 88vw);
  aspect-ratio: 200/300;
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
}
.legacy-zoom-card {
  width: 100%; height: 100%;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--lgc1, #1c2540), var(--lgc2, #0c1326));
  display: block;
  animation: legacyAura 3.4s ease-in-out infinite;
}
@keyframes legacyAura {
  0%, 100% {
    box-shadow:
      0 0 0 3px #ffd24a,
      0 0 0 5px rgba(255,210,74,0.4),
      0 0 80px rgba(255,210,74,0.75),
      0 0 140px rgba(255,138,0,0.35),
      0 24px 60px rgba(0,0,0,0.85);
  }
  50% {
    box-shadow:
      0 0 0 3px #ffd24a,
      0 0 0 6px rgba(255,210,74,0.55),
      0 0 110px rgba(255,210,74,0.95),
      0 0 180px rgba(255,138,0,0.5),
      0 24px 60px rgba(0,0,0,0.85);
  }
}
/* Ornamental sparkles in the top corners of the card — pure decoration so
   the layout doesn't shift. They twinkle out of phase with each other. */
.legacy-zoom-card::before,
.legacy-zoom-card::after {
  content: '✦';
  position: absolute;
  top: 18px;
  font-size: 16px;
  color: #ffd24a;
  z-index: 4;
  filter: drop-shadow(0 0 6px rgba(255,210,74,0.9));
  pointer-events: none;
  animation: legacySparkle 2.6s ease-in-out infinite;
}
.legacy-zoom-card::before { left: 16px; }
.legacy-zoom-card::after  { right: 16px; animation-delay: 1.3s; }
@keyframes legacySparkle {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
.legacy-zoom-photo-wrap {
  /* Photo is the dominant element — fills the entire card. The stamp,
     rank pill, OVR badge, name and stats all overlay it via absolute
     positioning anchored to .legacy-zoom-card. */
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 25%, var(--lgc1, #1c2540) 0%, #050810 95%);
}
/* Twin dark gradient: top fade for stamp + rank, heavy bottom fade for name + stats. */
.legacy-zoom-photo-wrap::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 10%,
    transparent 22%, transparent 55%,
    rgba(0,0,0,0.65) 75%, rgba(0,0,0,0.96) 100%);
  pointer-events: none;
}
.legacy-zoom-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 16%;
  display: block;
  filter: contrast(1.05) saturate(1.05);
}
.legacy-zoom-rank {
  /* Floats over the photo just below LEGACY stamp, dark backdrop for
     legibility supplied by the photo wrap's top gradient. */
  position: absolute;
  top: 76px; left: 50%; transform: translateX(-50%);
  z-index: 5;
  padding: 7px 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffd24a 0%, #ff8a00 60%, #d97700 100%);
  color: #1a1a1a;
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 17px; letter-spacing: 1.8px;
  border: 2px solid rgba(0,0,0,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 6px 18px rgba(255,138,0,0.7),
    0 0 26px rgba(255,210,74,0.55);
}
/* Name + team band sits ABOVE the stats strip, anchored bottom of card. */
.legacy-zoom-id {
  position: absolute;
  bottom: 88px; left: 0; right: 0;
  z-index: 4;
  padding: 0 14px;
  text-align: center;
  color: #fff;
}
.legacy-zoom-name {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 22px; letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow:
    0 3px 6px rgba(0,0,0,1),
    0 0 14px rgba(0,0,0,0.95),
    0 0 22px rgba(255,210,74,0.35);
  color: #fff;
}
.legacy-zoom-team {
  font-size: 12px; letter-spacing: 2.5px;
  color: #ffd24a; margin-top: 6px;
  text-shadow: 0 2px 4px rgba(0,0,0,1);
  display: inline-block; position: relative; padding-bottom: 6px;
  font-weight: 800;
}
.legacy-zoom-team::after {
  content: '';
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 46px; height: 2px;
  background: linear-gradient(90deg, transparent, #ffd24a, transparent);
}
/* Stats strip at the very bottom of the card. */
.legacy-zoom-stats {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 4;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 10px 12px 16px;
}
/* The big OVR badge in the zoom view — anchored bottom-left over the
   photo, larger than the mini-card version. */
.legacy-zoom-card .legacy-ovr.big {
  position: absolute;
  bottom: 178px; left: 14px;
  z-index: 5;
}
.lgz-stat {
  background: linear-gradient(180deg, rgba(255,210,74,0.10), rgba(0,0,0,0.55));
  border: 1.5px solid rgba(255,210,74,0.6);
  border-radius: 12px;
  text-align: center;
  padding: 8px 0 7px;
  display: flex; flex-direction: column; gap: 3px;
  font-family: 'Orbitron', sans-serif;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,210,74,0.25);
}
.lgz-stat > :first-child { font-size: 9px; color: rgba(255,255,255,0.85); letter-spacing: 1.5px; }
.lgz-stat > :last-child  { font-size: 20px; color: #ffd24a; font-weight: 900; text-shadow: 0 0 12px rgba(255,210,74,0.55); }
.legacy-zoom-hint {
  color: rgba(255,255,255,0.65);
  font-size: 12px;
  text-align: center;
}

/* Menu card icon — legacy uses the .png with no webp variant. */
.menu-card[data-go="legacy"] .menu-card-icon {
  filter: drop-shadow(0 4px 12px rgba(255,138,0,0.5));
}

/* Locked legacy slots reuse the SAME card-back image as Top 25, framed with
   the legacy-gold border so it still reads as "legendary tier". */
/* ════════════════════════════════════════════════════════════════════
   ETERNAL — single endgame card unlocked at album 100%. Sits above the
   TOP LEGACY 10 in its own section with even more dramatic styling:
   rainbow holo aura, ETERNAL stamp, no team flag (universal).
   ════════════════════════════════════════════════════════════════════ */
.eternal-section {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 16px 18px;
  width: 100%; max-width: 980px; margin: 0 auto;
}
.eternal-hero {
  text-align: center;
  margin: 4px 0 36px;
}
.eternal-hero-title {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: clamp(28px, 6vw, 46px);
  letter-spacing: 8px;
  background: linear-gradient(90deg, #ffd24a 0%, #ff8a00 25%, #c63cff 50%, #5ed3ff 75%, #ffd24a 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.7));
  animation: eternalGradientShift 6s linear infinite;
}
@keyframes eternalGradientShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.eternal-hero-sub {
  font-size: clamp(11px, 2.4vw, 14px);
  color: rgba(255,255,255,0.85);
  letter-spacing: 1px;
  margin-top: 6px;
  font-weight: 600;
}
.eternal-grid {
  display: flex; justify-content: center;
  width: 100%;
}
.eternal-card {
  width: 100%; max-width: 280px;
  aspect-ratio: 200/300;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 25%, #1a0f3a 0%, #050010 95%);
  cursor: pointer;
  /* Triple ring: gold + rainbow + gold, with pulsing aura */
  animation: eternalAura 4s ease-in-out infinite;
}
@keyframes eternalAura {
  0%, 100% {
    box-shadow:
      0 0 0 2px #ffd24a,
      0 0 0 4px rgba(0,0,0,0.85),
      0 0 0 6px #ffd24a,
      0 0 35px rgba(255,210,74,0.7),
      0 0 70px rgba(198,60,255,0.4),
      0 0 110px rgba(94,211,255,0.3),
      0 18px 42px rgba(0,0,0,0.85);
  }
  50% {
    box-shadow:
      0 0 0 2px #ffd24a,
      0 0 0 4px rgba(0,0,0,0.85),
      0 0 0 6px #ffd24a,
      0 0 55px rgba(255,210,74,0.95),
      0 0 100px rgba(198,60,255,0.6),
      0 0 150px rgba(94,211,255,0.5),
      0 18px 42px rgba(0,0,0,0.85);
  }
}
.eternal-card:hover { transform: translateY(-4px); transition: transform 0.25s; }
.eternal-photo-wrap {
  position: absolute; inset: 0;
  overflow: hidden;
}
.eternal-photo-wrap::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.15) 12%,
    transparent 25%, transparent 55%,
    rgba(0,0,0,0.6) 75%, rgba(0,0,0,0.98) 100%);
  pointer-events: none;
}
.eternal-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%;
  display: block;
  filter: contrast(1.08) saturate(1.15);
}
.eternal-holo {
  position: absolute; inset: 0;
  z-index: 3;
  background:
    linear-gradient(115deg,
      transparent 25%,
      rgba(255,210,74,0.25) 40%,
      rgba(198,60,255,0.22) 50%,
      rgba(94,211,255,0.25) 60%,
      transparent 75%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.9;
  animation: eternalHolo 4.5s linear infinite;
}
@keyframes eternalHolo {
  0%   { transform: translateX(-30%); }
  100% { transform: translateX(30%); }
}
.eternal-stamp {
  position: absolute;
  top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 6;
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 20px; letter-spacing: 6px;
  background: linear-gradient(90deg, #ffd24a 0%, #ff8a00 25%, #c63cff 50%, #5ed3ff 75%, #ffd24a 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.95)) drop-shadow(0 0 10px rgba(255,210,74,0.75));
  animation: eternalGradientShift 5s linear infinite;
  white-space: nowrap;
}
.eternal-ovr {
  position: absolute;
  bottom: 60px; left: 10px;
  z-index: 5;
  background: linear-gradient(135deg, #fff8d6 0%, #ffd24a 40%, #ff8a00 100%);
  color: #1a0f3a;
  padding: 7px 11px 5px;
  border-radius: 11px;
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  line-height: 1;
  text-align: center;
  box-shadow: 0 5px 14px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.5);
  border: 2px solid #1a0f3a;
}
.eternal-ovr-num { font-size: 22px; display: block; line-height: 1; }
.eternal-ovr-pos { font-size: 9px; opacity: 0.85; display: block; letter-spacing: 0.8px; margin-top: 2px; }
.eternal-name {
  position: absolute;
  bottom: 28px; left: 0; right: 0;
  z-index: 4;
  text-align: center; padding: 0 10px;
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 15px; letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 3px 6px rgba(0,0,0,1), 0 0 18px rgba(255,210,74,0.6);
}
.eternal-team {
  position: absolute;
  bottom: 12px; left: 0; right: 0;
  z-index: 4;
  text-align: center; padding: 0 10px;
  font-size: 10px; letter-spacing: 2.5px;
  color: #ffd24a;
  text-shadow: 0 2px 4px rgba(0,0,0,1);
  font-weight: 800;
}

/* LOCKED state — placeholder shown until the album is 100% complete. */
.eternal-card.eternal-locked {
  cursor: default;
  background: radial-gradient(120% 90% at 50% 25%, #1a1530 0%, #050010 95%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  padding: 20px;
  /* Dimmer aura so the locked state reads as "not yet" without losing the
     premium feel. */
  animation: none;
  box-shadow:
    0 0 0 2px rgba(255,210,74,0.5),
    0 0 0 4px rgba(0,0,0,0.85),
    0 0 0 5px rgba(255,210,74,0.25),
    0 0 22px rgba(255,210,74,0.25),
    0 14px 28px rgba(0,0,0,0.75);
}
.eternal-locked-stamp {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  font-size: 22px; letter-spacing: 7px;
  background: linear-gradient(90deg, #ffd24a, #c63cff, #5ed3ff, #ffd24a);
  background-size: 200% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: eternalGradientShift 6s linear infinite;
  opacity: 0.85;
}
.eternal-locked-icon {
  font-size: 56px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.85)) drop-shadow(0 0 16px rgba(255,210,74,0.3));
  opacity: 0.7;
}
.eternal-locked-msg {
  font-size: 13px; letter-spacing: 0.5px;
  color: rgba(255,255,255,0.78);
  text-align: center;
  padding: 0 4px; line-height: 1.4;
  font-weight: 600;
}
.eternal-locked-progress { width: 100%; }
.eternal-locked-bar {
  width: 100%; height: 8px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,210,74,0.3);
}
.eternal-locked-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd24a, #ff8a00);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255,210,74,0.6);
  transition: width 0.4s;
}
.eternal-locked-count {
  margin-top: 6px;
  text-align: center;
  font-family: 'Orbitron', sans-serif; font-weight: 800;
  font-size: 11px; letter-spacing: 1.2px;
  color: #ffd24a;
}

/* The ETERNAL zoom card reuses the legacy-zoom shell with extra flourishes. */
.eternal-zoom-card {
  animation: eternalAura 4s ease-in-out infinite !important;
}

.legacy-cell.locked { cursor: help; }
.legacy-cell.locked:hover { transform: translateY(-2px); }
.legacy-card.legacy-back {
  width: 100%; max-width: 200px;
  aspect-ratio: 200/300;
  background-image: url('../assets/cards/back.webp');
  background-size: cover; background-position: center;
  background-color: #0a1532;
  border-radius: 16px;
  border: 3px solid rgba(255,210,74,0.35);
  box-shadow:
    0 0 0 2px rgba(255,210,74,0.4),
    0 0 22px rgba(255,210,74,0.35),
    0 14px 32px rgba(0,0,0,0.7);
  position: relative;
}
/* Locked rank chip stays gold so the user still sees which slot is which */
.legacy-cell.locked .legacy-rank {
  background: rgba(20, 24, 42, 0.92);
  color: #ffd24a;
  border-color: rgba(255,210,74,0.5);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* ════════════════════════════════════════════════════════════════
   World Cup champion screen — celebration overlay shown when the
   player wins the Mundial. Three actions: share, replay same team,
   change team. Designed to feel CEREMONIAL but fit in ONE viewport
   on mobile (no scroll allowed — see modal-content override below).
   ════════════════════════════════════════════════════════════════ */
.modal-content:has(.champion-screen) {
  max-height: 100dvh;
  max-height: 100vh;
  overflow: hidden;
  padding: 14px 14px 12px;
}
.modal-content:has(.champion-screen) .modal-close { z-index: 5; }
.champion-screen {
  text-align: center;
  padding: 2px 2px 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,210,74,0.22) 0%, transparent 60%);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100dvh - 60px);
  max-height: calc(100vh - 60px);
}
.champion-star {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 0 22px rgba(255,210,74,0.95)) drop-shadow(0 6px 14px rgba(0,0,0,0.55));
  animation: champStarFloat 2.6s ease-in-out infinite;
}
@keyframes champStarFloat {
  0%, 100% { transform: scale(1) rotate(-5deg); }
  50%      { transform: scale(1.08) rotate(5deg); }
}
.champion-title {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 1.5px;
  line-height: 1.1;
  background: linear-gradient(180deg, #fff8d6 0%, #ffd24a 45%, #ff8a00 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 4px 12px rgba(255,138,0,0.4);
}
.champion-team {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(160deg, var(--cc1, #1c2540) 0%, var(--cc2, #0c1326) 100%);
  border: 2px solid rgba(255,210,74,0.6);
  padding: 6px 16px;
  border-radius: 12px;
  margin: 0 auto;
  box-shadow: 0 6px 16px rgba(0,0,0,0.5), inset 0 0 14px rgba(255,210,74,0.1);
}
.champion-flag { font-size: 22px; }
.champion-name {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 1.5px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.55);
}
.champion-trophies-pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 auto;
  background: rgba(255,210,74,0.16);
  border: 1px solid rgba(255,210,74,0.55);
  border-radius: 999px;
  padding: 4px 14px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: #ffd24a;
  filter: drop-shadow(0 0 8px rgba(255,210,74,0.55));
}
.champion-trophies-num { font-size: 10px; letter-spacing: 1px; opacity: 0.9; }
.champion-rewards {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center;
  margin: 2px 0;
}
.champion-rewards span {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  padding: 4px 8px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.champion-actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px;
}
.champion-actions .primary-btn {
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 12px;
}
.champion-btn-share {
  background: linear-gradient(135deg, #ff5e79, #d63384 50%, #6a1b9a) !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 14px rgba(214,51,132,0.5), 0 6px 14px rgba(0,0,0,0.5) !important;
}
.champion-btn-replay {
  background: linear-gradient(135deg, #ffd24a, #ff8a00) !important;
  color: #1a1a1a !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 14px rgba(255,210,74,0.5), 0 6px 14px rgba(0,0,0,0.5) !important;
  font-weight: 900;
}
.champion-btn-change {
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06)) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
}
/* Phone-sized screens — squeeze further so 4 reward chips, 3 buttons and
   the title all fit inside ~700px height without scrolling. */
@media (max-height: 720px){
  .champion-star  { font-size: 50px; }
  .champion-title { font-size: 20px; letter-spacing: 1px; }
  .champion-team  { padding: 5px 14px; }
  .champion-name  { font-size: 14px; }
  .champion-flag  { font-size: 18px; }
  .champion-trophies-pill { font-size: 12px; padding: 3px 10px; }
  .champion-rewards span  { font-size: 9px; padding: 3px 7px; }
  .champion-actions .primary-btn { font-size: 11px; padding: 8px 12px; }
}


/* ==========================================================================
   TEAM SLOT TABS — 3-team selector FLOATING over the pitch top edge.
   Absolute-positioned so it takes ZERO vertical space — bench stays visible
   at the bottom of the viewport so users still see where to manage the
   suplentes row.
   ========================================================================== */
.team-slot-tabs {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(10,14,28,0.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  pointer-events: auto;
}

.team-slot-tab {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  color: #c8d0dc;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(.2,.8,.2,1), border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  line-height: 1;
}
.team-slot-tab:hover { border-color: rgba(255,210,74,0.45); color: #fff; }
.team-slot-tab.is-active {
  background: linear-gradient(135deg, rgba(255,210,74,0.30), rgba(255,138,0,0.20));
  border-color: #ffd24a;
  box-shadow: 0 2px 8px rgba(255,138,0,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
  color: #ffd24a;
}
.team-slot-tab-num   { display: none; }
.team-slot-tab-label { font-size: 12px; }
/* Mini flags row inline next to label — compact one-row identifier */
.team-slot-tab-flags {
  display: inline-flex; gap: 1px;
  font-size: 10px;
  line-height: 1;
}
.team-slot-tab-flags .empty-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.22);
  align-self: center;
}
.team-slot-tab-active-badge {
  display: none;
  font-family: 'Rajdhani', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(255,210,74,0.30);
  color: #ffd24a;
  line-height: 1.1;
}
.team-slot-tab.is-active .team-slot-tab-active-badge { display: inline-block; }

/* Slide animation when switching slot — formation-pitch + bench slide out
   and back in. Triggered by adding .team-slot-switching to #screen-team. */
#screen-team.team-slot-switching .formation-pitch,
#screen-team.team-slot-switching .bench-row {
  animation: teamSlotSwitch 0.42s cubic-bezier(.2,.8,.2,1);
}
@keyframes teamSlotSwitch {
  0%   { opacity: 0; transform: translateX(var(--slot-dir, 40px)); }
  60%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ==========================================================================
   PLAY-ANIMATION FEEDBACK — cinematic flourishes during ball replay.
   ── Card hit ─── scale + tilt the card toward the next zone, then bounce
      back. GPU-friendly (transform-only, ~250 ms).
   ── 3D stat number ─── pops above the impacted zone with a slight
      X-axis rotation so it reads as 3D without WebGL.
   ── Fire trail ─── small radial-gradient blobs spawned behind the ball
      via JS RAF. Transform/opacity only; auto-removed on animationend.
   Every effect uses will-change + composited transforms so mid-tier
   phones can keep 60 fps. The cardHit + stat-pop steps are skipped on
   2-core / 2 GB devices (Battle._isLowPerf()).
   ========================================================================== */
/* ─── MARVEL SNAP-STYLE IMPACT EFFECTS ───────────────────────────────────
   Palette: cyan #4ee9ff + magenta #ff3ec9 + gold #ffd24a + white #fff.
   The card slam now glows cyan→magenta (was orange/gold). Layered over
   the slam: holographic rainbow sweep, two concentric energy rings, a
   white core flash, and a radial burst of eight geometric sparks. */
.pz-card-hit {
  will-change: transform, filter;
  animation: pzCardHit 0.62s cubic-bezier(.34,1.56,.64,1);
  transform-origin: 50% 70%;
}
@keyframes pzCardHit {
  0%   { transform: scale(1)    rotateZ(0deg);                                   filter: brightness(1)   drop-shadow(0 0 0 transparent); }
  18%  { transform: scale(1.24) rotateZ(var(--hit-tilt, -10deg));                filter: brightness(1.55) drop-shadow(0 0 22px rgba(78,233,255,0.95)) drop-shadow(0 0 14px rgba(255,255,255,0.85)); }
  48%  { transform: scale(0.93) rotateZ(calc(var(--hit-tilt, -10deg) * -0.45));  filter: brightness(1.15) drop-shadow(0 0 12px rgba(255,62,201,0.65)); }
  75%  { transform: scale(1.06) rotateZ(0deg); }
  100% { transform: scale(1)    rotateZ(0deg);                                   filter: brightness(1)   drop-shadow(0 0 0 transparent); }
}

/* Holographic rainbow sweep across the card — the Marvel Snap "shine".
   Pure CSS pseudo-element, no extra DOM. ::after is layered above the
   card content with mix-blend-mode:screen so it brightens highlights. */
.pz-holo-sweep { position: relative; }
.pz-holo-sweep::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent             32%,
    rgba(78,233,255,0.55)   44%,
    rgba(255,255,255,0.92)  50%,
    rgba(255,62,201,0.55)   56%,
    transparent             68%);
  background-size: 280% 280%;
  background-position: 110% -10%;
  mix-blend-mode: screen;
  animation: pzHoloSweep 0.7s ease-out forwards;
  z-index: 8;
}
@keyframes pzHoloSweep {
  0%   { background-position: 110% -10%; opacity: 0; }
  18%  { opacity: 1; }
  100% { background-position: -110% 110%; opacity: 0; }
}

/* Radial core flash — cyan-tinted white, brief and bright. */
.play-zone-flash {
  position: absolute;
  top: 50%; left: 50%;
  width: 100px; height: 100px;
  margin: -50px 0 0 -50px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.98) 0%,
    rgba(190,245,255,0.85) 25%,
    rgba(78,233,255,0.45)  50%,
    transparent            75%);
  mix-blend-mode: screen;
  animation: playZoneFlash 0.45s cubic-bezier(.2,.8,.2,1) forwards;
  will-change: transform, opacity;
  z-index: 55;
}
@keyframes playZoneFlash {
  0%   { opacity: 0;    transform: scale(0.2); }
  35%  { opacity: 0.95; transform: scale(1.6); }
  100% { opacity: 0;    transform: scale(2.8); }
}

/* Concentric energy rings — cyan inner + magenta outer, staggered.
   Pure colours (no mix-blend-mode) so they pop against the dark .pz-card
   background. Border-only rings so the card stays readable. */
.play-zone-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  pointer-events: none;
  border-radius: 50%;
  border: 3px solid transparent;
  animation: playZoneRing 0.7s cubic-bezier(.2,.85,.2,1) forwards;
  will-change: transform, opacity, border-width;
  z-index: 56;
}
.play-zone-ring.ring-cyan {
  border-color: #4ee9ff;
  box-shadow:
    0 0 18px rgba(78,233,255,0.95),
    inset 0 0 10px rgba(78,233,255,0.55);
}
.play-zone-ring.ring-magenta {
  border-color: #ff3ec9;
  box-shadow:
    0 0 18px rgba(255,62,201,0.85),
    inset 0 0 10px rgba(255,62,201,0.50);
}
@keyframes playZoneRing {
  0%   { opacity: 0;   transform: scale(0.10); border-width: 4px; }
  22%  { opacity: 1;   transform: scale(1.00); border-width: 3px; }
  100% { opacity: 0;   transform: scale(3.20); border-width: 1px; }
}

/* Marvel Snap-style geometric sparks — bigger vertical chips fired
   radially outward at 45° intervals. CSS vars --dx/--dy/--rot are
   injected by JS for per-spark randomisation. No mix-blend-mode —
   pure colours so they read on the dark .pz-card background. */
.play-zone-spark {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 22px;
  margin: -11px 0 0 -4px;
  pointer-events: none;
  border-radius: 2px;
  animation: playZoneSpark 0.55s cubic-bezier(.25,.6,.3,1) forwards;
  will-change: transform, opacity;
  z-index: 57;
}
.play-zone-spark.spark-cyan {
  background: linear-gradient(180deg, #ffffff 0%, #4ee9ff 60%, #0083ff 100%);
  box-shadow: 0 0 14px rgba(78,233,255,0.98), 0 0 4px #ffffff;
}
.play-zone-spark.spark-gold {
  background: linear-gradient(180deg, #fffce0 0%, #ffd24a 60%, #ff8800 100%);
  box-shadow: 0 0 14px rgba(255,210,74,0.98), 0 0 4px #ffffff;
}
@keyframes playZoneSpark {
  0%   { opacity: 0; transform: translate(0,0)                            rotate(var(--rot, 0deg)) scaleY(0.4); }
  18%  { opacity: 1; transform: translate(calc(var(--dx,0px) * 0.3), calc(var(--dy,0px) * 0.3)) rotate(var(--rot, 0deg)) scaleY(1.2); }
  100% { opacity: 0; transform: translate(var(--dx,0px), var(--dy,0px))    rotate(calc(var(--rot, 0deg) + 90deg)) scaleY(0.55); }
}

/* ─── PLACEMENT BURST — fired the instant the user drops a card into a zone.
   Bigger than the per-zone impact during resolve so the "card placed"
   feedback reads as the louder event (matches Marvel Snap's pacing: the
   PLAY is the dramatic frame, the resolve is a polish pass on top). */
.play-zone.pz-zone-slam {
  animation: pzZoneSlam 0.7s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pzZoneSlam {
  0%   { transform: scale(1);    box-shadow: 0 0 18px rgba(74,222,128,0.55); }
  18%  { transform: scale(1.06); box-shadow: 0 0 48px rgba(78,233,255,0.95), 0 0 80px rgba(255,62,201,0.55); }
  45%  { transform: scale(0.98); box-shadow: 0 0 28px rgba(78,233,255,0.65); }
  100% { transform: scale(1);    box-shadow: 0 0 18px rgba(74,222,128,0.55); }
}
/* Larger second-pass ring for the placement only — bigger final scale. */
.play-zone-ring.pz-place-bigring {
  width: 80px; height: 80px;
  margin: -40px 0 0 -40px;
  animation: pzPlaceBigRing 1.0s cubic-bezier(.2,.85,.2,1) forwards;
}
@keyframes pzPlaceBigRing {
  0%   { opacity: 0; transform: scale(0.10); border-width: 5px; }
  22%  { opacity: 1; transform: scale(1.20); border-width: 4px; }
  100% { opacity: 0; transform: scale(4.50); border-width: 1px; }
}

.play-stat-pop {
  position: absolute;
  top: 30%; left: 50%;
  z-index: 60;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 40px;
  color: #fff8d4;
  pointer-events: none;
  /* Gold extrude (depth) + cyan inner halo + magenta outer aura — Marvel Snap power-up number */
  text-shadow:
    0 1px 0 #ffd24a,
    0 2px 0 #ff9a1a,
    0 3px 0 #d36410,
    0 4px 0 #8a4707,
    0 5px 2px rgba(0,0,0,0.55),
    0 6px 18px rgba(0,0,0,0.85),
    0 0 24px rgba(78,233,255,0.95),
    0 0 48px rgba(255,62,201,0.55);
  transform: translate(-50%, -50%);
  animation: playStatPop 1.05s cubic-bezier(.2,.8,.2,1) forwards;
  will-change: transform, opacity;
  perspective: 700px;
  letter-spacing: 1px;
}
.play-stat-pop::before {
  content: '';
  position: absolute;
  inset: -10px -16px;
  background: radial-gradient(ellipse at center,
    rgba(78,233,255,0.45) 0%,
    rgba(255,62,201,0.22) 45%,
    transparent           72%);
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
@keyframes playStatPop {
  0%   { opacity: 0; transform: translate(-50%, -10%) scale(0.3) rotateX(-80deg); }
  22%  { opacity: 1; transform: translate(-50%, -55%) scale(1.35) rotateX(0deg); }
  55%  { opacity: 1; transform: translate(-50%, -75%) scale(1.0)  rotateX(0deg); }
  100% { opacity: 0; transform: translate(-50%, -115%) scale(0.7) rotateX(30deg); }
}

/* Ball plasma glow while flying — Marvel Snap cyan→magenta core via
   drop-shadow. Class toggled by Battle._startFireTrail/_stopFireTrail.
   Method name kept for backwards compatibility — the trail is now plasma. */
#battle-ball.ball-on-fire {
  filter: brightness(1.30) drop-shadow(0 0 12px #4ee9ff) drop-shadow(0 0 22px #ff3ec9);
  animation: ballFlicker 0.18s ease-in-out infinite alternate;
}
@keyframes ballFlicker {
  from { filter: brightness(1.22) drop-shadow(0 0 10px #4ee9ff) drop-shadow(0 0 18px #ff3ec9); }
  to   { filter: brightness(1.42) drop-shadow(0 0 16px #ffffff) drop-shadow(0 0 28px #00d4ff); }
}

/* Plasma trail particle — white core → cyan halo → magenta haze.
   screen-blended so overlapping particles brighten into a continuous wake. */
.ball-trail-particle {
  position: absolute;
  width: 38px; height: 38px;
  margin-left: -19px; margin-top: -19px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,1.00) 0%,
      rgba(190,245,255,0.95) 14%,
      rgba(78,233,255,0.88)  30%,
      rgba(255,62,201,0.62)  52%,
      rgba(150,30,200,0.30)  72%,
      transparent            88%);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(1px);
  animation: ballTrailFade 0.62s ease-out forwards;
  will-change: transform, opacity;
  transform: translate(var(--tx,0px), 0) scale(var(--sc,1)) rotate(var(--rot,0deg));
  z-index: 11;
}
@keyframes ballTrailFade {
  0%   { opacity: 1.0;  transform: translate(var(--tx,0px), 0)    scale(calc(var(--sc,1) * 1.0))  rotate(var(--rot,0deg)); }
  30%  { opacity: 0.95; transform: translate(var(--tx,0px), 4px)  scale(calc(var(--sc,1) * 1.05)) rotate(calc(var(--rot,0deg) + 18deg)); }
  100% { opacity: 0;    transform: translate(var(--tx,0px), 14px) scale(calc(var(--sc,1) * 0.35)) rotate(calc(var(--rot,0deg) + 60deg)); }
}

/* Reduced-motion users: keep the play readable but kill the trail + tilt. */
@media (prefers-reduced-motion: reduce) {
  .pz-card-hit, .play-zone-flash,
  .play-zone-ring, .play-zone-spark { animation: none !important; }
  .pz-holo-sweep::after { display: none !important; }
  .ball-trail-particle { display: none !important; }
  #battle-ball.ball-on-fire { animation: none; filter: none; }
  .play-stat-pop { animation-duration: 0.4s; }
}

/* ==========================================================================
   DRAG-AND-DROP — drop hand-tile cards directly into a play-zone instead of
   the tap-tap flow. Tap-to-select still works; this is purely additive.
   .drop-target  = applied to every play-zone while a drag is in progress
   .drop-hover   = applied to the zone currently under the pointer
   .hand-tile-ghost = the cloned tile that follows the pointer
   ========================================================================== */
#play-zones .play-zone.drop-target {
  outline: 2px dashed rgba(255, 210, 74, 0.55);
  outline-offset: -4px;
  animation: dropTargetPulse 1s ease-in-out infinite;
  transition: outline-color 0.18s, background-color 0.18s, transform 0.18s;
}
/* While a drag is in progress, freeze pointer-events on EVERY descendant
   of the zone (player photo, name chip, gold total badge, remove button).
   Without this, dropping on top of a player photo lands on the photo and
   the drag never resolves to the zone. The zone itself still receives the
   pointer thanks to elementsFromPoint — only its children are inert. */
#play-zones .play-zone.drop-target * {
  pointer-events: none;
}
#play-zones .play-zone.drop-hover {
  outline: 3px solid #ffd24a;
  background-color: rgba(255, 210, 74, 0.18);
  transform: scale(1.04);
  box-shadow: 0 0 28px rgba(255, 210, 74, 0.55);
  animation: none;
}
@keyframes dropTargetPulse {
  0%, 100% { outline-color: rgba(255, 210, 74, 0.45); }
  50%      { outline-color: rgba(255, 210, 74, 0.85); }
}
.hand-tile-ghost {
  opacity: 0.92;
  transform: scale(1.08) rotate(-3deg);
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.6))
          drop-shadow(0 0 14px rgba(255, 210, 74, 0.45));
  will-change: transform, left, top;
  border-radius: 12px;
}
@media (prefers-reduced-motion: reduce) {
  #play-zones .play-zone.drop-target { animation: none; }
  .hand-tile-ghost { transform: none; }
}

/* ==========================================================================
   TEAM BUILDER — ✕ remove button + drag-drop visuals
   Mirrors the in-match pz-remove and play-zone.drop-target language so
   the Team Builder feels consistent with the Battle screen.
   ========================================================================== */
.formation-slot .fs-remove {
  position: absolute;
  top: -8px; right: -8px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ff4b4b 0%, #c81e1e 100%);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.85);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,0.55);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, background 0.15s;
}
.formation-slot .fs-remove:hover { transform: scale(1.12); background: linear-gradient(135deg, #ff6363 0%, #e02525 100%); }
.formation-slot .fs-remove:active { transform: scale(0.92); }

/* While a card is being dragged from the picker, every valid slot pulses
   with the same dashed gold outline used in the match play-zones. */
.formation-slot.drop-target {
  outline: 2px dashed rgba(255, 210, 74, 0.55);
  outline-offset: -4px;
  animation: dropTargetPulse 1s ease-in-out infinite;
  transition: outline-color 0.18s, background-color 0.18s, transform 0.18s;
}
.formation-slot.drop-target * { pointer-events: none; }
.formation-slot.drop-hover {
  outline: 3px solid #ffd24a;
  background-color: rgba(255, 210, 74, 0.18);
  transform: scale(1.05);
  box-shadow: 0 0 28px rgba(255, 210, 74, 0.55);
  animation: none;
}

/* Picker cards: JS owns the full gesture (touch-action: none). Horizontal
   scroll is run in JS with velocity-tracked momentum so it still feels
   native, while ANY non-horizontal motion drops straight into the drag
   path without waiting on the browser to commit to scroll. */
#player-picker .card[data-card-id] {
  cursor: grab;
  -webkit-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
          user-drag: none;
  -webkit-touch-callout: none;
  touch-action: none;
}
#player-picker .card[data-card-id] > * { pointer-events: none; }
#player-picker .card[data-card-id] img { -webkit-user-drag: none; user-drag: none; }

/* ============================================================
   MAIN MENU — EA-style mobile redesign (V1, no-scroll)
   The whole menu screen lives inside a fixed-height flex column
   so it fits ANY phone without scrolling. Top hero + middle 3-col
   grid + bottom info strip. Existing per-tile CSS still applies,
   we just shrink everything to fit the available vertical budget.
   Desktop keeps the old centered grid (no hero, no info bar).
   ============================================================ */
@media (max-width: 720px) {
  #screen-menu {
    /* Fixed height = viewport minus the top HUD (~52px) and bottom HUD (~43px)
       so the menu never overflows even on the shortest phone (iPhone SE at
       568px tall has ~470px to work with). 100dvh accounts for iOS's dynamic
       browser chrome better than 100vh. The 95px is the combined HUD budget
       — keep it in sync if the HUD ever changes height. */
    height: calc(100vh - 95px);
    height: calc(100dvh - 95px - env(safe-area-inset-bottom, 0px));
    padding: 8px 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-start;
    overflow: hidden;
    min-height: 0;
    /* Stadium background — image at assets/menu/menu-bg.webp. The overlay
       is intentionally light so the stadium photo dominates; titles + hero
       text rely on their own per-element backings (rgba bands and text
       shadows) for legibility, not on a heavy global dim. */
    background:
      linear-gradient(180deg, rgba(5,8,16,0.25) 0%, rgba(5,8,16,0.15) 35%, rgba(5,8,16,0.55) 100%),
      url('../assets/menu/menu-bg.webp') center top / cover no-repeat,
      radial-gradient(ellipse at center, #1f2c4d 0%, #050810 100%);
  }
  /* Kill the old purple/red glow pseudo-element so the stadium photo shows. */
  #screen-menu::before { display: none; }
  /* Override the legacy padding-bottom hack from the scrollable layout. */
  body:not(.hud-hidden) #screen-menu { padding-bottom: 6px; }

  /* ─── HERO ─────────────────────────────────────────────────── */
  /* Compact hero so the grid can use proper portrait tiles below
     (matches the new EA-style reference where each tile is taller
     than wide). */
  .menu-hero {
    flex: 0 0 18vh;
    min-height: 120px;
    max-height: 180px;
    width: 100%;            /* hero was collapsing to ~94px without this */
    align-self: stretch;
    position: relative;
    /* Allow photos to extend 4px BELOW the hero (under the first row of
       menu icons). The menu-grid z-index is 5 — higher than the photos'
       z-index 1 — so the bottom 4px tucks under the buttons cleanly. */
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    display: grid;
    /* Explicit % per track so the centre column doesn't collapse — using
       minmax(0,1fr) on the sides was letting them eat the centre. */
    grid-template-columns: 22% 56% 22%;
    grid-template-rows: 1fr;
    align-items: stretch;
    cursor: pointer;
    text-align: left;
    gap: 0;
    margin-top: 0;
    z-index: 0;
  }
  .menu-hero-text { display: none !important; }
  /* Logo column — fills full height of hero, never hidden (z-index 10). */
  .menu-hero-logo {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 5px breathing room above (under the top HUD) and 5px below (above the
       first menu-grid row) — user spec. */
    padding: 5px 0;
    overflow: visible;
    position: relative;
    z-index: 10;
  }
  .menu-hero-logo img {
    /* Natural-aspect scaling capped by both bounds — vh on max-height (not
       percent) bypasses the flex bug where max-height:100% was ignored.
       The logo renders as big as the narrower of (column width, hero - 10px). */
    max-height: calc(18vh - 10px);
    max-width: 100%;
    height: auto;
    width: auto;
    min-height: 0;
    min-width: 0;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.85));
  }
  .menu-hero-text {
    position: relative; z-index: 1;
    padding: 10px 8px 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
  }
  .menu-hero-tag {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 1.5px;
    line-height: 1;
    color: #ffd24a;
    text-shadow: 0 0 12px rgba(255,210,74,0.45), 0 2px 3px rgba(0,0,0,0.6);
  }
  .menu-hero-sub {
    font-size: 10px;
    line-height: 1.25;
    color: rgba(255,255,255,0.78);
    margin: 2px 0 6px;
    /* Two-line clamp so longer translations don't blow up the hero */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .menu-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 5px 5px 5px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    color: #fff;
    font-weight: 800;
    align-self: flex-start;
    backdrop-filter: blur(6px);
  }
  .menu-hero-btn .mhb-circle {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px;
    color: #fff;
  }
  .menu-hero-btn .mhb-label {
    font-size: 10px;
    letter-spacing: 1.2px;
    padding-right: 10px;
  }
  /* Side photo containers — LEFT and RIGHT of the logo. Photo height fills
     the full hero (proportional to the space between HUD bottom and menu
     grid top). Photo width auto-scales preserving aspect. Each photo is
     anchored to the OUTER edge of its column via flex justify-content so
     the LEFT image's left edge lands exactly on the left edge of the
     leftmost menu button, and the RIGHT image's right edge lands exactly
     on the right edge of the rightmost button. */
  .menu-hero-art-left,
  .menu-hero-art-right {
    grid-row: 1;
    height: 100%;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    padding: 0;
    position: relative;
    z-index: 1;
  }
  .menu-hero-art-left  { grid-column: 1; }
  .menu-hero-art-right { grid-column: 3; }
  /* Absolute-positioned IMG so the calc() height resolves predictably and
     bottom:-4px lands the photo's foot exactly 4px below the column edge
     (= 4px into the first menu row). Centered horizontally, native aspect
     preserved via width:auto. overflow:visible on the column + hero lets
     the photo bleed toward the logo and downward; z-index of menu-grid
     and logo keeps them visually layered on top. */
  .menu-hero-art-left,
  .menu-hero-art-right {
    overflow: visible;
    position: relative;
  }
  .menu-hero-art-left img,
  .menu-hero-art-right img {
    position: absolute;
    top: 0;
    height: calc(100% + 10vh + 4px);
    width: auto;
    max-width: none;
    display: block;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,0.65));
  }
  .menu-hero-art-left  img { left: -75%; }
  .menu-hero-art-right img { right: -75%; }

  /* ─── GRID (3 cols, fills remaining space) ─────────────────── */
  .menu-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    gap: 4px;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: visible;
    align-content: center;
  }
  /* Portrait card whose BACKGROUND IS THE ICON IMAGE itself. The whole
     button is the artwork (no separate icon container), with the title +
     subtitle + arrow overlaid at the bottom over a dark fade. Per-tile
     background-image is set below; cover keeps the icon centered. */
  .menu-grid .menu-card {
    padding: 0 !important;
    border-radius: 10px !important;
    gap: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    min-height: 0;
    transform: none;
    overflow: hidden;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    aspect-ratio: 240 / 290;
    border: 0 !important;
    box-shadow: none !important;
    position: relative !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  /* Per-tile artwork — each cropped slice from BOTONES.webp lives at
     assets/menu/icons/<name>.webp. */
  .menu-grid .menu-card[data-go="packs"]        { background-image: url('../assets/menu/icons/packs.webp') !important; }
  .menu-grid .menu-card[data-go="album"]        { background-image: url('../assets/menu/icons/album.webp') !important; }
  .menu-grid .menu-card[data-go="legacy"]       { background-image: url('../assets/menu/icons/legacy.webp') !important; }
  .menu-grid .menu-card[data-go="top25"]        { background-image: url('../assets/menu/icons/top25.webp') !important; }
  .menu-grid .menu-card[data-go="team"]         { background-image: url('../assets/menu/icons/team.webp') !important; }
  .menu-grid .menu-card[data-go="battle"]       { background-image: url('../assets/menu/icons/battle.webp') !important; }
  .menu-grid .menu-card[data-go="tournament"]   { background-image: url('../assets/menu/icons/tournament.webp') !important; }
  .menu-grid .menu-card#menu-online-btn         { background-image: url('../assets/menu/icons/online.webp') !important; }
  .menu-grid .menu-card[data-go="shop"]         { background-image: url('../assets/menu/icons/shop.webp') !important; }
  .menu-grid .menu-card[data-go="achievements"] { background-image: url('../assets/menu/icons/achievements.webp') !important; }
  .menu-grid .menu-card[data-go="duplicates"]   { background-image: url('../assets/menu/icons/duplicates.webp') !important; }
  .menu-grid .menu-card[data-go="share"]        { background-image: url('../assets/menu/icons/share.webp') !important; }
  .menu-grid .menu-card:hover,
  .menu-grid .menu-card:active { transform: scale(0.97); }
  /* TEXT block — absolute overlay at the bottom of the icon image.
     The dark gradient keeps the title legible without hiding the icon. */
  .menu-grid .menu-card-body {
    position: absolute !important;
    left: 0; right: 0;
    bottom: 5px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 1px;
    padding: 0 4px !important;
    background: transparent !important;
    border: 0 !important;
    width: 100%;
    min-width: 0;
    text-align: center !important;
    pointer-events: none;
  }
  .menu-grid .menu-card-arrow { display: none !important; }
  .menu-grid .menu-card-title {
    display: block !important;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px !important;
    font-weight: 900;
    letter-spacing: 0.4px !important;
    line-height: 1.1;
    color: #FFD24A !important;
    -webkit-text-fill-color: #FFD24A !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    padding: 0 !important;
    border-radius: 0;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
    text-align: center !important;
    margin: 0;
    height: auto;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    white-space: nowrap;
  }
  /* Subtitle below the title — bright gold so it pops on every tile colour. */
  .menu-grid .menu-card-desc {
    display: block !important;
    font-family: 'Rajdhani', 'Orbitron', sans-serif;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;
    color: #6EC4FF !important;
    line-height: 1.1;
    margin: 1px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    text-transform: uppercase;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    white-space: nowrap;
    background: none !important;
    border-radius: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,1), 0 0 4px rgba(0,0,0,0.95);
    min-height: 0 !important;
    border: 0 !important;
  }
  .menu-grid .menu-card-desc.menu-album-chip {
    background: none !important;
    padding: 0 !important;
    border: 0 !important;
    gap: 3px !important;
    justify-content: center !important;
  }
  .menu-grid .menu-card-desc .ma-icon  { font-size: 8px !important; }
  .menu-grid .menu-card-desc .ma-label { font-size: 8px !important; }
  .menu-grid .menu-card-desc span      { color: #6EC4FF !important; font-size: 8px !important; letter-spacing: 0.4px !important; text-shadow: 0 1px 2px rgba(0,0,0,1); }
  .menu-grid .menu-card-desc.menu-album-chip {
    background: none !important;
    padding: 0 !important;
    border: 0 !important;
    gap: 3px !important;
    justify-content: center !important;
  }
  .menu-grid .menu-card-desc .ma-icon  { font-size: 8px !important; }
  .menu-grid .menu-card-desc .ma-label { font-size: 8px !important; }
  .menu-grid .menu-card-desc span      { color: #FFD24A !important; font-size: 8px !important; letter-spacing: 0.4px !important; text-shadow: 0 1px 2px rgba(0,0,0,1), 0 0 4px rgba(0,0,0,0.95); }

  /* Icon container + inner img: the artwork lives as the card's
     background-image now, no need for a foreground <img>. */
  .menu-grid .menu-card-icon { display: none !important; }
  /* Numeric (red) and NEW (green) badges — desktop pins them outside the
     tile (top/right negative), but on mobile that drifts off-screen at the
     left/right edges of the grid. Pin them INSIDE the tile instead.
     Shrink the BOX (not transform) so the number stays flex-centered. */
  .menu-grid .menu-badge {
    top: 4px !important;
    right: 4px !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    border-width: 1.5px !important;
    transform: none !important;
  }
  .menu-grid .menu-new-badge {
    top: 4px !important;
    right: 4px !important;
    padding: 3px 7px !important;
    font-size: 9px !important;
    letter-spacing: 1px !important;
    border-width: 1.5px !important;
    transform: none !important;
  }

  /* ─── INFO BAR (3 tiles, bottom strip) ─────────────────────── */
  .menu-info-bar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    height: 48px;
  }
  .info-tile {
    background: rgba(20,28,48,0.6);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 5px 7px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    color: #fff;
    text-align: left;
  }
  .info-tile-icon { font-size: 16px; line-height: 1; flex: 0 0 auto; }
  .info-tile-text { min-width: 0; }
  .info-tile-label {
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    font-size: 8px;
    letter-spacing: 0.8px;
    color: #ffd24a;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .info-tile-value {
    font-size: 9px;
    color: rgba(255,255,255,0.85);
    line-height: 1.15;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Daily-reward floating button is redundant on mobile (hero CTA handles
     the SOBRES entry). Keep the version footer though — user wants the
     ver.2.0 + GAMEZ-STUDIO line back at the bottom. */
  #screen-menu .daily-btn { display: none; }
  #screen-menu .version-footer {
    flex: 0 0 auto;
    margin: 4px auto 0;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-align: center;
  }
  #screen-menu .version-author {
    margin-top: 2px;
    font-size: 10px;
    letter-spacing: 2.5px;
  }
}

/* Even more compact for very short phones (iPhone SE / older Androids) */
@media (max-width: 720px) and (max-height: 640px) {
  .menu-hero { flex-basis: 18vh; min-height: 96px; }
  .menu-hero-tag { font-size: 14px; }
  .menu-hero-sub { font-size: 9px; -webkit-line-clamp: 1; }
  .menu-info-bar { height: 42px; }
  .info-tile-icon { font-size: 14px; }
  .info-tile-label { font-size: 7px; }
  .info-tile-value { font-size: 8px; }
  .menu-grid .menu-card-title { font-size: 8px !important; }
}

/* Desktop / tablet keep the original layout — hide the hero + info bar
   (they'd look weird at full width without the rest of the EA shell). */
@media (min-width: 721px) {
  .menu-hero, .menu-info-bar { display: none; }
}