/* =========================================
   AGGELIOFORUM CLEAN CSS V0.2
   Mobile-first / Blue identity / Anti-entropy
========================================= */
/* Terry was meant to be part of this journey */

/* =========================================
   RESET / BASE
========================================= */

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

html,
body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

html {
  background: #091220;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;

  background:
    linear-gradient(
      to bottom,
      #020b1b,
      #152033,
      #1a2740
    );

  color: #eef4ff;
}

/* =========================================
   THEME VARIABLES
========================================= */

:root {
  --bg-main: #020b1b;
  --bg-soft: #162133;
  --bg-card: rgba(22, 33, 51, 0.88);
  --bg-card-hover: rgba(28, 43, 66, 0.98);

  --text-main: #eef4ff;
  --text-soft: #d4deef;
  --text-muted: #aebdd4;

  --link-color: #9fc4ff;
  --link-hover: #d7e7ff;

  --border-soft: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.22);

  --radius-small: 6px;
  --radius-medium: 10px;

  --container-mobile: 94%;
  --container-desktop: min(99%, 1820px);
}

/* =========================================
   CONTAINER / MAIN FLOW
========================================= */

.container {
  width: var(--container-mobile);
  max-width: var(--container-mobile);
  margin: 0 auto;
}

main.container {
  flex: 1;
}

main.container > .block {
  margin-top: 16px;
}

/* =========================================
   GLOBAL TEXT
========================================= */

h1,
h2,
h3 {
  color: var(--text-main);
  line-height: 1.25;
}

p,
li,
span {
  color: var(--text-soft);
}

p {
  margin-top: 6px;
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.section-note,
.story-meta,
.thread-meta,
.score-date,
.sun-times,
.date {
  color: var(--text-muted);
}

/* =========================================
   HEADER / NAV
========================================= */

header {
  background: #020b1b;
  border-bottom: 1px solid var(--border-soft);
  padding: 10px 0;
  position: relative;
  z-index: 50;
}

header .container {
  width: var(--container-mobile);
  max-width: var(--container-mobile);
}

nav {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.logo {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
}

.logo a {
  display: flex;
  align-items: center;
}

.logo img {
  height: 44px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
  display: block;
}

.header-actions {
  grid-column: 2;
  grid-row: 1;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  width: 100%;
  min-width: 0;
}

.search-icon {
  display: none;
}

.search-input {
  display: block;
  flex: 1;
  min-width: 0;
  width: auto;
  max-width: 100%;

  padding: 7px 10px;
  border-radius: var(--radius-small);

  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-soft);
  color: var(--text-main);

  font-size: 0.9rem;
}

.search-input::placeholder {
  color: var(--text-muted);
}

.menu-toggle {
  flex-shrink: 0;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-main);
  padding: 4px 6px;
}

.nav-links {
  grid-column: 1 / -1;
  grid-row: 2;

  display: none;
  width: 100%;

  margin-top: 8px;
  padding: 8px 0;

  list-style: none;

  background: rgba(18, 28, 43, 0.98);
  border-top: 1px solid var(--border-soft);
}

.nav-links.active {
  display: flex;
  flex-direction: column;
}

.nav-links li {
  width: 100%;
}

.nav-links a {
  display: block;
  width: 100%;
  padding: 10px 4px;

  color: var(--text-soft);
  font-size: 1rem;
  font-weight: 500;
}

.nav-links a:hover,
.nav-links a.active {
  background: rgba(28, 43, 66, 0.98);
  color: #ffffff;
  text-decoration: none;
}

/* =========================================
   BLOCKS / CARDS
========================================= */

.block,
.forum-page-card,
.thread-card,
.story-card,
.forum-card,
.score-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-small);
  color: var(--text-main);
  box-shadow: var(--shadow-soft);
}

.block {
  padding: 14px;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.block:hover,
.forum-card:hover,
.forum-page-card:hover,
.thread-card:hover,
.story-card:hover,
.score-card:hover,
.home-entry-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
}

.block h1,
.block h2,
.block h3 {
  color: var(--text-main);
  margin-bottom: 10px;
}

.block p {
  color: var(--text-soft);
}

.block a {
  display: inline-block;
  margin-top: 8px;
  font-weight: 500;
}

.block-large {
  padding: 16px;
  font-size: 1.05rem;
}

.block-large h2 {
  font-size: 1.45rem;
}

.block-medium {
  padding: 14px;
}

.block-small {
  padding: 12px;
  font-size: 0.9rem;
}

/* =========================================
   LISTS
========================================= */

.list {
  list-style: none;
  margin-top: 8px;
}

.list li {
  margin-bottom: 10px;
}

.list li:last-child {
  margin-bottom: 0;
}

.list a {
  color: var(--link-color);
}

/* =========================================
   HOMEPAGE INTRO
========================================= */

.home-intro {
  margin-top: 12px;
  text-align: center;
}

.home-intro h1 {
  font-size: 1.35rem;
  margin-bottom: 8px;
}

.home-intro p {
  max-width: 720px;
  margin: 0 auto 14px auto;
  font-size: 0.95rem;
  color: var(--text-soft);
}

.home-entry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.home-entry-card {
  display: block;
  padding: 12px;
  border-radius: var(--radius-small);

  background: rgba(20, 32, 50, 0.95);
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  box-shadow: var(--shadow-soft);

  text-align: left;
  text-decoration: none;
}

.home-entry-card strong {
  display: block;
  color: #ffffff;
  font-size: 1rem;
  margin-bottom: 4px;
}

.home-entry-card span {
  display: block;
  color: var(--text-soft);
  font-size: 0.85rem;
}

.home-entry-card:hover {
  text-decoration: none;
}

/* =========================================
   HOMEPAGE LAYOUT
========================================= */

.frontpage-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.left-rail,
.main-feed,
.right-rail {
  display: contents;
}

/* =========================================
   HOMEPAGE BLOCK ORDER
========================================= */

.homepage-news-ticker {
  order: 1;
}

.classifieds-promo-block {
  order: 2;
}

.new-classifieds-block {
  order: 3;
}

.classifieds-list-block {
  order: 4;
}

.daily-topic-block {
  order: 5;
  border-left: 4px solid rgba(159, 196, 255, 0.55);
}

.latest-stories-home {
  order: 6;
}

.sports-home-block {
  order: 7;
}

.did-you-know-block {
  order: 8;
}

.weather-block {
  order: 9;
}

.discussions-block {
  order: 10;
}

.tech-home-block {
  order: 11;
}

.popular-now-block {
  order: 12;
}

.market-live-block {
  order: 13;
}

.brief-greek-news-block {
  order: 14;
}

.brief-world-news-block {
  order: 15;
}

.radio-home-block {
  order: 16;
}

/* =========================================
   NEWS ROTATOR / TICKER
========================================= */

.mobile-only {
  display: block;
}

.main-feed .news-rotator {
  display: none;
}

.block-strip,
.news-rotator {
  background: rgba(18, 28, 43, 0.9);
  border: 1px solid var(--border-soft);
  border-left: 3px solid rgba(159, 196, 255, 0.45);
}

.news-rotator {
  display: block;
  position: relative;
  margin-bottom: 10px;
  padding: 10px 14px;
  font-size: 0.9rem;
}

.news-rotator strong {
  display: block;
  color: var(--text-main);
  margin-bottom: 8px;
}

.news-rotator strong::before {
  content: "●";
  color: #e25555;
  font-size: 0.65rem;
  margin-right: 6px;
  vertical-align: middle;
  animation: livePulse 1.6s infinite;
}

.news-rotator::after {
  content: "LIVE";
  display: inline-block;
  margin-top: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-soft);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 2px 5px;
}

.ticker-window {
  min-height: 64px;
  overflow: visible;
}

.ticker-track {
  transform: none;
}

.ticker-line {
  min-height: 64px;
  display: flex;
  align-items: center;

  line-height: 1.5;
  white-space: normal;
  word-break: break-word;

  color: var(--text-soft);
}

.ticker-line a {
  color: var(--text-soft);
  display: block;
}

@keyframes livePulse {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

/* =========================================
   WEATHER / LIVE INFO
========================================= */

.weather-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
}

.city {
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: rgba(22, 33, 51, 0.95);
  border: 1px solid var(--border-soft);
  padding: 5px 7px;
  border-radius: var(--radius-small);
}

.city span {
  color: #ffffff;
  font-weight: 700;
}

.sun-times,
.date {
  margin-top: 8px;
  font-size: 12px;
}

#location-btn,
.location-link {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}

#location-btn:hover,
.location-link:hover {
  color: #ffffff;
}

/* =========================================
   FORUM PREVIEW / FORUM CARDS
========================================= */

.forum-category-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.forum-card {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-small);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.forum-card strong {
  display: block;
  color: var(--text-main);
  font-size: 0.95rem;
}

.forum-card span {
  display: block;
  color: var(--text-soft);
  font-size: 0.78rem;
  margin-top: 3px;
}

.forum-card:hover {
  text-decoration: none;
}

.forum-full-link {
  grid-column: 1 / -1;
}

/* =========================================
   FORUM PAGE
========================================= */

.forum-hero {
  margin-top: 20px;
}

.forum-hero h1 {
  margin-bottom: 8px;
}

.forum-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 16px;
}

.forum-page-card {
  display: block;
  padding: 16px;
  border-radius: var(--radius-small);
  text-decoration: none;
}

.forum-page-card h2 {
  color: var(--text-main);
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.forum-page-card p {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.forum-page-card span {
  display: block;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.forum-page-card:hover {
  text-decoration: none;
}

/* =========================================
   TOPIC PAGES
========================================= */

.topic-page-card {
  margin-top: 20px;
}

.topic-page-card h1 {
  color: var(--text-main);
  font-size: 1.4rem;
}

.topic-page-card h2,
.topic-page-card h3 {
  color: var(--text-main);
}

.topics-list {
  list-style: none;
  margin-top: 10px;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.topics-list li {
  margin: 0;
}

.topics-list a {
  font-size: 0.9rem;
}

/* =========================================
   STORY CARDS / STORY ARCHIVE
========================================= */

.story-card {
  padding: 12px;
  margin-top: 10px;
  border-radius: var(--radius-small);
}

.story-card h3 {
  color: var(--text-main);
  margin-bottom: 6px;
  font-size: 1rem;
}

.story-card p {
  color: var(--text-soft);
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.story-featured {
  border-left: 4px solid rgba(159, 196, 255, 0.55);
  background: rgba(20, 32, 50, 0.95);
}

.featured-story {
  margin-bottom: 14px;
}

.story-archive {
  margin-top: 10px;
}

.featured-story h2,
.story-archive h2 {
  font-size: 1rem;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 6px;
  margin-bottom: 8px;
}

/* =========================================
   FULL STORY PAGE
========================================= */

.story-page {
  margin-top: 18px;
}

.story-full h1 {
  color: var(--text-main);
  font-size: 1.55rem;
  margin-bottom: 14px;
}

.story-full h2,
.story-full h3 {
  color: var(--text-main);
}

.story-full p {
  color: var(--text-soft);
  margin-top: 12px;
}

.story-note {
  margin-top: 30px;
  padding: 14px 18px;

  border-left: 3px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-soft);

  font-size: 0.95rem;
  border-radius: var(--radius-medium);
}

/* =========================================
   THREAD LIST CARDS
========================================= */

.thread-list {
  list-style: none;
  margin-top: 10px;
  padding: 0;
}

.thread-card {
  display: block;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: var(--radius-small);
}

.thread-card a {
  color: var(--text-main);
  font-weight: 600;
}

.thread-meta {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
}

/* =========================================
   BREADCRUMBS / BACK LINKS
========================================= */

.breadcrumb-bar {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.breadcrumb-bar a {
  color: var(--link-color);
  font-weight: 600;
}

/* =========================================
   COMMENT PLACEHOLDER
========================================= */

.comment-placeholder {
  margin-top: 18px;
  margin-bottom: 14px;
  padding: 12px;

  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-small);

  color: var(--text-soft);
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.03);
}

/* =========================================
   SPORTS SECTION LAYOUT
========================================= */

.sports-layout {
  display: block;
}

.sports-side-nav {
  position: static;

  display: flex;
  overflow-x: auto;
  gap: 8px;

  padding: 10px;
  margin-top: 14px;
  margin-bottom: 16px;

  scrollbar-width: thin;
}

.sports-side-nav h3,
.sports-nav-divider {
  display: none;
}

.sports-side-nav a {
  white-space: nowrap;
  flex: 0 0 auto;

  display: block;
  padding: 9px 10px;
  border-radius: 8px;

  color: var(--text-soft);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
}

.sports-side-nav a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.sports-main-content {
  min-width: 0;
}

/* =========================================
   SPORTS SCORES / RESULTS
========================================= */

.score-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.score-card {
  padding: 10px 12px;
  border-radius: var(--radius-small);
}

.score-date {
  display: block;
  font-size: 0.75rem;
  margin-bottom: 4px;
}

.score-card strong {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
}

/* =========================================
   STANDINGS TABLE
========================================= */

.standings-table {
  width: 100%;
  overflow-x: auto;
}

.standings-table table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.standings-table th,
.standings-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border-soft);
}

.standings-table th {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-main);
  font-weight: 700;
}

