/* ─── World Cup 2026 supplement — layered on football.ae's football.css ─── */

/* Scroll-reveal: cards default VISIBLE (fail-safe); JS hides off-screen ones, removes the
   class as they scroll in → the transition fades them up. Resting state is always visible. */
.wc-reveal { transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
.wc-reveal.wc-hidden { opacity: 0; transform: translateY(16px); }
@media (prefers-reduced-motion: reduce) { .wc-reveal { transition: none; } .wc-reveal.wc-hidden { opacity: 1; transform: none; } }

/* Disable double-tap / pinch zoom on mobile */
html { touch-action: manipulation; -ms-touch-action: manipulation; }
* { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Wider canvas than the 640px league site so 12 groups can breathe on desktop */
.container { max-width: 1080px; }

/* ── Dark mode (Settings → Theme) ── */
html[data-theme="dark"] {
  --primary: #F2F4F8;
  --primary-light: #d9deea;
  --accent: #4FB3E2;
  --accent-soft: #14303F;
  --accent-muted: #2E81A8;
  --bg: #0E1320;
  --card-bg: #181E2C;
  --text: #E8EAF2;
  --text-secondary: #9AA3B5;
  --border: #2A3242;
  --shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 2px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 8px 40px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}
/* spots that hardcode light surfaces */
html[data-theme="dark"] .wc-header { background: #131826; }
html[data-theme="dark"] .wc-footer { background: #131826; box-shadow: inset 0 1px 0 var(--border); }
/* the wordmark is dark navy — float it on a light capsule so the brand stays readable */
html[data-theme="dark"] .wc-logo-link { background: #F2F4F8; border-radius: 16px; padding: 5px 14px; }
html[data-theme="dark"] .nav { background: var(--card-bg); }
html[data-theme="dark"] .wc-day-head { background: linear-gradient(135deg, #1A2233, #181E2C); }
html[data-theme="dark"] .wc-ko-day { background: linear-gradient(135deg, #1A2233, #181E2C); }
html[data-theme="dark"] .wc-lang,
html[data-theme="dark"] .wc-sub-btn { background: var(--card-bg); }
html[data-theme="dark"] .wc-lang:hover,
html[data-theme="dark"] .wc-sub-btn:hover { background: var(--bg); }
html[data-theme="dark"] .wc-day { background: #1A2130; }
html[data-theme="dark"] .wc-toast { background: #2A3242; }
html[data-theme="dark"] .wc-team-hero-group,
html[data-theme="dark"] .wc-team-hero .wc-team-act { background: rgba(24,30,44,0.82); }
html[data-theme="dark"] .wc-team-hero .wc-team-act:hover { background: var(--accent); }
html[data-theme="dark"] .wc-modal { background: var(--card-bg); }
html[data-theme="dark"] .wc-status-pill.wc-pill-ft { background: rgba(31,157,85,0.22); color: #4ADE80; }
html[data-theme="dark"] .match-card.is-done { border-color: rgba(74,222,128,0.35); }
html[data-theme="dark"] .br-line { stroke: #3A4254; }
html[data-theme="dark"] .wc-day-rel { background: var(--card-bg); }
html[data-theme="dark"] .wc-night-capsule { background: #262C3D; color: #cdd6ff; }
html[data-theme="dark"] .wc-dawn-capsule { background: #3A2E18; color: #F0B265; }
html[data-theme="dark"] .wc-noon-capsule { background: #15314A; color: #7CC4F0; }
html[data-theme="dark"] .wc-eve-capsule { background: #2C2547; color: #B9A6F5; }
/* dark mode uses the light-text logo (swapped in applyTheme) */
html[data-theme="dark"] .wc-logo-link { background: none; padding: 0; }
.wc-narrow { max-width: 680px; margin: 0 auto; }

/* Light header & footer matching the logo background (#f2f2f2), logo centered top */
.wc-header {
  background: #f2f2f2;
  color: var(--text);
  box-shadow: inset 0 -1px 0 var(--border);
  padding: 0.85rem 0;
}
.wc-header-inner {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 52px;
}
.wc-header-right { display: flex; align-items: center; gap: 0.4rem; }
.wc-logo-link { display: inline-flex; flex-shrink: 0; }
/* Location flag in the header: the visitor's nation (by timezone), animated, taps to its page */
.wc-home-flag { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none; margin-inline-start: 0.55rem; }
.wc-home-flag[hidden] { display: none; }
.wc-home-flag-img {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #eee;
  border: 2px solid var(--card-bg);
  animation: wc-home-bob 2.6s ease-in-out infinite, wc-home-glow 2.6s ease-in-out infinite;
}
@keyframes wc-home-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-2px) rotate(-7deg); }
  75% { transform: translateY(-2px) rotate(7deg); }
}
@keyframes wc-home-glow {
  0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 0 rgba(13,138,188,0.45); }
  50% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px rgba(13,138,188,0); }
}
@media (prefers-reduced-motion: reduce) { .wc-home-flag-img { animation: none; box-shadow: 0 0 0 2px var(--accent); } }
/* Compact header on phones so the logo (leading) + full icon cluster (trailing) fit one row */
@media (max-width: 560px) {
  /* fit logo + tz pill + (clock, subscribe, search, settings) + language on one row.
     Prefixed with .wc-header so these beat the unprefixed base rules that come later in the file. */
  .wc-header .wc-header-inner { gap: 0.28rem; }
  .wc-header .wc-header-right { gap: 0.2rem; }
  .wc-header .wc-logo { height: 32px; }
  .wc-header .wc-home-flag-img { width: 24px; height: 24px; }
  .wc-header .wc-header-actions { gap: 0.22rem; }
  .wc-header .wc-sub-btn { width: 31px; height: 31px; }
  .wc-header .wc-sub-btn .wc-ic { width: 1rem; height: 1rem; }
  .wc-header .wc-lang { padding: 0.28rem 0.45rem; font-size: 0.78rem; }
  .wc-header .wc-tz-pill { max-width: 22vw; padding: 2px 1px; }
  .wc-header .wc-tz-pill-zone { font-size: 0.7rem; }
}
/* Always the compact size (no grow-then-shrink on scroll) */
.wc-logo { height: 36px; width: auto; display: block; }
@media (min-width: 640px) { .wc-logo { height: 42px; } }

/* Right-side header cluster: subscribe icon + language toggle */
.wc-header-actions {
  position: static; transform: none; inset: auto;
  display: flex; align-items: center; gap: 0.45rem;
}
.wc-lang {
  position: static; transform: none; inset-inline-end: auto; top: auto;
  background: #fff; color: var(--primary); border: 1.5px solid var(--border);
}
.wc-lang:hover { background: var(--bg); border-color: var(--accent-muted); }
.wc-sub-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1.5px solid var(--border);
  color: var(--accent); cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.wc-sub-btn:hover { background: var(--bg); border-color: var(--accent-muted); }
.wc-sub-btn[hidden] { display: none; }
.wc-sub-btn .wc-ic { width: 1.2rem; height: 1.2rem; }
/* Subscribe panel (modal) */
.wc-modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(10,10,26,0.55); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.wc-modal {
  position: relative; width: min(420px, 100%); box-sizing: border-box; text-align: center;
  background: var(--card-bg); border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.32); padding: 1.7rem 1.4rem 1.4rem;
}
.wc-modal-x { position: absolute; top: 0.7rem; inset-inline-end: 0.9rem; background: none; border: 0; font-size: 1.1rem; color: var(--text-secondary); cursor: pointer; line-height: 1; }
/* Settings: full-screen sheet, title left-aligned, controls stacked one per row */
.wc-settings-overlay { padding: 0; align-items: stretch; justify-content: stretch; }
.wc-settings-modal {
  text-align: start; width: 100%; max-width: 100%; height: 100%; border-radius: 0;
  padding: 1.4rem 1.3rem 2.4rem; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; align-items: stretch;
}
.wc-settings-modal .wc-modal-title { text-align: start; font-size: 1.55rem; margin: 0.2rem 0 1.4rem; }
.wc-settings-modal .wc-modal-x {
  position: absolute; top: 0.85rem; inset-inline-end: 0.85rem; font-size: 1.9rem; line-height: 1;
  width: 2.8rem; height: 2.8rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--text); background: var(--bg);
}
.wc-settings-modal .wc-modal-x:hover { background: var(--border); }
.wc-settings-modal .wc-settings-panel {
  display: flex; flex-direction: column; align-items: stretch; gap: 1.2rem;
  width: 100%; max-width: 560px; margin: 0 auto; padding: 0; background: none; border: none; box-shadow: none; border-radius: 0;
}
.wc-settings-modal .wc-ctl-group { justify-content: space-between; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); }
.wc-settings-modal .wc-ctl-group:last-of-type { border-bottom: none; }
.wc-settings-modal .wc-ctl-hint { margin-top: -0.7rem; }
.wc-settings-modal .wc-tz-select { max-width: 60%; }
.wc-modal-ic { display: inline-flex; width: 58px; height: 58px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); margin-bottom: 0.7rem; }
.wc-modal-ic .wc-ic { width: 1.8rem; height: 1.8rem; }
.wc-modal-title { font-size: 1.25rem; font-weight: 900; color: var(--primary); margin: 0 0 0.55rem; }
.wc-modal-text { font-size: 0.9rem; font-weight: 500; line-height: 1.6; color: var(--text-secondary); margin: 0 0 1.2rem; }
.wc-modal-cta { margin: 0 auto; max-width: 320px; }
.wc-modal-steps { font-size: 0.8rem; font-weight: 700; color: var(--text); margin: 0.85rem 0 0; }
.wc-modal-note { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); margin: 0.5rem 0 0; line-height: 1.5; }
/* Add-to-calendar app picker */
.wc-cal-modal { max-height: 92vh; overflow-y: auto; text-align: center; }
.wc-cal-flag { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 0.7rem; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--border), 0 3px 10px rgba(0,0,0,0.15); }
.wc-cal-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 0.7rem; margin: 1.3rem 0 0.4rem; }
.wc-cal-app { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-width: 0; }
.wc-cal-badge { width: 58px; height: 58px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border); box-shadow: 0 3px 12px rgba(0,0,0,0.12); }
.wc-cal-logo { width: 32px; height: 32px; display: block; }
.wc-cal-name { font-weight: 800; font-size: 0.92rem; color: var(--text); }
.wc-cal-langs { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; }
.wc-cal-lang { text-decoration: none; text-align: center; font-family: inherit; font-weight: 800; font-size: 0.74rem; padding: 0.4rem 0.3rem; border-radius: 999px; border: 1.5px solid var(--border); color: var(--text); background: var(--card-bg); white-space: nowrap; }
.wc-cal-lang.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.wc-cal-lang:hover { border-color: var(--accent-muted); }
.wc-cal-how { margin-top: 1.2rem; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 0.85rem 0.95rem; font-size: 0.8rem; font-weight: 600; line-height: 1.55; color: var(--text-secondary); text-align: start; }
.wc-cal-how b { color: var(--text); font-weight: 800; }
/* Android: copy the feed address (Google web only accepts URL subscriptions from a computer) */
.wc-cal-copy {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.8rem;
  font-family: inherit; font-size: 0.85rem; font-weight: 800;
  color: #fff; background: var(--accent); border: 0; border-radius: 999px;
  padding: 0.6rem 1.2rem; cursor: pointer; transition: background 0.15s;
}
.wc-cal-copy:hover { background: var(--accent-muted); }
.wc-cal-copy .wc-ic { width: 1rem; height: 1rem; }

/* Leading header cluster: timezone pill + (when a match is in play) the LIVE jump pill */
/* Leading header slot: shows the timezone pill, swapped for the LIVE pill while a match is in play */
.wc-header-lead {
  position: static; transform: none; inset: auto;
  display: flex; align-items: center;
}
.wc-header-lead [hidden] { display: none; }
.wc-live-top {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: inherit; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.4px;
  color: #fff; background: #E0245E; border: 0; border-radius: 999px;
  padding: 4px 11px; cursor: pointer; transition: transform 0.15s;
  box-shadow: 0 2px 10px rgba(224,36,94,0.35);
}
.wc-live-top:hover { transform: translateY(-1px); }
.wc-live-top[hidden] { display: none; }
.wc-live-top .wc-live-dot { width: 6px; height: 6px; background: #fff; }
/* Small "times shown in <zone>" indicator on the leading side of the header */
.wc-tz-pill {
  position: static; transform: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  line-height: 1.15; text-align: start; max-width: 38vw;
}
/* RTL: keep both lines hugging the inline-start (right) edge, right-aligned */
[dir="rtl"] .wc-tz-pill { align-items: flex-start; text-align: right; }
.wc-tz-pill-zone { font-size: 0.78rem; font-weight: 800; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wc-tz-pill-sub { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2px; color: var(--text-secondary); opacity: 0.9; white-space: nowrap; }

/* "TODAY" news-style ticker (in the sticky topbar): today's matches with flags, scrolling */
.wc-ticker {
  display: flex; align-items: stretch; overflow: hidden; cursor: default;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  height: 42px; background: #0e1626; color: #eef2fb; border-top: 1px solid rgba(255,255,255,0.08);
  width: 100%; max-width: 1080px; margin-inline: auto;   /* match site width on desktop, not full screen */
}
.wc-ticker[hidden] { display: none; }
.wc-ticker-label {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  padding: 0 0.75rem; background: #E63946; color: #fff;
  font-family: inherit; font-weight: 800; font-size: 0.7rem; letter-spacing: 0.8px; text-transform: uppercase;
}
.wc-ticker-label { cursor: ew-resize; }   /* hold to fast-forward */
.wc-ticker-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: wc-live-pulse 1.4s ease-in-out infinite; }
.wc-ticker-track { position: relative; flex: 1; overflow: hidden; display: flex; align-items: center; cursor: pointer; }   /* tap to pause/resume */
.wc-ticker-row { display: inline-flex; align-items: center; flex: none; white-space: nowrap; animation-name: wc-ticker-scroll; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform; }
.wc-ticker-row.is-paused { animation-play-state: paused; }
@keyframes wc-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* RTL: row is anchored at the right, so scroll the opposite way to stay filled + loop seamlessly */
@keyframes wc-ticker-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
[dir="rtl"] .wc-ticker-row { animation-name: wc-ticker-scroll-rtl; }
.wc-tk-item { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0 1rem; font-size: 0.85rem; }
.wc-tk-flag { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: #2a3344; flex-shrink: 0; }
.wc-tk-nm { font-weight: 700; }
.wc-tk-score { font-family: 'JetBrains Mono', monospace; font-weight: 800; color: #8fd3ff; }
.wc-tk-score.is-live { color: #ff6b7e; }
.wc-tk-time { font-family: 'JetBrains Mono', monospace; opacity: 0.7; display: inline-flex; align-items: baseline; gap: 0.12em; }
.wc-tk-mer { font-family: inherit; font-size: 0.78em; font-weight: 700; }
.wc-tk-sep { opacity: 0.35; padding: 0 0.1rem; }
@media (prefers-reduced-motion: reduce) { .wc-ticker-row { animation: none; } .wc-ticker-label::before { animation: none; } }
.wc-tz-pill:hover .wc-tz-pill-zone { text-decoration: underline; }

/* ─── Inline SVG icon sizing (clean line icons, replacing emoji) ─── */
.wc-ic { width: 1.05em; height: 1.05em; flex: 0 0 auto; vertical-align: -0.16em; }
.wc-time-badge .wc-ic { width: 0.95rem; height: 0.95rem; }
.match-capsule .wc-ic { width: 1.12rem; height: 1.12rem; }
.wc-cap-flag { width: 19px; height: 19px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); }
.wc-group-hosts .wc-ic { width: 22px; height: 22px; }
.wc-stage-title .wc-ic { width: 1.15rem; height: 1.15rem; }
.wc-tz-label .wc-ic { width: 0.92rem; height: 0.92rem; }
.wc-settings-ico { display: inline-flex; }
.wc-settings-ico .wc-ic { width: 1.3rem; height: 1.3rem; }
.wc-cal-toggle > .wc-ic { width: 1.25rem; height: 1.25rem; }
/* Corner buttons: larger + solid black */
.wc-cal-corner, .wc-share-corner { color: var(--primary); opacity: 1; }
.wc-cal-corner .wc-ic, .wc-share-corner .wc-ic { width: 23px; height: 23px; vertical-align: 0; }
.wc-cal-corner .wc-ic, .wc-share-corner .wc-ic { stroke-width: 1.9; }
.wc-cal-all { display: inline-flex; align-items: center; gap: 0.45rem; }
.wc-cal-all .wc-ic { width: 1.2rem; height: 1.2rem; }

.wc-footer { background: #f2f2f2; color: var(--text-secondary); box-shadow: inset 0 1px 0 var(--border); }
.wc-footer .footer-inner { color: var(--text-secondary); }
.wc-footer .footer-inner p { color: var(--text-secondary); font-weight: 600; }
.wc-footer .last-updated { color: var(--text-secondary); opacity: 0.8; }
.wc-credit { margin-top: 0.2rem; }
.wc-credit a { color: var(--accent); font-weight: 700; font-size: 0.78rem; text-decoration: none; }
.wc-credit a:hover { text-decoration: underline; }

/* Sticky header+nav as one bar; logo shrinks on scroll */
.wc-topbar { position: sticky; top: 0; z-index: 100; }
.wc-topbar .nav { position: static; }
.wc-header { transition: padding 0.2s ease, box-shadow 0.2s ease; }
.wc-logo { transition: height 0.2s ease; }
.wc-topbar.shrink .wc-header { padding: 0.3rem 0; box-shadow: inset 0 -1px 0 var(--border), 0 4px 14px rgba(0,0,0,0.06); }
.wc-topbar.shrink .wc-header .wc-logo { height: 36px; }
@media (min-width: 640px) { .wc-topbar.shrink .wc-header .wc-logo { height: 42px; } }

/* Clickable flags / teams → country page */
.wc-clickable { cursor: pointer; }
.wc-team-cell.wc-clickable:hover .wc-team-name { color: var(--accent); }
img.wc-clickable { transition: transform 0.12s ease; }
img.wc-clickable:hover { transform: scale(1.08); }
.team.wc-clickable:hover .team-name { color: var(--accent); }

/* Host-country flags in the group header */
.wc-group-hosts { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; opacity: 0.95; }
.wc-host-flag {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255,255,255,0.85); box-shadow: 0 1px 3px rgba(0,0,0,0.25); background: #eee;
}

/* Country page */
.wc-back {
  display: inline-flex; align-items: center; gap: 0.35rem; font-family: inherit;
  background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 999px;
  padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 800; color: var(--accent);
  cursor: pointer; margin-bottom: 1rem; box-shadow: var(--shadow); transition: all 0.15s;
}
.wc-back:hover { border-color: var(--accent-muted); background: var(--accent-soft); }
/* Keep chevron glyphs from being bidi-mirrored in the Arabic (RTL) UI */
.wc-arrow { display: inline-block; direction: ltr; unicode-bidi: isolate; }
.wc-back .wc-arrow { font-size: 1.1rem; line-height: 1; }
.wc-team-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: stretch; gap: 1rem;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.5rem 1.3rem 1.3rem; margin-bottom: 1.3rem;
}
/* Flag fills the trailing half of the card, colours vivid on that edge and dissolving toward the text */
.wc-team-hero-bg {
  position: absolute; z-index: -1; pointer-events: none;
  inset-block: -2px; inset-inline-end: -2px;
  width: 62%;
  background-size: cover; background-position: center;
  filter: saturate(1.2); opacity: 0.62;
  -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0.55) 42%, transparent 88%);
          mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0.55) 42%, transparent 88%);
}
[dir="rtl"] .wc-team-hero-bg {
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,0.55) 42%, transparent 88%);
          mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,0.55) 42%, transparent 88%);
}
/* Flag "ball": emerges from behind the Back button, rolls slowly along the row above the card,
   then at the trailing top corner it drops behind the card and hides. Plays once, after the group flags. */
