/* ═══════════════════════════════════════════════════════════
   Football Match Simulator — Stylesheet
   Design: modern premium broadcast · dark mode · neon accents
   ═══════════════════════════════════════════════════════════ */

/* ── Fuente local Rajdhani (auto-alojada, sin tracking de Google) ──── */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/rajdhani-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/rajdhani-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/rajdhani-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Reset & tokens ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Global custom scrollbar ─────────────────────────────── */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(255,255,255,.12); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(0,212,255,.35); }
::-webkit-scrollbar-corner       { background: transparent; }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }

:root {
  --bg:          #080b14;
  --bg-card:     rgba(255,255,255,0.04);
  --bg-card-hov: rgba(255,255,255,0.07);
  --border:      rgba(255,255,255,0.09);
  --border-glow: rgba(0,212,255,0.35);
  --neon:        #00d4ff;
  --neon2:       #7b2ff7;
  --gold:        #f5c518;
  --white:       #f0f4ff;
  --grey:        #8892a4;
  --accent-a:    #00d4ff;
  --accent-b:    #ff4d6d;
  --accent-d:    #a0a0b0;
  --radius-lg:   18px;
  --radius-md:   12px;
  --radius-sm:   8px;
  --font:        'Segoe UI', system-ui, -apple-system, sans-serif;
  --shadow:      0 8px 40px rgba(0,0,0,0.55);
  --shadow-neon: 0 0 24px rgba(0,212,255,0.18);
}

html { font-size: 16px; scroll-behavior: smooth; overscroll-behavior-y: none; }

/* ── Native-app touch behaviour ───────────────────────────── */
/* Cancel the tap flash on every element (iOS/Android highlight) */
* { -webkit-tap-highlight-color: transparent; }
/* Block pull-to-refresh and horizontal overscroll bounce on the body */
body {
  overscroll-behavior: none;
}
/* Eliminate 300 ms tap delay and disable double-tap-zoom on all
   interactive controls — browser will not wait for a second tap. */
a, button, label, select,
input[type="button"], input[type="submit"], input[type="reset"],
[role="button"], [role="tab"], [role="option"],
.tp-type-btn, .tp-league-btn, .tp-team-card, .tp-nation-card,
.btn-simulate, .btn-share, .btn-lookup,
.modal-close, .tab-btn, .sim-btn {
  touch-action: manipulation;
}
/* Stop unintentional text selection when users swipe or long-press UI chrome */
button, [role="button"], [role="tab"],
.tp-type-btn, .tp-league-btn, .tp-team-card, .tp-nation-card,
.btn-simulate, .btn-share, .btn-lookup,
.modal-close, .tab-btn, .sim-btn,
.site-header, .site-footer, .team-picker-modal {
  user-select: none;
  -webkit-user-select: none;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--white);
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,100,180,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(123,47,247,0.12) 0%, transparent 70%);
}

/* ── Glass card ──────────────────────────────────────────── */
.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  transition: border-color 0.3s;
}
.glass-card:hover { border-color: var(--border-glow); }

/* ── Header ──────────────────────────────────────────────── */
.site-header {
  padding: 1.2rem 2rem;
  /* iOS notch / Dynamic Island safe area */
  padding-top: max(1.2rem, calc(.8rem + env(safe-area-inset-top, 0px)));
  padding-left: max(2rem, calc(1rem + env(safe-area-inset-left, 0px)));
  padding-right: max(2rem, calc(1rem + env(safe-area-inset-right, 0px)));
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 100;
}
.header-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 1rem;
}
.logo-mark {
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
}
/* ── GolazOX CSS text wordmark ───────────────────────────── */
.logo-wordmark {
  display: flex;
  align-items: baseline;
  gap: 0;
  line-height: 1;
  animation: gx-name-in .6s ease .3s both;
  cursor: default;
}
.gx-text-golazo {
  font-family: var(--font); font-weight: 900;
  font-size: 1.75rem; letter-spacing: -.03em;
  /* Brushed-steel gradient */
  background: linear-gradient(160deg, #e8e8e8 0%, #c0c0c0 40%, #ececec 55%, #aaa 80%, #d0d0d0 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}
.gx-text-ox {
  font-family: var(--font); font-weight: 900;
  font-size: 1.75rem; letter-spacing: -.03em;
  /* Red accent on the X */
  background: linear-gradient(160deg, #ff3a1a 0%, #cc1a00 60%, #ff5533 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  position: relative;
}
/* ── Logo animations ────────────────────────────────────── */
@keyframes gx-name-in {
  from { opacity: 0; letter-spacing: .45em; }
  to   { opacity: 1; letter-spacing: normal; }
}
@keyframes gx-entrance {
  0%   { opacity: 0; transform: scale(0.88); filter: brightness(1.1); }
  60%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
}
/* Idle state: clean metal with subtle dark shadow only — no orange glow */
@keyframes gx-pulse {
  0%, 100% { filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
  50%       { filter: drop-shadow(0 3px 12px rgba(0,0,0,.7)); }
}
@keyframes gx-spark {
  0%   { transform: scale(1);    filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
  15%  { transform: scale(1.04); filter: brightness(1.12) drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
  35%  { transform: scale(1); }
  100% { transform: scale(1);    filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
}
.logo-img {
  height: 62px;
  width: auto;
  max-width: 280px;
  display: block;
  object-fit: contain;
  /* Entrance once, then slow pulse forever */
  animation: gx-entrance 0.75s cubic-bezier(.22,1,.36,1) both,
             gx-pulse    3.5s ease-in-out 0.75s infinite;
  cursor: pointer;
}
.logo-img:hover {
  /* Spark burst on hover — overrides the idle pulse */
  animation: gx-spark 0.45s ease-out forwards;
  transform-origin: center;
}
.logo-text {
  display: flex; flex-direction: column; gap: 0; line-height: 1;
}
.logo-sub {
  font-size: .6rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(200,200,200,.45);
  margin-top: .1rem;
}
.tagline {
  font-size: .78rem; color: var(--grey);
  letter-spacing: .08em; text-transform: uppercase;
}
/* Right-side header group: tagline + language toggle */
.header-right {
  display: flex; align-items: center; gap: .75rem; margin-left: auto; flex-shrink: 0;
}
.btn-lang {
  padding: .22rem .65rem;
  border-radius: 6px;
  border: 1px solid rgba(0,212,255,.35);
  background: rgba(0,212,255,.07);
  color: var(--neon);
  cursor: pointer; font-size: .7rem; font-weight: 800; letter-spacing: .1em;
  font-family: var(--font);
  transition: background .15s, border-color .15s, color .15s;
}
.btn-lang:hover { background: rgba(0,212,255,.18); border-color: var(--neon); }

/* ── Main wrap ───────────────────────────────────────────── */
.main-wrap {
  max-width: 1200px; margin: 2.5rem auto;
  padding: 0 1.5rem;
  display: flex; flex-direction: column; gap: 2rem;
}

/* ── Input panel ─────────────────────────────────────────── */
.input-panel { padding: 2.2rem 2.2rem 1.8rem; }

.teams-grid {
  display: grid;
  grid-template-columns: 1fr 130px 1fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: 2rem;
}

.team-col { display: flex; flex-direction: column; gap: .75rem; }

.team-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; padding: .25rem .7rem;
  border-radius: 20px; display: inline-block; align-self: flex-start;
}
.label-a { background: rgba(0,212,255,.15); color: var(--accent-a); border: 1px solid rgba(0,212,255,.3); }
.label-b { background: rgba(255,77,109,.15); color: var(--accent-b); border: 1px solid rgba(255,77,109,.3); }

.inp {
  width: 100%; padding: .75rem 1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--white); font-family: var(--font); font-size: .95rem;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.inp:focus {
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.15);
}
.inp::placeholder { color: var(--grey); }
.inp-main { font-size: 1.08rem; font-weight: 600; }
.inp-sub  { font-size: .88rem; }

.select-formation {
  display: none;
}
.select-formation option { background: #131926; }

/* ── Team Picker ─────────────────────────────────────────── */
.team-picker { position: relative; width: 100%; }

/* Loading state */
.tp-loading {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1.2rem .5rem;
  border: 1px dashed rgba(0,212,255,.18); border-radius: var(--radius-md);
}
.tp-loading-text { font-size: .72rem; color: rgba(255,255,255,.3); }
.tp-loading-spinner {
  width: 22px; height: 22px;
  border: 2px solid rgba(0,212,255,.12);
  border-top-color: var(--neon);
  border-radius: 50%;
  animation: tpSpin .75s linear infinite;
}
@keyframes tpSpin { to { transform: rotate(360deg); } }
.tp-retry-btn {
  background: none; border: 1px solid rgba(0,212,255,.22);
  color: var(--neon); font-family: var(--font); font-size: .7rem;
  cursor: pointer; padding: .22rem .65rem; border-radius: 20px;
  transition: background .12s;
}
.tp-retry-btn:hover { background: rgba(0,212,255,.1); }

/* Step 1 — type selection */
.tp-type-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .55rem;
}
.tp-type-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 1rem .5rem;
  background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  color: var(--white); font-family: var(--font);
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .14s, box-shadow .18s;
}
.tp-type-btn:hover {
  background: linear-gradient(135deg, rgba(0,212,255,.1) 0%, rgba(0,212,255,.05) 100%);
  border-color: rgba(0,212,255,.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,212,255,.12);
}
.tp-type-svg {
  width: 2rem; height: 2rem;
  color: var(--neon); opacity: .85;
}
.tp-type-label {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

/* Breadcrumb nav */
.tp-breadcrumb {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem;
}
.tp-back-btn {
  background: none; border: none;
  color: var(--neon); font-family: var(--font); font-size: .75rem;
  cursor: pointer; padding: .18rem .45rem;
  border-radius: 4px; transition: background .12s; flex-shrink: 0;
}
.tp-back-btn:hover { background: rgba(0,212,255,.1); }
.tp-bread-label { font-size: .68rem; color: rgba(255,255,255,.28); }

/* Nations grid — flag images */
.tp-nations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: .38rem;
  max-height: 215px; overflow-y: auto;
  padding-right: 2px;
}
.tp-nation-card {
  display: flex; flex-direction: column; align-items: center; gap: .28rem;
  padding: .5rem .3rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-md);
  cursor: pointer; color: var(--white); font-family: var(--font);
  transition: background .14s, border-color .14s, transform .1s, box-shadow .14s;
}
.tp-nation-card:hover {
  background: rgba(0,212,255,.1);
  border-color: rgba(0,212,255,.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,212,255,.1);
}
.tp-flag-img {
  width: 38px; height: 26px;
  object-fit: cover; border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.tp-flag-fallback {
  width: 38px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border-radius: 3px;
  font-size: .65rem; font-weight: 800; color: rgba(255,255,255,.5);
  letter-spacing: .04em;
}
.tp-nation-name { font-size: .55rem; text-align: center; color: rgba(255,255,255,.6); line-height: 1.3; }

/* Leagues list */
.tp-leagues-grid {
  display: flex; flex-direction: column; gap: .3rem;
  max-height: 215px; overflow-y: auto;
}
.tp-league-btn {
  display: flex; align-items: center; gap: .6rem;
  padding: .42rem .7rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-md);
  cursor: pointer; color: var(--white); font-family: var(--font);
  text-align: left;
  transition: background .14s, border-color .14s;
}
.tp-league-btn:hover {
  background: rgba(0,212,255,.08);
  border-color: rgba(0,212,255,.4);
}
.tp-league-flag {
  width: 26px; height: 18px;
  object-fit: cover; border-radius: 2px;
  flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,.35);
  display: block;
}
.tp-league-flag-svg {
  object-fit: cover;
}
.tp-flag-wrap {
  position: relative; flex-shrink: 0;
  display: inline-flex; align-items: center;
}
.tp-flag-t2::after {
  content: '2';
  position: absolute; bottom: -2px; right: -3px;
  font-size: 7.5px; font-weight: 900; line-height: 1;
  background: rgba(0,0,0,.78); color: #fff;
  border-radius: 2px 0 2px 0; padding: 1px 2px;
  pointer-events: none;
}
.tp-league-flag-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--neon); opacity: .4; flex-shrink: 0;
}
.tp-lg-name { flex: 1; font-size: .82rem; font-weight: 600; }
.tp-league-tier2 { /* same appearance as tier-1; tier is shown via the flag badge */ }
.tp-lg-count {
  font-size: .62rem; color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.06); border-radius: 10px;
  padding: .08rem .38rem; flex-shrink: 0;
}

/* Team badge grid */
.tp-teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: .38rem;
  max-height: 215px; overflow-y: auto;
  padding-right: 2px;
}
.tp-team-card {
  display: flex; flex-direction: column; align-items: center; gap: .28rem;
  padding: .52rem .3rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-md);
  cursor: pointer; color: var(--white); font-family: var(--font);
  transition: background .14s, border-color .14s, transform .1s, box-shadow .14s;
}
.tp-team-card:hover {
  background: rgba(0,212,255,.1);
  border-color: rgba(0,212,255,.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,212,255,.1);
}
.tp-team-badge { width: 36px; height: 36px; object-fit: contain; }
.tp-team-name  { font-size: .56rem; text-align: center; color: rgba(255,255,255,.62); line-height: 1.3; }

/* Chosen state */
.tp-chosen {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .8rem;
  background: linear-gradient(135deg, rgba(0,212,255,.09) 0%, rgba(0,212,255,.04) 100%);
  border: 1px solid rgba(0,212,255,.32); border-radius: var(--radius-md);
  box-shadow: 0 0 16px rgba(0,212,255,.06);
}
.tp-chosen-badge { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.tp-chosen-info  { flex: 1; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.tp-chosen-name  { font-size: .9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-chosen-group { font-size: .62rem; color: rgba(255,255,255,.35); }
.tp-change-btn {
  background: none; border: none; color: rgba(255,255,255,.28);
  cursor: pointer; font-size: .82rem; padding: .2rem .42rem;
  border-radius: 4px; flex-shrink: 0;
  transition: color .12s, background .12s;
}
.tp-change-btn:hover { color: rgba(255,80,80,.8); background: rgba(255,50,50,.08); }

/* Custom scrollbars */
.tp-nations-grid::-webkit-scrollbar,
.tp-leagues-grid::-webkit-scrollbar,
.tp-teams-grid::-webkit-scrollbar   { width: 3px; }
.tp-nations-grid::-webkit-scrollbar-track,
.tp-leagues-grid::-webkit-scrollbar-track,
.tp-teams-grid::-webkit-scrollbar-track   { background: transparent; }
.tp-nations-grid::-webkit-scrollbar-thumb,
.tp-leagues-grid::-webkit-scrollbar-thumb,
.tp-teams-grid::-webkit-scrollbar-thumb   { background: rgba(0,212,255,.2); border-radius: 2px; }

/* Era season dropdown */
.era-select {  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='rgba(255,255,255,0.35)' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2rem;
  transition: border-color .15s, opacity .15s;
}
.era-select:disabled {
  opacity: .38;
  cursor: not-allowed;
}
.era-select:not(:disabled) {
  border-color: rgba(0,212,255,.35);
}
.era-select option { background: #131926; color: #e2e8f0; }
.era-select option:disabled { color: rgba(255,255,255,.3); }

.vs-col {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: .55rem;
  padding-top: 2.5rem;
}
.vs-badge {
  font-size: 1.1rem; font-weight: 900; letter-spacing: .12em;
  color: rgba(255,255,255,0.28);
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.07) 0%, rgba(0,0,0,.3) 100%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 18px rgba(255,255,255,.05),
              inset 0 0 14px rgba(0,0,0,.5);
  text-shadow: 0 0 10px rgba(255,255,255,.2);
  outline: none;
}

/* Intermediate state: both teams chosen, lineups not yet loaded */
@keyframes tr-spin {
  to { transform: rotate(360deg); }
}
@keyframes tr-pulse {
  0%,100% { box-shadow: 0 0 14px rgba(0,212,255,.3), inset 0 0 14px rgba(0,0,0,.6); }
  50%      { box-shadow: 0 0 28px rgba(0,212,255,.6), inset 0 0 18px rgba(0,0,0,.65); }
}
.vs-badge.vs-teams-ready {
  cursor: pointer; color: #fff;
  width: 84px; height: 84px;
  min-width: 84px; min-height: 84px;
  position: relative;
  background: #07090f;
  border: 2px solid rgba(0,212,255,.35);
  border-radius: 50%;
  animation: tr-pulse 2s ease-in-out infinite;
  isolation: isolate;
  transition: transform .2s;
  outline: none;
}
/* Rotating ring */
.vs-badge.vs-teams-ready::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid transparent;
  background:
    conic-gradient(from 0deg,
      rgba(0,212,255,.8)  0deg,
      transparent          90deg,
      rgba(0,212,255,.4) 180deg,
      transparent          270deg,
      rgba(0,212,255,.8) 360deg)
    border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: tr-spin 3s linear infinite;
  pointer-events: none;
  z-index: 3;
}
/* Coin image fills the disc */
.vs-badge.vs-teams-ready .clash-logo-wrap {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
}
.vs-badge.vs-teams-ready .clash-logo-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .55;   /* dimmed — indicates “not fully ready” */
  pointer-events: none;
}
/* Play overlay — big centred ▶ on top of dimmed coin */
.vs-badge.vs-teams-ready::after {
  content: '▶';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: rgba(255,255,255,.92);
  text-shadow: 0 0 14px rgba(0,212,255,.9), 0 0 28px rgba(0,212,255,.5);
  z-index: 2;
  pointer-events: none;
}
.vs-badge.vs-teams-ready:hover  { transform: scale(1.08); }
.vs-badge.vs-teams-ready:active { transform: scale(.93); animation: none; }
/* Hide old inner spans — label is now a sibling */
.vs-badge.vs-teams-ready .clash-l1 { display: none; }
.vs-badge.vs-teams-ready .clash-l2 { display: none; }
}