.standings-table td {
  color: var(--text-soft);
}

.standings-table th:nth-child(2),
.standings-table td:nth-child(2) {
  text-align: left;
}

.standings-table th:nth-child(1),
.standings-table td:nth-child(1),
.standings-table th:nth-child(3),
.standings-table td:nth-child(3),
.standings-table th:nth-child(4),
.standings-table td:nth-child(4),
.standings-table th:nth-child(5),
.standings-table td:nth-child(5) {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* =========================================
   CLASSIFIEDS / PLACEHOLDER READABILITY
========================================= */

.new-classifieds-block a,
.classifieds-list-block a {
  color: var(--text-soft);
}

.new-classifieds-block a:hover,
.classifieds-list-block a:hover {
  color: #ffffff;
}

/* =========================================
   FOOTER / TERRY TRIBUTE / GENIUS MODE
========================================= */

footer {
  padding: 20px 0;
  margin-top: 30px;

  background: #020b1b;
  border-top: 1px solid var(--border-soft);

  color: var(--text-soft);
  font-size: 0.8rem;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.footer-left,
.footer-center,
.footer-right {
  text-align: center;
  color: var(--text-soft);
}

.footer-center,
.tribute {
  font-style: italic;
}

.footer-right,
.genius-mode {
  font-weight: 600;
}

.footer-links {
  text-align: center;
  margin-top: 8px;
  font-size: 0.9rem;
}

.footer-links a {
  color: var(--text-soft);
  text-decoration: none;
}

.footer-links a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.footer-links span {
  margin: 0 6px;
  color: var(--text-muted);
}

/* Running in Genius Mode™ */

/* =========================================
   HEADER / TOP BAR
========================================= */

.top-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.top-header .logo {
  grid-column: 1;
}

.top-header .header-actions {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.menu-toggle {
  display: none;
}

/* =========================================
   TWO-ROW PORTAL NAV
========================================= */

.portal-nav-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.portal-nav-wrap::-webkit-scrollbar {
  display: none;
}

.portal-nav-wrap::before,
.portal-nav-wrap::after {
  content: "";
  position: sticky;
  top: 0;
  width: 24px;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.portal-nav-wrap::before {
  left: 0;
  background: linear-gradient(to right, rgba(15, 23, 36, 0.96), transparent);
}

.portal-nav-wrap::after {
  right: 0;
  background: linear-gradient(to left, rgba(15, 23, 36, 0.96), transparent);
}

.portal-nav {
  display: flex;
  gap: 8px;
  width: max-content;
  min-width: 100%;
  padding: 7px 0;
  white-space: nowrap;
}

.portal-nav a {
  flex: 0 0 auto;
  display: block;

  padding: 7px 11px;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-soft);

  color: var(--text-soft);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
}

.portal-nav a:hover,
.portal-nav a.active {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  text-decoration: none;
}

.main-page-nav-wrap {
  margin-top: 10px;
}

.topic-nav-wrap {
  margin-top: 2px;
  padding-bottom: 2px;
}

.main-page-nav a {
  font-weight: 650;
}

.topic-nav a {
  font-size: 0.84rem;
}

/* =========================================
   DESKTOP ENHANCEMENT
========================================= */

@media (min-width: 769px) {

  /* =========================================
     DESKTOP CONTAINER
  ========================================= */

  .container {
    width: var(--container-desktop);
    max-width: var(--container-desktop);
  }

  header .container {
    width: var(--container-desktop);
    max-width: var(--container-desktop);
  }

/* =========================================
   DESKTOP HEADER / NAV
========================================= */

header {
  padding: 4px 0;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0;
}

.logo img {
  height: 76px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;

  grid-column: auto;
  grid-row: auto;

  width: auto;
  margin: 0 0 0 24px;
  padding: 0;

  background: transparent;
  border-top: none;
}

.nav-links li {
  width: auto;
}

.nav-links a {
  width: auto;
  padding: 4px 7px;
  border-radius: 999px;

  background: transparent;
  border: 1px solid transparent;

  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.1;
}

.nav-links a:hover,
.nav-links a.active {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  text-decoration: none;
}

.header-actions {
  margin-left: auto;
  width: auto;
  flex: 0 0 auto;
}

.search-input {
  width: 360px;
  flex: none;
  padding: 6px 10px;
  font-size: 0.88rem;
}

.menu-toggle {
  display: none;
}

/* =========================================
   DESKTOP SEARCH BAR
========================================= */

.header-actions {
  margin-left: 18px;
  display: flex;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
}

.search-input {
  width: 460px;
  flex: none;

  padding: 9px 14px;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-right: none;
  border-radius: 12px 0 0 12px;

  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;

  font-size: 0.92rem;
  outline: none;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.search-input:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

.search-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 40px;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 12px 12px 0;

  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.search-icon:hover {
  background: rgba(255, 255, 255, 0.09);
}

.search-input {
  width: 460px !important;

  padding: 9px 14px !important;

  border: 1px solid rgba(255,255,255,0.08) !important;
  border-right: none !important;

  border-radius: 12px 0 0 12px !important;

  background: rgba(255,255,255,0.04) !important;

  color: #ffffff !important;

  font-size: 0.92rem !important;
}

.search-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 40px;

  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0 12px 12px 0;

  background: rgba(255,255,255,0.05);

  cursor: pointer;
}

.search-button {
  display: none;
}

/* =========================================
   MOBILE SEARCH BUTTON
========================================= */

.search-button {
  display: none;
}

@media (min-width: 769px) {
  .search-button {
    display: block;
    height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-left: none;
    border-radius: 0 12px 12px 0;
    background: rgba(255,255,255,0.06);
    color: #ffffff;
    font-size: 0.88rem;
    cursor: pointer;
  }

  .search-input {
    width: 460px;
    border-radius: 12px 0 0 12px;
    border-right: none;
  }
}

  /* =========================================
     DESKTOP HOMEPAGE INTRO
  ========================================= */

  .home-intro {
    margin-top: 16px;
  }

  .home-intro h1 {
    font-size: 1.7rem;
  }

  .home-intro p {
    font-size: 1rem;
  }

  .home-entry-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  /* =========================================
     DESKTOP FRONT PAGE LAYOUT
  ========================================= */

  .frontpage-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 320px;
    gap: 18px;
    margin-top: 20px;
    align-items: start;
  }

  .left-rail,
  .main-feed,
  .right-rail {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .left-rail .block,
  .right-rail .block {
    font-size: 0.88rem;
  }

  .main-feed .block {
    font-size: 0.95rem;
  }

  .classifieds-promo-block,
  .new-classifieds-block,
  .classifieds-list-block,
  .daily-topic-block,
  .sports-home-block,
  .did-you-know-block,
  .weather-block,
  .discussions-block,
  .tech-home-block,
  .popular-now-block,
  .market-live-block,
  .brief-greek-news-block,
  .brief-world-news-block,
  .radio-home-block {
    order: initial;
  }

 /* =========================================
   SINGLE HEADLINE NEWS ROTATOR
========================================= */

.news-rotator {
  display: block;
  padding: 12px 14px;
}

.ticker-window {
  min-height: 72px;
  overflow: hidden;
}

.ticker-track {
  display: block;
}

.ticker-line {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

  overflow: hidden;

  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.45;

  white-space: normal;
}

.ticker-slide {
  animation: tickerFadeUp 0.45s ease;
}

@keyframes tickerFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .ticker-window {
    min-height: 86px;
  }

  .ticker-line {
    font-size: 0.92rem;
    line-height: 1.4;
    -webkit-line-clamp: 3;
  }
}

  /* =========================================
     DESKTOP WEATHER
  ========================================= */

  .weather-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* =========================================
     DESKTOP FORUM
  ========================================= */

  .forum-category-list {
    grid-template-columns: 1fr 1fr;
  }

  .forum-page-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* =========================================
     DESKTOP BLOCK SIZING
  ========================================= */

  .block {
    padding: 16px;
  }

  .block-large {
    padding: 18px;
    font-size: 1.2rem;
  }

  .block-large h2 {
    font-size: 1.6rem;
  }

  .block-medium {
    padding: 16px;
  }

  .block-small {
    padding: 12px;
  }

  /* =========================================
     DESKTOP SPORTS LAYOUT
  ========================================= */

  .sports-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    align-items: start;
  }

  .sports-side-nav {
    position: sticky;
    top: 20px;

    display: block;
    overflow-x: visible;

    padding: 16px;
    margin-top: 20px;
    margin-bottom: 0;
  }

  .sports-side-nav h3 {
    display: block;
    margin-bottom: 12px;
    font-size: 1.05rem;
  }

  .sports-side-nav a {
    white-space: normal;
    margin-bottom: 6px;
  }

  .sports-nav-divider {
    display: block;
    height: 1px;
    margin: 12px 0;
    background: var(--border-strong);
  }

  /* =========================================
     DESKTOP FOOTER
  ========================================= */

  .footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.footer-left,
.footer-center,
.footer-right {
  text-align: center;
}
}

@media (max-width: 768px) {

  .search-button {
    display: none !important;
  }

}

/* =========================================
   PAGINATION
========================================= */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;
  margin-top: 18px;
  padding: 12px;
}

.pagination a,
.pagination-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 36px;
  padding: 7px 11px;

  border-radius: 999px;
  border: 1px solid var(--border-soft);

  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);

  font-size: 0.88rem;
  text-decoration: none;
}

.pagination a:hover,
.pagination a.active {
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  text-decoration: none;
}

.pagination-disabled {
  opacity: 0.45;
  cursor: default;
}

/* =========================================
   TICKER NEWS ROTATOR emergency news
========================================= */

.news-rotator {
  display: block !important;
}

.ticker-window {
  min-height: 72px !important;
  overflow: hidden !important;
}

.ticker-track {
  display: block !important;
}

.ticker-line {
  display: block !important;
  color: var(--text-soft) !important;
  font-size: 0.95rem !important;
  line-height: 1.45 !important;
  white-space: normal !important;
}

@media (max-width: 768px) {

  .news-rotator {
    order: -1;
  }

}

@media (max-width: 768px) {
  .homepage-news-ticker {
    order: 0 !important;
  }

  .home-intro {
    order: 1 !important;
  }
}

.homepage-news-ticker-mobile {
  display: none !important;
}

@media (max-width: 768px) {
  .homepage-news-ticker-mobile {
    display: block !important;
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .main-feed .homepage-news-ticker {
    display: none !important;
  }
}

/* =========================================
   LIVE MARKETS BOX
========================================= */

.markets-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.market-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;

  padding: 7px 8px;
  border-radius: 6px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);

  font-size: 0.82rem;
}

.market-name {
  color: var(--text-soft);
}

