/* ====== FOOTBALL ENGLISH – ESTILO VIDEOJUEGO ARCADE 2026 ====== */
:root{
  --bg0:#060e1e;
  --bg1:#0d1f3d;
  --bg2:#16325c;
  --bg3:#1d427b;
  --border:#2a5694;
  --border-light:rgba(255,255,255,0.18);
  --txt:#f0f6ff;
  --muted:#9bb6dd;
  --green:#10b981;
  --green-dark:#047857;
  --green2:#34d399;
  --purple:#8b5cf6;
  --purple-dark:#5b21b6;
  --orange:#f59e0b;
  --orange-dark:#b45309;
  --blue:#0ea5e9;
  --blue-dark:#0369a1;
  --gold:#fbbf24;
  --gold-dark:#b45309;
  --red:#ef4444;
  --red-dark:#991b1b;
  --rare:#0ea5e9;
  --epic:#8b5cf6;
  --legendary:#fbbf24;
  --font-game:'Fredoka', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-ui:'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  margin:0;padding:0;
  background:radial-gradient(ellipse at 50% 0%, #173873 0%, #0a1936 55%, #050b17 100%);
  background-attachment:fixed;
  color:var(--txt);
  font-family:var(--font-game);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

body{
  padding:16px 20px 60px;
  display:flex;
  flex-direction:column;
  align-items:center;
  background-image:
    radial-gradient(circle at 50% 10%, rgba(14,165,233,0.15) 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(139,92,246,0.12) 0%, transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(16,185,129,0.12) 0%, transparent 45%);
}

#topbar, .screen{
  width:100%;
  max-width:1040px;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box;
}

button{
  font-family:var(--font-game);
  cursor:pointer;border:none;outline:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.hidden{display:none !important}

/* ================== TOPBAR ================== */
#topbar{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg, rgba(13,31,61,0.92), rgba(22,50,92,0.92));
  backdrop-filter:blur(12px);
  border:2px solid var(--border-light);
  border-bottom:3px solid rgba(14,165,233,0.3);
  border-radius:20px;
  padding:10px 20px;
  margin-bottom:16px;
  box-shadow:0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}

.tbLeft{display:flex;align-items:center;gap:12px}

.avatar{
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg, #1e498a, #0c2044);
  display:grid;place-items:center;
  font-size:26px;
  border:2.5px solid var(--gold);
  box-shadow:0 0 14px rgba(251,191,36,0.5), inset 0 2px 4px rgba(255,255,255,0.3);
  transition:transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.avatar:hover{transform:scale(1.1) rotate(5deg)}

.hName{
  font-weight:700;
  font-size:16px;
  letter-spacing:0.5px;
  color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,0.4);
}

.hLvl{
  color:var(--gold);
  font-size:13px;
  font-weight:800;
  background:rgba(251,191,36,0.15);
  display:inline-block;
  padding:2px 8px;
  border-radius:8px;
  border:1px solid rgba(251,191,36,0.3);
  margin-top:2px;
}

.tbCenter{flex:1;max-width:340px;padding:0 20px}
.hXpLabel{
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:4px;
  text-align:center;
  letter-spacing:0.5px;
}

.bar{
  height:12px;
  background:rgba(6,14,30,0.8);
  border-radius:10px;
  border:1.5px solid var(--border);
  overflow:hidden;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.5);
  position:relative;
}

.bar>i{
  display:block;
  height:100%;
  background:linear-gradient(90deg, #10b981, #34d399);
  border-radius:10px;
  transition:width 0.4s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 0 10px rgba(52,211,153,0.7);
  position:relative;
}
.bar>i::after{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);
  animation:shine 2.5s infinite;
}

.tbRight{display:flex;gap:10px}

