/* ── style.css ── */
/* ══════════════════════════════════════════════════════
   TRUCO ARGENTINO — style.css  v5  "El Tablón"
   Estética de fútbol argentino: cancha, camisetas, clubes
   ══════════════════════════════════════════════════════ */

/* ─── TIPOGRAFÍAS ─────────────────────────────────────
   DOS familias, no cinco (poda 2026-07-26): en una misma pantalla
   convivían Bebas, Oswald, Cinzel, IM Fell y monospace — cada feature
   trajo la suya y el conjunto gritaba. Ahora:
     Bebas Neue = display (títulos, marcador, gritos de canto)
     Oswald     = todo lo demás (UI, cuerpo, badges, números)
   Las 4 variables de abajo siguen existiendo para no tocar cien
   reglas: --f-body y --f-ui apuntan a Oswald. Si un texto pide "tinta
   de papel" (anotador), eso se resuelve con color/estilo, no con una
   familia más. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Bebas+Neue&display=swap');

/* ─── TOKENS ─────────────────────────────────────────── */
:root {
  /* Tapete = cancha de fútbol */
  --felt:   #1a6b3c;
  --felt-d: #0f4a28;
  --felt-l: #2a8a50;

  /* Colores cancha */
  --gold:   #f5c518;   /* amarillo camiseta */
  --gold-l: #ffe55a;
  --red:    #c0392b;
  --white:  #f0f0f0;
  --sky:    #6ab4f5;   /* celeste selección */

  /* Carta — el alto SE DERIVA del alto de la ventana, no de escalones fijos.
     Antes eran 4 valores fijos con saltos bruscos (300 → 156 → 135 → 116) y un
     agujero enorme: cualquier ventana de más de 820px de alto se llevaba las
     cartas de 300px, que necesitan ~1130px de alto para entrar. En una notebook
     (viewport ~860) la mesa pedía 1111px y tenía 858: la mano propia quedaba
     255px POR DEBAJO del borde y había que scrollear para ver tus cartas.
     La mesa consume 2×--ch (las dos manos) + 0.84×--ch (las cartas jugadas) +
     ~225px fijos, así que 24vh es el máximo que entra sin cortar nada.
     El tope de 300px mantiene el tamaño original en pantallas grandes. */
  --ch: clamp(78px, 23vh, 300px);
  --cw: calc(var(--ch) * 2 / 3);
  --cr: calc(var(--ch) / 21);

  /* Tipografía */
  --f-display: "Bebas Neue", "Oswald", Impact, sans-serif;
  --f-camiseta:"Oswald", "Impact", sans-serif;
  --f-body:    "Oswald", "Segoe UI", sans-serif;
  --f-ui:      "Oswald", "Segoe UI", sans-serif;

  --t-fast: .13s;
  --t-med:  .25s;
}

/* ─── TEMAS DE CLUBES ─────────────────────────────────
   Selección Argentina, Boca Juniors, River Plate,
   Racing Club, San Lorenzo                          */
body.theme-seleccion { --felt:#2b5fa8; --felt-d:#1a3d72; --felt-l:#3a74c4 }
body.theme-boca      { --felt:#0d2f7a; --felt-d:#081e55; --felt-l:#1840a8 }
body.theme-river     { --felt:#b30000; --felt-d:#7a0000; --felt-l:#d40000 }
body.theme-racing    { --felt:#1a1a1a; --felt-d:#0a0a0a; --felt-l:#2c2c2c }
body.theme-sanloren  { --felt:#1a3d8a; --felt-d:#0f2560; --felt-l:#2550b0 }

/* ─── PAÑOS POR COMPETICIÓN ───────────────────────────
   Cambian el fondo (--felt) y el césped (--turf) según el torneo.
   Se aplican con body.comp-* desde aplicarPanoCompeticion() (club.js)
   al entrar a la mesa. Van DESPUÉS de los temas de club para ganar
   en prioridad cuando se está en una competición. */
body.comp-liga         { --felt:#15633a; --felt-d:#0d4427; --felt-l:#1f8049 }
body.comp-amistoso     { --felt:#3a4a40; --felt-d:#26332b; --felt-l:#4d6155; --turf-1:#34985a; --turf-2:#256f43 }
body.comp-libertadores { --felt:#0f5a2e; --felt-d:#073718; --felt-l:#1c7d42; --turf-1:#2f8f48; --turf-2:#1d7035; --turf-edge:#093618 }
body.comp-champions    { --felt:#0a1b3a; --felt-d:#050f24; --felt-l:#13305f; --turf-1:#2a8a52; --turf-2:#1b6e3e; --turf-edge:#08351f }
body.comp-cwc          { --felt:#3a2c08; --felt-d:#241a04; --felt-l:#5c4711; --turf-1:#2f8c48; --turf-2:#1f7038 }
body.comp-mundial      { --felt:#123a72; --felt-d:#0a2348; --felt-l:#1d5099; --turf-1:#2f9650; --turf-2:#1f7a40 }
body.comp-online       { --felt:#13414a; --felt-d:#0a2a30; --felt-l:#1d6470; --turf-1:#2e8d6a; --turf-2:#1e6f52 }

/* Marca de agua del trofeo en el centro del paño (la pone club.js) */
#pano-marca {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: .08; text-align: center;
}
#pano-marca .pano-marca-em { font-size: 110px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
#pano-marca .pano-marca-tx {
  font-family: var(--f-display); font-weight: 700; letter-spacing: 6px;
  font-size: 24px; color: #fff; margin-top: 6px;
}
/* Overlay de partido nocturno (copas de gala): vignette + reflectores */
#pano-noche-ovl {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; display: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% 24%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(ellipse 130% 100% at 50% 55%, transparent 46%, rgba(0,0,8,.5) 100%);
}

/* ─── RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html, body { height: 100%; overflow: hidden }

body {
  background:
    radial-gradient(ellipse at center, var(--felt-l) 0%, var(--felt) 50%, var(--felt-d) 100%);
  background-attachment: fixed;
  font-family: var(--f-body);
  color: #fff;
  user-select: none; -webkit-user-select: none;
  transition: background .4s;
  position: relative;
  letter-spacing: .2px;
}

/* Líneas de cancha SVG inline como data URI */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    /* Círculo central */
    radial-gradient(circle, rgba(255,255,255,.06) 0%, rgba(255,255,255,.06) 70px, transparent 71px),
    /* Punto central */
    radial-gradient(circle, rgba(255,255,255,.15) 0%, rgba(255,255,255,.15) 4px, transparent 5px),
    /* Línea central horizontal */
    linear-gradient(to right, transparent calc(50% - 80px), rgba(255,255,255,.05) calc(50% - 80px), rgba(255,255,255,.05) calc(50% + 80px), transparent calc(50% + 80px)),
    /* Borde del área */
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: auto, auto, auto, 40px 40px, 40px 40px;
  pointer-events: none; z-index: 0;
  opacity: .7;
}

/* Viñeta de estadio */
body::after {
  content: "";
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.35) 100%);
  pointer-events: none; z-index: 0;
}

/* ══════════════════════════════════════════════════════
   LOADING
   ══════════════════════════════════════════════════════ */
#loading {
  position: fixed; inset: 0;
  background: #0a1a0e;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px; z-index: 999;
}
.ld-suits  { font-size: 20px; color: rgba(255,255,255,.18); letter-spacing: 12px }
.ld-bar-bg { width: 260px; height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden }
.ld-bar    { height: 100%; background: var(--gold); border-radius: 2px; transition: width .25s; width: 0% }
.ld-msg    { font-size: 11px; color: rgba(255,255,255,.3); font-family: var(--f-camiseta); letter-spacing: 2px }

/* ══════════════════════════════════════════════════════
   MENÚ PRINCIPAL — Estadio / Cancha
   ══════════════════════════════════════════════════════ */
#main-menu {
  position: fixed; inset: 0;
  display: none; flex-direction: column;
  align-items: center; justify-content: flex-start;
  z-index: 800;
  overflow-y: auto;            /* deja scrollear si el menú es más alto que la pantalla */
  overflow-x: hidden;
  padding: 24px 0;             /* aire arriba y abajo para que no quede pegado */
  -webkit-overflow-scrolling: touch;
}
/* Centra el contenido verticalmente solo cuando entra; si no, deja scroll */
#main-menu .mm-content { margin: auto 0; }

/* Césped con líneas reales de cancha */
.mm-cancha {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
}
.mm-cancha svg {
  width: 100%; height: 100%;
  opacity: .12;
}

/* Confetti de colores de camiseta animado */
.mm-confetti {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
}
.mm-confetti span {
  position: absolute;
  width: 8px; height: 18px;
  border-radius: 2px;
  opacity: 0;
  animation: confettiCaer 4s ease-in infinite;
}
.mm-confetti span:nth-child(odd)  { background: var(--sky); }
.mm-confetti span:nth-child(even) { background: #fff; }
.mm-confetti span:nth-child(3n)   { background: var(--gold); }
/* Posiciones y delays distribuidos */
.mm-confetti span:nth-child(1)  { left:5%;  animation-delay:0s;    animation-duration:3.2s }
.mm-confetti span:nth-child(2)  { left:12%; animation-delay:.4s;   animation-duration:4.1s }
.mm-confetti span:nth-child(3)  { left:20%; animation-delay:.8s;   animation-duration:3.6s }
.mm-confetti span:nth-child(4)  { left:28%; animation-delay:1.2s;  animation-duration:4.4s }
.mm-confetti span:nth-child(5)  { left:35%; animation-delay:.2s;   animation-duration:3.8s }
.mm-confetti span:nth-child(6)  { left:43%; animation-delay:1.6s;  animation-duration:4s   }
.mm-confetti span:nth-child(7)  { left:52%; animation-delay:.6s;   animation-duration:3.4s }
.mm-confetti span:nth-child(8)  { left:60%; animation-delay:2s;    animation-duration:4.2s }
.mm-confetti span:nth-child(9)  { left:68%; animation-delay:1s;    animation-duration:3.7s }
.mm-confetti span:nth-child(10) { left:76%; animation-delay:1.4s;  animation-duration:4.5s }
.mm-confetti span:nth-child(11) { left:84%; animation-delay:.3s;   animation-duration:3.9s }
.mm-confetti span:nth-child(12) { left:92%; animation-delay:1.8s;  animation-duration:4.3s }
@keyframes confettiCaer {
  0%   { transform: translateY(-20px) rotate(0deg);   opacity: 0  }
  10%  { opacity: .7 }
  90%  { opacity: .4 }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0  }
}

/* Contenido central del menú */
.mm-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 24px;
  padding: 20px; width: 100%; max-width: 400px;
}

/* Escudo SVG central */
@keyframes escudoPulse {
  0%,100% { filter: drop-shadow(0 0 12px rgba(245,197,24,.3)) }
  50%     { filter: drop-shadow(0 0 24px rgba(245,197,24,.6)) }
}

/* Título estilo camiseta / estadio */
/* Número de camiseta decorativo */

/* Botones tipo camiseta */
.mm-nav { display: flex; flex-direction: column; gap: 10px; width: 100% }

.mm-btn {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px; border-radius: 12px;
  cursor: pointer; font-family: var(--f-camiseta);
  border: none; transition: all .15s; text-align: left;
  -webkit-tap-highlight-color: transparent;
  position: relative; overflow: hidden;
}
/* Franja diagonal estilo camiseta en hover */
.mm-btn::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.08) 40%, rgba(255,255,255,.08) 60%, transparent 60%);
  opacity: 0; transition: opacity .2s;
}
.mm-btn:hover::before { opacity: 1 }
.mm-btn:active { transform: scale(.97) }

.mm-btn-primary {
  background: linear-gradient(135deg, var(--sky) 0%, #3a8ad4 50%, #2060b0 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(106,180,245,.3);
  border: 1px solid rgba(255,255,255,.2);
}
.mm-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(106,180,245,.4) }

.mm-btn-secondary {
  background: rgba(255,255,255,.08);
  color: #fff; border: 1px solid rgba(255,255,255,.16);
}
.mm-btn-secondary:hover { background: rgba(255,255,255,.14); transform: translateY(-1px) }

.mm-btn-icon {
  font-size: 28px; flex-shrink: 0;
  width: 44px; height: 44px;
  background: rgba(0,0,0,.2); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.mm-btn-text { display: flex; flex-direction: column; gap: 2px }
.mm-btn-text strong { font-size: 17px; font-weight: 700; letter-spacing: 2px }
.mm-btn-text small   { font-size: 11px; opacity: .7; font-weight: 400; letter-spacing: .5px; font-family: var(--f-body) }

/* Footer del menú */
.mm-footer { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center }
.mm-link {
  background: none; border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.5); font-size: 11px;
  font-family: var(--f-camiseta); cursor: pointer;
  padding: 6px 14px; border-radius: 20px;
  transition: all .13s; letter-spacing: 1px; font-weight: 600;
}
.mm-link:hover { border-color: var(--gold); color: var(--gold) }
.mm-version { font-size: 10px; color: rgba(255,255,255,.2); letter-spacing: 1px; font-family: var(--f-camiseta) }

/* ══════════════════════════════════════════════════════
   PANTALLA DE REGISTRO
   ══════════════════════════════════════════════════════ */
#name-screen {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, #1a4a2e, #0a2016 80%);
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; z-index: 900; padding: 56px 20px 24px; overflow-y: auto;
}
/* Amistoso y Mundial: faltaba la regla → quedaban en fila (horizontal) y
   rotas en celular. Mismo layout que las demás pantallas: columna,
   centrada, con scroll desde arriba. */
#amistoso-screen, #mundial-screen {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, #1a4a2e, #0a2016 80%);
  display: none; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 12px; z-index: 900; padding: 52px 16px 24px; overflow-y: auto;
}
.ns-title {
  font-size: 28px; color: var(--gold);
  font-family: var(--f-display); letter-spacing: 6px;
  text-shadow: 0 0 16px rgba(245,197,24,.25);
}
.ns-sub { font-size: 12px; color: rgba(255,255,255,.4); font-family: var(--f-camiseta); letter-spacing: 2px }

.avatar-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; width: 100%; max-width: 360px;
}
.av-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer; padding: 8px 6px; border-radius: 12px;
  border: 2px solid transparent; transition: all var(--t-fast);
  background: rgba(255,255,255,.05);
}
.av-item:hover    { background: rgba(255,255,255,.1); border-color: rgba(106,180,245,.3) }
.av-item.selected { border-color: var(--sky); background: rgba(106,180,245,.15) }
.av-icon  { font-size: 30px; line-height: 1 }
.av-name  { font-size: 9px; color: rgba(255,255,255,.45); text-align: center; font-family: var(--f-camiseta); letter-spacing: .5px }
.av-item.selected .av-name { color: var(--sky) }

.name-input {
  background: rgba(255,255,255,.07);
  border: 2px solid rgba(106,180,245,.4);
  border-radius: 12px; padding: 11px 18px;
  color: #fff; font-size: 16px;
  font-family: var(--f-camiseta); font-weight: 600; letter-spacing: 2px;
  width: 100%; max-width: 300px; text-align: center; outline: none;
  transition: border-color .15s; text-transform: uppercase;
}
.name-input:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(106,180,245,.2) }
.name-input::placeholder { color: rgba(255,255,255,.25); font-weight: 400 }

/* ══════════════════════════════════════════════════════
   BOTÓN VOLVER / MENÚ EN MESA
   ══════════════════════════════════════════════════════ */
.back-btn {
  position: absolute; top: 14px; left: 14px;
  background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.65); font-size: 11px;
  font-family: var(--f-camiseta); letter-spacing: 1px; font-weight: 600;
  cursor: pointer; padding: 7px 14px; border-radius: 20px;
  transition: all .13s; z-index: 10;
}
.back-btn:hover { background: rgba(0,0,0,.5); color: #fff }

.mesa-menu-btn {
  position: absolute; top: 9px; right: 11px;
  background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.55); font-size: 14px;
  width: 30px; height: 30px; border-radius: 8px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 30; transition: all .13s;
}
.mesa-menu-btn:hover { background: rgba(0,0,0,.55); color: #fff }

/* ══════════════════════════════════════════════════════
   MESA — Tapete de cancha
   ══════════════════════════════════════════════════════ */
#mesa {
  width: 100%; height: 100vh; height: 100dvh;
  grid-template-rows: auto 1fr 38px auto;
  padding: 10px 12px 6px; max-width: 680px; margin: 0 auto; gap: 4px;
  display: none; position: relative; overflow-y: auto; overflow-x: hidden; z-index: 1;

  background:
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.08) 48%, rgba(255,255,255,.08) 52%, transparent 52%),
    linear-gradient(180deg, rgba(25,35,55,.96), rgba(20,28,45,.98));
  background-size: 100% 100%, 100% 100%;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -12px 24px rgba(0,0,0,.3),
    0 16px 40px rgba(0,0,0,.5);
}

/* Línea del mediocampo dentro de la mesa */
#mesa::before {
  content: "";
  position: absolute; left: 20px; right: 20px;
  top: 50%; height: 1px;
  background: rgba(255,255,255,.06);
  pointer-events: none; z-index: 0;
}
/* Círculo central */
#mesa::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.05);
  pointer-events: none; z-index: 0;
}

/* ══════════════════════════════════════════════════════
   ZONA RIVAL
   ══════════════════════════════════════════════════════ */
.zona-rival { display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 1 }
.rival-top  { display: flex; align-items: center; gap: 8px; width: 100%; justify-content: center }
.rival-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  object-fit: cover; border: 3px solid rgba(106,180,245,.6); flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(0,0,0,.5);
}
.rival-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px }
.rival-name-txt {
  font-size: 11px; color: rgba(255,255,255,.8);
  letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
  font-family: var(--f-camiseta);
}
.rival-hand { display: flex; gap: 6px; justify-content: center; align-items: flex-end; min-height: calc(var(--ch) + 4px) }

/* ══════════════════════════════════════════════════════
   PENSANDO
   ══════════════════════════════════════════════════════ */
.thinking {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; align-items: center;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  border-radius: 20px; padding: 4px 12px;
  font-size: 10px; color: rgba(255,255,255,.65);
  white-space: nowrap; letter-spacing: 1px;
  opacity: 0; transition: opacity .3s;
  pointer-events: none; z-index: 20;
  border: 1px solid rgba(106,180,245,.15);
  font-family: var(--f-camiseta); font-weight: 600;
}
.thinking.show { opacity: 1 }
.thinking-dots { display: flex; gap: 3px }
.thinking-dots span {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--sky); animation: tdot 1.2s infinite; opacity: .3;
}
.thinking-dots span:nth-child(2) { animation-delay: .25s }
.thinking-dots span:nth-child(3) { animation-delay: .5s  }
@keyframes tdot { 0%,100%{opacity:.3} 50%{opacity:1} }

/* ══════════════════════════════════════════════════════
   ZONA CENTRAL
   ══════════════════════════════════════════════════════ */
.zona-central { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; position: relative; z-index: 1 }
#mesa-central { display: flex; align-items: center; gap: 8px; width: 100%; justify-content: center }

/* ─── MAZO SOBRANTE ──────────────────────────────────
   Pila boca abajo del resto del mazo (las cartas que no se
   reparten). Se ubica a la izquierda de la mano de quien es
   "mano" en cada reparto (JS la mueve entre .mazo-slot-rival
   y .mazo-slot-jugador). Puramente decorativa, sin click. */