.market-price {
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.market-up {
  color: #48d16d;
  font-weight: 700;
}

.market-down {
  color: #ff5d5d;
  font-weight: 700;
}

/* =========================================
   MOBILE HOMEPAGE ORDER — PORTAL PRIORITY
========================================= */

@media (max-width: 768px) {

  .home-intro {
    display: none !important;
  }

  .homepage-news-ticker-mobile {
    order: 1 !important;
  }

  .homepage-news-ticker {
    order: 2 !important;
  }

  .new-classifieds-block {
    order: 3 !important;
  }

  .classifieds-list-block {
    order: 4 !important;
  }

  .daily-topic-block {
    order: 5 !important;
  }

  .latest-stories-home {
    order: 6 !important;
  }

  .market-live-block {
    order: 7 !important;
  }

  .weather-block {
    order: 8 !important;
  }

  .sports-home-block {
    order: 9 !important;
  }

  .discussions-block {
    order: 10 !important;
  }

  .popular-now-block {
    order: 11 !important;
  }

  .brief-greek-news-block {
    order: 12 !important;
  }

  .brief-world-news-block {
    order: 13 !important;
  }

  .tech-home-block {
    order: 14 !important;
  }

  .radio-home-block {
    order: 15 !important;
  }
}

/* =========================================
   LOCATION WEATHER BUTTON
========================================= */

#location-btn {

  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);

  color: var(--text-main);

  padding: 8px 12px;
  border-radius: 10px;

  font-size: 0.9rem;
  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;

}

#location-btn:hover {

  background: rgba(255,255,255,0.08);
  border-color: var(--accent);

  transform: translateY(-1px);

}

#location-weather {

  margin-top: 10px;
  font-size: 0.92rem;

  color: var(--text-soft);

}

.sports-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 768px) {
  .sports-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   SPORTS PAGE / LEAGUE DETAIL POLISH
========================================= */

.sports-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 22px;
  align-items: start;
}

.sports-box {
  overflow: hidden;
}

.sports-table {
  width: max-content !important;
  min-width: 0 !important;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.sports-table th,
.sports-table td {
  padding: 6px 5px !important;
  text-align: left;
  white-space: nowrap;
}

.sports-table th:nth-child(1),
.sports-table td:nth-child(1),
.sports-table th:nth-child(3),
.sports-table td:nth-child(3),
.sports-table th:nth-child(4),
.sports-table td:nth-child(4),
.sports-table th:nth-child(5),
.sports-table td:nth-child(5) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 30px;
}

.sports-table th:nth-child(5),
.sports-table td:nth-child(5) {
  min-width: 36px !important;
}

.sports-table td:nth-child(2),
.sports-table th:nth-child(2) {
  width: auto !important;
  min-width: 0 !important;
  max-width: 205px !important;
}

.score-card,
.score-card strong,
.sports-info-box,
#premier-league-fixtures {
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.45;
}

.score-date {
  display: block;
  margin-bottom: 4px;
  color: var(--text-soft);
  font-size: 0.78rem;
}

@media (max-width: 768px) {
  .sports-grid {
    grid-template-columns: 1fr;
  }

  .sports-table {
    width: 100% !important;
    font-size: 0.8rem;
  }

  .sports-info-panel {
    order: 4;
  }

  .sports-box:has(#premier-league-fixtures) {
    order: 3;
  }
}

/* =========================================
   STANDINGS TILE DASHBOARD
========================================= */

.standings-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.standings-tile {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 14px;
}

.standings-tile h2 {
  font-size: 0.98rem;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.standings-tile-list {
  font-size: 0.78rem;
  color: var(--text-soft);
}

.standings-tile-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.16s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.standings-tile-link:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}

.standings-tile-link:active {
  transform: translateY(-1px);
}

.standings-tile-header,
.standings-tile-row {
  display: grid;
  grid-template-columns: 22px 1fr 32px 38px 38px;
  gap: 6px;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

.standings-tile-header {
  padding-bottom: 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-size: 0.68rem;
  color: var(--text-soft);
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.standings-tile-row {
  padding: 5px 0;
  font-size: 0.78rem;
}

.team-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-played,
.team-gd,
.team-points,
.standings-tile-header strong {
  text-align: right;
}

.standings-tile-row strong {
  color: var(--text-main);
  font-weight: 600;
}

.standings-tile-footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.72rem;
  color: var(--text-soft);
  opacity: 0.9;
}

.standings-tile-empty {
  font-size: 0.78rem;
  color: var(--text-soft);
}

.cutoff-promotion {
  border-bottom: 1px solid rgba(90,170,255,0.5);
  padding-bottom: 4px;
  margin-bottom: 4px;
}

.cutoff-playoff {
  border-bottom: 1px solid rgba(255,190,90,0.48);
  padding-bottom: 4px;
  margin-bottom: 4px;
}

.cutoff-relegation {
  border-top: 1px solid rgba(255,90,90,0.52);
  padding-top: 4px;
  margin-top: 4px;
}

/* =========================================
   FIXTURES TILE DASHBOARD
========================================= */

.fixtures-tile-list {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.fixtures-matchday {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: 0.72rem;
  color: var(--text-soft);
  opacity: 0.9;
}

.fixtures-tile-row {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-size: 0.78rem;
  color: var(--text-soft);
}

.fixtures-tile-row:last-child {
  border-bottom: none;
}

.fixture-date {
  font-size: 0.7rem;
  opacity: 0.8;
  margin-bottom: 3px;
}

.fixture-match {
  line-height: 1.35;
}

.fixture-match span {
  opacity: 0.6;
  margin: 0 4px;
}

/* =========================================
   RESPONSIVE TILE GRID
========================================= */

@media (max-width: 900px) {
  .standings-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .standings-tile-grid {
    grid-template-columns: 1fr;
  }
}

.fixture-match {
  text-decoration: none;
}

.fixture-match span {
  text-decoration: none;
}

.standings-tile-link * {
  text-decoration: none;
}

.scores-tile-list {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.fixture-match strong {
  font-weight: 600;
  color: var(--text-main);
  margin: 0 5px;
}

/* =========================================
   SPORTS NEWS TICKER
========================================= */

.sports-news-ticker {
  display: flex;
  align-items: center;
  gap: 14px;

  width: min(1100px, calc(100% - 32px));
  margin: 18px auto;
  padding: 10px 14px;

  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: rgba(255,255,255,0.035);

  overflow: hidden;
}

.sports-news-label {
  position: relative;
  z-index: 2;

  flex-shrink: 0;

  padding-right: 14px;

  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-main);
  opacity: 0.95;

  background: var(--bg-main);
}

.sports-news-track-wrap {
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.sports-news-track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  min-width: max-content;

  animation: sportsTickerScroll 42s linear infinite;
}

.sports-news-track span {
  font-size: 0.78rem;
  color: var(--text-soft);
}

@keyframes sportsTickerScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-20%);
  }
}

@media (max-width: 768px) {
  .sports-news-ticker {
    width: calc(100% - 24px);
    margin: 14px auto;
    padding: 9px 10px;
    gap: 10px;
  }

  .sports-news-label {
    font-size: 0.72rem;
    padding-right: 10px;
  }

  .sports-news-track {
    gap: 36px;
  }

  .sports-news-track span {
    font-size: 0.72rem;
  }
}

.sports-news-ticker {
  max-width: 100%;
}

@media (max-width: 768px) {
  .sports-news-track {
    animation-duration: 60s;
  }

  @keyframes sportsTickerScroll {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-12%);
    }
  }
}

@media (max-width: 768px) {
  .sports-news-track {
    gap: 42px;
    animation-duration: 46s;
  }

  .sports-news-track span {
    font-size: 0.74rem !important;
    line-height: 1.2;
    white-space: nowrap;
  }
}

.sports-news-track span {
  flex: 0 0 auto;
  font-size: 0.78rem !important;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .sports-news-track {
    gap: 42px;
    animation-duration: 42s;
  }

  .sports-news-track span {
    font-size: 0.74rem !important;
  }
}

/* =========================================
   SPORTS NEWS TICKER
========================================= */

.sports-news-ticker {
  display: flex;
  align-items: center;
  gap: 14px;

  width: min(1100px, calc(100% - 32px));
  max-width: 100%;
  margin: 18px auto;
  padding: 10px 14px;

  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: rgba(255,255,255,0.035);

  overflow: hidden;
}

.sports-news-track {
  display: flex;
  width: fit-content;

  animation:
    sportsTickerScroll 80s linear infinite;
}

.sports-news-group {
  display: flex;
  flex-shrink: 0;

  gap: 48px;
  padding-right: 48px;

  white-space: nowrap;
}

.sports-news-group span {
  flex: 0 0 auto;

  font-size: 0.78rem;
  line-height: 1.2;

  color: var(--text-soft);
}

@keyframes sportsTickerScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 24px));
  }
}

@media (max-width: 768px) {
  .sports-news-ticker {
    width: calc(100% - 24px);
    margin: 14px auto;
    padding: 9px 10px;
    gap: 10px;
  }

  .sports-news-label {
    font-size: 0.72rem;
    padding-right: 10px;
  }

  .sports-news-track {
    animation-duration: 42s;
  }

  .sports-news-group {
    gap: 38px;
    padding-right: 38px;
  }

  .sports-news-group span {
    font-size: 0.74rem;
  }
}

@media (max-width: 768px) {
  .sports-news-group,
  .sports-news-group span {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
  }

  .sports-news-track {
    animation-duration: 95s !important;
  }

  .sports-news-group {
    gap: 44px !important;
    padding-right: 44px !important;
  }
}

.sports-news-track {
  animation: none;
}

.sports-news-track.ticker-ready {
  animation: sportsTickerScroll 80s linear infinite;
}

.sports-news-ticker,
.sports-news-ticker *,
.sports-news-group,
.sports-news-group span {
  font-family: inherit !important;
  font-size: 0.76rem !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
}

.sports-news-ticker,
.sports-news-ticker * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  font-style: normal !important;
  box-sizing: border-box;
  font-feature-settings: "liga" 0;
  vertical-align: middle;
}

.sports-last-updated {
  width: min(1100px, calc(100% - 32px));

  margin:
    -8px auto 18px auto;

  font-size: 0.72rem;

  color: var(--text-soft);

  opacity: 0.72;

  text-align: right;
}

/* =========================================
   SPORTS NEWS RSS SOURCE NOTE
========================================= */

.sports-source-box {

  margin-top: 18px;
  padding-top: 14px;

  border-top:
    1px solid rgba(255,255,255,0.08);

}

.sports-source-note {

  margin: 0;

  padding: 10px 12px;

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius: 10px;

  background:
    rgba(255,255,255,0.02);

  font-size: 0.72rem;

  color: var(--text-soft);

  opacity: 0.78;

  line-height: 1.4;
}

/* ========================= */
/* STORY IMAGE */
/* ========================= */

.story-image {
  margin: 18px 0;
}

.story-image img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  display: block;
}

.story-image figcaption {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: right;
}

/* ========================= */
/* TOPIC CARD IMAGE */
/* ========================= */

.story-card-image {
  margin-bottom: 12px;
}

.story-card-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

/* =========================================
   SOCCER TOURNAMENT PAGE
========================================= */

.sports-main-content {
  width: 100%;
}

.tournament-hero h1 {
  margin-bottom: 10px;
}

.tournament-tabs,
.knockout-stage-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.tournament-tab,
.knockout-stage-tab {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 700;
}

.tournament-tab.active,
.knockout-stage-tab.active {
  background: rgba(120, 170, 255, 0.22);
  border-color: rgba(120, 170, 255, 0.75);
}

.knockout-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
}

.knockout-tabs button {
    flex: 0 0 auto;
}

.tournament-panel {
  display: none;
  margin-top: 18px;
}

.tournament-panel.active {
  display: block;
}

#tournament-matches-list,
#tournament-groups-list,
#tournament-knockout-list {
  display: grid;
  gap: 14px;
}

.soccer-match-card {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.05);

  width: 100%;
  max-width: 550px;
  margin: 0 auto;
}

.soccer-match-meta {
  opacity: 0.75;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.soccer-match-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 1.05rem;
  padding: 4px 0;
}

.soccer-score {
  font-weight: 800;
  font-size: 1.1rem;
  table-layout: fixed;
}

.soccer-group-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px; 
  table-layout: fixed;
}

.soccer-group-table th,
.soccer-group-table td {
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
}

.soccer-group-table th:nth-child(n+3),
.soccer-group-table td:nth-child(n+3) {
  text-align: right;
  width: 60px;
}

.soccer-group-table th:first-child,
.soccer-group-table td:first-child {
  width: 40px;
  text-align: left;
}