.chip2{
  background:linear-gradient(180deg, #16325c, #0d1f3d);
  border:2px solid #2a5694;
  box-shadow:0 4px 0 #071326, 0 6px 12px rgba(0,0,0,0.25);
  padding:7px 14px;
  border-radius:20px;
  font-size:14px;
  font-weight:700;
  color:var(--txt);
  display:flex;
  align-items:center;
  transition:transform 0.15s;
}
.chip2:hover{transform:translateY(-1px)}
.chip2.gem{
  border-color:#d97706;
  background:linear-gradient(180deg, #3d2204, #1a0f02);
  box-shadow:0 4px 0 #0f0801, 0 0 12px rgba(251,191,36,0.25);
}
.chip2 b{margin-left:5px;color:#fff;font-size:15px}

/* ================== BANDERAS CSS ================== */
.flag{
  display:inline-block;width:28px;height:20px;
  border-radius:4px;vertical-align:middle;
  border:1.5px solid rgba(255,255,255,0.3);
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.flag.ar{background:linear-gradient(#74acdf 33%,#fff 33% 66%,#74acdf 66%);position:relative}
.flag.ar::after{content:'☀';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:10px;color:#fcbf49;line-height:1}
.flag.pt{background:linear-gradient(90deg,#046a38 40%,#da291c 40%);position:relative}
.flag.pt::after{content:'';position:absolute;left:40%;top:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:#ffd76a;border-radius:50%}
.flag.big{width:60px;height:42px;border-radius:6px;border-width:2px}
.flag.big.ar::after{font-size:24px}
.flag.big.pt::after{width:18px;height:18px}

/* ================== ONBOARDING ================== */
.onboard{max-width:500px;margin:40px auto;text-align:center}
.onboard .title{
  font-size:46px;margin:0 0 6px;letter-spacing:2px;font-weight:900;
  background:linear-gradient(180deg, #fff 0%, var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 12px rgba(251,191,36,0.4));
}
.sub{
  font-family:var(--font-ui);
  color:var(--muted);
  margin:0 0 24px;
  font-size:16px;
  font-weight:600;
}
.panel{
  background:linear-gradient(180deg, rgba(22,50,92,0.95), rgba(13,31,61,0.95));
  border:2px solid var(--border-light);
  border-radius:24px;
  padding:28px;
  text-align:left;
  box-shadow:0 12px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
}
.panel label{
  display:block;margin:16px 0 6px;font-size:14px;
  color:var(--muted);font-weight:700;letter-spacing:0.5px;
}
.panel input{
  width:100%;padding:12px 16px;
  background:#060e1e;border:2px solid var(--border);
  color:#fff;border-radius:14px;font-size:16px;font-family:var(--font-game);font-weight:700;
  transition:border-color 0.2s;
}
.panel input:focus{
  border-color:var(--blue);outline:none;box-shadow:0 0 12px rgba(14,165,233,0.3);
}
.countries{display:flex;gap:12px;margin-top:8px}
.countryBtn{
  flex:1;padding:14px;
  background:linear-gradient(180deg, #16325c, #0d1f3d);
  border:2px solid var(--border);
  box-shadow:0 5px 0 #071326, 0 6px 12px rgba(0,0,0,0.25);
  color:var(--txt);border-radius:14px;font-size:16px;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:all 0.12s;
}
.countryBtn.sel{
  border-color:var(--gold);
  background:linear-gradient(180deg, #2a4c82, #1a355f);
  box-shadow:0 5px 0 #0d1e3d, 0 0 16px rgba(251,191,36,0.3);
  transform:translateY(-2px);
}
.countryBtn:active{
  transform:translateY(3px);
  box-shadow:0 2px 0 #071326;
}

/* ================== BOTONES 3D JUGOSOS ================== */
.btnBig{
  display:inline-flex;
  align-items:center;justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:16px;
  font-weight:800;
  font-size:18px;
  letter-spacing:0.5px;
  margin-top:18px;
  color:#fff;
  text-transform:uppercase;
  border:2px solid rgba(255,255,255,0.25);
  transition:transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
  position:relative;
  text-shadow:0 2px 4px rgba(0,0,0,0.4);
}
.btnBig.green{
  background:linear-gradient(180deg, #10b981, #059669);
  box-shadow:0 6px 0 #047857, 0 10px 20px rgba(0,0,0,0.35);
}
.btnBig.blue{
  background:linear-gradient(180deg, #0ea5e9, #0284c7);
  box-shadow:0 6px 0 #0369a1, 0 10px 20px rgba(0,0,0,0.35);
}
.btnBig.purple{
  background:linear-gradient(180deg, #8b5cf6, #7c3aed);
  box-shadow:0 6px 0 #5b21b6, 0 10px 20px rgba(0,0,0,0.35);
}
.btnBig.gold{
  background:linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  box-shadow:0 6px 0 #92400e, 0 10px 24px rgba(245,158,11,0.5), inset 0 1px 0 rgba(255,255,255,0.6);
  border:1.5px solid #fef08a;
  color:#271202;
  font-weight:900;
  text-shadow:0 1px 0 rgba(255,255,255,0.5);
}
.btnBig.orange{
  background:linear-gradient(180deg, #fb923c, #ea580c);
  box-shadow:0 6px 0 #9a3412, 0 10px 20px rgba(0,0,0,0.35);
}

/* ==========================================================
   EA SPORTS FC MOBILE HUD 2026 – TOPBAR
========================================================== */
.hudTopbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(8,16,36,0.96) 0%, rgba(4,9,20,0.96) 100%);
  border-bottom: 2px solid rgba(251,191,36,0.35);
  padding: 8px 18px;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.15);
  position: sticky;
  top: 0;
  z-index: 100;
}

.hudProfile {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hudAvatarRing {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  border: 2.5px solid var(--gold);
  box-shadow: 0 0 16px rgba(251,191,36,0.5), inset 0 2px 4px rgba(255,255,255,0.4);
  background: linear-gradient(135deg, #1e3a8a, #0f172a);
  overflow: visible;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.hudAvatarIcon {
  font-size: 22px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.hudLvlBadge {
  position: absolute;
  bottom: -4px;
  right: -6px;
  background: linear-gradient(180deg, #fbbf24, #d97706);
  color: #1a0d02;
  font-family: var(--font-game);
  font-size: 9.5px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid #fef08a;
  box-shadow: 0 2px 6px rgba(0,0,0,0.8);
  white-space: nowrap;
}
.hudProfileText {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hudName {
  font-family: var(--font-game);
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.8px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
.hudXpTrack {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hudXpVal {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
}
.hudXpBarWrap {
  width: 90px;
  height: 7px;
  background: rgba(4,9,20,0.8);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.2);
  overflow: hidden;
  position: relative;
}
.hudXpBarWrap i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  box-shadow: 0 0 8px rgba(56,189,248,0.8);
  border-radius: 6px;
  transition: width 0.3s ease;
}

.hudResources {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hudPill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #102244 0%, #081328 100%);
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 4px 6px 4px 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
}
.hudPill.energy { border-color: rgba(16,185,129,0.5); }
.hudPill.coins  { border-color: rgba(251,191,36,0.5); }
.hudPill.gems   { border-color: rgba(56,189,248,0.5); }

.hpIcon { font-size: 16px; }
.hpInfo { display: flex; flex-direction: column; line-height: 1.1; }
.hpLabel { font-size: 8.5px; font-weight: 900; color: var(--muted); letter-spacing: 0.5px; }
.hpVal { font-family: var(--font-game); font-size: 13px; font-weight: 900; color: #fff; }
.hudPill.energy .hpVal { color: #34d399; }
.hudPill.coins .hpVal  { color: #fde047; }
.hudPill.gems .hpVal   { color: #38bdf8; }

.hpAddBtn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #10b981, #059669);
  color: #fff;
  border: 1px solid #6ee7b7;
  font-family: var(--font-game);
  font-weight: 900;
  font-size: 14px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  transition: transform 0.15s;
  padding: 0;
  margin: 0;
}
.hudPill.coins .hpAddBtn { background: linear-gradient(180deg, #f59e0b, #d97706); border-color: #fde047; color: #1e1002; }
.hudPill.gems .hpAddBtn  { background: linear-gradient(180deg, #0284c7, #0369a1); border-color: #38bdf8; }
.hpAddBtn:hover { transform: scale(1.15); filter: brightness(1.2); }

.hudUtilityButtons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hudUtilBtn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(180deg, #162a52 0%, #0c1832 100%);
  border: 1.5px solid rgba(255,255,255,0.22);
  color: #fff;
  font-size: 16px;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  transition: all 0.15s;
}
.hudUtilBtn:hover {
  transform: translateY(-2px);
  filter: brightness(1.2);
  border-color: var(--gold);
}
.hudBadge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #fff;
  font-family: var(--font-game);
  font-size: 9.5px;
  font-weight: 900;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.7);
}

/* ==========================================================
   EA SPORTS FC HOME CONTAINER & GRID LAYOUT
/* ==========================================================
   EA SPORTS FC HOME CONTAINER & GRID LAYOUT (CINEMATIC AAA)
========================================================== */
.hudHome {
  padding: 14px 18px 110px;
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
}
.hudHome::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 15% 20%, rgba(14,165,233,0.18) 0%, transparent 55%),
              radial-gradient(circle at 85% 75%, rgba(16,185,129,0.12) 0%, transparent 60%),
              radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(2,6,15,0.7) 100%);
  pointer-events: none !important;
  z-index: -1;
}
.hudContainer {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 1;
}

/* ================== FILA SUPERIOR: 3 COLUMNAS ================== */
.hudTopRow {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr 1fr;
  gap: 18px;
  align-items: stretch;
}

/* 1. HERO BANNER CINEMÁTICO */
.hudHeroCard {
  position: relative;
  border-radius: 26px;
  border: 1.5px solid rgba(56,189,248,0.45);
  border-top: 2px solid rgba(255,255,255,0.4);
  box-shadow: 0 20px 50px rgba(0,0,0,0.85), 0 0 35px rgba(14,165,233,0.22);
  background: #061124;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  max-height: 340px;
  overflow: hidden;
}
.hudHeroBg {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  overflow: hidden;
  z-index: 1;
  pointer-events: none !important;
}
.hudStadiumImg {
  width: 100%;
  height: 100%;
  max-height: 340px;
  object-fit: cover;
  display: block;
  filter: brightness(0.85) contrast(1.15) saturate(1.1);
  transform: scale(1.02);
}
.hudHeroOverlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,14,32,0.2) 0%, rgba(6,14,32,0.88) 100%),
              radial-gradient(circle at 80% 40%, rgba(56,189,248,0.3) 0%, transparent 65%);
  pointer-events: none !important;
}

.hudHeroContent {
  position: relative;
  z-index: 10;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 100%;
  pointer-events: auto !important;
}
.hudLogo3D {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hlBall {
  font-size: 34px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.8)) drop-shadow(0 0 14px rgba(251,191,36,0.7));
  animation: ballSpinSlow 12s linear infinite;
}
@keyframes ballSpinSlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.hlText {
  display: flex;
  flex-direction: column;
  line-height: 0.9;
}
.hlTop {
  font-family: var(--font-game);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 3px 8px rgba(0,0,0,0.9);
}
.hlBot {
  font-family: var(--font-game);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2px;
  background: linear-gradient(180deg, #ffffff 0%, #fef08a 40%, #fbbf24 75%, #d97706 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 8px rgba(245,158,11,0.55));
}
.hudHeroSlogan {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 800;
  color: #f1f5f9;
  letter-spacing: 0.8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9);
}
.hudHeroActions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.hudBigPlayBtn {
  background: linear-gradient(180deg, #10b981 0%, #059669 50%, #047857 100%) !important;
  color: #ffffff !important;
  border: 2px solid #6ee7b7 !important;
  box-shadow: 0 6px 0 #064e3b, 0 0 28px rgba(16,185,129,0.8), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  border-radius: 18px !important;
  padding: 14px 24px !important;
  font-family: var(--font-game);
  font-size: 15.5px !important;
  font-weight: 900 !important;
  letter-spacing: 1.2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.15s;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  animation: pulseGreenGlow 2.5s infinite;
}
.hudBigPlayBtn:hover {
  transform: translateY(-3px) scale(1.04);
  filter: brightness(1.15);
}
.hudBigPlayBtn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #064e3b !important;
}
.hudSubBtn {
  background: linear-gradient(180deg, rgba(22,46,88,0.9) 0%, rgba(12,28,56,0.9) 100%);
  border: 1.5px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 14px;
  padding: 11px 16px;
  font-family: var(--font-game);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 4px 0 #071326, 0 4px 12px rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
}
.hudSubBtn.blue { border-color: rgba(56,189,248,0.6); }
.hudSubBtn.purple { border-color: rgba(168,85,247,0.6); }
.hudSubBtn:hover {
  transform: translateY(-2px);
  filter: brightness(1.2);
}

/* 2. CARTA DESTACADA SHOWCASE 3D */
.hudShowcaseCard {
  background: linear-gradient(180deg, rgba(16,28,56,0.82) 0%, rgba(8,16,36,0.92) 100%);
  border: 2px solid rgba(251,191,36,0.65);
  border-top: 2px solid #fef08a;
  border-radius: 26px;
  padding: 14px 16px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.8), 0 0 35px rgba(251,191,36,0.35);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  justify-content: space-between;
}
.hscHeader {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.hscStar { font-size: 15px; }
.hscTitle {
  font-family: var(--font-game);
  font-size: 13.5px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 1.2px;
  text-shadow: 0 0 12px rgba(251,191,36,0.6);
}
.hscBody {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  flex: 1;
}
.hscNav {
  background: rgba(6,14,30,0.85);
  border: 1.5px solid rgba(255,255,255,0.25);
  color: #fff;
  width: 30px;
  height: 48px;
  border-radius: 12px;
  font-family: var(--font-game);
  font-size: 20px;
  font-weight: 900;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  margin: 0;
}
.hscNav:hover {
  background: var(--gold);
  color: #1e1002;
  border-color: #fff;
  transform: scale(1.12);
}
.fcHeroCardSpot {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}
.fcHero3DCard {
  width: 180px;
  aspect-ratio: 2/3;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s;
  animation: cardShowcaseFloat 3.8s ease-in-out infinite alternate;
}
@keyframes cardShowcaseFloat {
  0%   { transform: translateY(0) rotate(-0.5deg); }
  100% { transform: translateY(-8px) rotate(1deg); }
}

.fcHeroCardInner {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 16px 36px rgba(0,0,0,0.9), 0 0 35px rgba(251,191,36,0.45);
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
}
.fcCardShine {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  mix-blend-mode: screen;
}
.hscDots {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.hscDots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: all 0.2s;
}
.hscDots .dot.active {
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  width: 18px;
  border-radius: 8px;
}

/* 3. EVENTOS SEMANALES */
.hudEventsCard {
  background: linear-gradient(180deg, rgba(14,28,58,0.75) 0%, rgba(6,14,32,0.88) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  border-top: 1.5px solid rgba(56,189,248,0.35);
  border-radius: 26px;
  padding: 16px 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.65);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
}
.hecHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.hecTitle {
  font-family: var(--font-game);
  font-size: 13.5px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
}
.hecLink {
  font-size: 12px;
  font-weight: 900;
  color: var(--gold);
  cursor: pointer;
}
.hecList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  justify-content: flex-start;
}
.hecItem {
  background: linear-gradient(135deg, rgba(19,36,72,0.8) 0%, rgba(10,20,41,0.9) 100%);
  border: 1.5px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.55);
  transition: border-color 0.2s, transform 0.15s;
  cursor: pointer;
}
.hecItem:hover {
  transform: translateY(-2px);
  border-color: rgba(251,191,36,0.6);
}
.hecItem.arg { border-left: 5px solid #38bdf8; }
.hecItem.pt  { border-left: 5px solid #ef4444; }
.hecItem.vocab { border-left: 5px solid #10b981; }

.hecLeft {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hecBadge {
  font-family: var(--font-game);
  font-size: 13.5px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.6px;
}
.hecTimer {
  font-size: 11.5px;
  font-weight: 900;
  color: var(--gold);
}
.hecDesc {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  color: #cbd5e1;
  line-height: 1.25;
}
.hecDesc b { color: #fff; font-weight: 900; }
.hecProgWrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}
.hecBar {
  flex: 1;
  height: 8px;
  background: rgba(0,0,0,0.7);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.2);
}
.hecBar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 6px;
}
.hecVal {
  font-family: var(--font-game);
  font-size: 12.5px;
  font-weight: 900;
  color: #fff;
}
.hecAvatarWrap {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.35);
  box-shadow: 0 6px 14px rgba(0,0,0,0.7);
  flex-shrink: 0;
}
.hecPlayerImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: scale(1.1);
}
.hecRarityBadge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: var(--font-game);
  font-size: 9px;
  font-weight: 900;
  text-align: center;
  padding: 2px 0;
  letter-spacing: 0.6px;
}
.hecRarityBadge.epic { background: #8b5cf6; color: #fff; }
.hecRarityBadge.rare { background: #0284c7; color: #fff; }

.hecVocIcon { font-size: 32px; flex-shrink: 0; }
.hecVocInfo { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.hecVocTitle { font-family: var(--font-game); font-size: 13.5px; font-weight: 900; color: #fff; }
.hecVocSub { font-size: 12px; color: #cbd5e1; font-weight: 700; }
.hecVocReward { text-align: right; flex-shrink: 0; }
.hvrLabel { font-size: 9.5px; font-weight: 900; color: var(--muted); display: block; }
.hvrVal { font-family: var(--font-game); font-size: 15px; color: #38bdf8; font-weight: 900; }

/* ================== FILA MEDIA: MODOS + MI EQUIPO ================== */
.hudMidRow {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr;
  gap: 18px;
  align-items: stretch;
}

/* 1. MODOS DE JUEGO */
.hudModesCard {
  background: linear-gradient(180deg, rgba(14,26,52,0.75) 0%, rgba(6,14,32,0.88) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  border-top: 1.5px solid rgba(56,189,248,0.3);
  border-radius: 26px;
  padding: 16px 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.65);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
}
.hmcHeader {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.hmcIcon { font-size: 16px; }
.hmcTitle {
  font-family: var(--font-game);
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
}
.hmcGrid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.hmcItem {
  background: linear-gradient(135deg, rgba(19,36,72,0.7) 0%, rgba(10,20,41,0.85) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hmcItem:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.15);
  border-color: var(--gold);
}
.hmcItem.penalty { border-left: 4px solid var(--green); }
.hmcItem.quiz    { border-left: 4px solid var(--gold); }
.hmcItem.spell   { border-left: 4px solid var(--purple); }

.hmcTag {
  position: absolute;
  top: -7px;
  right: 14px;
  font-family: var(--font-game);
  font-size: 9px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.hmcTag.popular { background: #f59e0b; color: #1e1002; }
.hmcTag.nuevo   { background: #10b981; color: #fff; }
.hmcTag.pro     { background: #8b5cf6; color: #fff; }

.hmcArtWrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #061124;
  border: 1.5px solid rgba(255,255,255,0.2);
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0,0,0,0.6);
}
.hmcLetters3D {
  font-family: var(--font-game);
  font-weight: 900;
  font-size: 14px;
  background: linear-gradient(180deg, #f87171, #fbbf24, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hmcLettersHolo {
  font-family: var(--font-game);
  font-weight: 900;
  font-size: 14px;
  color: #38bdf8;
  text-shadow: 0 0 8px rgba(56,189,248,0.8);
}
.hmcInfo { flex: 1; }
.hmcInfo h4 {
  font-family: var(--font-game);
  font-size: 13.5px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 2px;
}
.hmcInfo p {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  margin: 0;
}
.hmcArrow {
  font-size: 16px;
  color: var(--gold);
  font-weight: 900;
  transition: transform 0.2s;
}
.hmcItem:hover .hmcArrow { transform: translateX(4px); }

/* 2. MI EQUIPO PREVIEW – CANCHA 3D ISOMÉTRICA */
.hudTeamCard {
  background: linear-gradient(180deg, rgba(14,26,52,0.75) 0%, rgba(6,14,32,0.88) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  border-top: 1.5px solid rgba(56,189,248,0.3);
  border-radius: 26px;
  padding: 16px 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.65);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
}
.htcHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.htcTitleWrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.htcIcon { font-size: 16px; }
.htcTitle {
  font-family: var(--font-game);
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
}
.htcFormationBadge {
  font-family: var(--font-game);
  font-size: 10.5px;
  font-weight: 900;
  color: #34d399;
  background: rgba(16,185,129,0.18);
  border: 1px solid #10b981;
  padding: 2px 8px;
  border-radius: 8px;
}
.htcContent {
  display: flex;
  gap: 14px;
  align-items: center;
  flex: 1;
}
.htcPitch {
  flex: 1;
  height: 250px;
  background: repeating-linear-gradient(0deg, #15803d 0px, #15803d 24px, #166534 24px, #166534 48px);
  border: 2.5px solid rgba(255,255,255,0.45);
  border-radius: 20px;
  position: relative;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.6), 0 14px 35px rgba(0,0,0,0.7);
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  padding: 8px 10px;
  overflow: hidden;
  perspective: 550px;
  transform: rotateX(14deg);
  transform-style: preserve-3d;
}
.htcPitch::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0; height: 2px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 5px rgba(255,255,255,0.6);
}
.htcPitch::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(255,255,255,0.6);
}
.htcPitchRow {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  z-index: 2;
}
.htcMiniPlayer {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2.5px solid var(--gold);
  box-shadow: 0 8px 18px rgba(0,0,0,0.9), 0 0 14px rgba(251,191,36,0.65);
  overflow: hidden;
  background: #061124;
  transform: translateZ(10px);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s;
  cursor: pointer;
  flex-shrink: 0;
}
.htcMiniPlayer:hover {
  transform: translateZ(18px) scale(1.18);
  box-shadow: 0 12px 24px rgba(0,0,0,0.95), 0 0 20px rgba(251,191,36,0.9);
}
.htcMiniPlayer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: scale(1.15);
}
.htcMiniPlayer.lockedSlot {
  border: 1.5px dashed rgba(255,255,255,0.3);
  background: rgba(4,10,24,0.7);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8);
  display: grid;
  place-items: center;
}
.slotLock {
  font-size: 16px;
  opacity: 0.6;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}
.htcMiniPlayer.lockedSlot:hover {
  border-color: var(--gold);
  background: rgba(14,26,52,0.85);
}
.htcMiniPlayer.lockedSlot:hover .slotLock {
  opacity: 1;
}

/* Estado Vacío de Hero Card en Home */
.fcHeroEmptyCard {
  width: 100%;
  max-width: 280px;
  background: linear-gradient(180deg, rgba(14,26,52,0.92) 0%, rgba(6,14,32,0.96) 100%);
  border: 2px dashed rgba(251,191,36,0.5);
  border-radius: 24px;
  padding: 28px 16px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.fheIcon {
  font-size: 44px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.7));
  animation: bounceHero 1.5s infinite alternate ease-in-out;
}
.fheTitle {
  font-family: var(--font-game);
  font-size: 16px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 0.5px;
}
.fheSub {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.35;
}

/* Puerta de Bloqueo de Partido si no ha estudiado */
.matchLockedGate {
  max-width: 520px;
  margin: 20px auto;
  background: linear-gradient(180deg, rgba(22,50,92,0.96) 0%, rgba(10,24,52,0.98) 100%);
  border: 2.5px solid var(--gold);
  border-radius: 24px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.mlgIcon {
  font-size: 54px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.7));
}
.mlgBadge {
  display: inline-block;
  font-family: var(--font-game);
  font-size: 11px;
  font-weight: 900;
  color: #1e1002;
  background: var(--gold);
  padding: 3px 12px;
  border-radius: 8px;
  letter-spacing: 1px;
}
.mlgTitle {
  font-family: var(--font-game);
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
  margin: 4px 0 0;
}
.mlgSub {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: #cbd5e1;
  line-height: 1.4;
}
.mlgProgBox {
  width: 100%;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 6px 0;
}
.mlgProgLabel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  margin-bottom: 6px;
}
.mlgProgLabel b { color: var(--gold); }
.mlgBar {
  height: 10px;
  background: rgba(0,0,0,0.7);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.2);
}
.mlgBar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #10b981);
  border-radius: 6px;
  transition: width 0.3s;
}
.mlgActions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}
.htcStatsPanel {
  width: 115px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}
.htcOvrBadge {
  background: linear-gradient(180deg, rgba(22,42,82,0.9), rgba(12,24,50,0.9));
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  padding: 8px 12px;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 0 14px rgba(251,191,36,0.3);
}
.hobLabel { font-size: 9px; font-weight: 900; color: var(--gold); letter-spacing: 1px; display: block; }
.hobVal { font-family: var(--font-game); font-size: 24px; font-weight: 900; color: #fff; line-height: 1; }
.htcChemBadge {
  background: linear-gradient(180deg, rgba(14,46,34,0.9), rgba(7,31,22,0.9));
  border: 1.5px solid #10b981;
  border-radius: 12px;
  padding: 6px 10px;
  width: 100%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.hcbLabel { font-size: 8.5px; font-weight: 900; color: #6ee7b7; letter-spacing: 0.5px; display: block; }
.hcbVal { font-family: var(--font-game); font-size: 16px; font-weight: 900; color: #fff; line-height: 1; }
.htcManageBtn {
  width: 100%;
  margin: 0 !important;
  padding: 9px !important;
  font-size: 11px !important;
}

/* ================== FILA INFERIOR: COLECCIÓN DE CARTAS ================== */
.hudBottomRow {
  width: 100%;
}
.hudCollectionCard {
  background: linear-gradient(180deg, rgba(14,26,52,0.75) 0%, rgba(6,14,32,0.88) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  border-top: 1.5px solid rgba(56,189,248,0.3);
  border-radius: 26px;
  padding: 16px 20px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.65);
  backdrop-filter: blur(16px);
}
.hccHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.hccTitleWrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hccStar { font-size: 16px; }
.hccTitle {
  font-family: var(--font-game);
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
}
.hccLink {
  font-size: 11px;
  font-weight: 900;
  color: var(--gold);
}
.hudCardsStrip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 8px 4px 12px;
  scrollbar-width: thin;
}
.hudCardsStrip .miniCard {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
}
.hudCardsStrip .miniCard:hover {
  transform: translateY(-8px) scale(1.06);
  box-shadow: 0 14px 28px rgba(0,0,0,0.85), 0 0 22px rgba(251,191,36,0.4);
  z-index: 10;
}

/* ==========================================================
   HUD BOTTOM NAVIGATION BAR (CONSOLA & MOBILE STYLE)
========================================================== */
.hudBottomNav {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 980px;
  background: linear-gradient(180deg, rgba(8,16,36,0.96) 0%, rgba(4,9,20,0.98) 100%);
  border: 2px solid rgba(251,191,36,0.4);
  border-radius: 24px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.85), 0 0 25px rgba(251,191,36,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
  backdrop-filter: blur(16px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  z-index: 9999 !important;
  pointer-events: auto !important;
}
.hbnItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: 1.5px solid transparent;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: 62px;
}
.hbnIcon { font-size: 18px; }
.hbnLabel {
  font-family: var(--font-game);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.6px;
}
.hbnItem:hover {
  color: #fff;
  transform: translateY(-2px);
  background: rgba(255,255,255,0.06);
}
.hbnItem.active {
  background: linear-gradient(180deg, rgba(251,191,36,0.25) 0%, rgba(245,158,11,0.08) 100%);
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 0 16px rgba(251,191,36,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
}
.hbnItem.active .hbnLabel { color: var(--gold); }

.hudNavEnergyBall {
  position: absolute;
  right: 18px;
  bottom: 8px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.hnebAura {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,63,94,0.7) 0%, rgba(251,146,60,0.5) 50%, transparent 80%);
  animation: rotateGlow 4s linear infinite;
}
@keyframes rotateGlow {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}
.hnebBall {
  font-size: 26px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.9));
}

@media (max-width: 1024px) {
  .hudTopRow { grid-template-columns: 1fr; }
  .hudMidRow { grid-template-columns: 1fr; }
  .hudPlayerCutout {
    opacity: 0.85;
    max-width: 42%;
    right: 0;
  }
  .hudHeroContent { max-width: 65%; }
}

@media (max-width: 768px) {
  .hudHome { padding: 10px 10px 85px; }
  .hudTopbar { padding: 6px 10px; }
  .hudPill .hpTxt { display: none; }
  .hudPlayerCutout { opacity: 0.45; max-width: 50%; }
  .hudHeroContent { max-width: 100%; }
  .hudBottomNav {
    bottom: 0;
    width: 100%;
    max-width: 100%;
    left: 0;
    transform: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 6px 4px;
    gap: 2px;
  }
  .hbnItem { min-width: 40px; padding: 4px 5px; }
  .hbnLabel { font-size: 7.5px; }
  .hudNavEnergyBall { display: none; }
}
.evCta[data-go="penalty"]{
  background:linear-gradient(180deg, #10b981, #059669);
  box-shadow:0 4px 0 #047857, 0 6px 12px rgba(16,185,129,0.3);
}
.evCta[data-go="spell"]{
  background:linear-gradient(180deg, #8b5cf6, #7c3aed);
  box-shadow:0 4px 0 #5b21b6, 0 6px 12px rgba(139,92,246,0.3);
}

.evCta:hover{
  filter:brightness(1.15);
  transform:translateY(-2px);
}
.evCta:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 rgba(0,0,0,0.6);
}

/* ================== CARDS STRIP (CARRUSEL HORIZONTAL) ================== */
.cardsStrip{
  background:linear-gradient(180deg, rgba(22,50,92,0.95), rgba(13,31,61,0.95));
  border:2.5px solid var(--border-light);
  border-radius:24px;padding:18px;
  box-shadow:0 10px 28px rgba(0,0,0,0.4);
  margin-top:16px;
  overflow:hidden;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.stripTitle{
  font-weight:900;font-size:16px;margin-bottom:12px;
  display:flex;justify-content:space-between;align-items:center;
}
.stLeft{display:flex;align-items:center;gap:6px}
.link{
  color:var(--gold);font-size:13px;cursor:pointer;font-weight:800;
  transition:color 0.15s, transform 0.15s;
}
.link:hover{color:#fff;transform:translateX(3px)}

.stripRow{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:12px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:6px 4px 14px !important;
  scroll-behavior:smooth;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box;
  -webkit-overflow-scrolling:touch;
}
.stripRow::-webkit-scrollbar{height:8px}
.stripRow::-webkit-scrollbar-track{background:rgba(6,14,30,0.6);border-radius:10px}
.stripRow::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}
.stripRow::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ================== STREAK & COMBO BADGES ================== */
.quizStreakBadge, .spellStreakBadge{
  background:linear-gradient(135deg, #ef4444, #f59e0b);
  color:#fff;font-size:13px;font-weight:900;letter-spacing:1px;
  padding:4px 12px;border-radius:14px;
  box-shadow:0 0 16px rgba(239,68,68,0.7);
  animation:streakPulse 0.8s infinite alternate ease-in-out;
}
@keyframes streakPulse{
  from{transform:scale(1)}
  to{transform:scale(1.1)}
}

/* ================== MINI CARDS ================== */
.miniCard{
  flex:0 0 100px !important;
  width:100px !important;
  height:150px !important;
  aspect-ratio:2/3;
  border:2.5px solid var(--border);
  border-radius:14px;
  padding:0;
  text-align:center;
  cursor:pointer;
  transition:all 0.18s cubic-bezier(0.34,1.56,0.64,1);
  position:relative;
  overflow:hidden;
  background:var(--bg2);
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.miniCard img, .miniCard svg{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
}
.miniCard .cardSlotOvr{ font-size:12px !important; top:21% !important; }
.miniCard .cardSlotPos{ font-size:8px !important; top:32% !important; }
.miniCard .cardSlotFlag{ font-size:10px !important; top:42% !important; }
.miniCard .cardSlotName{ font-size:8.5px !important; bottom:10.5% !important; }
.miniCard.rare{border-color:var(--rare);box-shadow:0 0 12px rgba(14,165,233,0.4)}
.miniCard.epic{border-color:var(--epic);box-shadow:0 0 12px rgba(139,92,246,0.4)}
.miniCard.legendary{border-color:var(--legendary);box-shadow:0 0 14px rgba(251,191,36,0.5)}
.miniCard.locked{opacity:.6;filter:grayscale(.3);cursor:default}
.miniCard:hover:not(.locked){
  transform:translateY(-6px) scale(1.06);
  box-shadow:0 10px 24px rgba(0,0,0,0.6);
  z-index:5;
}
.mcLock{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.75);
  display:grid;
  place-items:center;
  font-size:28px;
  border-radius:11px;
}

/* ================== SUB-SCREENS ================== */
.subHead{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
  flex-wrap:wrap;
  position:relative;
  z-index:500;
  pointer-events:auto !important;
}
.subHead h2{
  margin:0;font-size:26px;font-weight:900;letter-spacing:1px;
  background:linear-gradient(180deg, #fff 0%, var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.help{
  font-family:var(--font-ui);
  color:var(--muted);font-size:14px;font-weight:600;margin-left:auto;
}
.backBtn{
  background:linear-gradient(180deg, #16325c, #0d1f3d);
  border:2px solid var(--border-light);
  box-shadow:0 4px 0 #071326;
  color:#fff;padding:10px 18px;border-radius:14px;
  font-weight:800;font-size:14px;
  transition:all 0.12s;
  cursor:pointer !important;
  position:relative;
  z-index:600;
  pointer-events:auto !important;
}
.backBtn:hover{filter:brightness(1.15);transform:translateY(-1px)}
.backBtn:active{transform:translateY(3px);box-shadow:0 1px 0 #071326}

/* ================== LEARN ================== */
.lvlTitle{
  font-size:18px;color:var(--gold);margin:20px 0 10px;
  letter-spacing:1px;font-weight:900;
}
.lvlGroup{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.wordTile{
  background:linear-gradient(180deg, #16325c, #0d1f3d);
  border:2.5px solid var(--border-light);
  border-radius:16px;
  padding:14px 10px;text-align:left;display:flex;flex-direction:column;gap:4px;
  color:var(--txt);transition:all 0.15s cubic-bezier(0.34,1.56,0.64,1);
  position:relative;
  box-shadow:0 5px 0 #071326, 0 8px 16px rgba(0,0,0,0.25);
}
.wordTile:hover{
  border-color:var(--green);
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 8px 0 #071326, 0 12px 24px rgba(16,185,129,0.3);
}
.wordTile:active{
  transform:translateY(3px);
  box-shadow:0 2px 0 #071326;
}
.wordTile.mastered{
  border-color:var(--gold);
  background:linear-gradient(180deg, #1f447a, #142a4d);
  box-shadow:0 5px 0 #09172f, 0 0 14px rgba(251,191,36,0.25);
}
.wordTile.mastered::after{
  content:'✓';position:absolute;top:6px;right:10px;
  color:var(--gold);font-weight:900;font-size:16px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.wtEmoji{font-size:36px;text-align:center;margin:4px 0}
.wtVisual{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  margin:4px 0 6px;
}
.wtEn{font-weight:900;font-size:17px;text-align:center;letter-spacing:1px;color:#fff}
.wtEs{
  font-family:var(--font-ui);
  color:var(--muted);font-size:13px;text-align:center;font-weight:600;
}
.wtSpk{font-size:16px;text-align:right;opacity:0.8}

/* ================== MOTOR VISUAL 3D (ICONS & GRAPHICS) ================== */
.v3d-box{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  vertical-align:middle;
}
.v3d-svg{
  width:100%;
  height:100%;
  max-width:54px;
  max-height:54px;
  display:block;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.45));
  transition:transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.v3d-box.vocab .v3d-svg{ max-width:52px; max-height:52px; }
.v3d-box.quiz .v3d-svg{ max-width:74px; max-height:74px; }
.v3d-box.spell .v3d-svg{ max-width:84px; max-height:84px; }
.v3d-box.large .v3d-svg{ max-width:88px; max-height:88px; }
.v3d-box.btn .v3d-svg{ max-width:28px; max-height:28px; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.v3d-box.inline .v3d-svg{ max-width:22px; max-height:22px; vertical-align:middle; display:inline-block; }

.v3d-mode-icon{
  width:38px;height:38px;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,0.5));
}
.v3d-nav-icon{
  width:28px;height:28px;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}
.v3d-avatar-icon{
  width:100%;height:100%;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

.optVisual{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:78px;
}
.optBtn:hover .v3d-svg{
  transform:scale(1.12);
}
.wordTile:hover .v3d-svg{
  transform:scale(1.1);
}

.wordEmojiBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.wEmoji {
  font-size: 54px;
  line-height: 1;
  display: inline-block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.7));
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.optBtn:hover .wEmoji {
  transform: scale(1.15);
}

.fieldGoal .v3d-svg, .fieldKeeper .v3d-svg, .fieldPlayer .v3d-svg{
  max-width:44px;max-height:44px;
}

/* ================== QUIZ ================== */
.quizBox,.penBox{
  max-width:580px;margin:0 auto;
  background:linear-gradient(180deg, rgba(22,50,92,0.95), rgba(13,31,61,0.95));
  border:2px solid var(--border-light);
  border-radius:24px;padding:26px;text-align:center;
  box-shadow:0 12px 32px rgba(0,0,0,0.45);
}
.quizTop{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:16px;font-size:15px;font-weight:800;color:var(--muted);
}
#quizStars{color:var(--gold);font-size:22px;letter-spacing:3px}
.quizAsk{
  font-size:26px;font-weight:900;margin-bottom:24px;
  color:#fff;text-shadow:0 2px 8px rgba(0,0,0,0.4);
}
.spkBtn{
  background:linear-gradient(180deg, #0ea5e9, #0284c7);
  box-shadow:0 4px 0 #0369a1;
  color:#fff;border-radius:50%;width:44px;height:44px;font-size:20px;
  margin-left:12px;vertical-align:middle;flex-shrink:0;
  display:inline-grid;place-items:center;
  transition:all 0.12s;
}
.spkBtn:hover{filter:brightness(1.15);transform:scale(1.08)}
.spkBtn:active{transform:translateY(3px);box-shadow:0 1px 0 #0369a1}

.quizOpts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.optBtn{
  background:linear-gradient(180deg, #1b3a6b, #11254a);
  border:2.5px solid var(--border-light);
  box-shadow:0 6px 0 #071326, 0 8px 16px rgba(0,0,0,0.3);
  border-radius:18px;padding:18px 10px;color:#fff;
  transition:all 0.15s cubic-bezier(0.34,1.56,0.64,1);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.optBtn span{font-size:64px;transition:transform 0.2s}
.optBtn small{
  font-weight:900;font-size:15px;color:#fff;
  letter-spacing:0.5px;text-transform:uppercase;
}
.optBtn:hover:not(:disabled){
  border-color:var(--green);
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 9px 0 #071326, 0 12px 24px rgba(16,185,129,0.3);
}
.optBtn:active:not(:disabled){
  transform:translateY(3px);
  box-shadow:0 2px 0 #071326;
}
.optBtn.good{
  background:linear-gradient(180deg, #10b981, #059669) !important;
  border-color:#34d399 !important;
  box-shadow:0 0 24px rgba(52,211,153,0.7) !important;
  animation:popIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.optBtn.bad{
  background:linear-gradient(180deg, #ef4444, #b91c1c) !important;
  border-color:#f87171 !important;
  animation:shake 0.35s;
}
.optBtn:disabled{cursor:not-allowed}

/* ================== PENALTY – REESTRUCTURADO ================== */
.penProg{
  font-family:var(--font-ui);
  color:var(--muted);font-weight:700;font-size:14px;margin-bottom:4px;
}
.penScore{
  font-size:18px;font-weight:800;margin-bottom:16px;
  background:rgba(0,0,0,0.3);display:inline-block;padding:4px 14px;border-radius:12px;
}

.coachRow{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:10px auto 22px;
}
.coachBubble{
  background:#fff;color:#0a1a33;display:inline-block;
  padding:14px 24px;border-radius:20px;
  box-shadow:0 6px 0 #b45309, 0 10px 20px rgba(0,0,0,0.35);
  text-align:center;
  animation:popIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
#penCoach{
  font-size:26px;font-weight:900;letter-spacing:1px;color:#0a1a33;
}
.coachHint{
  font-size:15px;font-weight:800;color:#b45309;
  margin-top:4px;letter-spacing:0;
}
.coachHint b{color:#d97706;text-transform:lowercase}

.goalBox{
  position:relative;
  width:360px;height:240px;
  margin:0 auto 28px;
  background:linear-gradient(180deg,#38bdf8 0%,#7dd3fc 35%,#15803d 35%,#166534 100%);
  border:4px solid #fff;
  border-radius:16px 16px 0 0;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,0.5), inset 0 2px 6px rgba(255,255,255,0.4);
}
.goalBox::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:
    radial-gradient(ellipse at 70% 15%, rgba(255,255,255,0.5) 0%, transparent 45%),
    repeating-linear-gradient(90deg,rgba(255,255,255,0.06) 0 2px,transparent 2px 40px);
  pointer-events:none;
}

.goalNet{
  position:absolute;
  top:12px;left:50%;transform:translateX(-50%);
  width:76%;height:58%;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,0.7) 0 2px,transparent 2px 18px),
    repeating-linear-gradient(0deg,rgba(255,255,255,0.7) 0 2px,transparent 2px 18px);
  border:3.5px solid #fff;
  border-bottom:none;
  border-radius:8px 8px 0 0;
  box-shadow:inset 0 6px 12px rgba(0,0,0,0.3);
}

.goalKeeper{
  position:absolute;
  top:48%;left:50%;
  transform:translate(-50%,-50%);
  font-size:64px;
  z-index:3;
  transition:left 0.5s cubic-bezier(0.4,0,0.2,1),top 0.3s;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.6));
}

/* ================== PENALTY 3D ULTRA PREMIUM & SHOOTER BAR ================== */
.penShooterBar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(90deg, #09172f, #14284e);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 8px 16px;
  max-width: 580px;
  margin: 0 auto 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}
.psbLabel {
  font-family: var(--font-game);
  font-size: 12px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 1px;
}
.psbCurrentCard {
  width: 46px !important;
  height: 66px !important;
  max-width: 46px !important;
  max-height: 66px !important;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
  flex-shrink: 0;
  position: relative;
}
.psbCurrentCard .cardMaster {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}
.psbCurrentCard .cardPlayerFullImg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.psbCurrentCard .cardNamePlate, .psbCurrentCard .cardStatsBadge, .psbCurrentCard .cardTopBrand {
  display: none !important;
}
.psbSelectorWrap {
  flex: 1;
}
.psbSpecialSkill {
  font-family: var(--font-game);
  font-size: 10.5px;
  font-weight: 900;
  padding: 6px 12px;
  border-radius: 12px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.psbSpecialSkill.skill-gold {
  background: linear-gradient(90deg, #f59e0b, #d97706);
  color: #fff;
  box-shadow: 0 0 16px rgba(245,158,11,0.5);
  animation: pulseBtn 1.2s infinite alternate;
}
.psbSpecialSkill.skill-purple {
  background: linear-gradient(90deg, #8b5cf6, #6d28d9);
  color: #fff;
  box-shadow: 0 0 16px rgba(139,92,246,0.5);
}
.psbSpecialSkill.skill-blue {
  background: linear-gradient(90deg, #0284c7, #0369a1);
  color: #fff;
  box-shadow: 0 0 12px rgba(2,132,199,0.4);
}

.penTopStatus {
  display: flex;
  justify-content: space-between;
  max-width: 580px;
  margin: 0 auto 12px;
  font-weight: 800;
}

/* Estadio y Portería 3D */
.penStadium3D {
  position: relative;
  width: 100%;
  max-width: 580px;
  height: 310px;
  margin: 0 auto 20px;
  border-radius: 24px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #1e3a5f 0%, #081120 75%);
  border: 3px solid #1e3a6e;
  box-shadow: 0 16px 40px rgba(0,0,0,0.8), inset 0 0 50px rgba(0,0,0,0.7);
}
.stadiumLights {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.25) 0%, transparent 70%);
  pointer-events: none;
}

.goalFrame3D {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  height: 190px;
  border: 7px solid #ffffff;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 0 20px rgba(255,255,255,0.3), inset 0 0 15px rgba(0,0,0,0.5);
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.12) 0px, rgba(255,255,255,0.12) 2px, transparent 2px, transparent 16px),
              repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0px, rgba(255,255,255,0.12) 2px, transparent 2px, transparent 16px),
              linear-gradient(180deg, rgba(2, 6, 23, 0.7) 0%, rgba(15, 23, 42, 0.4) 100%);
}

.goalKeeper3D {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 52px;
  z-index: 3;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.8));
}
.goalKeeper3D.diveUp    { bottom: 65px; left: 50%; transform: translateX(-50%) scale(1.1); }
.goalKeeper3D.diveDown  { bottom: 0px;  left: 50%; transform: translateX(-50%) scale(0.95); }
.goalKeeper3D.diveLeft  { bottom: 35px; left: 24%; transform: rotate(-45deg) scale(1.05); }
.goalKeeper3D.diveRight { bottom: 35px; left: 76%; transform: rotate(45deg) scale(1.05); }

.penaltySpot3D {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
}
.goalBall3D {
  font-size: 42px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.7));
}

/* Trayectorias a las 4 direcciones (UP, DOWN, LEFT, RIGHT) */
.goalBall3D.to-up    { bottom: 175px; left: 50%; transform: translate(-50%, 0) scale(0.65) rotate(360deg); }
.goalBall3D.to-down  { bottom: 30px;  left: 50%; transform: translate(-50%, 0) scale(0.75) rotate(360deg); }
.goalBall3D.to-left  { bottom: 105px; left: calc(50% - 155px); transform: translate(-50%, 0) scale(0.7) rotate(-360deg); }
.goalBall3D.to-right { bottom: 105px; left: calc(50% + 155px); transform: translate(-50%, 0) scale(0.7) rotate(360deg); }

/* Efectos de Estela de Tiro */
.goalBall3D.gold-fire-shot {
  filter: drop-shadow(0 0 20px #fbbf24) drop-shadow(0 0 35px #f59e0b) brightness(1.3);
}
.goalBall3D.purple-plasma-shot {
  filter: drop-shadow(0 0 20px #c084fc) drop-shadow(0 0 35px #8b5cf6) brightness(1.3);
}
.goalBall3D.blue-wind-shot {
  filter: drop-shadow(0 0 16px #38bdf8) drop-shadow(0 0 28px #0284c7);
}

/* Layout en Cruz de 4 Direcciones */
.penZoneControls.crossLayout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
}
.penMidRow {
  display: flex;
  justify-content: center;
  gap: 14px;
  width: 100%;
}
.zoneBtn.dir {
  background: linear-gradient(180deg, #1b3a6b, #11254a);
  border: 2px solid var(--border-light);
  border-radius: 16px;
  padding: 12px 24px;
  font-family: var(--font-game);
  font-size: 13.5px;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 0 #09172f, 0 8px 16px rgba(0,0,0,0.4);
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
  min-width: 190px;
  text-align: center;
}
.zoneBtn.dir.up, .zoneBtn.dir.down {
  min-width: 230px;
}
.zoneBtn.dir:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: #38bdf8;
  background: linear-gradient(180deg, #254e8c, #163363);
  box-shadow: 0 9px 0 #09172f, 0 0 20px rgba(56,189,248,0.4);
}
.zoneBtn.dir:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #09172f;
}
.zoneBtn.dir.correct-hint {
  border-color: var(--green) !important;
  box-shadow: 0 0 24px var(--green) !important;
  background: linear-gradient(180deg, #10b981, #059669) !important;
}

@keyframes pulseBtn {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.08); }
}

/* ================== COLLECTION ================== */
.collGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}
/* ================== COLLECTION CARDS – COMPOSICIÓN MAESTRA ================== */
.card {
  background: transparent;
  border: none;
  border-radius: 16px;
  padding: 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  transition: transform .2s, box-shadow .2s;
  cursor: pointer;
}
.card.locked { opacity: .65; filter: grayscale(.4); }
.card:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(0,0,0,.6); }

.cardMaster {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 2 / 3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  background: #08101e;
  user-select: none;
  display: block;
}

/* 1. Fondo de la foto: 100% full bleed, centrado */
.cardFullBg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}
.cardPlayerFullImg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center 18% !important;
  display: block !important;
}

/* 2. Marco Overlay 3D por encima */
.cardOverlayFrame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  border-radius: 16px;
  box-sizing: border-box;
}

/* Bordes y brillos según categoría */
.cardMaster.legendary .cardOverlayFrame{
  border:4px solid #ffd700;
  box-shadow:inset 0 0 16px rgba(255,215,0,0.4), 0 0 12px rgba(255,215,0,0.5);
}
.cardMaster.epic .cardOverlayFrame{
  border:4px solid #a855f7;
  box-shadow:inset 0 0 16px rgba(168,85,247,0.4), 0 0 12px rgba(168,85,247,0.5);
}
.cardMaster.rare .cardOverlayFrame{
  border:4px solid #38bdf8;
  box-shadow:inset 0 0 16px rgba(56,189,248,0.4), 0 0 12px rgba(56,189,248,0.5);
}

/* Cabecera superior con marca y estrellas */
.cardTopBrand{
  position:absolute;
  top:0;left:34px;right:6px;
  padding:4px 6px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
  border-radius:0 18px 0 0;
}
.cardBrandText{
  font-family:var(--font-game);
  font-size:9px;
  font-weight:900;
  letter-spacing:1.2px;
  text-shadow:0 1px 3px #000;
}
.cardMaster.legendary .cardBrandText{ color:#fef08a; }
.cardMaster.epic .cardBrandText{ color:#e9d5ff; }
.cardMaster.rare .cardBrandText{ color:#bae6fd; }

.cardStars{
  font-size:9px;
  letter-spacing:1.5px;
  margin-top:1px;
  filter:drop-shadow(0 1px 2px #000);
}

/* 3. Escudo de Estadísticas Vertical Estilo FUT Oficial (Superior Izquierda) */
.cardStatsBadge{
  position:absolute;
  top:8px;
  left:8px;
  padding:4px 5px;
  border-radius:9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  background:rgba(6,14,30,0.88);
  border:1.5px solid rgba(255,255,255,0.3);
  backdrop-filter:blur(6px);
  box-shadow:0 4px 10px rgba(0,0,0,0.6);
  z-index:3;
  pointer-events:none;
  min-width:28px;
}
.cardMaster.legendary .cardStatsBadge{ border-color:#ffd700; background:rgba(20,15,5,0.92); box-shadow:0 0 12px rgba(255,215,0,0.3); }
.cardMaster.epic .cardStatsBadge{ border-color:#c084fc; background:rgba(25,10,35,0.92); box-shadow:0 0 12px rgba(192,132,252,0.3); }
.cardMaster.rare .cardStatsBadge{ border-color:#38bdf8; background:rgba(8,20,40,0.92); }

.csbOvr{
  font-family:var(--font-game);
  font-size:16px;
  font-weight:900;
  color:#fff;
  line-height:1;
  text-shadow:0 2px 4px #000;
}
.cardMaster.legendary .csbOvr{ color:#fef08a; }

.csbPos{
  font-family:var(--font-game);
  font-size:9.5px;
  font-weight:900;
  color:#38bdf8;
  line-height:1;
  letter-spacing:0.5px;
  margin-top:1px;
}
.cardMaster.legendary .csbPos{ color:#fde047; }
.cardMaster.epic .csbPos{ color:#c084fc; }

.csbFlag{
  font-size:13px;
  line-height:1;
  margin-top:2px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}

/* 4. Placa de Nombre Inferior Grande y Nítida (al pie de la carta) */
.cardNamePlate{
  position:absolute;
  bottom:8px;
  left:8px;
  right:8px;
  padding:6px 8px;
  border-radius:10px;
  background:rgba(6,14,30,0.92);
  border:2px solid rgba(255,255,255,0.3);
  backdrop-filter:blur(8px);
  text-align:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.8);
  z-index:3;
  pointer-events:none;
}
.cardMaster.legendary .cardNamePlate{ border-color:#ffd700; background:linear-gradient(180deg, rgba(40,30,10,0.95), rgba(15,10,5,0.95)); box-shadow:0 0 14px rgba(255,215,0,0.4); }
.cardMaster.epic .cardNamePlate{ border-color:#c084fc; background:linear-gradient(180deg, rgba(35,15,50,0.95), rgba(15,5,25,0.95)); box-shadow:0 0 14px rgba(192,132,252,0.4); }
.cardMaster.rare .cardNamePlate{ border-color:#38bdf8; background:linear-gradient(180deg, rgba(10,30,60,0.95), rgba(5,15,30,0.95)); }

.cnpText{
  font-family:var(--font-game);
  font-size:14.5px;
  font-weight:900;
  color:#fff;
  letter-spacing:1.5px;
  text-shadow:0 2px 6px rgba(0,0,0,0.95);
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Mini Cards (Tira del Home) */
.miniCard .cardTopBrand{ display:none !important; }
.miniCard .cardStatsBadge{
  top:4px !important; left:4px !important; width:22px !important;
  padding:2px 1px !important; border-radius:6px !important;
  border-width:1px !important;
}
.miniCard .csbOvr{ font-size:10px !important; }
.miniCard .csbPos{ font-size:6.5px !important; }
.miniCard .csbFlag{ font-size:8px !important; margin-top:0 !important; }
.miniCard .cardNamePlate{
  bottom:4px !important; left:4px !important; right:4px !important;
  padding:2px 4px !important; border-radius:6px !important;
  border-width:1px !important;
}
.miniCard .cnpText{ font-size:9px !important; letter-spacing:0.5px !important; }

/* Palabras de Aprendizaje (Ubicadas DEBAJO de la carta para no tapar el nombre) */
.card.celebrate {
  overflow: visible !important;
  max-width: 280px;
  margin: 0 auto;
}
.cWords{
  position: relative;
  margin-top: 14px;
  padding: 0;
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  z-index: 10;
}
.cWords .chip{
  background: rgba(14,30,60,0.9);
  color:#fff;
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 800;
  border: 1.5px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: all .15s;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.cWords .chip:hover{
  background: var(--green);
  border-color: var(--green);
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(53,194,74,.6);
}

.cLock{
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  border-radius: 12px;
  z-index: 3;
}
.cLockIcon{ font-size: 52px; margin-bottom: 8px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.7)); }
.cLockName{ font-size: 17px; font-weight: 900; letter-spacing: 1.5px; color: #fff; margin-bottom: 6px; text-shadow: 0 2px 4px rgba(0,0,0,.8); }
.cLockReq{ font-size: 11px; color: var(--gold); line-height: 1.35; padding: 6px 10px; background: rgba(0,0,0,.55); border-radius: 8px; border: 1px solid rgba(255,201,60,.3); max-width: 85%; }

.card.celebrate{
  width: 340px;
  max-width: 80vw;
}

/* ================== OVERLAYS ================== */
#flash{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;font-size:72px;font-weight:900;color:#fff;
  text-shadow:0 4px 20px rgba(0,0,0,.8),0 0 30px rgba(255,255,255,.5);
  opacity:0;z-index:1000;
}
#flash.show{animation:popIn .9s ease}
#toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);
  background:#000c;color:#fff;padding:12px 22px;border-radius:12px;
  font-weight:700;z-index:999;box-shadow:0 6px 24px rgba(0,0,0,.5);
  border:2px solid var(--gold);transition:.35s;
}
#toast.show{transform:translateX(-50%) translateY(0)}

.panel.center{max-width:440px;margin:20px auto;text-align:center;padding:30px}
.panel.center h2{margin-top:0}

/* ================== UNLOCK & PACK OPENING CINEMATIC ================== */
.unlockOv{
  position:fixed;inset:0;z-index:99999 !important;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 50% 50%, rgba(13,31,61,0.7) 0%, rgba(4,10,24,0.92) 80%),
    url('../img/pack_stadium_bg.jpg') center/cover no-repeat;
  backdrop-filter:blur(8px);
  animation:fadeIn 0.3s;
  overflow-y:auto;
  padding:20px 10px 40px;
}
.packRays{
  position:absolute;inset:0;
  background:radial-gradient(circle at center, rgba(251,191,36,0.3) 0%, transparent 65%);
  pointer-events:none;
}
.packRays::before{
  content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:conic-gradient(
    from 0deg,
    rgba(251,191,36,0.2) 0deg 18deg, transparent 18deg 36deg,
    rgba(251,191,36,0.2) 36deg 54deg, transparent 54deg 72deg,
    rgba(251,191,36,0.2) 72deg 90deg, transparent 90deg 108deg,
    rgba(251,191,36,0.2) 108deg 126deg, transparent 126deg 144deg,
    rgba(251,191,36,0.2) 144deg 162deg, transparent 162deg 180deg,
    rgba(251,191,36,0.2) 180deg 198deg, transparent 198deg 216deg,
    rgba(251,191,36,0.2) 216deg 234deg, transparent 234deg 252deg,
    rgba(251,191,36,0.2) 252deg 270deg, transparent 270deg 288deg,
    rgba(251,191,36,0.2) 288deg 306deg, transparent 306deg 324deg,
    rgba(251,191,36,0.2) 324deg 342deg, transparent 342deg 360deg
  );
  animation:raySpin 20s linear infinite;
}
@keyframes raySpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

.unlockInner{
  text-align:center;z-index:2;
  padding:16px;max-width:460px;
  position:relative;
  margin:auto;
  display:flex;flex-direction:column;align-items:center;
}
.packReveal{
  display:flex;flex-direction:column;align-items:center;width:100%;
}
.fcClaimBtn{
  margin-top:16px !important;
  margin-bottom:10px !important;
  padding:14px 32px !important;
  font-size:16px !important;
  z-index:100000 !important;
  position:relative !important;
  box-shadow:0 8px 24px rgba(16,185,129,0.7), 0 0 20px rgba(52,211,153,0.5) !important;
  animation:pulseBtn 1.5s infinite alternate !important;
}

/* Sobre 3D EA FC */
.futPack{
  width:220px;height:330px;
  border-radius:20px;
  margin:0 auto 14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,0.9), 0 0 45px rgba(251,191,36,0.8);
  animation:packFloat 2s ease-in-out infinite alternate;
  transform-style:preserve-3d;
  transition:transform 0.2s, box-shadow 0.2s;
  overflow:visible;
}
.futPackImg{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:18px;border:2.5px solid rgba(254,240,138,0.8);
}
.futPack:hover{
  transform:scale(1.08) rotate(2deg);
  box-shadow:0 26px 70px rgba(0,0,0,0.95), 0 0 60px rgba(251,191,36,1);
}
.futPack.opening{
  animation:packPop 0.65s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes packFloat{
  from{transform:translateY(0) rotate(-1.5deg)}
  to{transform:translateY(-14px) rotate(1.5deg)}
}
@keyframes packPop{
  0%{transform:scale(1) rotate(0)}
  40%{transform:scale(0.85) rotate(-6deg)}
  70%{transform:scale(1.25) rotate(6deg);filter:brightness(2.4)}
  100%{transform:scale(1.9) rotate(0);opacity:0}
}
.packShine{
  position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.6) 50%, transparent 70%);
  animation:shine 2s infinite;
  pointer-events:none;
}
.packTap{
  position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);
  font-size:12px;font-weight:900;color:#000;
  background:linear-gradient(90deg, #fef08a, #fbbf24);
  padding:6px 18px;border-radius:16px;
  letter-spacing:1px;white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,0.6), 0 0 16px rgba(251,191,36,0.6);
  animation:pulseBtn 0.6s infinite alternate;
}

.unlockTitle{
  font-size:36px;font-weight:900;
  color:var(--gold);
  text-shadow:0 0 24px rgba(251,191,36,0.8),0 0 48px rgba(251,191,36,0.4);
  margin-bottom:6px;letter-spacing:2px;
  animation:titlePop 0.7s cubic-bezier(0.34,1.56,0.64,1);
}
.unlockSub{
  font-family:var(--font-ui);
  color:var(--muted);font-size:14px;font-weight:600;margin-bottom:18px;
}
.unlockSub b{color:var(--gold)}

/* Efectos ultra premium para cartas legendarias doradas */
.unlockOv.legendaryPack{
  animation:goldPulseBg 1.5s infinite alternate;
}
.unlockOv.legendaryPack .unlockTitle{
  font-size:42px;
  background:linear-gradient(180deg, #ffffff 0%, #fef08a 40%, #fbbf24 80%, #b45309 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 28px rgba(251,191,36,0.9));
}
.unlockOv.legendaryPack .unlockCard .card{
  box-shadow:0 0 40px rgba(251,191,36,0.9), 0 0 90px rgba(251,191,36,0.5), 0 20px 50px rgba(0,0,0,0.9);
  animation:cardReveal 0.9s cubic-bezier(0.34,1.56,0.64,1), legendaryGlow 2s infinite alternate;
}
@keyframes goldPulseBg{
  from{filter:brightness(1)}
  to{filter:brightness(1.2) contrast(1.05)}
}
@keyframes legendaryGlow{
  from{transform:scale(1)}
  to{transform:scale(1.03)}
}

.unlockCard{
  animation:cardReveal 0.9s cubic-bezier(0.34,1.56,0.64,1);
  margin:0 auto 20px;display:inline-block;
}
.unlockCard .card{ width: 320px; max-width: 85vw; }

.fcClaimBtn{
  font-size:18px !important;padding:16px 36px !important;
  box-shadow:0 7px 0 #064e3b, 0 12px 28px rgba(16,185,129,0.5) !important;
}

#confetti{
  position:absolute;inset:0;
  pointer-events:none;overflow:hidden;
}
.confetti-piece{
  position:absolute;
  width:10px;height:14px;
  top:-15px;
  animation:confettiFall 3s ease-out forwards;
}

@keyframes cardReveal{
  0%   { transform:scale(0.2) rotate(-180deg); opacity:0; }
  60%  { transform:scale(1.15) rotate(8deg); opacity:1; }
  100% { transform:scale(1) rotate(0); }
}
@keyframes titlePop{
  0%   { transform:scale(0) translateY(30px); opacity:0; }
  60%  { transform:scale(1.2) translateY(-5px); }
  100% { transform:scale(1) translateY(0); }
}
@keyframes confettiFall{
  0%   { transform:translateY(0) rotate(0) scale(1); opacity:1; }
  100% { transform:translateY(100vh) rotate(720deg) scale(0.5); opacity:0; }
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes popIn{0%{transform:scale(.4);opacity:0}30%{transform:scale(1.15);opacity:1}60%{transform:scale(1)}100%{opacity:0}}
@keyframes shine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ================== MATCH (Partido arcade) ================== */
.matchGate, .matchBox{
  max-width:600px;margin:0 auto;
  background:linear-gradient(180deg, rgba(22,50,92,0.95), rgba(13,31,61,0.95));
  border:2.5px solid var(--border-light);
  border-radius:24px;padding:26px;text-align:center;
  box-shadow:0 12px 32px rgba(0,0,0,0.45);
}
.matchTitle{
  font-size:30px;font-weight:900;color:var(--gold);
  letter-spacing:2px;margin-bottom:10px;
  text-shadow:0 2px 8px rgba(0,0,0,0.4);
}
.matchVs{
  display:flex;align-items:center;justify-content:center;
  gap:30px;margin:16px 0 10px;
}
.vsFlag{
  display:flex;flex-direction:column;align-items:center;
  gap:6px;font-weight:900;font-size:14px;letter-spacing:1px;
}
.vsText{
  font-size:28px;font-weight:900;color:var(--red);
  text-shadow:0 2px 10px rgba(239,68,68,0.6);
}

/* Campo de juego con césped rayado y focos de estadio */
.matchField{
  position:relative;
  width:100%;max-width:560px;height:180px;
  margin:16px auto;
  background:
    repeating-linear-gradient(90deg, #15803d 0 45px, #166534 45px 90px),
    linear-gradient(180deg, #16a34a, #14532d);
  border:3.5px solid #fff;border-radius:16px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,0.5), inset 0 0 20px rgba(0,0,0,0.3);
}
.matchField::before{
  content:'';position:absolute;top:50%;left:0;right:0;
  height:2.5px;background:rgba(255,255,255,0.6);
}
.matchField::after{
  content:'';position:absolute;top:50%;left:50%;
  width:68px;height:68px;
  border:2.5px solid rgba(255,255,255,0.6);border-radius:50%;
  transform:translate(-50%,-50%);
}
.fieldGoal{
  position:absolute;left:4%;top:50%;
  transform:translateY(-50%);font-size:46px;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}
.fieldKeeper{
  position:absolute;left:18%;top:50%;
  transform:translateY(-50%);font-size:38px;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,0.5));
  animation:pulseBtn 1.2s infinite alternate;
}
.fieldPlayer{
  position:absolute;right:22%;top:50%;
  transform:translateY(-50%);font-size:38px;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}
.fieldBall{
  position:absolute;right:14%;top:50%;
  transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  transition:right 0.7s cubic-bezier(0.34,1.56,0.64,1);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.6));
  z-index:3;
}
.fieldBall img, .fieldBall span{font-size:32px}
.fieldBall img{width:38px;height:38px;object-fit:contain}
.fieldBall.ballPass  { right:72%; filter:drop-shadow(0 0 12px var(--blue)); }
.fieldBall.ballRun   { right:48%; filter:drop-shadow(0 0 12px var(--orange)); }
.fieldBall.ballShoot { right:92%; filter:drop-shadow(0 0 16px var(--green)); }

/* Botones de acción PASS/RUN/SHOOT */
.actionRow{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:10px;max-width:520px;margin:18px auto 0;
}
.actionBtn{
  padding:16px 8px;border-radius:14px;
  font-weight:900;color:#fff;font-size:14px;
  border:3px solid;transition:all 0.15s;
  display:flex;flex-direction:column;
  align-items:center;gap:2px;
  letter-spacing:1px;
}
.actionBtn .abEmoji{font-size:30px;line-height:1}
.actionBtn .abLabel{font-size:14px;font-weight:900}
.actionBtn.pass{
  background:linear-gradient(180deg,#1f7ae0,#114e95);
  border-color:#1f7ae0;
}
.actionBtn.run{
  background:linear-gradient(180deg,#ff9d1b,#b85e00);
  border-color:#ff9d1b;
}
.actionBtn.shoot{
  background:linear-gradient(180deg,#35c24a,#1e8a2f);
  border-color:#35c24a;
}
.actionBtn:hover:not(:disabled){
  transform:translateY(-3px) scale(1.04);
  filter:brightness(1.12);
}
.actionBtn:disabled{opacity:0.5;cursor:not-allowed}
.actionBtn.correct-hint{
  box-shadow:0 0 14px var(--green),0 0 28px var(--green);
  animation:pulseBtn 0.5s 3;
}

/* Pantalla final */
.matchFinalScore{
  display:flex;justify-content:center;align-items:center;
  gap:30px;margin:20px 0;
}
.fsTeam{
  text-align:center;font-weight:900;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.fsL{font-size:12px;letter-spacing:1px;color:var(--muted)}
.fsGoals{
  font-size:48px;color:var(--gold);margin-top:4px;
  text-shadow:0 3px 10px rgba(255,201,60,.5);
}
.fsDash{font-size:40px;color:var(--muted);font-weight:900}
.matchRewardTxt{
  font-size:18px;font-weight:800;color:var(--green);margin:10px 0;
}
.matchNewCard{
  font-size:15px;color:var(--gold);font-weight:800;
  padding:10px;background:#b8860b22;border-radius:8px;margin:10px 0;
}

/* Halftime overlay */
.halftimeOv{
  position:fixed;inset:0;z-index:1500;
  background:rgba(0,0,0,.85);backdrop-filter:blur(6px);
  display:grid;place-items:center;animation:fadeIn 0.3s;
}
.htInner{
  background:var(--bg1);border:3px solid var(--gold);
  border-radius:18px;padding:28px;max-width:520px;text-align:center;
}
.htTitle{
  font-size:34px;font-weight:900;color:var(--gold);
  margin-bottom:6px;letter-spacing:2px;
}
.htSub{color:var(--muted);font-size:14px;margin-bottom:16px}
.htSub b{color:var(--gold)}
.htQ{
  font-size:26px;font-weight:900;color:#fff;
  margin:14px 0 4px;letter-spacing:1px;
}
.htHint{color:var(--gold);font-size:13px;margin-bottom:18px}
.htOpts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.htOpt{
  background:var(--bg2);border:3px solid var(--border);
  border-radius:12px;padding:8px;color:#fff;
  font-weight:700;font-size:12px;transition:all 0.15s;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.htOpt img{
  width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px;
}
.htOpt:hover:not(:disabled){
  border-color:var(--green);transform:scale(1.04);
}
.htOpt.good{
  border-color:var(--green);background:#1a5c2a;
}
.htOpt.bad{
  border-color:var(--red);background:#5c1a1a;
}
.htOpt:disabled{cursor:not-allowed;opacity:0.85}

/* Match goal overlay */
.matchGoalOv{
  position:fixed;inset:0;z-index:1600;
  background:radial-gradient(circle at center,rgba(53,194,74,.35) 0%,rgba(0,0,0,.85) 70%);
  display:grid;place-items:center;animation:fadeIn 0.2s;
  pointer-events:none;
}
.mgWrap{text-align:center;position:relative;z-index:2}
.mgText{
  font-size:88px;font-weight:900;color:#fff;
  text-shadow:0 4px 20px rgba(53,194,74,.8),0 0 40px rgba(255,255,255,.3);
  animation:goalPop 1.4s ease forwards;
}
.mgTeam{
  font-size:26px;font-weight:900;color:var(--gold);
  margin-top:10px;letter-spacing:3px;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.mgConf{
  position:absolute;width:10px;height:14px;top:-20px;
  animation:confettiFall 2s ease-out forwards;
}
@keyframes goalPop{
  0%   { transform:scale(0) rotate(-20deg); opacity:0; }
  40%  { transform:scale(1.3) rotate(5deg); opacity:1; }
  70%  { transform:scale(1) rotate(0); }
  100% { transform:scale(1) rotate(0); opacity:1; }
}

/* ================== SPELLING ================== */
.spellBox{
  max-width:640px;margin:0 auto;
  background:linear-gradient(180deg, rgba(22,50,92,0.95), rgba(13,31,61,0.95));
  border:2px solid var(--border-light);
  border-radius:24px;padding:26px;text-align:center;
  box-shadow:0 12px 32px rgba(0,0,0,0.45);
}
.spellProg{
  font-family:var(--font-ui);
  color:var(--muted);margin-bottom:4px;font-size:14px;font-weight:700;
}
.spellScore{
  font-size:16px;font-weight:800;margin-bottom:14px;
  background:rgba(0,0,0,0.25);display:inline-block;padding:4px 14px;border-radius:12px;
}
.spellPrompt{margin:10px 0 6px}
.spellEmoji{font-size:68px;display:block;margin-bottom:6px;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.4))}
.spellEs{
  font-size:32px;font-weight:900;color:#fff;
  letter-spacing:2px;text-shadow:0 2px 8px rgba(0,0,0,0.4);
}
.spellHint{
  font-family:var(--font-ui);
  font-size:14px;color:var(--gold);
  margin-top:4px;font-weight:700;
}
.spellSlots{
  display:flex;justify-content:center;
  gap:10px;margin:22px 0 18px;flex-wrap:wrap;
}
.spellSlot{
  width:50px;height:62px;
  background:#060e1e;border:3px solid var(--border);
  border-radius:14px;
  font-size:30px;font-weight:900;color:#fff;
  display:grid;place-items:center;
  letter-spacing:1px;text-transform:uppercase;
  transition:all .2s;
  box-shadow:inset 0 3px 6px rgba(0,0,0,0.5);
}
.spellSlot.filled{
  border-color:var(--blue);
  background:linear-gradient(180deg,#1e498a,#0e264c);
  animation:slotPop .25s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 0 14px rgba(14,165,233,0.4);
}
.spellSlot.correct{
  border-color:var(--green);
  background:linear-gradient(180deg,#10b981,#047857);
  box-shadow:0 0 18px rgba(16,185,129,0.7);
}
.spellSlot.wrong{
  border-color:var(--red);background:linear-gradient(180deg,#ef4444,#991b1b);
  animation:shake .35s;
}
@keyframes slotPop{
  0%{transform:scale(0.6);opacity:0}
  100%{transform:scale(1);opacity:1}
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}
.spellTiles{
  display:flex;justify-content:center;
  gap:10px;flex-wrap:wrap;margin:12px 0;
}
.spellTile{
  min-width:52px;height:56px;padding:0 12px;
  background:linear-gradient(180deg,var(--blue),#0284c7);
  border:2px solid rgba(255,255,255,0.3);
  box-shadow:0 5px 0 #0369a1, 0 6px 12px rgba(0,0,0,0.3);
  color:#fff;border-radius:14px;
  font-size:26px;font-weight:900;
  text-transform:uppercase;letter-spacing:1px;
  transition:all .12s cubic-bezier(0.34,1.56,0.64,1);
}
.spellTile:hover:not(:disabled){
  transform:translateY(-3px) scale(1.06);
  filter:brightness(1.15);
  box-shadow:0 8px 0 #0369a1, 0 10px 20px rgba(14,165,233,0.4);
}
.spellTile:active:not(:disabled){
  transform:translateY(3px);
  box-shadow:0 2px 0 #0369a1;
}
.spellTile:disabled{
  opacity:0.25;cursor:not-allowed;transform:scale(0.9);box-shadow:none;
}
.spellTools{
  display:flex;justify-content:center;
  gap:12px;margin-top:14px;
}
.spellToolBtn{
  padding:12px 20px;
  background:linear-gradient(180deg, #16325c, #0d1f3d);
  border:2px solid var(--border-light);
  box-shadow:0 4px 0 #071326;
  color:#fff;
  border-radius:14px;font-weight:800;font-size:15px;
  transition:all .12s;
}
.spellToolBtn:hover{border-color:var(--gold);transform:translateY(-2px)}
.spellToolBtn:active{transform:translateY(3px);box-shadow:0 1px 0 #071326}
.spellToolBtn.primary{
  background:linear-gradient(180deg,var(--purple),#7c3aed);
  border-color:rgba(255,255,255,0.25);
  box-shadow:0 4px 0 #5b21b6;
}
.spellFeedback{
  margin-top:16px;padding:12px 18px;
  border-radius:14px;font-weight:900;font-size:18px;
  letter-spacing:1px;min-height:42px;
}
.spellFeedback.ok{
  background:linear-gradient(180deg,#10b981,#059669);
  color:#fff;box-shadow:0 0 20px rgba(16,185,129,0.5);
}
.spellFeedback.bad{
  background:linear-gradient(180deg,#ef4444,#b91c1c);
  color:#fff;box-shadow:0 0 20px rgba(239,68,68,0.5);
}
.spellFeedback.show{animation:slotPop .3s cubic-bezier(0.34,1.56,0.64,1)}

/* ================== LIGHTBOX (carta ampliada) ================== */
.lightboxOv{
  position:fixed;inset:0;z-index:1800;
  display:grid;place-items:center;
  background:rgba(0,0,0,0.88);
  backdrop-filter:blur(12px);
  animation:fadeIn 0.25s;
  padding:16px;
}
.lightboxInner{
  position:relative;
  max-width:480px;width:100%;
  background:linear-gradient(180deg, rgba(22,50,92,0.98), rgba(13,31,61,0.98));
  border:2px solid var(--border-light);
  border-radius:24px;padding:22px;
  text-align:center;
  animation:cardReveal 0.5s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 20px 48px rgba(0,0,0,0.6);
}
.lightboxCard{
  width:100%;max-width:320px;aspect-ratio:2/3;
  margin:0 auto;border-radius:16px;
  overflow:hidden;position:relative;
  box-shadow:0 12px 28px rgba(0,0,0,0.5);
}
.lightboxCard img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.lightboxDetails{
  margin-top:16px;padding:14px;
  background:rgba(6,14,30,0.8);border-radius:16px;
  text-align:left;border:1px solid rgba(255,255,255,0.1);
}
.lbName{
  font-size:24px;font-weight:900;color:#fff;
  margin-bottom:4px;letter-spacing:1.5px;
}
.lbSub{
  font-family:var(--font-ui);
  font-size:14px;color:var(--muted);margin-bottom:6px;font-weight:600;
}
.lbSub .flag{vertical-align:middle;margin-right:6px}
.lbStars{color:var(--gold);font-size:20px;margin-bottom:8px}
.lbStats{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:6px 12px;font-size:14px;margin:8px 0;
  font-family:var(--font-ui);
}
.lbStats .lbStat{color:#fff;font-weight:600}
.lbStats b{color:var(--gold);font-weight:800}
.lbWords{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:12px;justify-content:center;
}
.lbWords .chip{
  background:rgba(255,255,255,0.12);color:#fff;
  padding:6px 14px;border-radius:14px;
  font-size:13px;font-weight:800;
  border:1px solid rgba(255,255,255,0.3);
  cursor:pointer;transition:all .15s;
}
.lbWords .chip:hover{
  background:var(--green);border-color:var(--green);transform:scale(1.05);
}
.lbClose{
  position:absolute;top:10px;right:12px;
  background:rgba(0,0,0,0.6);color:#fff;
  width:38px;height:38px;border-radius:50%;
  font-size:22px;display:grid;place-items:center;
  z-index:10;border:1.5px solid var(--border-light);
  cursor:pointer;transition:all 0.15s;
}
.lbClose:hover{background:var(--red);transform:scale(1.1)}
.lbLocked{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.8);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;color:#fff;
  text-align:center;padding:20px;border-radius:16px;
  gap:8px;
}
.lbLockedIcon{font-size:56px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.7))}
.lbLockedReq{
  font-family:var(--font-ui);
  font-size:14px;color:var(--gold);font-weight:700;
  padding:8px 16px;
  background:rgba(0,0,0,0.6);
  border:1.5px solid rgba(251,191,36,0.4);
  border-radius:10px;margin-top:4px;max-width:90%;
}
/* Card click pointer */
#collGrid .card{cursor:pointer}

/* ================== SHOP (Bloque 4) ================== */
.shopBox{
  max-width:880px;margin:0 auto;
  background:linear-gradient(180deg, rgba(22,50,92,0.95), rgba(13,31,61,0.95));
  border:2px solid var(--border-light);
  border-radius:24px;padding:22px;
  box-shadow:0 12px 32px rgba(0,0,0,0.45);
}
#shopTabs{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;
}
.shopTab{
  padding:10px 16px;
  background:linear-gradient(180deg, #16325c, #0d1f3d);
  border:2px solid var(--border-light);
  box-shadow:0 4px 0 #071326;
  color:var(--muted);border-radius:14px;font-weight:800;font-size:14px;
  transition:all .15s;
}
.shopTab.active{
  border-color:var(--gold);color:#fff;
  background:linear-gradient(180deg,#fbbf24,#d97706);
  box-shadow:0 4px 0 #92400e;
}
.shopTab:hover:not(.active){color:#fff;border-color:#fff;transform:translateY(-1px)}
.shopGrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;
}
.itemTile{
  background:linear-gradient(180deg, #1b3a6b, #11254a);
  border:2px solid var(--border-light);
  box-shadow:0 5px 0 #071326, 0 8px 16px rgba(0,0,0,0.3);
  border-radius:18px;
  padding:16px 12px;text-align:center;transition:all .18s cubic-bezier(0.34,1.56,0.64,1);position:relative;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.itemTile.epic{border-color:var(--epic);box-shadow:0 0 14px rgba(139,92,246,0.35)}
.itemTile.legendary{
  border-color:var(--gold);
  box-shadow:0 0 16px rgba(251,191,36,0.4);
  background:linear-gradient(180deg,#3d2a08,#1f1504);
}
.itemTile:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(0,0,0,.45)}
.itemTile.owned{background:linear-gradient(180deg,#1a3e75,#0d2244)}
.itemTile.owned::after{
  content:'✓ OWNED';position:absolute;top:8px;right:8px;
  background:var(--green);color:#fff;font-size:10px;font-weight:900;
  padding:3px 8px;border-radius:8px;letter-spacing:.5px;
}
.itemTile.locked{opacity:.75}
.itemEmoji{font-size:56px;margin:4px 0;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.itemEmoji img{max-width:76px;max-height:76px;object-fit:contain;display:inline-block}

/* Wrapper para items con imagen real + fallback a emoji */
.itemVisualWrap{position:relative;display:inline-block}
.itemVisual{max-width:76px;max-height:76px;object-fit:contain;display:inline-block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.itemVisualWrap.small .itemVisual{max-width:44px;max-height:44px}
.itemVisualFallback{display:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.itemVisualWrap.itemVisualBroken .itemVisual{display:none}

/* ================== TIENDA DE SOBRES FUT 3D ULTRA PREMIUM ================== */
.packsWrapper {
  max-width: 1040px;
  margin: 0 auto 30px;
  padding: 0 10px;
}
.myPacksContainer {
  background: linear-gradient(135deg, #132448 0%, #0d1e3d 50%, #081126 100%);
  border: 2px solid var(--gold);
  border-radius: 24px;
  padding: 18px 24px;
  margin-bottom: 28px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 0 25px rgba(251,191,36,0.3);
  position: relative;
  overflow: hidden;
}
.myPacksContainer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.mpHeader {
  text-align: center;
  margin-bottom: 16px;
}
.mpHeader h3 {
  font-family: var(--font-game);
  font-size: 20px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 1.5px;
  margin: 0 0 4px;
  text-shadow: 0 0 12px rgba(251,191,36,0.5);
}
.mpHeader p {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
}
.myPacksList {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.myPackItem {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, #0f2245 0%, #07132a 100%);
  border: 1.5px solid rgba(251,191,36,0.4);
  border-radius: 16px;
  padding: 10px 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.7), 0 0 14px rgba(251,191,36,0.2);
}
.myPackThumb {
  width: 48px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.8);
}
.myPackThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.myPackInfo {
  text-align: left;
}
.myPackName {
  font-family: var(--font-game);
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
}
.myPackCount {
  font-size: 11.5px;
  color: var(--gold);
  font-weight: 800;
  margin-top: 2px;
}
.openStoredBtn {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
  color: #1e1002 !important;
  border: 1.5px solid #fef08a !important;
  box-shadow: 0 4px 0 #92400e, 0 0 16px rgba(245,158,11,0.6) !important;
  font-family: var(--font-game);
  font-weight: 900 !important;
  letter-spacing: 0.8px;
  border-radius: 12px !important;
  cursor: pointer;
  transition: all 0.15s;
}
.openStoredBtn:hover {
  filter: brightness(1.15) !important;
  transform: scale(1.06) !important;
  box-shadow: 0 6px 0 #92400e, 0 0 22px rgba(245,158,11,0.8) !important;
}

.packsCatalogHeader {
  text-align: center;
  margin-bottom: 24px;
}
.packsCatalogHeader h3 {
  font-family: var(--font-game);
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1.5px;
  margin: 0 0 6px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.packsCatalogHeader p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.packsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.packCard3D {
  background: linear-gradient(180deg, #101e3d 0%, #091326 100%);
  border: 2px solid rgba(255,255,255,0.14);
  border-radius: 26px;
  padding: 22px 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s, box-shadow 0.3s;
}
.packCard3D:hover {
  transform: translateY(-10px) scale(1.02);
}
.packCard3D.argentina {
  border-color: rgba(56,189,248,0.6);
  box-shadow: 0 16px 40px rgba(0,0,0,0.7), 0 0 30px rgba(56,189,248,0.25);
}
.packCard3D.argentina:hover {
  box-shadow: 0 22px 55px rgba(0,0,0,0.85), 0 0 45px rgba(56,189,248,0.45);
}
.packCard3D.portugal {
  border-color: rgba(239,68,68,0.6);
  box-shadow: 0 16px 40px rgba(0,0,0,0.7), 0 0 30px rgba(239,68,68,0.25);
}
.packCard3D.portugal:hover {
  box-shadow: 0 22px 55px rgba(0,0,0,0.85), 0 0 45px rgba(239,68,68,0.45);
}
.packCard3D.mixed {
  border-color: rgba(251,191,36,0.6);
  box-shadow: 0 16px 40px rgba(0,0,0,0.7), 0 0 35px rgba(251,191,36,0.3);
}
.packCard3D.mixed:hover {
  box-shadow: 0 22px 55px rgba(0,0,0,0.85), 0 0 50px rgba(251,191,36,0.55);
}

.pcRarityTag {
  font-family: var(--font-game);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 4px 14px;
  border-radius: 12px;
  margin-bottom: 14px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
}
.packCard3D.argentina .pcRarityTag {
  background: linear-gradient(90deg, #0284c7, #0369a1);
  color: #fff;
  box-shadow: 0 0 12px rgba(2,132,199,0.5);
}
.packCard3D.portugal .pcRarityTag {
  background: linear-gradient(90deg, #dc2626, #15803d);
  color: #fff;
  box-shadow: 0 0 12px rgba(220,38,38,0.5);
}
.packCard3D.mixed .pcRarityTag {
  background: linear-gradient(90deg, #f59e0b, #d97706);
  color: #fff;
  box-shadow: 0 0 12px rgba(245,158,11,0.5);
}

.pcImageWrap {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 285px;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.75);
  border: 2px solid rgba(255,255,255,0.15);
}
.pcPackImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.packCard3D:hover .pcPackImg {
  transform: scale(1.08);
}

.pcBadgePrice {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(6,14,30,0.94);
  color: var(--gold);
  border: 1.5px solid var(--gold);
  font-family: var(--font-game);
  font-size: 13.5px;
  font-weight: 900;
  padding: 4px 12px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.8), 0 0 10px rgba(251,191,36,0.4);
}

.pcInfo {
  width: 100%;
  margin-bottom: 18px;
}
.pcTitle {
  font-family: var(--font-game);
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
  margin: 0 0 3px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
.pcCountryFlag {
  font-size: 11.5px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.pcDesc {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
  margin: 0 0 12px;
  min-height: 32px;
}

.pcOddsBar {
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 900;
}
.pcOddsBar span {
  padding: 4px 10px;
  border-radius: 8px;
}
.odd-blue {
  background: rgba(2,132,199,0.25);
  color: #38bdf8;
  border: 1px solid #0284c7;
}
.odd-purple {
  background: rgba(139,92,246,0.25);
  color: #c084fc;
  border: 1px solid #8b5cf6;
}
.odd-gold {
  background: rgba(245,158,11,0.25);
  color: #fbbf24;
  border: 1px solid #f59e0b;
  box-shadow: 0 0 8px rgba(245,158,11,0.3);
}

.pcActions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
.buyPackBtn {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 50%, #075985 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #38bdf8 !important;
  box-shadow: 0 5px 0 #0c4a6e, 0 8px 18px rgba(2,132,199,0.45) !important;
  font-family: var(--font-game);
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: 0.8px;
  padding: 11px 14px !important;
  border-radius: 14px !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  cursor: pointer;
  transition: all 0.15s;
}
.buyPackBtn:hover {
  filter: brightness(1.15) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 0 #0c4a6e, 0 12px 24px rgba(2,132,199,0.6) !important;
}
.buyPackBtn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 2px 0 #0c4a6e !important;
}

.openNowBtn {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
  color: #1e1002 !important;
  border: 1.5px solid #fef08a !important;
  box-shadow: 0 5px 0 #92400e, 0 8px 20px rgba(245,158,11,0.55), inset 0 1px 0 rgba(255,255,255,0.7) !important;
  font-family: var(--font-game);
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: 0.8px;
  padding: 11px 14px !important;
  border-radius: 14px !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 0.15s;
}
.openNowBtn:hover {
  filter: brightness(1.15) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 0 #92400e, 0 14px 28px rgba(245,158,11,0.75), inset 0 1px 0 #fff !important;
}
.openNowBtn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 2px 0 #92400e !important;
}

/* ================== TIENDA ULTRA PREMIUM 3D ================== */
.shopTabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.shopTab {
  background: #09172f;
  border: 1.5px solid var(--border-light);
  color: #fff;
  border-radius: 12px;
  padding: 8px 16px;
  font-family: var(--font-game);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
}
.shopTab:hover, .shopTab.active {
  background: linear-gradient(180deg, #1e3a6d, #0d1e3d);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 12px rgba(251,191,36,0.3);
}

.shopGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
}
.itemTile3D {
  background: linear-gradient(180deg, #132448 0%, #081126 100%);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 22px;
  padding: 18px 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.itemTile3D:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 45px rgba(0,0,0,0.8);
}
.itemTile3D.legendary {
  border-color: #fbbf24;
  background: linear-gradient(180deg, #24355a 0%, #0d172e 100%);
  box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 0 20px rgba(251,191,36,0.3);
}
.itemTile3D.legendary:hover {
  box-shadow: 0 22px 50px rgba(0,0,0,0.85), 0 0 35px rgba(251,191,36,0.6);
}
.itemTile3D.epic {
  border-color: #c084fc;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 0 20px rgba(192,132,252,0.3);
}
.itemTile3D.epic:hover {
  box-shadow: 0 22px 50px rgba(0,0,0,0.85), 0 0 35px rgba(192,132,252,0.6);
}
.itemTile3D.locked {
  opacity: 0.7;
  filter: grayscale(0.4);
}

.itemRarityBadge {
  font-family: var(--font-game);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 10px;
}
.itemRarityBadge.badge-gold {
  background: linear-gradient(90deg, #f59e0b, #d97706);
  color: #fff;
  box-shadow: 0 0 14px rgba(245,158,11,0.6);
  border: 1px solid #fef08a;
}
.itemRarityBadge.badge-purple {
  background: linear-gradient(90deg, #8b5cf6, #6d28d9);
  color: #fff;
  box-shadow: 0 0 14px rgba(139,92,246,0.6);
  border: 1px solid #e9d5ff;
}
.itemRarityBadge.badge-blue {
  background: linear-gradient(90deg, #0284c7, #0369a1);
  color: #fff;
  border: 1px solid #7dd3fc;
}

/* Escaparate 3D con pedestal */
.itemShowcasePlatform {
  width: 100%;
  height: 100px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0 12px;
}
.itemShowcaseGlow {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,0.25) 0%, transparent 70%);
  pointer-events: none;
}
.itemTile3D.epic .itemShowcaseGlow {
  background: radial-gradient(circle, rgba(192,132,252,0.3) 0%, transparent 70%);
}
.itemTile3D.legendary .itemShowcaseGlow {
  background: radial-gradient(circle, rgba(251,191,36,0.4) 0%, transparent 70%);
}

.itemEmoji3D {
  width: 86px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.7));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 2;
}
.itemEmoji3D svg, .itemEmoji3D img {
  width: 100% !important;
  height: 100% !important;
  max-width: 86px !important;
  max-height: 86px !important;
  object-fit: contain;
}
.itemTile3D:hover .itemEmoji3D {
  transform: scale(1.15) rotate(3deg);
}

.itemEn {
  font-family: var(--font-game);
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
  line-height: 1.25;
}
.itemEs {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 8px;
}

.itemSpeak {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  border-radius: 14px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  margin-bottom: 12px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.itemSpeak:hover {
  background: rgba(255,255,255,0.25);
  border-color: #fff;
  transform: scale(1.05);
}

.itemAction {
  width: 100%;
  margin-top: auto;
}
.shopBuy {
  width: 100%;
  padding: 10px 10px;
  border-radius: 14px;
  font-family: var(--font-game);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.5px;
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg, #f59e0b, #d97706);
  color: #fff;
  box-shadow: 0 4px 0 #92400e, 0 8px 18px rgba(245,158,11,0.4);
  transition: all 0.15s;
}
.shopBuy:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #92400e, 0 10px 22px rgba(245,158,11,0.6);
}
.shopBuy:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #92400e;
}
.shopBuy.equip {
  background: linear-gradient(180deg, #0284c7, #0369a1);
  box-shadow: 0 4px 0 #075985, 0 8px 18px rgba(2,132,199,0.4);
}
.shopBuy.locked {
  background: #1e293b;
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
  font-size: 10.5px;
}
.shopBuy.noCoins {
  background: #451a03;
  color: #fca5a5;
  cursor: not-allowed;
  box-shadow: none;
}
.shopEquipped {
  padding: 9px 12px;
  background: linear-gradient(180deg, #10b981, #059669);
  color: #fff;
  border-radius: 14px;
  font-family: var(--font-game);
  font-size: 11.5px;
  font-weight: 900;
  box-shadow: 0 0 16px rgba(16,185,129,0.5);
}

/* ================== MI EQUIPO 4-3-3 & EXPOSITOR ================== */
.teamBox {
  max-width: 760px;
  margin: 0 auto;
  background: var(--bg1);
  border: 2px solid var(--border);
  border-radius: 20px;
  padding: 18px;
}
.teamHead {
  text-align: center;
  margin-bottom: 14px;
}
.teamName {
  font-family: var(--font-game);
  font-size: 24px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(255,201,60,.4);
  margin-bottom: 8px;
}
.teamBadges {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 4px 0;
}
.teamBadge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: #0a1a33;
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 6px 18px;
  box-shadow: 0 4px 12px rgba(255,201,60,.2);
}
.ovrBig, .chemBig {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.ovrLabel { font-size: 10px; color: var(--gold); letter-spacing: 1px; font-weight: 800; }
.chemLabel { font-size: 10px; color: var(--green); letter-spacing: 1px; font-weight: 800; }

.pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 2.8;
  max-width: 500px;
  margin: 18px auto 0;
  background:
    repeating-linear-gradient(90deg, #2d6b1a 0 44px, #276117 44px 88px),
    linear-gradient(180deg, #3d8b2a, #1a4e10);
  border: 3.5px solid #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.55);
}
.pitch::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2.5px;
  background: rgba(255,255,255,.55);
}
.pitch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 76px;
  border: 2.5px solid rgba(255,255,255,.55);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}

.pitchSlot {
  position: absolute;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 3;
  cursor: pointer;
  transition: transform .15s cubic-bezier(0.34,1.56,0.64,1);
}
.pitchSlot:hover {
  transform: translate(-50%,-50%) scale(1.14);
  z-index: 10;
}
.pitchSlot .slotAvatar {
  width: 54px !important;
  height: 76px !important;
  max-width: 54px !important;
  max-height: 76px !important;
  border-radius: 10px;
  background: var(--bg2);
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 24px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.6);
  border: 2px solid rgba(255,255,255,0.25);
  position: relative;
}
.pitchSlot .slotAvatar.hasCard {
  border: none;
}
.pitchSlot .slotAvatar.empty {
  background: #0a1a33aa;
  border: 2px dashed rgba(255,255,255,0.45);
}
.pitchSlot .slotAvatar .cardMaster {
  width: 100% !important;
  height: 100% !important;
  max-width: 54px !important;
  max-height: 76px !important;
}
.pitchSlot .slotAvatar .cardPlayerFullImg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.pitchSlot .cardTopBrand,
.pitchSlot .cardStatsBadge,
.pitchSlot .cardNamePlate {
  display: none !important;
}
.pitchSlot .cardOverlayFrame {
  border-width: 2.5px !important;
  border-radius: 10px !important;
}

.slotOvr {
  background: rgba(6,14,30,0.94);
  color: var(--gold);
  font-weight: 900;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 6px;
  margin-top: -6px;
  border: 1.5px solid rgba(251,191,36,0.6);
  box-shadow: 0 3px 8px rgba(0,0,0,0.6);
  z-index: 4;
}
.slotName {
  color: #fff;
  font-size: 9.5px;
  font-weight: 900;
  background: rgba(6,14,30,0.94);
  padding: 1px 6px;
  border-radius: 5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  border: 1.5px solid rgba(255,255,255,0.25);
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 3px 6px rgba(0,0,0,0.6);
}

/* ================== EQUIPAMIENTO EN USO ================== */
.teamKit {
  margin-top: 18px;
  background: #0a1a33;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 14px;
}
.kitTitle {
  font-family: var(--font-game);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--gold);
  margin-bottom: 10px;
  text-align: center;
}
.kitRow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.kitItem3D {
  text-align: center;
  padding: 10px 6px;
  background: linear-gradient(180deg, #122040, #0a1429);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 6px 14px rgba(0,0,0,0.5);
}
.kitItem3D:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  background: linear-gradient(180deg, #1c305c, #0e1c38);
  box-shadow: 0 8px 18px rgba(251,191,36,0.25);
}
.kitTag {
  font-size: 8.5px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 0.8px;
  margin-bottom: 3px;
}
.kitEmoji3D {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3px;
}
.kitEmoji3D svg, .kitEmoji3D img {
  max-width: 38px !important;
  max-height: 38px !important;
  object-fit: contain;
}
.kitName3D {
  font-family: var(--font-game);
  font-size: 9.5px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kitSub3D {
  font-family: var(--font-ui);
  font-size: 8.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teamCtas {
  text-align: center;
  margin-top: 14px;
}

/* Stadium BANNER in match – full-width con el estadio de fondo */
.matchStadiumBanner{
  position:relative;
  width:100%;
  height:140px;
  border-radius:16px;
  overflow:hidden;
  margin:14px auto;
  max-width:560px;
  background-size:cover;
  background-position:center;
  box-shadow:0 10px 26px rgba(0,0,0,.55);
  border:2px solid var(--gold);
}
.msbOverlay{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(10,26,51,.88) 0%, rgba(10,26,51,.45) 50%, rgba(10,26,51,.88) 100%),
    linear-gradient(180deg, rgba(0,0,0,.3) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.5) 100%);
}
.msbContent{
  position:relative;z-index:2;
  height:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:10px;
}
.msbName{
  font-size:28px;font-weight:900;color:#fff;
  letter-spacing:4px;text-transform:uppercase;
  text-shadow:0 2px 12px rgba(0,0,0,.9),0 0 24px rgba(255,201,60,.5);
}
.msbLabel{
  margin-top:6px;font-size:12px;font-weight:800;
  color:var(--gold);letter-spacing:2.5px;
  text-shadow:0 1px 6px rgba(0,0,0,.9);
  padding:4px 12px;
  background:rgba(0,0,0,.35);
  border-radius:8px;
  border:1px solid rgba(255,201,60,.3);
}

/* ================== MATCH DAY ARCADE 2.0 ================== */
.matchPlayerSpotlight {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(16,36,70,0.95), rgba(8,18,36,0.95));
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 18px;
  padding: 10px 16px;
  margin: 12px auto;
  max-width: 540px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
}
.matchPlayerSpotlight.legendary {
  border-color: #fbbf24;
  box-shadow: 0 0 20px rgba(251,191,36,0.4);
}
.matchPlayerSpotlight.epic {
  border-color: #c084fc;
  box-shadow: 0 0 20px rgba(192,132,252,0.4);
}
.matchPlayerSpotlight.rare {
  border-color: #38bdf8;
  box-shadow: 0 0 20px rgba(56,189,248,0.4);
}

.mpsCardMini {
  width: 48px;
  height: 70px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}
.mpsInfo {
  flex: 1;
  text-align: left;
}
.mpsNameRow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mpsOvr {
  font-family: var(--font-game);
  font-size: 18px;
  font-weight: 900;
  color: var(--gold);
}
.mpsName {
  font-family: var(--font-game);
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
}
.mpsPos {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  background: rgba(0,0,0,0.4);
  padding: 2px 6px;
  border-radius: 4px;
}
.mpsSkill {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 12px;
}
.skill-gold {
  background: linear-gradient(90deg, #f59e0b, #d97706);
  color: #000;
  box-shadow: 0 0 10px rgba(245,158,11,0.6);
}
.skill-purple {
  background: linear-gradient(90deg, #a855f7, #7e22ce);
  color: #fff;
  box-shadow: 0 0 10px rgba(168,85,247,0.6);
}
.skill-blue {
  background: linear-gradient(90deg, #0ea5e9, #0369a1);
  color: #fff;
}

.mpsTimerBox {
  width: 100px;
  text-align: right;
}
.mpsTimerLabel {
  font-size: 9px;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: 1px;
  margin-bottom: 3px;
}
.mpsTimerBar {
  height: 8px;
  background: rgba(0,0,0,0.5);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.2);
}
.mpsTimerBar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
  transition: width 0.05s linear;
}

/* Cancha Arena 2.5D */
.matchFieldArena {
  position: relative;
  max-width: 540px;
  margin: 0 auto 16px;
  border-radius: 20px;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,0.2);
  box-shadow: 0 16px 36px rgba(0,0,0,0.6);
  background: #0b2210;
}
.mfaCrowd {
  background: linear-gradient(180deg, #1e1b4b, #0f172a);
  padding: 6px 12px;
  text-align: center;
  border-bottom: 2px solid #22c55e;
}
.crowdBanners {
  font-size: 11px;
  font-weight: 900;
  color: #86efac;
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(34,197,94,0.6);
}
.mfaPitch {
  position: relative;
  height: 180px;
  background: repeating-linear-gradient(90deg, #15803d 0 40px, #166534 40px 80px);
  overflow: hidden;
}
.mfaLines {
  position: absolute;
  inset: 12px;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 8px;
  pointer-events: none;
}
.mfaLines::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: rgba(255,255,255,0.4);
}

.mfaGoal {
  position: absolute;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
}
.mfaKeeper {
  position: absolute;
  top: 50%;
  left: 90px;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  transition: all 0.3s;
}

.mfaPlayerHero {
  position: absolute;
  top: 50%;
  right: 80px;
  transform: translateY(-50%);
  width: 58px;
  height: 84px;
  z-index: 5;
  transition: all 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.mphAvatar {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,0.7);
}
.mphAura.legendary {
  position: absolute;
  inset: -6px;
  border-radius: 14px;
  border: 2px solid #fbbf24;
  box-shadow: 0 0 16px #fbbf24;
  animation: glowPulse 1s infinite alternate;
  pointer-events: none;
}

.mfaBall {
  position: absolute;
  top: 50%;
  right: 144px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  z-index: 6;
  transition: all 0.6s cubic-bezier(0.34,1.56,0.64,1);
}

/* Animaciones de Jugada */
.hero-shoot {
  transform: translateY(-50%) translateX(-60px) scale(1.15) !important;
}
.hero-pass {
  transform: translateY(-50%) translateX(-40px) !important;
}
.hero-run {
  transform: translateY(-50%) translateX(-120px) !important;
}

.ball-shoot {
  right: 420px !important;
  transform: translateY(-50%) scale(0.8) rotate(720deg) !important;
}
.ball-pass {
  right: 280px !important;
  transform: translateY(-50%) rotate(360deg) !important;
}
.ball-run {
  right: 220px !important;
  transform: translateY(-50%) rotate(360deg) !important;
}

.trail-legendary {
  filter: drop-shadow(0 0 12px #fbbf24) drop-shadow(0 0 24px #f59e0b);
}
.trail-epic {
  filter: drop-shadow(0 0 12px #c084fc);
}

/* Modal Cinemático de Gol */
.matchGoalOv {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2500;
  animation: fadeIn 0.2s;
}
.mgWrap {
  text-align: center;
  animation: popIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.mgText {
  font-family: var(--font-game);
  font-size: 38px;
  font-weight: 900;
  color: #fef08a;
  letter-spacing: 2px;
  text-shadow: 0 4px 20px rgba(0,0,0,0.9), 0 0 30px #f59e0b;
}
.mgCardBadge {
  width: 120px;
  height: 175px;
  margin: 16px auto 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.9);
  border-radius: 12px;
  overflow: hidden;
  animation: cardReveal 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
.mgScorer {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
}
.stadThumb{display:none}
.stadEmoji{font-size:28px}
.stadName{color:#fff;letter-spacing:1.5px}

/* ================== ITEM VISUAL WRAPPER (Bloque 4+) ================== */
/* Wrapper para cada item renderizado en tienda/kit/penalty/partido.
   El contenedor actúa como "display case" con fondo navy que enmascara
   el fondo de la imagen generada. Los balones usan crop circular para
   verse redondos en la cancha. */
.ivWrap {
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
  transition: transform .15s;
}
.ivWrap:hover { transform: translateY(-1px); }
.iv-big { width:86px; height:86px; }
.iv-sm  { width:44px; height:44px; }

/* BALLS — circular crop, zoom para llenar el círculo */
.iv-ball {
  border-radius:50%;
  background: radial-gradient(circle at 40% 35%, #2a4a7f, #0a1530 80%);
  box-shadow: 0 4px 14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
.iv-ball .ivImg {
  width:122%; height:122%;
  object-fit:cover;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}

/* SHIRTS / BOOTS / GLOVES / ACC — rounded navy case */
.iv-shirt, .iv-boots, .iv-gloves, .iv-acc {
  border-radius: 14px;
  background: radial-gradient(circle at 40% 35%, #1c2f5e, #0a1530 75%);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.05);
}
.iv-shirt .ivImg, .iv-boots .ivImg, .iv-gloves .ivImg, .iv-acc .ivImg {
  width:88%; height:88%;
  object-fit:contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.6));
}

/* STADIUM — full bleed, sin marco */
.iv-stadium {
  border-radius: 8px;
  background: #0a1530;
}
.iv-stadium .ivImg {
  width:100%; height:100%;
  object-fit:cover;
}

/* Fallback cuando la imagen falla (emoji dentro del case) */
.ivFall {
  position:absolute; inset:0;
  display:flex !important; align-items:center; justify-content:center;
  background: radial-gradient(circle at 40% 35%, #1c2f5e, #0a1530 75%);
  color:#fff;
  border-radius: inherit;
}

/* ===== Ball en penalty: tamaño ajustado dentro de #penBall ===== */
.goalBall { font-size:0; line-height:0; }
.goalBall > span:not(.ivWrap) { font-size:42px; line-height:1; }
.goalBall .ivWrap { width:56px; height:56px; }
.goalBall .ivWrap .ivFall { font-size:36px; }

/* ===== Ball en partido: mismo trato ===== */
#matchBall { font-size:0; line-height:0; }
#matchBall > span:not(.ivWrap) { font-size:36px; line-height:1; }
#matchBall .ivWrap { width:48px; height:48px; }
#matchBall .ivWrap .ivFall { font-size:32px; }

/* ===== Kit strip: un poco más grande para que se vea bien ===== */
.kitItem .ivWrap { width:56px; height:56px; }
.kitEmoji { min-height: 64px; }

/* ===== Shop tile: tamaño mayor para el big ===== */
.shopGrid .ivWrap.iv-big { width:96px; height:96px; }
.shopGrid .ivWrap.iv-sm { width:48px; height:48px; }

/* ================== MINI FIFA ARCADE 3 vs 3 ================== */
.arcadeMatchWrapper {
  max-width: 760px;
  margin: 0 auto;
  padding: 12px;
  background: linear-gradient(180deg, #09172f, #050b18);
  border: 2px solid var(--border-light);
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6);
}
.arcadeMatchWrapper.expandedArena {
  max-width: 880px;
}

.arcadeScoreboard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #0c234a, #071328);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 8px 18px;
  margin-bottom: 10px;
}
.asbTeam {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-game);
  font-size: 20px;
  font-weight: 900;
  color: #fff;
}
.asbGoals {
  font-size: 24px;
  color: var(--gold);
  background: rgba(0,0,0,0.4);
  padding: 2px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,201,60,0.3);
}
.asbTimer {
  text-align: center;
}
#asbClock {
  font-family: var(--font-game);
  font-size: 22px;
  font-weight: 900;
  color: #86efac;
  letter-spacing: 2px;
}
.asbPeriod {
  font-size: 9px;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: 1.5px;
}

.arcadeCoachBanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #1e1b4b, #312e81);
  border: 2px solid #a855f7;
  border-radius: 14px;
  padding: 8px 14px;
  margin-bottom: 10px;
  box-shadow: 0 0 16px rgba(168,85,247,0.4);
  animation: pulseBtn 2s infinite alternate;
}
.acbCoachIcon { font-size: 24px; }
.acbText { text-align: left; }
.acbLabel { font-size: 10px; font-weight: 900; color: #c084fc; letter-spacing: 1px; }
.acbCommand { font-family: var(--font-game); font-size: 17px; font-weight: 900; color: #fef08a; letter-spacing: 1.5px; margin-left: 6px; }
.acbHint { font-size: 12px; font-weight: 700; color: #e9d5ff; margin-left: 6px; }
.acbReward { font-size: 11px; font-weight: 900; color: #fbbf24; background: rgba(0,0,0,0.4); padding: 4px 8px; border-radius: 8px; }

.arcadeCanvasBox {
  position: relative;
  width: 100%;
  max-width: 720px;
  height: 380px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid #22c55e;
  box-shadow: 0 12px 32px rgba(0,0,0,0.8), 0 0 20px rgba(34,197,94,0.3);
  background: #0f172a;
}
.arcadeCanvasBox.expandedBox {
  max-width: 820px;
  height: 440px;
}
#arcadePitchCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.arcadeGoalCelebration {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(15,23,42,0.88), rgba(0,0,0,0.95));
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadeIn 0.25s ease-out;
  overflow: hidden;
}

.agcCardBox {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: cardPop3D 0.5s cubic-bezier(0.34,1.56,0.64,1);
}

.agcGoalBanner {
  font-family: var(--font-game);
  font-size: 38px;
  font-weight: 900;
  color: #fef08a;
  letter-spacing: 3px;
  text-shadow: 0 0 24px #f59e0b, 0 4px 12px rgba(0,0,0,0.9);
  margin-bottom: 8px;
  animation: pulseBtn 1s infinite alternate;
}

.agcCardSpot {
  width: 140px;
  height: 205px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.9);
  transition: transform 0.3s;
}
.agcCardSpot.glow-legendary {
  box-shadow: 0 0 35px rgba(251,191,36,0.85), 0 16px 40px rgba(0,0,0,0.9);
}
.agcCardSpot.glow-epic {
  box-shadow: 0 0 35px rgba(192,132,252,0.85), 0 16px 40px rgba(0,0,0,0.9);
}

.agcScorerPlate {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.65);
  border: 1.5px solid var(--gold);
  border-radius: 12px;
  padding: 6px 16px;
}
.agcOvr {
  font-family: var(--font-game);
  font-size: 20px;
  font-weight: 900;
  color: var(--gold);
}
.agcName {
  font-family: var(--font-game);
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
}
.agcClub {
  font-size: 11px;
  font-weight: 800;
  color: #86efac;
  letter-spacing: 1px;
}

.agcSubText {
  font-size: 13px;
  font-weight: 900;
  color: #fef08a;
  letter-spacing: 2px;
  margin-top: 6px;
  text-shadow: 0 0 10px rgba(251,191,36,0.6);
}

/* Partículas de Confeti Cayendo */
.goalConfettiParticle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  z-index: 3;
  pointer-events: none;
  animation: confettiFall linear infinite;
}

@keyframes cardPop3D {
  0% { transform: scale(0.4) translateY(60px) rotate(-6deg); opacity: 0; }
  70% { transform: scale(1.08) translateY(-8px) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) translateY(0) rotate(0); opacity: 1; }
}

@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(480px) rotate(720deg); opacity: 0; }
}
/* ================== MATCH MOMENTS (TÁCTIL & MOBILE-FIRST) ================== */
.mmContainer {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 1. Marcador de TV Oficial */
.mmScoreboard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(8,16,36,0.96) 0%, rgba(4,10,24,0.98) 100%);
  border: 2px solid rgba(251,191,36,0.4);
  border-radius: 20px;
  padding: 10px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.65), 0 0 16px rgba(251,191,36,0.2);
}
.mmTeam {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.mmTeam.user { justify-content: flex-start; }
.mmTeam.rival { justify-content: flex-end; }
.mmTeamName {
  font-family: var(--font-game);
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
}
.mmTeamScore {
  font-family: var(--font-game);
  font-size: 26px;
  font-weight: 900;
  color: var(--gold);
  background: rgba(0,0,0,0.6);
  border: 1.5px solid rgba(251,191,36,0.5);
  border-radius: 10px;
  padding: 2px 10px;
  min-width: 38px;
  text-align: center;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
}
.mmTimeBadge {
  text-align: center;
  padding: 0 10px;
}
.mmMinute {
  font-family: var(--font-game);
  font-size: 16px;
  font-weight: 900;
  color: #38bdf8;
  letter-spacing: 1px;
}
.mmRoundTag {
  font-size: 9px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* 2. Escenario Visual y Tarjeta de la Estrella */
.mmPitchArena {
  background: linear-gradient(180deg, rgba(14,26,52,0.9) 0%, rgba(6,14,32,0.95) 100%);
  border: 2px solid rgba(255,255,255,0.16);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mmPlayerSpotlight {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(8,16,36,0.8);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 8px 12px;
}
.mmAvatarCircle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2.5px solid var(--gold);
  box-shadow: 0 0 14px rgba(251,191,36,0.5);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  background: #061124;
}
.mmAvatarCircle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: scale(1.15);
}
.mmRarityTag {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: var(--font-game);
  font-size: 7.5px;
  font-weight: 900;
  text-align: center;
  padding: 1px 0;
}
.mmRarityTag.legendary { background: #d97706; color: #fff; }
.mmRarityTag.epic { background: #7c3aed; color: #fff; }
.mmRarityTag.rare { background: #0284c7; color: #fff; }

.mmPlayerMeta {
  flex: 1;
}
.mmHeroName {
  font-family: var(--font-game);
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
}
.mmPlayBadge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 2px;
  letter-spacing: 0.5px;
}
.mmPlayBadge.attack { background: rgba(245,158,11,0.2); border: 1px solid #f59e0b; color: #fef08a; }
.mmPlayBadge.defense { background: rgba(16,185,129,0.2); border: 1px solid #10b981; color: #a7f3d0; }

/* Cancha Animada con Estadios Equipados */
.mmVisualStage {
  height: 140px;
  background: repeating-linear-gradient(0deg, #15803d 0px, #15803d 20px, #166534 20px, #166534 40px);
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: space-around;
  transition: all 0.3s;
}
.mmVisualStage.stad_maracana_epic {
  background: radial-gradient(circle at 50% 30%, #1e1b4b 0%, #09090b 100%);
  border-color: #c084fc;
  box-shadow: inset 0 0 40px rgba(192,132,252,0.4);
}
.mmVisualStage.stad_lusail_gold {
  background: radial-gradient(circle at 50% 30%, #451a03 0%, #020617 100%);
  border-color: #fbbf24;
  box-shadow: inset 0 0 40px rgba(251,191,36,0.5);
}

.mmPitchLines {
  position: absolute;
  top: 50%; left: 0; right: 0; height: 1.5px;
  background: rgba(255,255,255,0.4);
}
.mmStageHero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 2;
}
.mmHeroIcon {
  font-size: 38px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7));
  animation: bounceHero 1.2s infinite alternate ease-in-out;
}
.mmHeroLabel {
  font-family: var(--font-game);
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: rgba(0,0,0,0.6);
  padding: 1px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.3);
}
.mmBallObject {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.8));
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mmBallObject svg {
  width: 100% !important;
  height: 100% !important;
}
.drillBall3D {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.8));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.drillBall3D svg, .dpsBall svg {
  width: 100% !important;
  height: 100% !important;
}
.dpsBall {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.8));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mmGoalNet {
  font-size: 42px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7));
  z-index: 2;
}

/* Animaciones de Gol */
.goalFx {
  animation: goalFlash 0.6s ease-in-out;
}
.ballGoalAnimation {
  transform: translate(90px, 0) scale(1.3) rotate(360deg);
}
.netShake {
  animation: shake 0.4s ease-in-out;
}
@keyframes bounceHero {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}
@keyframes goalFlash {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.8) saturate(1.5); }
  100% { filter: brightness(1); }
}

/* Temporizador de Reacción */
.mmTimerRow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mmTimerText {
  font-size: 10.5px;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.mmTimerTrack {
  flex: 1;
  height: 8px;
  background: rgba(0,0,0,0.6);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
}
.mmTimerBar {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444);
  border-radius: 6px;
  transition: width 0.05s linear;
}

/* 3. Globo del Entrenador */
.mmCoachBanner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(19,36,72,0.9) 0%, rgba(10,20,41,0.95) 100%);
  border: 2px solid rgba(251,191,36,0.5);
  border-radius: 18px;
  padding: 10px 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
}
.mmSpkBtn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, #0ea5e9, #0284c7);
  border: 2px solid #7dd3fc;
  color: #fff;
  font-size: 20px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(14,165,233,0.4);
  flex-shrink: 0;
  transition: transform 0.1s;
}
.mmSpkBtn:active { transform: scale(0.92); }
.mmCoachText { flex: 1; }
.mmCoachEn {
  font-family: var(--font-game);
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
}
.mmCoachEn b { color: var(--gold); }
.mmCoachEs {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  margin-top: 2px;
}

/* 4. Tarjetas Tácticas de Acción Táctiles (Mobile-First) */
.mmActionGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mmActionCard {
  background: linear-gradient(180deg, #1b3a6b 0%, #0d1f3d 100%);
  border: 2px solid var(--border-light);
  border-radius: 18px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  touch-action: manipulation;
}
.mmActionCard:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.03);
  border-color: var(--gold);
  box-shadow: 0 8px 22px rgba(251,191,36,0.35);
}
.mmActionCard:active:not(:disabled) {
  transform: translateY(2px) scale(0.98);
}
.mmCardIcon {
  font-size: 32px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.mmCardInfo {
  text-align: center;
}
.mmCardEn {
  font-family: var(--font-game);
  font-size: 14.5px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
}
.mmCardEs {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 2px;
}
.mmCardTap {
  font-size: 9px;
  font-weight: 900;
  color: var(--gold);
  background: rgba(0,0,0,0.4);
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}
.mmActionCard.correct {
  background: linear-gradient(180deg, #059669 0%, #047857 100%) !important;
  border-color: #34d399 !important;
  box-shadow: 0 0 20px rgba(52,211,153,0.7) !important;
  transform: scale(1.05) !important;
}
.mmActionCard.wrong {
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%) !important;
  border-color: #f87171 !important;
  opacity: 0.7;
}

/* 5. Panel de Fin de Partido */
.mmResultPanel {
  max-width: 520px;
  margin: 20px auto;
  background: linear-gradient(180deg, rgba(22,50,92,0.96) 0%, rgba(10,24,52,0.98) 100%);
  border: 2.5px solid var(--gold);
  border-radius: 24px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mmResultBadge {
  display: inline-block;
  font-family: var(--font-game);
  font-size: 14px;
  font-weight: 900;
  padding: 4px 16px;
  border-radius: 12px;
  letter-spacing: 1px;
}
.mmResultBadge.win { background: #10b981; color: #fff; box-shadow: 0 0 16px rgba(16,185,129,0.5); }
.mmResultBadge.draw { background: #f59e0b; color: #1e1002; }
.mmResultBadge.loss { background: #ef4444; color: #fff; }
.mmResultScore {
  font-family: var(--font-game);
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  margin: 10px 0 4px;
}
.mmResultSub {
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 600;
}
.mmRewardsBox {
  display: flex;
  justify-content: center;
  gap: 16px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 12px;
}
.mmRewardItem {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-game);
  font-size: 14px;
  font-weight: 900;
  color: var(--gold);
}
.mmRewardIcon { font-size: 20px; }
.mmResultActions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mmNextRoundBtn, .mmPlayAgainBtn, .mmHomeBtn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 480px) {
  .mmActionGrid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .mmActionCard {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 14px;
  }
  .mmCardInfo {
    text-align: left;
    flex: 1;
    margin-left: 10px;
  }
}

/* ================== WORLD CUP TOURNAMENT & TROPHY ROOM (FASE 6) ================== */
.fcNavBtn.purple { background: linear-gradient(135deg, #1e1b4b, #312e81); border-color: #a855f7; }
.fcNavBtn.purple:hover { border-color: #c084fc; box-shadow: 0 8px 20px rgba(168,85,247,0.4); }
.fcNavBtn.emerald { background: linear-gradient(135deg, #064e3b, #047857); border-color: #10b981; }
.fcNavBtn.emerald:hover { border-color: #34d399; box-shadow: 0 8px 20px rgba(16,185,129,0.4); }

.tourneyWrapper {
  max-width: 860px;
  margin: 0 auto;
  padding: 16px;
  background: linear-gradient(180deg, #09172f, #050b18);
  border: 2px solid var(--border-light);
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6);
}
.tourneyHeader {
  text-align: center;
  margin-bottom: 20px;
}
.thBadge {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  color: var(--gold);
  background: rgba(251,191,36,0.15);
  border: 1px solid var(--gold);
  border-radius: 20px;
  padding: 4px 14px;
  letter-spacing: 2px;
}
.thTitle {
  font-family: var(--font-game);
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  margin: 8px 0;
  text-shadow: 0 0 16px rgba(255,255,255,0.3);
}
.thSub {
  font-size: 14px;
  color: var(--muted);
  max-width: 500px;
  margin: 0 auto;
}

.tourneyBracket {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}
.bracketRound {
  background: var(--bg2);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  text-align: center;
  position: relative;
  transition: all 0.2s;
}
.bracketRound.active {
  border-color: var(--gold);
  box-shadow: 0 0 24px rgba(251,191,36,0.4);
  background: linear-gradient(180deg, #1e293b, #0f172a);
}
.bracketRound.completed {
  border-color: #10b981;
  background: linear-gradient(180deg, rgba(16,185,129,0.15), var(--bg2));
}
.bracketRound.locked {
  opacity: 0.55;
  filter: grayscale(0.5);
}

.brTag {
  font-size: 11px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}
.brMatchBox {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
}
.brmTeam {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.brmVs {
  font-family: var(--font-game);
  font-size: 12px;
  font-weight: 900;
  color: var(--gold);
  margin: 4px 0;
}
.brmRivalFlag { font-size: 18px; }
.brReward {
  font-size: 11px;
  font-weight: 800;
  color: #86efac;
  margin-bottom: 6px;
}
.brReqBadge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
  display: inline-block;
}
.brReqBadge.met {
  background: rgba(16,185,129,0.2);
  color: #86efac;
  border: 1px solid #10b981;
}
.brReqBadge.missing {
  background: rgba(245,158,11,0.2);
  color: #fef08a;
  border: 1px solid #f59e0b;
}

.brStatus {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(0,0,0,0.5);
}
.bracketRound.active .brStatus { color: #fef08a; border: 1px solid #f59e0b; }
.bracketRound.completed .brStatus { color: #86efac; }

.tourneyCtaBox {
  text-align: center;
  margin-top: 18px;
}
.btnTourneyPlay {
  font-size: 18px !important;
  padding: 16px 36px !important;
  animation: pulseBtn 1.5s infinite alternate;
}
.tourneyLockedWarn {
  background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(15,23,42,0.9));
  border: 2px solid #f59e0b;
  border-radius: 20px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 0 24px rgba(245,158,11,0.3);
  max-width: 520px;
  margin: 0 auto;
}
.tlwIcon {
  font-size: 40px;
  margin-bottom: 6px;
}
.tlwTitle {
  font-family: var(--font-game);
  font-size: 18px;
  font-weight: 900;
  color: #fef08a;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.tlwDesc {
  font-size: 13px;
  color: #cbd5e1;
  margin-bottom: 14px;
}
.btnGoAcademy {
  padding: 12px 24px !important;
  font-size: 14px !important;
  animation: pulseBtn 1.8s infinite alternate;
}
.tourneyWinnerBox {
  background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(245,158,11,0.1));
  border: 2px solid var(--gold);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 0 30px rgba(251,191,36,0.4);
}
.twTitle {
  font-family: var(--font-game);
  font-size: 28px;
  font-weight: 900;
  color: #fef08a;
  letter-spacing: 2px;
  text-shadow: 0 0 16px #f59e0b;
}

/* ================== SALA DE TROFEOS 3D ================== */
.trophyHallWrapper {
  max-width: 860px;
  margin: 0 auto;
  padding: 16px;
  background: linear-gradient(180deg, #09172f, #050b18);
  border: 2px solid var(--border-light);
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6);
}
.thRankBanner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #0c234a, #071328);
  border: 2px solid #38bdf8;
  border-radius: 16px;
  padding: 12px 20px;
  margin-bottom: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.thRankLabel { font-size: 11px; font-weight: 900; color: var(--muted); letter-spacing: 1.5px; }
.thRankTitle { font-family: var(--font-game); font-size: 20px; font-weight: 900; letter-spacing: 1.5px; }
.thRankXp { font-size: 13px; color: #fff; }
.thRankXp b { color: var(--gold); }

.thSectionTitle {
  font-family: var(--font-game);
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  text-align: center;
  margin: 0 0 4px;
}
.thSectionSub {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin: 0 0 20px;
}

/* ================== SALA DE TROFEOS 3D ULTRA PREMIUM ================== */
.trophyGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto 30px;
}
.trophyCard3D {
  background: linear-gradient(180deg, #101c38 0%, #081024 100%);
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  padding: 18px 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(0,0,0,0.6);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s, box-shadow 0.3s;
}
.trophyCard3D:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--gold);
  box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 30px rgba(251,191,36,0.3);
}
.trophyCard3D.unlocked {
  border-color: rgba(251,191,36,0.6);
  background: linear-gradient(180deg, #182a4d 0%, #0d172e 100%);
}
.trophyCard3D.locked {
  opacity: 0.6;
  filter: grayscale(0.5);
}

.tcPedestal3D {
  position: relative;
  width: 100%;
  height: 180px !important;
  max-height: 180px !important;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 14px;
  background: #040914;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
}
.tcPhoto3D {
  width: 100% !important;
  height: 100% !important;
  max-height: 180px !important;
  object-fit: cover !important;
  display: block;
  transition: transform 0.4s ease;
}
.trophyCard3D:hover .tcPhoto3D {
  transform: scale(1.06);
}

.tcLockOverlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 18, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tcLockIcon {
  font-size: 36px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.9));
}
.tcShineEffect {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.2) 50%, transparent 60%);
  animation: shine 3.5s infinite;
  pointer-events: none;
}

.tcName3D {
  font-family: var(--font-game);
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
  margin-bottom: 3px;
}
.tcTitle3D {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.tcDesc3D {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 12px;
  min-height: 32px;
}
.tcBadge3D {
  display: inline-block;
  font-family: var(--font-game);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 5px 14px;
  border-radius: 12px;
}
.tcBadge3D.badge-gold {
  background: linear-gradient(90deg, #f59e0b, #d97706);
  color: #fff;
  box-shadow: 0 0 14px rgba(245,158,11,0.4);
}
.tcBadge3D.badge-lock {
  background: #1e293b;
  color: #94a3b8;
  border: 1px solid rgba(255,255,255,0.1);
}

/* ================== PRE-MATCH SQUAD SELECTOR ================== */
.preMatchHeader {
  text-align: center;
  margin-bottom: 20px;
}
.pmBadge {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  color: var(--gold);
  background: rgba(251,191,36,0.15);
  border: 1px solid var(--gold);
  border-radius: 20px;
  padding: 4px 14px;
  letter-spacing: 2px;
}
.pmTitle {
  font-family: var(--font-game);
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  margin: 8px 0 4px;
}
.pmSub {
  font-size: 13px;
  color: var(--muted);
}

.pmSquadSelector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 760px;
  margin: 0 auto 24px;
}
.pmSlotCard {
  background: var(--bg2);
  border: 2px solid var(--border);
  border-radius: 18px;
  padding: 14px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.2s;
}
.pmSlotCard.captain {
  border-color: var(--gold);
  box-shadow: 0 0 24px rgba(251,191,36,0.35);
  background: linear-gradient(180deg, #1b2e50, #0d1a33);
}
.pmsRoleTag {
  font-size: 10.5px;
  font-weight: 900;
  color: #38bdf8;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.captainTag {
  color: var(--gold) !important;
}
.pmsCardPreview {
  width: 95px !important;
  height: 135px !important;
  max-width: 95px !important;
  max-height: 135px !important;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
  position: relative;
}
.pmsCardPreview .cardMaster {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}
.pmsCardPreview .cardPlayerFullImg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.pmsCardPreview .cardNamePlate {
  display: none !important;
}
.pmsCardPreview .cardStatsBadge {
  top: 4px !important;
  left: 4px !important;
  padding: 2px 5px !important;
}
.pmsCardPreview .csbOvr {
  font-size: 11px !important;
}
.pmsCardPreview .csbPos {
  font-size: 8px !important;
}
.pmsSelectorWrap {
  width: 100%;
}
.pmsSelect {
  width: 100%;
  padding: 8px 6px;
  border-radius: 10px;
  background: #09172f;
  border: 1.5px solid var(--border-light);
  color: #fff;
  font-family: var(--font-game);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  outline: none;
}
.pmsSelect:focus {
  border-color: var(--gold);
}

.pmCtas {
  text-align: center;
}
.btnKickOff {
  font-size: 20px !important;
  padding: 18px 48px !important;
  animation: pulseBtn 1.5s infinite alternate;
}

/* ================== SISTEMA DE ENERGÍA Y MODAL DE ENTRENAMIENTO ================== */
.energyChip {
  background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(234,88,12,0.3)) !important;
  border-color: #f59e0b !important;
  color: #fde047 !important;
  font-weight: 900;
  box-shadow: 0 0 12px rgba(245,158,11,0.3);
}

.energyModal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.energyModal.hidden {
  display: none !important;
}
.emBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 18, 0.88);
  backdrop-filter: blur(10px);
}
.emBox {
  position: relative;
  width: 100%;
  max-width: 620px;
  background: linear-gradient(180deg, #0d1b38 0%, #060d1f 100%);
  border: 2px solid #f59e0b;
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(245,158,11,0.25);
  animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
}
.emHeader {
  margin-bottom: 24px;
}
.emCoachIcon {
  font-size: 48px;
  margin-bottom: 8px;
  animation: bounce 2s infinite ease-in-out;
}
.emTitle {
  font-family: var(--font-game);
  font-size: 24px;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: 1px;
  margin-bottom: 8px;
  text-shadow: 0 2px 10px rgba(251,191,36,0.4);
}
.emSub {
  font-family: var(--font-ui);
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 500px;
}

.emTrainOptions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.emTrainCard {
  position: relative;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s, box-shadow 0.2s;
}
.emTrainCard:hover {
  transform: translateY(-6px) scale(1.03);
  border-color: #38bdf8;
  box-shadow: 0 10px 24px rgba(56,189,248,0.3);
  background: rgba(14, 165, 233, 0.12);
}
.etcBadge {
  position: absolute;
  top: -10px;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 10px;
  background: #0284c7;
  color: #fff;
  letter-spacing: 0.5px;
}
.etcIcon {
  font-size: 36px;
  margin: 8px 0;
}
.etcInfo h4 {
  font-family: var(--font-game);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}
.etcInfo p {
  font-family: var(--font-ui);
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.3;
  margin-bottom: 10px;
}
.etcReward {
  margin-top: auto;
  font-family: var(--font-game);
  font-size: 11px;
  font-weight: 900;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(16,185,129,0.3);
  white-space: nowrap;
}

.emFooter {
  display: flex;
  justify-content: center;
}

/* ================== RESPONSIVE ================== */
@media (max-width:860px){
  .pmSquadSelector { grid-template-columns: 1fr; }
  .tourneyBracket { grid-template-columns: 1fr; }
  .trophyGrid { grid-template-columns: 1fr; }
  .emTrainOptions { grid-template-columns: 1fr; }
  .fcHeroBanner{
    grid-template-columns:1fr;
    text-align:center;
    padding:20px;
  }
  .fcHeroSub{margin:0 auto 16px}
  .fcHeroCtas{justify-content:center}
  .fcHeroCardSpot{margin-top:12px}
  .fcHero3DCard{width:160px}

  .fcHomeGrid{
    grid-template-columns:1fr;
  }
  .fcQuestGrid{
    grid-template-columns:1fr;
  }

  .quickRow{grid-template-columns:1fr 1fr}
  .help{margin-left:0;margin-top:8px;flex-basis:100%}
  .goalBox{width:100%;max-width:340px}
  .unlockTitle{font-size:30px}
  .unlockCard .card{ width: 280px; max-width: 85vw; }
  .spellSlot{width:40px;height:52px;font-size:24px}
  .spellTile{min-width:42px;height:48px;font-size:22px}
  .kitRow{grid-template-columns:repeat(2,1fr)}
  .slotAvatar{width:40px;height:54px}
  .slotName{font-size:8px}
}

/* ================== FC TRAINING ACADEMY 2.0 (ULTRA PREMIUM) ================== */
.academyHubWrapper {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Banner de Cabecera */
.academyHeaderBanner {
  background: linear-gradient(135deg, rgba(9,23,47,0.95) 0%, rgba(21,43,82,0.95) 50%, rgba(6,17,36,0.98) 100%);
  border: 2.5px solid var(--gold);
  border-radius: 24px;
  padding: 20px 24px;
  text-align: center;
  box-shadow: 0 12px 36px rgba(0,0,0,0.7), 0 0 20px rgba(251,191,36,0.25);
  position: relative;
  overflow: hidden;
}
.ahbTopRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.ahbBadge {
  font-family: var(--font-game);
  font-size: 11px;
  font-weight: 900;
  color: var(--gold);
  background: rgba(251,191,36,0.15);
  border: 1px solid var(--gold);
  border-radius: 20px;
  padding: 4px 14px;
  letter-spacing: 1.5px;
}
.ahbUnlockStatus {
  font-family: var(--font-game);
  font-size: 10.5px;
  font-weight: 900;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}
.ahbUnlockStatus.unlocked { background: rgba(16,185,129,0.2); color: #86efac; border: 1px solid #10b981; }
.ahbUnlockStatus.locked { background: rgba(245,158,11,0.2); color: #fef08a; border: 1px solid #f59e0b; }

.ahbTitle {
  font-family: var(--font-game);
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  margin: 4px 0;
  text-shadow: 0 0 20px rgba(255,255,255,0.4);
}
.ahbSub {
  font-size: 14px;
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto 16px;
  font-weight: 600;
}
.ahbProgOverview {
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 10px 16px;
}
.ahbProgText {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 900;
  color: var(--muted);
  margin-bottom: 6px;
}
.ahbProgText b { color: var(--gold); }
.ahbProgPct { color: #38bdf8; }
.ahbProgBarTrack {
  height: 10px;
  background: rgba(0,0,0,0.7);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.2);
}
.ahbProgBarFill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #10b981);
  border-radius: 6px;
  transition: width 0.4s;
}

/* Selector de Lecciones */
.academyLessonsSelector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.lessonTabBtn {
  background: linear-gradient(180deg, #13274c 0%, #091730 100%);
  border: 2px solid var(--border-light);
  border-radius: 18px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #fff;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: left;
}
.lessonTabBtn:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
}
.lessonTabBtn.active {
  background: linear-gradient(180deg, #1d4ed8 0%, #1e3a8a 100%);
  border-color: #fef08a;
  box-shadow: 0 0 20px rgba(59,130,246,0.6);
}
.ltbIcon { font-size: 26px; }
.ltbInfo { flex: 1; }
.ltbTitle { font-family: var(--font-game); font-size: 12px; font-weight: 900; color: #fff; }
.ltbProg { font-size: 10px; color: var(--muted); font-weight: 700; margin-top: 1px; }
.ltbCheck { font-size: 14px; color: var(--gold); }

/* PASO 1: Hero de Presentación de Lección */
.academyStepOneHero {
  background: linear-gradient(135deg, rgba(29,78,216,0.25) 0%, rgba(14,165,233,0.15) 50%, rgba(6,17,36,0.9) 100%);
  border: 2.5px solid #38bdf8;
  border-radius: 22px;
  padding: 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 0 24px rgba(56,189,248,0.2);
}
.as1Badge {
  display: inline-block;
  font-family: var(--font-game);
  font-size: 10.5px;
  font-weight: 900;
  color: #38bdf8;
  background: rgba(56,189,248,0.15);
  border: 1px solid #38bdf8;
  border-radius: 12px;
  padding: 3px 12px;
  letter-spacing: 1px;
}
.as1Title {
  font-family: var(--font-game);
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
  margin: 8px 0 4px;
}
.as1Desc {
  font-size: 13.5px;
  color: #cbd5e1;
  max-width: 540px;
  margin: 0 auto 14px;
}
.as1WordPreviewRow {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.as1MiniChip {
  background: rgba(0,0,0,0.6);
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 14px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-game);
  font-size: 12.5px;
  color: #fff;
}
.as1StartBtn {
  font-size: 16px !important;
  padding: 14px 28px !important;
  animation: pulseBtn 1.8s infinite alternate;
}

/* PASO 2: Los 3 Circuitos */
.academyDrillsSection {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.adsSectionHeader { text-align: center; margin-bottom: 4px; }
.adsSectionBadge {
  font-family: var(--font-game);
  font-size: 10.5px;
  font-weight: 900;
  color: var(--gold);
  background: rgba(251,191,36,0.15);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 2px 10px;
  letter-spacing: 1px;
}
.adsSectionTitle { font-family: var(--font-game); font-size: 24px; font-weight: 900; color: #fff; margin: 4px 0 2px; }
.adsSectionSub { font-size: 13px; color: var(--muted); }

.academyDrillsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.academyDrillCard {
  background: linear-gradient(180deg, #13274c 0%, #061124 100%);
  border: 2px solid var(--border-light);
  border-radius: 22px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}
.academyDrillCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.7);
}
.academyDrillCard.listen { border-color: #f59e0b; box-shadow: 0 8px 24px rgba(245,158,11,0.25); }
.academyDrillCard.spell { border-color: #cbd5e1; box-shadow: 0 8px 24px rgba(203,213,225,0.25); }
.academyDrillCard.target { border-color: #fbbf24; box-shadow: 0 8px 24px rgba(251,191,36,0.3); }

.adcMedalBadge {
  font-family: var(--font-game);
  font-size: 10px;
  font-weight: 900;
  padding: 3px 12px;
  border-radius: 8px;
  letter-spacing: 0.5px;
}
.adcMedalBadge.bronze { background: rgba(245,158,11,0.2); color: #fef08a; border: 1px solid #f59e0b; }
.adcMedalBadge.silver { background: rgba(203,213,225,0.2); color: #fff; border: 1px solid #cbd5e1; }
.adcMedalBadge.gold { background: rgba(251,191,36,0.25); color: #fef08a; border: 1px solid #fbbf24; }

.adcIconWrap {
  font-size: 46px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.7));
  animation: bounceHero 1.3s infinite alternate ease-in-out;
}
.adcInfo { flex: 1; }
.adcTitle { font-family: var(--font-game); font-size: 15px; font-weight: 900; color: #fff; margin-bottom: 4px; }
.adcDesc { font-size: 12px; color: var(--muted); line-height: 1.35; }
.adcPlayBtn { width: 100%; font-size: 13px !important; padding: 10px !important; }

/* Diccionario de Cartas Tácticas */
.academyDictionarySection {
  background: rgba(8,16,36,0.9);
  border: 2px solid var(--border-light);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.adsHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 10px;
}
.adsHeader h3 { font-family: var(--font-game); font-size: 17px; color: #fff; margin-bottom: 2px; }
.adsHeader p { font-size: 12px; color: var(--muted); }
.adhCount { font-family: var(--font-game); font-size: 11px; font-weight: 900; color: var(--gold); background: rgba(0,0,0,0.5); padding: 4px 10px; border-radius: 8px; }

.adsWordGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.adsWordCard {
  background: linear-gradient(180deg, #162a52 0%, #0a1630 100%);
  border: 1.5px solid var(--border-light);
  border-radius: 16px;
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.adsWordCard:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: var(--gold);
  box-shadow: 0 8px 20px rgba(251,191,36,0.3);
}
.adsWordCard.mastered {
  border-color: #10b981;
  background: linear-gradient(180deg, #064e3b 0%, #062c22 100%);
}
.awcTop {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
.awcEmoji { font-size: 24px; }
.awcSpkBtn {
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 13px;
  cursor: pointer;
}
.awcEn { font-family: var(--font-game); font-size: 15px; font-weight: 900; color: #fff; letter-spacing: 0.5px; }
.awcEs { font-size: 11px; font-weight: 700; color: #cbd5e1; }
.awcFooter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.awcStatus { font-size: 8.5px; font-weight: 900; color: var(--gold); }
.awcQuickPracticeBtn {
  background: linear-gradient(180deg, #0ea5e9, #0284c7);
  border: 1px solid #7dd3fc;
  border-radius: 6px;
  color: #fff;
  font-size: 8.5px;
  font-weight: 900;
  padding: 3px 8px;
  cursor: pointer;
  width: 100%;
}

/* ================== TARJETA 3D DE PRESENTACIÓN (PASO 1) ================== */
.presentationWrapper {
  max-width: 580px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.presTopBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.presProgTag {
  font-family: var(--font-game);
  font-size: 14px;
  font-weight: 900;
  color: var(--gold);
}
.presHeroCard {
  background: linear-gradient(180deg, #13274c 0%, #091730 100%);
  border: 3px solid var(--gold);
  border-radius: 26px;
  padding: 26px 20px;
  text-align: center;
  box-shadow: 0 16px 44px rgba(0,0,0,0.7), 0 0 30px rgba(251,191,36,0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.presVisualBadge {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,0.3) 0%, rgba(14,26,52,0.8) 70%);
  border: 3px solid var(--gold);
  display: grid;
  place-items: center;
  box-shadow: 0 0 24px rgba(251,191,36,0.6);
}
.presVisualEmoji { font-size: 52px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.8)); }
.presWordEnglish {
  font-family: var(--font-game);
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  text-shadow: 0 0 18px rgba(255,255,255,0.4);
}
.presWordSpanish {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 1px;
}
.presAudioControls {
  display: flex;
  gap: 12px;
  margin: 6px 0;
}
.btnAudioLarge {
  border-radius: 16px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  transition: transform 0.1s;
}
.btnAudioLarge.normal { background: linear-gradient(180deg, #0ea5e9, #0284c7); border: 2px solid #7dd3fc; }
.btnAudioLarge.turtle { background: linear-gradient(180deg, #10b981, #059669); border: 2px solid #6ee7b7; }
.btnAudioLarge:active { transform: scale(0.94); }

.presExampleBox {
  background: rgba(0,0,0,0.5);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 12px 18px;
  width: 100%;
}
.pebLabel { font-size: 10px; font-weight: 900; color: var(--gold); letter-spacing: 1px; }
.pebPhrase { font-family: var(--font-game); font-size: 15px; font-weight: 900; color: #fff; margin: 4px 0 2px; }
.pebPhrase b { color: var(--gold); }
.pebTrans { font-size: 12.5px; color: #cbd5e1; font-weight: 600; }
.presActions { width: 100%; margin-top: 8px; }
.btnPresNext { width: 100%; font-size: 16px !important; padding: 14px !important; }

/* ================== CIRCUITO 1: PASE AL OÍDO (CANCHA Y COMPAÑEROS) ================== */
.drillPlayContainer {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.drillTopBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drillProgTag { font-family: var(--font-game); font-size: 14px; font-weight: 900; color: #38bdf8; }
.drillScoreChip {
  font-family: var(--font-game);
  font-size: 13px;
  font-weight: 900;
  color: var(--gold);
  background: rgba(0,0,0,0.6);
  border: 1.5px solid var(--gold);
  border-radius: 12px;
  padding: 3px 12px;
}

.drillAudioCoachBox {
  background: linear-gradient(135deg, #1e3a6d 0%, #0d1e3d 100%);
  border: 2px solid var(--gold);
  border-radius: 20px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.dacCoachAvatar { font-size: 34px; }
.dacInfo { flex: 1; }
.dacTitle { font-family: var(--font-game); font-size: 14.5px; font-weight: 900; color: #fff; }
.dacTitle b { color: var(--gold); }
.dacSub { font-size: 11.5px; color: #cbd5e1; }
.dacButtons { display: flex; gap: 6px; }
.dacSpkBtn {
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dacSpkBtn.normal { background: linear-gradient(180deg, #0ea5e9, #0284c7); border: 1.5px solid #7dd3fc; }
.dacSpkBtn.turtle { background: linear-gradient(180deg, #10b981, #059669); border: 1.5px solid #6ee7b7; }

/* Cancha de Pases con Compañeros Estilizados */
.drillPitchArena {
  height: 270px;
  background: repeating-linear-gradient(0deg, #15803d 0px, #15803d 25px, #166534 25px, #166534 50px);
  border: 3.5px solid #fff;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 14px 36px rgba(0,0,0,0.7), inset 0 0 50px rgba(0,0,0,0.5);
}
.pitchWhiteLines {
  position: absolute;
  top: 50%; left: 0; right: 0; height: 2px;
  background: rgba(255,255,255,0.4);
}
.drillReceiversRow {
  display: flex;
  justify-content: space-around;
  gap: 10px;
  z-index: 2;
}
.drillTeammateCard {
  background: linear-gradient(180deg, rgba(14,26,52,0.95) 0%, rgba(6,14,32,0.98) 100%);
  border: 2px solid rgba(251,191,36,0.6);
  border-radius: 18px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: #fff;
  width: 31%;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}
.drillTeammateCard:hover:not(:disabled) {
  transform: translateY(-5px) scale(1.06);
  border-color: var(--gold);
  box-shadow: 0 12px 28px rgba(251,191,36,0.6);
}
.dtcHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 4px;
}
.dtcJerseyTag { font-family: var(--font-game); font-size: 8.5px; font-weight: 900; background: #000; color: var(--gold); padding: 1px 5px; border-radius: 4px; }
.dtcEmojiBig { font-size: 26px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7)); }
.dtcWordEnglish { font-family: var(--font-game); font-size: 14.5px; font-weight: 900; color: #fff; letter-spacing: 0.5px; }
.dtcWordSpanish { font-size: 10px; font-weight: 700; color: #cbd5e1; }
.dtcActionPrompt { font-size: 8.5px; font-weight: 900; color: var(--gold); background: rgba(0,0,0,0.5); padding: 2px 6px; border-radius: 6px; margin-top: 2px; }

.drillTeammateCard.correctPass {
  background: linear-gradient(180deg, #059669 0%, #047857 100%) !important;
  border-color: #34d399 !important;
  box-shadow: 0 0 30px rgba(52,211,153,0.9) !important;
  transform: scale(1.08) !important;
}
.drillTeammateCard.wrongPass {
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%) !important;
  border-color: #f87171 !important;
  opacity: 0.7;
}

.drillPasserRow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  z-index: 2;
}
.drillPasserPlayer {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}
.dppJersey { font-size: 32px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8)); }
.dppLabel { font-family: var(--font-game); font-size: 10px; font-weight: 900; background: rgba(0,0,0,0.7); padding: 1px 8px; border-radius: 6px; border: 1px solid var(--gold); }
.drillBall3D {
  font-size: 34px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.8));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.drillBall3D.ballPassToTarget {
  transform: translateY(-80px) scale(0.8) rotate(360deg);
}

/* ================== CIRCUITO 2: REGATE DE LETRAS (CONOS 3D) ================== */
.drillSpellPrompt {
  background: linear-gradient(135deg, #1e3a6d 0%, #0d1e3d 100%);
  border: 2.5px solid var(--gold);
  border-radius: 20px;
  padding: 16px;
  text-align: center;
  position: relative;
}
.dspVisual { font-size: 42px; margin-bottom: 2px; }
.dspWordSpanish { font-family: var(--font-game); font-size: 22px; font-weight: 900; color: var(--gold); }
.dspHint { font-size: 12px; color: #cbd5e1; margin-top: 2px; }
.drillSpellSlots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 6px 0;
}
.dssSlot {
  width: 46px;
  height: 54px;
  background: rgba(0,0,0,0.7);
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: var(--font-game);
  font-size: 26px;
  font-weight: 900;
  color: #fff;
}
.dssSlot.filled {
  background: linear-gradient(180deg, #1d4ed8, #2563eb);
  border-color: #93c5fd;
  box-shadow: 0 0 16px rgba(147,197,253,0.7);
}
.drillConesArena {
  background: repeating-linear-gradient(0deg, #15803d 0px, #15803d 20px, #166534 20px, #166534 40px);
  border: 3px solid rgba(255,255,255,0.4);
  border-radius: 20px;
  padding: 20px 14px;
  position: relative;
  text-align: center;
}
.dcaPlayerRunner { font-size: 32px; margin-bottom: 12px; animation: bounceHero 1.1s infinite alternate; }
.drillConesGrid {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.drillConeButton {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  border: 2.5px solid #fef08a;
  border-radius: 16px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,0.5);
  transition: all 0.12s;
}
.drillConeButton:hover:not(.used) {
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 10px 22px rgba(245,158,11,0.6);
}
.drillConeButton.used {
  opacity: 0.3;
  filter: grayscale(1);
  pointer-events: none;
}
.dcbConeIcon { font-size: 18px; }
.dcbLetter { font-family: var(--font-game); font-size: 24px; font-weight: 900; color: #fff; line-height: 1; }

/* ================== CIRCUITO 3: TIRO AL BLANCO (DIANAS HOLOGRÁFICAS NEÓN) ================== */
.drillTargetBanner {
  background: linear-gradient(135deg, #1e3a6d 0%, #0d1e3d 100%);
  border: 2.5px solid var(--gold);
  border-radius: 20px;
  padding: 14px;
  text-align: center;
  position: relative;
}
.dtbHeaderTag { font-size: 11px; font-weight: 900; color: var(--gold); letter-spacing: 1px; }
.dtbWordEnglish { font-family: var(--font-game); font-size: 28px; font-weight: 900; color: #fff; letter-spacing: 1.5px; text-shadow: 0 0 16px rgba(255,255,255,0.4); margin: 2px 0; }
.dtbWordPrompt { font-size: 12.5px; color: #cbd5e1; }

.drillGoalArena {
  height: 240px;
  background: radial-gradient(circle at 50% 10%, #0284c7 0%, #0f172a 70%, #020617 100%);
  border: 3.5px solid #fff;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 14px 36px rgba(0,0,0,0.7);
}
.dgaCrossbar {
  position: absolute;
  top: 10px; left: 10px; right: 10px; height: 6px;
  background: linear-gradient(90deg, #94a3b8, #ffffff, #94a3b8);
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}
.dgaPost {
  position: absolute;
  top: 10px; bottom: 0; width: 6px;
  background: linear-gradient(180deg, #ffffff, #64748b);
  border-radius: 4px;
}
.dgaPost.left { left: 10px; }
.dgaPost.right { right: 10px; }

/* Dianas Holográficas de Cristal */
.drillHoloTargetsRow {
  display: flex;
  justify-content: space-around;
  gap: 12px;
  z-index: 2;
  margin-top: 10px;
}
.holoTargetCard {
  width: 105px;
  height: 110px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(14,26,52,0.92) 0%, rgba(6,14,32,0.98) 100%);
  border: 2px solid #38bdf8;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7), 0 0 18px rgba(56,189,248,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  gap: 2px;
}
.holoTargetCard:hover:not(:disabled) {
  transform: scale(1.12);
  border-color: var(--gold);
  box-shadow: 0 0 28px rgba(251,191,36,0.8);
}
.htcEmoji { font-size: 26px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8)); }
.htcWordEnglish { font-family: var(--font-game); font-size: 13px; font-weight: 900; color: #fff; letter-spacing: 0.5px; }
.htcWordSpanish { font-size: 10px; font-weight: 700; color: #cbd5e1; }
.htcScoreBadge { font-size: 8px; font-weight: 900; color: var(--gold); background: rgba(0,0,0,0.6); padding: 1px 6px; border-radius: 4px; }

.holoTargetCard.shatteredGold {
  animation: shatterFx 0.6s forwards;
  background: linear-gradient(180deg, #059669 0%, #047857 100%) !important;
  border-color: #34d399 !important;
}
.holoTargetCard.missedTarget {
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%) !important;
  border-color: #f87171 !important;
  opacity: 0.65;
}
@keyframes shatterFx {
  0% { transform: scale(1); }
  50% { transform: scale(1.3) rotate(12deg); filter: brightness(2) drop-shadow(0 0 30px #fbbf24); }
  100% { transform: scale(0.95); opacity: 0.85; }
}

.drillPenaltyShooter {
  display: flex;
  justify-content: center;
  z-index: 2;
}
.dpsBall {
  font-size: 34px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.8));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dpsBall.ballShootToTarget {
  transform: translateY(-85px) scale(0.75) rotate(360deg);
}

/* ================== MODAL FLOTANTE DEL DICCIONARIO ================== */
.academyModalOverlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(4,10,24,0.85);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 16px;
  animation: fadeIn 0.2s ease-out;
}
.academyModalCard {
  background: linear-gradient(180deg, #13274c 0%, #091730 100%);
  border: 3px solid var(--gold);
  border-radius: 26px;
  padding: 26px 20px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 16px 44px rgba(0,0,0,0.8), 0 0 30px rgba(251,191,36,0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.amCloseBtn {
  position: absolute;
  top: 12px; right: 14px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.amVisualEmoji { font-size: 52px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.8)); }
.amWordEnglish { font-family: var(--font-game); font-size: 32px; font-weight: 900; color: #fff; letter-spacing: 1.5px; }
.amWordSpanish { font-size: 16px; font-weight: 800; color: var(--gold); }
.amAudioRow { display: flex; gap: 10px; margin: 4px 0; }
.amPhraseBox {
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 10px 14px;
  width: 100%;
}
.ampLabel { font-size: 9.5px; font-weight: 900; color: var(--gold); }
.ampText { font-size: 12.5px; color: #fff; font-weight: 600; margin-top: 2px; }
.amActions { width: 100%; margin-top: 6px; }

/* ================== FILTROS Y TARJETAS DEL DICCIONARIO TÁCTICO ================== */
.academyCatBar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 14px 0 18px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.acadCatBtn {
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 8px 14px;
  font-family: var(--font-game);
  font-size: 11.5px;
  font-weight: 900;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.5px;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}
.acadCatBtn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}
.acadCatBtn.active {
  background: linear-gradient(180deg, #1d4ed8 0%, #1e3a8a 100%);
  color: #fff;
  border-color: #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.adsWordGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.adsWordCard {
  background: linear-gradient(180deg, #13274c 0%, #091730 100%);
  border: 2px solid var(--border-light);
  border-radius: 20px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.adsWordCard:hover {
  transform: translateY(-3px);
  border-color: #38bdf8;
  box-shadow: 0 12px 28px rgba(0,0,0,0.6), 0 0 20px rgba(56,189,248,0.3);
}
.adsWordCard.mastered {
  border-color: #10b981;
  background: linear-gradient(180deg, #092e20 0%, #061912 100%);
  box-shadow: 0 0 16px rgba(16,185,129,0.25);
}
.awcTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.awcEmoji {
  font-size: 32px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
}
.awcSpkBtn {
  background: rgba(14,165,233,0.2);
  border: 1px solid #38bdf8;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.12s;
}
.awcSpkBtn:hover {
  transform: scale(1.15);
  background: #0284c7;
}
.awcEn {
  font-family: var(--font-game);
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
}
.awcEs {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}
.awcFooter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.awcStatus {
  font-size: 9.5px;
  font-weight: 900;
  color: #94a3b8;
  letter-spacing: 0.5px;
}
.adsWordCard.mastered .awcStatus {
  color: #34d399;
}
.awcQuickPracticeBtn {
  background: linear-gradient(180deg, #0284c7, #0369a1);
  border: 1px solid #38bdf8;
  border-radius: 10px;
  padding: 6px 10px;
  font-family: var(--font-game);
  font-size: 10.5px;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  transition: all 0.15s;
}
.awcQuickPracticeBtn:hover {
  filter: brightness(1.2);
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .academyLessonsSelector { grid-template-columns: 1fr; }
  .academyDrillsGrid { grid-template-columns: 1fr; }
  .academyCatBar { justify-content: center; }
  .acadCatBtn { padding: 6px 10px; font-size: 10px; }
}

/* ==========================================================
   PANTALLA DE LOGIN ESCOLAR EA SPORTS FC 2026
========================================================== */
.loginScreen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  background: radial-gradient(circle at center, #102347 0%, #060e1e 100%);
  position: relative;
  overflow: hidden;
}
.loginWrapper {
  max-width: 440px;
  width: 100%;
  text-align: center;
  z-index: 2;
}
.loginLogoBanner {
  margin-bottom: 24px;
}
.loginLogoIcon {
  font-size: 52px;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.6));
  animation: bounceHero 1.4s infinite alternate ease-in-out;
}
.loginTitle {
  font-family: var(--font-game);
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2.5px;
  text-shadow: 0 4px 18px rgba(56,189,248,0.5);
  margin: 6px 0 2px;
}
.loginSub {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 1px;
}
.loginCard {
  background: linear-gradient(180deg, rgba(19,39,76,0.92) 0%, rgba(9,23,48,0.95) 100%);
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 26px;
  padding: 30px 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 30px rgba(56,189,248,0.25);
  position: relative;
  backdrop-filter: blur(12px);
}
.lcHeading {
  font-family: var(--font-game);
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}
.lcDesc {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 20px;
}
.loginFormGroup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 16px;
  text-align: left;
}
.loginFormGroup label {
  display: block;
  width: 100%;
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.8px;
  margin-bottom: 6px;
  text-align: left;
}
.loginFormGroup input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  background: rgba(4, 10, 24, 0.85) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  font-family: var(--font-ui) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  outline: none !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
  transition: all 0.2s;
}
.loginFormGroup input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}
.loginFormGroup input:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.5), inset 0 2px 6px rgba(0,0,0,0.5) !important;
  background: rgba(4, 10, 24, 0.98) !important;
}
.loginErrorMsg {
  background: rgba(220,38,38,0.2);
  border: 1px solid #ef4444;
  color: #fca5a5;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 16px;
  animation: shake 0.3s;
}
.btnLoginSubmit {
  width: 100% !important;
  padding: 15px 20px !important;
  font-size: 15.5px !important;
  font-weight: 900 !important;
  letter-spacing: 1px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  margin-top: 4px;
}
.loginDemoHelp {
  margin-top: 18px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
.loginDemoHelp code {
  background: rgba(0,0,0,0.5);
  padding: 2px 6px;
  border-radius: 6px;
  color: #fef08a;
}

/* ==========================================================
   PANEL DE ADMINISTRACIÓN / PROFESOR (MODO ADMIN)
========================================================== */
.adminScreen {
  min-height: 100vh;
  padding: 24px 16px 60px;
  background: radial-gradient(circle at center, #0e1c38 0%, #050b18 100%);
}
.adminWrapper {
  max-width: 1060px;
  margin: 0 auto;
}
.adminHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  background: linear-gradient(90deg, #13274c, #091730);
  border: 2px solid #fbbf24;
  border-radius: 20px;
  padding: 16px 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}
.ahTitleWrap h2 {
  font-family: var(--font-game);
  font-size: 22px;
  font-weight: 900;
  color: #fef08a;
  letter-spacing: 1.5px;
  margin: 0;
}
.ahTitleWrap p {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 0;
}
.btnLogoutTop {
  margin: 0 !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
}

.adminGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.adminCard {
  background: linear-gradient(180deg, #132448 0%, #081126 100%);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  position: relative;
}
.acBadge {
  font-family: var(--font-game);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(251,191,36,0.2);
  border: 1px solid #fbbf24;
  color: #fef08a;
  display: inline-block;
  margin-bottom: 8px;
}
.adminCard h3 {
  font-family: var(--font-game);
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 4px;
}
.adminCard p {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 16px;
}
.adminToolRow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.btnAdminTool {
  padding: 10px 8px;
  background: linear-gradient(180deg, #1e3a6d, #0d1e3d);
  border: 1.5px solid rgba(255,255,255,0.2);
  color: #fff;
  border-radius: 12px;
  font-family: var(--font-game);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.15s;
}
.btnAdminTool:hover {
  border-color: #fbbf24;
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(251,191,36,0.3);
}
.btnAdminDanger {
  width: 100%;
  padding: 12px;
  background: linear-gradient(180deg, #dc2626, #991b1b);
  border: 1.5px solid #f87171;
  color: #fff;
  border-radius: 14px;
  font-family: var(--font-game);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 0 #7f1d1d;
  transition: all 0.15s;
}
.btnAdminDanger:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #7f1d1d, 0 0 20px rgba(220,38,38,0.5);
}

/* Formulario Crear Alumno */
.adminForm .afGroup {
  margin-bottom: 12px;
  text-align: left;
}
.adminForm label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 4px;
}
.adminForm input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.adminForm button {
  width: 100%;
  padding: 12px;
  font-size: 13px !important;
  margin-top: 6px;
}

/* Tabla de Alumnos */
.adminTableCard {
  background: linear-gradient(180deg, #132448 0%, #081126 100%);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}
.atcHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.atcHeader h3 {
  font-family: var(--font-game);
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  margin: 0;
}
.btnRefresh {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.adminTableWrap {
  overflow-x: auto;
}
.adminTable {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}
.adminTable th {
  background: rgba(0,0,0,0.4);
  color: var(--gold);
  font-family: var(--font-game);
  font-size: 11px;
  font-weight: 900;
  padding: 10px 12px;
  border-bottom: 2px solid rgba(255,255,255,0.15);
}
.adminTable td {
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff;
}
.adminTable tr:hover td {
  background: rgba(255,255,255,0.04);
}
.admRoleBadge {
  font-size: 9px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 4px;
}
.admRoleBadge.admin { background: #b45309; color: #fef08a; }
.admRoleBadge.student { background: #0369a1; color: #7dd3fc; }
.btnTableAction {
  padding: 4px 8px;
  border-radius: 6px;
  border: none;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  margin-right: 4px;
}
.btnTableAction.reset { background: #d97706; color: #fff; }
.btnTableAction.del { background: #dc2626; color: #fff; }
.admMainTxt { font-size: 11px; color: var(--muted); font-style: italic; }

/* Botones Topbar */
.hudUtilBtn.admin {
  background: linear-gradient(180deg, #f59e0b, #d97706) !important;
  color: #fff !important;
  font-family: var(--font-game);
  font-size: 11px !important;
  font-weight: 900;
  padding: 6px 12px !important;
  width: auto !important;
  border-radius: 12px !important;
  border: 1.5px solid #fef08a !important;
  box-shadow: 0 0 14px rgba(245,158,11,0.5) !important;
}
.hudUtilBtn.logout {
  background: rgba(220,38,38,0.2) !important;
  border-color: #ef4444 !important;
}

/* ==========================================================
   REVERSO MISTERIOSO DE CARTAS BLOQUEADAS (FUT STYLE)
========================================================== */
.lockedCardBack {
  width: 100%;
  height: 100%;
  aspect-ratio: 2/3;
  background: linear-gradient(135deg, #0b1528 0%, #040914 100%);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 16px rgba(0,0,0,0.8);
  user-select: none;
}
.lockedCardBack.legendary {
  border-color: #f59e0b;
  background: linear-gradient(135deg, #1f1606 0%, #060914 100%);
  box-shadow: inset 0 0 18px rgba(245,158,11,0.3);
}
.lockedCardBack.epic {
  border-color: #8b5cf6;
  background: linear-gradient(135deg, #180928 0%, #060914 100%);
  box-shadow: inset 0 0 18px rgba(139,92,246,0.3);
}
.lockedCardBack.rare {
  border-color: #0284c7;
  background: linear-gradient(135deg, #06192e 0%, #060914 100%);
}

.lcbShine {
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.lcbLockIcon {
  font-size: 26px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.8));
  margin-bottom: 4px;
  z-index: 2;
  animation: pulseLock 1.8s infinite alternate ease-in-out;
}
.lcbLockIcon.big {
  font-size: 44px;
  margin-bottom: 8px;
}
.lcbRarityTag {
  font-family: var(--font-game);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  z-index: 2;
}
.lockedCardBack.legendary .lcbRarityTag { border-color: #f59e0b; color: #fef08a; }
.lockedCardBack.epic .lcbRarityTag { border-color: #8b5cf6; color: #e9d5ff; }
.lockedCardBack.rare .lcbRarityTag { border-color: #0284c7; color: #7dd3fc; }

.lcbMysteryText {
  font-family: var(--font-game);
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: 1px;
  margin-top: 4px;
  z-index: 2;
}
.lcbMysteryText.big {
  font-size: 13px;
  color: #fff;
  margin-top: 8px;
}
.lcbReq {
  font-size: 11px;
  color: var(--gold);
  font-weight: 700;
  text-align: center;
  margin-top: 8px;
  padding: 0 8px;
  z-index: 2;
}

@keyframes pulseLock {
  0% { transform: scale(1); filter: drop-shadow(0 4px 8px rgba(0,0,0,0.8)); }
  100% { transform: scale(1.1); filter: drop-shadow(0 0 14px rgba(251,191,36,0.6)); }
}


/* ==========================================================
   OPTIMIZACIÓN RESPONSIVE COMPLETA PARA CELULARES Y TABLETS
========================================================== */

/* Reglas Globales para Pantallas Táctiles */
@media (hover: none) and (pointer: coarse) {
  button, .hbnItem, .zoneBtn, .shopBuy, .itemSpeak, .btnBig {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Base Mobile: max-width 768px (Tablets y Smartphones) */
@media (max-width: 768px) {
  body {
    padding-bottom: 80px; /* Evita que el contenido quede tapado por la barra inferior */
  }

  /* HUD Topbar Compacto */
  .hudTopbar {
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .hudProfile {
    gap: 8px;
  }
  .hudAvatarRing {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
  .hudName {
    font-size: 13px;
  }
  .hudXpVal {
    display: none; /* Ocultar texto largo en móviles */
  }
  .hudXpBarWrap {
    width: 60px;
    height: 5px;
  }
  .hudResources {
    gap: 6px;
  }
  .hudPill {
    padding: 4px 8px;
    border-radius: 12px;
    gap: 5px;
  }
  .hpIcon {
    font-size: 14px;
  }
  .hpLabel {
    display: none; /* Ocultar etiqueta en móvil, dejar solo icono y valor */
  }
  .hpVal {
    font-size: 12px;
  }
  .hpAddBtn {
    width: 18px;
    height: 18px;
    font-size: 12px;
  }
  .hudUtilityButtons {
    gap: 6px;
  }
  .hudUtilBtn {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }
  .hudUtilBtn.admin {
    padding: 4px 8px !important;
    font-size: 9.5px !important;
  }

  /* HOME: Layout en 1 Columna Fluida */
  .hudContainer {
    padding: 0 12px 24px;
    gap: 16px;
  }
  .hudTopRow {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .hudBottomRow {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .hudHeroCard {
    min-height: 240px;
    padding: 18px;
  }
  .hudHeroTitle {
    font-size: 26px;
    letter-spacing: 1.5px;
  }
  .hudHeroSub {
    font-size: 12px;
    margin-bottom: 14px;
  }
  .hudHeroActions {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }
  .btnHeroPlay, .btnHeroTrain {
    width: 100%;
    padding: 12px 14px;
    font-size: 13.5px !important;
    text-align: center;
    justify-content: center;
  }

  /* ACADEMIA 2.0 EN MÓVIL */
  .academyHeroBanner {
    padding: 16px;
  }
  .ahbTitle {
    font-size: 22px;
    letter-spacing: 1px;
  }
  .ahbSub {
    font-size: 12.5px;
  }
  .academyLessonsSelector {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .lessonTabBtn {
    padding: 10px 12px;
  }
  .academyDrillsGrid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .academyDrillCard {
    padding: 16px 12px;
  }
  .drillReceiversRow {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .drillTeammateCard {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .drillHoloTargetsRow {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .holoTargetCard {
    padding: 12px;
  }

  /* PARTIDOS ARCADE */
  .mmScoreboard {
    padding: 8px 10px;
    gap: 6px;
  }
  .mmTeamName {
    font-size: 12px;
  }
  .mmTeamScore {
    font-size: 20px;
  }
  .mmActionButtons {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .actionBtn {
    padding: 14px;
    font-size: 15px;
    width: 100%;
  }

  /* PENALES 3D */
  .penZoneControls.crossLayout {
    width: 100%;
    max-width: 100%;
  }
  .penMidRow {
    gap: 8px;
  }
  .zoneBtn.dir {
    min-width: 130px;
    padding: 12px 10px;
    font-size: 12px;
  }
  .zoneBtn.dir.up, .zoneBtn.dir.down {
    min-width: 100%;
  }

  /* TIENDA DEL CLUB */
  .shopGrid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }
  .itemTile3D {
    padding: 14px 10px;
  }
  .itemEmoji3D {
    width: 64px;
    height: 64px;
  }
  .itemEn {
    font-size: 12px;
  }
  .itemEs {
    font-size: 10.5px;
  }
  .shopBuy {
    padding: 8px 6px;
    font-size: 10.5px;
  }

  /* COLECCIÓN Y SOBRES */
  .collGrid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
  }
  .packsGrid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* BARRA INFERIOR HUD NAVIGATION */
  .hudBottomNav {
    height: 62px;
    padding: 0 4px;
    padding-bottom: env(safe-area-inset-bottom, 4px);
    background: rgba(8, 17, 38, 0.96);
    backdrop-filter: blur(16px);
  }
  .hbnItem {
    padding: 6px 2px;
    gap: 2px;
  }
  .hbnIcon {
    font-size: 18px;
  }
  .hbnLabel {
    font-size: 9px;
    letter-spacing: 0.2px;
  }

  /* PANTALLA LOGIN */
  .loginScreen {
    padding: 16px;
  }
  .loginCard {
    padding: 22px 16px;
  }
  .loginTitle {
    font-size: 26px;
  }
  .loginFormGroup input {
    font-size: 16px; /* Evita zoom automático en Safari iOS */
    padding: 12px;
  }

  /* PANEL DE ADMINISTRADOR */
  .adminHeader {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .adminGrid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .adminToolRow {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Pantallas Extra Pequeñas: max-width 480px (Smartphones en Vertical) */
@media (max-width: 480px) {
  .hudProfileText {
    max-width: 80px;
  }
  .hudName {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hudResources {
    gap: 4px;
  }
  .hudPill {
    padding: 3px 6px;
  }
  .hpVal {
    font-size: 11px;
  }
  .hpAddBtn {
    display: none;
  }

  .fcHero3DCard {
    max-width: 230px;
    margin: 0 auto;
  }
  .htcPitchRow {
    gap: 6px;
  }
  .htcMiniPlayer {
    width: 32px;
    height: 32px;
  }

  /* Partidos */
  .mmVisualStage {
    height: 110px;
  }
  .mmHeroIcon {
    font-size: 30px;
  }
  .mmBallObject {
    width: 36px;
    height: 36px;
  }
}