.hand-row { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100% }
.mazo-slot {
  flex: 0 0 calc(var(--cw) * .42); min-height: calc(var(--ch) * .42);
  display: flex; align-items: center; justify-content: center;
}
.mazo-pos {
  position: relative; width: calc(var(--cw) * .42); height: calc(var(--ch) * .42);
  pointer-events: none;
}
.mazo-carta {
  position: absolute; inset: 0; border-radius: calc(var(--cr) * .8);
  border: 1px solid rgba(0,0,0,.4);
  background: linear-gradient(145deg, #0d1e44, #060f2a);
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
}
.mazo-carta:nth-child(1) { transform: rotate(-5deg) translate(-2px, 1px); z-index: 1 }
.mazo-carta:nth-child(2) { transform: rotate(3deg)  translate(1px, -1px); z-index: 2 }
.mazo-carta:nth-child(3) { transform: rotate(-1deg); z-index: 3 }

/* El panel R1/R2/R3 estaba EN EL FLUJO de la columna central y se comía 103px
   de alto en el medio de la mesa, encima tapando el círculo central (parecía un
   panel de debug flotando). Va absoluto contra el borde: informa igual y deja
   de competir por el alto, que es el recurso escaso. */
#rondas-panel {
  display: flex; flex-direction: column; gap: 3px; flex-shrink: 0;
  min-width: 52px;
  background: rgba(0,0,0,.35); border-radius: 10px; padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.08);
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  z-index: 3; pointer-events: none;
}
.ronda-item   { display: flex; align-items: center; gap: 6px; min-height: 18px }
.ronda-lbl    { font-size: 9px; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; min-width: 16px; font-family: var(--f-camiseta) }
.ronda-ganador { font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 5px; letter-spacing: .3px; transition: all .3s; font-family: var(--f-camiseta) }
.ronda-ganador.win  { background: rgba(245,197,24,.2);  color: var(--gold); border: 1px solid rgba(245,197,24,.4)  }
.ronda-ganador.lose { background: rgba(192,57,43,.2);   color: #e74c3c;     border: 1px solid rgba(192,57,43,.4)   }
.ronda-ganador.draw { background: rgba(120,120,120,.15);color: #aaa;        border: 1px solid rgba(120,120,120,.3) }

/* Avatares "X vs Y" del centro: redundantes (ya están arriba y abajo) y
   estorbaban en la zona donde caen las cartas. Ocultos. */
#mesa-avatares { display: none !important; }

/* ─── MARCADOR ─────────────────────────────────────── */
/* El marcador central (.score-row con score-mid + pips-wrap) fue
   eliminado: #side-score (panel lateral / barra superior en mobile)
   es ahora el único tanteador. Se conserva la animación "pop" al
   sumar puntos, reutilizada por #side-pts-j/#side-pts-r. */
@keyframes scorePop {
  0%   { transform: scale(1);    color: var(--gold-l, #ffe55a) }
  35%  { transform: scale(1.45); color: #fff; text-shadow: 0 0 16px var(--gold), 0 0 28px var(--gold) }
  100% { transform: scale(1);    color: var(--gold-l, #ffe55a) }
}

/* ─── CARTAS EN MESA ───────────────────────────────── */
/* Las cartas de la mesa se dibujan al 42% (ver .played-row .card), así que
   reservar 1.7 × --ch era pedir CUATRO veces el espacio que se usa. Ese era el
   verde vacío del centro y, sobre todo, el motivo por el que en una notebook
   la mano propia quedaba abajo del borde: la mesa pedía 1039px y tenía 719.
   Ahora se reserva lo que ocupan de verdad las dos filas + respiro. */
.played-row { display: flex; flex-direction: column; gap: 6px; justify-content: center; align-items: stretch; min-height: calc(var(--ch) * .84 + 34px); position: relative; padding: 4px 0; z-index: 1 }
.played-row-rival, .played-row-jugador { display: flex; gap: 10px; justify-content: center; align-items: center; min-height: calc(var(--ch) * .42 + 10px) }
.played-card-wrap { position: relative; flex-shrink: 0 }
.ronda-badge {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #1a1a1a; font-size: 8px; font-weight: 800;
  line-height: 1; padding: 2px 5px; border-radius: 6px; white-space: nowrap;
  font-family: var(--f-camiseta); letter-spacing: .5px;
  box-shadow: 0 2px 4px rgba(0,0,0,.4); z-index: 5;
}

/* ══════════════════════════════════════════════════════
   INFO BAR — Relator de partido
   ══════════════════════════════════════════════════════ */
.info-bar {
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: 5px 12px; z-index: 1;
}
.info-tantos { font-size: 10px; color: rgba(255,255,255,.45); min-width: 78px; text-transform: uppercase; letter-spacing: 1px; font-family: var(--f-camiseta) }
.info-msg    { flex: 1; font-size: 11px; color: rgba(255,255,255,.9); text-align: center; line-height: 1.3; font-weight: 600; font-family: var(--f-body) }
.info-mano   { font-size: 10px; color: var(--sky); font-weight: 800; min-width: 54px; text-align: right; letter-spacing: .5px; font-family: var(--f-camiseta) }

/* ══════════════════════════════════════════════════════
   ZONA INFERIOR
   ══════════════════════════════════════════════════════ */
#zona-inferior { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 4px; z-index: 1 }
.zona-jugador  { display: flex; flex-direction: column; align-items: center; gap: 3px }
.player-bottom { display: flex; align-items: center; gap: 8px; justify-content: center; min-height: 32px }
.player-avatar-sm { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(245,197,24,.55); box-shadow: 0 3px 8px rgba(0,0,0,.4) }
.player-hand { display: flex; gap: 8px; justify-content: center; align-items: flex-end; min-height: calc(var(--ch) + 4px) }

/* ══════════════════════════════════════════════════════
   BOTONES DE ACCIÓN — estilo camiseta
   ══════════════════════════════════════════════════════ */
/* Los botones de acción son LO PRIMERO con lo que se juega, así que ganan la
   capa. Estaban en z-index:1 mientras el panel de emojis (#ext-frases-panel)
   está en 35 y el banner del sponsor en 200: cuando la fila crece a 5-6
   botones (responder un canto: QUIERO / NO QUIERO / RETRUCO / AL MAZO...)
   baja lo suficiente como para meterse abajo del panel de emojis, que la
   tapaba por la mitad. Con position:relative el z-index pasa a aplicar.
   210 los deja arriba de todo lo decorativo y abajo de los overlays (500+). */
.acciones { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 2px 6px; min-height: 38px; align-items: center; position: relative; z-index: 210 }
.reactions { display: none; gap: 5px; justify-content: center; flex-wrap: wrap; padding: 2px 4px }

.btn {
  padding: 7px 14px; border-radius: 10px;
  border: 1.5px solid rgba(245,197,24,.7);
  background: rgba(0,0,0,.4);
  color: var(--gold); cursor: pointer;
  font-size: 11px; font-family: var(--f-camiseta);
  text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700;
  transition: all var(--t-fast); white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.07);
  min-height: 36px; display: inline-flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover:not(:disabled) {
  background: var(--gold); color: #1a1a1a;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 18px rgba(245,197,24,.25);
}
.btn:active:not(:disabled) { transform: scale(.96); box-shadow: 0 2px 5px rgba(0,0,0,.3) }
.btn:disabled { opacity: .28; cursor: default; border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.2) }
.btn.bloq     { opacity: .4; cursor: not-allowed; pointer-events: none }
.btn.primary  { background: var(--sky); color: #fff; border-color: rgba(255,255,255,.4) }
.btn.primary:hover:not(:disabled) { background: #8ecdf7 }
.btn.danger   { border-color: rgba(231,76,60,.7); color: #e74c3c }
.btn.danger:hover:not(:disabled)  { background: #e74c3c; color: #fff }
.btn.respond  { border-color: rgba(106,180,245,.7); color: var(--sky) }
.btn.respond:hover:not(:disabled) { background: var(--sky); color: #fff }

/* Canto "tope" disponible (VALE 4 / FALTA ENVIDO) — destacado para
   guiar la decisión del jugador de un vistazo */
.btn.btn-max {
  font-size: 12.5px; padding: 9px 16px; min-height: 40px;
  background: linear-gradient(135deg, var(--gold) 0%, #ff9f43 100%);
  color: #1a1a1a; border-color: var(--gold-l, #ffe55a);
  animation: btnMaxPulse 1.1s ease-in-out infinite alternate;
}
.btn.btn-max:hover:not(:disabled) { background: linear-gradient(135deg, var(--gold-l,#ffe55a) 0%, #ffb35c 100%); color: #1a1a1a }
@keyframes btnMaxPulse {
  from { box-shadow: 0 0 8px rgba(245,197,24,.35), 0 3px 8px rgba(0,0,0,.3); transform: scale(1); }
  to   { box-shadow: 0 0 18px rgba(245,197,24,.8), 0 4px 12px rgba(0,0,0,.35); transform: scale(1.045); }
}

/* ══════════════════════════════════════════════════════
   CARTAS
   ══════════════════════════════════════════════════════ */
.card {
  width: var(--cw); height: var(--ch); border-radius: var(--cr);
  border: 1px solid rgba(0,0,0,.25);
  background: linear-gradient(145deg, #fffef8, #e9e0c6);
  cursor: default; position: relative; overflow: hidden; flex-shrink: 0;
  transition: transform var(--t-fast), box-shadow var(--t-fast), opacity .2s;
  box-shadow: 0 2px 4px rgba(0,0,0,.15), 0 8px 20px rgba(0,0,0,.5), 0 16px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 4px rgba(0,0,0,.1);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  z-index: 1;
}
.card::before { content:""; position:absolute; inset:0; background:linear-gradient(125deg, rgba(255,255,255,.5) 0%, transparent 22%, transparent 58%, rgba(255,255,255,.12) 100%); mix-blend-mode:screen; opacity:.7; pointer-events:none; z-index:1 }
.card::after  { content:""; position:absolute; inset:2px; border-radius:5px; border:1px solid rgba(0,0,0,.07); pointer-events:none; z-index:2 }
.card.can-play { cursor: pointer }
.card.can-play:hover  { transform: translateY(-24px) scale(1.22); box-shadow: 0 4px 8px rgba(0,0,0,.2), 0 12px 28px rgba(0,0,0,.6), 0 20px 48px rgba(0,0,0,.8), 0 0 0 3px var(--sky), inset 0 1px 0 rgba(255,255,255,.9); z-index: 10 }
.card.can-play:active { transform: translateY(-12px) scale(1.15); box-shadow: 0 4px 8px rgba(0,0,0,.2), 0 12px 28px rgba(0,0,0,.5), 0 0 0 3px var(--sky) }
.card.selected { transform: translateY(-28px) scale(1.25) !important; box-shadow: 0 4px 10px rgba(0,0,0,.25), 0 14px 32px rgba(0,0,0,.65), 0 24px 56px rgba(0,0,0,.9), 0 0 0 3px var(--sky) !important; border: 2px solid var(--sky) !important }
/* Animación al jugar carta */
@keyframes card-expand {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); }
  100% { transform: scale(.82); opacity: .82; }
}
.card.playing { animation: card-expand 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.card.played   { width: calc(var(--cw) * .82); height: calc(var(--ch) * .82); opacity: .82; cursor: default; pointer-events: none }
.card.j-played { border-bottom: 2px solid rgba(106,180,245,.5) }
.card.r-played { border-bottom: 2px solid rgba(192,57,43,.5)   }
.card img { width:100%; height:100%; object-fit:fill; display:block; border-radius:calc(var(--cr) - 1px); position:relative; z-index:0 }
.card .ph { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; position:relative; z-index:0 }
.ph-num { font-size:18px; font-weight:bold; line-height:1; font-family: var(--f-camiseta) }
.ph-num.espadas { color:#1a56a0 } .ph-num.bastos { color:#2d6a0a } .ph-num.oros { color:#b07800 } .ph-num.copas { color:#9b2150 }
.ph-palo { font-size:9px; text-transform:uppercase; letter-spacing:.4px; color:#999; font-family: var(--f-camiseta) }

/* ─── DORSO ───────────────────────────────────────── */
.dorso { width:var(--cw); height:var(--ch); border-radius:var(--cr); border:1px solid rgba(0,0,0,.4); flex-shrink:0; overflow:hidden; background:linear-gradient(145deg, #0d1e44, #060f2a); position:relative; box-shadow:0 6px 14px rgba(0,0,0,.4) }
/* Franja diagonal estilo camiseta en el dorso */
.dorso::before { content:""; position:absolute; inset:4px; border:1.5px solid rgba(106,180,245,.25); border-radius:4px }
.dorso::after  { content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 35%, rgba(106,180,245,.08) 35%, rgba(106,180,245,.08) 55%, transparent 55%); }
.dorso img { width:100%; height:100%; object-fit:fill; border-radius:calc(var(--cr) - 1px) }
.dorso-inner { position:absolute; inset:8px; display:grid; place-items:center; font-size:24px; color:rgba(106,180,245,.1) }

/* Placeholder de carta cuando NO carga la imagen (images/<id>.webp).
   Antes esto reusaba .dorso-inner, que es la marca de agua del REVERSO al 10%
   de opacidad: una carta sin imagen se veía como una carta pálida y el fallo
   pasaba desapercibido (así estuvo roto en producción sin que se notara).
   Ahora se lee: número grande y palo, en tinta oscura sobre el crema. */
.carta-ph {
  position:absolute; inset:6px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; text-align:center;
  color:#2b2317; line-height:1;
}
.carta-ph .carta-ph-n { font-size:30px; font-weight:800; letter-spacing:-1px }
.carta-ph .carta-ph-p { font-size:10px; text-transform:uppercase; letter-spacing:.5px; opacity:.75 }

/* (Se eliminó CSS muerto de drag & drop: .card-drag-ghost,
   .card-drag-placeholder y .card.dragging-origin no se usaban en
   ningún lado — la jugada de cartas es por click.) */
#drop-zone-overlay { position:absolute; inset:0; border-radius:10px; border:2px dashed transparent; pointer-events:none; transition:border-color .12s,background .12s; z-index:10 }
#drop-zone-overlay.drag-over { border-color:rgba(106,180,245,.75); background:rgba(106,180,245,.08) }
#drag-hint { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:22px; color:rgba(106,180,245,.5); pointer-events:none; opacity:0; transition:opacity .2s }
#drag-hint.show { opacity:1 }

/* ══════════════════════════════════════════════════════
   TOAST — Grito de cancha
   ══════════════════════════════════════════════════════ */
.toast {
  position: fixed; top: 44%; left: 50%; transform: translate(-50%,-50%);
  background: rgba(0,0,0,.9);
  color: var(--gold); font-size: 18px; font-weight: 400;
  font-family: var(--f-display); letter-spacing: 3px; text-align: center;
  padding: 12px 28px; border-radius: 12px; max-width: 88vw;
  border: 1.5px solid rgba(245,197,24,.6);
  pointer-events: none; z-index: 400;
  opacity: 0; transition: opacity .18s;
  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 20px rgba(245,197,24,.1);
  backdrop-filter: blur(4px);
}
.toast.show { opacity: 1 }

/* ══════════════════════════════════════════════════════
   OVERLAY DE ENVIDO — Marcador de partido
   ══════════════════════════════════════════════════════ */
#envido-overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  z-index: 500; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: rgba(0,0,0,.5); backdrop-filter: blur(3px);
}
#envido-overlay.show { opacity: 1; pointer-events: auto }
.envido-panel {
  background: linear-gradient(145deg, rgba(13,30,60,.98), rgba(5,12,28,1));
  border: 2px solid var(--sky); border-radius: 22px; padding: 24px 36px;
  text-align: center;
  box-shadow: 0 0 50px rgba(106,180,245,.2), 0 24px 48px rgba(0,0,0,.7);
  min-width: 280px; animation: panelPop .3s cubic-bezier(.2,.8,.4,1) both;
}
@keyframes panelPop { from { transform:scale(.85); opacity:0 } to { transform:none; opacity:1 } }
.envido-title  { font-size: 11px; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: 4px; margin-bottom: 14px; font-family: var(--f-camiseta) }
.envido-scores { display: flex; gap: 28px; justify-content: center; align-items: center; margin-bottom: 14px }
.envido-player { display: flex; flex-direction: column; align-items: center; gap: 4px }
.envido-name   { font-size: 10px; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: 1px; font-family: var(--f-camiseta) }
.envido-pts    { font-size: 56px; font-weight: 400; line-height: 1; text-shadow: 0 0 24px currentColor; font-family: var(--f-display) }
.envido-pts.win  { color: var(--sky) }
.envido-pts.lose { color: rgba(255,255,255,.25) }
.envido-vs     { font-size: 14px; color: rgba(255,255,255,.25); font-weight: bold }
.envido-result { font-size: 18px; font-weight: 400; color: var(--sky); letter-spacing: 2px; margin-top: 6px; font-family: var(--f-display) }
.envido-extra  { font-size: 11px; color: rgba(255,255,255,.38); margin-top: 5px; font-family: var(--f-camiseta) }

/* Cartas que forman el envido ganador, debajo de cada puntaje */
.envido-cards { display: flex; gap: 4px; min-height: 46px; align-items: center; justify-content: center }
.envido-cards.gano .envido-mini-card { box-shadow: 0 0 10px var(--sky), 0 4px 10px rgba(0,0,0,.5); border-color: var(--sky) }
.envido-mini-card {
  width: 30px; height: 44px; border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.2); background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.5); opacity: .92;
}
.envido-mini-card img { width: 100%; height: 100%; object-fit: cover; display: block }
.envido-mini-card .dorso-inner {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 8px; color: #06121f; font-weight: bold; text-transform: uppercase; line-height: 1.2; text-align: center;
}

/* Las cartas del envido/flor ya NO se muestran en este overlay (se revelan
   recién al final de la mano, en #resultado-overlay). */
#eo-cards-j, #eo-cards-r { display: none }

/* ══════════════════════════════════════════════════════
   OVERLAY DE CANTO — banner 3D que se "tira" sobre la mesa
   ══════════════════════════════════════════════════════ */
#canto-overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  z-index: 520; pointer-events: none; opacity: 0; transition: opacity .2s;
  perspective: 900px;
}
#canto-overlay.show { opacity: 1 }
.canto-card {
  min-width: 230px; padding: 22px 44px; border-radius: 18px; text-align: center;
  background: linear-gradient(150deg, rgba(12,31,20,.98), rgba(5,13,8,1));
  border: 2px solid var(--gold);
  box-shadow: 0 0 50px rgba(245,197,24,.25), 0 24px 48px rgba(0,0,0,.7);
  transform-style: preserve-3d;
  transform: rotateY(-110deg) scale(.7); opacity: 0;
}
#canto-overlay.show .canto-card { animation: cantoFlipIn .5s cubic-bezier(.22,.85,.35,1.15) forwards }
.canto-card.rival {
  border-color: var(--red);
  box-shadow: 0 0 50px rgba(192,57,43,.3), 0 24px 48px rgba(0,0,0,.7);
}
@keyframes cantoFlipIn {
  0%   { transform: rotateY(-110deg) scale(.7); opacity: 0 }
  60%  { transform: rotateY(14deg)  scale(1.05); opacity: 1 }
  100% { transform: rotateY(0deg)   scale(1); opacity: 1 }
}
.canto-label {
  font-family: var(--f-display); font-size: 34px; letter-spacing: 5px;
  color: var(--gold); text-shadow: 0 0 18px rgba(245,197,24,.5);
}
.canto-card.rival .canto-label { color: #ff8a7a; text-shadow: 0 0 18px rgba(192,57,43,.5) }
.canto-quien {
  margin-top: 6px; font-size: 10px; color: rgba(255,255,255,.5);
  text-transform: uppercase; letter-spacing: 3px; font-family: var(--f-camiseta);
}

/* ══════════════════════════════════════════════════════
   OVERLAY DE RESULTADO DE MANO — placa 3D estilo marcador
   ══════════════════════════════════════════════════════ */
#resultado-overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  z-index: 521; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
  perspective: 1000px;
}
#resultado-overlay.show { opacity: 1 }
.resultado-card {
  min-width: 270px; padding: 26px 44px; border-radius: 20px; text-align: center;
  background: linear-gradient(150deg, rgba(12,31,20,.98), rgba(5,13,8,1));
  border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 0 50px rgba(255,255,255,.08), 0 24px 48px rgba(0,0,0,.7);
  transform-style: preserve-3d;
  transform: rotateX(-100deg); opacity: 0;
}
#resultado-overlay.show .resultado-card { animation: resultadoFlipIn .55s cubic-bezier(.22,.85,.35,1.15) forwards }
@keyframes resultadoFlipIn {
  0%   { transform: rotateX(-100deg); opacity: 0 }
  60%  { transform: rotateX(12deg);   opacity: 1 }
  100% { transform: rotateX(0deg);    opacity: 1 }
}
.resultado-card.gano   { border-color: var(--gold); box-shadow: 0 0 50px rgba(245,197,24,.25), 0 24px 48px rgba(0,0,0,.7) }
.resultado-card.pierde { border-color: var(--red);  box-shadow: 0 0 50px rgba(192,57,43,.25), 0 24px 48px rgba(0,0,0,.7) }
.resultado-titulo {
  font-family: var(--f-display); font-size: 22px; letter-spacing: 3px; color: #fff;
}
.resultado-card.gano   .resultado-titulo { color: var(--gold) }
.resultado-card.pierde .resultado-titulo { color: #ff8a7a }
.resultado-puntos {
  margin-top: 8px; font-family: var(--f-display); font-size: 48px; line-height: 1;
}
.resultado-card.gano   .resultado-puntos { color: var(--gold); text-shadow: 0 0 20px rgba(245,197,24,.5) }
.resultado-card.pierde .resultado-puntos { color: #ff8a7a;     text-shadow: 0 0 20px rgba(192,57,43,.5) }
.resultado-card.parda  .resultado-puntos { color: #fff }
.resultado-marcador {
  margin-top: 10px; font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,.5);
  text-transform: uppercase; font-family: var(--f-camiseta);
}

/* Reveal de cartas de envido/flor — solo aparece si hubo envido/flor
   "querido" en esta mano, recién al mostrar el resultado de la mano. */
.resultado-envido-reveal {
  display: none; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.resultado-envido-reveal.show { display: block }
.rev-titulo {
  font-size: 11px; letter-spacing: 3px; color: rgba(255,255,255,.45);
  text-transform: uppercase; margin-bottom: 8px; font-family: var(--f-camiseta);
}
.rev-cartas { display: flex; gap: 22px; justify-content: center; align-items: flex-start }
.rev-player { display: flex; flex-direction: column; align-items: center; gap: 4px }
.rev-name {
  font-size: 9px; color: rgba(255,255,255,.4); text-transform: uppercase;
  letter-spacing: 1px; font-family: var(--f-camiseta);
}

/* ══════════════════════════════════════════════════════
   MANO BADGE
   ══════════════════════════════════════════════════════ */
.mano-badge {
  font-size: 8px; color: var(--sky); font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; font-family: var(--f-camiseta);
  background: rgba(106,180,245,.12); border: 1px solid rgba(106,180,245,.4);
  border-radius: 6px; padding: 2px 6px;
  animation: badgePulse 1.4s ease-in-out infinite alternate;
}
@keyframes badgePulse { from { box-shadow:0 0 4px rgba(106,180,245,.2) } to { box-shadow:0 0 10px rgba(106,180,245,.6) } }

/* ══════════════════════════════════════════════════════
   PANEL LATERAL
   ══════════════════════════════════════════════════════ */
/* Ubicado a la derecha de #mesa (que está centrada con max-width:680px,
   margin:0 auto). 50% + 340px = borde derecho de la mesa, +14px de aire. */
/* #side-score es ahora el ÚNICO tanteador del juego (se quitó el
   marcador central duplicado). En pantallas anchas flota a la derecha
   de la mesa; en pantallas angostas se convierte en una barra
   horizontal arriba de la mesa (ver .side-score-compact más abajo). */
#side-score { position:fixed; left:calc(50% + 354px); right:auto; top:50%; transform:translateY(-50%); z-index:60; display:none }
.side-score-inner { background:linear-gradient(160deg,rgba(0,0,0,.65),rgba(0,0,0,.45)); border:1px solid rgba(106,180,245,.2); border-radius:14px; padding:10px 11px; min-width:62px; box-shadow:0 8px 22px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(6px); display:flex; flex-direction:column; align-items:center; gap:6px }
.side-score-pts { font-size:19px; font-weight:400; font-family:var(--f-display); color:#fff; letter-spacing:2px; white-space:nowrap }
.side-score-pts span.score-pop { animation: scorePop .55s cubic-bezier(.2,.8,.3,1.3) }
.side-score-sub { font-size:8px; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:1px; margin-top:-4px; font-family:var(--f-camiseta); text-shadow:0 1px 2px rgba(0,0,0,.6) }
.side-progress-wrap { width:100%; display:flex; flex-direction:column; gap:3px }
.side-prog-lbl { font-size:9px; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.8px; font-family:var(--f-camiseta); font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.6) }
.side-prog-lbl.rival { color:#ff8a7a }
.side-prog-bar-bg { width:100%; height:4px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden }
.side-prog-j { height:100%; background:var(--sky); border-radius:2px; transition:width .5s ease }
.side-prog-r { height:100%; background:var(--red);  border-radius:2px; transition:width .5s ease }
.side-pts-needed { font-size:9px; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.6px; text-align:center; font-family:var(--f-camiseta); text-shadow:0 1px 2px rgba(0,0,0,.6) }
.side-stake { font-size:10px; font-weight:700; color:#222; background:linear-gradient(160deg,#ffd24a,#f5a623); border-radius:8px; padding:2px 8px; text-align:center; text-transform:uppercase; letter-spacing:.6px; font-family:var(--f-camiseta); box-shadow:0 2px 6px rgba(0,0,0,.35); animation:stakePulse 1.4s ease-in-out infinite }
@keyframes stakePulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
.tant-fosforos { width:100%; border-top:1px solid rgba(255,255,255,.09); padding-top:8px; margin-top:4px; display:flex; flex-direction:column; gap:6px }
.tant-team-lbl { font-size:8px; color:rgba(106,180,245,.85); text-transform:uppercase; letter-spacing:1px; font-weight:700; text-align:center; font-family:var(--f-camiseta) }
.tant-team-lbl.rival { color:rgba(192,57,43,.85) }
.tant-cuadrados { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; min-height:40px; align-items:center; padding:2px 0 }
.tant-sep { width:100%; height:.5px; background:rgba(255,255,255,.07); margin:3px 0 }
.fosforo-mini.rival { background:var(--red); box-shadow:0 0 4px rgba(192,57,43,.5) }

/* Layout horizontal de #side-score para pantallas angostas, donde no
   entra como panel lateral fijo. JS (_actualizarSideScore) agrega esta
   clase y reubica el nodo como primer hijo de #mesa. */
.side-score-compact {
  position:static !important; left:auto !important; right:auto !important;
  top:auto !important; transform:none !important;
  width:100%; margin-bottom:6px;
}
.side-score-compact .side-score-inner {
  flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:6px 16px; width:100%; min-width:0; padding:6px 10px;
}
.side-score-compact .side-progress-wrap { flex:1 1 130px; min-width:110px }
.side-score-compact .side-pts-needed { flex:0 0 auto }
.side-score-compact .tant-fosforos {
  flex-basis:100%; border-top:1px solid rgba(255,255,255,.09);
  padding-top:6px; margin-top:2px;
}

/* ══════════════════════════════════════════════════════
   ANIMACIONES
   ══════════════════════════════════════════════════════ */
@keyframes dealIn      { from { transform:translateY(-70px) rotate(-6deg) scale(.65); opacity:0 } to { transform:none; opacity:1 } }
@keyframes dealInRival { from { transform:translateY(50px) rotate(4deg) scale(.65); opacity:0 } to { transform:none; opacity:1 } }
@keyframes cardLand    { 0%{transform:scale(1.12) translateY(-8px)} 55%{transform:scale(.97) translateY(1px)} 100%{transform:none} }
@keyframes rivalAppear { from{transform:scale(.5) translateY(-16px);opacity:0} to{transform:none;opacity:1} }
.deal-anim       { animation: dealIn .32s cubic-bezier(.2,.8,.4,1) both }
.deal-anim-rival { animation: dealInRival .32s cubic-bezier(.2,.8,.4,1) both }
.land-anim       { animation: cardLand .28s cubic-bezier(.2,.8,.4,1) both }

/* "Pelotazo": onda de impacto al caer la carta en la mesa */
.impact-ring {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px;
  margin: -23px 0 0 -23px; border-radius: 50%;
  border: 2px solid var(--gold-l, #ffe55a);
  pointer-events: none; opacity: 0;
  animation: impactRing .45s cubic-bezier(.2,.7,.3,1) both;
  z-index: 0;
}
.impact-ring.ring-2 { border-color: rgba(255,255,255,.8); animation-delay: .07s }
@keyframes impactRing {
  0%   { transform: scale(.3); opacity: .85; }
  100% { transform: scale(1.7); opacity: 0; }
}
.rival-anim      { animation: rivalAppear .4s cubic-bezier(.2,.8,.4,1) both }
.deal-anim:nth-child(1)       { animation-delay: .0s  }
.deal-anim:nth-child(2)       { animation-delay: .09s }
.deal-anim:nth-child(3)       { animation-delay: .18s }
.deal-anim-rival:nth-child(1) { animation-delay: .04s }
.deal-anim-rival:nth-child(2) { animation-delay: .13s }
.deal-anim-rival:nth-child(3) { animation-delay: .22s }

/* ══════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════ */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.78); display:none; align-items:center; justify-content:center; z-index:1000; backdrop-filter:blur(3px) }
.modal.show { display:flex }
.modal-box { background:linear-gradient(155deg,#0d2040,#060e20 65%,#040a18); border:2px solid rgba(106,180,245,.6); border-radius:20px; padding:28px 32px; text-align:center; max-width:340px; width:92%; box-shadow:0 28px 48px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07); animation:modalIn .2s cubic-bezier(.2,.8,.4,1) both }
@keyframes modalIn { from{transform:scale(.9) translateY(10px);opacity:0} to{transform:none;opacity:1} }
.modal-box h2  { color:var(--sky); margin-bottom:10px; font-size:22px; font-family:var(--f-display); letter-spacing:3px }
.modal-box p   { font-size:13px; color:rgba(255,255,255,.8); margin-bottom:16px; line-height:1.65; white-space:pre-line }
.modal-box .btn { margin:3px }
.reveal-grid   { display:flex; gap:10px; justify-content:center; align-items:flex-start; margin:10px 0 }
.result-header { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:12px }
.result-av     { width:50px; height:50px; border-radius:50%; object-fit:cover; border:2px solid var(--sky) }
#stats-modal .modal-box { max-width:380px; text-align:left; max-height:85vh; overflow-y:auto }
#stats-modal h2 { text-align:center }
.stat-row    { display:flex; justify-content:space-between; padding:6px 0; border-bottom:.5px solid rgba(255,255,255,.08); font-size:12px; color:rgba(255,255,255,.75); font-family:var(--f-camiseta) }
.stat-val    { color:var(--sky); font-weight:700 }
.hist-list   { max-height:200px; overflow-y:auto; margin:10px 0 }
.hist-item   { padding:4px 0; border-bottom:.5px solid rgba(255,255,255,.07); font-size:11px; color:rgba(255,255,255,.6) }
.hist-item span { float:right; color:var(--sky) }
.tabla-general { display:grid; gap:6px; margin-top:6px }
.tabla-row   { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#fff; font-weight:700 }
.tabla-sub   { font-size:10px; color:rgba(255,255,255,.65); margin-bottom:4px; line-height:1.4 }
#settings-modal .modal-box { text-align:left }
.setting-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:.5px solid rgba(255,255,255,.07) }
.setting-lbl { font-size:13px; color:rgba(255,255,255,.82); font-family:var(--f-camiseta) }
.setting-sub { font-size:10px; color:rgba(255,255,255,.32); margin-top:2px }
.theme-btns  { display:flex; gap:7px; margin-top:5px }
.theme-dot   { width:24px; height:24px; border-radius:50%; cursor:pointer; border:3px solid transparent; transition:border-color var(--t-fast) }
.theme-dot.active { border-color:#fff }
/* Colores de clubes */
.t-green    { background:linear-gradient(135deg, #1a6b3c, #22824a) }   /* tapete clásico */
.t-seleccion{ background:linear-gradient(135deg, #2b5fa8, #6ab4f5) }   /* Selección */
.t-boca     { background:linear-gradient(135deg, #0d2f7a, #f5c518) }   /* Boca */
.t-river    { background:linear-gradient(135deg, #b30000, #fff) }       /* River */
.t-racing   { background:linear-gradient(135deg, #111, #fff) }          /* Racing */
.toggle { width:40px; height:22px; border-radius:11px; background:rgba(255,255,255,.14); position:relative; cursor:pointer; transition:background .2s; flex-shrink:0 }
.toggle.on { background:var(--sky) }
.toggle::after { content:""; position:absolute; top:4px; left:4px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left .2s; box-shadow:0 1px 3px rgba(0,0,0,.3) }
.toggle.on::after { left:22px }
#tutorial-modal .modal-box { max-width:400px; text-align:left; max-height:88vh; overflow-y:auto }
#tutorial-modal h2 { text-align:center; margin-bottom:14px }
.tut-section { margin-bottom:14px }
.tut-section h3 { font-size:13px; color:var(--sky); margin-bottom:5px; font-family:var(--f-camiseta) }
.tut-section p,.tut-section li { font-size:12px; color:rgba(255,255,255,.75); line-height:1.65; margin-bottom:2px }
.tut-section ul { padding-left:16px }

/* ══════════════════════════════════════════════════════
   FABs
   ══════════════════════════════════════════════════════ */
.fab-group { position:fixed; bottom:10px; right:10px; display:flex; gap:6px; z-index:50 }
.fab { width:36px; height:36px; border-radius:50%; border:1.5px solid rgba(106,180,245,.6); background:rgba(0,0,0,.45); color:var(--sky); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--t-fast); box-shadow:0 6px 14px rgba(0,0,0,.3); backdrop-filter:blur(4px); -webkit-tap-highlight-color:transparent }
.fab:hover  { background:var(--sky); color:#fff; transform:translateY(-2px) }
.fab:active { transform:scale(.93) }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
   ══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  :root { --cw:60px; --ch:90px; --cr:6px }
  #mesa { border-radius:14px; padding:8px 8px 4px; gap:3px }
  .score-pts { font-size:26px; padding:3px 10px; gap:6px }
  .btn { font-size:10px; padding:6px 11px; min-height:34px; border-radius:10px }
  .toast { font-size:14px; padding:10px 18px }
  .fab-group { bottom:6px; right:6px; gap:5px }
  .fab { width:32px; height:32px; font-size:13px }
  .modal-box { padding:20px 18px }
  .modal-box h2 { font-size:18px }
  .player-hand { gap:6px }
  .rival-hand  { gap:5px }
  /* En pantallas muy chicas se esconden los fósforos del side-score
     (queda solo puntos + barra + "faltan X") para no comer espacio */
  .side-score-compact .tant-fosforos { display:none }
}
@media (max-width: 360px) {
  :root { --cw:52px; --ch:78px }
  .score-pts { font-size:22px }
  .btn { font-size:9px; padding:5px 9px }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* ══════════════════════════════════════════════════════
   MENÚ PRINCIPAL — CONTENIDO
   ══════════════════════════════════════════════════════ */
.mm-content { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:12px; padding:14px; width:100%; max-width:400px }
@keyframes escudoPulse { 0%,100%{filter:drop-shadow(0 0 10px rgba(106,180,245,.25))} 50%{filter:drop-shadow(0 0 22px rgba(106,180,245,.55))} }
.mm-nav { display:flex; flex-direction:column; gap:7px; width:100% }
.mm-btn { display:flex; align-items:center; gap:13px; padding:10px 18px; border-radius:11px; cursor:pointer; font-family:var(--f-camiseta); border:none; transition:all .15s; text-align:left; -webkit-tap-highlight-color:transparent; position:relative; overflow:hidden }
.mm-btn::before { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.08) 40%,rgba(255,255,255,.08) 60%,transparent 60%); opacity:0; transition:opacity .2s }
.mm-btn:hover::before { opacity:1 }
.mm-btn:active { transform:scale(.97) }
.mm-btn-primary { background:linear-gradient(135deg,var(--sky) 0%,#3a8ad4 50%,#1a5aaa 100%); color:#fff; box-shadow:0 8px 20px rgba(106,180,245,.3); border:1px solid rgba(255,255,255,.2) }
.mm-btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(106,180,245,.4) }
.mm-btn-secondary { background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.16) }
.mm-btn-secondary:hover { background:rgba(255,255,255,.14); transform:translateY(-1px) }
.mm-btn-icon { font-size:22px; flex-shrink:0; width:36px; height:36px; background:rgba(0,0,0,.2); border-radius:9px; display:flex; align-items:center; justify-content:center }
.mm-btn-text { display:flex; flex-direction:column; gap:2px }
.mm-btn-text strong { font-size:17px; font-weight:700; letter-spacing:2px }
.mm-btn-text small   { font-size:11px; opacity:.7; font-weight:400; letter-spacing:.5px; font-family:var(--f-body) }
.mm-footer { display:flex; gap:8px; flex-wrap:wrap; justify-content:center }
.mm-link { background:none; border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.5); font-size:11px; font-family:var(--f-camiseta); cursor:pointer; padding:6px 14px; border-radius:20px; transition:all .13s; letter-spacing:1px; font-weight:600 }
.mm-link:hover { border-color:var(--gold); color:var(--gold) }
.mm-version { font-size:10px; color:rgba(255,255,255,.18); letter-spacing:1px; font-family:var(--f-camiseta) }

/* ══════════════════════════════════════════════════════
   ANOTADOR
   ══════════════════════════════════════════════════════ */
#anotador-screen { position:fixed; inset:0; display:none; flex-direction:column; align-items:center; z-index:800; overflow-y:auto; padding:56px 14px 20px; gap:14px }
.an-header { text-align:center }
.an-title  { font-size:28px; color:var(--sky); font-family:var(--f-display); letter-spacing:6px; font-weight:400; text-shadow:0 0 16px rgba(106,180,245,.25) }
.an-sub    { font-size:11px; color:rgba(255,255,255,.4); letter-spacing:2px; font-family:var(--f-camiseta) }
.an-names  { display:flex; align-items:center; gap:10px; width:100%; max-width:480px }
.an-team   { flex:1 }
.an-vs     { font-size:12px; color:rgba(255,255,255,.3); font-family:var(--f-camiseta); flex-shrink:0 }
.an-name-input { width:100%; background:rgba(255,255,255,.07); border:2px solid rgba(106,180,245,.4); border-radius:10px; padding:8px 12px; color:var(--sky); font-size:13px; font-family:var(--f-camiseta); font-weight:700; letter-spacing:2px; text-align:center; outline:none; transition:border-color .15s; text-transform:uppercase }
.an-name-input.rival { border-color:rgba(192,57,43,.4); color:#e05252 }
.an-name-input:focus { border-color:var(--sky) }
.an-name-input.rival:focus { border-color:var(--red) }
.an-name-input::placeholder { color:rgba(255,255,255,.22); font-weight:400; text-transform:none }
.an-mode-row { display:flex; align-items:center; gap:6px }
.an-mode-btn { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.5); font-size:11px; font-family:var(--f-camiseta); padding:5px 14px; border-radius:20px; cursor:pointer; transition:all .13s; letter-spacing:1px; font-weight:700 }
.an-mode-btn.active { background:rgba(106,180,245,.18); border-color:var(--sky); color:var(--sky) }
.an-mode-sep { color:rgba(255,255,255,.2); font-size:12px }
.an-tanteador { display:flex; align-items:stretch; gap:0; width:100%; max-width:480px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08); border-radius:18px; overflow:hidden; transition:box-shadow .2s }
.an-tanteador.nueva-mano-flash { box-shadow:0 0 0 2px var(--sky) }
.an-team-panel { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 10px; transition:background .3s }
.an-team-panel.an-ganando { background:rgba(106,180,245,.07) }
.an-team-panel.rival.an-ganando { background:rgba(192,57,43,.07) }
.an-team-name { font-size:11px; color:var(--sky); font-family:var(--f-camiseta); font-weight:700; letter-spacing:2px; text-transform:uppercase }
.an-team-name.rival { color:#e05252 }
.an-fosforos { min-height:50px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px }
.an-pts-big  { font-size:48px; font-weight:400; line-height:1; font-family:var(--f-display); color:var(--sky); text-shadow:0 0 16px rgba(106,180,245,.2) }
.an-pts-big.rival { color:#e05252; text-shadow:0 0 16px rgba(192,57,43,.2) }
.an-btn-row { display:flex; gap:5px; flex-wrap:wrap; justify-content:center }
.an-minus,.an-plus,.an-plus2,.an-plus3 { border-radius:10px; cursor:pointer; font-family:var(--f-camiseta); font-weight:700; font-size:12px; transition:all .13s; padding:5px 10px; min-height:32px; -webkit-tap-highlight-color:transparent }
.an-minus  { background:rgba(192,57,43,.15); border:1px solid rgba(192,57,43,.35); color:#e05252 }
.an-minus:hover { background:rgba(192,57,43,.28) }
.an-plus   { background:rgba(106,180,245,.15); border:1px solid rgba(106,180,245,.4); color:var(--sky) }
.an-plus.rival  { background:rgba(192,57,43,.15); border-color:rgba(192,57,43,.4); color:#e05252 }
.an-plus2       { background:rgba(106,180,245,.22); border:1px solid rgba(106,180,245,.5); color:var(--sky) }
.an-plus2.rival { background:rgba(192,57,43,.22); border-color:rgba(192,57,43,.5); color:#e05252 }
.an-plus3       { background:rgba(106,180,245,.3); border:1px solid var(--sky); color:#fff }
.an-plus3.rival { background:rgba(192,57,43,.3); border-color:var(--red); color:#fff }
.an-plus:hover,.an-plus2:hover,.an-plus3:hover { transform:translateY(-1px) }
.an-plus:active,.an-plus2:active,.an-plus3:active,.an-minus:active { transform:scale(.94) }
.an-center { width:28px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px 0; gap:6px; border-left:1px solid rgba(255,255,255,.06); border-right:1px solid rgba(255,255,255,.06) }
.an-progress-wrap { flex:1; width:6px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; display:flex; flex-direction:column-reverse; position:relative }
.an-prog-j { width:100%; background:var(--sky); border-radius:3px 3px 0 0; transition:height .4s ease }
.an-prog-r { position:absolute; top:0; left:0; width:100%; background:var(--red); border-radius:0 0 3px 3px; transition:height .4s ease; transform-origin:top }
.an-limit-lbl { font-size:9px; color:rgba(255,255,255,.3); font-family:var(--f-camiseta); letter-spacing:.5px; text-align:center }
.an-historial-wrap { width:100%; max-width:480px; background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:10px 14px; max-height:140px; overflow-y:auto }
.an-historial-title { font-size:9px; color:rgba(255,255,255,.3); font-family:var(--f-camiseta); letter-spacing:2px; text-transform:uppercase; margin-bottom:7px }
.an-historial { display:flex; flex-direction:column; gap:4px }
.an-hist-empty { font-size:11px; color:rgba(255,255,255,.25); text-align:center; padding:6px 0 }
.an-hist-row { display:flex; align-items:center; gap:6px; font-size:11px; color:rgba(255,255,255,.6); padding:3px 0; border-bottom:.5px solid rgba(255,255,255,.05); font-family:var(--f-camiseta) }
.an-hist-mano { color:rgba(255,255,255,.3); font-size:10px; min-width:20px }
.an-hist-j.sumó em,.an-hist-r.sumó em { color:var(--sky); font-style:normal; font-weight:700 }
.an-hist-r.sumó em { color:#e05252 }
.an-hist-sep { color:rgba(255,255,255,.2) }
.an-actions { display:flex; gap:8px; flex-wrap:wrap }
.an-actions .btn { flex:1 1 auto; min-width:110px }
.an-winner-banner { position:fixed; inset:0; background:rgba(0,0,0,.78); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; z-index:900; backdrop-filter:blur(4px); animation:mmIn .3s cubic-bezier(.2,.8,.4,1) both }
@keyframes mmIn { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:none} }
.an-winner-text { font-size:30px; font-weight:400; font-family:var(--f-display); color:var(--sky); text-shadow:0 0 24px rgba(106,180,245,.5); text-align:center; padding:0 20px; letter-spacing:4px }

/* ══════════════════════════════════════════════════════
   PARTIDO ONLINE
   ══════════════════════════════════════════════════════ */
#online-screen {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, #1a4a2e, #0a2016 80%);
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; z-index: 900; padding: 56px 20px 24px; overflow-y: auto;
}
.online-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; max-width: 320px;
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 20px 18px;
}
.online-big-btn { width: 100%; padding: 14px; font-size: 13px }
.online-sep { font-size: 10px; color: rgba(255,255,255,.25); letter-spacing: 2px; font-family: var(--f-camiseta) }
.online-join-row { display: flex; gap: 8px; width: 100% }
.online-code-input {
  flex: 1; background: rgba(255,255,255,.07); border: 2px solid rgba(245,197,24,.4);
  border-radius: 10px; padding: 11px 10px; color: var(--gold); font-size: 16px;
  font-family: var(--f-camiseta); font-weight: 700; letter-spacing: 4px;
  text-align: center; text-transform: uppercase; outline: none;
}
.online-code-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,197,24,.2) }
.online-code-input::placeholder { color: rgba(255,255,255,.2); letter-spacing: 2px }
.online-config-toggle {
  background: none; border: none; color: rgba(255,255,255,.35);
  font-size: 10px; font-family: var(--f-camiseta); letter-spacing: 1px;
  cursor: pointer; padding: 4px; text-transform: uppercase;
}
.online-config-toggle:hover { color: rgba(255,255,255,.6) }
.online-config { display: flex; flex-direction: column; gap: 8px; width: 100% }
.online-config .name-input { font-size: 11px; padding: 9px 12px; letter-spacing: 1px; max-width: none }
.online-msg { font-size: 11px; color: #e05252; text-align: center; font-family: var(--f-camiseta); min-height: 14px }
.online-codigo-label { font-size: 11px; color: rgba(255,255,255,.4); letter-spacing: 2px; font-family: var(--f-camiseta) }
.online-codigo-big {
  font-size: 40px; font-weight: 700; color: var(--gold);
  font-family: var(--f-camiseta); letter-spacing: 10px;
  text-shadow: 0 0 20px rgba(245,197,24,.35);
}
.online-waiting-msg { font-size: 12px; color: rgba(255,255,255,.5); font-family: var(--f-camiseta); letter-spacing: 1px; text-align: center }
.online-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.12); border-top-color: var(--sky);
  animation: onlineSpin .8s linear infinite;
}
@keyframes onlineSpin { to { transform: rotate(360deg) } }

/* ══════════════════════════════════════════════════════
   INDICADOR DE TURNO
   ══════════════════════════════════════════════════════ */
.zona-jugador.turno-activo::after { content:"▲ TU TURNO"; display:block; font-size:9px; color:var(--gold); text-shadow:0 0 6px rgba(245,197,24,.6); text-align:center; letter-spacing:2px; font-family:var(--f-camiseta); font-weight:700; animation:badgePulse .8s ease-in-out infinite alternate; margin-top:2px }

/* Resplandor alrededor de la mano cuando es tu turno */
.zona-jugador.turno-activo .player-hand {
  border-radius: 14px;
  animation: turnGlow 1.1s ease-in-out infinite alternate;
}
@keyframes turnGlow {
  from { box-shadow: 0 0 0px 0px rgba(245,197,24,0); }
  to   { box-shadow: 0 0 18px 5px rgba(245,197,24,.4); }
}
.card.can-play:hover::before { opacity:1 !important; background:linear-gradient(125deg,rgba(255,255,255,.7) 0%,transparent 22%,transparent 58%,rgba(255,255,255,.25) 100%) !important }

/* ══════════════════════════════════════════════════════
   MENÚ PREMIUM — secciones y botones de copa
   ══════════════════════════════════════════════════════ */
.mm-seccion {
  display:flex; align-items:center; gap:10px;
  width:100%; margin:3px 2px 0;
  font-family:var(--f-camiseta); font-size:10px; font-weight:700;
  letter-spacing:3px; color:rgba(255,255,255,.55);
}
.mm-seccion::after {
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, rgba(200,168,75,.5), transparent);
}
.mm-seccion span { white-space:nowrap }

/* Botón de copa: dorado, con brillo de trofeo */
.mm-btn-copa {
  background:linear-gradient(135deg,#3a2f12 0%, #5a4a1c 45%, #2c2410 100%);
  color:#fff; border:1px solid rgba(245,197,24,.45);
  box-shadow:0 8px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(245,197,24,.25);
}
.mm-btn-copa:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(245,197,24,.28), inset 0 1px 0 rgba(245,197,24,.35); border-color:rgba(245,197,24,.8) }
.mm-btn-copa .mm-btn-icon { filter:drop-shadow(0 0 6px rgba(245,197,24,.6)) }
.mm-btn-copa .mm-btn-text strong { color:#ffe08a }

/* Mundial de Clubes: el más jerárquico */
.mm-btn-cwc {
  background:linear-gradient(135deg,#4a2c0e 0%, #7a4a12 45%, #3a2208 100%);
  border-color:rgba(255,224,138,.6);
}
.mm-btn-cwc .mm-btn-text strong { color:#fff3cf }

/* Etiqueta "pronto" en las copas en construcción */
.mm-soon {
  font-family:var(--f-body); font-style:normal; font-size:9px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; color:#0a1a0e;
  background:#ffe08a; border-radius:6px; padding:1px 6px; margin-left:8px;
  vertical-align:middle;
}

/* ══════════════════════════════════════════════════════
   MENÚ — TARJETAS DE TORNEO CON IDENTIDAD DE COLOR
   Cada botón recibe un acento (--acc) que tiñe el borde, el
   ícono y el brillo, para que elegir torneo sea más visual.
   Mayor especificidad que las clases base → gana sin importar orden.
   ══════════════════════════════════════════════════════ */
.mm-acc-amistoso  { --acc:#74c69d }
.mm-acc-online    { --acc:#2dd4bf }
.mm-acc-anotador  { --acc:#e9b949 }
.mm-acc-mundial   { --acc:#3aa0ff }
.mm-acc-liberta   { --acc:#f2c200 }
.mm-acc-champions { --acc:#5566ff }
.mm-acc-cwc       { --acc:#d4af37 }
.mm-acc-manager   { --acc:#ff8a3d }

.mm-btn[class*="mm-acc-"] {
  background:
    linear-gradient(105deg, rgba(255,255,255,.05), rgba(0,0,0,.10)),
    linear-gradient(0deg, rgba(0,0,0,.32), rgba(0,0,0,.32));
  border:1px solid rgba(255,255,255,.12);
  border-left:4px solid var(--acc);
  box-shadow:0 6px 16px rgba(0,0,0,.30);
  padding-right:38px;
}
.mm-btn[class*="mm-acc-"]:hover {
  transform:translateY(-2px);
  border-color:var(--acc);
  box-shadow:0 12px 30px rgba(0,0,0,.40), 0 0 0 1px var(--acc) inset;
}
.mm-btn[class*="mm-acc-"] .mm-btn-icon {
  background:rgba(0,0,0,.28);
  box-shadow:0 0 0 1.5px var(--acc) inset, 0 0 16px -5px var(--acc);
  filter:none;
}
.mm-btn[class*="mm-acc-"] .mm-btn-text strong { color:#fff }
/* Chevron a la derecha */
.mm-btn[class*="mm-acc-"]::after {
  content:"›"; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-family:Georgia, serif; font-size:26px; line-height:0; color:var(--acc);
  opacity:.55; pointer-events:none;
}
.mm-btn[class*="mm-acc-"]:hover::after { opacity:1; right:13px; }

/* ══════════════════════════════════════════════════════
   COMPETICIONES — tarjetas premium con identidad de copa
   Cada copa se tiñe con su --acc: fondo, ícono con glow de
   trofeo, título brillante y barrido de brillo al pasar.
   (más específico que .mm-btn[class*="mm-acc-"] → gana)
   ══════════════════════════════════════════════════════ */
.mm-btn.mm-btn-copa {
  min-height: 74px;
  padding: 12px 40px 12px 18px;
  background:
    radial-gradient(150% 130% at 6% -10%, color-mix(in srgb, var(--acc) 34%, transparent), transparent 58%),
    linear-gradient(135deg, #17161f, #0b0a10);
  border: 1px solid color-mix(in srgb, var(--acc) 42%, rgba(255,255,255,.08));
  border-left: 4px solid var(--acc);
  box-shadow: 0 8px 24px rgba(0,0,0,.42), inset 0 1px 0 color-mix(in srgb, var(--acc) 30%, transparent);
}
.mm-btn.mm-btn-copa .mm-btn-icon {
  width: 48px; height: 48px; font-size: 28px; border-radius: 13px;
  background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--acc) 34%, #000), #05050a);
  box-shadow: 0 0 0 1.5px var(--acc) inset, 0 0 26px -4px var(--acc);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
.mm-btn.mm-btn-copa .mm-btn-text strong {
  font-size: 19px;
  color: color-mix(in srgb, var(--acc) 42%, #fff);
  text-shadow: 0 0 16px color-mix(in srgb, var(--acc) 48%, transparent);
}
.mm-btn.mm-btn-copa .mm-btn-text small { opacity: .8; }
/* Barrido de brillo de trofeo al pasar (repurpose del ::before base) */
.mm-btn.mm-btn-copa::before {
  background: linear-gradient(105deg, transparent 34%, color-mix(in srgb, var(--acc) 60%, #fff) 50%, transparent 64%);
  opacity: 0; transform: translateX(-115%);
}
.mm-btn.mm-btn-copa:hover::before { opacity: .55; animation: mmCopaShine .8s ease; }
@keyframes mmCopaShine { from { transform: translateX(-115%); } to { transform: translateX(115%); } }
.mm-btn.mm-btn-copa:hover {
  transform: translateY(-3px);
  border-color: var(--acc);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--acc) 30%, rgba(0,0,0,.45)), inset 0 0 0 1px var(--acc);
}
.mm-btn.mm-btn-copa::after { color: var(--acc); opacity: .7; }

/* ══════════════════════════════════════════════════════
   PANTALLA DE COPA (Libertadores / Champions)
   ══════════════════════════════════════════════════════ */
#copa-screen {
  --copa-acc:#f2c200;
  display:none; position:fixed; inset:0; z-index:40;
  flex-direction:column; align-items:center;
  background:
    radial-gradient(95% 55% at 50% -8%, color-mix(in srgb, var(--copa-acc) 20%, transparent), transparent 62%),
    linear-gradient(160deg,#0c2c1a,#06120a);
  overflow-y:auto; padding:14px;
}
#copa-screen .copa-title { color:color-mix(in srgb, var(--copa-acc) 40%, #fff); text-shadow:0 0 18px color-mix(in srgb, var(--copa-acc) 50%, transparent); }
#copa-content { width:100%; max-width:780px; color:#fff; font-family:var(--f-camiseta,sans-serif); }
.copa-head { display:flex; align-items:center; gap:12px; margin-bottom:10px }
.copa-title { font-size:22px; letter-spacing:2px; color:#ffe08a; margin:0; flex:1; text-align:center }
.copa-sub { text-align:center; opacity:.8; font-size:13px; margin:8px 0 }
.copa-esc, .copa-esc-sm, .copa-esc-big {
  object-fit:contain; vertical-align:middle;
  background:rgba(255,255,255,.9); border-radius:50%;
  padding:2px; box-shadow:0 0 0 1px rgba(0,0,0,.25);
}
.copa-esc { width:34px; height:34px } .copa-esc-sm { width:20px; height:20px } .copa-esc-big { width:80px; height:80px }

/* Selector de club */
.copa-pool { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px }
.copa-eq { display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 6px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:10px;
  color:#fff; cursor:pointer; font-size:11px; text-align:center; transition:all .15s }
.copa-eq:hover { background:color-mix(in srgb, var(--copa-acc) 16%, transparent); border-color:color-mix(in srgb, var(--copa-acc) 60%, transparent); transform:translateY(-2px) }
.copa-eq img { width:44px; height:44px; object-fit:contain; background:rgba(255,255,255,.9); border-radius:50%; padding:3px; box-shadow:0 0 0 1px rgba(0,0,0,.25) }

/* Botón jugar mi partido */
.copa-jugar { text-align:center; margin:12px 0; padding:14px 16px; border-radius:16px;
  background:radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--copa-acc) 14%, transparent), transparent 65%), rgba(0,0,0,.22);
  border:1px solid color-mix(in srgb, var(--copa-acc) 40%, transparent);
  box-shadow:0 8px 26px rgba(0,0,0,.35), inset 0 1px 0 color-mix(in srgb, var(--copa-acc) 25%, transparent) }
.copa-vs { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; font-size:14px }
.copa-vs b { color:color-mix(in srgb, var(--copa-acc) 45%, #fff); font-size:16px }
.copa-btn-jugar { font-size:16px; letter-spacing:1px; padding:12px 26px }

/* Grupos */
.copa-grupos { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:8px }
.copa-grupo { background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.14));
  border:1px solid color-mix(in srgb, var(--copa-acc) 22%, rgba(255,255,255,.1)); border-radius:12px; padding:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.3) }
.copa-grupo-tit { font-size:12px; letter-spacing:2px; color:color-mix(in srgb, var(--copa-acc) 55%, #fff);
  margin-bottom:7px; padding-bottom:5px; text-align:center; border-bottom:1px solid color-mix(in srgb, var(--copa-acc) 20%, transparent) }
.copa-row { display:flex; align-items:center; gap:6px; padding:4px; border-radius:6px; font-size:12px; transition:background .15s }
.copa-row .copa-pos { width:16px; opacity:.55; text-align:center; font-weight:700 }
.copa-row .copa-nom { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.copa-row .copa-pts { font-weight:700; color:color-mix(in srgb, var(--copa-acc) 45%, #fff) }
/* Zona de clasificación (top 2): franja verde a la izquierda */
.copa-row.clasi { background:rgba(31,158,75,.16); box-shadow:inset 3px 0 0 rgba(46,204,113,.7) }
.copa-row.yo { outline:1px solid color-mix(in srgb, var(--copa-acc) 70%, transparent);
  background:color-mix(in srgb, var(--copa-acc) 15%, transparent) }

/* Llave */
.copa-bracket { display:flex; gap:12px; overflow-x:auto; padding:10px 0; margin-top:8px }
.copa-ronda { min-width:150px; display:flex; flex-direction:column; gap:10px; justify-content:space-around }
.copa-ronda-tit { font-size:11px; letter-spacing:2px; color:color-mix(in srgb, var(--copa-acc) 55%, #fff); text-align:center }
.copa-cruce { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:8px; overflow:hidden }
.copa-lado { display:flex; align-items:center; gap:5px; padding:5px 7px; font-size:11px; border-bottom:1px solid rgba(255,255,255,.08) }
.copa-lado:last-child { border-bottom:none }
.copa-lado.gana { background:rgba(31,158,75,.25); font-weight:700 }
.copa-lado.yo { outline:1px solid color-mix(in srgb, var(--copa-acc) 60%, transparent) }

/* Campeón */
.copa-campeon { text-align:center; margin:16px 0; padding:18px; border-radius:16px;
  background:linear-gradient(160deg,rgba(245,197,24,.18),rgba(0,0,0,.2)); border:1px solid rgba(245,197,24,.5) }
.copa-campeon-txt { font-size:18px; color:#ffe08a; margin:10px 0; letter-spacing:1px }
.copa-foot { text-align:center; margin:16px 0 28px }

/* ══════════════════════════════════════════════════════
   RANKING VISIBLE EN JUEGO
   ══════════════════════════════════════════════════════ */
#mesa-ranking {
  position: fixed;
  bottom: 140px;
  right: 16px;
  background: linear-gradient(145deg, rgba(20,20,40,0.95), rgba(15,15,30,0.98));
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 12px 14px;
  z-index: 900;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#mesa:not([style*="display: none"]) ~ #mesa-ranking,
#mesa[style*="display: grid"] ~ #mesa-ranking,
#mesa[style*="display: flex"] ~ #mesa-ranking {
  opacity: 1;
  pointer-events: auto;
}
.ranking-titulo {
  font-size: 11px;
  font-weight: 800;
  color: #f0d060;
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.ranking-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  border-left: 3px solid rgba(106,180,245,0.5);
  font-size: 10px;
}
.ranking-pos {
  font-weight: 800;
  color: #f0d060;
  min-width: 18px;
}
.ranking-nombre {
  flex: 1;
  color: #d0d0e8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ranking-pts {
  font-weight: 700;
  color: #2ecc71;
  font-size: 10px;
}

/* ══════════════════════════════════════════════════════
   MESA RESPONSIVE POR ALTO — que entre en pantallas bajas
   El TAMAÑO DE CARTA ya no se toca acá: sale del clamp(78px, 24vh, 300px)
   de :root, que escala continuo y no deja huecos entre breakpoints (el
   hueco era justamente lo que rompía las notebooks). Estas reglas quedan
   solo para apretar paddings y tipografías, que no son proporcionales.
   ══════════════════════════════════════════════════════ */
@media (max-height: 820px) {
  #mesa { padding:8px 10px 4px; gap:3px; }
}
@media (max-height: 720px) {
  .score-pts { font-size:22px; padding:2px 9px; }
}
@media (max-height: 620px) {
  #mesa { padding:6px 8px 3px; gap:2px; }
  .score-pts { font-size:18px; }
  .btn { min-height:30px; padding:5px 9px; font-size:10px; }
}

/* ══════════════════════════════════════════════════════════════
   PODA DE LA MESA — 2026-07-25
   La mesa tenía 15 cosas compitiendo a la vez y el marcador estaba
   repetido CUATRO veces (13-15 numérico + fósforos + "F.15" +
   "MALAS·BU"). La referencia que buscamos (Blyts) muestra cuatro:
   mesa, cartas, rival y anotador. Todo lo que se apaga acá es
   información que el juego YA comunica de otra forma.
   Cada bloque dice por qué; para revertir uno, borrá su bloque.
   ══════════════════════════════════════════════════════════════ */

/* 1 — PANEL DE ACTIVIDAD: era un log de consola ("Cantaste TRUCO",
   "Dijiste QUIERO") narrando cosas que el jugador acababa de hacer.
   El historial ya vive en su propio modal (botón 📋). */
#panel-actividad { display: none !important; }

/* 2 — RANKING "TOP": un leaderboard DURANTE la partida no le sirve a
   nadie; distrae y encima chocaba con el panel de actividad.
   Sigue disponible en el botón 🏅. */
#mesa-ranking { display: none !important; }

/* 3 — MARCADOR, de 4 representaciones a 2: quedan los fósforos (lo más
   truquero, el equivalente al anotador de papel) y el número. Se van
   "F.30" (los puntos que faltan) y "MALAS·BUENAS", que son derivables
   del marcador de un vistazo. */
#side-pts-needed, .side-pts-needed,
#side-malas-buenas { display: none !important; }

/* 4 — PANEL R1/R2/R3: las cartas sobre la mesa ya dicen quién ganó cada
   baza; esto lo repetía en un cuadrito que además parecía de debug. */
#rondas-panel { display: none !important; }

/* 6 — BARRA DE EMOJIS FLOTANTE: duplicaba el botón 💬 que ya está en la
   fila de acciones, y encima se le montaba encima tapando los botones. */
#ext-frases-panel, .ext-frases-panel { display: none !important; }

/* 7 — GRADAS: eran lo más contrastado de la pantalla (puntos rojos,
   blancos y amarillos a full saturación) compitiendo con las cartas.
   Pasan a ser atmósfera: desaturadas, oscurecidas y apenas desenfocadas.
   La decoración no puede gritar más fuerte que el juego. */
#tribuna-izq, #tribuna-der {
  filter: saturate(.45) brightness(.5) blur(1.5px);
  opacity: .8;
}

/* 5 — El menú colapsado. El botón ☰ ocupa el lugar donde estaba el primer
   icono; los 11 se despliegan en columna sobre él sólo al abrirlo. */
#fab-menu-btn {
  position: fixed; bottom: 10px; right: 10px; z-index: 60;
  width: 40px; height: 40px; font-size: 17px;
}
.fab-group {
  flex-direction: column-reverse;
  bottom: 56px;                 /* arranca arriba del botón ☰ */
  max-height: 70vh; overflow-y: auto; overflow-x: hidden;
}
/* Abre/cierra por display y NO por una transición de max-height: si la
   animación no llega a correr (pestaña en segundo plano, prefers-reduced-
   motion, un render congelado) el menú se quedaba en max-height:0 y no
   abría nunca. El !important es para ganarle al display:flex inline que
   le pone anotador.js al entrar a la mesa. */
.fab-group:not(.fab-abierto) { display: none !important; }
@media (max-width: 480px) {
  #fab-menu-btn { bottom: 6px; right: 6px; width: 36px; height: 36px }
  .fab-group { bottom: 48px }
}

/* ══════════════════════════════════════════════════════════════
   MENÚ 2.0 — jerarquía + movimiento (2026-07-25)
   Pedido: animaciones fluidas, fondo vivo y parallax SIN tocar la
   velocidad de carga. Por eso acá no hay ni un asset de red: el
   "video de fondo" es un estadio nocturno hecho con gradientes
   animados (0 KB), el parallax es transform sobre capas que ya
   existían, y todo respeta prefers-reduced-motion.
   La lógica (acordeón, parallax, stagger) vive en menu_fx.js.
   ══════════════════════════════════════════════════════════════ */

/* ── Fondo "estadio de noche": cielo + resplandor de reflectores que
   barre lento. Dos capas fijas detrás del contenido. ── */
#main-menu::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 50% -10%, #123a5c 0%, transparent 60%),
    radial-gradient(90% 70% at 15% 110%, #0d3320 0%, transparent 55%),
    radial-gradient(90% 70% at 85% 110%, #0d3320 0%, transparent 55%),
    linear-gradient(180deg, #050d14 0%, #071a10 55%, #04140a 100%);
}
#main-menu::after {
  content: ""; position: fixed; inset: -20%; z-index: -1;
  pointer-events: none;
  background:
    conic-gradient(from 200deg at 20% 0%,  transparent 0 10deg, rgba(140,190,255,.06) 14deg, transparent 22deg),
    conic-gradient(from 140deg at 80% 0%,  transparent 0 10deg, rgba(140,190,255,.05) 14deg, transparent 22deg);
  animation: mmReflector 14s ease-in-out infinite alternate;
}
@keyframes mmReflector {
  from { transform: rotate(-4deg) }
  to   { transform: rotate(4deg) }
}

/* Las capas decorativas se mueven por JS (parallax): que el transform
   sea barato y no dispare layout. */
.mm-cancha, .mm-confetti { will-change: transform; }

/* ── Entrada escalonada: cada botón cae con su delay (--d, lo pone
   menu_fx.js). Solo transform+opacity: compone en GPU. ── */
.mm-anim-in {
  animation: mmCaer .5s cubic-bezier(.2,.8,.25,1) both;
  animation-delay: var(--d, 0s);
}
@keyframes mmCaer {
  from { opacity: 0; transform: translateY(18px) scale(.98) }
  to   { opacity: 1; transform: none }
}

/* ── Acordeón por sección. La altura anima con el truco de
   grid-template-rows 0fr→1fr: fluido y sin medir alturas en JS. ── */
.mm-grupo.abierto .mm-chev { transform: rotate(180deg); }
.mm-grupo.abierto .mm-grupo-body { grid-template-rows: 1fr; }
/* aire para que el fade del stagger no se corte con el overflow */

/* Micro-interacción de los botones: levantan al pasar, hunden al tocar */
.mm-btn { transition: transform .18s cubic-bezier(.2,.8,.25,1), box-shadow .18s, filter .18s; }
.mm-btn:hover  { transform: translateY(-2px); filter: brightness(1.08); }
.mm-btn:active { transform: translateY(0) scale(.985); }

/* ── Transición entre pantallas: la que entra aparece con fade+lift.
   La aplica el wrapper de irA() en menu_fx.js. ── */
.screen-enter { animation: screenEnter .26s cubic-bezier(.2,.8,.25,1) both; }
@keyframes screenEnter {
  from { opacity: 0; transform: translateY(14px) }
  to   { opacity: 1; transform: none }
}

/* ── Accesibilidad y batería: si el usuario pidió menos movimiento,
   todo esto desaparece y el menú es estático. ── */
@media (prefers-reduced-motion: reduce) {
  #main-menu::after, .mm-anim-in, .screen-enter { animation: none !important; }
  .mm-cancha, .mm-confetti { transform: none !important; }
  .mm-confetti span { animation: none; }
}

/* Palos de baraja ESPAÑOLA (espada/basto/oro/copa) para el loading y el
   logo del menú. Antes había ♠♥♦♣ — palos de póker en un juego de truco. */
.palo-esp {
  width: 1.15em; height: 1.15em; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  margin: 0 .35em;
}

/* ══════════════════════════════════════════════════════════════
   MENÚ PREMIUM — unificación visual (2026-07-25)
   El menú tenía un botón de cada color (naranja, violeta, azul,
   dorado...): cuando todo grita su propio acento, nada se ve
   premium. Regla nueva: UNA familia de superficies (vidrio oscuro),
   UN acento dominante (dorado) y la identidad de cada modo
   CONTENIDA en su icono. Va después de todo el CSS de acentos,
   con la misma especificidad o más → pisa sin tocar lo anterior.
   ══════════════════════════════════════════════════════════════ */

/* ── Superficie única para TODOS los botones del nav ── */
.mm-nav .mm-btn[class*="mm-acc-"],
.mm-nav .mm-btn.mm-btn-copa {
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
    rgba(8,14,10,.62);
  border: 1px solid rgba(255,255,255,.09);
  border-left: 1px solid rgba(255,255,255,.09);   /* mata la barra de color */
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  min-height: 60px; padding: 11px 40px 11px 14px;
}
/* Tipografía uniforme: títulos blancos, sin glow de color */
.mm-nav .mm-btn[class*="mm-acc-"] .mm-btn-text strong,
.mm-nav .mm-btn.mm-btn-copa .mm-btn-text strong {
  color: #fff; font-size: 15px; letter-spacing: .6px; text-shadow: none;
}
.mm-nav .mm-btn[class*="mm-acc-"] .mm-btn-text small,
.mm-nav .mm-btn.mm-btn-copa .mm-btn-text small {
  color: rgba(255,255,255,.5); opacity: 1; font-size: 10.5px;
}
/* La identidad del modo vive SOLO acá: el icono, teñido con su --acc */
.mm-nav .mm-btn[class*="mm-acc-"] .mm-btn-icon,
.mm-nav .mm-btn.mm-btn-copa .mm-btn-icon {
  width: 42px; height: 42px; font-size: 22px; border-radius: 12px;
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--acc, #c8a84b) 26%, transparent), transparent 70%),
    rgba(0,0,0,.35);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc, #c8a84b) 45%, transparent);
  filter: none;
}
/* Hover sobrio: lift + el acento asoma en el borde, nada más */
.mm-nav .mm-btn[class*="mm-acc-"]:hover,
.mm-nav .mm-btn.mm-btn-copa:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--acc, #c8a84b) 55%, rgba(255,255,255,.1));
  box-shadow: 0 14px 34px rgba(0,0,0,.45),
              0 0 22px -8px color-mix(in srgb, var(--acc, #c8a84b) 60%, transparent);
}
.mm-nav .mm-btn[class*="mm-acc-"]::after { color: rgba(255,255,255,.4); }
.mm-nav .mm-btn[class*="mm-acc-"]:hover::after { color: var(--acc, #c8a84b); }

/* ── El HERO sí lleva el oro — pero SOLO lo que vive fuera de los
   grupos (PICADITO, RETOMAR). CARRERA también tiene .mm-btn-primary en
   el HTML y quedaba dorado adentro de MODO DT: los items etiquetados
   con data-mmg (= dentro de una sección) no son hero por definición. ── */
.mm-nav .mm-btn.mm-btn-primary:not([data-mmg]) {
  background:
    linear-gradient(180deg, rgba(245,197,24,.14), rgba(245,197,24,.04)),
    rgba(10,16,10,.75);
  border: 1px solid rgba(245,197,24,.5);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 26px -10px rgba(245,197,24,.55),
              inset 0 1px 0 rgba(255,255,255,.08);
}
.mm-nav .mm-btn.mm-btn-primary:not([data-mmg]) .mm-btn-text strong { color: var(--gold, #f5c518); }
.mm-nav .mm-btn.mm-btn-primary:not([data-mmg]):hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,.5), 0 0 34px -8px rgba(245,197,24,.75);
}

/* ── Badges (HOT/BETA/RÁPIDO): chip contenido, no caramelo ── */
.mm-badge, .mm-badge-gold {
  background: rgba(245,197,24,.12) !important;
  color: var(--gold, #f5c518) !important;
  border: 1px solid rgba(245,197,24,.4);
  border-radius: 20px; padding: 2px 8px;
  font-size: 8.5px; letter-spacing: 1.5px; font-weight: 700;
  box-shadow: none !important; text-shadow: none !important;
}

/* ── Títulos de sección: con aire y peso, línea a ambos lados ── */
.mm-seccion {
  margin: 16px 2px 6px; font-size: 11px; letter-spacing: 4px;
  color: rgba(233,201,120,.85);
  cursor: pointer;
}
.mm-seccion::before {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,168,75,.4));
}
.mm-seccion::after { background: linear-gradient(90deg, rgba(200,168,75,.4), transparent); }
.mm-seccion .mm-count { font-size: 9px; letter-spacing: 1px; color: rgba(255,255,255,.35); font-weight: 400; }
.mm-seccion .mm-chev  { font-size: 10px; color: rgba(233,201,120,.7); transition: transform .3s cubic-bezier(.2,.8,.25,1); }
.mm-seccion:hover { color: var(--gold, #f5c518); }

/* ── Los títulos SON los botones del acordeón, así que tienen que
   parecerlo y poder tocarse. Antes eran una línea decorativa de 15px
   de alto: imposible de acertar con el dedo (el mínimo cómodo es 44px)
   y no leían como "esto se abre". Ahora son una fila-panel con el
   chevron a la derecha; las líneas decorativas se apagan porque con
   fondo propio quedaban como adorno encima de un adorno. ── */
.mm-nav > .mm-seccion[data-mm-sec] {
  min-height: 46px; box-sizing: border-box;
  padding: 12px 15px; margin: 10px 0 7px; gap: 9px;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid rgba(200,168,75,.22);
  -webkit-tap-highlight-color: transparent;
  transition: background .18s, border-color .18s, transform .12s;
}
.mm-nav > .mm-seccion[data-mm-sec]::before,
.mm-nav > .mm-seccion[data-mm-sec]::after { display: none; }
.mm-nav > .mm-seccion[data-mm-sec] .mm-count { margin-left: auto; }
.mm-nav > .mm-seccion[data-mm-sec] .mm-chev  { font-size: 13px; }
.mm-nav > .mm-seccion[data-mm-sec]:hover {
  background: linear-gradient(180deg, rgba(245,197,24,.1), rgba(245,197,24,.03));
  border-color: rgba(245,197,24,.45);
}
.mm-nav > .mm-seccion[data-mm-sec]:active { transform: scale(.985); }
.mm-nav > .mm-seccion[data-mm-sec]:focus-visible {
  outline: 2px solid var(--gold, #f5c518); outline-offset: 2px;
}
/* Abierta (estado base): el borde izquierdo dorado la ata a su contenido.
   El estado CERRADA lo pisa la regla que genera menu_fx.js por sección. */
.mm-nav > .mm-seccion[data-mm-sec] { border-left: 3px solid rgba(245,197,24,.65); }

/* ── Footer: una sola grilla de pastillas uniformes. El selector
   agarra también los links que inyectan las features (INSTALAR APP,
   PERFIL, HISTORIAL...), que venían cada uno de su estilo. ── */
#main-menu .mm-footer {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
  max-width: 420px; margin: 18px auto 0; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}
#main-menu .mm-footer button, #main-menu .mm-footer .mm-link {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.55) !important;
  font-size: 10px !important; letter-spacing: 1px;
  padding: 5px 12px !important; border-radius: 20px !important;
  box-shadow: none !important; font-family: var(--f-camiseta);
}
#main-menu .mm-footer button:hover, #main-menu .mm-footer .mm-link:hover {
  border-color: rgba(245,197,24,.5) !important; color: var(--gold, #f5c518) !important;
}

/* ── Scrollbar fino, del color de la casa (detalle premium) ── */
#main-menu::-webkit-scrollbar { width: 8px; }
#main-menu::-webkit-scrollbar-thumb {
  background: rgba(200,168,75,.25); border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box;
}
#main-menu::-webkit-scrollbar-thumb:hover { background-color: rgba(200,168,75,.45); }
#main-menu::-webkit-scrollbar-track { background: transparent; }

/* Botones inyectados por features (MODO MARATÓN etc.): misma superficie de
   vidrio que el resto. data-mmg lo pone menu_fx.js, así que esto agarra a
   cualquier botón que viva dentro de un grupo, tenga la clase que tenga. */
.mm-nav .mm-btn[data-mmg] {
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
    rgba(8,14,10,.62) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* ── Escudo oficial del juego en el menú ── */
.mm-escudo-img {
  width: min(72vw, 300px); height: auto;
  pointer-events: none; user-select: none;
  margin: 2px auto 6px; display: block;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.6));
  animation: escudoPulse 4s ease-in-out infinite;
}

/* Escudo en la pantalla de carga */
.ld-escudo {
  width: 180px; height: 180px;
  margin-bottom: 6px;
  animation: escudoPulse 3s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════
   IDENTIDAD PREMIUM GLOBAL — overlays, modales, toasts y fuentes
   (2026-07-26, pedido de Chucho: "todos los overlays y fuentes con
   una identidad visual premium")
   El juego arrastraba DOS familias de color: los modales y overlays
   venían del concepto azul viejo (#0d2040 + celeste) mientras el
   menú, la mesa y el escudo hablan verde-noche + ORO. Acá se unifica
   todo en la segunda: superficie de vidrio oscuro, borde dorado
   fino, títulos en display con tracking. Un solo idioma visual.
   ══════════════════════════════════════════════════════════════ */

/* Superficie premium compartida */
.modal-box,
.canto-card,
.resultado-card,
.fp-card {
  background:
    linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%),
    linear-gradient(160deg, #0c1f14, #060f0a 70%, #040a06) !important;
  border: 1px solid rgba(212,175,55,.45) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.65),
              0 0 40px -18px rgba(212,175,55,.5),
              inset 0 1px 0 rgba(255,255,255,.07) !important;
}

/* Títulos: display dorado con aire. El celeste queda para acentos chicos. */
.modal-box h2 {
  color: var(--gold, #f5c518) !important;
  font-family: var(--f-display) !important;
  letter-spacing: 4px !important;
  text-shadow: 0 2px 18px rgba(212,175,55,.35);
}
.resultado-titulo, .fp-titulo {
  font-family: var(--f-display) !important;
  letter-spacing: 3px;
}

/* Toast: la misma superficie, más chica */
.toast {
  background:
    linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,0) 45%),
    rgba(6,15,9,.94) !important;
  border: 1px solid rgba(212,175,55,.4) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.55) !important;
  font-family: var(--f-camiseta);
  letter-spacing: .4px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* Botones de acción: mismo radio y micro-lift en todo el juego */
.btn {
  border-radius: 12px;
  transition: transform .15s cubic-bezier(.2,.8,.25,1), box-shadow .15s, filter .15s;
}
.btn:hover  { transform: translateY(-1px); filter: brightness(1.07); }
.btn:active { transform: translateY(0) scale(.97); }

/* ── mesa_futbol.css ── */
/* ══════════════════════════════════════════════════════════
   MESA FUTBOLERA — skin moderna para la mesa de juego
   Cargar DESPUÉS de style.css. Solo pisa estilos visuales:
   no cambia la estructura ni la lógica del juego.
   ══════════════════════════════════════════════════════════ */

:root {
  --fut-verde-1: #0e6b33;
  --fut-verde-2: #0a5429;
  --fut-noche:   #0a1f12;
  --fut-panel:   rgba(7, 26, 15, .88);
  --fut-oro:     #f5c518;
  --fut-oro-2:   #d9a90f;
  --fut-linea:   rgba(245, 197, 24, .38);
}

/* ── Ambiente de estadio detrás de la mesa (escenografia-3d/) ──
   Si existe escenografia-3d/fondo-cancha.webp (render de Blender: torres
   de reflectores + tribuna + cielo nocturno) se usa como fondo del body;
   si falta, el navegador ignora esa capa y cae al radial de siempre
   (style.css, respeta el tinte por competición/club vía --felt-*).
   Nota: esto reemplaza el tinte por competición SOLO en el ambiente de
   fondo — el césped bajo las cartas (#mesa, mesa_realismo.css) sigue
   cambiando de color por competición como siempre. */
body {
  background:
    url("escenografia-3d/fondo-cancha.webp") center center / cover no-repeat,
    radial-gradient(ellipse at center, var(--felt-l) 0%, var(--felt) 50%, var(--felt-d) 100%) !important;
}

/* ── La cancha: césped rayado + líneas + luz de estadio ── */
#mesa {
  background:
    radial-gradient(ellipse 120% 55% at 50% -12%, rgba(255,255,255,.13), transparent 62%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20700%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%22.14%22%20stroke-width%3D%222.5%22%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%22372%22%20height%3D%22672%22%20rx%3D%222%22/%3E%3Cline%20x1%3D%2214%22%20y1%3D%22350%22%20x2%3D%22386%22%20y2%3D%22350%22/%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22350%22%20r%3D%2258%22/%3E%3Crect%20x%3D%2292%22%20y%3D%2214%22%20width%3D%22216%22%20height%3D%2292%22/%3E%3Crect%20x%3D%22146%22%20y%3D%2214%22%20width%3D%22108%22%20height%3D%2242%22/%3E%3Crect%20x%3D%2292%22%20y%3D%22594%22%20width%3D%22216%22%20height%3D%2292%22/%3E%3Crect%20x%3D%22146%22%20y%3D%22658%22%20width%3D%22108%22%20height%3D%2242%22/%3E%3Cpath%20d%3D%22M150%20106%20A%2058%2058%200%200%200%20250%20106%22/%3E%3Cpath%20d%3D%22M150%20594%20A%2058%2058%200%200%201%20250%20594%22/%3E%3C/g%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22350%22%20r%3D%224%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.14%22/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    repeating-linear-gradient(90deg,
      var(--fut-verde-1) 0 64px,
      var(--fut-verde-2) 64px 128px) !important;
  background-blend-mode: normal !important;
}

/* Círculo central sutil donde caen las cartas */
.played-row {
  background: radial-gradient(circle at center, rgba(255,255,255,.07), transparent 58%) !important;
  border-radius: 14px !important;
}

/* Línea media de la cancha entre el lado del rival y el del jugador */
.played-row-rival { border-bottom: 1px dashed var(--fut-linea); padding-bottom: 6px }
.played-row-jugador { padding-top: 2px }

/* Badge "1ª/2ª/3ª" con el dorado de la camiseta */
.ronda-badge {
  background: var(--fut-oro) !important;
  color: var(--fut-noche) !important;
  border: 1px solid var(--fut-oro-2) !important;
}

/* ── Panel de rondas: fichas de marcador ── */
#rondas-panel .ronda-item {
  background: var(--fut-panel) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 8px !important;
  padding: 2px 8px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.35) !important;
}
.ronda-lbl {
  font-family: 'Bebas Neue', 'Oswald', sans-serif !important;
  color: var(--fut-oro) !important;
  letter-spacing: 1.5px !important;
}
.ronda-ganador {
  font-family: 'Oswald', sans-serif !important;
  color: #fff !important;
}

/* ── Barra de info: estilo zócalo de transmisión de TV ── */
.info-bar {
  background: linear-gradient(90deg, var(--fut-noche) 0%, #123823 50%, var(--fut-noche) 100%) !important;
  border-top: 1px solid var(--fut-linea) !important;
  border-bottom: 1px solid var(--fut-linea) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.4) !important;
}
.info-msg {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
}
.info-tantos, .info-mano {
  font-family: 'Bebas Neue', 'Oswald', sans-serif !important;
  letter-spacing: 1.5px !important;
  color: var(--fut-oro) !important;
}

/* ── Jugadores: aro dorado en los avatares, nombres de camiseta ── */
#rival-avatar, #player-avatar-sm {
  border: 2px solid var(--fut-oro) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.5) !important;
  background: #fff !important;
}
.rival-name-txt {
  font-family: 'Bebas Neue', 'Oswald', sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 2px !important;
  color: #fff !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.7) !important;
  text-transform: uppercase !important;
}
.mano-badge {
  background: linear-gradient(180deg, var(--fut-oro), var(--fut-oro-2)) !important;
  color: #18190f !important;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  border-radius: 99px !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.4) !important;
  text-transform: uppercase !important;
}
.escudo-mini { width: 26px !important; height: 26px !important; }

/* ── Botones de acción: estilo botón de estadio ── */
.acciones button {
  font-family: 'Bebas Neue', 'Oswald', sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #1c1503 !important;
  background: linear-gradient(180deg, #ffd83d, var(--fut-oro-2)) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  box-shadow: 0 3px 0 #8a6d00, 0 6px 14px rgba(0,0,0,.45) !important;
  transition: transform .08s ease, box-shadow .08s ease !important;
  cursor: pointer !important;
}
.acciones button:hover { transform: translateY(-1px) !important; }
.acciones button:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #8a6d00, 0 3px 8px rgba(0,0,0,.45) !important;
}

/* Reacciones: fichas redondas oscuras */
.reactions button {
  background: var(--fut-panel) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.4) !important;
  cursor: pointer !important;
  transition: transform .1s !important;
}
.reactions button:hover { transform: scale(1.12) !important; }

/* ── Pista para arrastrar la carta ── */
#drag-hint {
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--fut-oro) !important;
  background: rgba(0,0,0,.45) !important;
  border: 1px dashed var(--fut-linea) !important;
  border-radius: 99px !important;
  padding: 4px 14px !important;
}

/* "Pensando..." del rival: globo oscuro */
.thinking {
  background: var(--fut-panel) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 99px !important;
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 1px !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.4) !important;
}

/* ── Panel lateral de fósforos: vidrio de palco ── */
#side-score {
  background: var(--fut-panel) !important;
  border-left: 1px solid var(--fut-linea) !important;
  backdrop-filter: blur(4px) !important;
  box-shadow: -6px 0 18px rgba(0,0,0,.35) !important;
}
.side-score-pts {
  font-family: 'Bebas Neue', 'Oswald', sans-serif !important;
  letter-spacing: 2px !important;
  color: #fff !important;
  text-shadow: 0 0 10px rgba(245,197,24,.4) !important;
}
.side-score-sub, .side-prog-lbl, .tant-team-lbl, .side-pts-needed {
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
.side-prog-j { background: var(--fut-oro) !important; }
.side-prog-r { background: #e0151d !important; }
.side-stake { background: linear-gradient(160deg,var(--fut-oro),#c98a0a) !important; font-family: 'Oswald', sans-serif !important; }

/* ── Botón de menú en la mesa ── */
.mesa-menu-btn {
  background: var(--fut-panel) !important;
  border: 1px solid var(--fut-linea) !important;
  color: var(--fut-oro) !important;
  border-radius: 50% !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.45) !important;
}

/* ── Toast: cartel de cuarto árbitro ── */
.toast {
  background: linear-gradient(180deg, #142e1e, var(--fut-noche)) !important;
  border: 1px solid var(--fut-oro) !important;
  color: #fff !important;
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 1px !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.5) !important;
}

/* ── Overlay de envido: tablero electrónico ── */
.envido-panel {
  background: linear-gradient(180deg, #10271a, var(--fut-noche)) !important;
  border: 1px solid var(--fut-oro) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.6) !important;
}
.envido-title {
  font-family: 'Bebas Neue', 'Oswald', sans-serif !important;
  letter-spacing: 4px !important;
  color: var(--fut-oro) !important;
}
.envido-pts {
  font-family: 'Bebas Neue', 'Oswald', sans-serif !important;
  color: #fff !important;
  text-shadow: 0 0 12px rgba(245,197,24,.5) !important;
}
.envido-name, .envido-vs {
  font-family: 'Oswald', sans-serif !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
.envido-result {
  font-family: 'Bebas Neue', 'Oswald', sans-serif !important;
  letter-spacing: 2px !important;
}

/* ── Modales: estética de palco nocturno ── */
.modal-box {
  background: linear-gradient(180deg, #122c1c, #0b1d12) !important;
  border: 1px solid var(--fut-linea) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.6) !important;
}
.modal-box h2 {
  font-family: 'Bebas Neue', 'Oswald', sans-serif !important;
  letter-spacing: 3px !important;
  color: var(--fut-oro) !important;
}

/* ── mesa_realismo.css ── */
/* ══════════════════════════════════════════════════════════
   MESA REALISMO — césped de estadio realista + profundidad 3D
   Cargar DESPUÉS de mesa_futbol.css. Capa puramente visual:
   no toca estructura, IDs ni lógica del juego.
   Para desactivar: quitar el <link> de esta hoja en index.html
   ══════════════════════════════════════════════════════════ */

:root {
  --turf-1: #2a8a4a;   /* franja clara de corte */
  --turf-2: #1c7038;   /* franja oscura de corte */
  --turf-edge: #0c3a1d; /* césped en sombra (bordes) */
}

/* ── EL CÉSPED ──────────────────────────────────────────────
   Pila de capas (de arriba hacia abajo):
   1. vignette de estadio (oscurece bordes)
   2. luz cenital de reflectores (aclara el centro-arriba)
   3. líneas de cancha pintadas
   4. grano del césped (ruido fractal)
   5. briznas finas (textura vertical)
   6. luz cruzada direccional
   7. franjas de corte (mow stripes) horizontales
   8. verde base
   ─────────────────────────────────────────────────────────── */
#mesa {
  background:
    radial-gradient(ellipse 135% 105% at 50% 42%,
        transparent 50%, rgba(0,0,0,.30) 82%, rgba(0,0,0,.55) 100%),
    radial-gradient(ellipse 95% 60% at 50% -8%,
        rgba(255,255,255,.20), rgba(255,255,255,.05) 45%, transparent 66%),
    /* Las líneas de cancha van ARRIBA del render (2026-07-26): el PNG ahora
       es solo césped, sin líneas pintadas. Así se dibujan como vector — nítidas
       a cualquier tamaño y sin el aliasing que tenían horneadas en el render.
       Ambas capas comparten background-size 100% 100% y blend normal, así que
       el swap no toca ninguna de esas dos listas. */
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20700%27%20preserveAspectRatio%3D%27xMidYMid%20slice%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%270.18%27%20stroke-width%3D%272.4%27%3E%3Crect%20x%3D%2716%27%20y%3D%2716%27%20width%3D%27368%27%20height%3D%27668%27%20rx%3D%272%27%2F%3E%3Cline%20x1%3D%2716%27%20y1%3D%27350%27%20x2%3D%27384%27%20y2%3D%27350%27%2F%3E%3Ccircle%20cx%3D%27200%27%20cy%3D%27350%27%20r%3D%2758%27%2F%3E%3Crect%20x%3D%2792%27%20y%3D%2716%27%20width%3D%27216%27%20height%3D%2792%27%2F%3E%3Crect%20x%3D%27146%27%20y%3D%2716%27%20width%3D%27108%27%20height%3D%2742%27%2F%3E%3Crect%20x%3D%2792%27%20y%3D%27592%27%20width%3D%27216%27%20height%3D%2792%27%2F%3E%3Crect%20x%3D%27146%27%20y%3D%27642%27%20width%3D%27108%27%20height%3D%2742%27%2F%3E%3Cpath%20d%3D%27M150%20108%20A%2058%2058%200%200%200%20250%20108%27%2F%3E%3Cpath%20d%3D%27M150%20592%20A%2058%2058%200%200%201%20250%20592%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%27200%27%20cy%3D%27350%27%20r%3D%273.5%27%20fill%3D%27%23ffffff%27%20fill-opacity%3D%270.18%27%2F%3E%3Ccircle%20cx%3D%27200%27%20cy%3D%2762%27%20r%3D%273%27%20fill%3D%27%23ffffff%27%20fill-opacity%3D%270.16%27%2F%3E%3Ccircle%20cx%3D%27200%27%20cy%3D%27638%27%20r%3D%273%27%20fill%3D%27%23ffffff%27%20fill-opacity%3D%270.16%27%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat,
    url("escenografia-3d/mesa-cancha.webp") center / 100% 100% no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%270.42%27%2F%3E%3C%2Fsvg%3E") repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%276%27%20height%3D%2710%27%3E%3Cpath%20d%3D%27M1%2010%20L1.4%202%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%270.05%27%20stroke-width%3D%270.8%27%2F%3E%3Cpath%20d%3D%27M4%2010%20L3.6%201%27%20stroke%3D%27%23000000%27%20stroke-opacity%3D%270.06%27%20stroke-width%3D%270.8%27%2F%3E%3C%2Fsvg%3E") repeat,
    linear-gradient(102deg,
        rgba(255,255,255,.06) 0%, transparent 38%,
        transparent 62%, rgba(0,0,0,.14) 100%),
    repeating-linear-gradient(0deg,
        var(--turf-1) 0 54px,
        var(--turf-2) 54px 108px),
    linear-gradient(180deg, #248043, #145e30) !important;
  background-size:
    auto, auto,
    100% 100%,
    100% 100%,
    200px 200px,
    6px 10px,
    auto,
    auto,
    auto !important;
  background-blend-mode:
    multiply, screen, normal, normal, overlay, normal, overlay, normal, normal !important;
  border: 1px solid rgba(0,0,0,.4) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 0 60px rgba(0,0,0,.35),
    inset 0 -20px 50px rgba(0,0,0,.45),
    0 24px 60px rgba(0,0,0,.6) !important;
  /* contexto 3D para que las cartas tengan profundidad real */
  perspective: 1300px;
  perspective-origin: 50% 38%;
}

/* Reflectores: dos halos de luz fría en las esquinas superiores */
#mesa::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle 220px at 14% -4%, rgba(210,235,255,.22), transparent 70%),
    radial-gradient(circle 220px at 86% -4%, rgba(210,235,255,.22), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none; z-index: 0;
  top: 0; left: 0; right: 0; bottom: 0; height: auto;
  background-color: transparent;
}
/* Anula el círculo central plano de style.css (ya lo dibuja la capa de líneas) */
#mesa::after { display: none !important; }

/* ── PROFUNDIDAD 3D EN CARTAS ───────────────────────────────
   Mantiene la lógica intacta: sólo agrega sombra de contacto
   sobre el pasto y un relieve más rico. */
.card {
  box-shadow:
    0 10px 18px rgba(0,0,0,.50),
    0 2px 4px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 5px rgba(0,0,0,.18) !important;
}

/* Sombra de contacto: elipse blanda proyectada bajo cada carta jugada,
   como si estuviera apoyada sobre el césped. */
.played-card-wrap { position: relative; }
.played-card-wrap::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -7px;
  width: 86%; height: 14px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 72%);
  filter: blur(2px);
  pointer-events: none; z-index: 0;
}

/* Cartas jugadas: leve inclinación como apoyadas sobre la mesa */
.card.played {
  transform: perspective(900px) rotateX(15deg);
  box-shadow:
    0 14px 22px rgba(0,0,0,.55),
    0 3px 6px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
}

/* Abanico sutil en la mano del jugador (3 cartas sostenidas) */
.player-hand .card:nth-child(1):not(:hover):not(.selected) {
  transform: rotate(-5deg) translateY(5px);
}
.player-hand .card:nth-child(3):not(:hover):not(.selected) {
  transform: rotate(5deg) translateY(5px);
}
.player-hand .card { transform-origin: bottom center; }

/* Abanico en la mano del rival (dorsos boca abajo) */
.rival-hand .carta:nth-child(1), .rival-hand .dorso:nth-child(1) { transform: rotate(4deg)  translateY(3px); }
.rival-hand .carta:nth-child(3), .rival-hand .dorso:nth-child(3) { transform: rotate(-4deg) translateY(3px); }
.rival-hand .carta, .rival-hand .dorso { transform-origin: top center; }

/* Sombra más profunda en los dorsos / mazo para dar volumen */
.dorso { box-shadow: 0 10px 18px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.4) !important; }
.mazo-carta { box-shadow: 0 5px 12px rgba(0,0,0,.55) !important; }

/* Brillo de reflector al levantar una carta jugable */
.card.can-play:hover {
  box-shadow:
    0 26px 44px rgba(0,0,0,.62),
    0 0 0 2px var(--sky),
    0 0 22px rgba(106,180,245,.45),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* ── mesa_palco.css ── */
/* ══════════════════════════════════════════════════════════════
   MESA PALCO — el escenario de Chucho montado como mesa de juego
   (2026-07-26). Se activa con la clase `tema-palco` en el <body>;
   sin esa clase NADA de este archivo aplica, así que apagarlo es
   instantáneo y no rompe el tema anterior.

   IDEA CENTRAL: el fondo es una imagen fija (palco-fondo.webp) con
   la mesa, el anotador y el marcador en posiciones FIJAS dentro de
   su cuadro. Entonces la UI no puede fluir: tiene que anclarse en
   las MISMAS coordenadas relativas. Por eso #mesa fija su relación
   de aspecto (1086:1448) y sus hijos se posicionan en PORCENTAJES.
   Si algún día se cambia el fondo, se re-mide y se ajustan estos
   porcentajes — no hay nada mágico, son las coordenadas del arte.

   Mapa vertical del fondo:
     0–23 %   estadio           → avatar y nombre del rival
     23–35 %  props             → anotador y marcador (números por CSS)
     35–100 % madera limpia     → cartas
   ══════════════════════════════════════════════════════════════ */

body.tema-palco #mesa {
  /* Retrato clavado a la proporción del arte. min() para que entre
     tanto en una pantalla alta (manda el alto) como en una ancha y
     baja (manda el ancho) sin deformar nunca la imagen. */
  width:  min(75vh, 100vw) !important;
  height: min(100vh, 133.33vw) !important;
  /* SIN ESTO NO SIRVE DE NADA: style.css le pone max-width:680px al
     #mesa (venía del layout viejo). En cualquier pantalla donde
     75vh > 680px —o sea, ventana de más de ~907px de alto: todo
     monitor de escritorio— el ancho quedaba recortado a 680 mientras
     el alto seguía siendo 100vh. Resultado: la caja dejaba de ser 3:4,
     el `cover` recortaba el arte por los costados y TODOS los
     porcentajes de abajo apuntaban al lugar equivocado (el marcador
     flotando al lado de la pizarra en vez de encima, el anotador
     invisible). El tema se ve bien en el celular y roto en la compu
     justamente por esta línea. */
  max-width: none !important;
  max-height: none !important;
  /* En una pantalla más alta que 3:4 (todo celular) el cuadro no llega
     al piso y sobra una franja negra. Pegada abajo, esa franja se va
     ARRIBA —donde el arte ya es estadio oscuro y no se nota— y la
     barra de acciones queda al alcance del pulgar en vez de flotando
     en el medio de la pantalla con vacío debajo. */
  margin: 0 auto !important;
  padding: 0 !important;
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  overflow: hidden !important;
  display: block !important;
  border: none !important;
  border-radius: 0 !important;
  background: url("escenografia-3d/palco-fondo.webp") center / cover no-repeat,
              #0b0805 !important;
  box-shadow: none !important;
  /* La carta se dimensiona desde el propio cuadro, no desde el viewport:
     así todo escala junto con el fondo. */
  --ch: min(13.4vh, 17.9vw);
  --cw: calc(var(--ch) * 2 / 3);
  --cr: calc(var(--ch) / 20);
  perspective: 1100px;
  perspective-origin: 50% 30%;
}

/* ── El fondo como <img> real (lo crea tema_palco.js) ────────────
   En producción el background-image de arriba no pintaba en la
   pantalla de Chucho (mesa negra) mientras las <img> de la misma
   carpeta cargaban bien. Este <img> es la vía principal; el
   background queda como respaldo. z-index:-1 dentro del stacking
   context de #mesa (position:relative + z-index) = encima del color
   de respaldo, debajo de todo el contenido. */
#palco-fondo-img { display: none; }
body.tema-palco #palco-fondo-img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

/* El fondo ya trae gradas y ambiente: las capas del tema anterior sobran */
body.tema-palco #mesa::before,
body.tema-palco #mesa::after { display: none !important; }
body.tema-palco #tribuna-izq,
body.tema-palco #tribuna-der,
body.tema-palco #pano-marca { display: none !important; }
body.tema-palco { background: #07100a !important; }

/* ── Rival: sobre el estadio, donde el mockup tenía "Catalina" ── */
body.tema-palco .zona-rival { position: static !important; }
body.tema-palco .zona-rival .rival-top {
  position: absolute !important;
  top: 1.6%; right: 2.4%;
  z-index: 6;
  background: linear-gradient(180deg, rgba(10,9,7,.94), rgba(6,5,4,.97));
  border: 1px solid rgba(212,175,55,.65);
  border-radius: 8px;
  padding: 5px 10px 5px 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.6);
  gap: 8px;
}
body.tema-palco .rival-avatar { width: 42px !important; height: 42px !important;
  border-radius: 6px !important; border: 1px solid rgba(212,175,55,.55) !important; }
body.tema-palco .rival-name-txt { font-size: 14px !important; color: #f3ead2 !important;
  letter-spacing: .5px; }

/* ── Cartas del rival, boca abajo ── */
/* ARTE v2 (2026-07-30): la banda de props del arte nuevo es más grande y
   centrada (papel y 43.5–61.5%), así que las cartas del rival suben a la
   franja de la ventana/alféizar (terminan ~35%, donde arranca la pared
   oscura) — como si el rival las sostuviera del otro lado de la mesa. */
body.tema-palco .zona-rival .hand-row {
  position: absolute !important;
  top: 26%; left: 0; width: 100%;
  justify-content: center;
  z-index: 4;
  transform: rotateX(30deg) scale(.82);       /* acostadas, como en el arte */
  transform-origin: 50% 0;
}

/* ── Cartas jugadas: el centro de la mesa ────────────────────────
   El drama del truco pasa acá, así que el centro tiene que pesar:
   las jugadas van más abajo (48%) y MÁS GRANDES (scale 1.18) para
   ocupar la banda de madera que quedaba muerta entre las cartas del
   rival y tu abanico (~46→70% era desierto la mitad del tiempo). */
body.tema-palco .zona-central { position: static !important; }
/* ARTE v2: bajan a 52% — el papel del anotador llega hasta 61.5% pero su
   mitad inferior es papel en blanco: una carta apoyada medio sobre el
   anotador es físicamente natural, y más abajo (63%+) chocarían con el
   techo del abanico (~70%). El rótulo de tantos vive ARRIBA del papel
   (casillero libre de la grilla), así las jugadas no lo tapan. */
body.tema-palco .played-row {
  position: absolute !important;
  top: 52%; left: 0; width: 100%;
  min-height: 0 !important;
  z-index: 4;
  transform: rotateX(22deg) scale(1.18);
  transform-origin: 50% 0;
  gap: 2% !important;
}
body.tema-palco .played-row-rival,
body.tema-palco .played-row-jugador { min-height: calc(var(--ch) * .46) !important; }
body.tema-palco #thinking { position: absolute !important; top: 41%; left: 0; width: 100%;
  justify-content: center; z-index: 7;
  border: none !important; background: none !important; }
/* Rayas del HUD viejo que cruzaban el arte de lado a lado: el borde
   punteado dorado bajo las jugadas del rival y cualquier separador de
   las filas centrales. En el palco la mesa ES la imagen; las divisiones
   las dibuja la madera, no un border de CSS. */
body.tema-palco .played-row,
body.tema-palco .played-row-rival,
body.tema-palco .played-row-jugador { border: none !important; }

/* ── Info-bar: una línea fina bajo los props, sin caja ────────────
   Anclada por ABAJO, no por arriba. Es una fila de texto que puede
   crecer (nombre de rival largo + "Fulano cantó ENVIDO — en juego: 2
   pts" envuelve a varias líneas) y anclada con `top` crecía HACIA
   ABAJO, encima de las cartas del rival: en una pantalla angosta se
   convertía en una torre de 6 renglones tapando la mano. Con
   `bottom` el borde inferior queda clavado donde estaba y lo que
   sobra empuja hacia arriba, contra la zona vacía de los props. */
body.tema-palco .info-bar {
  position: absolute !important;
  /* ARTE v2: bottom 60% deja el texto en y 37.4–40% = la banda oscura
     del alféizar entera, DESPEGADO de las cartas del rival (terminan en
     36.1%, medido en vivo — con 61.5% todavía las rozaba 0.7%). */
  top: auto !important; bottom: 60%; left: 0; width: 100%;
  background: none !important; border: none !important; box-shadow: none !important;
  padding: 0 4% !important;
  font-size: 11px; z-index: 6;
  text-shadow: 0 1px 6px rgba(0,0,0,.95);
}

/* ── Zona del jugador: mano grande adelante, como en el mockup ── */
body.tema-palco #zona-inferior {
  position: absolute !important;
  left: 0; bottom: 0; width: 100%;
  padding: 0 !important; gap: 0 !important;
  z-index: 8;
  /* En el DOM las acciones vienen ANTES que la mano, así que sin reordenar
     la barra quedaba encima de tus cartas (medido: mano 85%, barra 82%).
     En el mockup la mano va adelante y la barra abajo del todo. */
  display: flex !important; flex-direction: column !important;
  justify-content: flex-end !important;
  /* style.css lo deja en `align-items:center`, y eso hacía que
     .zona-jugador se encogiera al ancho de las cartas. Como
     .player-bottom se posiciona en % DENTRO de ese cajón, el
     "left:2.5%" no era 2.5% de la mesa sino 2.5% del abanico: el
     avatar, el escudo y el chip MANO terminaban ENCIMA de las cartas.
     Con stretch los hijos vuelven a medir lo que mide la mesa y los
     porcentajes significan lo que dicen. */
  align-items: stretch !important;
}
body.tema-palco #zona-inferior .zona-jugador { order: 1; }
body.tema-palco #zona-inferior .acciones     { order: 2; }
body.tema-palco #zona-inferior .club-perks-bar,
body.tema-palco #zona-inferior .reactions    { order: 0; }
body.tema-palco .zona-jugador .hand-row {
  justify-content: center;
  /* translateX: corre el abanico para que el agarre de la mano (los
     dedos del arte caen en x≈55% de la mesa) tome la carta del medio
     y no la juntura con la tercera. */
  transform: translateX(2.5%) rotateX(12deg) scale(1.06);  /* inclinadas hacia vos */
  transform-origin: 50% 100%;
  margin-bottom: 1.5%;
}
/* El "▲ TU TURNO" (::after de .zona-jugador) queda DETRÁS de la mano
   y además repite lo que la info-bar ya anuncia arriba ("TU TURNO —
   TOCÁ UNA CARTA"). Mismo criterio que el chip MANO: se va la que
   tapa. El resplandor dorado de las cartas jugables se queda. */
body.tema-palco .zona-jugador.turno-activo::after { display: none !important; }

/* ── Abanico de verdad ──────────────────────────────────────────
   Una mano no sostiene tres naipes separados con aire entre medio:
   los abanica desde un punto de agarre. Las cartas se solapan un 30%
   y rotan con el pivote DEBAJO del borde inferior (50% 130%), que es
   donde el pulgar del arte las agarra — así el abanico se abre como
   abierto por una mano y no como tres cartas en fila. Los selectores
   nth-child + nth-last-child distinguen cuántas quedan: con 2 el
   abanico se cierra a ±7° y con 1 va derecha. Se respeta el patrón
   :not(:hover):not(.selected) de mesa_realismo para no pelearse con
   el tilt 3D que juego_ui.js pone inline al pasar el mouse. */
body.tema-palco .zona-jugador .hand-row,
body.tema-palco #player-hand { gap: 0 !important; }
body.tema-palco #player-hand .card + .card { margin-left: calc(var(--cw) * -0.30); }
body.tema-palco #player-hand .card {
  transform-origin: 50% 130%;
  box-shadow: -6px 2px 10px rgba(0,0,0,.45);
}
body.tema-palco #player-hand .card:nth-child(1):nth-last-child(3):not(:hover):not(.selected) { transform: rotate(-11deg); }
body.tema-palco #player-hand .card:nth-child(2):nth-last-child(2):not(:hover):not(.selected) { transform: translateY(calc(var(--ch) * -0.035)); }
body.tema-palco #player-hand .card:nth-child(3):nth-last-child(1):not(:hover):not(.selected) { transform: rotate(11deg); }
body.tema-palco #player-hand .card:nth-child(1):nth-last-child(2):not(:hover):not(.selected) { transform: rotate(-7deg); }
body.tema-palco #player-hand .card:nth-child(2):nth-last-child(1):not(:hover):not(.selected) { transform: rotate(7deg); }
body.tema-palco #player-hand .card:only-child:not(:hover):not(.selected) { transform: none; }
/* Identidad del jugador: columna angosta pegada al borde izquierdo y
   apoyada JUSTO arriba de la barra de acciones. El abanico está
   centrado y ocupa ~40% del ancho, así que la franja de la izquierda
   es tierra de nadie: nada se pisa a ninguna resolución.
   Se ancla al piso de .zona-jugador (de ahí el position:relative
   explícito de arriba: sin él el cajón de referencia cambia según el
   tema y el avatar se va detrás de la barra de acciones). */
body.tema-palco .zona-jugador { position: relative !important; }
body.tema-palco .player-bottom {
  position: absolute !important;
  left: 2% !important; right: auto !important;
  bottom: 2px !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 0 !important;
  margin: 0 !important; z-index: 9;
}
body.tema-palco .player-avatar-sm {
  width: 42px !important; height: 42px !important;
  border-radius: 6px !important; border: 2px solid #7ac943 !important;
}
body.tema-palco .player-bottom .escudo-mini { margin: 0 !important; }
/* El chip "🃏 Mano" caía sobre la carta del medio y además REPETÍA lo
   que la info-bar ya dice ("Mano: Fulano"). Dos capas peleando por el
   mismo pixel para contar el mismo dato: se va la que tapa. */
body.tema-palco #player-mano-badge { display: none !important; }
body.tema-palco .mazo-pos { display: none !important; }   /* el mazo ya está en el arte */

/* ── La mano que sostiene las cartas ────────────────────────────
   El truco de Blyts, versión completa: la mano va ENCIMA del abanico
   (z2 vs z1 de las cartas) — los dedos caen sobre el frente de los
   naipes y el fan nace de atrás de la mano: eso es "sostener". Antes
   iba detrás y las cartas parecían pegadas sobre la palma.

   Anclaje: vive en .zona-jugador (la appendea tema_palco.js), cuyo
   piso ES el techo de la barra de acciones en cualquier viewport.
   Anclada al arte (top:74% de #mesa) se despegaba del abanico en
   pantallas cortas: la barra crece, empuja las cartas hacia arriba y
   la mano quedaba abajo, pisando los botones.

   Las tres medidas son solidarias entre sí, no del viewport:
   - width 56%: de .zona-jugador, que mide lo que la mesa (stretch).
   - translateY(58%): % de su PROPIA altura → baja la mano de modo
     que solo asome el 42% superior (dedos + dorso) por encima del
     techo de la barra. Es la misma vista que daba top:74% en 3:4.
   - clip-path inset bottom 58%: recorta exactamente lo que cuelga
     por debajo del piso (la manga), para no pintar sobre la barra.
   Si se cambia una, cambiar las tres juntas (58 = 100 − 42).
   pointer-events:none para que no robe clicks a las cartas. */
body.tema-palco #palco-mano {
  /* ELIMINADA (pedido de Chucho, 30 jul, con el arte v2): se probó
     adelante (tapaba la carta del medio) y detrás (asomaba raro entre
     los naipes) — con la escenografía nueva el abanico solo sobre la
     madera queda más limpio. El elemento sigue existiendo (lo crea
     tema_palco.js); si algún día vuelve, revisar el z contra
     #player-hand. */
  display: none !important;
}
body.tema-palco #player-hand { position: relative; z-index: 1; }
#palco-mano { display: none; }
body.tema-palco #palco-mano { display: block; }
body.tema-palco #palco-mano img { width: 100%; height: auto; display: block; }

/* ── Barra de acciones: el marco dorado del mockup ── */
body.tema-palco .acciones {
  position: relative;
  margin: 0 !important;
  padding: 2.2% 2% !important;
  background: linear-gradient(180deg, #14110b, #0a0806) !important;
  border-top: 2px solid rgba(212,175,55,.75);
  box-shadow: 0 -10px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(212,175,55,.25);
  gap: 1.5% !important;
  /* Altura RESERVADA: la barra pasa de 1 fila (jugás) a 2 (respondés un
     canto: QUIERO / NO QUIERO / ENVIDO / REAL / FALTA / AL MAZO). Como
     #zona-inferior está anclado abajo, sin esto la mano propia SUBÍA Y
     BAJABA con cada canto — medido en producción: barra 4% vacía contra
     14% con seis botones. Que se te muevan las cartas justo cuando tenés
     que clickearlas es inaceptable. */
  min-height: calc(var(--ch) * 1.05) !important;
  align-content: center;
}
body.tema-palco .acciones .btn {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.01)) !important;
  border: 1px solid rgba(212,175,55,.4) !important;
  color: #f3ead2 !important;
  letter-spacing: 1px;
  border-radius: 10px !important;
}
body.tema-palco .acciones .btn.primary { border-color: rgba(122,201,67,.7) !important; color: #cdf5b4 !important; }
body.tema-palco .acciones .btn.danger  { border-color: rgba(224,90,74,.65) !important; color: #ffcfc8 !important; }
body.tema-palco .acciones .btn-max     { border-color: rgba(245,197,24,.85) !important; color: var(--gold) !important; }

/* ── Marcador sobre la pizarra del arte ─────────────────────────
   El fondo trae la pizarra LOCAL/VISITA con un 2 y un 1 pintados:
   son números falsos. Estos van ENCIMA, con los puntos reales — que
   es lo que hace que el marcador sea un objeto de la mesa y no un
   panel flotante. Los porcentajes salen de medir el arte. */
body.tema-palco #side-score { display: none !important; }
#palco-marcador { display: none; }
/* Coordenadas MEDIDAS sobre el ARTE v2 (896×1195, grilla del 30 jul):
   la pizarra de madera tiene dos ventanas de vidrio NEGRO VACÍAS (sin
   dígitos falsos, pedido a la IA a propósito): la izquierda centrada en
   (70.5%, 44.5%) y la derecha en (86.5%, 46.5%) — el aparato está
   apoyado en perspectiva, el lado derecho cae ~2% más abajo, de ahí el
   rotate. Con space-around en un contenedor x 64–94.5%, los centros de
   los span caen en ~71.5% y ~87% ✓. */
body.tema-palco #palco-marcador {
  display: flex; position: absolute;
  top: 38.5%; right: 6%; width: 30.5%; height: 13%;
  justify-content: space-around; align-items: center;
  transform: rotate(3.5deg);
  z-index: 6; pointer-events: none;
}
/* La ventana derecha del arte está ~2% más abajo que la izquierda (el
   aparato en perspectiva); el rotate del contenedor no alcanza — medido
   en vivo: el dígito quedaba 1.2% alto. El translateY lo asienta. */
body.tema-palco #palco-pts-r { transform: translateY(25%); }
body.tema-palco #palco-marcador span {
  font-family: var(--f-display, 'Bebas Neue', sans-serif);
  font-size: min(4.4vh, 5.9vw); line-height: 1;
  color: #f7f2e4; text-shadow: 0 2px 10px rgba(0,0,0,.9);
  /* ARTE v2: las ventanas del arte ya son vidrio negro VACÍO (se le
     pidió a la IA sin dígitos), así que la placa oscura que tapaba los
     números falsos del arte v1 ya no hace falta — el dígito se dibuja
     directo sobre el vidrio. */
  background: none;
  min-width: 1.5em;
  text-align: center;
}
/* Dos números blancos idénticos no dicen cuál es el tuyo. El verde ya
   es "vos" en el resto de la mesa (el borde del avatar), así que se
   reusa acá en vez de agregar etiquetas que ensucien la pizarra. */
body.tema-palco #palco-pts-j { color: #bdf291 !important; }

/* Los tantos del envido, sobre el anotador de papel */
body.tema-palco #palco-tantos {
  /* ARTE v2 (grilla del 30 jul): el papel va de x 23–63%, y 43.5–61.5%,
     rotado ~-4°. Su grilla ELLA/YO ocupa la esquina superior izquierda;
     el casillero LIBRE de la columna derecha (x 45–55, y 44.5–49.5) es
     donde vive este rótulo — arriba del papel a propósito: las cartas
     jugadas (.played-row, top:52%) pisan la mitad INFERIOR del papel y
     ahí abajo lo taparían. El texto es corto ("A 30" / "TANTOS N", lo
     arma el JS) porque el casillero es angosto. La fuente escala con el
     ancho real de la mesa (min(75vh,100vw), el cálculo de #mesa). */
  position: absolute; top: 44.8%; left: 44.5%; width: 11.5%;
  transform: rotate(-4deg);
  text-align: center; z-index: 6; pointer-events: none;
  white-space: nowrap; line-height: 1.3;
  font-family: var(--f-camiseta, Oswald, sans-serif);
  font-size: calc(min(75vh, 100vw) * 0.021); letter-spacing: 1px;
  color: #3a2f1c;
  /* Tinta oscura sobre papel claro. Si el papel se corre un pixel, el
     halo claro lo salva sobre la madera oscura sin arruinarlo sobre el
     papel. Antes, corrido, era texto negro sobre fondo negro. */
  text-shadow: 0 0 5px rgba(255,246,220,.75), 0 0 10px rgba(255,246,220,.45);
}

/* ── Botón MODOS: fuera del abanico ─────────────────────────────
   features_modos.css lo clava con `position:fixed; bottom:130px`, una
   coordenada del layout viejo: acá caía justo sobre la tercera carta.
   Va absoluto DENTRO de la mesa (el panel se appendea a #mesa), a la
   derecha del abanico —que termina cerca del 70% del ancho— y arriba
   de la barra. La lista, al abrirse, sigue creciendo hacia arriba. */
/* ── SLOTS: el contrato de layout (ver tema_palco.js) ─────────────
   Los features NO se posicionan uno por uno: tema_palco.js los muda a
   tres contenedores con nombre y acá se posicionan LOS SLOTS. Un
   feature nuevo en la mesa = un selector en el registro del JS; este
   CSS no se toca. Los inquilinos se normalizan a position:relative
   (no static: el timer ancla hijos absolutos adentro suyo) y con
   inset:auto para anular las coordenadas duras que traen de fábrica
   (bottom:130px, left:50%, top:10px... cada uno contra un layout que
   ya no existe — el origen de todos los choques de esta semana). */
#palco-slot-nav, #palco-slot-dock, #palco-slot-ads { display: none; }
body.tema-palco #palco-slot-nav {
  display: flex; position: absolute;
  top: 10px; right: 10px; z-index: 30;
  flex-direction: row-reverse; gap: 8px; align-items: center;
}
body.tema-palco #palco-slot-dock {
  display: flex; position: absolute;
  right: 2%; bottom: 2px; z-index: 12;
  flex-direction: column; gap: 6px; align-items: flex-end;
}
body.tema-palco #palco-slot-ads {
  display: flex; position: absolute;
  /* Bajo el cartel del rival (que en 375px envuelve a dos líneas y
     llega al ~17%): sobre el campo del arte, zona sin nada clickeable. */
  left: 2%; top: 19%; z-index: 11;
  flex-direction: column; gap: 6px; align-items: flex-start;
}
body.tema-palco [id^="palco-slot-"] > * {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
}
/* Los CONTENEDORES de los slots no reciben clicks, solo sus inquilinos.
   Un slot es una caja invisible que puede pisar la mesa: el dock medía
   191px de ancho (la lista de MODOS, cerrada con alto 0, igual empuja
   el ancho del panel) y su zona transparente caía sobre el abanico —
   las cartas de abajo NO recibían el click (medido con elementFromPoint:
   devolvía .fm-modos-panel). El panel de MODOS es contenedor también:
   mismo trato, clicks solo en el toggle y la lista. */
body.tema-palco [id^="palco-slot-"],
body.tema-palco .fm-modos-panel { pointer-events: none !important; }
body.tema-palco [id^="palco-slot-"] > :not(.fm-modos-panel),
body.tema-palco .fm-modos-panel > * { pointer-events: auto; }
body.tema-palco .fm-modos-toggle { font-size: 10px; padding: 6px 11px; }
/* El badge adaptativo (🟡 = qué tan duro juega la IA) queda fuera de la
   mesa en este tema: puramente informativo y en 375px no entra junto a
   los botones y el nombre del rival. El dato sigue en su panel. */
body.tema-palco #ext-adaptive-badge { display: none !important; }
body.tema-palco #ext-historial {
  right: auto !important; left: 10px !important; top: 10px !important;
  max-width: 34% !important; width: auto !important;
}

/* ── Logros: nunca encima de la barra de acciones ───────────────
   El toast salía anclado abajo (bottom:80px / bottom:24px) y tapaba
   ENVIDO / REAL / FALTA justo cuando hay que decidir. Arriba solo
   pisa el cartel del rival, que no es interactivo y no decide nada. */
body.tema-palco #hist-logro-notif,
body.tema-palco #ext-logro-notif.show { top: 9% !important; }

/* ── Jerarquía de la info-bar ───────────────────────────────────
   Estaban los tres al mismo volumen (amarillo, blanco y celeste
   compitiendo). Lo único que importa en el instante es de quién es el
   turno; tantos y mano son datos de referencia. */
/* "Tantos: 7" y "Mano: Fulano" salen de la barra: los tantos pasan al
   anotador de papel (que es LITERALMENTE para eso) y quién es mano ya
   lo dice el chip 🀄 MANO del cartel del rival. Con la fila entera
   para el mensaje, el caso peor ("Fulano cantó REAL ENVIDO — en juego:
   5 pts") entra en UN renglón hasta en un teléfono de 375px. Y un solo
   renglón es lo único que entra entre el anotador y las cartas del
   rival: con dos, la barra se comía uno de los dos. */
body.tema-palco .info-bar .info-tantos,
body.tema-palco .info-bar .info-mano { display: none !important; }
body.tema-palco .info-bar .info-msg {
  font-size: 12px !important; color: #fff !important;
  letter-spacing: .4px; font-weight: 700;
  flex: 1 1 auto !important; min-width: 0 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* El cartelito del clima (💨 Hay viento hoy) se appendea DENTRO de la
   info-bar (features_gameplay.js) y le robaba ~170px al mensaje, que es
   el que dice qué está pasando en la mano. El clima ya se ve: hay
   partículas de viento/lluvia y el filtro de color sobre la mesa.
   Decoración pierde contra información. */
body.tema-palco #fg-clima-badge { display: none !important; }

/* ── El palco ya ES de noche: ningún velador global encima ───────
   Varios features tiraban un velo oscuro a pantalla completa por
   encima del arte (z1) pero por debajo de la UI (z6+): el clima
   "noche", el Modo Nocturno de Ajustes y las copas de gala (club.js).
   Resultado: el fondo enterrado y la UI flotando sobre negro. Los dos
   primeros ya se desactivaron en JS a pedido de Chucho; esta regla es
   el cinturón de seguridad para cualquier otro código que reviva el
   overlay (club.js lo sigue creando en copas nocturnas). Va con
   3 niveles de especificidad para ganarle al display:block !important
   de features_progression, que queda más tarde en el bundle. */
body.tema-palco #pano-noche-ovl,
body.tema-palco.fp-modo-nocturno #pano-noche-ovl { display: none !important; }

/* En pantalla ancha, los costados quedan oscuros: el arte manda */
@media (min-aspect-ratio: 1/1) {
  body.tema-palco #mesa { box-shadow: 0 0 120px 40px rgba(0,0,0,.75) !important; }
}

/* ── premium.css ── */
/* ══════════════════════════════════════════════════════════
   PREMIUM.CSS — Mejoras visuales avanzadas
   Cargar AL FINAL, después de mesa_realismo.css
   No toca lógica ni estructura — puro diseño visual.
   ══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   1. MENÚ PRINCIPAL — MÁS ÉPICO
   ───────────────────────────────────────────────────────── */

/* Título más grande, trazo dorado más pronunciado */

/* Subtítulo con brillo propio */

/* País más visible */

/* Escudo más grande y más brillante */
@keyframes escudoPulsePremium {
  0%,100% { filter: drop-shadow(0 0 14px rgba(106,180,245,.4)) drop-shadow(0 0 28px rgba(245,197,24,.15)); }
  50%      { filter: drop-shadow(0 0 30px rgba(106,180,245,.7)) drop-shadow(0 0 50px rgba(245,197,24,.30)); }
}

/* Más respiro en el contenido del menú */
.mm-content { gap: 18px !important; }

/* ─────────────────────────────────────────────────────────
   2. BOTONES DEL MENÚ — SHIMMER EN HOVER
   ───────────────────────────────────────────────────────── */

@keyframes shimmerSlide {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.mm-btn[class*="mm-acc-"] {
  transition: all .2s ease !important;
}

.mm-btn[class*="mm-acc-"]::before {
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255,255,255,.14) 45%,
    rgba(255,255,255,.28) 50%,
    rgba(255,255,255,.14) 55%,
    transparent 80%
  ) !important;
  background-size: 200% 100% !important;
  opacity: 0 !important;
  transition: opacity .25s !important;
}

.mm-btn[class*="mm-acc-"]:hover::before {
  opacity: 1 !important;
  animation: shimmerSlide 1.4s ease infinite !important;
}

/* Borde izquierdo más grueso al hacer hover */
.mm-btn[class*="mm-acc-"]:hover {
  border-left-width: 5px !important;
  padding-left: 19px !important;
}

/* Links del footer con mejor hover */
.mm-link:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  text-shadow: 0 0 10px rgba(245,197,24,.4) !important;
  background: rgba(245,197,24,.06) !important;
}

/* ─────────────────────────────────────────────────────────
   3. CANTO OVERLAY — ESCENA ÉPICA
   ───────────────────────────────────────────────────────── */

/* Fondo con blur real cuando aparece un canto */
#canto-overlay.show {
  background: rgba(0,0,0,.38) !important;
  backdrop-filter: blur(5px) !important;
}

/* Tarjeta más grande y con más personalidad */
.canto-card {
  min-width: 290px !important;
  padding: 34px 64px !important;
  border-radius: 24px !important;
  border-width: 3px !important;
}

/* Texto del canto MÁS GRANDE */
.canto-label {
  font-size: 56px !important;
  letter-spacing: 10px !important;
  line-height: 1 !important;
}

/* Quién cantó: más visible */
.canto-quien {
  font-size: 13px !important;
  letter-spacing: 4px !important;
  margin-top: 12px !important;
  color: rgba(255,255,255,.75) !important;
}

/* Anillo pulsante DETRÁS de la tarjeta (jugador) */
@keyframes cantoRingJ {
  0%,100% { transform: scale(1);    opacity: .45; }
  50%      { transform: scale(1.06); opacity: .85; }
}
.canto-card:not(.rival)::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 30px;
  border: 3px solid var(--gold);
  opacity: 0;
  pointer-events: none;
  animation: cantoRingJ 1.1s ease-in-out .5s infinite;
}

/* Anillo pulsante (rival) */
@keyframes cantoRingR {
  0%,100% { transform: scale(1);    opacity: .4; }
  50%      { transform: scale(1.06); opacity: .8; }
}
.canto-card.rival::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 30px;
  border: 3px solid var(--red);
  opacity: 0;
  pointer-events: none;
  animation: cantoRingR 1.1s ease-in-out .5s infinite;
}

/* ─────────────────────────────────────────────────────────
   4. RESULTADO DE MANO — CELEBRACIÓN
   ───────────────────────────────────────────────────────── */

/* Tarjeta más grande */
.resultado-card {
  min-width: 300px !important;
  padding: 32px 56px !important;
}

/* Título más grande */
.resultado-titulo { font-size: 26px !important; letter-spacing: 4px !important; }

/* Puntos GIGANTES */
.resultado-puntos { font-size: 68px !important; }

/* Starburst decorativo al ganar: pseudo-elemento con estrellas */
@keyframes starsBurst {
  0%   { transform: translateY(0) scale(.5);  opacity: 1; }
  80%  { transform: translateY(-32px) scale(1); opacity: .9; }
  100% { transform: translateY(-40px) scale(.9); opacity: 0; }
}
.resultado-card.gano::before {
  content: "★  ★  ★";
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  letter-spacing: 14px;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(245,197,24,.9), 0 0 32px rgba(245,197,24,.5);
  pointer-events: none;
  animation: starsBurst .8s cubic-bezier(.2,.8,.4,1) .35s both;
}

/* Flash verde al ganar (fondo de la tarjeta) */
@keyframes winCardFlash {
  0%   { background: linear-gradient(150deg, rgba(13,30,60,.98), rgba(5,12,28,1)); }
  18%  { background: linear-gradient(150deg, rgba(14,70,26,.98), rgba(5,28,10,1)); }
  50%  { background: linear-gradient(150deg, rgba(11,50,20,.97), rgba(4,18,8, 1)); }
  100% { background: linear-gradient(150deg, rgba(13,30,60,.98), rgba(5,12,28,1)); }
}
.resultado-card.gano {
  animation:
    resultadoFlipIn .55s cubic-bezier(.22,.85,.35,1.15) forwards,
    winCardFlash    1.4s ease .35s both !important;
}

/* ─────────────────────────────────────────────────────────
   5. OVERLAY DE ENVIDO — MÁS ESPECTACULAR
   ───────────────────────────────────────────────────────── */

.envido-panel {
  border-width: 3px !important;
  border-radius: 26px !important;
  padding: 28px 44px !important;
}

.envido-pts {
  font-size: 64px !important;
}

/* ─────────────────────────────────────────────────────────
   6. TANTEADOR — ESTADIO
   ───────────────────────────────────────────────────────── */

/* Números del marcador más grandes */
.side-score-pts {
  font-size: 28px !important;
  letter-spacing: 5px !important;
}

/* Barras de progreso más gruesas */
.side-prog-bar-bg { height: 7px !important; border-radius: 4px !important; }

/* Colores más saturados */
.side-prog-j {
  background: linear-gradient(90deg, #5ac8fa, #3a90e8) !important;
  box-shadow: 0 0 8px rgba(90,200,250,.5) !important;
}
.side-prog-r {
  background: linear-gradient(90deg, #ff6b6b, #c0392b) !important;
  box-shadow: 0 0 8px rgba(255,107,107,.5) !important;
}

/* Fósforos más visibles */
.fosforo-mini.rival {
  box-shadow: 0 0 6px rgba(192,57,43,.6) !important;
}

/* Panel lateral más elegante */
.side-score-inner {
  border: 1px solid rgba(106,180,245,.3) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(0,0,0,.6) !important;
}

/* ─────────────────────────────────────────────────────────
   7. CARTAS EN MANO — MÁS VIDA
   ───────────────────────────────────────────────────────── */

/* Cartas jugables tienen borde celeste sutil siempre */
.card.can-play {
  border-color: rgba(106,180,245,.4) !important;
  box-shadow:
    0 8px 16px rgba(0,0,0,.4),
    0 0 0 1px rgba(106,180,245,.2),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 4px rgba(0,0,0,.15) !important;
}

/* Hover más épico: lift mayor + aura azul */
.card.can-play:hover {
  transform: translateY(-20px) scale(1.06) !important;
  border-color: var(--sky) !important;
  box-shadow:
    0 32px 52px rgba(0,0,0,.7),
    0 0 0 3px var(--sky),
    0 0 36px rgba(106,180,245,.55),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* Carta seleccionada: borde más grueso */
.card.selected {
  transform: translateY(-22px) !important;
  box-shadow:
    0 36px 56px rgba(0,0,0,.75),
    0 0 0 3px var(--sky),
    0 0 40px rgba(106,180,245,.5) !important;
  border: 2.5px solid var(--sky) !important;
}

/* ─────────────────────────────────────────────────────────
   8. INFO BAR — TRANSMISIÓN TV MÁS INTENSA
   ───────────────────────────────────────────────────────── */

.info-bar {
  border-radius: 8px !important;
}

.info-msg {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.5) !important;
}

.info-tantos {
  color: rgba(245,197,24,.9) !important;
  font-weight: 800 !important;
}

.info-mano {
  color: #8ecdf7 !important;
  font-size: 11px !important;
}

/* ─────────────────────────────────────────────────────────
   9. TURNO ACTIVO — RESPLANDOR DORADO PREMIUM
   ───────────────────────────────────────────────────────── */

@keyframes turnGlowPremium {
  from {
    box-shadow: 0 0 0px 0px rgba(245,197,24,0);
    background: transparent;
  }
  to {
    box-shadow: 0 0 28px 8px rgba(245,197,24,.38);
    background: rgba(245,197,24,.025);
  }
}

.zona-jugador.turno-activo .player-hand {
  animation: turnGlowPremium 1.2s ease-in-out infinite alternate !important;
  border-radius: 18px !important;
}

/* Indicador "TU TURNO" con más brillo */
.zona-jugador.turno-activo::after {
  color: var(--gold) !important;
  text-shadow: 0 0 10px rgba(245,197,24,.9) !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
}

/* ─────────────────────────────────────────────────────────
   10. MODALES — GLASS PREMIUM
   ───────────────────────────────────────────────────────── */

.modal-box {
  /* Identidad premium 2026-07: este era el ultimo bastion del concepto AZUL
     viejo (junto con su glow celeste en el h2). Verde-noche + oro. */
  background: linear-gradient(
    150deg,
    rgba(12,31,20,.97) 0%,
    rgba(5,13,8,.99) 100%
  ) !important;
  border: 1px solid rgba(212,175,55,.45) !important;
  border-top: 1px solid rgba(212,175,55,.7) !important;
  border-radius: 18px !important;
  box-shadow:
    0 36px 64px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 0 1px rgba(0,0,0,.55) !important;
}

.modal-box h2 {
  font-size: 24px !important;
  letter-spacing: 4px !important;
  text-shadow: 0 0 28px rgba(212,175,55,.4) !important;
}

/* ─────────────────────────────────────────────────────────
   11. AVATAR DEL RIVAL — MÁS IMPONENTE
   ───────────────────────────────────────────────────────── */

#rival-avatar {
  width: 44px !important;
  height: 44px !important;
  border: 2.5px solid rgba(245,197,24,.7) !important;
  box-shadow: 0 0 14px rgba(245,197,24,.25), 0 4px 12px rgba(0,0,0,.5) !important;
}

.rival-name-txt {
  font-size: 15px !important;
  letter-spacing: 2.5px !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.7) !important;
}

/* ─────────────────────────────────────────────────────────
   12. DORSO DE CARTAS — DISEÑO FUTBOLERO
   ───────────────────────────────────────────────────────── */

/* Dorso con franja diagonal más pronunciada (camiseta argentina) */
.dorso::after {
  background:
    linear-gradient(115deg,
      transparent 25%,
      rgba(106,180,245,.12) 25%,
      rgba(106,180,245,.12) 42%,
      transparent 42%,
      transparent 58%,
      rgba(106,180,245,.10) 58%,
      rgba(106,180,245,.10) 75%,
      transparent 75%
    ) !important;
}

/* Borde interno del dorso más visible */
.dorso::before {
  border-color: rgba(106,180,245,.35) !important;
  border-width: 2px !important;
}

/* ─────────────────────────────────────────────────────────
   13. TOAST — GRITOS DE CANCHA
   ───────────────────────────────────────────────────────── */

.toast {
  font-size: 20px !important;
  letter-spacing: 4px !important;
  border-width: 2px !important;
  border-radius: 14px !important;
  backdrop-filter: blur(8px) !important;
  padding: 14px 32px !important;
}

/* ─────────────────────────────────────────────────────────
   14. PANTALLAS DE SETUP (registro, amistoso, mundial)
   ───────────────────────────────────────────────────────── */

/* Título de pantalla más grande */
.ns-title {
  font-size: 32px !important;
  text-shadow: 0 0 20px rgba(245,197,24,.3) !important;
}

/* Subtítulo más legible */
.ns-sub {
  font-size: 13px !important;
  color: rgba(255,255,255,.55) !important;
  letter-spacing: 1.5px !important;
}

/* Input de nombre: borde más brillante en focus */
.name-input:focus {
  border-color: var(--sky) !important;
  box-shadow:
    0 0 0 4px rgba(106,180,245,.22),
    0 0 20px rgba(106,180,245,.15) !important;
}

/* ─────────────────────────────────────────────────────────
   15. BOTONES DE ACCIÓN EN MESA — MÁS IMPACTO
   ───────────────────────────────────────────────────────── */

/* Botón normal: borde dorado más brillante */
.btn {
  border-width: 2px !important;
  border-color: rgba(245,197,24,.75) !important;
}

/* Hover: más intenso */
.btn:hover:not(:disabled) {
  background: var(--gold) !important;
  color: #0f1a0f !important;
  box-shadow:
    0 10px 24px rgba(245,197,24,.35),
    0 0 0 1px rgba(245,197,24,.6) !important;
}

/* Botón principal (azul) */
.btn.primary {
  background: linear-gradient(135deg, #5ab4f5, #2a80d4) !important;
  border-color: rgba(255,255,255,.45) !important;
  box-shadow: 0 6px 18px rgba(106,180,245,.3) !important;
}
.btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #7ccaf8, #3a8de0) !important;
  box-shadow: 0 10px 28px rgba(106,180,245,.45) !important;
  color: #fff !important;
}

/* Botón tope (btn-max) más dramático */
.btn.btn-max {
  background: linear-gradient(135deg, #f5c518, #ff9f43, #f5c518) !important;
  background-size: 200% 100% !important;
  animation: btnMaxPulse 1.1s ease-in-out infinite alternate, shimmerSlide 2s linear infinite !important;
  letter-spacing: 2px !important;
}

/* ─────────────────────────────────────────────────────────
   16. BADGE DE "MANO" — PULSANTE PREMIUM
   ───────────────────────────────────────────────────────── */

.mano-badge {
  font-size: 9px !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
  letter-spacing: 1.5px !important;
}

/* ─────────────────────────────────────────────────────────
   17. PANEL DE RONDAS — MÁS ESTADIO
   ───────────────────────────────────────────────────────── */

#rondas-panel {
  background: rgba(0,0,0,.5) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
  padding: 8px 11px !important;
  backdrop-filter: blur(6px) !important;
}

.ronda-ganador.win {
  background: rgba(245,197,24,.22) !important;
  color: var(--gold) !important;
  border-color: rgba(245,197,24,.5) !important;
  text-shadow: 0 0 8px rgba(245,197,24,.5) !important;
  font-weight: 900 !important;
}

.ronda-ganador.lose {
  color: #ff8a7a !important;
  border-color: rgba(231,76,60,.5) !important;
}

/* ─────────────────────────────────────────────────────────
   18. ACCESIBILIDAD / MOBILE
   ───────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .mm-title { font-size: 56px !important; }
  .canto-label { font-size: 44px !important; }
  .canto-card { padding: 26px 44px !important; min-width: 240px !important; }
  .resultado-puntos { font-size: 56px !important; }
}

@media (max-height: 620px) {
  .mm-title { font-size: 52px !important; }
}

/* ─────────────────────────────────────────────────────────
   19. ESTADO "STAKE" (apuesta activa)
   ───────────────────────────────────────────────────────── */

.side-stake {
  font-size: 11px !important;
  padding: 3px 10px !important;
  border-radius: 10px !important;
  letter-spacing: 1px !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,.45),
    0 0 16px rgba(245,166,35,.35) !important;
}

/* ─────────────────────────────────────────────────────────
   20. SCROLLBARS PREMIUM (Webkit)
   ───────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.25); border-radius: 3px; }
::-webkit-scrollbar-thumb {
  background: rgba(106,180,245,.4);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(106,180,245,.7); }

/* ── extras.css ── */
/* ══════════════════════════════════════════════════════════════
   extras.css — Truco GOL extras v1
   Features: historial, racha, relator, logros, stats finales,
             papel picado, partículas de menú, torneo rápido
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   HISTORIAL DE CANTOS
   ─────────────────────────────────────────────────────────────*/
#ext-historial {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 130px;
  z-index: 25;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ext-hist-item {
  font-size: 9px;
  font-family: var(--f-ui, monospace);
  padding: 3px 7px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: extHistSlide 0.25s ease;
}

.ext-hist-item.jugador {
  background: rgba(106, 180, 245, 0.25);
  border: 1px solid rgba(106, 180, 245, 0.5);
  color: #a8d8ff;
  text-align: right;
}

.ext-hist-item.rival {
  background: rgba(231, 76, 60, 0.2);
  border: 1px solid rgba(231, 76, 60, 0.4);
  color: #ff9f9f;
  text-align: left;
}

@keyframes extHistSlide {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 0.9; transform: translateX(0); }
}

/* ─────────────────────────────────────────────────────────────
   BADGE DE RACHA
   ─────────────────────────────────────────────────────────────*/
#ext-racha-badge {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f39c12, #e74c3c);
  color: #fff;
  font-size: 10px;
  font-family: var(--f-ui, monospace);
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 12px;
  letter-spacing: 1px;
  z-index: 25;
  pointer-events: none;
  display: none;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.5);
  animation: extRachaPulse 1.2s ease-in-out infinite alternate;
}

@keyframes extRachaPulse {
  from { box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4); }
  to   { box-shadow: 0 2px 16px rgba(231, 76, 60, 0.8); }
}

/* ─────────────────────────────────────────────────────────────
   RELATOR FUTBOLERO
   ─────────────────────────────────────────────────────────────*/
#ext-relator {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.88);
  color: #f5c518;
  font-size: 13px;
  font-family: var(--f-body, serif);
  font-style: italic;
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid rgba(200, 168, 75, 0.5);
  white-space: nowrap;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

#ext-relator.visible {
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────
   LOGROS — notificación de desbloqueo
   ─────────────────────────────────────────────────────────────*/
/* Arriba, no abajo: anclado a bottom:24px se sentaba justo sobre la
   barra de acciones y tapaba los cantos mientras había que decidir. */
#ext-logro-notif {
  position: fixed;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.97), rgba(50, 40, 10, 0.97));
  border: 1.5px solid #c8a84b;
  border-radius: 14px;
  padding: 12px 20px;
  z-index: 9000;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(200, 168, 75, 0.25);
  transition: top 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: 240px;
  max-width: 92vw;
}

#ext-logro-notif.show {
  top: 14px;
}

.ext-logro-ico {
  font-size: 28px;
  flex-shrink: 0;
}

.ext-logro-texto {
  flex: 1;
}

.ext-logro-titulo {
  color: #f5c518;
  font-family: var(--f-ui, monospace);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.ext-logro-nombre {
  color: #fff;
  font-family: var(--f-body, serif);
  font-size: 14px;
  font-weight: bold;
}

.ext-logro-desc {
  color: #aaa;
  font-size: 10px;
  font-family: var(--f-body, serif);
}

/* Modal de logros */
#ext-logros-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 8000;
  display: none;
  align-items: center;
  justify-content: center;
}

#ext-logros-modal.show {
  display: flex;
}

#ext-logros-modal .ext-modal-box {
  background: linear-gradient(160deg, #1a1a2e, #16213e);
  border: 1.5px solid #c8a84b;
  border-radius: 16px;
  padding: 24px;
  max-width: 420px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}

.ext-logros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.ext-logro-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.4;
  transition: all 0.3s;
}

.ext-logro-card.desbloqueado {
  opacity: 1;
  border-color: rgba(200, 168, 75, 0.5);
  background: rgba(200, 168, 75, 0.08);
}

.ext-logro-card .ico { font-size: 22px; }

.ext-logro-card .info .nom {
  font-size: 11px;
  font-weight: bold;
  color: #e8d5a3;
  font-family: var(--f-body, serif);
}

.ext-logro-card .info .des {
  font-size: 9px;
  color: #888;
  font-family: var(--f-body, serif);
}

/* ─────────────────────────────────────────────────────────────
   ESTADÍSTICAS FINALES
   ─────────────────────────────────────────────────────────────*/
#ext-stats-fin {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  z-index: 7000;
  display: none;
  align-items: center;
  justify-content: center;
}

#ext-stats-fin.show {
  display: flex;
  animation: extFadeIn 0.5s ease;
}

@keyframes extFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ext-stats-fin-box {
  background: linear-gradient(160deg, #0d1b2a, #1a2a3a);
  border: 1.5px solid #c8a84b;
  border-radius: 18px;
  padding: 28px 24px;
  max-width: 500px;
  width: 92vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.9);
}

.ext-stats-fin-title {
  text-align: center;
  font-family: var(--f-ui, monospace);
  font-size: 11px;
  letter-spacing: 3px;
  color: #c8a84b;
  margin-bottom: 20px;
}

.ext-stats-fin-cols {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: start;
}

.ext-stats-col-lbl {
  font-size: 10px;
  font-family: var(--f-ui, monospace);
  letter-spacing: 1.5px;
  color: #888;
  text-align: center;
  margin-bottom: 8px;
}

.ext-stats-col-lbl.ganador {
  color: #f5c518;
}

.ext-stat-bar-wrap {
  margin-bottom: 8px;
}

.ext-stat-bar-lbl {
  font-size: 9px;
  color: #999;
  font-family: var(--f-body, serif);
  margin-bottom: 2px;
}

.ext-stat-bar-bg {
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}

.ext-stat-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}

.ext-stat-bar-fill.jugador {
  background: linear-gradient(90deg, #6ab4f5, #3a8fd1);
}

.ext-stat-bar-fill.rival {
  background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.ext-stats-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(200,168,75,0.4);
  font-size: 18px;
  padding-top: 20px;
}

.ext-stats-close {
  margin-top: 20px;
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #c8a84b, #a07830);
  color: #1a1a1a;
  border: none;
  border-radius: 10px;
  font-family: var(--f-ui, monospace);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 2px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.ext-stats-close:hover { opacity: 0.85; }

/* ─────────────────────────────────────────────────────────────
   PAPEL PICADO
   ─────────────────────────────────────────────────────────────*/
.ext-papel-pieza {
  position: fixed;
  top: -20px;
  pointer-events: none;
  z-index: 9999;
  border-radius: 2px;
  animation: extPapelCaer linear forwards;
}

@keyframes extPapelCaer {
  0%   { top: -20px; opacity: 1; transform: rotate(0deg) translateX(0); }
  80%  { opacity: 1; }
  100% { top: 110vh; opacity: 0; transform: rotate(720deg) translateX(40px); }
}

/* ─────────────────────────────────────────────────────────────
   PARTÍCULAS DE MENÚ
   ─────────────────────────────────────────────────────────────*/
.ext-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: extParticleSube linear infinite;
  opacity: 0;
}

@keyframes extParticleSube {
  0%   { opacity: 0; transform: translateY(0) scale(1); }
  15%  { opacity: 0.7; }
  85%  { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-200px) scale(0.4); }
}

/* ─────────────────────────────────────────────────────────────
   TORNEO RÁPIDO — banner
   ─────────────────────────────────────────────────────────────*/
#ext-torneo-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, rgba(200,168,75,0.15), rgba(200,168,75,0.25), rgba(200,168,75,0.15));
  border-bottom: 1px solid rgba(200,168,75,0.4);
  color: #f5c518;
  font-family: var(--f-ui, monospace);
  font-size: 10px;
  letter-spacing: 2px;
  text-align: center;
  padding: 4px 8px;
  z-index: 30;
  display: none;
}

#ext-torneo-banner.activo {
  display: block;
}

/* Modal campeón de torneo */
#ext-torneo-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 8500;
  display: none;
  align-items: center;
  justify-content: center;
}

#ext-torneo-modal.show {
  display: flex;
  animation: extFadeIn 0.4s ease;
}

.ext-torneo-box {
  background: linear-gradient(160deg, #1a1500, #2a2000);
  border: 2px solid #c8a84b;
  border-radius: 20px;
  padding: 36px 28px;
  text-align: center;
  max-width: 380px;
  width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.9), 0 0 40px rgba(200,168,75,0.2);
}

.ext-torneo-trofeo {
  font-size: 60px;
  line-height: 1;
  margin-bottom: 12px;
}

.ext-torneo-titulo {
  font-family: var(--f-ui, monospace);
  font-size: 12px;
  letter-spacing: 3px;
  color: #c8a84b;
  margin-bottom: 8px;
}

.ext-torneo-ganador {
  font-family: var(--f-body, serif);
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 20px;
}

.ext-torneo-serie {
  font-size: 13px;
  color: #aaa;
  font-family: var(--f-body, serif);
  margin-bottom: 24px;
}

/* ─────────────────────────────────────────────────────────────
   BOTÓN TORNEO EN MENÚ
   ─────────────────────────────────────────────────────────────*/
.mm-btn.mm-btn-torneo {
  border-left: 3px solid #c8a84b;
}

/* Pantalla de torneo */
#ext-torneo-screen {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px;
  gap: 16px;
  min-height: 100vh;
  background: var(--mesa-bg, #1a2e1a);
}

#ext-torneo-screen.show {
  display: flex;
}

.ext-torneo-screen-title {
  font-family: var(--f-ui, monospace);
  font-size: 13px;
  letter-spacing: 3px;
  color: #c8a84b;
  margin-bottom: 8px;
  text-align: center;
}

.ext-torneo-series-display {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  margin: 8px 0;
}

.ext-torneo-team-side {
  text-align: center;
}

.ext-torneo-team-name {
  font-size: 12px;
  color: #ccc;
  font-family: var(--f-body, serif);
  margin-bottom: 6px;
}

.ext-torneo-stars {
  font-size: 20px;
  letter-spacing: 4px;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — ocultar historial en pantallas muy chicas
   ─────────────────────────────────────────────────────────────*/
@media (max-width: 400px) {
  #ext-historial { display: none; }
  #ext-relator { font-size: 11px; bottom: 100px; }
}

/* ── features_ui.css ── */
/* ═══════════════════════════════════════════════════════════════
   features_ui.css — Truco GOL
   Tutorial, Revancha, Perfil DT, Compartir Resultado
   ═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────
   FEATURE 1 — TUTORIAL OVERLAY
   ────────────────────────────────────────── */

#tut-overlay {
  position: fixed;
  inset: 0;
  z-index: 9800;
  background: rgba(0, 0, 0, 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
  animation: tut-fadein 0.3s ease;
}

#tut-overlay.tut-overlay-saliendo {
  animation: tut-fadeout 0.35s ease forwards;
}

@keyframes tut-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes tut-fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Spotlight: recuadro que ilumina un elemento */
#tut-spotlight {
  position: fixed;
  display: none;
  border-radius: 12px;
  box-shadow:
    0 0 0 4px rgba(245, 197, 24, 0.6),
    0 0 0 9999px rgba(0, 0, 0, 0.65);
  pointer-events: none;
  z-index: 9801;
  transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease;
}

/* Card del tutorial */
#tut-card {
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9820;
  background: linear-gradient(160deg, #1a2e1a 0%, #0d1f0d 100%);
  border: 2px solid var(--gold, #f5c518);
  border-radius: 16px;
  padding: 22px 24px 18px;
  width: min(420px, 92vw);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(245, 197, 24, 0.15) inset;
  color: #e8f5e9;
}

#tut-card.tut-card-anim {
  animation: tut-card-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes tut-card-pop {
  from { opacity: 0.6; transform: translate(-50%, calc(var(--ty, -50%) + 10px)) scale(0.96); }
  to   { opacity: 1;   transform: translate(-50%, var(--ty, -50%)) scale(1); }
}

#tut-step-indicator {
  font-size: 11px;
  color: rgba(245, 197, 24, 0.6);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

#tut-titulo {
  font-size: 18px;
  font-weight: 800;
  color: var(--gold, #f5c518);
  margin: 0 0 10px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  line-height: 1.25;
}

#tut-texto {
  font-size: 14px;
  line-height: 1.6;
  color: #c8e6c9;
  margin: 0 0 16px;
  white-space: pre-line;
}

/* Tabla jerarquía */
.tut-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 12px;
  color: #c8e6c9;
}
.tut-tabla thead {
  background: rgba(245, 197, 24, 0.15);
}
.tut-tabla th {
  padding: 5px 8px;
  text-align: left;
  color: var(--gold, #f5c518);
  font-weight: 700;
  border-bottom: 1px solid rgba(245,197,24,0.2);
}
.tut-tabla td {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.tut-tabla tr:last-child td { border-bottom: none; }
.tut-tabla tr:hover td { background: rgba(255,255,255,0.04); }

/* Botones del tutorial */
#tut-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.tut-nav-btns {
  display: flex;
  gap: 8px;
}

.tut-btn {
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease, box-shadow 0.12s ease;
  letter-spacing: 0.3px;
}
.tut-btn:hover { transform: translateY(-1px); opacity: 0.9; }
.tut-btn:active { transform: translateY(0); }

.tut-btn-skip {
  background: transparent;
  color: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.15);
}
.tut-btn-skip:hover { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.3); }

.tut-btn-prev {
  background: rgba(255,255,255,0.08);
  color: #c8e6c9;
  border: 1px solid rgba(255,255,255,0.15);
}

.tut-btn-next {
  background: var(--gold, #f5c518);
  color: #0d1a0d;
  box-shadow: 0 3px 10px rgba(245,197,24,0.35);
}
.tut-btn-next:hover { box-shadow: 0 4px 16px rgba(245,197,24,0.5); }


/* ──────────────────────────────────────────
   FEATURE 2 — REVANCHA / COMPARTIR BTNS
   ────────────────────────────────────────── */

.ext-revancha-btn,
.ext-compartir-btn {
  margin-top: 10px;
  width: 100%;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 11px 20px;
  cursor: pointer;
  border: none;
  transition: transform 0.13s ease, box-shadow 0.13s ease;
}
.ext-revancha-btn:hover,
.ext-compartir-btn:hover {
  transform: translateY(-2px);
}
.ext-revancha-btn:active,
.ext-compartir-btn:active {
  transform: translateY(0);
}

.ext-revancha-btn {
  background: linear-gradient(135deg, #2e7d32, #1b5e20);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(46, 125, 50, 0.45);
}
.ext-revancha-btn:hover {
  box-shadow: 0 6px 20px rgba(46, 125, 50, 0.6);
}

.ext-compartir-btn {
  background: linear-gradient(135deg, #1565c0, #0d47a1);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(21, 101, 192, 0.45);
}
.ext-compartir-btn:hover {
  box-shadow: 0 6px 20px rgba(21, 101, 192, 0.6);
}


/* ──────────────────────────────────────────
   FEATURE 3 — PERFIL DE DT
   ────────────────────────────────────────── */

.perfil-box {
  max-width: 400px;
  width: 92vw;
  padding: 20px;
  position: relative;
  background: linear-gradient(160deg, #1a2e1a 0%, #0d1f0d 100%) !important;
  border: 2px solid rgba(245, 197, 24, 0.4) !important;
  max-height: 92vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,197,24,0.3) transparent;
}

.perfil-close-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.perfil-close-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

/* Header: avatar + nombre + rango */
.perfil-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.perfil-avatar-wrap {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  background: rgba(245,197,24,0.1);
  border: 3px solid rgba(245,197,24,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.perfil-avatar { line-height: 1; }

.perfil-header-info { flex: 1; }

.perfil-nombre {
  font-size: 20px;
  font-weight: 800;
  color: #e8f5e9;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.perfil-rango-badge {
  display: inline-block;
  background: linear-gradient(90deg, rgba(245,197,24,0.2), rgba(245,197,24,0.08));
  border: 1px solid rgba(245,197,24,0.4);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold, #f5c518);
  letter-spacing: 0.4px;
}

/* Escudo del equipo */
.perfil-escudo-wrap {
  text-align: center;
  margin-bottom: 18px;
  padding: 14px;
  background: rgba(0,0,0,0.25);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.07);
}

.perfil-escudo-placeholder {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 6px;
}

.perfil-equipo-nombre {
  font-size: 13px;
  font-weight: 700;
  color: #a5d6a7;
  letter-spacing: 0.3px;
}

/* Grid de stats */
.perfil-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}

.perfil-stat-card {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
}

.perfil-stat-num {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: #e8f5e9;
  margin-bottom: 4px;
}
.perfil-stat-num.stat-win  { color: #69f0ae; }
.perfil-stat-num.stat-lose { color: #ff6b6b; }
.perfil-stat-num.stat-gold { color: var(--gold, #f5c518); }

.perfil-stat-lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.45);
}

/* Barra de progreso de rango */
.perfil-barra-wrap {
  margin-bottom: 18px;
}

.perfil-barra-lbl {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  margin-bottom: 6px;
}

.perfil-barra-bg {
  background: rgba(0,0,0,0.4);
  border-radius: 8px;
  height: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}

.perfil-barra-fill {
  height: 100%;
  background: linear-gradient(90deg, #2e7d32, #f5c518, #ff9800);
  border-radius: 8px;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 8px rgba(245,197,24,0.4);
}

.perfil-rango-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 14px;
  padding: 0 2px;
}

/* Logros */
.perfil-logros-titulo {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(245,197,24,0.7);
  margin-bottom: 10px;
}

.perfil-logros-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}

.perfil-logro-item {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
  cursor: default;
  transition: background 0.15s, border-color 0.15s;
}
.perfil-logro-item:hover {
  background: rgba(245,197,24,0.08);
  border-color: rgba(245,197,24,0.25);
}

.perfil-logro-icono {
  display: block;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 5px;
}

.perfil-logro-nombre {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* FAB perfil DT */
.fab-perfil-dt {
  /* hereda de .fab en el juego */
}

/* ──────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────── */

@media (max-width: 480px) {
  #tut-card {
    width: 96vw;
    padding: 18px 16px 14px;
  }
  .perfil-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .perfil-logros-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  #tut-titulo { font-size: 16px; }
  #tut-texto  { font-size: 13px; }
}

/* ── features_gameplay.css ── */
/* ══════════════════════════════════════════════════════════════
   features_gameplay.css
   IA Personalidades · Clima · Vestuario · Maratón · Desafío
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   FEATURE 1 — BADGE DE PERSONALIDAD DE LA IA
   ───────────────────────────────────────────── */

.fg-personalidad-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-family: var(--f-ui, monospace);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 2px 8px;
  margin-top: 3px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  animation: fg-badge-in 0.4s ease both;
}

@keyframes fg-badge-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────
   FEATURE 2 — CLIMA
   ───────────────────────────────────────────── */

/* Contenedor de gotas de lluvia — fixed, full-screen, pointer-events none */
#fg-lluvia-container {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.lluvia-gota {
  position: absolute;
  top: -20px;
  width: 1.5px;
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(180, 210, 255, 0), rgba(180, 220, 255, 0.7));
  animation: fg-caer linear infinite;
}

@keyframes fg-caer {
  0%   { transform: translateY(-20px) rotate(10deg); }
  100% { transform: translateY(110vh) rotate(10deg); }
}

/* Cartas tiemblan sutilmente bajo la lluvia */
body.clima-lluvia .carta,
body.clima-lluvia .card {
  animation: fg-temblor-lluvia 2s ease-in-out infinite;
}

@keyframes fg-temblor-lluvia {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(0.4deg); }
  75%       { transform: rotate(-0.4deg); }
}

/* — VIENTO — */
#fg-viento-container {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.viento-particula {
  position: absolute;
  left: -120px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, transparent, rgba(200, 220, 255, 0.5), transparent);
  animation: fg-viento-mover linear infinite;
}