.wc-narrow { position: relative; }
.wc-narrow .wc-back { position: relative; z-index: 3; }
.wc-narrow .wc-team-hero { z-index: 2; }
.wc-team-ball {
  position: absolute; inset-inline-start: 0; top: 4px; z-index: 1; pointer-events: none;
  width: 40px; height: 40px; border-radius: 50%;
  background-size: cover; background-position: center; background-color: #eee;
  border: 2px solid #fff; box-shadow: 0 5px 12px rgba(0,0,0,0.25);
  animation: wc-ball-roll-ltr 3.2s linear 2.9s both;   /* delay waits for the group flags to finish */
}
[dir="rtl"] .wc-team-ball { animation-name: wc-ball-roll-rtl; }
@keyframes wc-ball-roll-ltr {
  0%   { transform: translateX(8px) translateY(0) rotate(0deg); animation-timing-function: cubic-bezier(0.09, 0.66, 0.2, 1); }
  70%  { transform: translateX(var(--travel, 540px)) translateY(0) rotate(1080deg); animation-timing-function: cubic-bezier(0.45, 0, 0.85, 0.5); }
  100% { transform: translateX(var(--travel, 540px)) translateY(150px) rotate(1200deg); }
}
@keyframes wc-ball-roll-rtl {
  0%   { transform: translateX(-8px) translateY(0) rotate(0deg); animation-timing-function: cubic-bezier(0.09, 0.66, 0.2, 1); }
  70%  { transform: translateX(calc(-1 * var(--travel, 540px))) translateY(0) rotate(-1080deg); animation-timing-function: cubic-bezier(0.45, 0, 0.85, 0.5); }
  100% { transform: translateX(calc(-1 * var(--travel, 540px))) translateY(150px) rotate(-1200deg); }
}
@media (prefers-reduced-motion: reduce) { .wc-team-ball { display: none; } }