/* ── Match mode + Stadium row ────────────────────────────── */
.extra-options-row {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.2rem;
  margin-top: 1rem; padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.mode-selector, .stadium-selector { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.mode-lbl, .stadium-lbl {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}
.mode-pills { display: flex; gap: .4rem; }
.mode-pill {
  padding: .32rem .8rem; border-radius: 20px; font-size: .8rem; font-weight: 700;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.55); cursor: pointer;
  transition: all .15s;
}
.mode-pill:hover { background: rgba(255,255,255,.12); color: var(--txt); }
.mode-pill-active {
  background: rgba(0,212,255,.18); border-color: var(--neon);
  color: var(--neon); box-shadow: 0 0 8px rgba(0,212,255,.2);
}

/* ── Stadium visual picker ───────────────────────────────── */
.stadium-picker-section {
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.stadium-picker-lbl {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  margin-bottom: .75rem;
}
.stadium-picker-row {
  display: flex; gap: .65rem;
  overflow-x: auto; padding-bottom: .5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* hide scrollbar visually */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.stadium-picker-row::-webkit-scrollbar { height: 4px; }
.stadium-picker-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
.spk-card {
  flex-shrink: 0; scroll-snap-align: start;
  width: 110px; cursor: pointer;
  border-radius: 10px; overflow: hidden;
  border: 2px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  transition: border-color .18s, box-shadow .18s, transform .15s, opacity .18s;
  position: relative;
  opacity: .55;
}
.spk-card:hover { border-color: rgba(255,255,255,.3); transform: translateY(-2px); opacity: 1; }
.spk-active {
  border-color: var(--neon) !important;
  box-shadow: 0 0 12px rgba(0,212,255,.35);
  opacity: 1 !important;
}
.spk-active::after {
  content: '✓';
  position: absolute; top: 4px; right: 6px;
  font-size: .85rem; font-weight: 800;
  color: var(--neon);
  text-shadow: 0 0 6px rgba(0,212,255,.6);
}
.spk-img {
  width: 110px; height: 62px; object-fit: cover; display: block;
}
.spk-img-placeholder {
  width: 110px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  background: rgba(255,255,255,.05);
}
.spk-name {
  font-size: .68rem; font-weight: 700; line-height: 1.2;
  padding: .3rem .4rem .1rem; color: rgba(255,255,255,.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spk-city {
  font-size: .62rem; padding: 0 .4rem .35rem;
  color: rgba(255,255,255,.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Keep old stc-* for any legacy use — effectively hidden */
.stadium-card { display: none !important; }

/* ── Referee picker ───────────────────────────────────────── */
.referee-picker-section {
  margin-top: 1.2rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.referee-picker-lbl {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  margin-bottom: .75rem;
}
.referee-picker-row {
  display: flex; gap: .55rem; flex-wrap: nowrap;
  overflow-x: auto; padding-bottom: .4rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
}
.referee-picker-row::-webkit-scrollbar { height: 4px; }
.referee-picker-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
.ref-card {
  flex-shrink: 0; scroll-snap-align: start; cursor: pointer;
  border-radius: 10px; overflow: hidden; width: 90px;
  border: 2px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  transition: border-color .16s, box-shadow .16s, transform .13s, opacity .18s;
  position: relative;
  opacity: .55;
}
.ref-card:hover { border-color: rgba(255,255,255,.28); transform: translateY(-2px); opacity: 1; }
.ref-active {
  border-color: rgba(212,175,55,.7) !important;
  box-shadow: 0 0 12px rgba(212,175,55,.30);
  background: rgba(212,175,55,.06);
  opacity: 1 !important;
}
.ref-active::after {
  content: '✓';
  position: absolute; top: 4px; right: 6px;
  font-size: .8rem; font-weight: 800;
  color: rgba(212,175,55,.9);
  text-shadow: 0 0 6px rgba(212,175,55,.6);
}
/* photo area */
.ref-photo-area { position: relative; width: 90px; height: 90px; overflow: hidden; }
.ref-photo {
  width: 90px; height: 90px; object-fit: cover;
  object-position: top center; display: block;
}
.ref-initials-av {
  width: 90px; height: 90px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; font-weight: 800; letter-spacing: .03em; color: #fff;
}
.ref-name {
  font-size: .62rem; font-weight: 700; line-height: 1.2;
  padding: .3rem .3rem .1rem; color: rgba(255,255,255,.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
}
.ref-stats {
  font-size: .55rem; padding: 0 .3rem .3rem;
  color: rgba(255,255,255,.35); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Weather picker ──────────────────────────────────────── */
.weather-picker-section {
  margin-top: 1.2rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.weather-picker-lbl {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  margin-bottom: .75rem;
}
.weather-picker-row {
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.wth-card {
  cursor: pointer; border-radius: 10px; padding: .5rem .7rem .4rem;
  border: 2px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  transition: border-color .16s, box-shadow .16s, transform .13s, opacity .18s;
  min-width: 68px; text-align: center; position: relative;
  opacity: .55;
}
.wth-card:hover { border-color: rgba(255,255,255,.28); transform: translateY(-2px); opacity: 1; }
.wth-active {
  border-color: var(--neon) !important;
  box-shadow: 0 0 10px rgba(0,212,255,.25);
  background: rgba(0,212,255,.06);
  opacity: 1 !important;
}
.wth-active::after {
  content: '✓';
  position: absolute; top: 3px; right: 5px;
  font-size: .75rem; font-weight: 800; color: var(--neon);
  text-shadow: 0 0 5px rgba(0,212,255,.6);
}
.wth-icon  { font-size: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center; min-height: 1.9rem; }
.wth-icon svg { width: 28px; height: 28px; display: block; flex-shrink: 0; }
.wth-label { font-size: .6rem; font-weight: 600; color: rgba(255,255,255,.7); margin-top: .25rem; }

/* ── Prematch stadium info ───────────────────────────────── */
.pm-stadium-info {
  font-size: .78rem; color: rgba(255,255,255,.55);
  margin-top: .5rem; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: .4rem; flex-wrap: wrap;
}
.pm-stad-icon { font-size: .9rem; }
.pm-stad-name { color: rgba(255,255,255,.8); font-weight: 600; }
.pm-stad-loc  { font-size: .72rem; }

.btn-simulate {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 2.8rem;
  font-size: 1rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  color: #000;
  background: linear-gradient(135deg, var(--neon), var(--neon2));
  border: none; border-radius: 30px; cursor: pointer;
  box-shadow: 0 4px 24px rgba(0,212,255,0.35);
  transition: transform .15s, box-shadow .15s, opacity .15s;
  outline: none;
}
.btn-simulate:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
.btn-simulate:hover  { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,212,255,0.5); }
.btn-simulate:active { transform: translateY(0);    box-shadow: 0 2px 12px rgba(0,212,255,0.3); }
.btn-simulate:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-icon { font-size: 1.1rem; }

/* ── Lookup button ───────────────────────────────────────── */
.btn-lookup {
  margin-top: .6rem;
  width: 100%;
  padding: .55rem 1rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  color: var(--neon);
  background: transparent;
  border: 1px solid rgba(0,212,255,.35);
  border-radius: 8px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-lookup:hover  { background: rgba(0,212,255,.08); border-color: var(--neon); }
.btn-lookup:active { background: rgba(0,212,255,.15); }
.btn-lookup:disabled { opacity: .3; cursor: not-allowed; pointer-events: none; }
.btn-lookup:not(:disabled) { box-shadow: 0 0 10px rgba(0,212,255,.18); }

/* ── Lookup preview panel ────────────────────────────────── */
.lookup-preview {
  margin-top: .65rem;
  padding: 0;
  background: rgba(3, 8, 18, 0.85);
  border: 1px solid var(--team-glow, rgba(0,212,255,.35));
  box-shadow: 0 0 28px -6px var(--team-glow, rgba(0,212,255,.2)),
              inset 0 1px 0 rgba(255,255,255,.05);
  border-radius: 10px;
  overflow: hidden;
  animation: fadeSlideIn .25s ease;
}
@keyframes fadeSlideIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.lookup-source {
  font-size: .67rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--team-glow, var(--neon));
  font-style: normal;
  padding: .45rem .65rem .38rem;
  background: linear-gradient(90deg, rgba(255,255,255,.05), transparent);
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 0;
  display: block;
}
.lookup-players {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .28rem .28rem .32rem;
  margin-top: 0;
}
/* ── Column header ── */
.lk-header {
  display: flex; flex-direction: row; align-items: center;
  gap: .4rem; padding: .06rem .5rem .06rem .36rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: .05rem;
  border-left: 3px solid transparent;
}
.lk-h-kit  { width: 10px; flex-shrink: 0; font-size: .4rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.25); text-align: center; overflow: hidden; }
.lk-h-ovr  { width: 32px; flex-shrink: 0; font-size: .4rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.25); text-align: center; overflow: hidden; }
.lk-h-num  { width: 34px; flex-shrink: 0; font-size: .4rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.25); text-align: center; overflow: hidden; }
.lk-h-name { font-size: .4rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: rgba(255,255,255,.25); flex: 1; }
.lk-h-pos  { width: 30px; flex-shrink: 0; font-size: .4rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.25); text-align: center; overflow: hidden; }
/* ── Player row ── */
.lk-jcard {
  display: flex; flex-direction: row; align-items: center;
  gap: .4rem; cursor: default;
  transition: background .12s, transform .1s;
  border-radius: 5px;
  padding: .3rem .5rem .3rem .36rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-left: 3px solid rgba(255,255,255,.1);
  width: 100%; box-sizing: border-box;
}
.lk-jcard:hover { background: rgba(255,255,255,.08); transform: translateX(3px); }
/* Kit colour swatch */
.lk-jkit {
  width: 10px; height: 22px;
  border-radius: 2px 2px 1px 1px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25);
  position: relative;
}
.lk-jkit::after { display: none; }
/* Rating number — fixed 32px column for all tiers */
.lk-jovr {
  font-family: 'Rajdhani', monospace;
  font-size: .78rem; font-weight: 900; line-height: 1;
  color: rgba(255,255,255,.9);
  width: 32px; flex-shrink: 0;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
}
.lk-jnum {
  font-size: .58rem; font-weight: 700; color: rgba(255,255,255,.3);
  width: 34px; flex-shrink: 0; text-align: center;
  font-family: 'Rajdhani', monospace;
}
.lk-jname {
  font-size: .73rem; color: rgba(255,255,255,.92);
  font-weight: 700; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .01em;
}
.lk-jpos {
  font-size: .48rem; font-weight: 900; letter-spacing: .07em;
  color: rgba(255,255,255,.5);
  text-align: center; flex-shrink: 0;
  width: 30px; min-width: 26px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 3px;
  padding: .1rem .2rem;
}
/* Tier accents */
.lk-jcard-elite  { border-left-color: #f7d02e; background: rgba(245,197,24,.07); }
.lk-jcard-elite  .lk-jovr { color: #ffe566; }
.lk-jcard-elite  .lk-jpos { color: rgba(245,197,24,.75); border-color: rgba(245,197,24,.3); background: rgba(245,197,24,.1); }
.lk-jcard-gold   { border-left-color: #c8921a; background: rgba(200,146,26,.05); }
.lk-jcard-gold   .lk-jovr { color: #e8a820; }
.lk-jcard-gold   .lk-jpos { color: rgba(218,165,32,.65); }
.lk-jcard-silver { border-left-color: #8899bb; background: rgba(136,153,187,.04); }
.lk-jcard-silver .lk-jovr { color: #9ab0cc; }
.lk-jcard-silver .lk-jpos { color: rgba(160,176,210,.55); }
.lk-jcard-bronze { border-left-color: #8a5530; }
.lk-jcard-bronze .lk-jovr { color: #aa6832; }
.lk-jcard-bronze .lk-jpos { color: rgba(160,105,55,.6); }
.lk-hint {
  font-size: .75rem; color: rgba(255,255,255,.4);
  padding: .4rem .5rem; font-style: italic;
}

.error-msg {
  text-align: center; color: #ff6b6b;
  font-size: .88rem; margin-top: .8rem;
}
.hidden { display: none !important; }

/* ── Loader ──────────────────────────────────────────────── */
.loader {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; color: var(--grey); font-size: .95rem;
  padding: 2rem;
}
.spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(0,212,255,0.2);
  border-top-color: var(--neon);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Score poster ────────────────────────────────────────── */
.score-poster {
  padding: 2.5rem 2rem;
  background: linear-gradient(145deg, rgba(0,30,60,0.6), rgba(20,0,50,0.6));
  border-color: rgba(0,212,255,0.2);
  box-shadow: var(--shadow), var(--shadow-neon);
}
.poster-teams {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 1.5rem;
}
.poster-team { text-align: center; }
.poster-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.5px; }
.poster-era  { font-size: .82rem; color: var(--grey); margin-top: .3rem; }
.poster-score-block { text-align: center; }
.poster-score {
  font-size: clamp(3.5rem, 8vw, 6rem);
  font-weight: 900; letter-spacing: -.02em;
  color: var(--gold);
  text-shadow: 0 0 40px rgba(245,197,24,0.4);
  line-height: 1;
}
.poster-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--neon); margin-top: .5rem;
}
.poster-context { font-size: .78rem; color: var(--grey); margin-top: .2rem; }

.scorers-row {
  display: flex; align-items: flex-start; gap: 1rem;
  margin-top: 1.5rem; padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}
.scorers-side { flex: 1; font-size: .85rem; color: var(--grey); line-height: 1.7; }
.scorers-right { text-align: right; }
.scorers-mid { font-size: 1.4rem; padding-top: .1rem; }
.scorer-entry {
  display: flex; align-items: center; gap: .3rem;
  color: var(--white); padding: .12rem 0;
}
.scorers-right .scorer-entry { justify-content: flex-end; }
.scorer-ball { font-size: 1rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.scorer-name { font-weight: 600; }
.goal-min {
  font-size: .7rem; opacity: .5; margin-left: .15rem;
  background: rgba(255,255,255,.07); padding: .05rem .3rem; border-radius: 8px;
}
.scorer-empty { opacity: .28; font-size: .85rem; }

/* ── Cards row ───────────────────────────────────────────── */
.cards-row {
  display: flex; align-items: flex-start; gap: 1rem;
  margin-top: .75rem; padding-top: .75rem;
  border-top: 1px solid var(--border);
}
.cards-side { flex: 1; font-size: .82rem; color: var(--grey); line-height: 1.7; }
.cards-right { text-align: right; }
.cards-mid { font-size: 1rem; padding-top: .15rem; }
.card-entry { color: var(--white); }
.card-min { font-size: .72rem; opacity: .6; margin-left: .2rem; }

/* ── Winner / loser highlight ────────────────────────────── */
.poster-winner .poster-name {
  color: var(--gold);
  text-shadow: 0 0 20px rgba(245,197,24,.4);
}
.poster-winner::after {
  content: '🏆';
  display: block; font-size: 1rem; margin-top: .3rem;
  text-align: center; line-height: 1;
}
.poster-loser { opacity: .6; }
.probs-card { padding: 1.8rem 2rem; }
.section-title {
  font-size: 1rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--grey); margin-bottom: 1.2rem;
}
.probs-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.prob-item { text-align: center; }
.prob-label { font-size: .78rem; color: var(--grey); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .4rem; }
.prob-value { font-size: 2rem; font-weight: 800; margin-bottom: .5rem; }
.prob-a .prob-value { color: var(--accent-a); }
.prob-d .prob-value { color: var(--accent-d); }
.prob-b .prob-value { color: var(--accent-b); }
.prob-bar-wrap {
  height: 5px; background: rgba(255,255,255,0.08);
  border-radius: 3px; overflow: hidden;
}
.prob-bar { height: 100%; border-radius: 3px; transition: width 0.8s cubic-bezier(.4,0,.2,1); width: 0; }
.bar-a { background: var(--accent-a); }
.bar-d { background: var(--accent-d); }
.bar-b { background: var(--accent-b); }

.alt-scores {
  margin-top: 1.2rem; font-size: .85rem;
  color: var(--grey); border-top: 1px solid var(--border); padding-top: .9rem;
}
.alt-label { font-weight: 600; color: var(--white); margin-right: .4rem; }
.alt-score-chip {
  display: inline-block; padding: .2rem .65rem;
  background: rgba(255,255,255,0.07); border: 1px solid var(--border);
  border-radius: 20px; font-size: .8rem; margin: .2rem .2rem 0 0;
}
.xg-row {
  display: flex; gap: .8rem; align-items: center;
  margin-top: .8rem; font-size: .82rem; color: var(--grey);
}
.xg-sep { opacity: .3; }
.xg-note { margin-left: auto; font-style: italic; }

/* ── Ratings table ───────────────────────────────────────── */
.ratings-card { padding: 1.8rem 2rem; }
.ratings-table-wrap { overflow-x: auto; }
.ratings-table {
  width: 100%; border-collapse: collapse; font-size: .92rem;
}
.ratings-table th, .ratings-table td {
  padding: .65rem 1rem; text-align: center;
}
.ratings-table th {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--grey); border-bottom: 1px solid var(--border);
}
.ratings-table th:first-child, .ratings-table td:first-child { text-align: left; }
.ratings-table tbody tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,0.04); }
.rating-cell {
  font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.rating-pip {
  display: inline-block; height: 6px; border-radius: 3px;
  background: currentColor; opacity: .5; transition: width .5s;
}
.high   { color: #4ade80; }
.medium { color: var(--gold); }
.low    { color: #f87171; }

/* ── Lineups grid ────────────────────────────────────────── */
.lineups-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.lineup-card {
  padding: 1.8rem;
  border-top: 2px solid var(--kit-col, rgba(0,212,255,.35));
  transition: border-color .3s;
}
.formation-badge {
  display: inline-block; font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; color: var(--kit-col, var(--neon));
  background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.25);
  border-radius: 20px; padding: .2rem .8rem; margin-bottom: 1rem;
}

/* ── Pitch ───────────────────────────────────────────────── */
.pitch-wrap {
  background: #07280d;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-md);
  padding: 1rem .5rem 1.2rem;
  margin-bottom: .8rem;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 40px rgba(0,0,0,.55), 0 4px 18px rgba(0,0,0,.3);
}
.pitch-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.pitch {
  display: flex; flex-direction: column; gap: .55rem;
  position: relative; z-index: 1;
}
.pitch-row {
  display: flex; justify-content: center; gap: .55rem; flex-wrap: wrap;
}

/* ── Player chip ─────────────────────────────────────────── */
@keyframes chipIn {
  from { opacity: 0; transform: translateY(10px) scale(.88); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.player-chip {
  display: flex; flex-direction: column; align-items: center;
  gap: .18rem; cursor: default; position: relative;
  animation: chipIn .32s ease both;
  animation-delay: calc(var(--i, 0) * 55ms + 80ms);
}
.player-jersey {
  line-height: 0;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.6));
  transition: transform .15s, filter .15s;
}
.player-jersey svg { width: 42px; height: 48px; }
.player-chip:hover .player-jersey {
  transform: scale(1.22) translateY(-2px);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.7)) brightness(1.12);
}
.player-name {
  font-size: .58rem; font-weight: 600; color: rgba(255,255,255,0.9);
  max-width: 68px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .02em;
}
.player-pos-lbl {
  font-size: .5rem; font-weight: 700; letter-spacing: .06em;
  color: rgba(255,255,255,.38); text-transform: uppercase;
}
.player-pos {
  font-size: .55rem; color: rgba(255,255,255,0.45);
  font-weight: 600; letter-spacing: .05em;
}

.squad-source {
  font-size: .73rem; color: var(--grey); margin-top: .4rem;
  font-style: italic; line-height: 1.4;
}

/* ── Share button ─────────────────────────────────────────── */
.share-row { display: flex; justify-content: center; margin-top: 1.2rem; }
.btn-share {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem 1.4rem; font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; color: var(--grey);
  background: transparent; border: 1px solid var(--border);
  border-radius: 20px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-share:hover { background: rgba(255,255,255,.07); color: var(--white); border-color: rgba(255,255,255,.25); }

/* ── Key moments (panel derecho dentro de mom-card) ────────── */
.key-moments {
  flex: 1;
  padding-left: 1.4rem;
  display: flex; flex-direction: column; justify-content: center;
}
.km-title {
  font-size: .62rem; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255,255,255,.38);
  margin-bottom: .55rem;
}
.km-list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: .38rem;
}
.km-list li {
  font-size: .82rem; color: rgba(255,255,255,.78); line-height: 1.35;
}


/* ── Match timeline ───────────────────────────────────────── */
.timeline-card { padding: 1.8rem 2rem; }
.timeline-header {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 1rem;
}
.timeline-header > *:first-child { justify-content: flex-end; text-align: right; }
.timeline-header > *:last-child  { justify-content: flex-start; text-align: left; }
.timeline-count { color: var(--grey); font-weight: 400; text-transform: none; letter-spacing: 0; }
.timeline-events { display: flex; flex-direction: column; }
.t-event {
  display: grid; grid-template-columns: 1fr 58px 1fr;
  align-items: center; gap: .5rem;
  padding: .42rem 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.t-event:last-child { border-bottom: none; }
.t-left  { text-align: right; font-size: .84rem; color: var(--white); }
.t-right { text-align: left;  font-size: .84rem; color: var(--white); }
.t-mid   { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.t-icon  { font-size: .9rem; line-height: 1; }
.t-min   {
  font-size: .65rem; font-weight: 700; color: var(--grey);
  background: rgba(255,255,255,.06); border-radius: 10px;
  padding: .1rem .4rem; min-width: 30px; text-align: center;
}
.t-empty-match { text-align: center; font-size: .85rem; color: var(--grey); font-style: italic; padding: 1rem 0; }
/* Event type badges */
.t-tag          { font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
                  padding: .1rem .35rem; border-radius: 6px; margin-left: .2rem; vertical-align: middle; }
.t-tag-pen      { background: rgba(245,197,24,.18); color: #f5c518; border: 1px solid rgba(245,197,24,.3); }
.t-tag-miss     { background: rgba(255,80,80,.15);  color: #ff8888;  border: 1px solid rgba(255,80,80,.3); }
.t-tag-corner   { background: rgba(77,184,184,.15); color: #4db8b8; border: 1px solid rgba(77,184,184,.3); }
.t-tag-fk       { background: rgba(150,150,255,.15);color: #aaaaff; border: 1px solid rgba(150,150,255,.3); }
/* Animated timeline reveal */
.t-anim-hidden  { opacity: 0; transform: translateY(4px); pointer-events: none; }
.t-anim-reveal  { opacity: 1; transform: translateY(0); pointer-events: auto;
                  transition: opacity .35s ease, transform .35s ease; }
/* Narration row — spans full width under the event */
.t-event-narrated { display: flex; flex-direction: column; padding: .3rem 0; }
.t-event-narrated > :first-child { display: grid; grid-template-columns: 1fr 58px 1fr; align-items: center; gap: .5rem; }
.t-narration {
  font-size: .82rem; font-style: normal; line-height: 1.55;
  color: #cbd5e1; padding: .2rem .4rem .12rem;
  border-top: 1px solid rgba(255,255,255,.07); margin-top: .1rem;
  min-height: 1.1em;
}
.t-nar-a { text-align: left; }
.t-nar-b { text-align: left; }
@keyframes t-cursor-blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── Head-to-head stats bars ──────────────────────────────── */
.stats-card { padding: 1.8rem 2rem; }
.hth-names {
  display: flex; justify-content: space-between;
  font-size: .82rem; font-weight: 700; margin-bottom: 1.4rem;
}
#hth-name-a { color: var(--accent-a); }
#hth-name-b { color: var(--accent-b); }
.hth-row {
  display: grid; grid-template-columns: 46px 1fr 80px 1fr 46px;
  align-items: center; gap: .55rem; margin-bottom: 1.1rem;
}
.hth-val    { font-size: .88rem; font-weight: 700; }
.hth-val-a  { color: var(--accent-a); text-align: right; }
.hth-val-b  { color: var(--accent-b); text-align: left; }
.hth-win    { font-size: .96rem; text-shadow: 0 0 10px currentColor; }
.hth-label  { text-align: center; font-size: .67rem; color: var(--grey); text-transform: uppercase; letter-spacing: .1em; line-height: 1.3; }
.hth-track  { height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.hth-track-a { display: flex; justify-content: flex-end; }
.hth-fill-a { height: 6px; background: var(--accent-a); border-radius: 3px; width: 0; transition: width .9s cubic-bezier(.4,0,.2,1); }
.hth-fill-b { height: 6px; background: var(--accent-b); border-radius: 3px; width: 0; transition: width .9s cubic-bezier(.4,0,.2,1); }
.stat-sep   { height: 1px; background: var(--border); margin: .4rem 0 1.1rem; }

/* ── Man of the Match ─────────────────────────────────────── */
.mom-card {
  padding: 1.3rem 1.8rem;
  background: linear-gradient(135deg, rgba(245,197,24,.08), rgba(245,197,24,.02));
  border-color: rgba(245,197,24,.3);
  display: flex; align-items: stretch; gap: 0;
}
.mom-left   { display: flex; align-items: center; gap: 1.2rem; flex: 0 0 auto; padding-right: 1.4rem; }
.mom-divider { width: 1px; background: rgba(245,197,24,.18); flex-shrink: 0; margin: .2rem 0; }
.mom-icon   { font-size: 2rem; flex-shrink: 0; }
.mom-body   { flex: 1; }
.mom-badge  { font-size: .64rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: .35rem; }
.mom-name   { font-size: 1.2rem; font-weight: 800; color: var(--white); }
.mom-meta   { font-size: .8rem; color: var(--grey); margin-top: .2rem; }
.mom-meta span { color: var(--gold); font-weight: 600; }

/* ── Toast notification ───────────────────────────────────── */
.toast {
  position: fixed; bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(8,11,20,.95); backdrop-filter: blur(16px);
  border: 1px solid rgba(0,212,255,.4); color: var(--white);
  padding: .6rem 1.5rem; border-radius: 30px;
  font-size: .88rem; font-weight: 600;
  opacity: 0; transition: opacity .25s, transform .25s;
  pointer-events: none; z-index: 9999;
}
.toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Autocomplete dropdown ────────────────────────────────── */
.ac-dropdown {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px);
  z-index: 200;
  background: #1a2236;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  max-height: 340px; overflow-y: auto;
  animation: fadeSlideIn .15s ease;
}
.ac-group-header {
  padding: .32rem .9rem .22rem;
  font-size: .62rem; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(0,212,255,.55);
  background: rgba(0,212,255,.04);
  border-top: 1px solid rgba(0,212,255,.1);
  border-bottom: 1px solid rgba(0,212,255,.06);
  position: sticky; top: 0; z-index: 1;
  user-select: none; pointer-events: none;
}
.ac-group-header:first-child { border-top: none; }
.ac-item {
  padding: .38rem .9rem; font-size: .88rem; cursor: pointer;
  color: var(--txt); border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .1s;
  display: flex; align-items: center; gap: .55rem;
}
.ac-item-name { flex: 1; }
.ac-seasons {
  font-size: .58rem; font-weight: 700; color: rgba(255,255,255,.22);
  letter-spacing: .03em; white-space: nowrap; flex-shrink: 0;
}
.ac-badge {
  width: 22px; height: 22px; object-fit: contain; flex-shrink: 0;
  border-radius: 2px;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.ac-active { background: rgba(0,212,255,.1); color: var(--white); }
.ac-item:hover .ac-seasons, .ac-item.ac-active .ac-seasons { color: rgba(255,255,255,.45); }
/* The team-col needs relative positioning for the dropdown */
.team-col { position: relative; }

/* ── Penalty card ─────────────────────────────────────────── */
.penalty-card {
  padding: 1.8rem 2rem; position: relative; overflow: hidden;
  background: linear-gradient(145deg, rgba(245,197,24,.05), rgba(0,0,0,0));
  border-color: rgba(245,197,24,.25);
}
.pen-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 1.4rem;
}
.pen-header-vs { color: var(--grey); font-weight: 400; text-transform: none; letter-spacing: 0; }
.pen-row {
  display: grid; grid-template-columns: 1fr 40px 1fr;
  align-items: center; gap: .6rem;
  padding: .35rem 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.pen-row.pen-sd { opacity: .8; }
.pen-row:last-child { border-bottom: none; }
.pen-kicker-a { display: flex; align-items: center; gap: .4rem; justify-content: flex-end; }
.pen-kicker-b { display: flex; align-items: center; gap: .4rem; }
.pen-round-num {
  text-align: center; font-size: .7rem; font-weight: 700;
  color: var(--grey); background: rgba(255,255,255,.06);
  border-radius: 20px; padding: .15rem .4rem;
}
.pen-kick {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid; display: flex; align-items: center; justify-content: center;
  font-size: .72rem; flex-shrink: 0;
}
.pen-kick.scored  { background: rgba(74,222,128,.18); border-color: #4ade80; color: #4ade80; }
.pen-kick.missed  { background: rgba(248,113,113,.18); border-color: #f87171; color: #f87171; }
.pen-name { font-size: .78rem; color: var(--white); }
.pen-name-a { text-align: right; }

/* staggered row entrance */
.pen-row-anim {
  opacity: 0;
  animation: pen-row-in .38s cubic-bezier(.22,.68,0,1.25) both;
  animation-delay: calc(var(--i) * 90ms + 120ms);
}
@keyframes pen-row-in {
  from { opacity: 0; transform: translateX(-18px) scale(.95); }
  to   { opacity: 1; transform: none; }
}
/* kick bubble pop animation */
.pen-kick {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid; display: flex; align-items: center; justify-content: center;
  font-size: .72rem; flex-shrink: 0;
  animation: pen-kick-pop .42s cubic-bezier(.175,.885,.32,1.4) both;
  animation-delay: calc(var(--ki, 0) * 90ms + 280ms);
}
@keyframes pen-kick-pop {
  from { transform: scale(0) rotate(-40deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* score and winner celebration */
.pen-score-anim {
  animation: pen-score-in .6s cubic-bezier(.175,.885,.32,1.275) both;
  animation-delay: .35s;
}
@keyframes pen-score-in {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.pen-winner-anim {
  animation: pen-winner-slide .5s ease both;
  animation-delay: .55s;
}
@keyframes pen-winner-slide {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* confetti canvas overlay */
.pen-confetti-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 10; opacity: 0;
  transition: opacity .2s;
}

/* ── Penalty kick animation overlay ──────────────────────── */
.pko-overlay {
  position: fixed; inset: 0; z-index: 320;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,8,14,.88);
  backdrop-filter: blur(6px);
}
.pko-overlay.hidden { display: none; }
.pko-overlay.pko-in  { animation: pko-fade-in  .25s ease both; }
.pko-overlay.pko-out { animation: pko-fade-out .3s ease both; }
@keyframes pko-fade-in  { from { opacity:0 } to { opacity:1 } }
@keyframes pko-fade-out { from { opacity:1 } to { opacity:0 } }

.pko-inner {
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  width: min(420px, 92vw);
}
.pko-kicker-name {
  font-size: 1.1rem; font-weight: 800; color: rgba(255,255,255,.9);
  letter-spacing: .04em; text-align: center;
}
.pko-pitch {
  position: relative; width: 100%;
}
.pko-goal-svg { width: 100%; display: block; }

/* GK dive animation — triggered by JS via class */
.pko-gk { transform-origin: 100px 45px; transition: transform .35s cubic-bezier(.22,.68,0,1.2); }
.pko-gk.dive-left  { transform: translateX(-38px) rotate(-25deg); }
.pko-gk.dive-right { transform: translateX(38px)  rotate(25deg);  }
.pko-gk.dive-up    { transform: translateY(-18px); }

/* Ball: starts at penalty spot, flies to target via CSS custom props */
.pko-ball {
  position: absolute;
  bottom: 14px; left: calc(50% - 14px);
  width: 28px; height: 28px;
  font-size: 1.4rem; line-height: 28px; text-align: center;
  transform-origin: center center;
  transition: none;
}
.pko-ball.kick {
  animation: pko-ball-fly var(--pko-dur, .55s) cubic-bezier(.2,.6,.4,1) forwards;
}
@keyframes pko-ball-fly {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--pko-tx,0px), var(--pko-ty,-120px)) scale(var(--pko-scale,.55)); opacity: .9; }
}
.pko-ball.miss-spin {
  animation: pko-miss .5s cubic-bezier(.2,.6,.6,1) forwards;
}
@keyframes pko-miss {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  60%  { transform: translate(var(--pko-tx,0px), var(--pko-ty,-60px)) scale(.7); opacity: 1; }
  100% { transform: translate(calc(var(--pko-tx,0px) * 1.4), 10px) scale(.5); opacity: .4; }
}

.pko-result-label {
  font-size: 2.5rem; font-weight: 900; letter-spacing: .04em;
  text-align: center; min-height: 3rem; opacity: 0;
}
.pko-result-label.show { animation: pko-result-pop .45s cubic-bezier(.18,.89,.32,1.28) forwards; }
@keyframes pko-result-pop {
  0%   { transform: scale(.25); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
.pko-result-label.goal  { color: #4ade80; text-shadow: 0 0 28px rgba(74,222,128,.7), 0 0 56px rgba(74,222,128,.3); }
.pko-result-label.miss  { color: #f87171; text-shadow: 0 0 24px rgba(248,113,113,.6); }
.pko-result-label.saved { color: #38bdf8; text-shadow: 0 0 24px rgba(56,189,248,.6); }
.pko-score-bar {
  font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.65);
  letter-spacing: .05em; text-align: center; min-height: 1.1rem;
}
.pen-score-display {
  font-size: 2rem; font-weight: 900; color: var(--gold); text-align: center;
  margin: 1.2rem 0 .4rem; text-shadow: 0 0 20px rgba(245,197,24,.35); line-height: 1;
}
.pen-winner {
  text-align: center; font-size: .85rem; color: var(--grey); margin-bottom: .4rem;
}
.pen-winner strong { color: var(--gold); }

/* ── Team badge (poster + lineup) ─────────────────────────── */
.poster-badge {
  width: 72px; height: 72px; object-fit: contain;
  display: block; margin: 0 auto .7rem;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.7));
  animation: badge-pop .5s cubic-bezier(.22,.68,0,1.3) both;
}
.badge-loaded { /* class added after successful load */ }
.lineup-badge {
  width: 24px; height: 24px; object-fit: contain;
  vertical-align: middle; margin-right: .48rem;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.5));
}

/* ── Player tooltip card ──────────────────────────────── */
.player-tooltip {
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(15,25,48,.97);
  border: 1px solid rgba(0,212,255,.35);
  border-radius: 10px; padding: .5rem .85rem;
  min-width: 130px; text-align: center;
  pointer-events: none; z-index: 100;
  opacity: 0;
  transition: opacity .18s, transform .18s;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.player-chip:hover .player-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.tooltip-pos  { display: block; font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--neon); margin-bottom: .2rem; }
.tooltip-name { display: block; font-size: .82rem; color: var(--white); font-weight: 700; }
.tooltip-desc { display: block; font-size: .68rem; color: var(--grey); margin-top: .18rem; }

/* ── PRE-MATCH PLAYER CARD PRESENTATION ─────────────────── */
.prematch-screen {
  position: relative; overflow: hidden;
  padding: 1.8rem 1.5rem 2rem;
  margin-bottom: var(--gap);
  animation: fadeSlideIn .4s ease;
  background: linear-gradient(160deg, rgba(0,20,45,.75) 0%, rgba(10,0,30,.75) 100%);
  border-color: rgba(255,255,255,.1);
}
.prematch-screen::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 35% at 50% 100%, rgba(0,100,0,.18) 0%, transparent 65%),
    radial-gradient(ellipse at 0% 50%, rgba(26,86,219,.1) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 50%, rgba(192,57,43,.1) 0%, transparent 50%);
  pointer-events: none;
}
.pm-fade-out { animation: live-exit .5s ease forwards !important; }
.pm-skip-btn {
  position: absolute; top: 1rem; right: 1rem;
}
.pm-eyebrow {
  text-align: center; font-size: .68rem; font-weight: 800;
  letter-spacing: .24em; color: rgba(255,255,255,.22); text-transform: uppercase;
  margin-bottom: 1.6rem;
  position: relative; z-index: 1;
}
.pm-eyebrow::after {
  content: ''; display: block; margin: .45rem auto 0;
  width: 36px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}
/* ── Pre-match intro block ─────────────────────────────────── */
.pm-intro {
  text-align: center; margin: 0 auto 2rem; max-width: 580px;
  padding: 1.25rem 1.5rem 1.15rem;
  background: linear-gradient(135deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.10);
  border-top: 2px solid rgba(212,175,55,.35);
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
}
.pm-intro-matchup {
  font-size: 1.08rem; font-weight: 800; letter-spacing: .01em;
  color: #fff; margin-bottom: .4rem;
}
.pm-intro-vs {
  display: inline-block;
  font-size: .7rem; font-weight: 800; color: var(--gold);
  margin: 0 .5rem; letter-spacing: .18em;
  padding: .1em .45em;
  border: 1px solid rgba(212,175,55,.4);
  border-radius: 4px;
  vertical-align: middle;
}
.pm-intro-era {
  font-size: .7rem; font-weight: 500; color: rgba(255,255,255,.42);
  margin-left: .22rem;
}
.pm-intro-stad {
  font-size: .75rem; color: rgba(255,255,255,.38);
  margin-bottom: .75rem; letter-spacing: .01em;
}
.pm-intro-text {
  font-size: .83rem; line-height: 1.6; color: rgba(255,255,255,.58);
  margin: 0;
}
.pm-intro-text em { color: var(--gold); font-style: normal; font-weight: 600; }
.pm-intro-text strong { color: rgba(255,255,255,.88); }
.pm-matchup {
  display: grid; grid-template-columns: 1fr 160px 1fr; gap: .8rem; align-items: start;
}
.pm-center-col {
  display: flex; flex-direction: column; align-items: center;
  gap: .4rem; padding-top: 2.8rem;
}
.pm-vs-text {
  font-size: 1.8rem; font-weight: 900; color: var(--gold);
  text-shadow: 0 0 28px rgba(245,197,24,.55); letter-spacing: .06em;
}
.pm-speed-label {
  font-size: .58rem; color: rgba(255,255,255,.28);
  text-transform: uppercase; letter-spacing: .16em; text-align: center;
  margin-top: .9rem; margin-bottom: .1rem;
}
.pm-speed-pills {
  display: flex; flex-direction: column; gap: .35rem; width: 100%;
}
.pm-speed-pill {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  color: rgba(255,255,255,.5);
  font-size: .75rem; font-weight: 700;
  padding: .55rem .4rem;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s, transform .12s, box-shadow .12s;
  white-space: nowrap; text-align: center;
}
.pm-speed-pill::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.08) 0%, transparent 70%);
  opacity: 0; transition: opacity .18s;
}
.pm-speed-pill:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.25);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.pm-speed-pill:hover::before { opacity: 1; }
.pm-speed-pill.pm-speed-active {
  background: linear-gradient(145deg, rgba(245,197,24,.22), rgba(245,197,24,.08));
  border-color: var(--gold);
  border-width: 1.5px;
  color: var(--gold);
  box-shadow: 0 0 16px rgba(245,197,24,.22), inset 0 1px 0 rgba(245,197,24,.18);
}
.pm-speed-pill.pm-speed-active::before { opacity: 1; }

.pm-start-btn {
  margin-top: .65rem;
  background: linear-gradient(150deg, #1e63f0 0%, #5b9aff 50%, #1e63f0 100%);
  background-size: 200% 100%; background-position: 100% 0;
  border: none; border-radius: 14px;
  color: #fff; font-size: .9rem; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .8rem 1rem;
  cursor: pointer; width: 100%;
  box-shadow: 0 6px 24px rgba(30,99,240,.5), inset 0 1px 0 rgba(255,255,255,.25);
  transition: background-position .4s, transform .14s, box-shadow .14s;
  position: relative; overflow: hidden;
}
.pm-start-btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 60%);
  pointer-events: none;
}
.pm-start-btn:hover {
  background-position: 0 0;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(30,99,240,.65), inset 0 1px 0 rgba(255,255,255,.3);
}
.pm-start-btn:active {
  transform: translateY(1px);
  box-shadow: 0 3px 12px rgba(30,99,240,.4);
}
.pm-start-btn:disabled {
  background: rgba(255,255,255,.07);
  background-size: 100% 100%;
  box-shadow: none;
  color: rgba(255,255,255,.45);
  cursor: not-allowed;
  transform: none;
  letter-spacing: .04em;
  font-size: .78rem;
}

/* ── Radar row below pre-match start button ───────────────── */
.pm-radar-row {
  margin-top: .7rem;
  display: flex; justify-content: center;
}
.pm-radar-row .radar-card {
  max-width: none;
  margin: 0;
  padding: .6rem .7rem .5rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
}
.pm-radar-row .radar-svg  { width: 190px !important; height: 190px !important; }
.pm-radar-row .radar-legend { flex-wrap: nowrap; gap: .6rem; }
.pm-radar-row .radar-legend-item { font-size: .68rem; }
/* Team block */
.pm-team-block   { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.pm-team-block-b { align-items: flex-end; }

/* Premium header with big badge */
.pm-team-hdr {
  display: flex; align-items: center; gap: .7rem;
  padding-bottom: .6rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
.pm-team-hdr-b { flex-direction: row-reverse; text-align: right; }

.pm-badge-zone {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  overflow: hidden;
}
.pm-badge-big {
  width: 42px; height: 42px; object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
  animation: badge-pop .4s ease;
}
@keyframes badge-pop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.pm-badge-placeholder {
  font-size: .72rem; font-weight: 900; color: rgba(255,255,255,.35);
  letter-spacing: .05em;
}
.pm-badge-img  { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.pm-hdr-info   { flex: 1 1 0; min-width: 0; }
.pm-hdr-name   { font-size: .9rem; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-hdr-era    { font-size: .65rem; color: rgba(255,255,255,.42); margin-top: .1rem; }
.pm-hdr-form   { margin-top: .22rem; }
.pm-form-tag   { font-size: .6rem; color: rgba(255,255,255,.36); background: rgba(255,255,255,.08); padding: .12rem .4rem; border-radius: 4px; }

/* Team overall rating bar */
.pm-rating-bar {
  display: flex; align-items: center; gap: .35rem;
  padding: .22rem .55rem .22rem .45rem;
  border-radius: 6px; margin-bottom: .15rem;
  width: fit-content;
}
.pm-rating-bar-a { background: rgba(26,86,219,.15); }
.pm-rating-bar-b { background: rgba(192,57,43,.15); align-self: flex-end; }
.pm-rating-num { font-size: 1rem; font-weight: 900; color: rgba(255,255,255,.75); }
.pm-rating-lbl { font-size: .58rem; font-weight: 800; letter-spacing: .1em; color: rgba(255,255,255,.35); text-transform: uppercase; margin-top: 2px; }

/* Card rows with 3D perspective */
.pm-rows  { display: flex; flex-direction: column; gap: .38rem; perspective: 800px; }
.pm-row   { display: flex; gap: .25rem; flex-wrap: nowrap; }
.pm-row-b { justify-content: flex-end; }

/* ── Bench section ─────────────────────────────────── */
.pm-bench-label {
  font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.32); margin-top: .7rem; margin-bottom: .25rem;
  padding-left: 2px;
}
.pm-bench-row {
  display: flex; gap: .32rem; flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: .4rem .5rem;
  border-radius: 8px;
  background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.07);
  scrollbar-width: none;
}
.pm-bench-row::-webkit-scrollbar { display: none; }
.pm-bench-row.pm-row-b { justify-content: flex-start; }

/* Bench card modifier — real smaller size, no scale trick */
.pm-card-bench {
  width: 64px !important;
  height: 76px !important;
  opacity: .80;
  transform: none !important;
  margin: 0 !important;
  flex-shrink: 0;
}
.pm-card-bench .pmc-ovr  { font-size: .9rem; }
.pm-card-bench .pmc-sil  { flex: 1 1 0; }
.pm-card-bench .pmc-name { font-size: .43rem; -webkit-line-clamp: 2; line-clamp: 2;
  min-height: calc(0.43rem * 1.2 * 2 + 0.24rem);
  max-height: calc(0.43rem * 1.2 * 2 + 0.24rem); }
.pm-card-bench .pmc-badge { width: 13px; height: 13px; }
.pm-card-bench .pmc-pos-tag { font-size: .38rem; }
.pm-card-bench:hover { transform: translateY(-5px) scale(1.06) !important; opacity: 1; z-index: 10; }

/* Selection highlight for substitution */
.pm-card.pm-selected {
  outline: 2.5px solid #0f0;
  box-shadow: 0 0 14px rgba(0,255,80,.55);
  animation: none !important;
}
.pm-card.pm-sub.pm-selected {
  outline-color: #0cf;
  box-shadow: 0 0 14px rgba(0,200,255,.55);
}
.pm-card.pm-starter, .pm-card.pm-sub { cursor: pointer; }

/* ── FIFA-style card ──────────────────────────────── */
.pm-card {
  width: 78px; height: 92px;
  position: relative; border-radius: 9px; overflow: hidden; flex-shrink: 0;
  display: flex; flex-direction: column;
  animation: card-appear .38s cubic-bezier(.22,.68,0,1.2) both;
  transition: transform .22s, box-shadow .22s;
  cursor: default;
  user-select: none;
}
.pm-card:hover { transform: translateY(-10px) scale(1.12); z-index: 10; }
@keyframes card-appear {
  from { opacity:0; transform: translateY(32px) scale(.72) rotateY(15deg); }
  to   { opacity:1; transform: translateY(0)    scale(1)   rotateY(0deg); }
}
/* Top section: badge (top-right) + OVR + POS (top-left) */
.pmc-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: .24rem .24rem .06rem;
  flex-shrink: 0; z-index: 1;
}
.pmc-ovr-pos { display: flex; flex-direction: column; align-items: flex-start; }
.pmc-badge {
  width: 17px; height: 17px; object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
  flex-shrink: 0;
}
.pmc-ovr {
  font-size: 1.12rem; font-weight: 900; line-height: 1; letter-spacing: -.02em;
}
.pmc-pos-tag {
  font-size: .44rem; font-weight: 900; letter-spacing: .06em;
  margin-top: .03rem;
  text-transform: uppercase;
}
/* Silhouette area */
.pmc-sil {
  flex: 1 1 0; display: flex; align-items: flex-end; justify-content: center;
  position: relative; overflow: hidden;
  padding-bottom: 2px;
}
.pmc-sil::before {
  content: ''; position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 70%, var(--kit, #1a56db) 0%, transparent 68%);
  opacity: .30;
  pointer-events: none;
}
.pmc-jersey-num {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  font-size: 1.55rem; font-weight: 900; opacity: .55;
  letter-spacing: -.04em; z-index: 0;
  pointer-events: none;
  user-select: none;
  color: #fff;
}
.pmc-sil svg {
  height: 34px; width: auto; max-width: 38px;
  position: relative;
}
/* Player name */
.pmc-name {
  padding: .12rem .18rem .12rem; text-align: center;
  font-size: .58rem; font-weight: 900; letter-spacing: .01em;
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  flex-shrink: 0; z-index: 1;
  text-transform: uppercase;
  line-height: 1.2;
  /* Always reserve exactly 2 lines so every card's jersey zone is identical */
  min-height: calc(0.58rem * 1.2 * 2 + 0.24rem);
  max-height: calc(0.58rem * 1.2 * 2 + 0.24rem);
}
/* ── Player card hover tooltip (derived stats) ────────────── */
.pmc-tooltip {
  position: absolute;
  bottom: calc(100% + 5px); left: 50%;
  transform: translateX(-50%);
  background: rgba(3,8,22,.97);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  padding: .32rem .4rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .12rem .48rem;
  min-width: 76px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .14s .08s;
  z-index: 200;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(0,0,0,.8);
}
.pm-card:hover .pmc-tooltip { opacity: 1; }
.pmc-tip-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: .28rem;
}
.pmc-tip-lbl {
  font-size: .4rem; font-weight: 800; letter-spacing: .06em;
  color: rgba(255,255,255,.45); text-transform: uppercase;
}
.pmc-tip-val {
  font-size: .52rem; font-weight: 900; line-height: 1;
}
/* ── Match analysis card (heatmap + distance) ─────────────── */
.match-analysis-card {
  padding: 1rem 1.2rem;
}
.ma-title {
  font-size: .78rem; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase;
  background: linear-gradient(90deg, rgba(0,212,255,.9), rgba(255,255,255,.6));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .85rem;
}
.ma-body {
  display: flex; gap: 1.6rem; align-items: flex-start;
}
/* Stack heatmap above distance list on mobile */
@media (max-width: 640px) {
  .ma-body {
    flex-direction: column;
    gap: 1rem;
  }
  .ma-canvas        { width: 100%; height: auto; aspect-ratio: 2/3; max-width: 200px; }
  .ma-heatmap-wrap  { align-items: center; width: 100%; }
  .ma-distance      { min-width: 0; width: 100%; }
}
/* ── Heatmap side (left) ─────────────────────────────────── */
.ma-heatmap-wrap { flex-shrink: 0; display: flex; flex-direction: column; gap: .4rem; }
.ma-hm-tabs {
  display: flex; gap: .32rem;
}
.ma-hm-tab {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  color: rgba(255,255,255,.38);
  font-family: 'Rajdhani', sans-serif;
  font-size: .58rem; font-weight: 900; letter-spacing: .07em;
  padding: .22rem .5rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  text-transform: uppercase;
  white-space: nowrap;
}
.ma-hm-tab.active {
  background: rgba(0,212,255,.12);
  border-color: rgba(0,212,255,.55);
  color: #fff;
  box-shadow: 0 0 10px rgba(0,212,255,.2);
}
.ma-hm-tab[data-team="global"].active {
  background: linear-gradient(90deg, rgba(79,131,255,.18), rgba(255,77,85,.18));
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 0 12px rgba(255,200,100,.15);
}
.ma-hm-frame { position: relative; }
.ma-canvas {
  display: block;
  width: 180px; height: 270px;
  border-radius: 8px;
  border: 1px solid rgba(0,212,255,.25);
  box-shadow: 0 0 18px rgba(0,212,255,.12), inset 0 0 20px rgba(0,0,0,.4);
}
.ma-hm-legend {
  display: flex; align-items: center; gap: .4rem;
  font-size: .44rem; color: rgba(255,255,255,.4); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.ma-hm-grad {
  flex: 1; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #000080, #0030ff, #00c864, #c8e600, #ff7800, #ff1400);
  box-shadow: 0 0 6px rgba(255,100,0,.3);
}
/* ── Distance side (right) ────────────────────────────────── */
.ma-distance { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 0; }
.ma-dist-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .65rem;
}
.ma-dist-title {
  font-size: .65rem; font-weight: 900; color: rgba(255,255,255,.55);
  text-transform: uppercase; letter-spacing: .1em;
}
.ma-dist-filter {
  display: flex; gap: .22rem;
}
.ma-dist-filter-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  color: rgba(255,255,255,.35);
  font-family: 'Rajdhani', sans-serif;
  font-size: .46rem; font-weight: 800; letter-spacing: .05em;
  padding: .12rem .28rem;
  cursor: pointer;
  text-transform: uppercase;
  transition: all .12s;
}
.ma-dist-filter-btn.active { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }
.ma-dist-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .28rem 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.ma-dist-rank {
  font-size: .44rem; font-weight: 900; color: rgba(255,255,255,.22);
  min-width: 12px; text-align: center;
}
.ma-dist-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.ma-dist-name {
  font-size: .62rem; font-weight: 800; color: #fff;
  min-width: 72px; max-width: 90px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: .03em;
}
.ma-dist-bar-wrap {
  flex: 1; height: 5px; background: rgba(255,255,255,.07); border-radius: 3px; overflow: hidden;
}
.ma-dist-bar { height: 100%; border-radius: 3px; transition: width .7s .1s; }
.ma-dist-val {
  font-size: .62rem; font-weight: 900; color: rgba(255,255,255,.7);
  min-width: 38px; text-align: right; letter-spacing: -.01em;
}
/* Stats row (4 columns) */
.pmc-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  padding: .1rem .1rem .18rem;
  flex-shrink: 0; z-index: 1;
  border-radius: 0 0 8px 8px;
}
.pmc-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: .07rem .02rem;
}
.pmc-stat-v {
  font-size: .6rem; font-weight: 900; line-height: 1;
}
.pmc-stat-l {
  font-size: .36rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; opacity: .6; line-height: 1; margin-top: .04rem;
}
.pmc-stat-bar {
  width: 100%; height: 2px; background: rgba(255,255,255,.1); border-radius: 2px;
  overflow: hidden; margin: .05rem 0;
}
.pmc-stat-bar span { display: block; height: 100%; border-radius: 2px; opacity: .88; }
/* Foil shimmer (elite only) */
.pm-card-elite::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 8%,
    hsla(0,100%,65%,.09) 20%,
    hsla(55,100%,65%,.09) 32%,
    hsla(120,100%,65%,.09) 44%,
    hsla(190,100%,65%,.09) 56%,
    hsla(250,100%,65%,.09) 68%,
    hsla(310,100%,65%,.09) 80%,
    transparent 92%);
  background-size: 300% 100%;
  animation: foil-sweep 3.4s ease-in-out infinite;
  pointer-events: none; z-index: 2;
  border-radius: 11px;
}
@keyframes foil-sweep {
  0%   { background-position: 300% 0; }
  60%  { background-position: -40% 0; }
  100% { background-position: 300% 0; }
}

/* ─── Tier styles ─────────────────────────────────────────── */
/* Elite — dark navy + gold foil */
.pm-card-elite {
  background: linear-gradient(160deg, #0d1b3e 0%, #1a2d5a 45%, #0a1630 100%);
  border: 1.5px solid rgba(245,197,24,.65);
  box-shadow: 0 0 18px rgba(245,197,24,.18), inset 0 0 20px rgba(245,197,24,.04);
}
.pm-card-elite .pmc-top   { background: linear-gradient(160deg, rgba(245,197,24,.22) 0%, transparent 80%); }
.pm-card-elite .pmc-ovr   { color: #f7d02e; text-shadow: 0 0 14px rgba(245,197,24,.6); }
.pm-card-elite .pmc-pos-tag { color: #f5c518; }
.pm-card-elite .pmc-name  { color: #fff; }
.pm-card-elite .pmc-stats { background: rgba(245,197,24,.12); border-top: 1px solid rgba(245,197,24,.2); }
.pm-card-elite .pmc-stat-v { color: #f5c518; }
.pm-card-elite .pmc-stat-l { color: rgba(245,197,24,.75); }
.pm-card-elite .pmc-sil svg { filter: drop-shadow(0 3px 12px rgba(245,197,24,.55)); opacity: .95; }
.pm-card-elite .pmc-jersey-num { color: #f5c518; opacity: .14; }
.pm-card-elite .pmc-badge { filter: drop-shadow(0 1px 4px rgba(245,197,24,.4)); }
.pm-card-elite .pmc-stat-bar span { background: #f5c518; }
.pm-card-elite:hover { box-shadow: 0 14px 40px rgba(245,197,24,.4), 0 0 22px rgba(245,197,24,.2); }

/* Gold — classic FUT gold */
.pm-card-gold {
  background: linear-gradient(160deg, #2e1f00 0%, #4a3200 45%, #2a1c00 100%);
  border: 1.5px solid rgba(218,165,32,.5);
  box-shadow: 0 0 12px rgba(218,165,32,.12);
}
.pm-card-gold .pmc-top   { background: linear-gradient(160deg, rgba(218,165,32,.18) 0%, transparent 80%); }
.pm-card-gold .pmc-ovr   { color: #daa520; }
.pm-card-gold .pmc-pos-tag { color: #daa520; }
.pm-card-gold .pmc-name  { color: rgba(255,255,255,.95); }
.pm-card-gold .pmc-stats { background: rgba(218,165,32,.09); border-top: 1px solid rgba(218,165,32,.18); }
.pm-card-gold .pmc-stat-v { color: #daa520; }
.pm-card-gold .pmc-stat-l { color: rgba(218,165,32,.65); }
.pm-card-gold .pmc-sil svg { filter: drop-shadow(0 2px 10px rgba(218,165,32,.45)); opacity: .92; }
.pm-card-gold .pmc-jersey-num { color: #daa520; opacity: .12; }
.pm-card-gold .pmc-stat-bar span { background: #daa520; }
.pm-card-gold:hover { box-shadow: 0 10px 30px rgba(218,165,32,.28); }

/* Silver */
.pm-card-silver {
  background: linear-gradient(160deg, #1c1c28 0%, #2c2c40 45%, #181820 100%);
  border: 1.5px solid rgba(170,170,210,.35);
}
.pm-card-silver .pmc-top   { background: linear-gradient(160deg, rgba(170,170,210,.14) 0%, transparent 80%); }
.pm-card-silver .pmc-ovr   { color: #c0c0e0; }
.pm-card-silver .pmc-pos-tag { color: #b0b0d0; }
.pm-card-silver .pmc-name  { color: rgba(255,255,255,.88); }
.pm-card-silver .pmc-stats { background: rgba(170,170,210,.07); border-top: 1px solid rgba(170,170,210,.14); }
.pm-card-silver .pmc-stat-v { color: #c0c0e0; }
.pm-card-silver .pmc-stat-l { color: rgba(170,170,210,.6); }
.pm-card-silver .pmc-sil svg { filter: drop-shadow(0 2px 8px rgba(160,160,200,.4)); opacity: .88; }
.pm-card-silver .pmc-jersey-num { color: #b0b0d0; opacity: .1; }
.pm-card-silver .pmc-stat-bar span { background: #c0c0e0; }
.pm-card-silver:hover { box-shadow: 0 8px 24px rgba(150,150,200,.22); }

/* Bronze */
.pm-card-bronze {
  background: linear-gradient(160deg, #1c1206 0%, #2e1e08 45%, #1a1006 100%);
  border: 1.5px solid rgba(180,120,55,.35);
}
.pm-card-bronze .pmc-top   { background: linear-gradient(160deg, rgba(180,120,55,.14) 0%, transparent 80%); }
.pm-card-bronze .pmc-ovr   { color: #c48040; }
.pm-card-bronze .pmc-pos-tag { color: #b0783c; }
.pm-card-bronze .pmc-name  { color: rgba(255,255,255,.82); }
.pm-card-bronze .pmc-stats { background: rgba(180,120,55,.07); border-top: 1px solid rgba(180,120,55,.14); }
.pm-card-bronze .pmc-stat-v { color: #c48040; }
.pm-card-bronze .pmc-stat-l { color: rgba(180,120,55,.6); }
.pm-card-bronze .pmc-sil svg { filter: drop-shadow(0 2px 8px rgba(160,100,50,.35)); opacity: .85; }
.pm-card-bronze .pmc-jersey-num { color: #b07840; opacity: .09; }
.pm-card-bronze .pmc-stat-bar span { background: #c48040; }
.pm-card-bronze:hover { box-shadow: 0 7px 22px rgba(140,90,40,.2); }


/* ── LIVE MATCH VIEWER ───────────────────────────────────── */
.live-viewer {
  margin-bottom: var(--gap);
  padding: 1.25rem 1.5rem;
  overflow: hidden;
  animation: fadeSlideIn .35s ease;
}
.live-header {
  display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem;
  flex-wrap: wrap;
  min-height: 2.4rem; /* reserve space — prevents layout jump when btn-skip appears */
}
.live-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.3);
  animation: pulse-dot 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,.28); }
  50%      { box-shadow: 0 0 0 8px rgba(34,197,94,.06); }
}
.live-badge {
  font-size: .7rem; font-weight: 800; letter-spacing: .12em;
  color: #22c55e; text-transform: uppercase;
}
.stats-modal {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,10,.78); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.stats-modal.hidden { display: none; }
.stats-modal-inner {
  position: relative;
  background: rgba(5,10,28,.97);
  border: 1px solid rgba(0,212,255,.22);
  border-radius: 16px;
  padding: 1.4rem 1.2rem 1rem;
}
.stats-modal-close {
  position: absolute; top: .5rem; right: .65rem;
  background: none; border: none;
  color: rgba(255,255,255,.4); font-size: 1rem; cursor: pointer;
  line-height: 1;
}
.stats-modal-close:hover { color: rgba(255,255,255,.85); }
.btn-skip {
  margin-left: auto; padding: .3rem .8rem;
  border-radius: 6px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.65);
  cursor: pointer; font-size: .8rem; transition: background .2s;
}
.btn-skip:hover { background: rgba(255,255,255,.14); color: #fff; }
.live-scoreboard {
  display: flex; align-items: center; justify-content: center;
  gap: 1.2rem; margin-bottom: .4rem;
}
/* Team side wrapper with optional badge */
.live-team-side {
  display: flex; align-items: center; gap: .5rem;
}
.live-team-side-b { flex-direction: row-reverse; }
.live-team-badge {
  width: 30px; height: 30px; object-fit: contain;
  border-radius: 4px; flex-shrink: 0;
}
.live-team-name {
  font-size: .95rem; font-weight: 700; color: rgba(255,255,255,.85);
  max-width: 130px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.live-score-block { display: flex; align-items: center; gap: .5rem; }
.live-score-num {
  font-size: 2.6rem; font-weight: 900; min-width: 2rem; text-align: center;
  color: #fff; text-shadow: 0 0 24px rgba(79,131,255,.45);
  transition: transform .2s, color .2s;
}
.live-score-num.pulse { animation: score-pulse .45s ease; }
@keyframes score-pulse {
  0%   { transform: scale(1);    color: #fff; }
  40%  { transform: scale(1.55); color: #fbbf24; text-shadow: 0 0 30px rgba(251,191,36,.7); }
  100% { transform: scale(1);    color: #fff; }
}
.live-score-sep { font-size: 2rem; color: rgba(255,255,255,.3); }
.live-clock-wrap { text-align: center; margin-bottom: .9rem; }
.live-clock {
  font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  color: rgba(255,255,255,.45); background: rgba(255,255,255,.07);
  padding: .2rem .7rem; border-radius: 20px;
}
.live-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1rem;
  align-items: stretch;
}
/* Guard: timeline always reserves its minimum vertical space so new events
   never jump the pitch sideways when the viewport is tall  */
.live-timeline-wrap {
  min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* Live right column: the timeline-card lives here during the match */
.live-timeline-wrap {
  min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.live-timeline-wrap .timeline-card {
  flex: 1;
  padding: .75rem .9rem;
  overflow-y: auto;
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  max-height: 420px;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox: hide scrollbar track */
}
.live-timeline-wrap .timeline-card::-webkit-scrollbar { width: 0; background: transparent; }
.live-timeline-wrap .section-title { display: none; }
.live-timeline-wrap .timeline-header {
  margin-bottom: .6rem;
  font-size: .62rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  grid-template-columns: 1fr auto 1fr;
}
.live-timeline-wrap .timeline-header .tl-hdr-sep {
  padding: 0 .45rem;
  font-size: .6rem;
}
/* Team name spans in timeline header */
.tl-hdr-team {
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
/* Event count in the middle */
.tl-hdr-sep {
  color: var(--grey); font-weight: 400; text-transform: none;
  letter-spacing: 0; text-align: center; white-space: nowrap;
  font-size: .72rem;
}
/* Tighter events inside live mode */
.live-timeline-wrap .t-event,
.live-timeline-wrap .t-event-narrated > :first-child {
  grid-template-columns: 1fr 44px 1fr;
}
.live-timeline-wrap .t-event { padding: .28rem 0; }
.live-timeline-wrap .t-left,
.live-timeline-wrap .t-right { font-size: .78rem; }
.live-timeline-wrap .t-narration { font-size: .76rem; }
/* Special non-event rows (ft_whistle, pen_start, pen_goal, pen_miss, pen_winner) */
.t-event-special {
  justify-content: center; text-align: center;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: .32rem .4rem; border-radius: 8px; margin: .25rem 0;
  animation: slide-in-feed .3s ease;
  border-bottom: none !important;
}
.t-event-kickoff{ background: rgba(79,131,255,.1); color: rgba(120,170,255,.9);
                  border-left: 2px solid rgba(79,131,255,.4); }
.t-event-ft     { background: rgba(255,255,255,.07); color: rgba(255,255,255,.55);
                  border-left: 2px solid rgba(255,255,255,.15); }
.t-event-pen-hdr{ background: linear-gradient(90deg,rgba(255,215,0,.12),rgba(255,215,0,.05),transparent);
                  border-left: 2px solid rgba(255,215,0,.5); color: rgba(255,215,0,.9); }
.t-event-pen-a  { background: rgba(79,131,255,.1); }
.t-event-pen-b  { background: rgba(255,77,85,.1); }
.t-event-winner { background: linear-gradient(90deg,rgba(255,215,0,.18),rgba(255,215,0,.07));
                  color: var(--gold); font-size: .88rem; }
@keyframes slide-in-feed {
  from { opacity:0; transform: translateY(6px); }
  to   { opacity:1; transform: translateY(0); }
}


/* ── Radar chart ─────────────────────────────────────────── */
/* Inside stats modal: compact padding */
.stats-modal .radar-card {
  max-width: none;
  margin: 0;
  padding: .5rem .4rem;
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
}
/* Standalone in results section */
.radar-card {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: 1.25rem 1rem;
  max-width: 340px;
  margin: 0 auto;
}
.radar-wrap { width: 220px; flex-shrink: 0; }
.radar-svg  { width: 220px !important; height: 220px !important; display: block; }
.radar-legend {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
}
.radar-legend-item {
  display: flex; align-items: center; gap: .4rem;
  font-size: .76rem; font-weight: 700;
  font-family: 'Rajdhani', var(--font);
  color: rgba(255,255,255,.8);
  letter-spacing: .04em;
}
.radar-legend-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}

/* ── Live Smart-Dot Pitch ─────────────────────────────────── */
.live-pitch-wrap {
  width: 260px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  position: relative;
}
.live-pitch-label {
  font-family: 'Rajdhani', var(--font);
  font-size: .62rem; font-weight: 800; letter-spacing: .14em;
  color: rgba(0,212,255,.75); text-transform: uppercase;
  text-shadow: 0 0 8px rgba(0,212,255,.5);
}
.live-pitch-svg {
  width: 260px; height: 390px; display: block;
  border-radius: 8px; overflow: visible;
  filter: drop-shadow(0 0 6px rgba(0,212,255,.18)) drop-shadow(0 0 18px rgba(0,212,255,.08));
}
/* Player group: smooth movement */
.lp-player-g {
  transition: transform .5s cubic-bezier(.25,.1,.25,1);
  cursor: pointer;
  will-change: transform;
}
.lp-ball-g {
  transition: transform .3s cubic-bezier(.25,.1,.25,1);
  will-change: transform;
}
/* Smart dot glow: normal state */
.lp-dot-main {
  transition: r .2s, filter .25s;
}
/* Outer halo ring (very faint ambient) */
.lp-dot-outer-ring {
  transition: opacity .25s;
}
/* Hover: dot expands + tooltip appears */
.lp-player-g:hover .lp-dot-main,
.lp-player-g:focus .lp-dot-main {
  filter: url(#lp-dot-glow) brightness(1.4);
}
.lp-player-g:hover .lp-dot-outer-ring,
.lp-player-g:focus .lp-dot-outer-ring {
  opacity: .5 !important;
}
/* Hero (ball owner) pulses */
.lp-hero-dot .lp-dot-main {
  animation: lp-hero-pulse 1.6s ease-in-out infinite;
  transform-origin: 0 0;
  transform-box: fill-box;
}
.lp-hero-dot .lp-dot-outer-ring {
  animation: lp-hero-halo 1.6s ease-in-out infinite;
  transform-origin: 0 0;
  transform-box: fill-box;
}
@keyframes lp-hero-pulse {
  0%,100% { filter: url(#lp-hero-glow) brightness(1);   }
  50%      { filter: url(#lp-hero-glow) brightness(1.7); }
}
@keyframes lp-hero-halo {
  0%,100% { opacity: .22; transform: scale(1);   }
  50%      { opacity: .55; transform: scale(1.25); }
}
/* Particle stream dash */
.lp-particle {
  animation: lp-particle-dash 1.8s linear infinite;
}
@keyframes lp-particle-dash {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -18; }
}
/* Hex grid subtle shimmer */
.lp-hex {
  animation: lp-hex-shimmer 6s ease-in-out infinite alternate;
}
@keyframes lp-hex-shimmer {
  from { stroke: rgba(80,220,180,.04); }
  to   { stroke: rgba(80,220,180,.10); }
}
/* Pitch backdrop bokeh ambient */
.live-pitch-wrap::before {
  content: '';
  position: absolute; inset: -10px; border-radius: 14px;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(0,212,255,.06) 0%, rgba(255,77,109,.03) 55%, transparent 80%);
  pointer-events: none; z-index: -1;
}
.radar-legend {
  display: flex; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .4rem; justify-content: center;
}
.radar-legend-item {
  display: flex; align-items: center; gap: .3rem;
  font-size: .68rem; color: rgba(255,255,255,.6);
}
.radar-legend-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.radar-svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ── Penalty shootout cinematic splash ──────────────────────── */
.pso-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(12px);
  pointer-events: none;
}
.pso-overlay.pso-show {
  animation: pso-in .35s ease forwards;
}
.pso-overlay.pso-hide {
  animation: pso-out .6s ease forwards;
}
@keyframes pso-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pso-out { from { opacity: 1; } to { opacity: 0; } }

/* rotating spotlights */
.pso-spotlights {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.pso-spot {
  position: absolute; width: 300px; height: 600px;
  background: conic-gradient(from 0deg, transparent 82%, rgba(255,215,0,.12) 90%, transparent 98%);
  transform-origin: bottom center;
  top: -120px; border-radius: 50% 50% 0 0;
}
.pso-spot-1 { left: 10%;  animation: spot-swing-1 2.4s ease-in-out infinite; }
.pso-spot-2 { left: 40%;  animation: spot-swing-2 2.8s ease-in-out infinite .4s; }
.pso-spot-3 { right: 8%;  animation: spot-swing-1 2.6s ease-in-out infinite .8s reverse; }
@keyframes spot-swing-1 {
  0%,100% { transform: rotate(-20deg); } 50% { transform: rotate(20deg); }
}
@keyframes spot-swing-2 {
  0%,100% { transform: rotate(-10deg); } 50% { transform: rotate(14deg); }
}

.pso-inner {
  position: relative; z-index: 2; text-align: center;
  animation: pso-inner-pop .5s cubic-bezier(.22,.68,0,1.25) both .1s;
}
@keyframes pso-inner-pop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.pso-label {
  font-size: 1rem; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(255,215,0,.9);
  text-shadow: 0 0 30px rgba(255,215,0,.5);
  margin-bottom: .9rem;
}
.pso-teams-row {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  font-size: 1.3rem; font-weight: 900; margin-bottom: 1.4rem;
}
.pso-team-a { color: var(--neon); text-shadow: 0 0 18px rgba(0,212,255,.5); }
.pso-team-b { color: #ff6b6b; text-shadow: 0 0 18px rgba(255,107,107,.5); }
.pso-vs {
  font-size: .75rem; font-weight: 700; letter-spacing: .15em;
  color: rgba(255,255,255,.4);
}
.pso-countdown {
  font-size: 5rem; font-weight: 900; line-height: 1;
  color: #fff; text-shadow: 0 0 40px rgba(255,255,255,.4);
}
.pso-count-pulse {
  animation: pso-count .65s cubic-bezier(.22,.68,0,1.3) both;
}
@keyframes pso-count {
  from { transform: scale(1.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── Event overlay (goal / card flash) ─────────────── */
.event-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; background: transparent;
  transition: background .18s;
}
/* Opaque dark backdrop so the content behind is hidden */
.event-overlay.eo-fade-in,
.event-overlay.eo-fade-out  { background: rgba(0, 0, 0, 0.78); }
.event-overlay.eo-fade-in  { animation: eo-in  .22s ease forwards; }
.event-overlay.eo-fade-out { animation: eo-out .55s ease forwards; }
@keyframes eo-in  { from { opacity:0 } to { opacity:1 } }
@keyframes eo-out { from { opacity:1 } to { opacity:0 } }
.eo-inner {
  border-radius: 22px; padding: 1.6rem 2.5rem; text-align: center;
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1.5px solid rgba(255,255,255,.12);
  animation: eo-pop .4s cubic-bezier(.175,.885,.32,1.275);
  min-width: 280px;
}
@keyframes eo-pop {
  from { transform: scale(.45); opacity:0; }
  to   { transform: scale(1);   opacity:1; }
}
.eo-goal   { background: rgba(4,22,4,.92);  border-color: rgba(34,197,94,.55);  box-shadow: 0 0 80px rgba(34,197,94,.25), 0 0 160px rgba(34,197,94,.08); }
.eo-yellow { background: rgba(22,18,0,.92); border-color: rgba(251,191,36,.55); box-shadow: 0 0 80px rgba(251,191,36,.2); }
.eo-red    { background: rgba(22,4,4,.92);  border-color: rgba(239,68,68,.55);  box-shadow: 0 0 80px rgba(239,68,68,.2); }
.eo-kick_off, .eo-fulltime {
  background: rgba(0,8,28,.92);
  border-color: rgba(79,131,255,.55);
  box-shadow: 0 0 80px rgba(79,131,255,.25), 0 0 160px rgba(79,131,255,.08);
}
.eo-kick_off .eo-title, .eo-fulltime .eo-title {
  color: #60a5fa; text-shadow: 0 0 24px rgba(79,131,255,.7);
}
.eo-badge-wrap { margin-bottom: .4rem; }
.eo-badge {
  width: 52px; height: 52px; object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.6));
  animation: badge-pop .5s ease;
}
.eo-icon   { font-size: 4rem; line-height: 1; margin-bottom: .3rem; animation: eo-icon-spin .5s ease; }
@keyframes eo-icon-spin { from { transform: rotate(-30deg) scale(.5); } to { transform: rotate(0) scale(1); } }
.eo-title {
  font-size: 1.5rem; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: .2rem;
}
.eo-goal   .eo-title { color: #22c55e; text-shadow: 0 0 24px rgba(34,197,94,.7); }
.eo-yellow .eo-title { color: #fbbf24; text-shadow: 0 0 24px rgba(251,191,36,.7); }
.eo-red    .eo-title { color: #ef4444; text-shadow: 0 0 24px rgba(239,68,68,.7); }
.eo-team  { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: .15rem; }
.eo-name  { font-size: 1.1rem; color: rgba(255,255,255,.9); font-weight: 700; }
.eo-score { font-size: 2.2rem; font-weight: 900; color: #fff; margin-top: .5rem; letter-spacing: .05em; text-shadow: 0 0 24px rgba(255,255,255,.2); }
.live-fade-out { animation: live-exit .6s ease forwards; }
@keyframes live-exit { to { opacity:0; transform: translateY(-18px); } }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  text-align: center; padding: 2rem;
  /* iOS home-indicator safe area */
  padding-bottom: max(2rem, calc(1.5rem + env(safe-area-inset-bottom, 0px)));
  padding-left: max(2rem, calc(1rem + env(safe-area-inset-left, 0px)));
  padding-right: max(2rem, calc(1rem + env(safe-area-inset-right, 0px)));
  font-size: .78rem; color: rgba(255,255,255,0.2);
  border-top: 1px solid var(--border); margin-top: 3rem;
}
.footer-legal {
  margin-top: .75rem;
  font-size: .72rem;
  line-height: 1.6;
  color: rgba(255,255,255,.38);
  max-width: 800px;
  margin-left: auto; margin-right: auto;
}
.footer-links { margin-top: .5rem; font-size: .62rem; }
.footer-link {
  color: rgba(255,255,255,.25);
  text-decoration: none;
  transition: color .15s;
}
.footer-link:hover { color: rgba(0,212,255,.6); }

/* ── Share panel (multi-option, bottom sheet) ─────────────── */
.share-panel-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .22s;
}
.share-panel-overlay.open { opacity: 1; pointer-events: auto; }
.share-panel {
  width: 100%; max-width: 480px;
  background: #141927;
  border: 1px solid rgba(0,212,255,.2);
  border-radius: 22px 22px 0 0;
  padding: 1.4rem 1.4rem;
  padding-bottom: max(1.4rem, calc(1rem + env(safe-area-inset-bottom, 0px)));
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.share-panel-overlay.open .share-panel { transform: translateY(0); }
.share-panel-title {
  font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.35); text-align: center; margin-bottom: 1.2rem;
}
.share-panel-options {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .6rem; margin-bottom: .9rem;
}
.share-opt {
  display: flex; flex-direction: column; align-items: center;
  gap: .38rem; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; padding: .85rem .4rem;
  transition: background .15s, border-color .15s;
  min-height: 76px; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.share-opt:hover, .share-opt:active {
  background: rgba(0,212,255,.1); border-color: rgba(0,212,255,.35);
}
.share-opt-icon { font-size: 1.7rem; line-height: 1; }
.share-opt-label {
  font-size: .62rem; color: rgba(255,255,255,.5);
  text-align: center; letter-spacing: .03em;
}
.share-panel-copied {
  text-align: center; font-size: .78rem; color: #00d4ff;
  height: 1.2rem; opacity: 0; transition: opacity .3s; margin-bottom: .5rem;
}
.share-panel-copied.visible { opacity: 1; }
.share-panel-cancel {
  width: 100%; padding: .76rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; color: rgba(255,255,255,.55);
  cursor: pointer; font-size: .86rem;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.share-panel-cancel:hover { background: rgba(255,255,255,.1); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── 900px ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lineups-wrap { grid-template-columns: 1fr; }
  .poster-score { font-size: 3.5rem; }
}

/* ── 640px · Mobile ──────────────────────────────────────── */
@media (max-width: 640px) {

  /* ── Layout & spacing ── */
  .main-wrap  { padding: 0 .7rem; gap: .8rem; margin-top: .8rem; }
  .results    { display: flex; flex-direction: column; gap: .7rem; }
  .glass-card { border-radius: 14px; }

  /* ── Header: one compact row, never wraps ── */
  .site-header  {
    padding: .6rem .9rem;
    padding-top: max(.6rem, calc(.4rem + env(safe-area-inset-top, 0px)));
    padding-left: max(.9rem, calc(.6rem + env(safe-area-inset-left, 0px)));
    padding-right: max(.9rem, calc(.6rem + env(safe-area-inset-right, 0px)));
  }
  .header-inner { flex-wrap: nowrap; gap: .45rem; }
  .logo-img     { height: 36px; }
  .logo-text    { display: none; }
  .gx-text-golazo, .gx-text-ox { font-size: 1.35rem; }
  .tagline      { display: none; }
  .header-right { margin-left: auto; width: auto; justify-content: flex-end; }

  /* ── Input panel ── */
  .input-panel  { padding: 1.1rem .9rem .95rem; }
  .teams-grid   { grid-template-columns: 1fr; gap: .65rem; margin-bottom: 1.4rem; }
  /* VS button: move below Team B and show centered as the simulate button */
  .vs-col       { display: flex; order: 3; justify-content: center; padding-top: .3rem; }
  .extra-options-row { gap: .65rem; margin-top: 0; padding-top: 1.8rem; }

  /* ── iOS: prevent tap-to-zoom on inputs (needs ≥16px) ── */
  input.inp, select.inp { font-size: 16px; }

  /* ── Era + Formation side-by-side inside each team column ── *
   *  (saves ~2 rows per team without touching the HTML)        */
  .team-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
  }
  .team-col .team-label,
  .team-col .team-picker,
  .team-col .btn-lookup,
  .team-col .lookup-preview  { grid-column: 1 / -1; }
  .team-col .era-select       { grid-column: 1; }   /* era → left  */
  .team-col .select-formation { grid-column: 2; }   /* formation → right */

  /* ── Simulate button ── */
  .btn-row      { margin-top: .9rem; }
  .btn-simulate { width: 100%; justify-content: center; padding: .78rem 1.3rem; }

  /* ── Picker sections: tighter spacing ── */
  .stadium-picker-section,
  .referee-picker-section,
  .weather-picker-section { margin-top: .85rem; padding-top: .85rem; }

  /* ── Live viewer: VERTICAL stack on mobile (pitch on top, feed below) ── */
  .live-viewer  { padding: .75rem .8rem; }
  .live-body    {
    display: flex;
    flex-direction: column;
    gap: .6rem;
  }
  /* Pitch takes full width, capped height so it doesn't eat the screen */
  .live-pitch-wrap {
    width: 100%;
    max-height: 220px;
    flex-direction: row;   /* label left, svg right on the same line */
    align-items: flex-start;
    gap: .5rem;
  }
  .live-pitch-label {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: .48rem;
    align-self: center;
  }
  .live-pitch-svg  {
    flex: 1;
    width: 100%;
    max-width: 100%;
    height: 200px;
    object-fit: contain;
  }
  /* Timeline fills remaining space, no imposed min-height needed */
  .live-timeline-wrap .timeline-card {
    min-height: 160px;
    max-height: 280px;
  }
  .live-team-name  { max-width: 110px; font-size: .86rem; }
  .live-score-num  { font-size: 2.1rem; }
  .live-score-sep  { font-size: 1.7rem; }
  /* Header: reserve height so Saltar button appearing doesn't shift things */
  .live-header { min-height: 2.2rem; }

  /* ── Score poster: compact 3-col TV-scoreboard layout ── */
  .score-poster  { padding: 1.2rem .9rem 1rem; }
  .poster-teams  { gap: .35rem .25rem; }
  .poster-badge  { width: 40px; height: 40px; margin-bottom: .3rem; }
  .poster-name   {
    font-size: .8rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .poster-era    { font-size: .64rem; }
  .poster-score  { font-size: 2.5rem; }
  .poster-label  { font-size: .6rem; margin-top: .28rem; }
  .poster-context { font-size: .66rem; }
  .scorers-row, .cards-row { gap: .55rem; align-items: flex-start; }
  .scorers-side, .cards-side { font-size: .77rem; line-height: 1.6; }
  .goal-min      { font-size: .62rem; }
  .share-row     { margin-top: .7rem; }
  .btn-share     { width: 100%; justify-content: center; }

  /* ── Probabilities: keep 3-col, compact values ── */
  .probs-card    { padding: 1rem .85rem; }
  .probs-grid    { gap: .5rem; }
  .prob-value    { font-size: 1.55rem; }
  .prob-label    { font-size: .66rem; }
  .alt-scores    { font-size: .76rem; margin-top: .85rem; }
  .xg-row        { font-size: .74rem; flex-wrap: wrap; gap: .3rem; }
  .xg-sep        { display: none; }

  /* ── Stats bars ── */
  .stats-card    { padding: 1rem .85rem; }
  .hth-names     { font-size: .76rem; margin-bottom: 1rem; }
  .hth-row       { grid-template-columns: 36px 1fr 54px 1fr 36px; gap: .28rem; margin-bottom: .85rem; }
  .hth-val       { font-size: .76rem; }
  .hth-label     { font-size: .58rem; }

  /* ── Timeline ── */
  .timeline-card { padding: 1rem .85rem; }
  .t-event       { grid-template-columns: 1fr 42px 1fr; gap: .26rem; }
  .t-event-narrated > :first-child { grid-template-columns: 1fr 42px 1fr; }
  .t-left, .t-right  { font-size: .73rem; }
  .t-narration   { font-size: .76rem; }

  /* ── MOM ── */
  .mom-card  { padding: .85rem .95rem; flex-wrap: wrap; gap: 0; }
  .mom-left  { padding-right: 0; padding-bottom: .75rem; width: 100%; }
  .mom-divider { width: 100%; height: 1px; margin: 0 0 .75rem; }
  .key-moments { padding-left: 0; width: 100%; }
  .mom-name  { font-size: 1.05rem; }

  /* ── Penalty ── */
  .penalty-card { padding: 1rem .85rem; }

  /* ── Lineups ── */
  .lineups-wrap  { gap: .7rem; }
  .lineup-card   { padding: 1rem .7rem; }
  .section-title { font-size: .84rem; margin-bottom: .75rem; }

  /* ── Pre-match player presentation ── */
  .pm-matchup { grid-template-columns: 1fr; gap: .45rem; }
  .pm-center-col { flex-direction: row; flex-wrap: wrap; padding-top: .25rem; justify-content: center; gap: .4rem; }
  .pm-team-block-b { align-items: flex-start; }
  .pm-row-b    { justify-content: flex-start; }
  .pm-team-hdr-b { flex-direction: row; text-align: left; }
  /* cards scroll horizontally so they never push outside the card */
  .pm-rows     { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .25rem; }
  .pm-row      { flex-wrap: nowrap; }
  .pm-bench-row { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .pm-card     { width: 64px; height: 98px; }
  .pm-card:hover { transform: translateY(-5px) scale(1.07); }
  .pmc-ovr     { font-size: 1.0rem; }
  .pmc-sil svg { height: 26px; width: auto; max-width: 28px; }
  .pm-card-bench { width: 56px !important; height: 68px !important; }
  .pm-card-bench .pmc-ovr { font-size: .82rem; }
  .pm-card-bench .pmc-sil { flex: 1 1 0; }
  .pm-intro    { padding: .8rem .85rem .75rem; }
  .pm-intro-matchup { font-size: .86rem; }
  .pm-speed-pills { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .28rem; }
  .pm-speed-pill { flex: 1 1 68px; min-width: 60px; padding: .4rem .28rem; font-size: .67rem; }
  .pm-start-btn { font-size: .8rem; padding: .65rem .8rem; }
}

/* ── 480px · Small phones ────────────────────────────────── */
@media (max-width: 480px) {
  html { font-size: 15px; }

  .site-header  { padding: .5rem .75rem; }
  .logo-img     { height: 30px; }
  .gx-text-golazo, .gx-text-ox { font-size: 1.15rem; }
  .main-wrap    { padding: 0 .5rem; gap: .65rem; }
  .results      { gap: .55rem; }
  .glass-card   { border-radius: 12px; }

  /* ── Inputs ── */
  .inp          { padding: .6rem .7rem; }
  input.inp, select.inp { font-size: 16px; }
  .btn-lookup   { font-size: .73rem; padding: .42rem .7rem; }
  .btn-simulate { font-size: .86rem; }

  /* ── Pickers: slightly more compact ── */
  .spk-card     { width: 84px; }
  .spk-img      { width: 84px; height: 47px; }
  .spk-img-placeholder { width: 84px; height: 47px; font-size: 1.2rem; }
  .ref-card     { width: 68px; }
  .ref-photo-area, .ref-photo, .ref-initials-av { width: 68px; height: 68px; }
  .wth-card     { min-width: 50px; padding: .3rem .38rem .26rem; }
  .wth-icon     { font-size: 1.12rem; }
  .wth-label    { font-size: .5rem; }

  /* ── Live viewer: tiny phones — keep vertical stack, even more compact ── */
  .live-pitch-svg  { height: 160px; }
  .live-pitch-wrap { max-height: 180px; }
  .live-timeline-wrap .timeline-card { min-height: 130px; max-height: 220px; }

  /* ── Score poster ── */
  .poster-score { font-size: 2.2rem; }
  .poster-name  { font-size: .72rem; }
  .poster-badge { width: 34px; height: 34px; }
  .poster-era   { font-size: .58rem; }

  /* ── Probabilities ── */
  .prob-value   { font-size: 1.3rem; }
  .prob-label   { font-size: .6rem; }

  /* ── Stats ── */
  .hth-row      { grid-template-columns: 28px 1fr 44px 1fr 28px; gap: .2rem; }
  .hth-val      { font-size: .7rem; }
  .hth-label    { font-size: .53rem; }

  /* ── Timeline ── */
  .t-event      { grid-template-columns: 1fr 32px 1fr; gap: .16rem; }
  .t-event-narrated > :first-child { grid-template-columns: 1fr 32px 1fr; }
  .t-left, .t-right { font-size: .67rem; }
  .t-min        { font-size: .53rem; padding: .06rem .2rem; min-width: 19px; }
  .t-narration  { font-size: .72rem; }

  /* ── Player chips (lineup pitch) ── */
  .player-jersey svg { width: 33px; height: 37px; }
  .player-name  { font-size: .53rem; max-width: 48px; }
  .player-pos-lbl { font-size: .43rem; }
  .pitch-wrap   { padding: .6rem .22rem .72rem; }
  .pitch        { gap: .35rem; }
  .pitch-row    { gap: .28rem; }

  /* ── MOM ── */
  .mom-icon { font-size: 1.4rem; }
  .mom-name { font-size: .9rem; }
  .mom-meta { font-size: .72rem; }
  .mom-badge { font-size: .57rem; }

  /* ── Penalty ── */
  .pen-row  { grid-template-columns: 1fr 28px 1fr; gap: .24rem; }
  .pen-name { font-size: .65rem; }
  .pen-kick { width: 20px; height: 20px; font-size: .57rem; }

  /* ── Pre-match player cards ── */
  .pm-card    { width: 56px; height: 86px; }
  .pmc-ovr    { font-size: 1.0rem; }
  .pmc-name   { font-size: .46rem;
    min-height: calc(0.46rem * 1.2 * 2 + 0.24rem);
    max-height: calc(0.46rem * 1.2 * 2 + 0.24rem); }
  .pmc-stat-v { font-size: .49rem; }
  .pmc-stat-l { font-size: .29rem; }
  .pmc-sil svg { height: 23px; width: auto; max-width: 25px; }
  .pm-card-bench { width: 52px !important; height: 64px !important; }
  .pm-card-bench .pmc-ovr { font-size: .78rem; }
  .pm-card-bench .pmc-sil { flex: 1 1 0; }

  /* ── Overlays ── */
  .pso-teams-row { font-size: .88rem; gap: .55rem; }
  .pso-countdown { font-size: 3.4rem; }
  .eo-inner  { padding: .95rem 1.1rem; min-width: 195px; }
  .eo-title  { font-size: 1.05rem; }
  .eo-score  { font-size: 1.55rem; }
  .eo-name   { font-size: .84rem; }

  /* ── Footer ── */
  .site-footer {
    padding: .9rem .75rem;
    padding-bottom: max(.9rem, calc(.6rem + env(safe-area-inset-bottom, 0px)));
    font-size: .62rem;
  }
}

/* ── Touch devices: disable hover effects ────────────────── */
@media (hover: none) {
  .player-tooltip { display: none !important; }
  .player-chip:hover .player-jersey {
    transform: none;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,.6));
  }
  .pm-card:hover  { transform: none !important; z-index: auto; box-shadow: inherit; }
  .spk-card:hover, .ref-card:hover, .wth-card:hover { transform: none; }
}

/* ── Fade-in animation ───────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeUp .5s ease both; }

/* ── Missing event overlay type styles ──────────────────── */
.eo-penalty {
  background: rgba(4,22,4,.96); border-color: rgba(34,197,94,.55);
  box-shadow: 0 0 80px rgba(34,197,94,.22), 0 0 160px rgba(34,197,94,.08);
}
.eo-penalty .eo-title { color: #22c55e; text-shadow: 0 0 24px rgba(34,197,94,.7); }
.eo-penalty-miss {
  background: rgba(22,4,4,.96); border-color: rgba(239,68,68,.55);
  box-shadow: 0 0 80px rgba(239,68,68,.2);
}
.eo-penalty-miss .eo-title { color: #ef4444; text-shadow: 0 0 24px rgba(239,68,68,.6); }
.eo-corner {
  background: rgba(0,12,25,.96); border-color: rgba(77,184,184,.5);
  box-shadow: 0 0 60px rgba(77,184,184,.18);
}
.eo-corner .eo-title { color: #4db8b8; text-shadow: 0 0 20px rgba(77,184,184,.6); }
.eo-freekick {
  background: rgba(14,10,28,.96); border-color: rgba(150,150,255,.5);
  box-shadow: 0 0 60px rgba(150,150,255,.16);
}
.eo-freekick .eo-title { color: #aaaaff; text-shadow: 0 0 20px rgba(150,150,255,.6); }
.eo-injury {
  background: rgba(18,10,2,.96); border-color: rgba(251,146,60,.5);
  box-shadow: 0 0 60px rgba(251,146,60,.18);
}
.eo-injury .eo-title { color: #fb923c; text-shadow: 0 0 20px rgba(251,146,60,.6); }
.eo-pen_winner {
  background: rgba(22,18,0,.96); border-color: rgba(245,197,24,.7);
  box-shadow: 0 0 80px rgba(245,197,24,.28), 0 0 160px rgba(245,197,24,.1);
}
.eo-pen_winner .eo-title { color: #f5c518; text-shadow: 0 0 26px rgba(245,197,24,.85); }

/* Team label in overlay */
.eo-team {
  font-size: .78rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
  margin-bottom: .1rem;
}

/* ══════════════════════════════════════════════════════════
   PREMIUM UI v2  —  Glassmorphism · HUD Ratings · Clash Btn
   ══════════════════════════════════════════════════════════ */

/* ── 1. Team Cards: Glass + Dot Texture + Ambient Glow ─── */
.team-col {
  position: relative;
  border-radius: var(--radius-md);
  padding: 1rem 1rem .85rem;
  /* Glassmorphism base */
  background-color: rgba(6, 12, 22, 0.72);
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 16px 16px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  /* Default border + shadow */
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 0 transparent,
              0 8px 32px rgba(0,0,0,.6),
              inset 0 1px 0 rgba(255,255,255,.08);
  transition: border-color .4s, box-shadow .55s;
  overflow: hidden; /* clip the top-glow ::before */
}

/* Coloured ambient tint per side */
#col-a { background-color: rgba(0, 22, 40, 0.78); }
#col-b { background-color: rgba(35, 6, 18, 0.78); }

/* Top-glow stripe — a thick luminous bar clamped to the card */
.team-col::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    transparent 2%,
    var(--team-glow, rgba(0,212,255,.9)) 30%,
    var(--team-glow, rgba(0,212,255,.9)) 70%,
    transparent 98%);
  box-shadow: 0 0 22px 6px var(--team-glow, rgba(0,212,255,.45));
  border-radius: 2px 2px 0 0;
  pointer-events: none;
  transition: opacity .4s;
}

/* Ambient glow ring — sits behind the card */
.team-col::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-md) + 2px);
  background: transparent;
  box-shadow: 0 0 40px 4px var(--team-glow, rgba(0,212,255,.15));
  pointer-events: none;
  z-index: -1;
  transition: box-shadow .55s;
}

/* Default colours per side */
#col-a { --team-glow: rgba(0,212,255,.85); }
#col-b { --team-glow: rgba(255,77,109,.85); }

/* Loaded state: stronger ambient glow + coloured border */
.team-col.tc-loaded {
  border-color: rgba(255,255,255,.22);
}
.team-col.tc-loaded::after {
  box-shadow: 0 0 60px 8px var(--team-glow, rgba(0,212,255,.28));
}

/* ── 2. HUD Rating Numbers (tier text-shadows only; base layout in original block) ── */

.lk-jcard-silver .lk-jovr { text-shadow: 0 0 8px rgba(138,174,200,.4); }
.lk-jcard-gold   .lk-jovr { text-shadow: 0 0 10px rgba(245,184,39,.55); }

/* Poor tier (<60) */
.lk-jcard-poor  { border-left-color: #7a2a2a !important; }
.lk-jcard-poor  .lk-jovr { color: #c05050; }
.lk-jcard-poor  .lk-jpos { color: rgba(180,70,70,.6); }

/* Emerald/Neon elite (88+) redefine for new threshold */
.lk-jcard-elite  { border-left-color: #39ff9f !important; background: rgba(57,255,159,.06) !important; }
.lk-jcard-elite  .lk-jovr {
  color: #39ff9f;
  background: rgba(30,255,140,.12);
  border: 1px solid rgba(57,255,159,.55);
  border-radius: 5px;
  box-shadow: 0 0 14px 3px rgba(57,255,159,.5), inset 0 0 5px rgba(100,255,160,.1);
  text-shadow: 0 0 10px rgba(57,255,159,.9);
  animation: elite-pulse 2.6s ease-in-out infinite;
  font-size: .8rem;
}
.lk-jcard-elite  .lk-jpos { color: rgba(57,255,159,.8); border-color: rgba(57,255,159,.3); background: rgba(57,255,159,.08); }
@keyframes elite-pulse {
  0%,100% { box-shadow: 0 0 14px 3px rgba(57,255,159,.5), inset 0 0 5px rgba(100,255,160,.1); }
  50%      { box-shadow: 0 0 24px 6px rgba(57,255,159,.82), inset 0 0 9px rgba(100,255,160,.2); }
}

/* Hero row highlight */
.lk-jcard-hero { background: rgba(255,255,255,.07) !important; }
.lk-hero-star  { color: var(--gold); font-size: .6rem; margin-left: .15rem; }

/* ── Hero player banner ─────────────────────────────────── */
.lk-hero {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .65rem .5rem;
  background: linear-gradient(90deg,
    rgba(255,255,255,.06) 0%,
    rgba(255,255,255,.025) 60%,
    transparent 100%);
  border-bottom: 1px solid rgba(255,255,255,.1);
  position: relative; overflow: hidden;
}
.lk-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; width: 3px; height: 100%;
  background: var(--team-glow, var(--neon));
  box-shadow: 0 0 10px 2px var(--team-glow, var(--neon));
}
.lk-hero-num {
  font-family: 'Rajdhani', monospace;
  font-size: 2.6rem; font-weight: 900; line-height: 1;
  color: rgba(255,255,255,.06);
  letter-spacing: -.05em;
  position: absolute; right: .5rem; top: 50%;
  transform: translateY(-50%);
  pointer-events: none; user-select: none;
}
.lk-hero-info  { display: flex; flex-direction: column; gap: .06rem; padding-left: .4rem; flex: 1; }
.lk-hero-label {
  font-size: .42rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--team-glow, var(--neon));
  opacity: .85;
}
.lk-hero-name  {
  font-family: 'Rajdhani', var(--font);
  font-size: 1.05rem; font-weight: 900; letter-spacing: .03em;
  color: #fff; line-height: 1;
}
.lk-hero-ovr   {
  font-family: 'Rajdhani', monospace;
  font-size: .78rem; font-weight: 700;
  color: rgba(255,255,255,.55);
}
[data-tier="elite"]  .lk-hero-name { color: #39ff9f; text-shadow: 0 0 14px rgba(57,255,159,.55); }
[data-tier="gold"]   .lk-hero-name { color: #f5b820; text-shadow: 0 0 12px rgba(245,184,32,.45); }
[data-tier="silver"] .lk-hero-name { color: #9ab8d8; }

/* ── Mini tactical pitch ────────────────────────────────── */
.lk-mini-pitch {
  width: 52px; height: 62px; flex-shrink: 0;
}
.mp-svg { width: 100%; height: 100%; display: block; }
.mp-dot {
  transition: r .2s, fill-opacity .2s;
  cursor: default;
}
.mp-dot:hover { r: 5.5; fill-opacity: 1; }

/* ── 3. VS → SIMULAR Button ─────────────────────────────── */
.vs-badge {
  -webkit-appearance: none; appearance: none;
  font-family: 'Rajdhani', var(--font);
  cursor: default;
  outline: none;
  padding: 0;    /* reset browser default — essential for coin to fill perfectly */
  margin: 0;
  transition: width .55s cubic-bezier(.34,1.56,.64,1),
              height .55s cubic-bezier(.34,1.56,.64,1),
              background .45s, border-color .45s, box-shadow .45s,
              transform .3s ease;
}

/* ─── Animations that breathe from the logo's red core ──── */

/* The outer ring pulses with team colors */
@keyframes clash-glow {
  0%,100% {
    box-shadow:
      0 0 18px 5px var(--clash-a, rgba(0,212,255,.55)),
      0 0 38px 10px rgba(0,212,255,.25),
      inset 0 0 20px rgba(0,0,0,.7);
  }
  50% {
    box-shadow:
      0 0 32px 12px var(--clash-a, rgba(0,212,255,.8)),
      0 0 62px 22px rgba(0,212,255,.4),
      inset 0 0 24px rgba(0,0,0,.65);
  }
}

/* The logo core glow — synchronized with clash-glow */
@keyframes gx-core-pulse {
  0%,100% {
    filter:
      drop-shadow(0 0  5px rgba(0, 180, 255, .7))
      drop-shadow(0 0 14px rgba(0, 140, 220, .4))
      drop-shadow(0 0 28px rgba(0, 100, 180, .2));
  }
  50% {
    filter:
      drop-shadow(0 0 10px rgba(0, 212, 255, 1))
      drop-shadow(0 0 24px rgba(0, 180, 255, .75))
      drop-shadow(0 0 46px rgba(0, 140, 220, .4));
  }
}

/* Rotating halo ring behind the logo */
@keyframes gx-halo-spin {
  to { transform: rotate(360deg); }
}

/* Soft radial corona that expands/contracts */
@keyframes gx-corona {
  0%,100% { opacity: .25; transform: scale(.88); }
  50%      { opacity: .55; transform: scale(1.05); }
}

/* Energy SVG line in the button */
@keyframes energy-flow {
  0%   { stroke-dashoffset: 80; opacity: .5; }
  50%  { stroke-dashoffset: 0;  opacity: .9; }
  100% { stroke-dashoffset: -80; opacity: .5; }
}
.clash-energy {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 0;
}
.energy-line {
  stroke: rgba(255,255,255,.45);
  stroke-width: 1.2;
  stroke-dasharray: 18 10;
  animation: energy-flow 1.6s linear infinite;
}

/* ─── The button shell ──────────────────────────────────── */
/*
  Design: the GolazOX metallic coin IS the button.
  The PNG (dark stone + silver disc + red GX core) fills the circle.
  No mix-blend-mode, no mask tricks — just a clean coin.
  ::before = spinning team-color ring outside the circle.
  box-shadow (via clash-glow) = pulsing outer glow.
*/
.vs-badge.vs-ready {
  width: 84px;
  height: 84px;
  min-width: 84px;
  min-height: 84px;
  cursor: pointer;
  color: #fff;
  position: relative;
  background: #07090f;
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 50%;
  /* NO overflow:hidden here — coin clip is handled by .clash-logo-wrap */
  animation: clash-glow 2.2s ease-in-out infinite;
  isolation: isolate;
  transition: transform .3s ease;
}

/* Spinning team-color ring — sits outside the circle */
.vs-badge.vs-ready::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  background:
    conic-gradient(from 0deg,
      var(--clash-a, #00d4ff) 0deg,
      transparent            90deg,
      rgba(0,212,255,.4)     180deg,
      transparent            270deg,
      var(--clash-a, #00d4ff) 360deg)
    border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: gx-halo-spin 4s linear infinite;
  pointer-events: none;
  z-index: 3;
}

.vs-badge.vs-ready:hover {
  transform: scale(1.1);
  animation-duration: .9s;
}
.vs-badge.vs-ready:hover::before { animation-duration: 1.8s; }
.vs-badge.vs-ready:active  { transform: scale(.92); animation: none; }

/* ─── Coin image fills the circle ───────────────────────── */
/*
  Absolute fill: wrapper covers the full button disc reliably
  regardless of browser default padding/box-model quirks.
  overflow:hidden + border-radius clips the square PNG to a circle.
*/
.clash-logo-wrap {
  position: absolute;
  inset: 0;             /* fill entire button */
  border-radius: 50%;   /* clip to circle */
  overflow: hidden;
  z-index: 1;
}

.clash-logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;    /* fill — transparent corners outside coin disc are clipped */
  object-position: center;
  animation: gx-core-pulse 2.2s ease-in-out infinite;
  pointer-events: none;
}

/* "▶ SIMULAR" label — sibling below the coin button */
.vs-clash-label {
  display: none;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(0,212,255,.5);
}
.vs-clash-label.visible { display: block; }
.vs-badge.vs-ready .clash-l1 { display: none; }
.vs-badge.vs-ready .clash-l2 { display: none; }

/* ═══════════════════════════════════════════════════════════
   WEATHER ATMOSPHERE OVERLAY + PANEL REACTIONS
═══════════════════════════════════════════════════════════ */

/* Fixed overlay — transparent by default, animated by weather class */
#wx-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
  transition: background .6s ease;
}

/* ── Burst opacity keyframe: fade in → hold → fade out in ~2.8s ── */
@keyframes wx-burst-opacity {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Rain drops ── */
@keyframes wx-rain-fall {
  from { background-position: 0 -100px; }
  to   { background-position: -30px 100vh; }
}
body.wx-burst[data-wx="rain"] #wx-overlay,
body.wx-burst[data-wx="storm"] #wx-overlay {
  background-image:
    repeating-linear-gradient(
      172deg,
      transparent 0 1.5px,
      rgba(160,200,240,.55) 1.5px 2.5px,
      transparent 2.5px 46px
    );
  background-size: 60px 80px;
  background-color: rgba(60,90,140,.07);
  animation: wx-rain-fall .65s linear infinite, wx-burst-opacity 2.8s ease forwards;
}
body.wx-burst[data-wx="storm"] #wx-overlay {
  background-image:
    repeating-linear-gradient(
      172deg,
      transparent 0 1.5px,
      rgba(140,160,220,.7) 1.5px 3px,
      transparent 3px 50px
    );
  background-color: rgba(40,40,100,.12);
  animation: wx-rain-fall .38s linear infinite, wx-burst-opacity 2.8s ease forwards;
}

/* ── Storm: panel edge flash (brief burst only) ── */
@keyframes wx-storm-flash {
  0%,87%,100% { box-shadow: var(--shadow, none); }
  88%  { box-shadow: 0 0 0 1px rgba(250,220,60,.4), 0 0 18px rgba(250,220,60,.25); }
  92%  { box-shadow: var(--shadow, none); }
  93%  { box-shadow: 0 0 0 1px rgba(250,220,60,.3), 0 0 12px rgba(250,220,60,.18); }
}
body.wx-burst[data-wx="storm"] .glass-card {
  animation: wx-storm-flash 2.8s ease-out forwards;
}
body.wx-burst[data-wx="storm"] .glass-card:nth-child(2) { animation-delay: .5s; }

/* ── Snow flakes ── */
@keyframes wx-snow-fall {
  from { background-position: 0 -50px; }
  to   { background-position: 20px 100vh; }
}
body.wx-burst[data-wx="snow"] #wx-overlay {
  background-image:
    radial-gradient(circle, rgba(210,235,255,.65) 2px, transparent 2px),
    radial-gradient(circle, rgba(210,235,255,.45) 2.5px, transparent 2.5px),
    radial-gradient(circle, rgba(210,235,255,.55) 1.5px, transparent 1.5px);
  background-size: 90px 90px, 130px 120px, 60px 80px;
  background-color: rgba(180,210,255,.04);
  animation: wx-snow-fall 4s linear infinite, wx-burst-opacity 2.8s ease forwards;
}

/* ── Night: subtle dark tint (burst only) ── */
body.wx-burst[data-wx="night"] #wx-overlay {
  background: rgba(0,0,30,.38);
  animation: wx-burst-opacity 2.8s ease forwards;
}
body[data-wx="night"] .vs-badge.vs-ready {
  --clash-a: rgba(100, 60, 200, .7);
  --clash-b: rgba(60, 20, 160, .6);
}

/* ── Heat: coin shimmers ── */
@keyframes wx-heat-shimmer {
  0%,100% { filter: brightness(1); }
  50%      { filter: brightness(1.08) saturate(1.2); }
}
body[data-wx="heat"] .vs-badge.vs-ready .clash-logo-img {
  animation: gx-core-pulse 2.2s ease-in-out infinite, wx-heat-shimmer 1.2s ease-in-out infinite;
}

/* ── Panel selection flash ── */
@keyframes col-flash-anim {
  0%  { box-shadow: 0 0 0 2px rgba(0,212,255,.7), 0 0 30px rgba(0,212,255,.3); }
  100%{ box-shadow: none; }
}
.col-flash {
  animation: col-flash-anim .6s ease-out forwards;
  border-radius: var(--radius-lg);
}

/* ── Coin collapse on simulate ── */
@keyframes coin-collapse {
  0%   { transform: scale(1); opacity: 1; }
  30%  { transform: scale(1.12); }
  70%  { transform: scale(0) rotate(20deg); opacity: 0; }
  100% { transform: scale(0); opacity: 0; }
}
.coin-collapsing { animation: coin-collapse .42s cubic-bezier(.55,0,.7,1) forwards !important; }


/* ═══════════════════════════════════════════════════════════
   PWA INSTALL BOTTOM SHEET
═══════════════════════════════════════════════════════════ */
.pwa-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  /* slide-in from below */
  transform: translateY(110%);
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
  /* safe-area for iPhone home-bar */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pwa-sheet[hidden] { display: flex !important; visibility: hidden; pointer-events: none; }
.pwa-sheet--visible {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}
.pwa-sheet-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem calc(1rem + env(safe-area-inset-bottom, 0px));
  background: rgba(5, 10, 28, .96);
  border-top: 1px solid rgba(0, 212, 255, .25);
  box-shadow:
    0 -4px 32px rgba(0, 212, 255, .12),
    0 -1px 0   rgba(0, 212, 255, .18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
/* Animated neon top-border pulse */
.pwa-sheet-inner::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 212, 255, .7) 30%,
    rgba(255, 77, 109, .6) 70%,
    transparent 100%);
  animation: pwa-border-sweep 3s ease-in-out infinite;
}
@keyframes pwa-border-sweep {
  0%,100% { opacity: .5; }
  50%     { opacity: 1; }
}
.pwa-sheet-logo {
  flex-shrink: 0;
}
.pwa-sheet-wordmark {
  height: 28px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 6px rgba(0, 212, 255, .5));
}
.pwa-sheet-text {
  flex: 1;
  min-width: 0;
}
.pwa-sheet-title {
  font-family: 'Rajdhani', var(--font);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .03em;
  color: #fff;
  margin: 0 0 .18rem;
  line-height: 1.2;
}
.pwa-sheet-sub {
  font-size: .72rem;
  color: rgba(255, 255, 255, .45);
  margin: 0;
  line-height: 1.35;
}
.pwa-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: .42rem;
  flex-shrink: 0;
}
.pwa-btn {
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Rajdhani', var(--font);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .06em;
  padding: .45rem .9rem;
  text-transform: uppercase;
  white-space: nowrap;
  transition: filter .15s, transform .12s;
}
.pwa-btn:active { transform: scale(.96); }
.pwa-btn-install {
  background: linear-gradient(135deg, #00d4ff 0%, #4f89ff 60%, #ff4d6d 100%);
  color: #000;
  box-shadow: 0 0 14px rgba(0, 212, 255, .45);
}
.pwa-btn-install:hover { filter: brightness(1.12); }
.pwa-btn-later {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .5);
}
.pwa-btn-later:hover { background: rgba(255, 255, 255, .11); color: rgba(255,255,255,.75); }

/* Mobile: stack logo+text vertically, buttons side-by-side */
@media (max-width: 480px) {
  .pwa-sheet-inner {
    flex-wrap: wrap;
    gap: .7rem;
    padding: .85rem .9rem calc(.85rem + env(safe-area-inset-bottom, 0px));
  }
  .pwa-sheet-logo { width: 100%; }
  .pwa-sheet-wordmark { height: 24px; }
  .pwa-sheet-text { width: 100%; flex: none; }
  .pwa-sheet-title { font-size: .82rem; }
  .pwa-sheet-sub  { font-size: .67rem; }
  .pwa-sheet-actions {
    width: 100%;
    flex-direction: row;
    justify-content: stretch;
  }
  .pwa-btn { flex: 1; text-align: center; }
}