.soccer-group-table th:nth-child(2),
.soccer-group-table td:nth-child(2) {
  text-align: left;
}

.soccer-group-table th:nth-child(n+3),
.soccer-group-table td:nth-child(n+3) {
  width: 60px;
  text-align: right;
}

.soccer-group-block {
  max-width: 720px;
  margin: 0 auto 26px auto;
}

.soccer-group-title {
  font-size: 1.25rem;
  margin: 20px 0 6px;
}

.knockout-stage-title {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

/* =========================================
   SPORTS MAJOR DIVIDER
========================================= */

.sports-major-divider {
  height: 2px;
  background: rgba(255,255,255,0.25);
  margin: 16px 0;
  border-radius: 999px;
}

/* =========================================
   WORLD CUP 2026 PAGE V2
========================================= */

.worldcup-page {
  min-width: 0;
}

.worldcup-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.worldcup-kicker {
  margin: 0 0 4px 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.worldcup-logo {
  width: 82px;
  height: 82px;
  object-fit: contain;
  flex: 0 0 auto;
  opacity: 0.96;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.28));
}

.worldcup-quick-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.worldcup-quick-notes span,
.worldcup-group-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.055);
  color: var(--text-soft);
  font-size: 0.74rem;
  line-height: 1;
  padding: 5px 8px;
}

.worldcup-section-note {
  color: var(--text-muted);
  font-size: 0.84rem;
}

.worldcup-day-block {
  margin-top: 18px;
}

.worldcup-day-block h3 {
  margin-bottom: 8px;
  font-size: 1.06rem;
}

.worldcup-match-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

#tournament-groups-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.worldcup-match-card,
.worldcup-group-card,
.worldcup-knockout-placeholder {
  border: 1px solid rgba(255,255,255,0.12);
  border-left-width: 4px;
  border-radius: 12px;
  background: rgba(255,255,255,0.045);
  padding: 9px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.14);
}

.worldcup-match-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 7px;
}

.worldcup-match-number {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.worldcup-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  margin-bottom: 8px;
}