/* Group label + overlapping circle flags of the group's teams */
.wc-team-hero-grow { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.wc-group-flags { display: inline-flex; align-items: center; perspective: 480px; cursor: pointer; }
.wc-gflip {
  position: relative; width: 1.6rem; height: 1.6rem;
  animation: wc-gf-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;   /* pop the number in */
}
.wc-gflip + .wc-gflip { margin-inline-start: -0.55rem; }
.wc-gflip-in {
  position: absolute; inset: 0; transform-style: preserve-3d;
  animation: wc-gf-flip 0.8s cubic-bezier(0.65, 0, 0.35, 1) both;     /* then flip number → flag */
}
.wc-gf-face {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 2px solid var(--card-bg); box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.wc-gf-num {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 0.82rem;
}
.wc-gf-flag { transform: rotateY(180deg); background: #eee; }
.wc-gf-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes wc-gf-pop {
  0% { opacity: 0; transform: scale(0.2); }
  60% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes wc-gf-flip { 0% { transform: rotateY(0); } 100% { transform: rotateY(180deg); } }
@media (prefers-reduced-motion: reduce) {
  .wc-gflip { animation: none; }
  .wc-gflip-in { animation: none; transform: rotateY(180deg); }
}

/* In-place flourish at the group pill when a match card's group name is tapped:
   overlapping circles burst out of the pill, flip number → flag, then navigate. */
.wc-gburst {
  position: fixed; z-index: 1200; transform: translate(-50%, -50%);
  pointer-events: none; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.3));
  animation: wc-gburst-fade 0.18s ease both;
}
.wc-gburst.is-out { animation: wc-gburst-fade 0.2s ease reverse both; }
@keyframes wc-gburst-fade { from { opacity: 0; transform: translate(-50%,-50%) scale(0.6); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
/* bigger than the inline country-page circles so the burst reads at the pill */
.wc-gburst-flags .wc-gflip { width: 2.4rem; height: 2.4rem; }
.wc-gburst-flags .wc-gflip + .wc-gflip { margin-inline-start: -0.75rem; }
.wc-gburst-flags .wc-gf-num { font-size: 1.05rem; }
/* Country's own standing row inside the hero card */
.wc-team-stats {
  display: flex; gap: 0.3rem; margin-top: 0.95rem; position: relative; z-index: 1;
  background: rgba(255,255,255,0.8); backdrop-filter: blur(4px);
  border: 1px solid var(--border); border-radius: 14px; padding: 0.6rem 0.45rem;
}
.wc-ts-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.wc-ts-item + .wc-ts-item { border-inline-start: 1px solid var(--border); }
.wc-ts-val { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 1.05rem; line-height: 1; color: var(--primary); }
.wc-ts-lbl { font-size: 0.6rem; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; }
.wc-ts-item.is-w .wc-ts-val { color: var(--green); }
.wc-ts-item.is-l .wc-ts-val { color: var(--live-pulse); }
.wc-ts-item.is-pts .wc-ts-val { color: var(--accent); }
html[data-theme="dark"] .wc-team-stats { background: rgba(24,30,44,0.82); }

/* Background info card under the hero: continent, location, population + a small map corner icon */
.wc-team-info {
  position: relative;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 0.9rem 1.1rem; margin-bottom: 1.3rem;
  display: flex; flex-direction: column; gap: 0.6rem; text-align: start;
}
.wc-ti-row { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; line-height: 1.4; }
.wc-ti-ic { width: 1.05rem; height: 1.05rem; color: var(--accent); flex-shrink: 0; }
.wc-ti-lbl { font-weight: 800; color: var(--text-secondary); flex-shrink: 0; min-width: 5.5rem; }
.wc-ti-val { font-weight: 700; color: var(--text); }
.wc-ti-map {
  position: absolute; top: 0.6rem; inset-inline-end: 0.6rem; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); text-decoration: none;
}
.wc-ti-map .wc-ic { width: 1.1rem; height: 1.1rem; }
.wc-ti-map:hover { background: var(--accent); color: #fff; }
.wc-team-hero-top { display: flex; align-items: center; gap: 1rem; text-align: start; }
.wc-team-hero-id { min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.wc-team-hero-name { font-size: 2rem; font-weight: 800; line-height: 1.05; color: var(--primary); }
.wc-team-hero-group {
  align-self: flex-start; font-size: 0.72rem; font-weight: 800; color: var(--primary);
  background: rgba(255,255,255,0.78); border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px;
  text-transform: uppercase; letter-spacing: 0.5px; backdrop-filter: blur(4px);
}
.wc-team-hero .wc-team-actions { justify-content: flex-start; margin-top: 0; }
.wc-team-hero .wc-team-act {
  color: var(--primary); background: rgba(255,255,255,0.78); border: 1px solid var(--border);
  backdrop-filter: blur(4px);
}
.wc-team-hero .wc-team-act .wc-ic { color: var(--accent); }
.wc-team-hero .wc-team-act:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.wc-team-hero .wc-team-act:hover .wc-ic { color: #fff; }
/* Tappable stadium chip on match cards → stadium page */
.wc-venue-link { font-family: inherit; cursor: pointer; }
.wc-venue-link:hover { color: var(--accent); }
/* Stadium page hero */
.wc-venue-img { width: 100%; aspect-ratio: 1915 / 821; object-fit: cover; border-radius: 14px; display: block; box-shadow: 0 2px 12px rgba(0,0,0,0.14); }
.wc-venue-hero.has-img { padding-top: 1rem; }
.wc-venue-hero.has-img .wc-venue-ic { display: none; }
.wc-venue-ic { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.wc-venue-ic .wc-ic { width: 2rem; height: 2rem; }
.wc-venue-loc { display: flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; font-weight: 700; color: var(--text-secondary); }
.wc-venue-loc .wc-ic { width: 1rem; height: 1rem; color: var(--accent); }
.wc-venue-loc .wc-host-flag { width: 22px; height: 22px; }
.wc-venue-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.wc-venue-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 0.3rem 0.85rem; }
.wc-venue-pill .wc-ic { width: 1rem; height: 1rem; }
.wc-venue-intro { font-size: 0.9rem; font-weight: 500; line-height: 1.6; color: var(--text-secondary); text-align: center; margin: 0.45rem 0 0; }
.wc-venue-ko-body { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }

/* Controls bar (timezone + clock format) — a modern control panel */
/* Collapsible Settings card */
.wc-settings { margin: 0.2rem 0 1.3rem; }
.wc-settings.wc-settings-empty { margin: 0; }   /* no Calendar/Filter to show (non-Matches tabs) */
.wc-settings-toggle {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; box-sizing: border-box; font-family: inherit;
  font-size: 0.82rem; font-weight: 800; color: var(--text);
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 14px; padding: 0.7rem 1rem; cursor: pointer; box-shadow: var(--shadow);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wc-settings-toggle .wc-settings-caret { margin-inline-start: auto; }
.wc-settings-toggle:hover { border-color: var(--accent-muted); }
.wc-settings-ico { font-size: 1rem; }
.wc-settings-summary { color: var(--text-secondary); font-weight: 700; font-size: 0.78rem; }
.wc-settings-summary::before { content: '· '; }
.wc-settings-caret { color: var(--text-secondary); font-size: 0.7rem; transition: transform 0.2s; }
.wc-settings.open .wc-settings-caret { transform: rotate(180deg); }
/* Top controls row: Settings · Calendar · Filter toggles, stretched full width */
.wc-settings-row { display: flex; align-items: stretch; gap: 0.5rem; }
.wc-icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  flex: 1 1 0; min-width: 0; height: 2.7rem; padding: 0 0.7rem; font-family: inherit; color: var(--text);
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 14px; cursor: pointer; box-shadow: var(--shadow);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}
.wc-icon-btn .wc-ic { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; }
.wc-btn-label { font-size: 0.82rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-icon-compact { flex: 0 0 auto; width: 2.7rem; padding: 0; }
/* Search panel (jump to team / stadium / group) */
.wc-search-overlay { align-items: flex-start; }
.wc-search-panel { position: relative; width: min(480px, 100%); margin-top: 8vh; background: var(--card-bg); border-radius: 20px; box-shadow: 0 24px 70px rgba(0,0,0,0.4); overflow: hidden; animation: wc-search-in 0.28s cubic-bezier(0.22,0.61,0.36,1) both; }
@keyframes wc-search-in { from { opacity: 0; transform: translateY(-14px) scale(0.97); } to { opacity: 1; transform: none; } }
/* brand accent strip across the top (echoes the share-image footer colors) */
.wc-search-panel::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: linear-gradient(90deg, #2E9E4F 0 33.3%, var(--accent) 33.3% 66.6%, #D62839 66.6%); }
.wc-search-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1rem 0.85rem; border-bottom: 1px solid var(--border); }
.wc-search-bar .wc-search-ic { width: 1.3rem; height: 1.3rem; color: var(--accent); }
.wc-search-ic { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; color: var(--text-secondary); }
.wc-search-input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-family: inherit; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.wc-search-x { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; background: var(--accent-soft); border: 0; border-radius: 50%; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); line-height: 1; transition: background 0.15s, color 0.15s; }
.wc-search-x:hover { background: var(--accent); color: #fff; }
.wc-search-results { max-height: 64vh; overflow-y: auto; padding: 0.4rem; }
/* section labels (Teams / Groups / Stadiums / Quick links) */
.wc-search-sec { padding: 0.55rem 0.7rem 0.25rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--accent); }
.wc-search-row { display: flex; align-items: center; gap: 0.65rem; width: 100%; box-sizing: border-box; text-align: start; background: none; border: 0; border-radius: 12px; padding: 0.6rem 0.7rem; cursor: pointer; font-family: inherit; color: var(--text); transition: background 0.14s; }
.wc-search-row:hover { background: var(--accent-soft); }
.wc-search-row .wc-search-ic { color: var(--accent); }
.wc-search-label { display: flex; flex-direction: column; min-width: 0; font-weight: 800; font-size: 0.96rem; }
.wc-search-label small { font-weight: 600; font-size: 0.78rem; color: var(--text-secondary); }
.wc-search-empty { padding: 1rem 1.3rem 1.3rem; text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); margin: 0; }
/* group result: overlapping mini flags pushed to the trailing edge */
.wc-search-grp .wc-search-label { flex: 0 0 auto; }
.wc-search-gflags { display: inline-flex; align-items: center; margin-inline-start: auto; }
.wc-search-gflag { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 2px solid var(--card-bg); background: #2a3344; }
.wc-search-gflag + .wc-search-gflag { margin-inline-start: -7px; }
/* quick links grid */
.wc-search-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; padding: 0.15rem 0.7rem 0.3rem; }
.wc-qlink { display: flex; align-items: center; gap: 0.55rem; padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 14px; background: var(--accent-soft); cursor: pointer; font-family: inherit; font-weight: 800; font-size: 0.9rem; color: var(--text); transition: transform 0.14s, box-shadow 0.14s; }
.wc-qlink:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.14); }
.wc-qlink-ic { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; color: var(--accent); }
.wc-icon-btn:hover { border-color: var(--accent-muted); }
.wc-icon-btn.open { color: var(--accent); border-color: var(--accent); background: var(--accent-soft, rgba(0,0,0,0.03)); }
.wc-icon-btn[hidden] { display: none; }
/* Dot badge when a filter is applied while the panel is collapsed */
.wc-icon-btn.active::after {
  content: ''; position: absolute; top: 0.42rem; inset-inline-end: 0.42rem;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--accent); border: 1.5px solid var(--card-bg);
}
#calGridSlot:not(:empty) { margin-top: 0.7rem; }
.wc-settings-panel {
  display: flex; align-items: center; gap: 0.8rem 1.2rem; flex-wrap: wrap;
  width: 100%; box-sizing: border-box; margin-top: 0.7rem; padding: 0.85rem 1rem;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow);
}
.wc-settings-panel[hidden] { display: none; }
.wc-ctl-group { display: flex; align-items: center; gap: 0.55rem; }
.wc-ctl-hint { flex-basis: 100%; width: 100%; margin: 0; font-size: 0.76rem; font-weight: 600; line-height: 1.5; color: var(--text-secondary); }
.wc-tz-label {
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-secondary); display: flex; align-items: center; gap: 0.35rem; white-space: nowrap;
}
.wc-tz-select {
  appearance: none; -webkit-appearance: none;
  font-family: inherit; font-size: 0.9rem; font-weight: 700; color: var(--text);
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230D8ABC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center;
  border: 1.5px solid var(--border); border-radius: 12px;
  padding: 0.55rem 2.3rem 0.55rem 0.9rem; cursor: pointer; max-width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wc-tz-select:hover { border-color: var(--accent-muted); }
.wc-tz-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
html[dir="rtl"] .wc-tz-select {
  background-position: left 0.75rem center;
  padding: 0.55rem 0.9rem 0.55rem 2.3rem;
}
/* Clock-format segmented control */
.wc-seg .view-toggle-btn { padding: 0.42rem 0.85rem; font-family: 'JetBrains Mono', monospace; }

/* Groups grid — compact packs 3-up; full needs more width so caps at 2-up */
.wc-groups-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 720px)  { .wc-groups-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; } }
@media (min-width: 1080px) { .wc-groups-grid.compact { grid-template-columns: 1fr 1fr 1fr; } }