@keyframes fg-viento-mover {
  0%   { transform: translateX(-120px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(110vw); opacity: 0; }
}

/* Cartas oscilan con el viento */
body.clima-viento .carta,
body.clima-viento .card {
  animation: fg-oscilar-viento 3s ease-in-out infinite;
}

@keyframes fg-oscilar-viento {
  0%, 100% { transform: rotate(0deg); }
  30%       { transform: rotate(2deg); }
  70%       { transform: rotate(-2deg); }
}

/* — NOCHE — */
/* El overlay ya lo maneja style.css + club.js (pano-noche-ovl).
   Acá solo reforzamos el glow de la mesa. */
body.clima-noche #mesa,
body.pano-noche  #mesa {
  box-shadow: 0 0 40px 8px rgba(80, 130, 255, 0.15), inset 0 0 60px rgba(0, 0, 60, 0.25);
}

body.clima-noche .zona-central,
body.pano-noche  .zona-central {
  filter: drop-shadow(0 0 6px rgba(100, 160, 255, 0.2));
}

/* — BADGE DE CLIMA en info-bar — */
.fg-clima-badge {
  font-size: 10px;
  font-family: var(--f-ui, monospace);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.5px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  margin-left: 8px;
  animation: fg-badge-in 0.5s ease both;
}