.worldcup-team {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.worldcup-team strong {
  color: #ffffff;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worldcup-flag {
  font-size: 0.96rem;
  flex: 0 0 auto;
}

.worldcup-versus {
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.worldcup-greece-time {
  padding: 7px 8px;
  border-radius: 9px;
  background: rgba(120,170,255,0.09);
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 7px;
}

.worldcup-greece-time span {
  display: block;
  color: var(--text-muted);
  font-size: 0.66rem;
  margin-bottom: 2px;
}

.worldcup-greece-time strong {
  display: block;
  color: #ffffff;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.worldcup-venue {
  display: block;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,0.10);
  color: var(--text-muted);
  font-size: 0.68rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worldcup-group-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.worldcup-group-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.worldcup-group-teams {
  display: grid;
  gap: 7px;
}

.worldcup-group-team {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(0,0,0,0.12);
}

.worldcup-group-team strong {
  color: var(--text-main);
  font-size: 0.9rem;
}

.worldcup-knockout-placeholder {
  margin-top: 14px;
  max-width: 720px;
}

.group-a { --group-color: #42c77a; border-left-color: var(--group-color); }
.group-b { --group-color: #f1a340; border-left-color: var(--group-color); }
.group-c { --group-color: #e95d5d; border-left-color: var(--group-color); }
.group-d { --group-color: #4aa3ff; border-left-color: var(--group-color); }
.group-e { --group-color: #b68a5c; border-left-color: var(--group-color); }
.group-f { --group-color: #b284ff; border-left-color: var(--group-color); }
.group-g { --group-color: #9aa4b2; border-left-color: var(--group-color); }
.group-h { --group-color: #3ea36f; border-left-color: var(--group-color); }
.group-i { --group-color: #69c3ff; border-left-color: var(--group-color); }
.group-j { --group-color: #c079ff; border-left-color: var(--group-color); }
.group-k { --group-color: #4dd0e1; border-left-color: var(--group-color); }
.group-l { --group-color: #9bd45a; border-left-color: var(--group-color); }

.worldcup-group-pill.group-a,
.worldcup-group-pill.group-b,
.worldcup-group-pill.group-c,
.worldcup-group-pill.group-d,
.worldcup-group-pill.group-e,
.worldcup-group-pill.group-f,
.worldcup-group-pill.group-g,
.worldcup-group-pill.group-h,
.worldcup-group-pill.group-i,
.worldcup-group-pill.group-j,
.worldcup-group-pill.group-k,
.worldcup-group-pill.group-l {
  border-color: color-mix(in srgb, var(--group-color) 50%, transparent);
  background: color-mix(in srgb, var(--group-color) 18%, transparent);
}

.worldcup-group-dot.group-a,
.worldcup-group-dot.group-b,
.worldcup-group-dot.group-c,
.worldcup-group-dot.group-d,
.worldcup-group-dot.group-e,
.worldcup-group-dot.group-f,
.worldcup-group-dot.group-g,
.worldcup-group-dot.group-h,
.worldcup-group-dot.group-i,
.worldcup-group-dot.group-j,
.worldcup-group-dot.group-k,
.worldcup-group-dot.group-l {
  background: var(--group-color);
}

@media (max-width: 1200px) {
  .worldcup-match-grid,
  #tournament-groups-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .worldcup-match-grid,
  #tournament-groups-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .worldcup-hero-inner {
    align-items: flex-start;
  }

  .worldcup-logo {
    width: 58px;
    height: 58px;
  }

  .worldcup-match-grid,
  #tournament-groups-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .worldcup-match-card {
    padding: 8px;
  }

  .worldcup-teams {
    grid-template-columns: 1fr auto 1fr;
    gap: 4px;
    margin-bottom: 6px;
  }

  .worldcup-team strong {
    font-size: 0.78rem;
  }

  .worldcup-greece-time {
    padding: 6px 7px;
  }
}

/* =========================================
   WORLD CUP LIVE SCORE PATCH
========================================= */

.worldcup-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 3px 7px;
  border-radius: 999px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);

  color: var(--text-soft);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.worldcup-status-pill.is-live {
  color: #ffffff;
  background: rgba(225, 65, 65, 0.26);
  border-color: rgba(255, 100, 100, 0.55);
}

.worldcup-status-pill.is-finished {
  color: #ffffff;
  background: rgba(80, 170, 110, 0.22);
  border-color: rgba(110, 220, 140, 0.38);
}

.worldcup-scoreline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 10px;

  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.09);

  font-variant-numeric: tabular-nums;
}

.worldcup-scoreline strong {
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 800;
}

.worldcup-scoreline span {
  color: var(--text-muted);
  font-weight: 700;
}

.worldcup-match-card.has-score {
  border-color: rgba(255,255,255,0.18);
}

/* =========================================
   SPORTS REAL LOGO NAV PATCH
========================================= */

.sports-side-nav a.sports-logo-link {
  display: flex;
  align-items: center;
  gap: 9px;
}

.sports-nav-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
  border-radius: 4px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25));
}

.sports-logo-link span,
.sports-nav-textonly {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 769px) {
  .sports-side-nav a.sports-logo-link {
    padding-left: 10px;
  }
}

/* =========================================
   SPORTS REAL LOGO TITLE PATCH — TAKE 345
========================================= */

.sports-title-with-logo,
.sports-side-nav h3 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sports-title-logo,
.sports-heading-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
  border-radius: 6px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.28));
  vertical-align: middle;
}

.sports-box h2 .sports-title-logo,
.standings-tile h2 .sports-title-logo {
  width: 26px;
  height: 26px;
  border-radius: 5px;
}

.sports-side-nav a.sports-logo-link img.sports-nav-logo {
  display: inline-block;
}

@media (max-width: 768px) {
  .sports-title-logo,
  .sports-heading-logo {
    width: 28px;
    height: 28px;
  }

  .sports-box h2 .sports-title-logo,
  .standings-tile h2 .sports-title-logo {
    width: 22px;
    height: 22px;
  }
}

/* =========================================
   WORLD CUP 2026 — STANDINGS + KNOCKOUT V1
   Future home: js/tournaments/fifa-world-cup/
   Purpose: Google-style tournament center panels.
========================================= */

.worldcup-standings-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 14px 0 18px;
  font-size: 0.86rem;
  color: #d7e5ff;
}

.worldcup-standings-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.worldcup-standings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.worldcup-standings-card {
  background: rgba(7, 21, 45, 0.86);
  border: 1px solid rgba(105, 160, 255, 0.22);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.worldcup-standings-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.worldcup-standings-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.worldcup-standings-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  font-size: 0.88rem;
}

.worldcup-standings-table th,
.worldcup-standings-table td {
  padding: 9px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  white-space: nowrap;
}

.worldcup-standings-table th:first-child,
.worldcup-standings-table td:first-child {
  text-align: left;
}

.worldcup-standings-table th {
  color: #9fb9e8;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.worldcup-standings-table .team-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 220px;
}

.standing-rank {
  color: #9fb9e8;
  width: 18px;
  text-align: right;
}

.points-cell {
  font-weight: 900;
  font-size: 1.02rem;
  color: #ffffff;
}

.qualification-marker {
  display: inline-block;
  width: 4px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  flex: 0 0 auto;
}

.qualification-marker.is-qualified {
  background: #5ca8ff;
  box-shadow: 0 0 12px rgba(92, 168, 255, 0.5);
}

.qualification-marker.is-third-pending {
  background: #f7c948;
  box-shadow: 0 0 12px rgba(247, 201, 72, 0.35);
}

.mini-live-pill {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  padding: 2px 5px;
  border-radius: 999px;
  color: #001b12;
  background: #3ef0a3;
  font-weight: 900;
}

.knockout-stage-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scroll-snap-type: x proximity;
}

.knockout-stage-tab {
  flex: 0 0 auto;
  scroll-snap-align: center;
}

.worldcup-knockout-stage-heading {
  margin: 4px 0 16px;
}

.worldcup-knockout-stage-heading h3 {
  margin-bottom: 4px;
}

.worldcup-knockout-stage-heading p {
  margin: 0;
  color: #b8c9e8;
  font-size: 0.92rem;
}

.worldcup-knockout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.worldcup-knockout-card {
  background: rgba(7, 21, 45, 0.9);
  border: 1px solid rgba(105, 160, 255, 0.22);
  border-radius: 18px;
  padding: 14px;
}

.worldcup-knockout-card.is-placeholder {
  border-style: dashed;
  opacity: 0.88;
}

.worldcup-knockout-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.worldcup-knockout-teams > div:first-child {
  text-align: left;
}

.worldcup-knockout-teams > div:last-child {
  text-align: right;
}

.worldcup-knockout-score {
  min-width: 48px;
  text-align: center;
  font-weight: 900;
  color: #ffffff;
}

@media (max-width: 900px) {
  .worldcup-standings-grid,
  .worldcup-knockout-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .worldcup-standings-card,
  .worldcup-knockout-card {
    padding: 12px;
  }

  .worldcup-knockout-teams {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .worldcup-knockout-teams > div:first-child,
  .worldcup-knockout-teams > div:last-child {
    text-align: center;
  }
}

/* =========================================
   WORLD CUP CONTROL CONSOLE TABS
   Hidden heading:
   Make the World Cup tabs feel like Genius Console tabs,
   not like random pill buttons floating in space.
========================================= */

.worldcup-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;

  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;

  padding: 0 0 1px;
  margin-top: 16px;

  border-bottom: 1px solid rgba(150, 190, 255, 0.22);

  -webkit-overflow-scrolling: touch;
}

.worldcup-tabs .tournament-tab {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 38px;
  padding: 9px 14px;

  border-radius: 10px 10px 0 0;
  border: 1px solid rgba(140, 178, 232, 0.24);
  border-bottom-color: rgba(140, 178, 232, 0.08);

  background:
    linear-gradient(
      to bottom,
      rgba(42, 68, 103, 0.92),
      rgba(26, 43, 68, 0.92)
    );

  color: #eaf3ff;

  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.01em;

  cursor: pointer;
  white-space: nowrap;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.worldcup-tabs .tournament-tab:hover {
  background:
    linear-gradient(
      to bottom,
      rgba(56, 86, 128, 0.96),
      rgba(31, 52, 82, 0.96)
    );
}

.worldcup-tabs .tournament-tab.active {
  color: #ffffff;

  border-color: rgba(155, 204, 255, 0.62);
  border-bottom-color: rgba(28, 43, 66, 0.98);

  background:
    linear-gradient(
      to bottom,
      rgba(54, 86, 126, 0.98),
      rgba(29, 48, 77, 0.98)
    );

  box-shadow:
    0 -1px 0 rgba(155, 204, 255, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* =========================================
   WORLD CUP TAB PANELS
   Hidden heading:
   Panels should feel like the same control room changing screens.
========================================= */

.worldcup-page .tournament-panel {
  margin-top: 0;

  border: 1px solid rgba(150, 190, 255, 0.14);
  border-top: 0;

  border-radius: 0 0 16px 16px;

  padding: 16px;

  background:
    linear-gradient(
      to bottom,
      rgba(22, 38, 63, 0.68),
      rgba(10, 24, 46, 0.34)
    );
}

/* =========================================
   WORLD CUP GROUP STANDINGS POLISH
   Hidden heading:
   Pretty enough for humans, still readable for Future John.
========================================= */

.worldcup-standings-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  margin-bottom: 16px;
}

.worldcup-standings-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 7px 10px;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.055);

  font-size: 0.78rem;
}

.worldcup-standings-grid {
  align-items: start;
}

.worldcup-standings-card {
  overflow: hidden;

  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.worldcup-standings-table-wrap {
  overflow-x: auto;

  -webkit-overflow-scrolling: touch;
}

.worldcup-standings-table {
  min-width: 620px;
}

.worldcup-standings-table th,
.worldcup-standings-table td {
  white-space: nowrap;
}

.worldcup-standings-table .team-cell strong {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.points-cell {
  font-weight: 950;
  font-size: 1.08rem;
}

/* =========================================
   WORLD CUP KNOCKOUT STAGE TABS
   Hidden heading:
   Same console-tab language, but compact enough for mobile.
========================================= */

.knockout-stage-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;

  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;

  padding: 4px 0 12px;

  border-bottom: 1px solid rgba(150, 190, 255, 0.18);

  scroll-snap-type: x proximity;

  -webkit-overflow-scrolling: touch;
}

.knockout-stage-tab {
  flex: 0 0 auto;
  scroll-snap-align: center;

  min-height: 34px;
  padding: 8px 12px;

  border-radius: 9px 9px 0 0;
  border: 1px solid rgba(140, 178, 232, 0.22);

  background:
    linear-gradient(
      to bottom,
      rgba(38, 62, 95, 0.92),
      rgba(23, 39, 62, 0.92)
    );

  color: #dfeaff;

  font-size: 0.78rem;
  font-weight: 800;

  cursor: pointer;
  white-space: nowrap;
}

.knockout-stage-tab.active {
  color: #ffffff;

  border-color: rgba(100, 190, 255, 0.68);

  background:
    linear-gradient(
      to bottom,
      rgba(52, 86, 130, 0.98),
      rgba(27, 48, 78, 0.98)
    );

  box-shadow:
    0 -1px 0 rgba(100, 190, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* =========================================
   WORLD CUP FUTURE / PLACEHOLDER CARDS
========================================= */

.worldcup-future-card {
  margin-top: 14px;
  padding: 16px;

  border: 1px dashed rgba(160, 198, 255, 0.26);
  border-radius: 16px;

  background: rgba(255, 255, 255, 0.045);
}

.worldcup-future-card h3 {
  margin-bottom: 6px;
}

/* =========================================
   WORLD CUP MOBILE BREATHING ROOM
========================================= */

@media (max-width: 760px) {
  .worldcup-page .tournament-panel {
    padding: 12px;
  }

  .worldcup-tabs .tournament-tab {
    min-height: 34px;
    padding: 8px 11px;
    font-size: 0.76rem;
  }

  .worldcup-standings-grid {
    grid-template-columns: 1fr;
  }

  .worldcup-knockout-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   WORLD CUP STANDINGS OVERVIEW — V3
   Hidden heading:
   These panels replaced the accidental giant oval legends.
   The page should explain the tournament before asking the
   visitor to inspect twelve separate group tables.
========================================= */

.worldcup-standings-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1.2fr) minmax(0, 1fr);
  gap: 14px;

  margin: 16px 0 20px;
}

.worldcup-summary-card {
  padding: 14px;

  border: 1px solid rgba(140, 190, 255, 0.18);
  border-radius: 16px;

  background:
    linear-gradient(
      to bottom,
      rgba(18, 38, 68, 0.84),
      rgba(8, 22, 44, 0.74)
    );

  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.worldcup-summary-card h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.worldcup-summary-card p {
  margin: 0 0 12px;
  color: #bed0ec;
  font-size: 0.82rem;
  line-height: 1.45;
}

.worldcup-summary-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 10px;
  padding: 5px 10px;

  border-radius: 999px;
  border: 1px solid rgba(92, 168, 255, 0.35);

  color: #ffffff;
  background: rgba(92, 168, 255, 0.13);

  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.worldcup-summary-list {
  display: grid;
  gap: 6px;
}

.worldcup-summary-team {
  display: grid;
  grid-template-columns: 28px 24px minmax(0, 1fr);
  align-items: center;
  gap: 6px;

  min-width: 0;
  padding: 5px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.07);

  font-size: 0.8rem;
}

.worldcup-summary-team strong {
  color: #7fc7ff;
  font-weight: 900;
}

.worldcup-summary-team span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worldcup-third-race-list {
  display: grid;
  gap: 4px;
}

.worldcup-third-race-row {
  display: grid;
  grid-template-columns: 24px 24px minmax(0, 1fr) 34px 42px 40px;
  align-items: center;
  gap: 6px;

  padding: 5px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.07);

  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.worldcup-third-race-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worldcup-third-race-row.is-inside-cut .worldcup-third-rank {
  color: #f7c948;
}

.worldcup-third-race-row.is-outside-cut {
  opacity: 0.66;
}

.worldcup-third-rank,
.worldcup-third-source,
.worldcup-third-points,
.worldcup-third-gd {
  text-align: right;
  color: #b8c9e8;
}

.worldcup-third-points {
  color: #ffffff;
  font-weight: 900;
}

.worldcup-standings-key {
  display: grid;
  gap: 10px;
}

.worldcup-standings-key span {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: #dce9ff;
  font-size: 0.84rem;
}

/* Keep the old legend from ever becoming giant grey ovals again. */
.worldcup-standings-legend {
  align-items: flex-start;
}

.worldcup-standings-legend span {
  width: auto;
  height: auto;
  min-height: 0;
  align-self: flex-start;
}

/* =========================================
   WORLD CUP RULES TAB — V3
   Hidden heading:
   The visible rules page and the code comments should agree.
   Before future tournaments, compare both against the current
   official regulation PDF.
========================================= */

.worldcup-rules-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;

  margin-top: 16px;
}

.worldcup-rule-card {
  padding: 16px;

  border: 1px solid rgba(140, 190, 255, 0.18);
  border-radius: 16px;

  background:
    linear-gradient(
      to bottom,
      rgba(18, 38, 68, 0.84),
      rgba(8, 22, 44, 0.74)
    );
}

.worldcup-rule-card h3 {
  margin: 0 0 10px;
}

.worldcup-rule-card ul {
  margin: 0;
  padding-left: 20px;
}

.worldcup-rule-card li,
.worldcup-rule-card p {
  color: #d6e5ff;
  font-size: 0.9rem;
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .worldcup-standings-overview,
  .worldcup-rules-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .worldcup-third-race-row {
    grid-template-columns: 24px 24px minmax(0, 1fr) 38px;
  }

  .worldcup-third-source,
  .worldcup-third-gd {
    display: none;
  }
}

/* =========================================
   WORLD CUP STANDINGS OVERVIEW — V3.1
   Hidden heading:
   The summary panels must behave like polite citizens.
   No overlapping, no invading the group cards, no desktop
   wrestling match with the sidebar.
========================================= */

.worldcup-standings-overview {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;

  width: 100%;
  max-width: 100%;
}

.worldcup-summary-card {
  min-width: 0;
  overflow: hidden;
}

.worldcup-summary-card h3,
.worldcup-summary-card p {
  overflow-wrap: anywhere;
}

.worldcup-summary-team,
.worldcup-third-race-row,
.worldcup-standings-key span {
  min-width: 0;
}

.worldcup-standings-key {
  align-content: start;
}

.worldcup-standings-grid {
  clear: both;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 1280px) {
  .worldcup-standings-overview {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  .worldcup-summary-card.is-third-race {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .worldcup-standings-overview {
    grid-template-columns: 1fr;
  }

  .worldcup-summary-card.is-third-race {
    grid-column: auto;
  }
}

/* =========================================
   WORLD CUP STANDINGS TABLE — BUILD 05
   Hidden heading:
   Google-style readability without copying Google.
   Numbers line up, points are proud, and third-place
   teams show whether they are inside the live cut line.
========================================= */

.worldcup-summary-list.is-scrollable {
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.worldcup-summary-mini {
  margin-top: 14px;
  padding-top: 12px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  color: #c9d8ef;
  font-size: 0.82rem;
}

.worldcup-summary-mini strong {
  color: #ffffff;
  font-weight: 900;
}

.worldcup-third-cut-line {
  display: flex;
  align-items: center;
  gap: 8px;

  margin: 4px 0;

  color: #f7c948;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.worldcup-third-cut-line::before,
.worldcup-third-cut-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(247, 201, 72, 0.5);
}

.worldcup-standings-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  margin-bottom: 10px;
}

.worldcup-standings-card-title h3 {
  margin: 0;
}

.worldcup-group-state-pill {
  flex: 0 0 auto;

  padding: 4px 8px;

  border-radius: 999px;
  border: 1px solid rgba(140, 190, 255, 0.2);

  color: #bed0ec;
  background: rgba(255, 255, 255, 0.06);

  font-size: 0.72rem;
  font-weight: 800;
}

.worldcup-standings-card.is-complete .worldcup-group-state-pill {
  color: #d9f7e8;
  border-color: rgba(77, 214, 139, 0.35);
  background: rgba(77, 214, 139, 0.12);
}

.worldcup-standings-table {
  border-collapse: separate;
  border-spacing: 0;
}

.worldcup-standings-table tbody tr {
  position: relative;
}

.worldcup-standings-table tbody tr.is-qualified {
  background: rgba(67, 151, 255, 0.12);
}

.worldcup-standings-table tbody tr.is-best-third {
  background: rgba(247, 201, 72, 0.12);
}

.worldcup-standings-table tbody tr.is-third-outside {
  background: rgba(255, 255, 255, 0.035);
}

.worldcup-standings-table tbody tr.is-qualified td:first-child,
.worldcup-standings-table tbody tr.is-best-third td:first-child,
.worldcup-standings-table tbody tr.is-third-outside td:first-child {
  box-shadow: inset 4px 0 0 rgba(255, 255, 255, 0.12);
}

.worldcup-standings-table tbody tr.is-qualified td:first-child {
  box-shadow: inset 4px 0 0 #4aa3ff;
}

.worldcup-standings-table tbody tr.is-best-third td:first-child {
  box-shadow: inset 4px 0 0 #f7c948;
}

.worldcup-standings-table tbody tr.is-third-outside td:first-child {
  box-shadow: inset 4px 0 0 rgba(190, 208, 236, 0.28);
}

.qualification-marker.is-best-third {
  background: #f7c948;
  box-shadow: 0 0 0 3px rgba(247, 201, 72, 0.15);
}

.qualification-marker.is-third-outside {
  background: rgba(190, 208, 236, 0.45);
}

.third-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 28px;
  padding: 2px 6px;

  border-radius: 999px;
  border: 1px solid rgba(247, 201, 72, 0.28);

  color: #f7c948;
  background: rgba(247, 201, 72, 0.1);

  font-size: 0.7rem;
  font-weight: 900;
}

.worldcup-standings-table .points-cell {
  color: #ffffff;
  font-size: 1.02rem;
  font-weight: 950;
}

/* =========================================
   WORLD CUP KNOCKOUT PLACEHOLDERS — BUILD 05
   Hidden heading:
   Direct slots such as 1A and 2B can resolve immediately
   from standings. Third-place slots must wait for Annexe C.
========================================= */

.worldcup-slot-team,
.worldcup-slot-pending-third {
  display: inline-grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;

  max-width: 100%;
}

.worldcup-slot-team strong,
.worldcup-slot-pending-third strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worldcup-slot-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 34px;
  padding: 2px 6px;

  border-radius: 999px;
  border: 1px solid rgba(140, 190, 255, 0.22);

  color: #93c9ff;
  background: rgba(92, 168, 255, 0.1);

  font-size: 0.7rem;
  font-weight: 900;
}

.worldcup-slot-pending-third .worldcup-slot-code {
  color: #f7c948;
  border-color: rgba(247, 201, 72, 0.28);
  background: rgba(247, 201, 72, 0.1);
}

@media (max-width: 700px) {
  .worldcup-standings-card-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .worldcup-summary-list.is-scrollable {
    max-height: none;
  }

  .third-rank-badge {
    display: none;
  }
}

/* =========================================
   WORLD CUP GROUP TABLES — BUILD 06 WIDTH FIX
   Hidden heading:
   The group tables were working, but they were being squeezed
   by an older grid rule meant for simple placeholder cards.
   This section tells the World Cup standings area to breathe.
========================================= */

#tournament-groups-list {
  display: block !important;
}

#tournament-groups-list > .worldcup-standings-overview,
#tournament-groups-list > .worldcup-standings-grid {
  width: 100%;
  max-width: 100%;
}