.wc-group {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.wc-group-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem; color: #fff;
  background: linear-gradient(135deg, #0a0a1a 0%, #14143a 55%, var(--accent) 130%);
}
.wc-group-title { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.3px; }
.wc-group-head-right { display: inline-flex; align-items: center; gap: 0.5rem; }
/* Compact/full table toggle — mobile only (desktop uses the Settings Full/Compact control) */
.wc-grp-view {
  display: none; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  background: rgba(255,255,255,0.15); border: 0; border-radius: 8px; color: #fff; cursor: pointer; transition: background 0.15s;
}
.wc-grp-view .wc-ic { width: 17px; height: 17px; }
.wc-grp-view.is-full { background: rgba(255,255,255,0.3); }
@media (max-width: 719px) { .wc-grp-view { display: inline-flex; } }
.wc-group-tag { font-size: 0.68rem; font-weight: 700; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.5px; }

/* Mini standings table inside a group card */
.wc-mini-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wc-mini { width: 100%; border-collapse: collapse; min-width: max-content; }
.wc-groups-grid.compact .wc-mini { min-width: 0; }
.wc-mini th {
  font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-secondary); padding: 0.5rem 0.3rem; text-align: center; border-bottom: 1px solid var(--border);
}
.wc-mini th.wc-team-col { text-align: start; padding-inline-start: 0.85rem; }
.wc-mini td { padding: 0.55rem 0.3rem; text-align: center; font-size: 0.92rem; border-bottom: 1px solid var(--border); }
.wc-mini tr:last-child td { border-bottom: none; }
.wc-mini .wc-pos { font-family: 'JetBrains Mono', monospace; font-weight: 800; color: var(--text-secondary); width: 1.4rem; }
.wc-mini tr.wc-qual .wc-pos { color: var(--green); }
.wc-mini tr.wc-qual td:first-child { box-shadow: inset 3px 0 0 var(--green); }
/* 3rd place: provisional qualifier (best 8 third-place teams advance), softer green */
.wc-mini tr.wc-qual3 .wc-pos { color: #34D399; }
.wc-mini tr.wc-qual3 td:first-child { box-shadow: inset 3px 0 0 rgba(16,185,129,0.5); }
/* Qualification note card (footer of the Groups page) */
.wc-qual-note {
  margin-top: 1.3rem; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem 1.3rem;
}
.wc-qual-note-head { display: flex; align-items: center; gap: 0.55rem; font-weight: 800; font-size: 1.05rem; color: var(--primary); }
.wc-qual-note-head .wc-ic { color: var(--accent); width: 1.25rem; height: 1.25rem; }
.wc-qual-note-body { margin: 0.55rem 0 0; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; }
.wc-qual-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin-top: 0.85rem; }
.wc-ql { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); }
.wc-ql-dot { width: 0.85rem; height: 0.85rem; border-radius: 999px; display: inline-block; }
.wc-ql-dot.is-top2 { background: var(--green); }
.wc-ql-dot.is-third { background: rgba(16,185,129,0.5); }
.wc-qual-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.wc-qual-share {
  flex: 1 1 45%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.7rem 1rem; border: none; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 0.95rem;
}
.wc-qual-share .wc-ic { width: 1.1rem; height: 1.1rem; }
.wc-qual-share:hover { filter: brightness(1.05); }
.wc-qual-view {
  flex: 1 1 45%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.7rem 1rem; border-radius: 999px; box-sizing: border-box; cursor: pointer;
  background: var(--accent-soft); border: 1px solid var(--accent-muted, var(--border)); color: var(--accent);
  font-weight: 800; font-size: 0.92rem;
}
.wc-qual-view .wc-ic { width: 1.05rem; height: 1.05rem; }
.wc-qual-view:hover { filter: brightness(0.97); }
/* "Who's through" full page (mirrors the share image: by-group table of positions 1-4) */
.wc-qp-head { text-align: center; margin: 0.3rem 0 1rem; }
.wc-qp-title { font-size: 1.5rem; font-weight: 900; margin: 0; color: var(--text); }
.wc-qp-sub { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); margin: 0.25rem 0 0; }
.wc-qp-table { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.wc-qp-colhead, .wc-qp-row { display: grid; grid-template-columns: 2.2rem repeat(4, 1fr); align-items: center; gap: 0.35rem; padding: 0.45rem 0.55rem; }
.wc-qp-colhead { padding-top: 0.65rem; padding-bottom: 0.35rem; }
.wc-qp-ph { text-align: center; font-size: 0.72rem; font-weight: 800; color: var(--text-secondary); }
.wc-qp-row { border-top: 1px solid var(--border); }
.wc-qp-g { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 8px; color: #fff; font-weight: 900; font-size: 0.9rem; }
.wc-qp-cell { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; min-width: 0; }
.wc-qp-flag { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #eee; border: 2px solid var(--card-bg); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.wc-qp-cell.is-top2 .wc-qp-flag { box-shadow: 0 0 0 2px var(--green); }
.wc-qp-cell.is-third .wc-qp-flag { box-shadow: 0 0 0 2px rgba(16,185,129,0.55); }
.wc-qp-cell.is-out { filter: grayscale(1); opacity: 0.42; }
.wc-qp-nm { font-size: 0.66rem; font-weight: 700; text-align: center; line-height: 1.15; max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wc-qp-foot { margin-top: 1.1rem; }
.wc-qp-foot .wc-qual-legend { justify-content: center; margin-top: 0; margin-bottom: 0.9rem; }
.wc-qp-foot .wc-qual-share { width: 100%; flex: none; }

/* Quick links pinned atop the Groups page (Top scorers · Goals by nation) */
.wc-grp-toplinks { display: flex; gap: 0.6rem; margin: 0 0 1.1rem; }
.wc-grp-toplink {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 0.9rem; border-radius: 14px; box-sizing: border-box; text-decoration: none; cursor: pointer;
  background: var(--accent-soft); border: 1px solid var(--accent-muted, var(--border)); color: var(--accent);
  font-weight: 800; font-size: 0.95rem; transition: background 0.15s, color 0.15s, transform 0.1s;
}
.wc-grp-toplink:hover { background: var(--accent); color: #fff; }
.wc-grp-toplink:active { transform: translateY(1px); }
/* The current view's pill: solid, non-interactive */
.wc-grp-toplink.is-current { background: var(--accent); color: #fff; cursor: default; }
.wc-tl-ic { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }

/* "Top scorers" ranked list */
.wc-sl { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.wc-sl-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.85rem; border-top: 1px solid var(--border); }
.wc-sl-row:first-child { border-top: 0; }
.wc-sl-row[data-team] { cursor: pointer; }
.wc-sl-row[data-team]:hover { background: var(--accent-soft); }
.wc-sl-row.is-top { background: var(--accent-soft); }
.wc-sl-rank { flex: 0 0 1.6rem; text-align: center; font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 0.95rem; color: var(--text-secondary); }
.wc-sl-row.is-top .wc-sl-rank { color: var(--accent); }
.wc-sl-flag { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #2a3344; }
.wc-sl-nm { flex: 1; min-width: 0; font-weight: 800; font-size: 0.95rem; color: var(--text); display: flex; align-items: baseline; gap: 0.45rem; }
.wc-sl-pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-sl-pen { flex: 0 0 auto; font-size: 0.7rem; font-weight: 700; color: var(--text-secondary); }
.wc-sl-goals { flex: 0 0 auto; display: flex; align-items: baseline; gap: 0.3rem; }
.wc-sl-goals b { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 1.15rem; color: var(--accent); }
.wc-sl-goals small { font-size: 0.68rem; font-weight: 700; color: var(--text-secondary); }

/* "Goals by nation" board — tiers by goals scored, gold banners (à la the goal graphic) */
.wc-gt-board {
  background: radial-gradient(125% 85% at 50% 0%, #1c2c59 0%, #111d3d 55%, #0a1228 100%);
  border: 1px solid rgba(255,255,255,0.09); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.3rem 0.9rem 1.7rem;
}
.wc-gt-tier { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.55rem; }
.wc-gt-tier:last-child { margin-bottom: 0; }
/* Tier header: a clean accent-blue pill flanked by thin lines (no gold, no ribbon) */
.wc-gt-banner {
  display: flex; align-items: center; justify-content: center; gap: 0.85rem;
  width: 92%; margin: 0.2rem 0 1.15rem;
}
.wc-gt-banner::before, .wc-gt-banner::after {
  content: ""; flex: 1; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(125,170,255,0.5));
}
.wc-gt-banner::after { background: linear-gradient(90deg, rgba(125,170,255,0.5), transparent); }
.wc-gt-banner span {
  flex: 0 0 auto; padding: 0.5rem 1.4rem; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(135deg, #38c2f2 0%, #1573c4 100%);
  color: #fff; font-weight: 900; font-size: 1.05rem; letter-spacing: 0.6px;
  box-shadow: 0 5px 16px rgba(21,115,196,0.5), inset 0 1px 0 rgba(255,255,255,0.35);
}
.wc-gt-total {
  display: inline-block; margin-top: 0.6rem; padding: 0.3rem 0.9rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 0.85rem;
}
.wc-gt-total b { font-family: 'JetBrains Mono', monospace; font-size: 1rem; margin-inline-start: 0.25rem; }
.wc-gt-flags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 0.85rem; max-width: 100%; }
.wc-gt-team { display: flex; flex-direction: column; align-items: center; gap: 0.34rem; width: 64px; cursor: pointer; }
.wc-gt-flag {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #2a3344;
  border: 2px solid rgba(255,255,255,0.3); box-shadow: 0 2px 7px rgba(0,0,0,0.45);
}
.wc-gt-team:hover .wc-gt-flag { border-color: rgba(255,255,255,0.65); }
.wc-gt-nm {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
  color: #eaf0ff; text-align: center; line-height: 1.12; max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wc-qual-ko {
  margin-top: 0.6rem; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.85rem 1rem; border-radius: 14px; box-sizing: border-box;
  background: var(--accent-soft); border: 1px solid var(--accent-muted, var(--border)); color: var(--accent);
  font-weight: 800; font-size: 0.95rem; text-decoration: none; cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.wc-qual-ko .wc-ic { width: 1.15rem; height: 1.15rem; }
.wc-qual-ko:hover { background: var(--accent); color: #fff; }
.wc-qual-ko:active { transform: translateY(1px); }
.wc-team-cell { display: flex; align-items: center; gap: 0.5rem; text-align: start; padding-inline-start: 0.55rem; }
.wc-team-cell .wc-team-name { font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9.5rem; }
.wc-mini .wc-pts { font-family: 'JetBrains Mono', monospace; font-weight: 900; font-size: 1.05rem; color: var(--primary); }
.wc-mini .wc-num { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.wc-mini .wc-mut { color: var(--text-secondary); }
.wc-mini .win { color: var(--green); } .wc-mini .lose { color: var(--live-pulse); }
/* compact mode: hide W/D/L/GF/GA columns, keep P + Pts */
.wc-groups-grid.compact .wc-col-extra { display: none; }

/* Mobile: larger, easier-to-read standings tables (single-column groups have the room) */
@media (max-width: 719px) {
  .wc-mini th { font-size: 0.84rem; padding: 0.7rem 0.35rem; }
  .wc-mini td { font-size: 1.28rem; padding: 0.82rem 0.35rem; }
  .wc-mini .wc-pos { font-size: 1.26rem; width: 1.9rem; }
  .wc-team-cell { gap: 0.7rem; padding-inline-start: 0.7rem; }
  .wc-team-cell .wc-team-name { font-size: 1.28rem; max-width: 13rem; }
  .wc-mini .wc-pts { font-size: 1.7rem; }
  .wc-flag-xs { width: 31px; height: 31px; }
}

/* Flags — circular "national badge" look everywhere */
.wc-flag {
  width: 26px; height: 26px; object-fit: cover; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 1px 3px rgba(0,0,0,0.18); flex-shrink: 0;
  background: #eee;
}
.wc-flag-xs { width: 22px; height: 22px; }

/* Big circular flags inside football.ae-style match cards (size comes from .team-logo) */
.wc-flag-circle {
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18), 0 0 0 1px var(--border);
  background: #eee;
}
.wc-flag-blank { display: inline-block; }

/* Kickoff time as the large centerpiece (where the score sits once played) */
.match-score.wc-kickoff { color: var(--accent); letter-spacing: 0.5px; white-space: nowrap; line-height: 1.05; }
/* Small am/pm word under the time (English only; Arabic uses the مساءً pill instead) */
.wc-kick-mer { font-size: 0.78rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); opacity: 0.85; line-height: 1; margin-top: 2px; }

/* Time-of-day match indicators (timezone-aware) — pill UNDER the time */
.wc-night-capsule { background: #1a1a2e; color: #cdd6ff; }
.wc-dawn-capsule { background: #FEF3E2; color: #C2741A; }
.wc-noon-capsule { background: #E0F2FE; color: #0369A1; }
.wc-eve-capsule { background: #EDE9FE; color: #6D28D9; }
/* Center column: time on top, then am/pm (en), then the time-of-day pill */
.wc-center { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.wc-time-badge-below { margin-top: 6px; }
.wc-time-badge { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-width: 7rem; font-size: 0.68rem; font-weight: 800; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }

/* Keep flag-above-name (mobile look) on ALL widths — overrides football.css desktop row layout */
.match-teams .team, .match-teams .team.away { flex-direction: column; text-align: center; gap: 0.5rem; }
.match-teams .team-name {
  text-align: center; white-space: normal; -webkit-line-clamp: 2;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}

/* Stadium-capacity capsule */
.wc-cap-capsule { background: var(--accent-soft); color: var(--accent); font-weight: 700; font-family: 'JetBrains Mono', monospace; }

/* Add-to-calendar */
.match-card { position: relative; }
.wc-cal-corner {
  position: absolute; top: 0.5rem; inset-inline-end: 0.5rem; z-index: 2;
  width: 32px; height: 32px; border: none; border-radius: 8px; cursor: pointer;
  background: transparent; font-size: 1.1rem; line-height: 1; opacity: 0.85;
  display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.wc-cal-corner:hover { background: var(--accent-soft); opacity: 1; }
.wc-share-corner {
  position: absolute; top: 0.5rem; inset-inline-start: 0.5rem; z-index: 2;
  width: 32px; height: 32px; border: none; border-radius: 8px; cursor: pointer;
  background: transparent; font-size: 1.05rem; line-height: 1; opacity: 0.85;
  display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.wc-share-corner:hover { background: var(--accent-soft); opacity: 1; }

/* Small per-card date (so you always know the day while scrolling) */
.wc-date-capsule { background: var(--bg); color: var(--text-secondary); font-weight: 700; }
.wc-team-actions { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: nowrap; margin-top: 0.95rem; }
.wc-cal-all { display: inline-flex; align-items: center; gap: 0.45rem; }
/* Three equal, labelled actions on the team page: calendar, share link, share image */
.wc-team-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.34rem; min-width: 0;
  font-family: inherit; font-weight: 800; font-size: 0.82rem; line-height: 1;
  color: var(--accent); background: var(--accent-soft); border: 1px solid transparent; border-radius: 999px;
  padding: 0.6rem 0.8rem; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.wc-team-act .wc-ic { width: 1rem; height: 1rem; flex-shrink: 0; }
.wc-team-act:hover { background: var(--accent-muted); color: #fff; transform: translateY(-1px); }
/* Copy-link confirmation toast */
.wc-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 14px);
  z-index: 400; background: var(--primary, #14142b); color: #fff;
  font-weight: 700; font-size: 0.9rem; padding: 0.7rem 1.2rem; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25); opacity: 0; pointer-events: none; transition: all 0.22s ease;
}
.wc-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* "Subscribe to all matches" CTA at the top of the Matches tab */
.wc-sub-all {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; box-sizing: border-box; text-decoration: none;
  font-family: inherit; font-weight: 800; font-size: 0.95rem; color: #fff;
  background: var(--accent); border-radius: 14px; padding: 0.8rem 1rem;
  box-shadow: var(--shadow); transition: background 0.15s, transform 0.15s;
}
.wc-sub-all:hover { background: var(--accent-muted); transform: translateY(-1px); }
.wc-sub-all .wc-ic { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
.wc-sub-hint { margin: 0.45rem 0 1.1rem; font-size: 0.78rem; font-weight: 600; line-height: 1.5; color: var(--text-secondary); text-align: center; }

/* Clickable group label in the card status line → group standings */
/* ── Knockout list/bracket view toggle ── */
/* Eliminated (losing) side of a finished knockout match: dimmed + desaturated flag */
.team.wc-eliminated { opacity: 0.85; }
.team.wc-eliminated .team-logo { filter: grayscale(1); }
/* Penalty shootout: prominent result, with the regular-time score smaller beneath it */
.wc-pens { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.wc-pens-lbl { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-secondary); }
.wc-pens b { font-family: 'JetBrains Mono', monospace; font-size: 1.85rem; font-weight: 900; letter-spacing: 2px; color: var(--text); }
.match-score.wc-score-sub { font-size: 1rem; font-weight: 700; letter-spacing: 1px; color: var(--text-secondary); margin-top: 1px; }
/* Page title with an inline share icon next to it (top scorers) */
.wc-qp-titlerow { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; }
.wc-qp-share { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent); cursor: pointer; transition: all 0.15s; }
.wc-qp-share:hover { background: var(--accent); color: #fff; }
.wc-qp-share .wc-ic { width: 1.1rem; height: 1.1rem; color: currentColor; }
/* Top-scores page header: back on the lead, Players/Teams toggle on the trailing edge */
.wc-score-topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0 0 1rem; }
.wc-score-topbar .wc-back { margin: 0; }
.wc-score-topbar .wc-ko-viewseg { margin: 0; }
.wc-ko-controls { display: flex; align-items: center; gap: 0.6rem; margin: 0.4rem 0 1rem; }
.wc-ko-controls .wc-ko-viewseg { margin: 0; }
.wc-ko-viewseg { display: inline-flex; gap: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px; margin: 0 0 1rem; }
.wc-ko-vbtn {
  font-family: inherit; font-size: 0.85rem; font-weight: 800; color: var(--text-secondary);
  background: none; border: 0; border-radius: 999px; padding: 0.5rem 1.2rem; cursor: pointer; transition: all 0.15s;
}
.wc-ko-vbtn.active { background: var(--accent); color: #fff; box-shadow: var(--shadow); }

/* ── Bracket view ── */
/* Round tabs (move to next round); sticky under the topbar */
.wc-br-tabs {
  display: flex; gap: 0.4rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
  position: sticky; top: var(--topbar-h, 64px); z-index: 6; background: var(--bg);
  padding: 0.5rem 0; margin-bottom: 0.4rem; scrollbar-width: none;
}
.wc-br-tabs::-webkit-scrollbar { display: none; }
.wc-br-tab {
  flex: 0 0 auto; font-family: inherit; font-size: 0.8rem; font-weight: 800; color: var(--text-secondary);
  background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 999px;
  padding: 0.42rem 0.95rem; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.wc-br-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Short round labels on mobile, full labels on wide screens */
.wc-br-tab .br-tab-full { display: none; }
.wc-br-tab .br-tab-short { display: inline; }
@media (min-width: 760px) { .wc-br-tab .br-tab-full { display: inline; } .wc-br-tab .br-tab-short { display: none; } }
.br-round-name { padding: 0 0.2rem 0.4rem; font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; color: var(--primary); }
.br-when { padding: 0.4rem 0.7rem 0; font-size: 0.7rem; font-weight: 800; color: var(--accent); white-space: nowrap; }
.br-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); overflow: hidden;
}
.br-slot { display: flex; align-items: center; gap: 0.55rem; padding: 0.74rem 0.85rem; font-size: 0.98rem; font-weight: 700; color: var(--text); }
.br-slot + .br-slot { border-top: 1px solid var(--border); }
/* Tappable R32 slot → possible-teams popover */
.br-slot-btn { width: 100%; font: inherit; font-weight: 700; text-align: start; background: none; border: 0; cursor: pointer; transition: background 0.15s; }
.br-slot-btn:hover { background: var(--accent-soft); }
.br-slot-btn.is-open { background: var(--accent-soft); color: var(--accent); }
.br-slot-btn .br-dot { border-color: var(--accent); }
.br-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); flex-shrink: 0; }
.br-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* R16 bracket box: each side shows the two possible teams ("A or B") */
.br-slot-pair { flex-direction: column; align-items: stretch; gap: 0.32rem; }
.br-cand { display: flex; align-items: center; gap: 0.5rem; min-width: 0; cursor: pointer; }
.br-cand .wc-slot-flag { width: 20px; height: 20px; flex-shrink: 0; }
.br-cand:hover .br-lbl { color: var(--accent); }
.br-or { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-secondary); opacity: 0.7; text-align: center; }
/* Resolved bracket slot: team + score, winner highlighted, loser dimmed + grayscale flag */
.br-slot .wc-slot-flag { width: 22px; height: 22px; flex-shrink: 0; }
.br-team { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex: 1; cursor: pointer; }
.br-team:hover .br-lbl { color: var(--accent); }
.br-score { font-family: 'JetBrains Mono', monospace; font-weight: 900; flex: 0 0 auto; margin-inline-start: 0.4rem; }
.br-slot.br-won { background: rgba(46,158,79,0.12); }
.br-slot.br-won .br-lbl { font-weight: 900; }
.br-slot.br-won .br-score { color: #2E9E4F; }
.br-slot.br-lost { opacity: 0.5; }
.br-slot.br-lost .wc-slot-flag { filter: grayscale(1); }
.br-pens { padding: 0.15rem 0.85rem 0.35rem; font-size: 0.68rem; font-weight: 700; color: var(--text-secondary); text-align: center; }
.br-line { fill: none; stroke: #aab3c2; stroke-opacity: 1; stroke-width: 2.5; }

/* Connected bracket (all widths): horizontally-scrollable columns with elbow connectors */
.wc-bracket-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 1rem; }
.wc-bracket { position: relative; display: flex; align-items: stretch; gap: 0; min-width: max-content; }
.br-round { min-width: 212px; padding: 0 0.6rem; display: flex; flex-direction: column; justify-content: space-around; position: relative; z-index: 1; }
.br-match { flex: 0 0 auto; padding: 0.4rem 0; }
.br-svg { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
/* Wider columns on desktop so the tree fills the space */
@media (min-width: 760px) {
  .br-round { min-width: 300px; padding: 0 1rem; }
  .br-slot { font-size: 1.05rem; padding: 0.82rem 1rem; }
  .br-when { font-size: 0.74rem; padding: 0.5rem 0.85rem 0; }
  /* In bracket view the knockout column widens to the full container; the bracket itself is
     centred to the settings-row width via JS (margin-inline auto), so no overflow in LTR or RTL. */
  .wc-narrow.wc-ko-wide { max-width: 100%; }
}

.wc-group-link-inline {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;
}
.wc-group-link-inline:hover { text-decoration-style: solid; }
/* Group title coloured with that group's colour (see GROUP_COLOR), no background */
.wc-group-pill {
  text-decoration: none; padding: 3px 2px; font-weight: 800;
  color: var(--g, var(--accent)); background: none;
}
.wc-group-pill:hover { text-decoration: underline; text-underline-offset: 3px; }
.wc-group-flash { animation: wc-group-flash 1.6s ease; }
@keyframes wc-group-flash { 0%, 100% { box-shadow: var(--shadow); } 25% { box-shadow: 0 0 0 3px var(--accent); } }

/* Live pulse dot in the card status line */
.wc-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--live-pulse);
  display: inline-block; animation: wc-pulse 1.2s ease-in-out infinite;
}
@keyframes wc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Group card → "View matches" link (replaces the old inline fixtures list) */
.wc-group-foot { display: flex; align-items: stretch; border-top: 1px solid var(--border); }
.wc-group-link {
  flex: 1; background: none; border: none;
  cursor: pointer; font-family: inherit; padding: 0.7rem 1rem;
  font-size: 0.8rem; font-weight: 800; color: var(--accent); letter-spacing: 0.2px;
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  transition: background 0.15s;
}
.wc-group-link:hover { background: var(--accent-soft); }
.wc-group-link .wc-arrow { font-size: 1.05rem; line-height: 1; }
.wc-group-share-foot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; flex-shrink: 0; border: none; border-inline-start: 1px solid var(--border);
  background: none; color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.wc-group-share-foot:hover { background: var(--accent-soft); color: var(--accent); }
.wc-group-share-foot .wc-ic { width: 19px; height: 19px; vertical-align: 0; }

/* Calendar (month grid) toggle + grid */
.wc-cal-toggle {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 0.85rem; font-weight: 800; color: var(--text);
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
  padding: 0.65rem 1rem; cursor: pointer; box-shadow: var(--shadow); margin-bottom: 0.7rem;
  transition: border-color 0.15s;
}
.wc-cal-toggle:hover { border-color: var(--accent-muted); }
.wc-cal-toggle .wc-settings-caret { margin-inline-start: auto; transition: transform 0.2s; }
.wc-cal-toggle.open .wc-settings-caret { transform: rotate(180deg); }
.wc-cal {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow); padding: 1rem; margin-bottom: 1rem;
}
.wc-cal-month + .wc-cal-month { margin-top: 1.1rem; }
.wc-cal-mname { text-align: center; font-weight: 800; font-size: 1.05rem; color: var(--primary); margin-bottom: 0.6rem; }
.wc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wc-cal-wd { text-align: center; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; color: var(--text-secondary); padding-bottom: 4px; }
.wc-cal-day {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 10px; font-weight: 700; line-height: 1;
}
.wc-cal-day.empty { visibility: hidden; }
.wc-cal-day.nomatch { color: var(--text-secondary); opacity: 0.4; }
.wc-cal-day.match { background: var(--accent-soft); color: var(--accent); cursor: pointer; }
.wc-cal-day.match:hover { background: var(--accent); color: #fff; }
.wc-cal-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.wc-cal-num { font-size: 0.92rem; font-weight: 800; }
.wc-cal-cnt { font-size: 0.6rem; font-weight: 700; margin-top: 2px; opacity: 0.85; }

/* Schedule group-filter chip bar */
.wc-filter-bar {
  display: flex; gap: 0.4rem; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem; margin-bottom: 0.4rem; scrollbar-width: none;
}
.wc-filter-bar::-webkit-scrollbar { display: none; }
.wc-filter-chip {
  flex: 0 0 auto; font-family: inherit; font-size: 0.85rem; font-weight: 800;
  color: var(--text-secondary); background: var(--card-bg);
  border: 1.5px solid var(--border); border-radius: 999px;
  padding: 0.42rem 0.95rem; cursor: pointer; min-width: 2.4rem; text-align: center;
  transition: all 0.15s;
}
.wc-filter-chip:hover { border-color: var(--accent-muted); color: var(--text); }
.wc-filter-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Time-of-day filter chips (Matches page) */
.wc-time-filter { margin-bottom: 0.6rem; }
.wc-tf-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: inherit; font-size: 0.82rem; font-weight: 800; color: var(--text-secondary);
  background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 999px;
  padding: 0.42rem 0.7rem 0.42rem 0.85rem; cursor: pointer; transition: all 0.15s;
}
[dir="rtl"] .wc-tf-chip { padding: 0.42rem 0.85rem 0.42rem 0.7rem; }
.wc-tf-chip .wc-ic { width: 1rem; height: 1rem; flex-shrink: 0; }
.wc-tf-chip.morning .wc-ic { color: #C2741A; }
.wc-tf-chip.afternoon .wc-ic { color: #0369A1; }
.wc-tf-chip.evening .wc-ic { color: #6D28D9; }
.wc-tf-chip.night .wc-ic { color: #334155; }
.wc-tf-cnt {
  font-family: 'JetBrains Mono', monospace; font-weight: 900; font-size: 0.74rem;
  background: var(--bg); border-radius: 999px; padding: 1px 8px; min-width: 1.4rem; text-align: center;
}
.wc-tf-chip:hover:not(.active) { border-color: var(--accent-muted); color: var(--text); }
.wc-tf-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.wc-tf-chip.active .wc-ic { color: #fff; }
.wc-tf-chip.active .wc-tf-cnt { background: rgba(255,255,255,0.25); color: #fff; }
.wc-tf-chip.all { padding-left: 0.95rem; padding-right: 0.95rem; }
.wc-tf-chip.empty { opacity: 0.4; cursor: default; }
.wc-tf-chip.empty:hover { border-color: var(--border); color: var(--text-secondary); }

/* Status filter row (Upcoming · Live · Finished) */
.wc-status-filter { margin-bottom: 0.6rem; }
.wc-tf-chip.wc-st-upcoming .wc-ic { color: var(--accent); }
.wc-tf-chip.wc-st-finished .wc-ic { color: #1F9D55; }
/* Live chip: a small red dot stands in for an icon; pulses gently */
.wc-tf-chip.wc-st-live .wc-tf-lbl::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px;
  border-radius: 50%; background: #E0245E; vertical-align: middle; animation: wc-live-pulse 1.4s ease-in-out infinite;
}
.wc-tf-chip.wc-st-live.active { background: #E0245E; border-color: #E0245E; }
.wc-tf-chip.wc-st-live.active .wc-tf-lbl::before { background: #fff; }
.wc-tf-chip.wc-st-finished.active { background: #1F9D55; border-color: #1F9D55; }
@keyframes wc-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Match status capsules: green for finished, red for live (the group label stays plain text after) */
.wc-status-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  border-radius: 999px; padding: 3px 11px; font-weight: 800; letter-spacing: 0.3px;
}
.wc-pill-ft { background: rgba(31,157,85,0.13); color: #1F9D55; }
/* Finished card gets a soft green 1px border to tie it to the green FT capsule */
.match-card.is-done { border-color: rgba(31,157,85,0.45); }
/* Live / FT badge pinned to the top-trailing corner; smaller than the centred pills */
.wc-st-corner {
  position: absolute; top: 0.6rem; inset-inline-end: 0.6rem; z-index: 2;
  font-size: 0.66rem; padding: 2px 8px; gap: 0.25rem;
}
.wc-st-corner .wc-ft-check { width: 0.8rem; height: 0.8rem; }
.wc-st-corner .wc-live-dot { width: 6px; height: 6px; }
.wc-pill-live { background: rgba(224,36,94,0.13); color: #E0245E; }
.wc-pill-live .wc-live-dot { background: currentColor; }

/* Match status as a folded-down paper corner at the trailing-top (FT = green, LIVE = red).
   The flap is a gradient triangle so the outer corner can round (via overflow + radius) like the card. */
/* Goal scorers under a live/finished match: home on the leading side, away on the trailing side */
.wc-scorers {
  display: flex; justify-content: space-between; gap: 0.75rem;
  margin-top: 0.65rem; padding-top: 0.6rem; border-top: 1px solid var(--border);
}
.wc-sc-side { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.wc-sc-home { align-items: flex-start; text-align: start; }
.wc-sc-away { align-items: flex-end; text-align: end; margin-inline-start: auto; }
.wc-goal { display: inline-flex; align-items: center; gap: 0.32rem; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; max-width: 100%; }
.wc-goal-nm { overflow: hidden; text-overflow: ellipsis; }
.wc-goal b { font-family: 'JetBrains Mono', monospace; font-weight: 800; color: var(--text); }
.wc-goal i { font-style: normal; opacity: 0.75; font-size: 0.72rem; }
.wc-goal-ic { width: 0.85rem; height: 0.85rem; flex: 0 0 auto; opacity: 0.65; color: var(--accent); }
/* Keep the minute next to the ball icon on both sides so names align in a clean column.
   Home reads: icon · minute · name. Away mirrors: name · minute · icon. (order works in LTR + RTL) */
.wc-sc-home .wc-goal-ic { order: 0; } .wc-sc-home .wc-goal b { order: 1; } .wc-sc-home .wc-goal-nm { order: 2; } .wc-sc-home .wc-goal i { order: 3; }
/* away: name · (tag) · minute · icon — tag stays right after the name */
.wc-sc-away .wc-goal-nm { order: 0; } .wc-sc-away .wc-goal i { order: 1; } .wc-sc-away .wc-goal b { order: 2; } .wc-sc-away .wc-goal-ic { order: 3; }
/* shown when goals exist but scorer names aren't in the feed yet */
.wc-scorers-pending { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px solid var(--border); font-size: 0.76rem; font-weight: 600; color: var(--text-secondary); }
.wc-scorers-pending .wc-goal-ic { width: 0.85rem; height: 0.85rem; opacity: 0.6; color: var(--accent); }
/* own goal: red ball + red tag (lighter red on dark for contrast) */
.wc-goal.is-og .wc-goal-ic { color: #d62839; opacity: 1; }
.wc-goal.is-og i { color: #d62839; opacity: 1; }
html[data-theme="dark"] .wc-goal.is-og .wc-goal-ic,
html[data-theme="dark"] .wc-goal.is-og i { color: #ff6b7e; }

.wc-corner-fold {
  position: absolute; top: 0; inset-inline-end: 0; z-index: 3; pointer-events: none;
  width: 3.5rem; height: 3.5rem; overflow: hidden;
  border-start-end-radius: var(--radius);   /* outer corner matches the card */
  filter: drop-shadow(-2px 2px 2px rgba(0,0,0,0.28));
}
.wc-corner-fold.is-ft { background: linear-gradient(45deg, transparent 49.5%, #0b6c39 50%, #27b568 100%); }
.wc-corner-fold.is-live { background: linear-gradient(45deg, transparent 49.5%, #b3122b 50%, #ff4d63 100%); animation: wc-fold-pulse 1.5s ease-in-out infinite; }
.wc-fold-txt {   /* centred on the triangle's centroid (~2/3 across, 1/3 down) */
  position: absolute; left: 66%; top: 33%; transform: translate(-50%, -50%) rotate(45deg);
  color: #fff; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.3px; white-space: nowrap;
}
.wc-corner-fold.is-live .wc-fold-txt { font-size: 0.5rem; letter-spacing: 0.2px; }
[dir="rtl"] .wc-corner-fold { filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.28)); }
[dir="rtl"] .wc-corner-fold.is-ft { background: linear-gradient(135deg, #27b568 0%, #0b6c39 50%, transparent 50.5%); }
[dir="rtl"] .wc-corner-fold.is-live { background: linear-gradient(135deg, #ff4d63 0%, #b3122b 50%, transparent 50.5%); }
[dir="rtl"] .wc-fold-txt { left: 34%; transform: translate(-50%, -50%) rotate(-45deg); }
@keyframes wc-fold-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .wc-corner-fold.is-live { animation: none; } }
.wc-ft-check { width: 0.9rem; height: 0.9rem; stroke-width: 3; color: currentColor; }

/* Tap the winner's flag (on the country page) to celebrate: confetti + winner badge inside the card */
.wc-won-card [data-celebrate-win] { cursor: pointer; }
.wc-won-card [data-celebrate-win] .team-logo { box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 5px #C9A227; }
.wc-confetti {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 6;
  border-radius: var(--radius);
}
.wc-confetti i {
  position: absolute; top: -18px; width: 8px; height: 13px; border-radius: 2px; opacity: 0;
  animation-name: wc-confetti-fall; animation-timing-function: cubic-bezier(0.3, 0.6, 0.5, 1);
  animation-fill-mode: forwards;
}
@keyframes wc-confetti-fall {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  12% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate(var(--drift, 0), 230px) rotate(calc(var(--rot, 180deg) + 540deg)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wc-confetti i { animation-duration: 0.01ms; } }

/* "Show finished matches" toggle — collapses past days so the tab opens on today + upcoming */
.wc-show-past {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem; width: 100%;
  font-family: inherit; font-size: 0.85rem; font-weight: 800; color: var(--text-secondary);
  background: var(--card-bg); border: 1.5px dashed var(--border); border-radius: 14px;
  padding: 0.7rem 1rem; margin-bottom: 1rem; cursor: pointer; transition: all 0.15s;
}
.wc-show-past .wc-ic { width: 1rem; height: 1rem; stroke-width: 2.6; color: #1F9D55; }
.wc-show-past:hover { border-color: var(--accent-muted); color: var(--text); background: var(--bg); }
.wc-show-past.is-open { border-style: solid; }

/* Keep the "All" chip pinned to the start of each bar while the chips scroll horizontally */
.wc-tf-chip.all,
.wc-filter-bar:not(.wc-time-filter) > .wc-filter-chip:first-child {
  position: sticky; inset-inline-start: 0; z-index: 2;
}
/* solid mask covering the inter-chip gap so chips vanish cleanly behind the pinned All chip */
.wc-tf-chip.all::after,
.wc-filter-bar:not(.wc-time-filter) > .wc-filter-chip:first-child::after {
  content: ''; position: absolute; top: -2px; bottom: -2px; inset-inline-start: 100%;
  width: 0.45rem; background: var(--bg); pointer-events: none;
  box-shadow: 3px 0 6px -1px rgba(0, 0, 0, 0.13);
}
[dir="rtl"] .wc-tf-chip.all::after,
[dir="rtl"] .wc-filter-bar:not(.wc-time-filter) > .wc-filter-chip:first-child::after {
  box-shadow: -3px 0 6px -1px rgba(0, 0, 0, 0.13);
}

/* Schedule day grouping — flat full-width bar that STICKS under the nav while you scroll it */
.wc-day-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
  margin: 1.5rem 0 0.7rem; padding: 0.8rem 0.9rem;
  background: linear-gradient(135deg, #e9f1fb, #f5f8fc);
  border: 1px solid var(--border); border-radius: 0;
  position: sticky; top: var(--topbar-h, 64px); z-index: 5;
}
.wc-day-main { font-size: 1.2rem; font-weight: 800; color: var(--primary); letter-spacing: -0.3px; }
.wc-day-card-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
/* Share-the-day's-matches icon in the day header */
.wc-day-share {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer;
  background: var(--card-bg); color: var(--text-secondary); transition: all 0.15s;
}
.wc-day-share:hover { background: var(--accent-soft); border-color: var(--accent-muted); color: var(--accent); }
.wc-day-share .wc-ic { width: 17px; height: 17px; }
.wc-day-rel { font-size: 0.74rem; font-weight: 600; color: var(--text-secondary); background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; white-space: nowrap; }
.wc-day-count-pill { font-size: 0.74rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 11px; white-space: nowrap; }
.wc-day-tbd { justify-content: flex-start; }
@media (min-width: 640px) { .wc-day-main { font-size: 1.4rem; } }
/* Mobile: full-bleed band, edge to edge of the screen */
@media (max-width: 639px) {
  .wc-day-head { width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: 1rem; border-inline: 0; }
}
.wc-sched-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow); margin-bottom: 0.7rem; padding: 0.4rem 0.9rem 0.7rem;
}

/* Knockout */
.wc-stage { margin-bottom: 1.6rem; }
.wc-stage-title {
  font-size: 1.15rem; font-weight: 800; color: var(--primary); margin-bottom: 0.8rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.wc-stage-pending {
  background: var(--card-bg); border: 1px dashed var(--border); border-radius: 16px;
  padding: 1.3rem; text-align: center; color: var(--text-secondary); font-weight: 600; font-size: 0.9rem;
}

/* ─── Knockout roadmap ─── */
.wc-ko-intro { margin: 0.4rem 0 1rem; }
.wc-ko-h { display: flex; align-items: center; gap: 0.55rem; font-size: 1.3rem; font-weight: 800; color: var(--primary); letter-spacing: -0.3px; }
.wc-ko-h .wc-ic { width: 1.4rem; height: 1.4rem; color: #C9A227; }
.wc-ko-share {
  margin-inline-start: auto; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); cursor: pointer; transition: all 0.15s;
}
.wc-ko-share:hover { background: var(--accent-muted); color: #fff; }
.wc-ko-share .wc-ic { width: 1.1rem; height: 1.1rem; color: currentColor; }
.wc-ko-sub { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; margin-top: 0.4rem; }
/* ─── Stage cards — each knockout round in its own section ─── */
.wc-ko-stages { display: flex; flex-direction: column; gap: 1rem; }
/* No overflow:hidden here — it would break the sticky header below. The header's own
   rounded top corners give the card its rounded look instead. */
.wc-ko-stage { background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.wc-ko-stage-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1.15rem; color: #fff;
  background: linear-gradient(115deg, #0a0a1a 0%, #16163a 42%, var(--ko-accent, var(--accent)) 135%);
  border-radius: 17px 17px 0 0;
  position: sticky; top: var(--topbar-h, 64px); z-index: 4;
}
.wc-ko-stage.is-final .wc-ko-stage-head { background: linear-gradient(115deg, #3a2d00 0%, #7c6210 48%, #c9a227 130%); }
/* Grouped R32: the "Round of 32" banner stays sticky on top; each day header sticks just below it.
   --ko-head-h is the banner's measured height, set in render(). */
.wc-ko-day {
  position: sticky; top: calc(var(--topbar-h, 64px) + var(--ko-head-h, 4.4rem)); z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  margin: 0 -1.15rem; padding: 0.6rem 1.15rem;
  background: #eceef1; border-bottom: 1px solid var(--border);
}
.wc-ko-day-d { font-size: 1rem; font-weight: 800; color: var(--primary); }
.wc-ko-day-rel { margin-inline-start: auto; font-size: 0.74rem; font-weight: 700; color: var(--text-secondary); }
.wc-ko-day-n { font-size: 0.72rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 9px; }
/* Grouped R32: match-card-styled fixtures sit in the day list, first one clears the sticky header */
.wc-ko-fxlist { padding-top: 0.7rem; }
.wc-ko-fxlist .match-card:last-child { margin-bottom: 0.15rem; }
.wc-ko-stage.is-grouped .wc-ko-fxcard .match-status { color: var(--ko-accent, var(--accent)); }
/* R16 card: each side shows the two possible teams ("A or B") with circular flags */
.wc-ko-pair { gap: 0.4rem; }
.wc-ko-cand { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; min-width: 0; max-width: 100%; cursor: pointer; }
.wc-ko-pair .team-logo { width: 44px; height: 44px; }
.wc-ko-pair .team-name { font-size: 0.92rem; -webkit-line-clamp: 1; }
.wc-ko-or { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-secondary); opacity: 0.85; }
/* A side whose feeding match is decided: show just the winner, a touch larger (a confirmed team) */
.wc-ko-decided .team-logo { width: 56px; height: 56px; }
.wc-ko-decided .team-name { font-size: 1.02rem; }
/* Finished knockout card → tappable "next round" panel (who the winner will/may play next) */
.wc-next { margin-top: 0.7rem; border-top: 1px dashed var(--border); padding-top: 0.55rem; }
.wc-next-link { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 0.84rem; color: var(--accent); }
.wc-next-link .wc-nr-ic { width: 1rem; height: 1rem; flex: 0 0 auto; }
.wc-next-card { display: none; margin-top: 0.55rem; padding: 0.6rem 0.7rem; background: var(--accent-soft); border-radius: 12px; }
.wc-next.is-open .wc-next-card { display: block; }
.wc-next-when { text-align: center; font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 0.5rem; }
.wc-next-teams { display: flex; align-items: center; justify-content: center; gap: 0.55rem; flex-wrap: wrap; }
.wc-nr-team { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; font-weight: 800; font-size: 0.9rem; color: var(--text); }
.wc-nr-team:hover .wc-nr-nm { color: var(--accent); }
.wc-nr-flag { width: 24px; height: 24px; flex: 0 0 auto; }
.wc-nr-pair { display: inline-flex; align-items: center; gap: 0.4rem; }
.wc-nr-or, .wc-nr-vs { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-secondary); }
.wc-nr-vs { color: var(--accent); }
.wc-nr-tbd { font-weight: 800; color: var(--text-secondary); }
.wc-ko-stage-title { min-width: 0; }
.wc-ko-stage-name { display: block; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.2px; }
.wc-ko-stage-range { display: block; font-size: 0.78rem; font-weight: 600; opacity: 0.85; margin-top: 2px; }
.wc-ko-stage-badge {
  flex-shrink: 0; display: inline-flex; flex-direction: column; align-items: center; line-height: 1; text-align: center;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.22); border-radius: 14px;
  padding: 0.42rem 0.7rem; min-width: 3.4rem;
}
.wc-ko-stage-num { font-family: 'JetBrains Mono', monospace; font-size: 1.75rem; font-weight: 900; }
.wc-ko-stage-w { font-size: 0.57rem; font-weight: 700; opacity: 0.88; margin-top: 3px; }
.wc-ko-stage-body { padding: 0.25rem 1.15rem 0.55rem; }
.wc-ko-m { padding: 1.05rem 0; text-align: center; }
.wc-ko-m + .wc-ko-m { border-top: 1px solid var(--border); }
.wc-ko-m-solo { padding-top: 0.85rem; }
.wc-ko-m-top { display: flex; align-items: baseline; justify-content: center; gap: 0.6rem; }
.wc-ko-m-no { font-weight: 800; font-size: 1.1rem; color: var(--ko-accent, var(--accent)); }
.wc-ko-m-date { font-weight: 800; font-size: 1.1rem; color: var(--primary); }
.wc-ko-m-time { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 1.1rem; color: var(--ko-accent, var(--accent)); }
.wc-ko-m-venue { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.35rem; margin-top: 9px; font-size: 0.95rem; font-weight: 500; color: var(--text-secondary); }
.wc-ko-m-venue .wc-ic { width: 0.98rem; height: 0.98rem; flex-shrink: 0; color: var(--ko-accent, var(--accent)); }
/* Matchup: two capsule pills sitting close together, centered, with "vs" between */
.wc-ko-fx-teams { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.45rem; margin-top: 9px; padding: 0.45rem 0; }
.wc-ko-fx-slot {
  flex: 0 1 auto; min-width: 0; font-family: inherit; font-weight: 800; font-size: 0.9rem; line-height: 1.2;
  color: var(--accent); background: var(--accent-soft); border: 0; border-radius: 999px; padding: 0.6rem 1rem;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
/* current occupant flag inside an R32 slot (winner/runner-up by live standings) */
.wc-slot-flag { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #2a3344; }
.br-slot-btn .wc-slot-flag { width: 22px; height: 22px; }
.wc-ko-flagsnote {
  display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.9rem; padding: 0.55rem 0.85rem;
  background: var(--accent-soft); border-radius: 12px; color: var(--text-secondary);
  font-size: 0.82rem; font-weight: 600; line-height: 1.35;
}
.wc-ko-flagsnote .wc-ic { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--accent); }
.wc-ko-fx-slot:hover { background: var(--accent-muted); color: #fff; }
.wc-ko-fx-slot.is-open { background: var(--accent); color: #fff; }
.wc-ko-fx-vs { flex: 0 0 auto; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); }
/* Candidate-teams popover for a pre-draw slot */
.wc-pop {
  position: absolute; z-index: 200; box-sizing: border-box;
  background: var(--card-bg); border: 2px solid var(--accent); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.wc-cand-pop { width: min(360px, calc(100vw - 16px)); max-height: 62vh; overflow-y: auto; padding: 0.7rem 0.85rem; }
/* Header day-jump dropdown (Today / Yesterday) */
.wc-daymenu-pop { border-width: 1px; border-color: var(--border); padding: 6px; }
.wc-daymenu { display: flex; flex-direction: column; min-width: 210px; }
.wc-daymenu-item {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  font-family: inherit; font-size: 0.92rem; font-weight: 700; color: var(--text);
  background: none; border: 0; border-radius: 10px; padding: 0.6rem 0.7rem; cursor: pointer;
  text-align: start; transition: background 0.15s;
}
.wc-daymenu-item .wc-ic { width: 1.1rem; height: 1.1rem; color: var(--accent); flex-shrink: 0; }
.wc-daymenu-lbl { flex: 1; }
.wc-daymenu-cnt { font-size: 0.72rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.wc-daymenu-item:hover:not(.is-empty) { background: var(--accent-soft); }
.wc-daymenu-item.is-empty { opacity: 0.55; cursor: default; }
.wc-daymenu-item.is-empty .wc-daymenu-cnt { background: var(--bg); color: var(--text-secondary); }
.wc-daymenu-settings { margin-top: 4px; padding-top: 0.7rem; border-top: 1px solid var(--border); }
.wc-daymenu-settings .wc-ic { color: var(--text-secondary); }
/* Match time → host-city local time popover */
.wc-time-pop { width: max-content; max-width: calc(100vw - 16px); padding: 0.7rem 1rem; text-align: center; }
.wc-tp-cap { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); }
.wc-tp-cap .wc-ic { width: 0.95rem; height: 0.95rem; color: var(--accent); flex-shrink: 0; }
.wc-tp-time { display: flex; align-items: baseline; justify-content: center; gap: 0.18em; font-weight: 900; font-size: 1.9rem; color: var(--accent); margin-top: 5px; }
.wc-tp-hm { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.5px; }
.wc-tp-mer { font-size: 0.5em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.wc-tp-date { font-size: 0.98rem; font-weight: 700; color: var(--text); margin-top: 3px; }
/* The kickoff time is tappable → opens the local-time popover */
.wc-time-btn { background: none; border: 0; cursor: pointer; padding: 1px 9px; border-radius: 12px; transition: background 0.15s; }
.wc-time-btn:hover, .wc-time-btn.is-open { background: var(--accent-soft); }
.wc-cand-title { font-weight: 900; font-size: 0.9rem; color: var(--accent); margin-bottom: 0.5rem; }
.wc-cand-grp + .wc-cand-grp { margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid var(--border); }
.wc-cand-gl { display: block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 0.4rem; }
.wc-cand-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 0.7rem; }
.wc-cand-team { display: flex; align-items: center; gap: 0.45rem; min-width: 0; font-weight: 700; font-size: 0.86rem; line-height: 1.2; color: var(--text); }
.wc-cand-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-cand-flag { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; box-shadow: 0 0 0 1px var(--border); }
/* the team currently in this slot's place ("so far") */
.wc-cand-team.is-current { color: var(--accent); font-weight: 800; }
.wc-cand-team.is-current .wc-cand-flag { box-shadow: 0 0 0 2px var(--accent); }
.wc-cand-now { flex: 0 0 auto; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; color: #fff; background: var(--accent); border-radius: 999px; padding: 0.05rem 0.4rem; }
.wc-ko-flag { width: 16px; height: 16px; }
.wc-ko-cap { display: inline-flex; align-items: center; gap: 0.22rem; color: var(--text-secondary); font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.wc-ko-cap .wc-ic { width: 0.9rem; height: 0.9rem; }

/* ─── توقعاتي / Predictions page ─── */
.wc-predict-field { margin: 0.2rem 0 1.1rem; }
.wc-predict-label { display: block; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary); margin-bottom: 0.45rem; }
.wc-predict-input {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 1.05rem; font-weight: 700;
  padding: 0.75rem 1rem; border: 1.5px solid var(--border); border-radius: 14px; background: var(--card-bg); color: var(--text);
}
.wc-predict-input:focus { outline: none; border-color: var(--accent); }
.wc-predict-slots { display: flex; flex-direction: column; gap: 0.55rem; }
.wc-predict-locked {
  display: flex; align-items: center; gap: 0.4rem; justify-content: center; text-align: center;
  background: #fff4e0; border: 1px solid #f0d9a8; color: #8a6d10; font-weight: 700; font-size: 0.85rem;
  border-radius: 12px; padding: 0.7rem 0.9rem; margin-bottom: 1rem; line-height: 1.4;
}
.wc-predict-note {
  margin: 0.85rem 0 0; font-size: 0.78rem; font-weight: 600; line-height: 1.5;
  color: var(--text-secondary); text-align: center;
}
.wc-predict-slot {
  display: flex; align-items: center; gap: 0.6rem; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 14px; padding: 0.5rem 0.7rem; box-shadow: var(--shadow);
}
.wc-predict-slot.is-champion { border-color: #e6c558; background: linear-gradient(120deg, rgba(201,162,39,0.08), transparent 60%); }
.wc-predict-rank {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 900;
  font-family: 'JetBrains Mono', monospace; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center;
}
.wc-predict-flag { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--border); }
.wc-predict-flag-empty { border-color: #fff; box-shadow: 0 0 0 1.5px var(--border); background: repeating-linear-gradient(45deg, #eef1f6, #eef1f6 5px, #e3e7ee 5px, #e3e7ee 10px); }
.wc-predict-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wc-predict-pos { display: inline-flex; align-items: center; gap: 0.28rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); }
.wc-predict-pos .wc-ic { width: 0.85rem; height: 0.85rem; }
.is-champion .wc-predict-pos { color: #C9A227; }
.wc-predict-select {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 1rem; font-weight: 700; color: var(--text);
  padding: 0.55rem 0.6rem; border: 1.5px solid var(--border); border-radius: 10px; background: var(--card-bg); cursor: pointer;
}
.wc-predict-select:focus { outline: none; border-color: var(--accent); }
.wc-predict-input:disabled, .wc-predict-select:disabled { opacity: 0.7; cursor: not-allowed; background: var(--bg); }
.wc-predict-share {
  margin-top: 1.15rem; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: inherit; font-weight: 800; font-size: 1rem; color: #fff; background: var(--accent);
  border: none; border-radius: 999px; padding: 0.85rem 1.3rem; cursor: pointer; box-shadow: var(--shadow); transition: all 0.15s;
}
.wc-predict-share:disabled { background: var(--border); color: var(--text-secondary); cursor: not-allowed; box-shadow: none; }
.wc-predict-share:not(:disabled):hover { background: var(--accent-muted); transform: translateY(-1px); }
.wc-predict-share .wc-ic { width: 1.1rem; height: 1.1rem; }
.wc-predict-hint { text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); margin-top: 0.6rem; }

/* Loading / errors */
.wc-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.1rem; padding: 5rem 1rem; min-height: 40vh; text-align: center;
}
.wc-load-brand {
  font-size: 2.1rem; font-weight: 900; letter-spacing: -0.5px; color: var(--primary);
  animation: wc-load-pulse 1.6s ease-in-out infinite;
}
.wc-load-brand span { color: var(--accent); }
.wc-load-bar {
  width: 150px; height: 4px; border-radius: 999px; overflow: hidden;
  background: var(--border);
}
.wc-load-bar i {
  display: block; width: 40%; height: 100%; border-radius: 999px;
  background: var(--accent); animation: wc-load-slide 1.15s ease-in-out infinite;
}
@keyframes wc-load-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } }
@keyframes wc-load-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .wc-load-brand { animation: none; } .wc-load-bar i { animation-duration: 2s; } }

/* RTL niceties */
html[dir="rtl"] .wc-mini th.wc-team-col { text-align: right; }
html[dir="rtl"] .wc-fix .wc-side.home { justify-content: flex-start; text-align: start; }
html[dir="rtl"] .wc-fix .wc-side.away { justify-content: flex-end; text-align: end; }