/* ─────────────────────────────────────────────
   FEATURE 3 — VESTUARIO ENTRE MANOS
   ───────────────────────────────────────────── */

#vest-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #0d2a14 0%, #103318 40%, #0a1f0f 100%);
  pointer-events: none;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

#vest-overlay.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.vest-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 24px;
  text-align: center;
  max-width: 340px;
  width: 90%;
}

.vest-titulo {
  font-family: var(--f-ui, monospace);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.vest-frase {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
  line-height: 1.4;
  max-width: 260px;
}

.vest-marcador {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 4px 0;
}

.vest-score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.vest-score-label {
  font-family: var(--f-ui, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.vest-score-pts {
  font-family: var(--f-ui, monospace);
  font-size: 38px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.vest-score-sep {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 10px;
}

.vest-barra-container {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.vest-barra-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  border-radius: 4px;
  transition: width 0.6s ease;
  min-width: 4px;
}

.vest-mano-num {
  font-family: var(--f-ui, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────
   FEATURE 4 — MODO MARATÓN
   ───────────────────────────────────────────── */

/* Banner superior que se muestra sobre la mesa */
.ext-maraton-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 14px;
  background: linear-gradient(90deg, #1a0a2e, #2d1060, #1a0a2e);
  border-bottom: 1px solid rgba(160, 100, 255, 0.35);
  font-family: var(--f-ui, monospace);
  font-size: 11px;
  color: #d4a8ff;
  font-weight: 700;
  letter-spacing: 0.5px;
  z-index: 50;
  flex-shrink: 0;
}

.maraton-banner-ico {
  font-size: 16px;
}

.maraton-banner-txt {
  flex: 1;
  text-align: center;
}

.maraton-banner-stop {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}

.maraton-banner-stop:hover {
  background: rgba(255, 80, 80, 0.4);
}

/* Botón de maratón en el menú principal */
.fg-btn-maraton {
  border-left: 3px solid #7b2ff7 !important;
}

/* Modal genérico de resultado maratón */
.fg-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
}

.fg-modal-box {
  background: linear-gradient(160deg, #1a1a2e, #16213e);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 32px 28px 24px;
  max-width: 320px;
  width: 88%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  animation: fg-modal-in 0.3s ease both;
}

@keyframes fg-modal-in {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.fg-modal-ico {
  font-size: 44px;
  line-height: 1;
}

.fg-modal-titulo {
  font-family: var(--f-ui, monospace);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fff;
}

.fg-modal-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.maraton-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--f-ui, monospace);
}

.maraton-alerta {
  font-size: 12px;
  color: #ffb74d;
  font-weight: 700;
  padding: 6px 12px;
  background: rgba(255, 150, 0, 0.1);
  border: 1px solid rgba(255, 150, 0, 0.25);
  border-radius: 8px;
}

.fg-modal-btns {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  width: 100%;
}

.fg-modal-btn {
  flex: 1;
  padding: 10px 0;
  border-radius: 12px;
  font-family: var(--f-ui, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s, transform 0.15s;
}

.fg-modal-btn:active {
  transform: scale(0.97);
}

.fg-modal-btn-primary {
  background: linear-gradient(135deg, #4CAF50, #2E7D32);
  color: #fff;
}

.fg-modal-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.fg-modal-btn:hover {
  opacity: 0.88;
}

/* ─────────────────────────────────────────────
   FEATURE 5 — DESAFÍO DIARIO
   ───────────────────────────────────────────── */

#ext-desafio-card-menu {
  padding: 0 12px 4px;
}

.desafio-card {
  background: linear-gradient(135deg, rgba(255, 200, 0, 0.06), rgba(255, 160, 0, 0.04));
  border: 1px solid rgba(255, 195, 0, 0.28);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 4px;
  transition: border-color 0.3s;
}

.desafio-card.completado {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.08), rgba(56, 142, 60, 0.05));
  border-color: rgba(76, 175, 80, 0.35);
  opacity: 0.85;
}

.desafio-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.desafio-card-ico {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}

.desafio-card-info {
  flex: 1;
  min-width: 0;
}

.desafio-card-label {
  font-family: var(--f-ui, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffc107;
  margin-bottom: 2px;
}

.desafio-card-nombre {
  font-family: var(--f-ui, monospace);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}

.desafio-card-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.35;
}

.desafio-card-btn {
  display: block;
  width: 100%;
  padding: 9px 0;
  background: linear-gradient(135deg, #f9a825, #e65100);
  color: #fff;
  font-family: var(--f-ui, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}

.desafio-card-btn:hover   { opacity: 0.88; }
.desafio-card-btn:active  { transform: scale(0.97); }

.desafio-card-completado {
  text-align: center;
  font-family: var(--f-ui, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #66BB6A;
  padding: 6px 0;
}

/* ── features_progression.css ── */
/* ══════════════════════════════════════════════════════════════
   features_progression.css  — Truco GOL
   Economía, Fichajes, Historial, Estadio, Camiseta, Nocturno
   ══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────
   RESET DE MODAL PROPIO
   ────────────────────────────────────────────────  */
.fp-modal-box {
  position: relative;
  max-height: 85vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}

.fp-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  font-size: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  z-index: 10;
}
.fp-modal-close:hover { background: rgba(255,255,255,.25); }

/* ────────────────────────────────────────────────
   ECONOMÍA — PESOS TRUCOSOS
   ────────────────────────────────────────────────  */
.fp-pesos-badge {
  text-align: center;
  font-family: var(--f-camiseta, 'Oswald', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--gold, #f5c518);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(245,197,24,.35);
  border-radius: 20px;
  padding: 4px 14px;
  margin: 0 auto 8px;
  width: fit-content;
  letter-spacing: .5px;
}

.fp-pesos-corner {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-family: var(--f-camiseta, 'Oswald', sans-serif);
  font-size: 11px;
  font-weight: 600;
  color: var(--gold, #f5c518);
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(245,197,24,.3);
  border-radius: 12px;
  padding: 3px 10px;
  pointer-events: none;
  z-index: 20;
  letter-spacing: .4px;
}

/* Animación flotante de moneda */
.fp-moneda-anim {
  position: absolute;
  font-family: var(--f-camiseta, 'Oswald', sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--gold, #f5c518);
  text-shadow: 0 0 8px rgba(245,197,24,.8), 0 2px 4px rgba(0,0,0,.6);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translateY(0) scale(.8);
  transition: none;
}
.fp-moneda-anim--activo {
  animation: fp-moneda-up 1.7s ease-out forwards;
}
@keyframes fp-moneda-up {
  0%   { opacity:0;   transform: translateY(0)    scale(.8); }
  15%  { opacity:1;   transform: translateY(-10px) scale(1.1); }
  70%  { opacity:1;   transform: translateY(-60px) scale(1);   }
  100% { opacity:0;   transform: translateY(-90px) scale(.9);  }
}

/* ────────────────────────────────────────────────
   FILTROS COMPARTIDOS (Fichajes / Historial)
   ────────────────────────────────────────────────  */
.fp-fichajes-filtros {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 10px 0 14px;
  flex-wrap: wrap;
}
.fp-filtro-btn {
  font-family: var(--f-ui, 'Oswald', sans-serif);
  font-size: 11px;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.7);
  cursor: pointer;
  transition: all .15s;
}
.fp-filtro-btn:hover   { background: rgba(255,255,255,.15); color:#fff; }
.fp-filtro-activo      { background: var(--gold, #f5c518) !important; color:#000 !important; border-color:var(--gold,#f5c518) !important; font-weight:700; }

/* ────────────────────────────────────────────────
   MERCADO DE FICHAJES
   ────────────────────────────────────────────────  */
.fp-saldo-header {
  text-align: center;
  font-family: var(--f-camiseta, 'Oswald', sans-serif);
  font-size: 14px;
  color: rgba(255,255,255,.75);
  margin-bottom: 2px;
}
.fp-saldo-header span {
  color: var(--gold, #f5c518);
  font-weight: 700;
  font-size: 16px;
}

.fp-fichajes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  padding: 4px 0 8px;
}

.fp-fichaje-card {
  background: rgba(0,0,0,.35);
  border: 1px solid var(--rareza-color, rgba(255,255,255,.15));
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: 0 0 8px -2px var(--rareza-color, transparent);
  transition: transform .15s, box-shadow .15s;
}
.fp-fichaje-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px -2px var(--rareza-color, transparent); }

.fp-fichaje-rareza {
  font-size: 9px;
  font-family: var(--f-ui, 'Oswald', sans-serif);
  font-weight: 700;
  letter-spacing: 1px;
  color: #000;
  border-radius: 8px;
  padding: 1px 8px;
}
.fp-fichaje-emoji   { font-size: 34px; line-height: 1.1; margin: 4px 0; }
.fp-fichaje-nombre  { font-family: var(--f-camiseta, 'Oswald', sans-serif); font-size: 13px; font-weight: 600; color: #fff; }
.fp-fichaje-desc    { font-size: 10px; color: rgba(255,255,255,.55); line-height: 1.3; }
.fp-fichaje-precio  { font-family: var(--f-camiseta, 'Oswald', sans-serif); font-size: 13px; color: var(--gold, #f5c518); font-weight: 700; margin-top: 2px; }

.fp-btn-comprar, .fp-btn-equipar, .fp-btn-equipado {
  font-family: var(--f-ui, 'Oswald', sans-serif);
  font-size: 10px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  transition: all .15s;
  margin-top: 2px;
  width: 100%;
}
.fp-btn-comprar  { background: var(--gold, #f5c518); color: #000; }
.fp-btn-comprar:hover { background: #ffe55a; }
.fp-btn-equipar  { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.fp-btn-equipar:hover { background: rgba(255,255,255,.25); }
.fp-btn-equipado { background: rgba(39,174,96,.25); color: #2ecc71; border: 1px solid #2ecc71; cursor: default; }

/* Celebración de fichaje */
.fp-celebracion-fichaje {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(.5);
  background: linear-gradient(160deg, rgba(0,0,0,.92), rgba(20,20,40,.95));
  border: 2px solid var(--gold, #f5c518);
  border-radius: 20px;
  padding: 28px 36px;
  text-align: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
.fp-celebracion-fichaje.fp-cel--activo {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}
.fp-cel-emoji  { font-size: 52px; margin-bottom: 8px; }
.fp-cel-titulo { font-family: var(--f-display, 'Bebas Neue', sans-serif); font-size: 22px; color: var(--gold, #f5c518); letter-spacing: 2px; }
.fp-cel-nombre { font-family: var(--f-camiseta, 'Oswald', sans-serif); font-size: 18px; color: #fff; font-weight: 600; margin-top: 4px; }
.fp-cel-rareza { font-size: 12px; font-weight: 700; letter-spacing: 2px; margin-top: 4px; }

/* ────────────────────────────────────────────────
   HISTORIAL DE PARTIDAS
   ────────────────────────────────────────────────  */
.fp-hist-stats {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.fp-hist-stat {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 8px 14px;
  text-align: center;
  min-width: 60px;
}
.fp-stat-num {
  display: block;
  font-family: var(--f-camiseta, 'Oswald', sans-serif);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.fp-stat-lbl {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: rgba(255,255,255,.5);
  margin-top: 1px;
}
.fp-stat-verde .fp-stat-num { color: #2ecc71; }
.fp-stat-rojo  .fp-stat-num { color: #e74c3c; }

.fp-hist-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
  padding: 2px 0;
}
.fp-hist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,.28);
  border-left: 3px solid rgba(255,255,255,.2);
  border-radius: 8px;
  padding: 8px 12px;
  transition: background .12s;
}
.fp-hist-row:hover           { background: rgba(255,255,255,.06); }
.fp-hist-victoria            { border-left-color: #2ecc71; }
.fp-hist-derrota             { border-left-color: #e74c3c; }
.fp-hist-ico                 { font-size: 20px; flex-shrink: 0; }
.fp-hist-info                { flex: 1; min-width: 0; }
.fp-hist-vs                  { font-family: var(--f-camiseta, 'Oswald', sans-serif); font-size: 13px; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-hist-fecha               { font-size: 10px; color: rgba(255,255,255,.45); margin-top: 1px; }
.fp-hist-score               { font-family: var(--f-camiseta, 'Oswald', sans-serif); font-size: 15px; font-weight: 700; color: var(--gold, #f5c518); flex-shrink: 0; }
.fp-hist-vacio               { text-align: center; color: rgba(255,255,255,.4); padding: 24px; font-size: 13px; }

/* ────────────────────────────────────────────────
   ESTADIO CON PROGRESIÓN
   ────────────────────────────────────────────────  */
.fp-estadio-box { text-align: center; }

.fp-estadio-emoji    { font-size: 56px; margin: 4px 0 6px; line-height: 1; }
.fp-estadio-nombre   { font-family: var(--f-display, 'Bebas Neue', sans-serif); font-size: 26px; letter-spacing: 2px; color: #fff; }
.fp-estadio-cap      { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 2px; letter-spacing: .5px; }
.fp-estadio-desc     { font-size: 13px; color: rgba(255,255,255,.75); margin: 8px 0 4px; font-style: italic; }
.fp-estadio-victorias{ font-family: var(--f-camiseta, 'Oswald', sans-serif); font-size: 12px; color: var(--gold, #f5c518); margin-bottom: 12px; }

.fp-prog-label       { font-size: 12px; color: rgba(255,255,255,.6); margin-bottom: 6px; letter-spacing: .3px; }
.fp-prog-bar-bg      { background: rgba(255,255,255,.12); border-radius: 20px; height: 10px; overflow: hidden; margin: 0 8px; }
.fp-prog-bar-fill    { height: 100%; background: linear-gradient(90deg, var(--gold,#f5c518), #ffe55a); border-radius: 20px; transition: width .6s ease; }
.fp-prog-sub         { font-size: 10px; color: rgba(255,255,255,.4); margin-top: 5px; }

.fp-mejoras-lista    { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; text-align: left; }
.fp-mejora-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(0,0,0,.25);
  border-radius: 8px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.08);
}
.fp-mejora-row span:nth-child(2) { flex: 1; color: rgba(255,255,255,.75); }
.fp-mejora-row span:nth-child(3) { font-size: 11px; color: rgba(255,255,255,.4); }
.fp-mejora-ok  { border-color: rgba(46,204,113,.3); background: rgba(46,204,113,.07); }
.fp-mejora-ok  span:nth-child(2) { color: #fff; }
.fp-mejora-lock span:nth-child(1){ opacity: .4; }

/* Subida de nivel */
.fp-subida-nivel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(.6);
  background: linear-gradient(160deg, rgba(0,0,0,.92), rgba(10,25,10,.95));
  border: 2px solid var(--gold, #f5c518);
  border-radius: 20px;
  padding: 30px 40px;
  text-align: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: all .35s cubic-bezier(.34,1.56,.64,1);
}
.fp-subida-nivel.fp-sn--activo { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.fp-sn-emoji   { font-size: 54px; margin-bottom: 8px; }
.fp-sn-titulo  { font-family: var(--f-display, 'Bebas Neue', sans-serif); font-size: 20px; color: var(--gold, #f5c518); letter-spacing: 2px; }
.fp-sn-nombre  { font-family: var(--f-camiseta, 'Oswald', sans-serif); font-size: 18px; color: #fff; font-weight: 600; margin-top: 4px; }
.fp-sn-desc    { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 4px; font-style: italic; }

/* ────────────────────────────────────────────────
   CAMISETA PERSONALIZABLE
   ────────────────────────────────────────────────  */
.fp-camiseta-section {
  margin: 12px 0;
  padding: 12px;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
}
.fp-camiseta-titulo {
  font-family: var(--f-ui, 'Oswald', sans-serif);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.6);
  margin-bottom: 10px;
}
.fp-camiseta-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.fp-camiseta-preview {
  flex-shrink: 0;
  background: rgba(255,255,255,.05);
  border-radius: 10px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.1);
}
.fp-camiseta-controles { flex: 1; min-width: 140px; }

.fp-presets-grid {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.fp-preset-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  cursor: pointer;
  transition: transform .12s, border-color .12s;
}
.fp-preset-btn:hover { transform: scale(1.15); border-color: #fff; }

.fp-color-custom {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.fp-color-custom label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255,255,255,.6);
  cursor: pointer;
}
.fp-color-custom input[type="color"] {
  width: 34px;
  height: 28px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

/* ────────────────────────────────────────────────
   MODO NOCTURNO
   ────────────────────────────────────────────────  */
body.fp-modo-nocturno #main-menu {
  background: linear-gradient(180deg, #080d10 0%, #0c1218 60%, #080d10 100%) !important;
}
body.fp-modo-nocturno .mm-content {
  background: rgba(0,0,0,.55);
}
body.fp-modo-nocturno {
  --felt:   #0a1a10;
  --felt-d: #050f09;
  --felt-l: #122818;
}
/* Overlay de noche en la mesa */
body.fp-modo-nocturno #pano-noche-ovl {
  display: block !important;
  position: fixed;
  inset: 0;
  background: rgba(0,5,15,.45);
  pointer-events: none;
  z-index: 5;
}

/* ────────────────────────────────────────────────
   TOAST PROPIO (fallback si no hay showToast)
   ────────────────────────────────────────────────  */
.fp-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0,0,0,.85);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-family: var(--f-ui, 'Oswald', sans-serif);
  font-size: 12px;
  padding: 10px 20px;
  border-radius: 20px;
  z-index: 9999;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  white-space: nowrap;
  pointer-events: none;
}
.fp-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────  */
@media (max-width: 480px) {
  .fp-fichajes-grid { grid-template-columns: repeat(2, 1fr); }
  .fp-camiseta-inner { flex-direction: column; align-items: flex-start; }
  .fp-hist-vs { font-size: 12px; }
  .fp-hist-stats { gap: 4px; }
  .fp-hist-stat { padding: 6px 10px; min-width: 50px; }
  .fp-stat-num { font-size: 17px; }
}

/* ── features_historia.css ── */
/* ═══════════════════════════════════════════════════════════════
   features_historia.css  — Truco GOL
   Modo Historia, Misiones Semanales, Logros Extra, Jugadores Extra
   ═══════════════════════════════════════════════════════════════ */

/* ─── BOTÓN MODO HISTORIA EN MENÚ ───────────────────────────── */
.hist-menu-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(135deg, #1a3a1a 0%, #0d2010 50%, #1a2a0d 100%);
  border: 1px solid #2e6b2e;
  border-radius: 12px;
  color: #7ed856;
  font-family: var(--f-ui, monospace);
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1.5px;
  cursor: pointer;
  text-align: left;
  margin: 4px 0;
  box-shadow: 0 2px 8px rgba(46,107,46,0.3), inset 0 1px 0 rgba(126,216,86,0.1);
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}
.hist-menu-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(126,216,86,0.06) 50%, transparent 100%);
  animation: hist-btn-shine 3s ease-in-out infinite;
}
@keyframes hist-btn-shine {
  0%, 100% { opacity: 0; transform: translateX(-100%); }
  50%       { opacity: 1; transform: translateX(100%);  }
}
.hist-menu-btn:hover  { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(46,107,46,0.5); }
.hist-menu-btn:active { transform: translateY(0); }
.hist-menu-btn-ico    { font-size: 24px; flex-shrink: 0; }
.hist-menu-btn-texto strong { display: block; font-size: 13px; letter-spacing: 1.5px; }
.hist-menu-btn-texto small  { display: block; font-size: 10px; color: #5a9e45; font-weight: normal; letter-spacing: 0.5px; margin-top: 2px; }

/* ─── MODAL LISTA DE CAPÍTULOS ───────────────────────────────── */
#hist-menu-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 1800;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
#hist-menu-modal.show {
  opacity: 1;
  pointer-events: all;
}
.hist-modal-box {
  background: #0e1a0e;
  border: 1px solid #2e6b2e;
  border-radius: 16px;
  width: min(420px, 94vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8), 0 0 0 1px rgba(126,216,86,0.1);
  overflow: hidden;
}
.hist-modal-header {
  padding: 16px 20px 12px;
  background: linear-gradient(135deg, #0d2010, #0a150a);
  border-bottom: 1px solid #1e4a1e;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hist-modal-title {
  font-family: var(--f-ui, monospace);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #7ed856;
}
.hist-modal-progress {
  font-family: var(--f-ui, monospace);
  font-size: 10px;
  color: #5a9e45;
  letter-spacing: 1px;
}
.hist-modal-close {
  background: none;
  border: none;
  color: #5a9e45;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0 0 0 12px;
}
.hist-modal-close:hover { color: #7ed856; }

.hist-capitulos-list {
  overflow-y: auto;
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hist-capitulos-list::-webkit-scrollbar       { width: 4px; }
.hist-capitulos-list::-webkit-scrollbar-track  { background: #0e1a0e; }
.hist-capitulos-list::-webkit-scrollbar-thumb  { background: #2e6b2e; border-radius: 2px; }

.hist-cap-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.hist-cap-row.completado {
  background: rgba(46,107,46,0.15);
  border-color: rgba(46,107,46,0.4);
}
.hist-cap-row.actual {
  background: rgba(126,216,86,0.08);
  border-color: #7ed856;
  animation: hist-cap-pulso 1.8s ease-in-out infinite;
}
.hist-cap-row.bloqueado {
  opacity: 0.4;
  cursor: not-allowed;
}
@keyframes hist-cap-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(126,216,86,0.3); }
  50%       { box-shadow: 0 0 0 6px rgba(126,216,86,0); }
}
.hist-cap-row:not(.bloqueado):hover { transform: translateX(3px); background: rgba(126,216,86,0.05); }

.hist-cap-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1a3a1a;
  border: 1px solid #2e6b2e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-ui, monospace);
  font-size: 10px;
  font-weight: bold;
  color: #5a9e45;
  flex-shrink: 0;
}
.hist-cap-row.completado .hist-cap-num { background: #2e6b2e; color: #c8f0a0; border-color: #7ed856; }
.hist-cap-row.actual     .hist-cap-num { background: #7ed856; color: #0a1a0a; border-color: #7ed856; }

.hist-cap-rival-ico { font-size: 20px; flex-shrink: 0; }

.hist-cap-info { flex: 1; min-width: 0; }
.hist-cap-titulo    { font-family: var(--f-ui, monospace); font-size: 11px; font-weight: bold; color: #c8f0a0; letter-spacing: 1px; }
.hist-cap-subtitulo { font-family: var(--f-body, serif);   font-size: 10px; color: #5a9e45; margin-top: 1px; }

.hist-cap-badge      { font-size: 14px; flex-shrink: 0; }
.hist-cap-badge-lock { color: #3a5a3a; }

/* ─── OVERLAY NARRATIVO ──────────────────────────────────────── */
#hist-narrativa-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
#hist-narrativa-overlay.show { opacity: 1; pointer-events: all; }

.hist-narr-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, #0a2010 0%, #020805 70%);
}
.hist-narr-bg.superclasico {
  background: radial-gradient(ellipse at 30% 50%, #1a0505 0%, #05001a 60%, #020108 100%);
}
.hist-narr-bg.superclasico::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(150,10,10,0.35) 0%, transparent 50%, rgba(10,30,150,0.35) 100%);
  pointer-events: none;
}
.hist-narr-bg.final   { background: radial-gradient(ellipse at center, #1a1000 0%, #0a0500 60%, #020100 100%); }
.hist-narr-bg.mundial { background: radial-gradient(ellipse at center, #0d0a00 0%, #050308 60%, #020100 100%); }

.hist-narr-box {
  position: relative;
  width: min(460px, 92vw);
  padding: 28px 24px;
  text-align: center;
  z-index: 1;
}
.hist-narr-cap-label {
  font-family: var(--f-ui, monospace);
  font-size: 9px;
  letter-spacing: 3px;
  color: #5a9e45;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.hist-narr-titulo {
  font-family: var(--f-ui, monospace);
  font-size: 22px;
  font-weight: bold;
  color: #7ed856;
  letter-spacing: 2px;
  line-height: 1.2;
  margin-bottom: 4px;
}
.hist-narr-subtitulo {
  font-family: var(--f-body, serif);
  font-size: 12px;
  color: #5a9e45;
  margin-bottom: 20px;
  font-style: italic;
}
.hist-narr-escudos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}
.hist-narr-escudo      { font-size: 44px; animation: hist-escudo-float 2.5s ease-in-out infinite; }
.hist-narr-escudo.rival { animation-delay: 0.5s; }
.hist-narr-vs {
  font-family: var(--f-ui, monospace);
  font-size: 16px;
  font-weight: bold;
  color: #c8a84b;
  letter-spacing: 2px;
}
@keyframes hist-escudo-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.hist-narr-rival-nombre {
  font-family: var(--f-ui, monospace);
  font-size: 11px;
  color: #888;
  letter-spacing: 1px;
  margin-bottom: 18px;
}
.hist-narr-texto {
  font-family: var(--f-body, serif);
  font-size: 15px;
  color: #c8f0a0;
  line-height: 1.65;
  margin-bottom: 24px;
  padding: 0 8px;
}
.hist-narr-btn-jugar {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #2e6b2e, #1a4a1a);
  border: 1px solid #7ed856;
  border-radius: 12px;
  color: #7ed856;
  font-family: var(--f-ui, monospace);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 3px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 0 20px rgba(126,216,86,0.2);
}
.hist-narr-btn-jugar:hover  { transform: scale(1.02); box-shadow: 0 0 30px rgba(126,216,86,0.4); }
.hist-narr-btn-jugar:active { transform: scale(0.99); }
.hist-narr-btn-cerrar {
  width: 100%;
  margin-top: 10px;
  padding: 11px;
  background: transparent;
  border: 1px solid #2e6b2e;
  border-radius: 10px;
  color: #5a9e45;
  font-family: var(--f-ui, monospace);
  font-size: 11px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.hist-narr-btn-cerrar:hover { border-color: #7ed856; color: #7ed856; }

/* ─── OVERLAY RECOMPENSA ─────────────────────────────────────── */
#hist-recompensa-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.88);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
#hist-recompensa-overlay.show { opacity: 1; pointer-events: all; }

.hist-recomp-box {
  text-align: center;
  padding: 32px 28px;
  width: min(380px, 90vw);
}
.hist-recomp-resultado {
  font-family: var(--f-ui, monospace);
  font-size: 10px;
  letter-spacing: 3px;
  margin-bottom: 8px;
}
.hist-recomp-resultado.victoria { color: #7ed856; }
.hist-recomp-resultado.derrota  { color: #e05555; }
.hist-recomp-ico {
  font-size: 60px;
  margin-bottom: 12px;
  display: block;
  animation: hist-recomp-pop 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes hist-recomp-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.hist-recomp-narrativa {
  font-family: var(--f-body, serif);
  font-size: 15px;
  color: #c8f0a0;
  line-height: 1.6;
  margin-bottom: 20px;
}
.hist-recomp-premios {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.hist-recomp-premio {
  padding: 8px 16px;
  border-radius: 20px;
  font-family: var(--f-ui, monospace);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  animation: hist-recomp-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) backwards;
}
.hist-recomp-premio.pesos  { background: rgba(200,168,75,0.2); border: 1px solid #c8a84b; color: #c8a84b; animation-delay: 0.15s; }
.hist-recomp-premio.titulo { background: rgba(126,216,86,0.1); border: 1px solid #7ed856; color: #7ed856; animation-delay: 0.3s; }
.hist-recomp-btn {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, #c8a84b, #a07830);
  border: none;
  border-radius: 10px;
  color: #1a1a1a;
  font-family: var(--f-ui, monospace);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  cursor: pointer;
  transition: transform 0.1s;
}
.hist-recomp-btn:hover { transform: scale(1.02); }

/* ─── PAPEL PICADO (CAP 9) ───────────────────────────────────── */
.hist-confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1999;
  overflow: hidden;
}
.hist-confetti-piece {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  animation: hist-confetti-fall linear forwards;
}
@keyframes hist-confetti-fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ─── ESTRELLAS DORADAS (CAP 10) ─────────────────────────────── */
.hist-stars-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1998;
  overflow: hidden;
}
.hist-star-piece {
  position: absolute;
  color: #ffd700;
  font-size: 18px;
  animation: hist-star-float ease-in-out infinite alternate;
}
@keyframes hist-star-float {
  from { transform: translateY(0) rotate(0deg); opacity: 0.6; }
  to   { transform: translateY(-30px) rotate(180deg); opacity: 1; }
}

/* ─── CARD DE MISIONES SEMANALES ─────────────────────────────── */
#hist-misiones-card { margin: 4px 0 8px; }

.hist-mis-card {
  background: linear-gradient(135deg, #101a28 0%, #080f1a 100%);
  border: 1px solid #1e3a5a;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.hist-mis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.hist-mis-titulo {
  font-family: var(--f-ui, monospace);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #5ab4e0;
}
.hist-mis-timer {
  font-family: var(--f-ui, monospace);
  font-size: 9px;
  color: #3a7aaa;
  letter-spacing: 1px;
}
.hist-mis-lista {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hist-mis-item {
  background: rgba(30,58,90,0.3);
  border: 1px solid rgba(30,58,90,0.6);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hist-mis-item.completada {
  background: rgba(46,107,46,0.15);
  border-color: rgba(46,107,46,0.5);
}
.hist-mis-item-info { flex: 1; min-width: 0; }
.hist-mis-nombre {
  font-family: var(--f-ui, monospace);
  font-size: 10px;
  font-weight: bold;
  color: #a0d4f0;
  letter-spacing: 0.5px;
}
.hist-mis-desc {
  font-family: var(--f-body, serif);
  font-size: 9px;
  color: #5a8aaa;
  margin-top: 1px;
}
.hist-mis-barra-wrap {
  height: 4px;
  background: rgba(30,58,90,0.6);
  border-radius: 2px;
  margin-top: 5px;
  overflow: hidden;
}
.hist-mis-barra {
  height: 100%;
  background: linear-gradient(90deg, #2a7ab0, #5ab4e0);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.hist-mis-item.completada .hist-mis-barra { background: linear-gradient(90deg, #2e6b2e, #7ed856); }
.hist-mis-recomp {
  font-family: var(--f-ui, monospace);
  font-size: 9px;
  color: #c8a84b;
  flex-shrink: 0;
  text-align: right;
}
.hist-mis-check {
  font-size: 14px;
  flex-shrink: 0;
  opacity: 0.35;
}
.hist-mis-item.completada .hist-mis-check { opacity: 1; }

/* ── features_extra.css ── */
/* ══════════════════════════════════════════════════════════════
   features_extra.css — Espectador · Replay · 2v2 Pasar y Jugar
   ══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   VARIABLES LOCALES (hereda del tema principal)
   ────────────────────────────────────────────────────────────── */
:root {
  --ext-radius:   12px;
  --ext-shadow:   0 8px 32px rgba(0,0,0,.55);
  --ext-blur:     blur(6px);
  --ext-z-banner: 180;
  --ext-z-overlay: 300;
  --ext-z-setup:   350;
}

/* ══════════════════════════════════════════════════════════════
   1. MODO ESPECTADOR
   ══════════════════════════════════════════════════════════════ */

/* Banner flotante sobre la mesa */
#ext-espectador-banner {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: var(--ext-z-banner);
  background: rgba(15, 30, 60, 0.92);
  border: 1px solid rgba(100, 170, 255, 0.4);
  border-radius: var(--ext-radius);
  box-shadow: var(--ext-shadow);
  backdrop-filter: var(--ext-blur);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  opacity: 0;
  max-width: 94vw;
}

#ext-espectador-banner.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.ext-esp-title {
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #6ab4f5;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ext-esp-score {
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  background: rgba(106, 180, 245, 0.18);
  border-radius: 8px;
  padding: 2px 10px;
  min-width: 60px;
  text-align: center;
}

.ext-esp-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ext-esp-lbl {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}

.ext-esp-vel {
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid rgba(106,180,245,.35);
  background: transparent;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  font-family: inherit;
}

.ext-esp-vel:hover {
  background: rgba(106,180,245,.15);
  color: #fff;
}

.ext-esp-vel.active {
  background: rgba(106,180,245,.28);
  border-color: #6ab4f5;
  color: #fff;
  font-weight: 700;
}

.ext-esp-control-btn {
  font-size: 0.78rem;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(245,197,24,.6);
  background: rgba(245,197,24,.12);
  color: #f5c518;
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: .04em;
  transition: background .2s, transform .15s;
  white-space: nowrap;
}

.ext-esp-control-btn:hover {
  background: rgba(245,197,24,.25);
  transform: scale(1.04);
}

/* En modo espectador: borde sutil sobre la mesa para recordarlo */
.modo-espectador #mesa {
  outline: 2px solid rgba(106,180,245,.25);
  outline-offset: -2px;
}

/* Botón en el menú principal */
.ext-espectador-menu-btn {
  border-color: rgba(106,180,245,.3) !important;
}

.ext-espectador-menu-btn .mm-btn-icon {
  font-size: 1.3rem;
}


/* ══════════════════════════════════════════════════════════════
   2. REPLAY DE LA MANO
   ══════════════════════════════════════════════════════════════ */

#ext-replay-overlay {
  position: fixed;
  right: -320px;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--ext-z-overlay);
  width: 220px;
  background: rgba(10, 22, 45, 0.95);
  border: 1px solid rgba(106,180,245,.35);
  border-radius: var(--ext-radius);
  box-shadow: var(--ext-shadow);
  backdrop-filter: var(--ext-blur);
  padding: 14px 12px;
  transition: right 0.4s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

#ext-replay-overlay.show {
  right: 10px;
}

.ext-replay-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ext-replay-title {
  font-family: 'Oswald', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #6ab4f5;
  text-align: center;
  letter-spacing: .08em;
  border-bottom: 1px solid rgba(106,180,245,.2);
  padding-bottom: 6px;
}

.ext-replay-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ext-replay-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.5);
}

.ext-replay-rival .ext-replay-label  { color: rgba(255, 100, 100, .7); }
.ext-replay-jugador .ext-replay-label { color: rgba(100, 245, 150, .7); }

.ext-replay-cartas {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.ext-replay-carta {
  position: relative;
  width: 48px;
  animation: ext-replay-pop 0.3s ease both;
}

@keyframes ext-replay-pop {
  from { opacity: 0; transform: translateY(10px) scale(.85); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.ext-replay-carta img {
  width: 100%;
  border-radius: 5px;
  display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.ext-replay-ronda {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 3px;
  border-radius: 3px;
  line-height: 1;
}

.ext-replay-ph {
  width: 48px;
  height: 66px;
  background: rgba(106,180,245,.15);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: rgba(255,255,255,.5);
  text-align: center;
  padding: 2px;
}

/* En mobile: el replay va abajo izquierda en vez de la derecha */
@media (max-width: 500px) {
  #ext-replay-overlay {
    right: auto;
    left: -240px;
    top: auto;
    bottom: 80px;
    transform: none;
    width: 180px;
  }

  #ext-replay-overlay.show {
    right: auto;
    left: 6px;
  }

  .ext-replay-carta { width: 38px; }
}


/* ══════════════════════════════════════════════════════════════
   3. 2 JUGADORES — PASAR Y JUGAR
   ══════════════════════════════════════════════════════════════ */

/* Setup screen */
#ext-pvp-setup {
  position: fixed;
  inset: 0;
  z-index: var(--ext-z-setup);
  background: rgba(5, 14, 30, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#ext-pvp-setup.show {
  opacity: 1;
  pointer-events: auto;
}

.ext-pvp-setup-inner {
  background: rgba(15, 30, 60, 0.98);
  border: 1px solid rgba(106,180,245,.3);
  border-radius: 18px;
  box-shadow: var(--ext-shadow);
  padding: 28px 24px;
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.ext-pvp-back {
  background: none;
  border: none;
  color: rgba(255,255,255,.55);
  font-size: 0.82rem;
  cursor: pointer;
  align-self: flex-start;
  padding: 0;
  font-family: inherit;
  transition: color .2s;
}

.ext-pvp-back:hover { color: #fff; }

.ext-pvp-setup-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  letter-spacing: .05em;
}

.ext-pvp-setup-sub {
  font-size: 0.82rem;
  color: rgba(255,255,255,.5);
  text-align: center;
}

.ext-pvp-setup-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ext-pvp-setup-field label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(106,180,245,.85);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ext-pvp-setup-field input {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(106,180,245,.3);
  border-radius: 8px;
  color: #fff;
  font-size: 1rem;
  padding: 10px 12px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s, background .2s;
}

.ext-pvp-setup-field input:focus {
  border-color: #6ab4f5;
  background: rgba(106,180,245,.1);
}

.ext-pvp-setup-nota {
  font-size: 0.73rem;
  color: rgba(245,197,24,.7);
  background: rgba(245,197,24,.07);
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.5;
}

.ext-pvp-iniciar {
  background: linear-gradient(135deg, #1a6b3a, #28a05a);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 13px;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
  margin-top: 4px;
}

.ext-pvp-iniciar:hover {
  opacity: .9;
  transform: scale(1.02);
}

/* Overlay pantalla negra "pasá el celu" */
#ext-pvp-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--ext-z-overlay);
  background: rgba(3, 8, 20, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#ext-pvp-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.ext-pvp-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px;
  max-width: 320px;
  text-align: center;
}

.ext-pvp-icon {
  font-size: 3rem;
  animation: ext-pvp-shake 1.2s ease-in-out infinite;
}

@keyframes ext-pvp-shake {
  0%, 100% { transform: rotate(-6deg); }
  50%       { transform: rotate(6deg); }
}

.ext-pvp-msg {
  font-family: 'Oswald', sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .03em;
  line-height: 1.2;
}

#ext-pvp-overlay .ext-pvp-sub {
  font-size: 0.82rem;
  color: rgba(255,255,255,.45);
  line-height: 1.5;
}

.ext-pvp-btn {
  background: linear-gradient(135deg, #1a6b3a, #28a05a);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 14px 28px;
  cursor: pointer;
  transition: transform .15s, opacity .2s;
  width: 100%;
  margin-top: 4px;
}

.ext-pvp-btn:hover {
  transform: scale(1.03);
  opacity: .9;
}

.ext-pvp-salir {
  background: none;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  color: rgba(255,255,255,.4);
  font-size: 0.75rem;
  padding: 7px 16px;
  cursor: pointer;
  font-family: inherit;
  transition: color .2s, border-color .2s;
}

.ext-pvp-salir:hover {
  color: #fff;
  border-color: rgba(255,255,255,.4);
}

/* Banner de turno sobre la mesa */
#ext-pvp-banner {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  z-index: var(--ext-z-banner);
  background: rgba(15, 30, 60, 0.9);
  border: 1px solid rgba(106,180,245,.35);
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,.45);
  backdrop-filter: var(--ext-blur);
  padding: 7px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

#ext-pvp-banner.show {
  transform: translateX(-50%) translateY(0);
}

.ext-pvp-turno-ico { font-size: 1rem; }

.ext-pvp-turno-txt {
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* Cartas del rival habilitadas para J2: aspecto jugable */
.pvp-rival-carta {
  cursor: pointer !important;
  transition: transform .15s, box-shadow .15s !important;
}

.pvp-rival-carta:hover {
  transform: translateY(-10px) scale(1.06) !important;
  box-shadow: 0 12px 28px rgba(106,180,245,.45) !important;
  z-index: 10 !important;
}

/* Botón en el menú principal */
.ext-pvp-menu-btn {
  border-color: rgba(40, 160, 90, .3) !important;
}

.ext-pvp-menu-btn .mm-btn-icon {
  font-size: 1.3rem;
}


/* ── features_adaptive.css ── */
/* ══════════════════════════════════════════════════════════════
   features_adaptive.css — Dificultad Adaptativa + Frases de Provocación
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   BADGE DE DIFICULTAD ADAPTATIVA
   ───────────────────────────────────────────────────────────── */
#ext-adaptive-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 40;
  font-size: 18px;
  line-height: 1;
  /* Pill semitransparente */
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 4px 8px;
  cursor: default;
  user-select: none;
  /* Sombra suave */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  /* Transición de opacidad */
  transition: opacity 0.3s ease, transform 0.2s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#ext-adaptive-badge:hover {
  opacity: 0.85;
  transform: scale(1.08);
}

/* Pulso al cambiar de nivel */
@keyframes ext-badge-pulse-anim {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35); }
  60%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

#ext-adaptive-badge.ext-badge-pulse {
  animation: ext-badge-pulse-anim 0.5s ease-out;
}

/* Colores sutiles según nivel */
#ext-adaptive-badge[data-nivel="facil"] {
  border-color: rgba(72, 200, 100, 0.4);
  box-shadow: 0 2px 10px rgba(72, 200, 100, 0.25);
}
#ext-adaptive-badge[data-nivel="dificil"] {
  border-color: rgba(240, 80, 80, 0.4);
  box-shadow: 0 2px 10px rgba(240, 80, 80, 0.25);
}

/* ─────────────────────────────────────────────────────────────
   PANEL DE FRASES DEL JUGADOR
   ───────────────────────────────────────────────────────────── */
.ext-frases-panel {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 35;
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
  /* Fondo semitransparente estilo HUD */
  background: rgba(0, 0, 0, 0.50);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 28px;
  padding: 6px 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  /* Aparece con fade */
  animation: ext-panel-fadein 0.4s ease;
}

@keyframes ext-panel-fadein {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);   }
}

.ext-frase-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  color: white;
  padding: 0;
  outline: none;
  flex-shrink: 0;
  /* Sombra interior sutil */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

.ext-frase-btn:hover {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.35);
  transform: scale(1.15) translateY(-2px);
}

.ext-frase-btn:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.12);
}

/* Shake cuando está en cooldown */
@keyframes ext-btn-blocked {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-5px); }
  40%  { transform: translateX(5px); }
  60%  { transform: translateX(-3px); }
  80%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

.ext-frase-btn--blocked {
  animation: ext-btn-blocked 0.35s ease;
  border-color: rgba(255, 100, 100, 0.5) !important;
}

/* ─────────────────────────────────────────────────────────────
   BURBUJAS DE FRASES (estilo camiseta de fútbol)
   ───────────────────────────────────────────────────────────── */
.ext-frase-bubble {
  position: absolute;
  z-index: 45;
  max-width: 220px;
  padding: 8px 14px 8px 10px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  /* Sombra pronunciada */
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
  /* Oculta por defecto */
  opacity: 0;
  transform: translateY(10px) scale(0.92);
  transition: opacity 0.25s ease, transform 0.25s ease;
  /* Fuente del sistema con fallback camiseta */
  font-family: var(--f-body, 'Arial Rounded MT Bold', Arial, sans-serif);
  letter-spacing: 0.01em;
}

/* Aparece */
.ext-frase-bubble.ext-frase-show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Desaparece */
.ext-frase-bubble.ext-frase-hide {
  opacity: 0;
  transform: translateY(-8px) scale(0.94);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Avatar emoji dentro de la burbuja */
.ext-frase-avatar {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

.ext-frase-texto {
  flex: 1;
  color: inherit;
}

/* ── Burbuja del JUGADOR (verde, abajo-izquierda) ── */
#ext-frase-bubble-j {
  bottom: 120px;
  left: 18px;
  background: linear-gradient(135deg, #1a7a35, #239049);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-bottom-left-radius: 4px;
}

/* Rabito izquierdo */
#ext-frase-bubble-j::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 18px;
  border-width: 10px 8px 0 0;
  border-style: solid;
  border-color: #1a7a35 transparent transparent transparent;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
}

/* ── Burbuja de la IA / RIVAL (naranja-rojo, arriba-derecha) ── */
#ext-frase-bubble-r {
  top: 120px;
  right: 18px;
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.20);
  border-top-right-radius: 4px;
}

/* Rabito derecho */
#ext-frase-bubble-r::after {
  content: '';
  position: absolute;
  top: -10px;
  right: 18px;
  border-width: 0 0 10px 8px;
  border-style: solid;
  border-color: transparent transparent #c0392b transparent;
  filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.3));
}

/* ─────────────────────────────────────────────────────────────
   PERFIL DT — línea de dificultad actual
   ───────────────────────────────────────────────────────────── */
#ext-perfil-dificultad {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — pantallas pequeñas
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ext-frases-panel {
    gap: 4px;
    padding: 5px 8px;
    bottom: 10px;
  }

  .ext-frase-btn {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  .ext-frase-bubble {
    max-width: 170px;
    font-size: 12px;
    padding: 6px 10px 6px 8px;
  }

  #ext-frase-bubble-j {
    bottom: 100px;
    left: 10px;
  }

  #ext-frase-bubble-r {
    top: 90px;
    right: 10px;
  }

  #ext-adaptive-badge {
    top: 6px;
    right: 8px;
    font-size: 15px;
  }
}

/* ── features_torneo_plus.css ── */
/* ============================================================
   features_torneo_plus.css — Bracket Visual + Barrida de Mesa
   ============================================================ */

/* ─── MODAL BRACKET ─────────────────────────────────────────── */
#tp-bracket-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
  padding: 12px;
}
#tp-bracket-modal.open {
  display: flex;
}

#tp-bracket-box {
  background: linear-gradient(160deg, #0a1628 0%, #1a2d4f 100%);
  border: 2px solid #f5c518;
  border-radius: 18px;
  width: min(820px, 100%);
  max-height: 96vh;
  overflow-y: auto;
  padding: 24px 20px 20px;
  position: relative;
  box-shadow: 0 0 60px rgba(245, 197, 24, 0.25);
}

#tp-bracket-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: #aaa;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
#tp-bracket-close:hover { color: #fff; background: rgba(255,255,255,0.1); }

#tp-bracket-titulo {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 900;
  color: #f5c518;
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
#tp-bracket-subtitulo {
  text-align: center;
  color: #8ba3c7;
  font-size: 0.82rem;
  margin-bottom: 20px;
}

/* ─── GRID DEL BRACKET ───────────────────────────────────────── */
#tp-bracket-grid {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr;
  align-items: center;
  min-height: 280px;
}

.tp-ronda-col {
  display: flex;
  flex-direction: column;
}

.tp-ronda-header {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: #f5c518;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(245,197,24,0.2);
}

.tp-ronda-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* ─── SLOT DE EQUIPO ─────────────────────────────────────────── */
.tp-slot {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 9px;
  padding: 7px 10px;
  min-height: 42px;
  transition: all 0.35s ease;
}
.tp-slot.tp-slot-jugador {
  border-color: #f5c518;
  background: rgba(245,197,24,0.08);
}
.tp-slot.tp-slot-ganador {
  border-color: #4caf50;
  background: rgba(76,175,80,0.1);
  box-shadow: 0 0 10px rgba(76,175,80,0.3);
}
.tp-slot.tp-slot-perdedor {
  opacity: 0.38;
  filter: grayscale(0.7);
}
.tp-slot.tp-slot-tbd {
  border-style: dashed;
  opacity: 0.5;
}

.tp-slot-emoji  { font-size: 1.2rem; flex-shrink: 0; }
.tp-slot-nombre {
  font-size: 0.73rem;
  font-weight: 700;
  color: #dde4f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.tp-slot-jugador .tp-slot-nombre { color: #f5c518; }

.tp-slot-badge {
  font-size: 0.58rem;
  font-weight: 800;
  padding: 2px 4px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.tp-slot-badge.badge-vos   { background: #f5c518; color: #000; }
.tp-slot-badge.badge-ia    { background: #334466; color: #8ba3c7; }
.tp-slot-badge.badge-champ { background: #4caf50; color: #fff; }

/* ─── CONECTORES ─────────────────────────────────────────────── */
.tp-connector-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  padding: 28px 0;
}
.tp-connector-col svg {
  flex: 1;
  width: 24px;
}
.tp-conn-line {
  stroke: rgba(255,255,255,0.15);
  stroke-width: 2;
  fill: none;
  transition: stroke 0.5s, stroke-width 0.4s;
}
.tp-conn-line.active {
  stroke: #4caf50;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 4px rgba(76,175,80,0.7));
}

/* ─── SLOT CAMPEÓN ───────────────────────────────────────────── */
.tp-slot-campeon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: linear-gradient(135deg, rgba(245,197,24,0.12), rgba(245,197,24,0.04));
  border: 2px solid #f5c518;
  border-radius: 13px;
  padding: 14px 12px;
  text-align: center;
  min-height: 90px;
}
.tp-campeon-trofeo {
  font-size: 2rem;
  animation: tp-trofeo-float 2s ease-in-out infinite;
}
@keyframes tp-trofeo-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
.tp-campeon-label {
  font-size: 0.6rem;
  font-weight: 800;
  color: #f5c518;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.tp-campeon-nombre {
  font-size: 0.76rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

/* ─── PREMIOS BAR ────────────────────────────────────────────── */
#tp-premios-bar {
  display: flex;
  justify-content: space-around;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.tp-premio-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.tp-premio-ronda { font-size: 0.62rem; color: #8ba3c7; text-transform: uppercase; letter-spacing: 0.5px; }
.tp-premio-pts   { font-size: 0.85rem; font-weight: 800; color: #f5c518; }

/* ─── BOTONES MODAL ──────────────────────────────────────────── */
#tp-bracket-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
}
.tp-btn {
  padding: 10px 22px;
  border-radius: 10px;
  border: none;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.tp-btn:active { transform: scale(0.96); }
.tp-btn-primary {
  background: linear-gradient(135deg, #f5c518, #e8a800);
  color: #000;
  box-shadow: 0 4px 16px rgba(245,197,24,0.35);
}
.tp-btn-primary:hover { box-shadow: 0 6px 22px rgba(245,197,24,0.5); }
.tp-btn-secondary {
  background: rgba(255,255,255,0.07);
  color: #bbb;
  border: 1.5px solid rgba(255,255,255,0.14);
}
.tp-btn-secondary:hover { background: rgba(255,255,255,0.13); color: #fff; }

/* ─── OVERLAY RESULTADO RONDA ────────────────────────────────── */
#tp-resultado-ronda {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9500;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.78);
}
#tp-resultado-ronda.show { display: flex; }

#tp-resultado-card {
  background: linear-gradient(160deg, #0a1628, #1a2d4f);
  border: 2px solid #f5c518;
  border-radius: 20px;
  padding: 30px 36px;
  text-align: center;
  animation: tp-card-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
  max-width: 320px;
  width: 90%;
}
@keyframes tp-card-pop {
  from { transform: scale(0.55); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
#tp-resultado-icono  { font-size: 3.2rem; margin-bottom: 8px; display: block; }
#tp-resultado-titulo {
  font-size: 1.3rem; font-weight: 900; color: #f5c518;
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px;
}
#tp-resultado-sub { font-size: 0.82rem; color: #8ba3c7; margin-bottom: 14px; }
#tp-resultado-pts { font-size: 1.05rem; font-weight: 800; color: #4caf50; margin-bottom: 16px; }
.tp-resultado-btn {
  padding: 10px 26px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #f5c518, #e8a800);
  color: #000; font-weight: 800; font-size: 0.88rem;
  cursor: pointer; text-transform: uppercase; letter-spacing: 1px;
}

/* ─── OVERLAY CAMPEÓN ────────────────────────────────────────── */
#tp-campeon-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9800;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.9);
  flex-direction: column;
  gap: 14px;
}
#tp-campeon-overlay.show { display: flex; }

#tp-campeon-trofeo-big {
  font-size: 5.5rem;
  animation: tp-campeon-in 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards,
             tp-trofeo-float 2s 0.7s ease-in-out infinite;
}
@keyframes tp-campeon-in {
  from { transform: scale(0) rotate(-15deg); opacity: 0; }
  to   { transform: scale(1) rotate(0);      opacity: 1; }
}
#tp-campeon-titulo {
  font-size: 1.9rem; font-weight: 900; color: #f5c518;
  letter-spacing: 3px; text-transform: uppercase;
  animation: tp-glow-pulse 1.5s ease-in-out infinite;
}
@keyframes tp-glow-pulse {
  0%,100% { text-shadow: 0 0 20px rgba(245,197,24,0.7); }
  50%      { text-shadow: 0 0 40px rgba(245,197,24,1), 0 0 60px rgba(245,197,24,0.5); }
}
#tp-campeon-sub  { color: #ccc; font-size: 0.95rem; text-align: center; }
#tp-campeon-pts  { font-size: 1.4rem; font-weight: 900; color: #4caf50; }
#tp-campeon-cerrar {
  padding: 12px 32px; border-radius: 12px; border: none;
  background: linear-gradient(135deg, #f5c518, #e8a800);
  color: #000; font-weight: 900; font-size: 0.95rem;
  cursor: pointer; text-transform: uppercase; letter-spacing: 2px; margin-top: 6px;
}

/* ─── ANIMACIONES DE BARRIDA ─────────────────────────────────── */
@keyframes tp-barrer-izq {
  0%   { transform: translateX(0)     rotate(0deg);  opacity: 1; }
  100% { transform: translateX(-220px) rotate(-18deg); opacity: 0; }
}
@keyframes tp-barrer-der {
  0%   { transform: translateX(0)    rotate(0deg); opacity: 1; }
  100% { transform: translateX(220px) rotate(18deg); opacity: 0; }
}
.tp-barrer-izq { animation: tp-barrer-izq 500ms ease-in forwards; pointer-events: none; }
.tp-barrer-der { animation: tp-barrer-der 500ms ease-in forwards; pointer-events: none; }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 580px) {
  #tp-bracket-grid { grid-template-columns: 1fr 14px 1fr 14px 1fr; }
  .tp-slot { padding: 5px 7px; gap: 4px; min-height: 36px; }
  .tp-slot-emoji { font-size: 1rem; }
  .tp-slot-nombre { font-size: 0.62rem; }
  .tp-slot-badge { display: none; }
  .tp-slot-campeon { padding: 9px 7px; min-height: 70px; }
  .tp-campeon-trofeo { font-size: 1.5rem; }
  #tp-bracket-box { padding: 14px 8px 12px; }
  #tp-bracket-titulo { font-size: 1.1rem; }
}

/* ── features_ambiente.css ── */
/* ══════════════════════════════════════════════════════════════
   features_ambiente.css — Truco GOL
   Estilos para:
     1. Botón de música de estadio
     2. Modal de cierre de temporada
     3. Card de temporada en menú
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. BOTÓN MÚSICA DE ESTADIO
   ───────────────────────────────────────────────────────────── */

.amb-btn-musica {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 50;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  line-height: 1;
}

.amb-btn-musica:hover {
  background: rgba(30, 30, 30, 0.80);
  transform: scale(1.1);
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}

.amb-btn-musica:active {
  transform: scale(0.95);
}

.amb-btn-musica.amb-activo {
  background: rgba(22, 120, 60, 0.75);
  box-shadow: 0 2px 8px rgba(22,120,60,0.6);
}

.amb-btn-musica.amb-activo:hover {
  background: rgba(22, 140, 70, 0.90);
}

/* Animación pulso cuando está activo */
@keyframes amb-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(22,120,60,0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(22,120,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,120,60,0); }
}

.amb-btn-musica.amb-activo {
  animation: amb-pulso 2.5s ease-out infinite;
}

/* ─────────────────────────────────────────────────────────────
   2. MODAL CIERRE DE TEMPORADA
   ───────────────────────────────────────────────────────────── */

.tp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.80);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
  padding: 16px;
  box-sizing: border-box;
}

.tp-modal-overlay.tp-modal-visible {
  opacity: 1;
}

.tp-modal-overlay.tp-modal-fade-out {
  opacity: 0;
  pointer-events: none;
}

.tp-modal-box {
  background: linear-gradient(160deg, #1a2a14 0%, #0d1a09 100%);
  border: 2px solid #2e7d32;
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(46,125,50,0.3);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

.tp-modal-overlay.tp-modal-visible .tp-modal-box {
  transform: translateY(0) scale(1);
}

.tp-modal-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(46,125,50,0.35);
  text-align: center;
}

.tp-mes-titulo {
  font-size: 14px;
  font-weight: 700;
  color: #81c784;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Banner de premio */
.tp-premio-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  margin: 14px 14px 0;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
}

.tp-premio-campeon      { background: rgba(255,215,0,0.12);  border-color: rgba(255,215,0,0.4);  }
.tp-premio-libertadores { background: rgba(100,180,255,0.10); border-color: rgba(100,180,255,0.3); }
.tp-premio-copa         { background: rgba(180,140,80,0.12);  border-color: rgba(180,140,80,0.35); }
.tp-premio-permanencia  { background: rgba(80,180,80,0.10);   border-color: rgba(80,180,80,0.3);  }
.tp-premio-descenso     { background: rgba(200,60,60,0.10);   border-color: rgba(200,60,60,0.3);  }

.tp-premio-emoji {
  font-size: 36px;
  line-height: 1;
  flex-shrink: 0;
}

.tp-premio-texto {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tp-premio-texto strong {
  font-size: 15px;
  color: #e8f5e9;
  font-weight: 700;
  line-height: 1.2;
}

.tp-premio-texto span {
  font-size: 13px;
  color: #a5d6a7;
  font-weight: 500;
}

/* Tabla de posiciones */
.tp-tabla-wrap {
  padding: 14px 14px 6px;
}

.tp-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tp-tabla thead tr {
  border-bottom: 1px solid rgba(46,125,50,0.4);
}

.tp-tabla th {
  color: #66bb6a;
  font-weight: 600;
  text-align: left;
  padding: 6px 8px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tp-tabla td {
  padding: 7px 8px;
  color: #c8e6c9;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.tp-tabla tbody tr:last-child td {
  border-bottom: none;
}

.tp-tabla tbody tr:hover td {
  background: rgba(255,255,255,0.04);
}

/* Fila del jugador destacada */
.tp-fila-jugador td {
  background: rgba(46,125,50,0.18) !important;
  color: #e8f5e9 !important;
  font-weight: 600;
}

/* Celdas especiales */
.tp-td-pos {
  width: 28px;
  text-align: center;
  font-weight: 700;
  color: #888;
}

.tp-pos-1 { color: #ffd700 !important; }
.tp-pos-2 { color: #c0c0c0 !important; }
.tp-pos-3 { color: #cd7f32 !important; }

.tp-td-nombre { font-weight: 500; }

.tp-td-num,
.tp-td-pct {
  text-align: center;
  color: #a5d6a7;
  width: 36px;
}

.tp-td-pct {
  font-weight: 700;
  color: #81c784;
}

/* Footer del modal */
.tp-modal-footer {
  padding: 14px 20px 20px;
  text-align: center;
  border-top: 1px solid rgba(46,125,50,0.25);
  margin-top: 8px;
}

.tp-nueva-temp {
  font-size: 13px;
  color: #81c784;
  margin: 0 0 12px;
}

.tp-btn-cerrar {
  background: #2e7d32;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 32px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  letter-spacing: 0.04em;
}

.tp-btn-cerrar:hover {
  background: #388e3c;
  transform: translateY(-1px);
}

.tp-btn-cerrar:active {
  transform: translateY(0);
}

/* ─────────────────────────────────────────────────────────────
   3. CARD DE TEMPORADA EN MENÚ
   ───────────────────────────────────────────────────────────── */

.tp-card-temporada {
  background: linear-gradient(135deg, rgba(20,40,15,0.9) 0%, rgba(10,25,8,0.95) 100%);
  border: 1px solid rgba(46,125,50,0.45);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 12px auto;
  max-width: 360px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  font-family: inherit;
}

.tp-card-titulo {
  font-size: 12px;
  font-weight: 700;
  color: #66bb6a;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 10px;
}

.tp-card-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.tp-card-stats span {
  font-size: 12px;
  color: #a5d6a7;
}

.tp-card-stats strong {
  color: #e8f5e9;
  font-weight: 700;
}

.tp-card-dias {
  font-size: 11px;
  color: #81c784;
  margin-bottom: 5px;
  opacity: 0.85;
}

.tp-card-proyeccion {
  font-size: 12px;
  color: #c8e6c9;
  font-style: italic;
  opacity: 0.9;
}

/* Responsive — pantallas chicas */
@media (max-width: 480px) {
  .tp-modal-box {
    max-height: 85vh;
  }

  .tp-tabla th,
  .tp-tabla td {
    padding: 5px 5px;
    font-size: 11px;
  }

  .tp-premio-emoji {
    font-size: 28px;
  }

  .tp-premio-texto strong {
    font-size: 13px;
  }

  .amb-btn-musica {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
}

/* ── features_visual.css ── */
/* ══════════════════════════════════════════════════════════════
   features_visual.css  —  Truco GOL
   Feature 1: Animación reparto de cartas
   Feature 2: Skin futbolistas (badge overlay)
   Feature 3: Efectos Golazo
   Feature 4: Sponsors
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   FEATURE 1: REPARTO DE CARTAS
   ───────────────────────────────────────────── */
@keyframes dealCard {
  from {
    transform: translate(var(--deal-x, 0px), var(--deal-y, -220px)) rotate(-20deg) scale(0.3);
    opacity: 0;
  }
  to {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
}

.carta-dealt {
  animation: dealCard 350ms ease-out forwards;
}

/* ─────────────────────────────────────────────
   FEATURE 2: SKIN FUTBOLISTAS
   ───────────────────────────────────────────── */
.fv-futbolista-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-height: 28px;
  border-radius: 6px;
  padding: 2px 3px;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
  z-index: 10;
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(2px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  opacity: 0.92;
  transition: opacity 0.2s;
}

.fv-futbolista-badge .fv-fb-emoji {
  font-size: 13px;
  display: block;
}

.fv-futbolista-badge .fv-fb-nombre {
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #fff;
  text-shadow: 0 0 3px rgba(0,0,0,0.8);
  white-space: nowrap;
  display: block;
  margin-top: 1px;
}

/* Las cartas necesitan position:relative para que el badge se posicione */
#player-hand .card,
#played-row .card {
  position: relative;
}

/* ─────────────────────────────────────────────
   FEATURE 3: EFECTOS GOLAZO
   ───────────────────────────────────────────── */

/* Flash blanco */
#fv-golazo-flash {
  position: fixed;
  inset: 0;
  background: #fff;
  pointer-events: none;
  z-index: 9000;
  opacity: 0;
}

@keyframes fvFlash {
  0%   { opacity: 0; }
  20%  { opacity: 0.85; }
  100% { opacity: 0; }
}

/* Texto GOLAZO */
@keyframes golazoPop {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(-10deg); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.3) rotate(2deg); opacity: 1; }
  80%  { transform: translate(-50%, -50%) scale(0.95) rotate(-1deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}

@keyframes golazoPop_out {
  from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  to   { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

#fv-golazo-texto {
  position: fixed;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-family: 'Bebas Neue', 'Arial Black', sans-serif;
  font-size: clamp(56px, 14vw, 110px);
  font-weight: 900;
  color: #ffd700;
  text-shadow:
    0 0 20px rgba(255, 200, 0, 0.9),
    0 0 40px rgba(255, 140, 0, 0.7),
    3px 3px 0 #c8800a,
    -3px -3px 0 #c8800a;
  letter-spacing: 4px;
  pointer-events: none;
  z-index: 9100;
  opacity: 0;
  white-space: nowrap;
  user-select: none;
}

/* Rayos de luz desde esquinas */
#fv-golazo-rayos {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8900;
  overflow: hidden;
}

.fv-rayo {
  position: absolute;
  width: 50%;
  height: 50%;
  opacity: 0;
}
.fv-rayo:nth-child(1) {
  top: 0; left: 0;
  background: linear-gradient(135deg, rgba(255,220,50,0.5) 0%, transparent 65%);
  transform-origin: 100% 100%;
}
.fv-rayo:nth-child(2) {
  top: 0; right: 0;
  background: linear-gradient(225deg, rgba(255,220,50,0.5) 0%, transparent 65%);
  transform-origin: 0% 100%;
}
.fv-rayo:nth-child(3) {
  bottom: 0; left: 0;
  background: linear-gradient(45deg, rgba(255,220,50,0.5) 0%, transparent 65%);
  transform-origin: 100% 0%;
}
.fv-rayo:nth-child(4) {
  bottom: 0; right: 0;
  background: linear-gradient(315deg, rgba(255,220,50,0.5) 0%, transparent 65%);
  transform-origin: 0% 0%;
}

@keyframes rayoExpand {
  0%   { transform: scale(0); opacity: 0; }
  40%  { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1); opacity: 0; }
}

/* Confetti */
.fv-confetti {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 9050;
  top: -10px;
}

@keyframes confettiFall {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(100vh) translateX(var(--cx, 0px)) rotate(var(--cr, 360deg)); opacity: 0; }
}

/* Shake de mesa */
@keyframes mesaShake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px) rotate(-0.7deg); }
  40%       { transform: translateX(8px) rotate(0.7deg); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

.fv-golazo-shake {
  animation: mesaShake 300ms ease-in-out !important;
}

/* ─────────────────────────────────────────────
   FEATURE 4: SPONSORS
   ───────────────────────────────────────────── */

/* Modal de sponsors */
#fv-sponsors-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 8000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
}

#fv-sponsors-modal.show {
  display: flex;
}

.fv-sponsors-box {
  background: linear-gradient(160deg, #1a2535 0%, #0f1920 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 20px;
  width: min(520px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}

.fv-sponsors-box h2 {
  text-align: center;
  color: #ffd700;
  font-family: 'Bebas Neue', 'Arial Black', sans-serif;
  font-size: 28px;
  letter-spacing: 2px;
  margin: 0 0 6px;
}

.fv-sponsors-subtitle {
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  margin-bottom: 16px;
}

.fv-sponsors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.fv-sponsor-card {
  border-radius: 12px;
  padding: 14px 12px;
  border: 2px solid rgba(255,255,255,0.1);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  background: rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
}

.fv-sponsor-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.fv-sponsor-card.activo {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.1);
}

.fv-sponsor-card.vencido {
  opacity: 0.55;
  border-color: rgba(255,255,255,0.06);
}

.fv-sponsor-logo {
  font-size: 26px;
  margin-bottom: 6px;
  display: block;
}

.fv-sponsor-nombre {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 3px;
}

.fv-sponsor-desc {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
}

.fv-sponsor-bonus {
  font-size: 11px;
  color: #ffd700;
  font-weight: 600;
  background: rgba(255,215,0,0.1);
  border-radius: 4px;
  padding: 3px 6px;
  margin-bottom: 10px;
  display: inline-block;
}

.fv-sponsor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.fv-sponsor-costo {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

.fv-sponsor-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.fv-sponsor-btn:active { transform: scale(0.95); }

.fv-sponsor-btn.fichar {
  background: linear-gradient(135deg, #ffd700, #f0a500);
  color: #000;
}

.fv-sponsor-btn.activo-btn {
  background: #4caf50;
  color: #fff;
  cursor: default;
}

.fv-sponsor-btn.vencido-btn {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.4);
  cursor: default;
}

/* Banner sponsor en la mesa */
#fv-sponsor-banner {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 5px 9px;
  display: none;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #fff;
  font-weight: 600;
  z-index: 200;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

#fv-sponsor-banner.visible {
  display: flex;
}

#fv-sponsor-banner .fv-banner-logo {
  font-size: 14px;
}

#fv-sponsor-banner .fv-banner-nombre {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Shimmer del banner cada 8s */
@keyframes fvBannerShimmer {
  0%, 85%, 100% { box-shadow: none; border-color: rgba(255,255,255,0.15); }
  90% { box-shadow: 0 0 10px 2px rgba(255,215,0,0.5); border-color: rgba(255,215,0,0.5); }
}

#fv-sponsor-banner.visible {
  display: flex;
  animation: fvBannerShimmer 8s ease-in-out infinite;
}

/* Overlay animación de firma de contrato */
#fv-contrato-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9500;
  pointer-events: none;
  background: rgba(0,0,0,0.5);
}

@keyframes papelCae {
  0%   { transform: translateY(-120px) rotate(-8deg); opacity: 0; }
  60%  { transform: translateY(0) rotate(2deg); opacity: 1; }
  80%  { transform: translateY(0) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}

@keyframes selloEstampa {
  0%   { transform: scale(3); opacity: 0; }
  50%  { transform: scale(1.1); opacity: 1; }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); opacity: 1; }
}

.fv-contrato-papel {
  background: #fffde7;
  border: 2px solid #c8a000;
  border-radius: 8px;
  padding: 28px 36px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: papelCae 400ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.fv-contrato-papel h3 {
  font-family: 'Bebas Neue', 'Arial Black', sans-serif;
  font-size: 22px;
  color: #1a1a1a;
  margin: 0 0 8px;
  letter-spacing: 1px;
}

.fv-contrato-logo {
  font-size: 36px;
  display: block;
  margin-bottom: 6px;
}

.fv-contrato-nombre {
  font-size: 16px;
  font-weight: 800;
  color: #333;
  margin-bottom: 4px;
}

.fv-contrato-bonus {
  font-size: 12px;
  color: #666;
  margin-bottom: 14px;
}

.fv-contrato-sello {
  font-size: 48px;
  display: block;
  opacity: 0;
  margin: 0 auto;
}

.fv-contrato-sello.stamping {
  animation: selloEstampa 400ms ease-out 350ms forwards;
}

/* Botón SPONSORS en el menú */
.fv-sponsors-menu-btn {
  background: linear-gradient(135deg, #1a3a1a, #2a5a2a);
  border: 1px solid rgba(76, 175, 80, 0.4);
  color: #7dff85;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  width: 100%;
  margin-top: 6px;
  text-align: center;
}

.fv-sponsors-menu-btn:hover {
  background: linear-gradient(135deg, #2a5a2a, #3a7a3a);
  transform: translateY(-1px);
}

/* Setting row para skin de futbolistas (inyectado en ajustes) */
.fv-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.fv-setting-lbl {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}

.fv-setting-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}

.fv-toggle {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: rgba(255,255,255,0.15);
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

.fv-toggle.on {
  background: #4caf50;
}

.fv-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.fv-toggle.on::after {
  transform: translateX(18px);
}

/* ── features_modos.css ── */
/* features_modos.css
   Estilos para: Contrarreloj, Apuestas PT, Modo Entrenamiento */

/* ─────────────────────────────────────────────────
   TOASTS GENÉRICOS
───────────────────────────────────────────────── */
.fm-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 22px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.fm-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.fm-toast-verde   { background: #2ecc71; color: #fff; }
.fm-toast-rojo    { background: #e63946; color: #fff; }
.fm-toast-neutro  { background: rgba(40,40,60,0.92); color: #e0e0e0; border: 1px solid rgba(255,255,255,0.12); }

/* ─────────────────────────────────────────────────
   BADGES ON/OFF (usados en botones de modos)
───────────────────────────────────────────────── */
.fm-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.5px;
}
.fm-badge.on  { background: #2ecc71; color: #fff; }
.fm-badge.off { background: rgba(255,255,255,0.15); color: #aaa; }

/* ─────────────────────────────────────────────────
   PANEL FLOTANTE DE MODOS (si no hay menú externo)
───────────────────────────────────────────────── */
.fm-modos-panel {
  position: fixed;
  bottom: 130px;
  right: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  z-index: 800;
}
/* Lista de modos: colapsada por defecto, crece al abrir */
.fm-modos-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  max-height: 0;
  opacity: 0;
  transform: translateY(8px) scale(0.92);
  transform-origin: bottom right;
  pointer-events: none;
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.2s ease, transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.fm-modos-panel.abierto .fm-modos-lista {
  max-height: 220px;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* Botón chico que despliega los modos */
.fm-modos-toggle {
  background: rgba(20, 20, 40, 0.88);
  border: 1px solid rgba(255,255,255,0.18);
  color: #d0d0e0;
  border-radius: 18px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  transition: background 0.2s, transform 0.15s;
}
.fm-modos-toggle:hover { background: rgba(40,40,80,0.95); transform: scale(1.04); }
.fm-modos-panel.abierto .fm-modos-toggle { background: rgba(60,40,40,0.92); }
.fm-modo-btn {
  background: rgba(20, 20, 40, 0.88);
  border: 1px solid rgba(255,255,255,0.14);
  color: #d0d0e0;
  border-radius: 18px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  letter-spacing: 0.4px;
}
.fm-modo-btn:hover  { background: rgba(40,40,80,0.95); transform: scale(1.04); }
.fm-modo-btn.activo { border-color: #2ecc71; color: #2ecc71; }

/* ─────────────────────────────────────────────────
   FEATURE 1 — CONTRARRELOJ: barra de timer
───────────────────────────────────────────────── */
#fm-timer-container {
  width: 100%;
  padding: 4px 8px 2px;
  box-sizing: border-box;
}
#fm-timer-track {
  position: relative;
  width: 100%;
  height: 14px;
  background: rgba(255,255,255,0.1);
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
#fm-timer-bar {
  height: 100%;
  width: 100%;
  background: #2ecc71;
  border-radius: 7px;
  transition: width 0.9s linear, background 0.4s ease;
}
#fm-timer-bar.urgente {
  animation: fm-pulso 0.4s ease-in-out infinite alternate;
}
@keyframes fm-pulso {
  from { opacity: 1; }
  to   { opacity: 0.55; }
}
#fm-timer-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  pointer-events: none;
  line-height: 1;
}

/* ─────────────────────────────────────────────────
   FEATURE 2 — APUESTAS: modal overlay
───────────────────────────────────────────────── */
.fm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  backdrop-filter: blur(4px);
}
.fm-modal-overlay.show {
  opacity: 1;
  pointer-events: all;
}

.fm-modal-card {
  position: relative;
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 28px 24px 24px;
  max-width: 380px;
  width: 92vw;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
  animation: fm-modal-in 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes fm-modal-in {
  from { transform: scale(0.85) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.fm-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: #888;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 0.2s;
}
.fm-modal-close:hover { color: #fff; }

/* Card de apuesta */
.fm-apuesta-card { text-align: center; }
.fm-apuesta-icon {
  font-size: 48px;
  margin-bottom: 8px;
  animation: fm-money-drop 0.6s ease 0.1s both;
}
@keyframes fm-money-drop {
  from { transform: translateY(-30px) rotate(-10deg); opacity: 0; }
  to   { transform: translateY(0) rotate(0deg); opacity: 1; }
}
.fm-apuesta-titulo {
  font-size: 18px;
  font-weight: 800;
  color: #f0d060;
  margin: 0 0 6px;
  letter-spacing: 1px;
}
.fm-apuesta-saldo {
  font-size: 13px;
  color: #a0a0c0;
  margin: 0 0 16px;
}
.fm-apuesta-saldo strong { color: #2ecc71; font-size: 16px; }

.fm-apuesta-opciones {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.fm-apuesta-btn {
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.15);
  color: #ccc;
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
  min-width: 56px;
  line-height: 1.3;
}
.fm-apuesta-btn:hover:not(:disabled) {
  background: rgba(240,208,96,0.15);
  border-color: #f0d060;
  color: #f0d060;
  transform: scale(1.05);
}
.fm-apuesta-btn.selected {
  background: rgba(240,208,96,0.22);
  border-color: #f0d060;
  color: #f0d060;
  transform: scale(1.05);
}
.fm-apuesta-btn.sin-saldo,
.fm-apuesta-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}
.fm-apuesta-btn small { font-size: 9px; font-weight: 600; opacity: 0.7; }

.fm-apuesta-info {
  font-size: 12px;
  color: #888;
  margin: 0 0 16px;
}
.fm-apuesta-info strong { color: #ccc; }

.fm-apuesta-confirmar {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #f0d060, #e0a020);
  color: #1a1200;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(240,208,96,0.35);
}
.fm-apuesta-confirmar:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(240,208,96,0.5);
}

/* Banner de apuesta activa en mesa */
.fm-apuesta-banner {
  display: none;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(240,208,96,0.2);
  border: 1px solid rgba(240,208,96,0.5);
  color: #f0d060;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  z-index: 100;
  white-space: nowrap;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────
   FEATURE 3 — ENTRENAMIENTO: banner y cartas
───────────────────────────────────────────────── */
.fm-entrena-banner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(230,57,70,0.92);
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  z-index: 7500;
  letter-spacing: 0.5px;
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.fm-entrena-banner.show { display: block; }

/* Cartas del rival reveladas en modo entrenamiento */
.fm-carta-rival-revelada {
  border: 2px dashed #f4a261 !important;
  border-radius: 8px;
  position: relative;
  background: rgba(244, 162, 97, 0.12) !important;
}
.fm-carta-label {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(244,162,97,0.9);
  color: #1a0800;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  letter-spacing: 0.3px;
}

/* ─────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .fm-modos-panel { bottom: 104px; right: 6px; }
  .fm-modo-btn    { font-size: 10px; padding: 6px 10px; }
  .fm-modos-toggle { font-size: 10px; padding: 6px 10px; }
  .fm-modal-card  { padding: 20px 16px 18px; }
  .fm-apuesta-opciones { gap: 4px; }
  .fm-apuesta-btn { min-width: 46px; padding: 6px 6px; }
  .fm-entrena-banner { font-size: 10px; padding: 4px 8px; }
}

/* ── features_contenido.css ── */
/* features_contenido.css
   Copa del Mundo | Récords | Estadísticas Avanzadas
   ─────────────────────────────────────────────────── */

/* ── Modales base ─────────────────────────────────────────────────────────── */
.fc-modal-fullscreen .modal-box {
  max-width: 600px;
  width: 96%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 20px 16px 24px;
}

.fc-modal-box {
  max-width: 520px;
  width: 96%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px 16px 24px;
}

.fc-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(255,255,255,0.08);
  border: none;
  color: #ccc;
  font-size: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.2s;
}
.fc-modal-close:hover { background: rgba(255,255,255,0.18); }

.fc-modal-titulo {
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  margin: 0 0 14px;
  letter-spacing: 1px;
}

/* ── Botones ──────────────────────────────────────────────────────────────── */
.fc-btn-primario {
  display: block;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 10px 0 6px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.fc-btn-primario:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(76,175,80,0.4); }

.fc-btn-secundario {
  display: block;
  width: 100%;
  padding: 10px;
  background: rgba(255,255,255,0.07);
  color: #bbb;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.2s;
}
.fc-btn-secundario:hover { background: rgba(255,255,255,0.14); }

.fc-btn-mini {
  padding: 6px 12px;
  background: rgba(255,255,255,0.08);
  color: #ccc;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.fc-btn-mini:hover { background: rgba(255,255,255,0.16); }

/* ═══════════════════════════════════════════════════════════════════════════
   COPA DEL MUNDO
   ═══════════════════════════════════════════════════════════════════════════ */

.fc-mundial-box {
  position: relative;
  background: linear-gradient(160deg, #0a1628 0%, #0d2240 60%, #0a1628 100%);
}

.fc-mundial-header {
  text-align: center;
  padding-bottom: 16px;
}

.fc-mundial-logo {
  font-size: 52px;
  animation: fc-pulse 2s infinite;
  display: block;
  margin-bottom: 6px;
}

@keyframes fc-pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

.fc-mundial-titulo {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #FFD700;
  text-shadow: 0 0 20px rgba(255,215,0,0.4);
  margin: 0 0 6px;
}

.fc-mundial-sub {
  font-size: 12px;
  color: #888;
  margin: 0;
}

/* Selección de selecciones */
.fc-selecciones-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 4px 0 8px;
}

.fc-sel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  background: rgba(255,255,255,0.04);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
}
.fc-sel-card:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.1);
}

.fc-sel-bandera  { font-size: 32px; }
.fc-sel-nombre   { font-size: 13px; font-weight: 700; color: #fff; }
.fc-sel-himno    { font-size: 9px;  color: #666; font-style: italic; }

/* Sorteo */
.fc-sorteo-bolas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 16px 0;
}

.fc-bola {
  width: 48px;
  height: 48px;
  background: radial-gradient(circle at 35% 35%, #fff3, rgba(255,255,255,0.05));
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  animation: fc-bola-caida 0.5s ease both;
}

@keyframes fc-bola-caida {
  from { transform: translateY(-40px) scale(0.5); opacity: 0; }
  to   { transform: translateY(0)     scale(1);   opacity: 1; }
}

.fc-sorteo-rival {
  text-align: center;
  margin: 12px 0;
}
.fc-sorteo-rival p { color: #888; font-size: 12px; margin: 0 0 4px; }
.fc-rival-grande   { font-size: 28px; font-weight: 800; color: #fff; }

/* Versus */
.fc-versus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px 0 12px;
}
.fc-team        { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fc-team-flag   { font-size: 40px; }
.fc-team-name   { font-size: 12px; font-weight: 700; color: #ccc; text-align: center; }
.fc-vs          { font-size: 20px; font-weight: 900; color: #FFD700; }

.fc-fase-badge {
  display: inline-block;
  background: linear-gradient(90deg, #FFD700, #FFA000);
  color: #000;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.fc-narrativa {
  background: rgba(255,255,255,0.05);
  border-left: 3px solid #FFD700;
  padding: 10px 12px;
  font-size: 12px;
  color: #bbb;
  border-radius: 0 8px 8px 0;
  margin: 10px 0;
  font-style: italic;
  line-height: 1.5;
}

.fc-partida-acciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

/* Campeón */
.fc-campeon-screen {
  text-align: center;
  padding: 10px 0 20px;
  position: relative;
}
.fc-confetti-container {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  overflow: hidden;
}
.fc-confetti-piece {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  animation: fc-confetti-fall linear both;
}
@keyframes fc-confetti-fall {
  from { transform: translateY(0) rotate(0deg); opacity: 1; }
  to   { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

.fc-trofeo-anim {
  font-size: 72px;
  animation: fc-trofeo-bounce 0.8s ease 0.3s both;
  display: block;
}
@keyframes fc-trofeo-bounce {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.fc-campeon-bandera { font-size: 48px; margin: 6px 0; }
.fc-campeon-titulo  {
  font-size: 32px;
  font-weight: 900;
  color: #FFD700;
  text-shadow: 0 0 30px rgba(255,215,0,0.6);
  letter-spacing: 3px;
  margin: 8px 0;
  line-height: 1.1;
}
.fc-campeon-nombre  { font-size: 18px; color: #ccc; margin: 4px 0 10px; }
.fc-campeon-premio  {
  font-size: 16px;
  font-weight: 700;
  color: #4caf50;
  margin-bottom: 16px;
}

/* Eliminado */
.fc-eliminado-screen { text-align: center; padding: 20px 0; }
.fc-eliminado-icon   { font-size: 56px; margin-bottom: 10px; }
.fc-eliminado-titulo {
  font-size: 24px;
  font-weight: 900;
  color: #f44336;
  letter-spacing: 2px;
  margin: 0 0 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLA DE RÉCORDS
   ═══════════════════════════════════════════════════════════════════════════ */

.fc-records-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.fc-record-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 10px 8px;
  transition: background 0.2s;
}
.fc-record-card:hover { background: rgba(255,255,255,0.09); }

.fc-record-vacio { opacity: 0.45; }

.fc-rec-emoji {
  font-size: 22px;
  min-width: 28px;
  text-align: center;
  line-height: 1;
  padding-top: 2px;
}

.fc-rec-info { flex: 1; min-width: 0; }

.fc-rec-nombre {
  font-size: 10px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.fc-rec-valor {
  font-size: 17px;
  font-weight: 800;
  color: #FFD700;
  line-height: 1;
  margin-bottom: 2px;
}
.fc-rec-valor small { font-size: 9px; color: #888; font-weight: 400; }

.fc-rec-fecha {
  font-size: 9px;
  color: #555;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-rec-barra-wrap {
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.fc-rec-barra {
  height: 100%;
  background: linear-gradient(90deg, #4caf50, #FFD700);
  border-radius: 2px;
  transition: width 0.6s ease;
}

/* Notificación nuevo récord */
.fc-notif-record {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 2px solid #FFD700;
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(255,215,0,0.3);
}
.fc-notif-record.fc-notif-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTADÍSTICAS AVANZADAS
   ═══════════════════════════════════════════════════════════════════════════ */

.fc-stats-box {
  max-width: 640px;
  width: 97%;
  max-height: 93vh;
  overflow-y: auto;
  padding: 18px 14px 24px;
}

.fc-stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.fc-stats-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.fc-stat-pill {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 11px;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex: 1;
  text-align: center;
  min-width: 60px;
}
.fc-stat-pill strong { display: block; font-size: 18px; font-weight: 800; color: #fff; }
.fc-stat-pill.verde strong { color: #4caf50; }
.fc-stat-pill.rojo  strong { color: #f44336; }

.fc-stats-empty {
  text-align: center;
  color: #666;
  font-size: 14px;
  padding: 30px 0;
}

.fc-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.fc-chart-section {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 12px;
}

.fc-chart-full {
  grid-column: 1 / -1;
}

.fc-chart-titulo {
  font-size: 11px;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .fc-selecciones-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .fc-sel-card         { padding: 10px 4px; }
  .fc-sel-bandera      { font-size: 26px; }
  .fc-sel-nombre       { font-size: 11px; }

  .fc-records-grid     { grid-template-columns: 1fr; }

  .fc-charts-grid      { grid-template-columns: 1fr; }
  .fc-chart-full       { grid-column: 1; }
  .fc-campeon-titulo   { font-size: 24px; }
  .fc-stats-header     { flex-direction: column; align-items: flex-start; }
}

/* ── animaciones.css ── */
/* ══════════════════════════════════════════════════════════════
   ANIMACIONES.CSS — Efectos 3D de cartas para TrucoGOL
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. HOVER 3D EN MANO DEL JUGADOR
   Las cartas se levantan, inclinan y brillan según el mouse.
   ───────────────────────────────────────────────────────────── */
.player-hand .card.can-play {
  transform-style: preserve-3d;
  transition:
    transform .18s cubic-bezier(.4,0,.2,1),
    box-shadow .18s ease,
    z-index 0s;
  will-change: transform;
  position: relative;
  overflow: visible;
}

.player-hand .card.can-play:hover {
  z-index: 20;
  box-shadow:
    0 24px 48px rgba(0,0,0,.65),
    0 0 0 2px rgba(200,168,75,.55),
    0 0 30px rgba(200,168,75,.25) !important;
}

/* Mientras el mouse inclina la carta (tilt dinámico por JS), la
   transición del transform se acorta para que siga al cursor sin
   arrastre; el box-shadow conserva su suavizado. */
.player-hand .card.can-play.tilting {
  transition: transform .06s linear, box-shadow .18s ease;
  z-index: 25;
}

/* Brillo metálico que barre la carta al hacer hover */
.player-hand .card.can-play::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    125deg,
    rgba(255,255,255,.0) 0%,
    rgba(255,255,255,.5) 45%,
    rgba(255,255,255,.0) 55%,
    rgba(255,255,255,.0) 100%
  );
  background-size: 250% 100%;
  background-position: 200% 0;
  transition: background-position .4s ease;
  pointer-events: none;
  z-index: 5;
}
.player-hand .card.can-play:hover::after {
  background-position: -50% 0;
}

/* ─────────────────────────────────────────────────────────────
   2. CARTA VOLANDO — lanzar carta a la mesa
   Creada por JS con posición fija absoluta.
   ───────────────────────────────────────────────────────────── */
@keyframes cartaVuelo {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.4));
  }
  25% {
    transform:
      translate(calc(var(--dx) * .25), calc(var(--dy) * .25 - 55px))
      rotate(calc(var(--rot) * .4))
      scale(1.12);
    opacity: 1;
    filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(200,168,75,.3));
  }
  65% {
    transform:
      translate(calc(var(--dx) * .75), calc(var(--dy) * .75 - 25px))
      rotate(calc(var(--rot) * .8))
      scale(1.06);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1);
    opacity: 0;
  }
}

.carta-volando {
  position: fixed !important;
  pointer-events: none !important;
  z-index: 9998 !important;
  border-radius: var(--cr, 8px);
  overflow: hidden;
  animation: cartaVuelo var(--dur, .42s) cubic-bezier(.4,.1,.2,1) forwards;
  transform-origin: center center;
}
.carta-volando img { width: 100%; height: 100%; object-fit: fill; }

/* ─────────────────────────────────────────────────────────────
   3. CARTA ATERRIZANDO EN MESA (jugador)
   Baja desde arriba con rebote suave.
   ───────────────────────────────────────────────────────────── */
@keyframes landPlayer {
  0%   { transform: rotate(var(--rot, 2deg)) translateY(22px) scale(1.08); opacity: 0; }
  60%  { transform: rotate(var(--rot, 2deg)) translateY(-4px)  scale(1.01); opacity: 1; }
  80%  { transform: rotate(var(--rot, 2deg)) translateY(2px)   scale(.99); }
  100% { transform: rotate(var(--rot, 2deg)) translateY(0)     scale(1);   opacity: 1; }
}

.card.played.j-played.land-anim {
  animation: landPlayer .38s cubic-bezier(.4,.1,.3,1) both;
}

/* ─────────────────────────────────────────────────────────────
   4. CARTA DEL RIVAL — flip 3D al revelarse
   ───────────────────────────────────────────────────────────── */
@keyframes cardFlipReveal {
  0%   { transform: rotate(var(--rot, -3deg)) rotateY(110deg) translateY(-18px); opacity: 0; }
  45%  { opacity: .7; }
  70%  { transform: rotate(var(--rot, -3deg)) rotateY(-6deg) translateY(4px); opacity: 1; }
  85%  { transform: rotate(var(--rot, -3deg)) rotateY(2deg); }
  100% { transform: rotate(var(--rot, -3deg)) rotateY(0deg) translateY(0); opacity: 1; }
}

.card.played.r-played.land-anim {
  animation: cardFlipReveal .45s cubic-bezier(.3,.05,.2,1) both;
  transform-style: preserve-3d;
}

/* ─────────────────────────────────────────────────────────────
   5. ONDAS DE IMPACTO al caer carta en mesa
   ───────────────────────────────────────────────────────────── */
.impact-ring {
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(200,168,75,.6);
  animation: impactRing .55s ease-out forwards;
  pointer-events: none;
}
.impact-ring.ring-2 {
  animation-delay: .12s;
  border-color: rgba(200,168,75,.3);
}

@keyframes impactRing {
  0%   { transform: scale(.9); opacity: .8; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────
   6. REPARTO ANIMADO — cartas entran volando desde el mazo
   ───────────────────────────────────────────────────────────── */
@keyframes dealPlayer {
  0%   { transform: translateX(-60px) translateY(40px) rotate(-18deg) scale(.7); opacity: 0; }
  60%  { transform: translateX(4px) translateY(-5px) rotate(1deg) scale(1.04); opacity: 1; }
  80%  { transform: translateX(-2px) translateY(2px) rotate(-.5deg) scale(.99); }
  100% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); opacity: 1; }
}

@keyframes dealRival {
  0%   { transform: translateX(60px) translateY(-40px) rotate(18deg) scale(.7); opacity: 0; }
  60%  { transform: translateX(-4px) translateY(5px)  rotate(-1deg) scale(1.04); opacity: 1; }
  80%  { transform: translateX(2px)  translateY(-2px) rotate(.5deg)  scale(.99); }
  100% { transform: translateX(0)    translateY(0)    rotate(0deg)   scale(1); opacity: 1; }
}

.deal-anim       { animation: dealPlayer .38s cubic-bezier(.25,.46,.45,.94) both; }
.deal-anim-rival { animation: dealRival  .38s cubic-bezier(.25,.46,.45,.94) both; }

/* ─────────────────────────────────────────────────────────────
   7. PARTÍCULAS DE GOL — explosión al ganar ronda/mano
   ───────────────────────────────────────────────────────────── */
@keyframes particulaGol {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  80%  { opacity: .6; }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0) rotate(var(--spin, 180deg));
    opacity: 0;
  }
}

.particula-gol {
  position: fixed;
  width: var(--sz, 10px);
  height: var(--sz, 10px);
  border-radius: var(--br, 50%);
  pointer-events: none;
  z-index: 9997;
  transform-origin: center;
  animation: particulaGol var(--d, .7s) ease-out forwards;
}

/* ─────────────────────────────────────────────────────────────
   8. DESTELLO DORADO en ronda ganada — overlay flash
   ───────────────────────────────────────────────────────────── */
@keyframes golFlash {
  0%   { opacity: 0; }
  15%  { opacity: .18; }
  100% { opacity: 0; }
}

.gol-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(200,168,75,.4) 0%,
    rgba(200,168,75,.0) 70%);
  pointer-events: none;
  z-index: 9996;
  animation: golFlash .6s ease-out forwards;
}
.gol-flash.verde {
  background: radial-gradient(ellipse at center,
    rgba(39,174,96,.35) 0%,
    rgba(39,174,96,.0) 70%);
}

/* ─────────────────────────────────────────────────────────────
   9. CARTA SELECCIONADA — pulso al hacer click antes de volar
   ───────────────────────────────────────────────────────────── */
@keyframes cartaSeleccionada {
  0%   { box-shadow: 0 0 0 0 rgba(200,168,75,.6); transform: scale(1) translateY(0); }
  40%  { box-shadow: 0 0 0 8px rgba(200,168,75,.0); transform: scale(1.08) translateY(-6px); }
  100% { box-shadow: 0 0 0 0 rgba(200,168,75,.0); transform: scale(1) translateY(-60px); opacity: 0; }
}

.card.selected {
  animation: cartaSeleccionada .22s ease-in forwards !important;
  z-index: 30;
}

/* ─────────────────────────────────────────────────────────────
   10. BADGE DE RONDA — aparece con pop
   ───────────────────────────────────────────────────────────── */
@keyframes rondaBadgePop {
  0%   { transform: scale(0) translateY(4px); opacity: 0; }
  70%  { transform: scale(1.25) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.ronda-badge { animation: rondaBadgePop .3s .15s cubic-bezier(.34,1.56,.64,1) both; }

/* ══════════════════════════════════════════════════════════════
   MOTION GRAPHICS — COMPETICIONES (menú de copas + pantalla de copa)
   Entradas coreografiadas + movimiento idle. Respetan reduce-motion.
   ══════════════════════════════════════════════════════════════ */

/* Entrada: sube, aparece y asienta con un poco de rebote */
@keyframes copaEntra {
  from { opacity: 0; transform: translateY(24px) scale(.965); }
  to   { opacity: 1; transform: none; }
}

/* Pantalla de copa: cascada coreografiada de arriba hacia abajo */
#copa-screen .copa-head   { animation: copaEntra .5s  cubic-bezier(.2,.8,.3,1.05) both; }
#copa-screen .copa-jugar  { animation: copaEntra .55s .12s cubic-bezier(.2,.85,.3,1.1) both; }
#copa-screen .copa-pool   { animation: copaEntra .5s  .06s cubic-bezier(.2,.8,.3,1.05) both; }
#copa-screen .copa-bracket{ animation: copaEntra .55s .12s cubic-bezier(.2,.8,.3,1.05) both; }
#copa-screen .copa-campeon{ animation: copaEntra .6s  cubic-bezier(.2,.8,.3,1.12) both; }
#copa-screen .copa-grupo  { animation: copaEntra .55s cubic-bezier(.2,.85,.3,1.1) both; }
#copa-screen .copa-grupos .copa-grupo:nth-child(1) { animation-delay: .20s; }
#copa-screen .copa-grupos .copa-grupo:nth-child(2) { animation-delay: .28s; }
#copa-screen .copa-grupos .copa-grupo:nth-child(3) { animation-delay: .36s; }
#copa-screen .copa-grupos .copa-grupo:nth-child(4) { animation-delay: .44s; }
/* Filas de la tabla: pequeño barrido dentro de cada grupo */
#copa-screen .copa-grupo .copa-row { animation: copaEntra .4s both; }
#copa-screen .copa-grupo .copa-row:nth-child(2) { animation-delay: .30s; }
#copa-screen .copa-grupo .copa-row:nth-child(3) { animation-delay: .36s; }
#copa-screen .copa-grupo .copa-row:nth-child(4) { animation-delay: .42s; }
#copa-screen .copa-grupo .copa-row:nth-child(5) { animation-delay: .48s; }

/* Idle: el título de la copa respira con el color de la copa */
@keyframes copaTitleGlow {
  0%, 100% { text-shadow: 0 0 14px color-mix(in srgb, var(--copa-acc) 40%, transparent); }
  50%      { text-shadow: 0 0 28px color-mix(in srgb, var(--copa-acc) 75%, transparent); }
}
#copa-screen .copa-title { animation: copaTitleGlow 2.8s ease-in-out infinite; }

/* Idle: el botón "JUGAR MI PARTIDO" llama la atención con un pulso */
@keyframes copaBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
  50%      { box-shadow: 0 0 24px 2px rgba(46,204,113,.4); }
}
#copa-screen .copa-btn-jugar { animation: copaBtnPulse 1.9s ease-in-out infinite; }

/* Idle: los íconos de copa del menú laten su glow (se sienten vivos) */
@keyframes mmCopaIconBreath {
  0%, 100% { box-shadow: 0 0 0 1.5px var(--acc) inset, 0 0 22px -6px var(--acc); }
  50%      { box-shadow: 0 0 0 1.5px var(--acc) inset, 0 0 32px -1px var(--acc); }
}
.mm-btn.mm-btn-copa .mm-btn-icon { animation: mmCopaIconBreath 3s ease-in-out infinite; }

/* Accesibilidad: si el usuario pidió menos movimiento, cortamos lo idle */
@media (prefers-reduced-motion: reduce) {
  #copa-screen .copa-title,
  #copa-screen .copa-btn-jugar,
  .mm-btn.mm-btn-copa .mm-btn-icon { animation: none; }
  #copa-screen .copa-head, #copa-screen .copa-jugar, #copa-screen .copa-pool,
  #copa-screen .copa-bracket, #copa-screen .copa-campeon, #copa-screen .copa-grupo,
  #copa-screen .copa-grupo .copa-row { animation-duration: .01s; animation-delay: 0s; }
}

/* ══ Celebración de CAMPEÓN (motion graphics) ══ */
.copa-campeon { position: relative; overflow: hidden; }
.copa-campeon.gano { min-height: 232px; }
.copa-confeti-wrap { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.copa-confeti {
  position: absolute; top: -16px; left: var(--x); width: 8px; height: 13px;
  background: var(--c); border-radius: 2px; opacity: 0;
  animation: copaConfetiCae var(--d) ease-in var(--dl) infinite;
}
@keyframes copaConfetiCae {
  0%   { transform: translateY(0) rotate(0); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translateY(252px) rotate(var(--r)); opacity: 0; }
}
.copa-campeon-burst {
  position: absolute; top: 24px; left: 50%; width: 110px; height: 110px; margin-left: -55px;
  border-radius: 50%; border: 3px solid var(--copa-acc, #f5c518);
  box-shadow: 0 0 34px var(--copa-acc, #f5c518), inset 0 0 20px var(--copa-acc, #f5c518);
  pointer-events: none; animation: copaBurst 1.15s ease-out .15s both;
}
@keyframes copaBurst { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(2.7); opacity: 0; } }
.copa-campeon-esc { display: inline-block; position: relative; z-index: 1;
  animation: copaEscPop .7s cubic-bezier(.3,1.5,.5,1) both; }
.copa-campeon.gano .copa-campeon-esc {
  animation: copaEscPop .7s cubic-bezier(.3,1.5,.5,1) both, copaEscFloat 2.6s ease-in-out 1s infinite;
}
@keyframes copaEscPop { 0% { transform: scale(0) rotate(-25deg); } 60% { transform: scale(1.28) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes copaEscFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.copa-campeon.gano .copa-campeon-txt { font-size: 22px; animation: copaCampGlow 1.4s ease-in-out infinite; }
@keyframes copaCampGlow {
  0%,100% { text-shadow: 0 0 14px rgba(245,197,24,.5); transform: scale(1); }
  50%     { text-shadow: 0 0 30px rgba(245,197,24,.95); transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .copa-confeti, .copa-campeon-burst, .copa-campeon.gano .copa-campeon-esc,
  .copa-campeon.gano .copa-campeon-txt { animation: none; }
  .copa-campeon-burst { display: none; } .copa-confeti { display: none; }
}

/* ══ Entrada del menú principal en cascada (rápida, al mostrarse) ══ */
@keyframes mmNavEntra { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }
#main-menu .mm-nav > * { animation: mmNavEntra .4s cubic-bezier(.2,.8,.3,1) both; }
#main-menu .mm-nav > *:nth-child(1)  { animation-delay: .02s }
#main-menu .mm-nav > *:nth-child(2)  { animation-delay: .05s }
#main-menu .mm-nav > *:nth-child(3)  { animation-delay: .08s }
#main-menu .mm-nav > *:nth-child(4)  { animation-delay: .11s }
#main-menu .mm-nav > *:nth-child(5)  { animation-delay: .14s }
#main-menu .mm-nav > *:nth-child(6)  { animation-delay: .17s }
#main-menu .mm-nav > *:nth-child(7)  { animation-delay: .20s }
#main-menu .mm-nav > *:nth-child(8)  { animation-delay: .23s }
#main-menu .mm-nav > *:nth-child(9)  { animation-delay: .26s }
#main-menu .mm-nav > *:nth-child(10) { animation-delay: .29s }
#main-menu .mm-nav > *:nth-child(11) { animation-delay: .32s }
#main-menu .mm-nav > *:nth-child(12) { animation-delay: .35s }
#main-menu .mm-nav > *:nth-child(n+13) { animation-delay: .38s }
@media (prefers-reduced-motion: reduce) {
  #main-menu .mm-nav > * { animation-duration: .01s; animation-delay: 0s; }
}

/* ══ Motion graphics — pantalla del MUNDIAL 2026 (celeste) ══ */
#mundial-screen { --copa-acc: #3aa0ff; }
@keyframes mundialGlow { 0%,100% { text-shadow: 0 0 16px rgba(58,160,255,.4); } 50% { text-shadow: 0 0 30px rgba(58,160,255,.78); } }
#mundial-screen .ns-title { animation: copaEntra .5s cubic-bezier(.2,.8,.3,1.05) both, mundialGlow 3s ease-in-out infinite; }
#mundial-screen .ns-sub { animation: copaEntra .5s .06s cubic-bezier(.2,.8,.3,1.05) both; }
#mundial-screen #mundial-setup { animation: copaEntra .55s .1s cubic-bezier(.2,.8,.3,1.05) both; }
#mundial-screen .mundial-proximo { animation: copaEntra .55s .1s cubic-bezier(.2,.85,.3,1.1) both; }
#mundial-screen .mundial-campeon { animation: copaEntra .6s cubic-bezier(.2,.8,.3,1.12) both; }
/* Campeón del mundial: celebración */
.mundial-campeon.gano { position: relative; overflow: hidden; min-height: 172px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.mundial-camp-trofeo { font-size: 66px; line-height: 1;
  animation: copaEscPop .7s cubic-bezier(.3,1.5,.5,1) both, copaEscFloat 2.6s ease-in-out 1s infinite; }
.mundial-camp-txt { font-size: 22px; color: #ffe08a; letter-spacing: 1px; font-weight: 700;
  animation: copaCampGlow 1.4s ease-in-out infinite; }
.mundial-camp-sub { font-size: 14px; opacity: .85; }
@media (prefers-reduced-motion: reduce) {
  #mundial-screen .ns-title, .mundial-camp-trofeo, .mundial-camp-txt { animation: none; }
  #mundial-screen .ns-sub, #mundial-screen #mundial-setup, #mundial-screen .mundial-proximo,
  #mundial-screen .mundial-campeon { animation-duration: .01s; animation-delay: 0s; }
}

/* ══ Transición KICKOFF al entrar a la mesa ══ */
#kickoff-ov {
  position: fixed; inset: 0; z-index: 2000; opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background:
    radial-gradient(circle at 50% 45%, transparent 90px, rgba(255,255,255,.06) 91px, rgba(255,255,255,.06) 93px, transparent 94px),
    radial-gradient(ellipse at center, #0f4a28, #05160d);
}
#kickoff-ov.go { animation: koFade 1.05s ease forwards; }
@keyframes koFade { 0% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; } }
.ko-ball { font-size: 82px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
#kickoff-ov.go .ko-ball { animation: koBall .72s cubic-bezier(.2,.85,.3,1.2); }
@keyframes koBall {
  0%   { transform: translateX(-115vw) rotate(-540deg) scale(.5); }
  62%  { transform: translateX(0) rotate(24deg) scale(1.18); }
  100% { transform: translateX(0) rotate(0) scale(1); }
}
.ko-txt { font-family: var(--f-display,'Bebas Neue',sans-serif); font-size: 46px; letter-spacing: 4px;
  color: #f5c518; text-shadow: 0 0 26px rgba(245,197,24,.6); }
#kickoff-ov.go .ko-txt { animation: koTxt .55s .28s both cubic-bezier(.3,1.5,.5,1); }
@keyframes koTxt { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }

/* ── unified-theme.css ── */
/* ══════════════════════════════════════════════════════════════
   UNIFIED-THEME.CSS — Alinea el juego con la landing premium
   Paleta: negro base #0B0B0C · neon #00E676 · oro #D4AF37
   Solo aplica al menú/lobby, NO a la mesa de juego.
   ══════════════════════════════════════════════════════════════ */

/* ─── Tokens globales del lobby ─── */
:root {
  /* Identidad premium 2026-07: verde-noche + oro (antes gris neutro).
     Estas 3 variables tiñen modales, paneles y pantallas de toda la app. */
  --bg-base:  #050d08;
  --bg-card:  #0c1f14;
  --bg-card2: #122a1b;
  --neon:     #00E676;
  --neon-d:   #00b85e;
  --gold:     #D4AF37;
  --gold-l:   #f0cc55;
  --gold-d:   #a8882a;
  --border:   rgba(212,175,55,.35);
}

/* ─── Fondo del menú principal: negro premium, no verde ─── */
#main-menu {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,230,118,.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(212,175,55,.05) 0%, transparent 50%),
    #0B0B0C;
}

/* Apaga el CSS de cancha en el menú */
#main-menu .mm-cancha { display: none; }
#main-menu .mm-confetti span:nth-child(odd)  { background: var(--neon); opacity: .4; }
#main-menu .mm-confetti span:nth-child(even) { background: rgba(255,255,255,.3); }
#main-menu .mm-confetti span:nth-child(3n)   { background: var(--gold); }

/* ─── Logo / título ─── */

/* ─── Escudo — pulso neon ─── */
@keyframes escudoPulseNeon {
  0%,100% { filter: drop-shadow(0 0 12px rgba(0,230,118,.35)) }
  50%     { filter: drop-shadow(0 0 28px rgba(0,230,118,.65)) }
}

/* ─── Sección separadora ─── */
.mm-seccion {
  width: 100%; display: flex; align-items: center; gap: 10px;
  margin: 4px 0 2px;
}
.mm-seccion::before, .mm-seccion::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, var(--border), transparent);
}
.mm-seccion span {
  font-family: 'Oswald', sans-serif;
  font-size: 9px; letter-spacing: 3px;
  color: rgba(255,255,255,.4); text-transform: uppercase;
  white-space: nowrap;
}

/* ─── Sección destacada: dinero ─── */
.mm-seccion.dinero span {
  color: var(--gold);
  opacity: 1;
}
.mm-seccion.dinero::before,
.mm-seccion.dinero::after {
  background: linear-gradient(to right, transparent, rgba(212,175,55,.4), transparent);
}

/* ─── Botones base ─── */
.mm-btn {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  color: #fff;
  cursor: pointer; text-align: left;
  transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
  position: relative; overflow: hidden;
}
.mm-btn:hover {
  background: var(--bg-card2);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.mm-btn:active { transform: translateY(0); }

/* ─── Botón primario: neon (jugar rápido, carrera) ─── */
.mm-btn-primary {
  background: rgba(0,230,118,.08);
  border-color: rgba(0,230,118,.35);
}
.mm-btn-primary:hover {
  background: rgba(0,230,118,.14);
  border-color: var(--neon);
  box-shadow: 0 8px 24px rgba(0,230,118,.15);
}
.mm-btn-primary .mm-btn-icon { color: var(--neon); }
.mm-btn-primary strong { color: var(--neon); }

/* ─── Botón DINERO (mano a mano / torneo) — dorado, prominente ─── */
.mm-btn-dinero .mm-btn-icon {
  font-size: 26px;
  filter: drop-shadow(0 0 8px rgba(212,175,55,.6));
}

/* Badge "NUEVO" / "HOT" en botones de dinero */
.mm-badge {
  position: absolute; top: 8px; right: 8px;
  font-family: 'Oswald', sans-serif; font-size: 8px;
  font-weight: 700; letter-spacing: 1.5px;
  padding: 2px 7px; border-radius: 20px;
  text-transform: uppercase;
}
.mm-badge-gold {
  background: var(--gold); color: #0B0B0C;
}

/* ─── Botón copa: línea discreta ─── */
.mm-btn-copa {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.1);
  padding: 11px 16px;
}
.mm-btn-copa .mm-btn-icon { font-size: 18px; opacity: .85; }
.mm-btn-copa strong { font-size: 12px; letter-spacing: .5px; }

/* ─── Texto de los botones ─── */
.mm-btn-icon { font-size: 22px; flex-shrink: 0; width: 32px; text-align: center; }
.mm-btn-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.mm-btn-text strong {
  font-family: 'Oswald', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 1.5px; color: #fff;
  text-transform: uppercase;
}
.mm-btn-text small {
  font-family: 'Oswald', sans-serif;
  font-size: 10px; letter-spacing: .3px;
  color: rgba(255,255,255,.5);
  font-weight: 400;
}

/* ─── Nav container ─── */
.mm-nav {
  display: flex; flex-direction: column;
  gap: 6px; width: 100%;
}

/* ─── Footer del menú ─── */
.mm-footer {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
  width: 100%;
}
.mm-link {
  font-family: 'Oswald', sans-serif;
  font-size: 9px; letter-spacing: 1.5px;
  color: rgba(255,255,255,.45); text-transform: uppercase;
  background: none; border: none; cursor: pointer;
  padding: 4px 8px; border-radius: 6px;
  transition: color .15s, background .15s;
}
.mm-link:hover { color: #fff; background: rgba(255,255,255,.07); }

.mm-version {
  font-family: 'Oswald', sans-serif;
  font-size: 8px; letter-spacing: 3px;
  color: rgba(255,255,255,.2); text-transform: uppercase;
}

/* ─── Modales: fondo unificado ─── */.modal-box,
#name-screen,
#amistoso-screen,
#mundial-screen,
#anotador-screen,
#online-screen{
  background: var(--bg-card) !important;
  border: 1px solid var(--border);
}

/* Títulos de pantallas secundarias */
.ns-title {
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  letter-spacing: 4px;
  background: linear-gradient(135deg, #fff 30%, var(--gold) 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Botones de acción (primario) ─── */
.btn.primary,
button.primary {
  background: linear-gradient(135deg, var(--neon) 0%, var(--neon-d) 100%) !important;
  color: #0B0B0C !important;
  border: none !important;
  font-family: 'Oswald', sans-serif;
  font-weight: 700; letter-spacing: 2px;
  box-shadow: 0 4px 20px rgba(0,230,118,.25);
}
.btn.primary:hover,
button.primary:hover {
  box-shadow: 0 6px 28px rgba(0,230,118,.4);
  filter: brightness(1.08);
}

/* ─── Scrollbar oscuro ─── */
#main-menu::-webkit-scrollbar { width: 4px; }
#main-menu::-webkit-scrollbar-track { background: transparent; }
#main-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

/* ── menu_polish.css ── */
/* ══════════════════════════════════════════════════════
   MENU_POLISH.CSS — pulido tipográfico y de overlays del
   MENÚ PRINCIPAL (pedido de Chucho 30 jul: "mejorar los
   overlays y letras para más profesional").

   ÚLTIMA capa del bundle (después de unified-theme.css):
   acá se AFINA lo que ya pintan style.css y unified-theme
   — tracking, contraste, superficies — sin redefinir
   estructura ni tocar el DOM (ver memoria menu-acordeon).
   Alcance: SOLO el menú principal (#main-menu y .mm-*).
   ══════════════════════════════════════════════════════ */

/* ── 1. TIPOGRAFÍA DE LOS ITEMS ─────────────────────────
   Menos tracking y un peso más contenido: el Oswald 700
   con letter-spacing 2px estiraba los títulos y aplastaba
   la jerarquía. El subtítulo sube de contraste (.7 → .85):
   era lo que más "barato" hacía ver el menú. */
.mm-btn-text strong {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1.1px;
}
.mm-btn-text small {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .3px;
  line-height: 1.4;
  opacity: 1;                      /* el contraste se maneja con color */
  color: rgba(255, 255, 255, .82);
}
.mm-nav .mm-btn.mm-btn-primary:not([data-mmg]) .mm-btn-text small {
  color: rgba(255, 255, 255, .88); /* hero: subtítulo un punto más presente */
}
.mm-nav .mm-btn.mm-btn-primary:not([data-mmg]) .mm-btn-text strong {
  font-size: 19px;                 /* el hero manda: un escalón arriba del resto */
  letter-spacing: 1.6px;
}

/* ── 2. PANELES DEL ACORDEÓN (MODO DT / PARTIDA RÁPIDA) ──
   Eran los overlays más chatos de la pantalla: texto gris
   con tracking 4px y contador en texto suelto. Ahora:
   título más legible, contador como pill dorada, superficie
   de vidrio con la misma receta que los botones [data-mmg]. */
.mm-nav > .mm-seccion[data-mm-sec] {
  padding: 12px 14px 12px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
    rgba(8, 14, 10, .5);
  border: 1px solid rgba(200, 168, 75, .28);
  border-left: 3px solid rgba(245, 197, 24, .65);
  box-shadow: 0 6px 18px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
}
/* El título vive en un span y unified-theme lo pinta 9px/tracking 3px
   (receta de cuando era una línea divisoria, no un botón): acá se le da
   cuerpo de fila tocable. El :not() esquiva al contador y al chevron. */
.mm-nav > .mm-seccion[data-mm-sec] span:not(.mm-count):not(.mm-chev) {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, .9);
}
.mm-nav > .mm-seccion[data-mm-sec] .mm-count {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(245, 197, 24, .9);
  background: rgba(245, 197, 24, .1);
  border: 1px solid rgba(245, 197, 24, .3);
  border-radius: 999px;
  padding: 3px 10px;
}
.mm-nav > .mm-seccion[data-mm-sec] .mm-chev {
  color: rgba(245, 197, 24, .85);
}

/* ── 3. BADGES (RÁPIDO / BETA / HOT) ──────────────────── */
.mm-badge, .mm-badge-gold {
  font-size: 9px;
  letter-spacing: 1.2px;
  padding: 2.5px 9px;
}

/* ── 4. PASTILLAS DEL FOOTER (LIGA, ÁLBUM, PERFIL...) ───
   Subían apretadas y apagadas (10px, color .55). Un punto
   más de cuerpo, contraste y aire; alto mínimo tocable. */
#main-menu .mm-footer { gap: 8px; }
#main-menu .mm-footer button, #main-menu .mm-footer .mm-link {
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: .8px;
  color: rgba(255, 255, 255, .72) !important;
  padding: 8px 14px !important;
  min-height: 36px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 999px !important;
  display: inline-flex; align-items: center; gap: 5px;
}

/* ── 5. CHIP DE NIVEL (#mm-nivel-chip, estilos inline de
   nivel.js → hace falta !important para afinarlo acá) ── */
#mm-nivel-chip {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
    rgba(8, 14, 10, .6) !important;
  border: 1px solid rgba(200, 168, 75, .4) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05) !important;
  padding: 10px 16px !important;
}
#mm-nivel-chip > div:first-child { letter-spacing: 1.5px !important; }

/* ── 6. CHIP DE PT DEL MENÚ ───────────────────────────── */
#main-menu .fp-pesos-badge {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  background:
    linear-gradient(180deg, rgba(245,197,24,.12), rgba(245,197,24,.03)),
    rgba(8, 14, 10, .6);
  border-color: rgba(245, 197, 24, .45);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
}

/* ── 7. PANEL "MISIONES SEMANALES" EN EL MENÚ ───────────
   Venía entero del concepto azul viejo (#101a28 + celeste):
   era el overlay que más chocaba contra la identidad
   verde-noche + oro. Se re-pinta SOLO en el menú — la
   pantalla del modo historia conserva su estética propia. */
#main-menu .hist-mis-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    rgba(8, 14, 10, .62);
  border: 1px solid rgba(200, 168, 75, .25);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
}
#main-menu .hist-mis-titulo {
  color: var(--gold, #f5c518);
  font-size: 11.5px;
  letter-spacing: 1.6px;
}
#main-menu .hist-mis-timer  { color: rgba(255, 255, 255, .45); }
#main-menu .hist-mis-item {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
}
#main-menu .hist-mis-item.completada {
  background: rgba(46, 107, 46, .18);
  border-color: rgba(126, 216, 86, .35);
}
#main-menu .hist-mis-nombre { color: rgba(255, 255, 255, .88); font-size: 10.5px; letter-spacing: .4px; }
#main-menu .hist-mis-desc   { color: rgba(255, 255, 255, .55); font-size: 9.5px; }
#main-menu .hist-mis-barra-wrap { background: rgba(255, 255, 255, .12); }
#main-menu .hist-mis-barra  { background: linear-gradient(90deg, #c89b3c, #ffe08a); }
#main-menu .hist-mis-item.completada .hist-mis-barra { background: linear-gradient(90deg, #2e6b2e, #7ed856); }
#main-menu .hist-mis-recomp { color: var(--gold, #f5c518); font-size: 9.5px; letter-spacing: .5px; }

/* ── 8. VERSIÓN AL PIE ────────────────────────────────── */
.mm-version {
  font-size: 9.5px;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, .3);
}