.worldcup-standings-overview {
  display: grid;
  grid-template-columns:
    minmax(260px, 0.85fr)
    minmax(320px, 1.1fr)
    minmax(230px, 0.75fr);

  gap: 16px;
  align-items: start;

  margin: 16px 0 22px;
}

.worldcup-standings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 18px;
  align-items: start;

  width: 100%;
  max-width: 100%;
}

.worldcup-standings-card {
  min-width: 0;
  overflow: hidden;

  padding: 15px;
}

.worldcup-standings-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-bottom: 12px;
}

.worldcup-standings-card-title h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;
  background: transparent;

  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1.15;
  white-space: nowrap;
}

.worldcup-group-state-pill {
  flex: 0 0 auto;
  max-width: 46%;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worldcup-standings-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.worldcup-standings-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;

  border-collapse: separate;
  border-spacing: 0;

  font-size: 0.82rem;
}

.worldcup-standings-table th,
.worldcup-standings-table td {
  padding: 8px 5px;
  text-align: center;
  white-space: nowrap;
}

.worldcup-standings-table th:first-child,
.worldcup-standings-table td:first-child {
  width: 48%;
  text-align: left;
}

.worldcup-standings-table th:not(:first-child),
.worldcup-standings-table td:not(:first-child) {
  width: 6.5%;
  font-variant-numeric: tabular-nums;
}

.worldcup-standings-table .team-cell {
  display: flex;
  align-items: center;
  gap: 6px;

  min-width: 0;
}

.worldcup-standings-table .team-cell strong {
  min-width: 0;
  max-width: none;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.standing-rank {
  flex: 0 0 18px;
}

.qualification-marker {
  flex: 0 0 4px;
  height: 28px;
}

.third-rank-badge {
  flex: 0 0 auto;
  min-width: 24px;
  padding: 2px 5px;

  font-size: 0.66rem;
}

.worldcup-standings-table .points-cell {
  color: #ffffff;
  font-size: 0.96rem;
  font-weight: 950;
}

@media (max-width: 1400px) {
  .worldcup-standings-overview {
    grid-template-columns: 1fr 1fr;
  }

  .worldcup-summary-card.is-third-race {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .worldcup-standings-overview,
  .worldcup-standings-grid {
    grid-template-columns: 1fr;
  }

  .worldcup-summary-card.is-third-race {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .worldcup-standings-card {
    padding: 12px;
  }

  .worldcup-standings-card-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .worldcup-group-state-pill {
    max-width: 100%;
  }

  .worldcup-standings-table {
    min-width: 520px;
  }
}

/* =========================================
   WORLD CUP KNOCKOUT CAMERA — BUILD 07
   Hidden heading:
   Google's bracket feels like a wide canvas. The user clicks
   arrows and the camera glides from Round of 32 to Final.
   This is the first Aggelioforum version of that behaviour.
========================================= */

.worldcup-knockout-camera-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  margin: 6px 0 14px;
}

.worldcup-knockout-camera-heading h3 {
  margin: 0 0 4px;
}

.worldcup-knockout-camera-heading p {
  margin: 0;
  max-width: 760px;

  color: #b8c9e8;
  font-size: 0.92rem;
}

.worldcup-knockout-camera-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  flex: 0 0 auto;
}

.worldcup-knockout-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border: 1px solid rgba(126, 192, 255, 0.5);
  border-radius: 50%;

  color: #ffffff;
  background: rgba(48, 86, 130, 0.9);

  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;

  cursor: pointer;
}

.worldcup-knockout-arrow:disabled {
  cursor: default;
  opacity: 0.35;
}

.worldcup-knockout-camera-label {
  min-width: 44px;
  text-align: center;

  color: #dceaff;
  font-size: 0.78rem;
  font-weight: 900;
}

.worldcup-knockout-camera-wrap {
  position: relative;

  overflow: hidden;

  border: 1px solid rgba(115, 165, 235, 0.2);
  border-radius: 22px;

  background:
    radial-gradient(
      circle at top left,
      rgba(75, 139, 218, 0.16),
      transparent 34%
    ),
    rgba(4, 16, 35, 0.62);
}

.worldcup-knockout-camera {
  display: flex;
  gap: 22px;

  overflow-x: auto;
  overflow-y: hidden;

  padding: 18px;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  -webkit-overflow-scrolling: touch;
}

.worldcup-knockout-camera::-webkit-scrollbar {
  height: 8px;
}

.worldcup-knockout-camera::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}

.worldcup-knockout-camera::-webkit-scrollbar-thumb {
  background: rgba(118, 190, 255, 0.42);
  border-radius: 999px;
}

.worldcup-knockout-stage-column {
  flex: 0 0 min(360px, 84vw);
  scroll-snap-align: start;

  opacity: 0.62;
  transform: scale(0.965);
  transform-origin: center top;

  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.worldcup-knockout-stage-column.is-active {
  opacity: 1;
  transform: scale(1);
}

.worldcup-knockout-column-title {
  position: sticky;
  top: 0;
  z-index: 1;

  margin-bottom: 10px;
  padding: 4px 2px 8px;

  background: linear-gradient(
    to bottom,
    rgba(4, 16, 35, 0.96),
    rgba(4, 16, 35, 0)
  );
}

.worldcup-knockout-column-title h4 {
  margin: 0;

  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 900;
}

.worldcup-knockout-column-cards {
  display: grid;
  gap: 12px;
}

.worldcup-knockout-camera .worldcup-knockout-card {
  min-height: 118px;
}

.worldcup-knockout-camera .worldcup-knockout-teams {
  grid-template-columns: 1fr;
  gap: 6px;

  margin-top: 10px;
}

.worldcup-knockout-camera .worldcup-knockout-teams > div:first-child,
.worldcup-knockout-camera .worldcup-knockout-teams > div:last-child {
  text-align: left;
}

.worldcup-knockout-camera .worldcup-knockout-score {
  min-width: 0;
  text-align: left;

  color: #9fd6ff;
  font-size: 0.8rem;
}

@media (max-width: 760px) {
  .worldcup-knockout-camera-heading {
    flex-direction: column;
  }

  .worldcup-knockout-camera-controls {
    align-self: stretch;
    justify-content: space-between;
  }

  .worldcup-knockout-camera {
    padding: 14px;
  }

  .worldcup-knockout-stage-column {
    flex-basis: min(320px, 86vw);
  }
}

/* =========================================
   WORLD CUP KNOCKOUT BRACKET TREE — BUILD 08
   Hidden heading:
   The Build 07 camera proved the idea. Build 08 starts turning
   the knockout view into a real tournament tree: later rounds are
   vertically centered between the matches that feed them, and simple
   connector lines make the bracket feel connected instead of like
   floating cards.

   Future John:
   This is layout logic, not FIFA rules logic. The bracket positions
   can be reused by other knockout tournaments, but the slot mapping
   must remain tournament-specific.
========================================= */

.worldcup-knockout-camera-wrap {
  overflow: hidden;
}

.worldcup-knockout-camera {
  --wc-bracket-card-height: 118px;
  --wc-bracket-card-gap: 12px;
  --wc-bracket-unit: calc(
    var(--wc-bracket-card-height) + var(--wc-bracket-card-gap)
  );

  gap: 34px;
  padding: 18px 26px 28px;

  scroll-padding-left: 26px;
}

.worldcup-knockout-stage-column {
  position: relative;
  flex: 0 0 300px;

  opacity: 0.88;
  transform: none;
}

.worldcup-knockout-stage-column.is-active {
  opacity: 1;
  transform: none;
}

.worldcup-knockout-stage-column[data-bracket-depth="0"] .worldcup-knockout-column-cards {
  gap: var(--wc-bracket-card-gap);
  padding-top: 0;
}

.worldcup-knockout-stage-column[data-bracket-depth="1"] .worldcup-knockout-column-cards {
  gap: calc((var(--wc-bracket-unit) * 2) - var(--wc-bracket-card-height));
  padding-top: calc(var(--wc-bracket-unit) / 2);
}

.worldcup-knockout-stage-column[data-bracket-depth="2"] .worldcup-knockout-column-cards {
  gap: calc((var(--wc-bracket-unit) * 4) - var(--wc-bracket-card-height));
  padding-top: calc(var(--wc-bracket-unit) * 1.5);
}

.worldcup-knockout-stage-column[data-bracket-depth="3"] .worldcup-knockout-column-cards {
  gap: calc((var(--wc-bracket-unit) * 8) - var(--wc-bracket-card-height));
  padding-top: calc(var(--wc-bracket-unit) * 3.5);
}

.worldcup-knockout-stage-column[data-bracket-depth="4"] .worldcup-knockout-column-cards {
  gap: var(--wc-bracket-card-gap);
  padding-top: calc(var(--wc-bracket-unit) * 7.5);
}

.worldcup-knockout-column-cards {
  position: relative;
}

.worldcup-knockout-camera .worldcup-knockout-card {
  position: relative;
  min-height: var(--wc-bracket-card-height);
}

.worldcup-knockout-stage-column:not(:last-child) .worldcup-knockout-card::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;

  width: 34px;
  height: 1px;

  background: rgba(151, 206, 255, 0.35);
}

.worldcup-knockout-stage-column:not(:first-child) .worldcup-knockout-card::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;

  width: 34px;
  height: 1px;

  background: rgba(151, 206, 255, 0.22);
}

.worldcup-knockout-stage-column[data-bracket-depth="1"] .worldcup-knockout-card:nth-child(odd)::before,
.worldcup-knockout-stage-column[data-bracket-depth="2"] .worldcup-knockout-card:nth-child(odd)::before,
.worldcup-knockout-stage-column[data-bracket-depth="3"] .worldcup-knockout-card:nth-child(odd)::before,
.worldcup-knockout-stage-column[data-bracket-depth="4"] .worldcup-knockout-card:nth-child(odd)::before {
  box-shadow: none;
}

.worldcup-knockout-column-title {
  position: sticky;
  left: 0;
  top: 0;
}

@media (min-width: 1100px) {
  .worldcup-knockout-stage-column {
    flex-basis: 320px;
  }
}

@media (max-width: 760px) {
  .worldcup-knockout-camera {
    --wc-bracket-card-height: 118px;

    gap: 24px;
    padding: 14px 18px 24px;
  }

  .worldcup-knockout-stage-column {
    flex-basis: min(320px, 86vw);
  }

  .worldcup-knockout-stage-column:not(:last-child) .worldcup-knockout-card::after,
  .worldcup-knockout-stage-column:not(:first-child) .worldcup-knockout-card::before {
    width: 24px;
  }
}

/* =========================================
   WORLD CUP KNOCKOUT BRACKET TREE — BUILD 09
   Hidden heading:
   The camera/swipe behaviour is good. This pass fixes the
   bracket geometry so each stage is positioned relative to
   the currently open stage, and draws real SVG connector
   lines instead of little floating CSS stubs.

   Future John:
   The bronze final is a separate match. It must never feed
   into the World Cup final.
========================================= */

.worldcup-knockout-camera {
  position: relative;

  --wc-bracket-card-height: 116px;
  --wc-bracket-card-gap: 14px;
  --wc-bracket-unit: calc(
    var(--wc-bracket-card-height) + var(--wc-bracket-card-gap)
  );

  gap: 56px;
  scroll-behavior: smooth;
}

.worldcup-knockout-connector-svg {
  position: absolute;
  inset: 0;
  z-index: 1;

  pointer-events: none;
  overflow: visible;
}

.worldcup-knockout-connector-path {
  fill: none;
  stroke: rgba(142, 208, 255, 0.42);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.worldcup-knockout-stage-column {
  z-index: 2;
  flex-basis: 320px;
}

.worldcup-knockout-column-title {
  position: relative;
  left: auto;
  top: auto;
  z-index: 3;

  min-height: 38px;
  margin-bottom: 10px;
}

.worldcup-knockout-camera .worldcup-knockout-card {
  min-height: var(--wc-bracket-card-height);
}

/* Disable Build 08's temporary connector stubs.
   Build 09 uses SVG paths so the lines can turn up/down
   toward their actual target match. */
.worldcup-knockout-stage-column:not(:last-child) .worldcup-knockout-card::after,
.worldcup-knockout-stage-column:not(:first-child) .worldcup-knockout-card::before {
  display: none;
}

.worldcup-knockout-stage-column[data-relative-depth="0"] .worldcup-knockout-column-cards {
  gap: var(--wc-bracket-card-gap);
  padding-top: 0;
}

.worldcup-knockout-stage-column[data-relative-depth="1"] .worldcup-knockout-column-cards {
  gap: calc((var(--wc-bracket-unit) * 2) - var(--wc-bracket-card-height));
  padding-top: calc(var(--wc-bracket-unit) / 2);
}

.worldcup-knockout-stage-column[data-relative-depth="2"] .worldcup-knockout-column-cards {
  gap: calc((var(--wc-bracket-unit) * 4) - var(--wc-bracket-card-height));
  padding-top: calc(var(--wc-bracket-unit) * 1.5);
}

.worldcup-knockout-stage-column[data-relative-depth="3"] .worldcup-knockout-column-cards {
  gap: calc((var(--wc-bracket-unit) * 8) - var(--wc-bracket-card-height));
  padding-top: calc(var(--wc-bracket-unit) * 3.5);
}

.worldcup-knockout-stage-column[data-relative-depth="4"] .worldcup-knockout-column-cards {
  gap: calc((var(--wc-bracket-unit) * 16) - var(--wc-bracket-card-height));
  padding-top: calc(var(--wc-bracket-unit) * 7.5);
}

@media (max-width: 760px) {
  .worldcup-knockout-camera {
    gap: 34px;
  }

  .worldcup-knockout-stage-column {
    flex-basis: min(320px, 86vw);
  }
}

/* =========================================
   WORLD CUP KNOCKOUT BRACKET TREE — FIX 04
   Hidden heading:
   Build 09 drew the bracket as independent columns. Fix 04 lets
   JavaScript nudge every next-round card into the vertical centre
   of the two cards that feed it, then redraws SVG connector lines
   against the final measured positions.

   Future John:
   This is visual bracket geometry only. It does not change match
   rules, winners, fixtures, or API data.
========================================= */

.worldcup-knockout-camera {
  padding-bottom: 120px;
}

.worldcup-knockout-camera .worldcup-knockout-card {
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.worldcup-knockout-connector-svg {
  min-height: 100%;
}

/* =========================================
   WORLD CUP KNOCKOUT BRACKET TREE — FIX 05
   Hidden heading:
   Keep connector lines visible after the official bracket-order
   correction. The SVG sits under the cards but above the canvas.
========================================= */

.worldcup-knockout-camera {
  isolation: isolate;
}

.worldcup-knockout-connector-svg {
  display: block;
  left: 0;
  top: 0;
  z-index: 1;
}

.worldcup-knockout-connector-path {
  stroke: rgba(126, 214, 255, 0.68);
  stroke-width: 2.5;
}

.worldcup-knockout-stage-column {
  position: relative;
  z-index: 2;
}

.worldcup-match-topline:empty {
  display: none;
}

/* =========================================
   WORLD CUP KNOCKOUT BRACKET TREE — FIX 06
   Hidden heading:
   Full bracket pass. Keep the Google-like stage transition:
   when the camera moves from Round of 32 to Round of 16, the
   visible active column compresses to normal spacing and later
   stages re-center from that new source stage.

   Also force connector SVG above the canvas background and redraw
   cleanly after the transform animation settles.
========================================= */

.worldcup-knockout-camera-wrap {
  overflow: hidden;
}

.worldcup-knockout-camera {
  position: relative;
  align-items: flex-start;
  isolation: isolate;
  transition: min-height 260ms ease;
}

.worldcup-knockout-camera .worldcup-knockout-card {
  position: relative;
  z-index: 4;
  will-change: transform;
  transition:
    transform 260ms cubic-bezier(0.22, 0.72, 0.22, 1),
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.worldcup-knockout-connector-svg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  display: block;
  pointer-events: none;
  overflow: visible;
}

.worldcup-knockout-connector-path {
  fill: none;
  stroke: rgba(132, 218, 255, 0.9);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(65, 190, 255, 0.35));
}

/* Stage-transition compression.
   These use relative depth, so the same stage changes spacing when
   it becomes the active camera stage, just like Google's bracket. */
.worldcup-knockout-stage-column[data-relative-depth="0"] .worldcup-knockout-column-cards {
  gap: 14px;
  padding-top: 0;
}

.worldcup-knockout-stage-column[data-relative-depth="1"] .worldcup-knockout-column-cards {
  gap: calc((var(--wc-bracket-unit) * 2) - var(--wc-bracket-card-height));
  padding-top: calc(var(--wc-bracket-unit) * 0.5);
}

/* =========================================
   WORLD CUP KNOCKOUT BRACKET TREE — FIX 07
   Hidden heading:
   Stage-focused absolute layout. The active visible stage is always
   compact; later stages are positioned by JavaScript from the exact
   centers of their source cards. This removes the old exponential CSS
   spacing and gives the swipe-left convergence feeling.
========================================= */

.worldcup-knockout-camera {
  --wc-bracket-card-height: 116px;
  --wc-bracket-card-gap: 14px;

  align-items: flex-start;
  gap: 46px;
  padding-right: 120px;
}

.worldcup-knockout-column-cards {
  display: block;
  position: relative;
  gap: 0 !important;
  padding-top: 0 !important;
}

.worldcup-knockout-camera .worldcup-knockout-card {
  position: absolute;
  width: 100%;
  min-height: var(--wc-bracket-card-height);
}

.worldcup-knockout-stage-column {
  flex: 0 0 310px;
}

.worldcup-knockout-stage-column[data-relative-depth="0"] {
  opacity: 1;
}

.worldcup-knockout-stage-column[data-relative-depth="1"],
.worldcup-knockout-stage-column[data-relative-depth="2"],
.worldcup-knockout-stage-column[data-relative-depth="3"],
.worldcup-knockout-stage-column[data-relative-depth="4"] {
  opacity: 0.96;
}

.worldcup-knockout-connector-path {
  stroke: rgba(132, 235, 255, 0.82);
  stroke-width: 2.4;
  filter: drop-shadow(0 0 4px rgba(83, 205, 255, 0.32));
}

@media (max-width: 760px) {
  .worldcup-knockout-camera {
    gap: 30px;
    padding-right: 80px;
  }

  .worldcup-knockout-stage-column {
    flex-basis: min(310px, 82vw);
  }
}

/* =========================================
   WORLD CUP KNOCKOUT — FIX 08 STAGE FOCUS
   Hidden heading:
   Manual swiping now promotes the nearest stage into the active
   camera stage. These rules make that rebuilt stage feel tighter,
   so the user does not get lost inside empty Round-of-32 space.
========================================= */

.worldcup-knockout-camera {
  gap: 38px;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 18px;
}

.worldcup-knockout-camera.is-stage-changing {
  scroll-snap-type: none;
}

.worldcup-knockout-stage-column {
  scroll-snap-align: start;
}

.worldcup-knockout-camera .worldcup-knockout-card {
  transition:
    transform 260ms ease,
    opacity 220ms ease;
}

.worldcup-knockout-camera.is-layout-ready .worldcup-knockout-card {
  will-change: transform, opacity;
}

.worldcup-knockout-camera.is-stage-changing .worldcup-knockout-connector-path {
  opacity: 0.35;
}

.worldcup-knockout-stage-column[data-relative-depth="0"] .worldcup-knockout-card {
  transform: scale(1);
}

.worldcup-knockout-stage-column[data-relative-depth="1"] .worldcup-knockout-card,
.worldcup-knockout-stage-column[data-relative-depth="2"] .worldcup-knockout-card,
.worldcup-knockout-stage-column[data-relative-depth="3"] .worldcup-knockout-card,
.worldcup-knockout-stage-column[data-relative-depth="4"] .worldcup-knockout-card {
  transform: scale(0.985);
}

.worldcup-knockout-connector-path {
  transition: d 260ms ease, opacity 220ms ease;
}

@media (max-width: 760px) {
  .worldcup-knockout-camera {
    gap: 24px;
    padding-left: 12px;
    padding-right: 58px;
    scroll-padding-left: 12px;
  }

  .worldcup-knockout-stage-column {
    flex-basis: min(296px, 82vw);
  }

  .worldcup-knockout-camera .worldcup-knockout-card {
    min-height: 106px;
  }
}

/* =========================================
   WORLD CUP KNOCKOUT — FIX 09
   Hidden heading:
   Final and bronze-final now share the same visual lane.
   The bronze match sits below the Final card, fed from the
   semi-final trunk, instead of floating as an unrelated column.
========================================= */

.worldcup-knockout-stage-column[data-final-stack="bronze"] {
  margin-left: calc(-310px - 38px);
  pointer-events: auto;
}

.worldcup-knockout-stage-column[data-final-stack="bronze"] .worldcup-knockout-column-title {
  visibility: hidden;
}

@media (max-width: 760px) {
  .worldcup-knockout-stage-column[data-final-stack="bronze"] {
    margin-left: calc(-1 * min(296px, 82vw) - 24px);
  }
}

/* =========================================
   WORLD CUP KNOCKOUT — FIX 15 MOTION OWNER

   Hidden heading:
   The responsive bracket camera is now controlled by JavaScript,
   not browser smooth scrolling or scroll snap. This prevents Safari
   and Chrome from deciding that a half-visible stage is "good enough".

   One transition. One destination. One owner.

   Running in Genius Mode™
========================================= */

.worldcup-knockout-camera {
    scroll-behavior: auto;
    scroll-snap-type: none;
}

.worldcup-knockout-camera.is-stage-changing {
    scroll-behavior: auto;
    scroll-snap-type: none;
}

.worldcup-knockout-end-spacer {
    flex: 0 0 max(68vw, 260px);
    min-height: 1px;
    pointer-events: none;
}

/* =========================================
   WORLD CUP KNOCKOUT — FIX 17 STAGE FOCUS

   Hidden heading:
   The old bronze/final stacking experiment deliberately pulled the
   third-place column back on top of the final column. That was useful
   while testing the full wall bracket, but it breaks the focused stage
   view: Final and Third Place overlap and previous chapters appear to
   haunt the active one.

   From this point, each selected stage owns its own clean column.
   Previous stages are removed by JavaScript; CSS must not drag another
   stage back into the same lane.

   Running in Genius Mode™
========================================= */

.worldcup-knockout-stage-column[data-final-stack="bronze"] {
    margin-left: 0;
}

.worldcup-knockout-stage-column[data-final-stack="bronze"] .worldcup-knockout-column-title {
    visibility: visible;
}

@media (max-width: 760px) {
    .worldcup-knockout-stage-column[data-final-stack="bronze"] {
        margin-left: 0;
    }
}

/* =========================================
   WORLD CUP KNOCKOUT — FIX 21 FINALS CONNECTOR OUTSIDE CARDS

   Hidden heading:
   The Finals mirror connector must never draw through the Final /
   Third Place cards. The JavaScript now keeps the right-side split
   spine outside the card column; this CSS gives the split enough air
   to read cleanly.

   Running in Genius Mode™
========================================= */

.worldcup-knockout-camera[data-active-stage="semiFinals"],
.worldcup-knockout-camera[data-active-stage="finals"] {
    gap: 270px;
}

@media (max-width: 760px) {
    .worldcup-knockout-camera[data-active-stage="semiFinals"],
    .worldcup-knockout-camera[data-active-stage="finals"] {
        gap: 190px;
    }
}

/* =========================================
   WORLD CUP KNOCKOUT — FIX 20 FINALS BREATHING ROOM

   Hidden heading:
   The merged Finals stage uses John's mirrored sketch:

       Semi 1 ──┐           ┌────── Final
                ├───────────┤
       Semi 2 ──┘           └────── Third Place

   Fix 19 made the connector structurally correct. Fix 20 gives it
   enough air: the Finals column moves farther right and the mirrored
   right branches become long enough to read as deliberate bracket
   geometry, not tangled connector leftovers.

   Running in Genius Mode™
========================================= */

.worldcup-knockout-camera[data-active-stage="semiFinals"],
.worldcup-knockout-camera[data-active-stage="finals"] {
    gap: 270px;
}

.worldcup-knockout-connector-path.is-finals-mirror {
    stroke-width: 3;
    stroke: rgba(132, 245, 255, 0.95);
}

.worldcup-knockout-connector-path.is-finals-bridge {
    filter: drop-shadow(0 0 7px rgba(83, 205, 255, 0.45));
}

/* =========================================
   WORLD CUP KNOCKOUT — FIX 26 STAGE SNAP + PHONE FOCUS

   Hidden heading:
   Mouse / trackpad wheel movement must step between bracket stages.
   It must not leave the camera resting halfway between two phases.

   Phones show one stage at a time. The next stage should not peek in
   from the right edge; swipe/arrows provide the navigation.

   Running in Genius Mode™
========================================= */

.worldcup-knockout-camera {
    overscroll-behavior-x: contain;
}

@media (max-width: 640px) {
    .worldcup-knockout-camera {
        overflow-x: hidden;
        gap: 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    .worldcup-knockout-stage-column {
        flex-basis: calc(100vw - 48px);
        max-width: calc(100vw - 48px);
    }

    .worldcup-knockout-end-spacer {
        display: none;
    }

    .worldcup-knockout-connector-svg {
        display: none;
    }
}

/* =========================================
   WORLD CUP KNOCKOUT — FIX 28 FINALS FOCUS + SNAP LANDING

   Hidden heading:
   The Finals tab is now its own focused chapter. It does not keep
   Semi-finals beside it, and it does not keep a phantom canvas to
   the right. Desktop wheel movement changes stages; the rebuilt
   stage lands at the start instead of trembling between columns.

   Running in Genius Mode™
========================================= */

.worldcup-knockout-camera[data-active-stage="finals"] {
    gap: 0;
    padding-right: 26px;
}

.worldcup-knockout-camera[data-active-stage="finals"] .worldcup-knockout-end-spacer {
    display: none;
}

.worldcup-knockout-camera[data-active-stage="finals"] .worldcup-knockout-stage-column {
    flex-basis: 320px;
}

@media (max-width: 640px) {
    .worldcup-knockout-camera[data-active-stage="finals"] {
        padding-right: 12px;
    }

    .worldcup-knockout-camera[data-active-stage="finals"] .worldcup-knockout-stage-column {
        flex-basis: calc(100vw - 48px);
        max-width: calc(100vw - 48px);
    }
}

/* =========================================
   WORLD CUP KNOCKOUT — FIX 29 LANDING CLEANUP

   Hidden heading:
   The bracket should not tremble while changing stages. Stage
   changes rebuild the visible columns, so cards/connectors must land
   immediately after layout math instead of animating through old
   positions.

   Also: the Finals chapter is a focused chapter. It must not keep a
   phantom horizontal desert after the two final matches.

   Running in Genius Mode™
========================================= */

.worldcup-knockout-stage-column {
    transition: none !important;
}

.worldcup-knockout-camera .worldcup-knockout-card {
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease !important;

    will-change: auto !important;
}

.worldcup-knockout-connector-path {
    transition: none !important;
}

.worldcup-knockout-camera.is-stage-changing .worldcup-knockout-card,
.worldcup-knockout-camera.is-stage-changing .worldcup-knockout-connector-path {
    transition: none !important;
}

.worldcup-knockout-camera[data-active-stage="finals"] {
    overflow-x: hidden;
    width: min(100%, 720px);
    max-width: 720px;
    padding-right: 18px;
}

.worldcup-knockout-camera[data-active-stage="finals"] .worldcup-knockout-end-spacer {
    display: none !important;
    flex-basis: 0 !important;
}

.worldcup-knockout-camera[data-active-stage="finals"] .worldcup-knockout-connector-svg {
    display: none;
}

@media (max-width: 640px) {
    .worldcup-knockout-camera[data-active-stage="finals"] {
        width: 100%;
        max-width: 100%;
        padding-right: 12px;
    }
}

/* =========================================
   UEFA COMPETITION PAGES
   Shared by Champions League, Europa League,
   and Conference League.
========================================= */

.uefa-page {
  min-width: 0;
}

.uefa-hero {
  overflow: hidden;
}

.uefa-hero-inner {
  display: flex;
  align-items: center;
  gap: 24px;
}

.uefa-hero-logo {
  width: 92px;
  height: 92px;
  object-fit: contain;
  flex: 0 0 auto;
}

.uefa-kicker,
.uefa-eyebrow {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.78;
}

.uefa-quick-notes,
.uefa-standings-key {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.uefa-quick-notes span,
.uefa-data-state,
.uefa-stage-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
  font-weight: 750;
}

.uefa-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.uefa-tabs .tournament-tab {
  flex: 0 0 auto;
}

.uefa-panel {
  display: none;
}

.uefa-panel.active {
  display: block;
}

.uefa-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.uefa-panel-heading h2 {
  margin: 0;
}

.uefa-stage-roadmap {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.uefa-stage-roadmap button {
  min-height: 82px;
  padding: 12px;
  border: 1px solid rgba(116, 219, 255, 0.28);
  border-radius: 14px;
  background: rgba(11, 48, 79, 0.48);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.uefa-stage-roadmap strong,
.uefa-stage-roadmap span {
  display: block;
}

.uefa-stage-roadmap strong {
  margin-bottom: 5px;
  color: #8ceaff;
  font-size: 1.05rem;
}

.uefa-stage-roadmap span {
  font-size: 0.78rem;
  opacity: 0.8;
}

.uefa-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.uefa-overview-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(7, 31, 54, 0.43);
}

.uefa-overview-card h3 {
  margin: 0 0 12px;
}

.uefa-mini-list {
  display: grid;
  gap: 8px;
}

.uefa-mini-list button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: transparent;
  color: inherit;
  text-align: left;
}

.uefa-stage-tabs,
.uefa-round-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.uefa-stage-tabs {
  margin-bottom: 12px;
}

.uefa-round-tabs {
  margin-bottom: 20px;
}

.uefa-stage-tabs button,
.uefa-round-tabs button {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: inherit;
  font-weight: 750;
  cursor: pointer;
}

.uefa-stage-tabs button.active,
.uefa-round-tabs button.active {
  border-color: rgba(80, 225, 255, 0.8);
  background: rgba(36, 174, 211, 0.24);
  box-shadow: inset 0 0 0 1px rgba(80, 225, 255, 0.16);
}

.uefa-match-group + .uefa-match-group {
  margin-top: 28px;
}

.uefa-match-group h3 {
  margin: 0 0 14px;
}

.uefa-match-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.uefa-match-card {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  background: rgba(7, 28, 49, 0.48);
}

.uefa-match-card.is-live {
  border-color: rgba(255, 94, 94, 0.62);
}

.uefa-aggregate {
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
  opacity: 0.8;
}

.uefa-match-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  min-height: 124px;
}

.uefa-match-teams {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
  padding: 16px;
}

.uefa-match-team {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.uefa-match-team img,
.uefa-table-team img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.uefa-match-team span:not(.uefa-team-placeholder) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uefa-match-team.is-winner span:not(.uefa-team-placeholder),
.uefa-match-team.is-winner strong {
  font-weight: 850;
}

.uefa-team-placeholder {
  width: 25px;
  height: 29px;
  border-radius: 50% 50% 55% 55%;
  background: rgba(255, 255, 255, 0.34);
  clip-path: polygon(50% 0, 100% 18%, 89% 73%, 50% 100%, 11% 73%, 0 18%);
}

.uefa-match-meta {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
  font-size: 0.82rem;
}

.uefa-status {
  font-weight: 850;
}

.uefa-status.is-live {
  color: #ff7777;
}

.uefa-empty-state {
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 36px 20px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  text-align: center;
  background: rgba(7, 28, 49, 0.24);
}

.uefa-empty-state h3 {
  margin: 12px 0 6px;
}

.uefa-empty-state p {
  max-width: 620px;
  margin: 0;
  opacity: 0.78;
}

.uefa-empty-icon {
  font-size: 2rem;
}

.uefa-standings-key {
  margin: 0 0 16px;
}

.uefa-standings-key span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
}

.uefa-standings-key i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.uefa-standings-key .is-direct { background: #55d6a7; }
.uefa-standings-key .is-playoff { background: #f0c567; }
.uefa-standings-key .is-out { background: #75839a; }

.uefa-table-wrap {
  overflow-x: auto;
}

.uefa-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.uefa-table th,
.uefa-table td {
  padding: 11px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.uefa-table th:nth-child(2),
.uefa-table td:nth-child(2) {
  text-align: left;
}

.uefa-table tr.is-direct { box-shadow: inset 4px 0 #55d6a7; }
.uefa-table tr.is-playoff { box-shadow: inset 4px 0 #f0c567; }
.uefa-table tr.is-out { box-shadow: inset 4px 0 #75839a; }

.uefa-table-team {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 900px) {
  .uefa-stage-roadmap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .uefa-overview-grid,
  .uefa-match-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .uefa-hero-inner {
    align-items: flex-start;
    gap: 14px;
  }

  .uefa-hero-logo {
    width: 64px;
    height: 64px;
  }

  .uefa-stage-roadmap {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .uefa-stage-roadmap button {
    flex: 0 0 145px;
    scroll-snap-align: start;
  }

  .uefa-panel-heading {
    display: block;
  }

  .uefa-data-state {
    margin-top: 10px;
  }

  .uefa-match-main {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  .uefa-match-teams {
    padding: 14px 12px;
  }

  .uefa-match-meta {
    padding: 10px 8px;
    font-size: 0.74rem;
  }

  .uefa-tabs,
  .uefa-stage-tabs,
  .uefa-round-tabs {
    scroll-snap-type: x proximity;
  }

  .uefa-tabs button,
  .uefa-stage-tabs button,
  .uefa-round-tabs button {
    scroll-snap-align: start;
  }
}

/* =========================================
   STAGE / ROUND CONVERGE TRANSITIONS
   (World Cup knockout + UEFA Champions/Europa/Conference knockout)

   Future John:
   Timing/easing only. The actual view-transition-name assignments
   live in sports-soccer.js (renderWorldCupKnockoutTeamEntry) and
   sports-uefa.js (applyUefaKnockoutTransitionNames). This block was
   previously duplicated inline in scores-world-cup-001.html - moved
   here once the CSS had one shared home for every page that uses it.

   Named team groups get the slower "glide" (matches
   easeWorldCupStageGlide's cubic ease-out already used for World Cup
   camera panning). The whole-page root snapshot gets a quicker,
   subtler cross-fade so it doesn't fight the named glide for
   attention.
========================================= */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(*) {
    animation-duration: 480ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  ::view-transition-group(root) {
    animation-duration: 220ms;
    animation-timing-function: ease;
  }
}