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

:root {
  --primary-color: #004b68;
  --secondary-color: #64748b;
  --success-color: #10b981;
  --danger-color: #ef4444;
  --bg-color: #f8fafc;
  --text-color: #1e293b;
  --border-color: #e2e8f0;
  --card-bg: #ffffff;
}

/* Black only on the root canvas (overscroll); body paints the dots image above this */
html {
  background-color: #000000;
  min-height: 100%;
}

/* Dark theme variables for tournament view only */
.tournament-view {
  --primary-color: #60a5fa;
  --secondary-color: #94a3b8;
  --success-color: #34d399;
  --danger-color: #f87171;
  --bg-color: #000000;
  --text-color: #ffffff;
  --border-color: #333333;
  --card-bg: #1a1a1a;
}

/* Dark theme for race and talent views - same as tournament */
.race-view {
  --primary-color: #60a5fa;
  --secondary-color: #94a3b8;
  --success-color: #34d399;
  --danger-color: #f87171;
  --bg-color: #000000;
  --text-color: #ffffff;
  --border-color: #333333;
  --card-bg: #1a1a1a;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: transparent;
  background-image: url('/img/background_image_ctc.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--text-color);
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* Tournament View - Dark Theme (body background image shows through) */
.tournament-view {
  display: none; /* Hidden by default */
  background-color: transparent !important;
  background-image: url('/img/background_image_ctc.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  z-index: 100;
  /* Hide scrollbars — layout targets full visibility; wheel/touch/trackpad still scrolls */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tournament-view::-webkit-scrollbar,
.tournament-view *::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.tournament-view * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Race and Talent Views - same background image as main app */
.race-view {
  display: none; /* Hidden by default */
  background-color: transparent !important;
  background-image: url('/img/background_image_ctc.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  z-index: 100;
  color: #ffffff !important;
}

.race-view.active {
  display: block !important;
}

.race-view .container {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 20px;
  position: relative;
  background-color: transparent;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Race/Talent view sections: details ~5% narrower than 26%, teams ~5% wider than 32%, pairs fills remainder */
.race-view .sections-container {
  display: grid;
  grid-template-columns: minmax(0, 24.7%) minmax(0, 33.6%) minmax(0, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  align-items: stretch;
  box-sizing: border-box;
  overflow-x: hidden;
  min-width: 0;
  flex: 1;
  min-height: 0;
}

/* Race: left = info, middle = teams, right = pairs */
.race-view .sections-container.race-view-layout {
  grid-template-columns: minmax(0, 21.5%) minmax(0, 34.5%) minmax(0, 1fr);
  gap: 12px;
}

/* Desktop race layout: scale down proportionally with viewport height */
.race-view .sections-container.race-view-layout {
  gap: clamp(8px, 1.1vh, 12px);
}

.race-view .sections-container.race-view-layout > section {
  min-height: 0;
  padding: clamp(10px, 1.2vh, 20px);
}

.race-view .sections-container.race-view-layout .race-right-column-stack {
  grid-column: 3;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.1vh, 12px);
  overflow: hidden;
}

.race-view .sections-container.race-view-layout .race-right-column-stack > section {
  min-height: 0;
  height: auto !important;
  justify-content: flex-start;
  overflow: hidden;
  flex: 0 0 auto;
}

.race-view .sections-container.race-view-layout .race-right-column-stack > section.race-pairs-column {
  flex: 1 1 auto;
}

/* Relay sections are static blocks in the right stack (no sticky headers). */
.race-view .sections-container.race-view-layout .race-right-column-stack > section.race-relay-column .results-table th {
  position: static !important;
  top: auto !important;
}

.race-view .sections-container.race-view-layout .section-header {
  margin-bottom: clamp(8px, 1vh, 15px);
  padding-bottom: clamp(6px, 0.8vh, 10px);
}

.race-view .sections-container.race-view-layout .section-header h2,
.race-view .sections-container.race-view-layout .section-header h3 {
  font-size: clamp(1.1rem, 1.7vh, 1.5rem);
}

/* Full-bleed race shell: outer .container must not cap at 1400px */
body > .container:has(> #race-view.race-view.active),
body > .container:has(> .race-view.active) {
  max-width: 100% !important;
  width: 100%;
  box-sizing: border-box;
}

/* Talent page: participant rows – no row background; pills provide colour */
.talent-view .talent-participant-row {
  background: none !important;
  color: #fff !important;
}
.talent-view .talent-participant-row td {
  color: #fff !important;
  padding: 6px 12px;
  border: none !important;
  line-height: 1.25;
}
.talent-view .talent-list-box .results-table {
  border-collapse: separate;
  border-spacing: 0 6px;
  width: 100%;
  table-layout: fixed;
}
.talent-view .talent-list-box .results-table th,
.talent-view .talent-list-box .results-table td {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  line-height: 1.25;
  padding: 6px 12px;
}
.talent-view .talent-region {
  color: rgb(255, 237, 0) !important;
}
/* Talent page: each row is its own rounded box; lists side by side on widescreen */
.talent-view .talent-list-box {
  background: transparent !important;
  padding: 0;
  min-width: 0;
  width: 100%;
  overflow: visible;
}
.talent-view .talent-list-box .talent-participant-row td:first-child {
  border-radius: 10px 0 0 10px;
}
.talent-view .talent-list-box .talent-participant-row td:last-child {
  border-radius: 0 10px 10px 0;
}
.talent-view .talent-lists-column {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-rows: 1fr;
  gap: 24px;
  min-width: 0;
  min-height: 0;
  align-items: stretch;
}
.talent-view .sections-container.talent-view-layout,
.talent-view .sections-container.talent-standalone-layout {
  height: calc(100vh - 80px);
  min-height: 0;
  padding-top: 24px;
  grid-template-rows: 1fr;
  align-items: stretch;
  box-sizing: border-box;
}
.talent-view .talent-lists-column .results-section {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 3% 20px;
  justify-content: flex-start;
}
.talent-view .talent-lists-column .table-container.talent-list-box {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 0;
  justify-content: flex-start;
  align-items: stretch;
  overflow-y: auto;
}
.talent-view .talent-list-box#running-order-wrap .results-table,
.talent-view .talent-list-box#leaderboard-wrap .results-table {
  flex: 0 0 auto;
}
.talent-view .talent-list-box#running-order-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}
.talent-view .talent-list-box#leaderboard-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}
.talent-view .talent-lists-column .results-section .section-header {
  margin-bottom: 4px;
  padding-bottom: 0;
  flex-shrink: 0;
}
.talent-view .talent-list-box--leaderboard {
  background: transparent !important;
}
.talent-view .talent-list-box--leaderboard .results-table th:first-child,
.talent-view .talent-list-box--leaderboard .results-table td:first-child {
  text-align: left;
}
.talent-view .talent-list-box--leaderboard .results-table th:last-child,
.talent-view .talent-list-box--leaderboard .results-table td:last-child {
  text-align: right;
}
@media (max-width: 768px) {
  .talent-view .talent-lists-column {
    grid-template-columns: 1fr;
    /* Stacked: don’t split height with 1fr rows — let content define height, page scrolls */
    grid-template-rows: auto;
  }

  .talent-view .sections-container.talent-view-layout,
  .talent-view .sections-container.talent-standalone-layout {
    height: auto !important;
    max-height: none !important;
    min-height: 0;
    overflow: visible !important;
    /* Undo .race-view .sections-container { flex: 1 } so lists aren’t trapped in a viewport-height column */
    flex: 0 0 auto !important;
  }

  .talent-view .talent-lists-column .results-section {
    overflow: visible !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }

  .talent-view .talent-lists-column .table-container.talent-list-box {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
  }

  .talent-view .talent-list-box#running-order-wrap,
  .talent-view .talent-list-box#leaderboard-wrap,
  .talent-view .talent-list-box#finalists-wrap {
    overflow: visible !important;
    max-height: none !important;
  }

  .talent-view .talent-lists-column.talent-lists-column--day1-fit .results-section {
    max-height: none !important;
  }

  .talent-view .talent-lists-column.talent-lists-column--day1-fit .table-container.talent-list-box {
    overflow: visible !important;
    overflow-y: visible !important;
  }

  /* Talent uses .race-view — inner container was overflow:hidden + height:100%, which clips stacked lists */
  .talent-view.race-view.active .container {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

/* Mobile stacked layouts: extra space below last content (football / running / talent full-screen views) */
@media (max-width: 768px) {
  .tournament-view.active,
  .race-view.active {
    padding-bottom: max(32px, calc(env(safe-area-inset-bottom, 0px) + 24px));
  }
}

/* Talent page: participants section spans 2 cols */
.race-view .race-results-span-2 {
  grid-column: span 2;
}

/* Race/Talent info section: logo + welcome message (reuse tournament styles) */
.race-view .race-info-section .tournament-info-combined {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 20px);
  min-width: 0;
}

.race-view .race-info-section .tournament-logo .logo-image {
  max-height: clamp(56px, 9vh, 100px) !important;
  width: auto !important;
  max-width: 100%;
}

.race-view .race-info-section .tournament-details-inline,
.race-view .race-info-section .welcome-message-inline,
.race-view .race-info-section .qr-code-container-inline,
.race-view .race-info-section .colas-values-logo {
  min-width: 0;
  width: 100%;
}

.race-view .race-info-section .welcome-message-inline {
  overflow-wrap: anywhere;
}

.race-view .race-info-section .welcome-message-inline h2 {
  color: #fff !important;
  font-size: clamp(1rem, 1.8vh, 1.5rem);
  margin-bottom: 8px;
}

.race-view .race-info-section .welcome-message-inline .welcome-clock {
  font-size: clamp(0.82rem, 1.2vh, 1rem);
  color: #94a3b8 !important;
}

.race-view .race-info-section .qr-code-label {
  font-size: clamp(0.72rem, 1vh, 0.95rem);
  color: #94a3b8 !important;
}

.race-view .race-info-section #qr-code {
  max-width: 100%;
}

.race-view .race-info-section #qr-code img,
.race-view .race-info-section #qr-code canvas {
  width: clamp(72px, 7vw, 128px) !important;
  height: auto !important;
  max-width: 100%;
}

.race-view .race-info-section .colas-values-logo .colas-values-logo-img {
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: clamp(40px, 8vh, 100px) !important;
}

/* Standings table: one horizontal line per row */
.race-view .results-table-compact th,
.race-view .results-table-compact td {
  padding: 5px 10px;
  line-height: 1.3;
  white-space: nowrap;
  font-size: 0.85rem;
  vertical-align: middle;
}

@media (max-width: 2100px) {
  .race-view .results-table-compact th,
  .race-view .results-table-compact td {
    font-size: 0.75rem!important;
  }
}

.race-view .results-table-compact tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.race-view .section-table-inline {
  margin-top: 1.5rem;
}

.race-view .section-table-inline .section-header {
  margin-bottom: 10px;
}

.race-view .section-table-inline .section-header h3 {
  font-size: 1.1rem;
}

/* Race: teams / pairs columns — top-align so scroll lists start at the first row */
.race-view .race-gender-section {
  min-width: 0;
  justify-content: flex-start;
}

.race-view .race-gender-section .section-header h3 {
  font-size: 1.25rem;
  color: #fff !important;
  margin: 0 0 10px 0;
}

.race-view .race-other-category {
  margin-top: 0;
  grid-column: 1 / -1;
}

@media (max-width: 1024px) {
  .race-view .sections-container {
    grid-template-columns: 1fr;
  }
  .race-view .sections-container.race-view-layout .race-right-column-stack {
    grid-column: 1;
  }
  .race-view .race-other-category {
    grid-column: 1;
  }
}

.race-view .section-table {
  background: #000000;
  padding: 20px;
  border-radius: 8px;
  box-shadow: none;
  min-height: 200px;
  border: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  margin-bottom: 20px;
}

.race-view section {
  padding: 20px;
  border-radius: 8px;
  box-shadow: none;
  min-height: 200px;
  border: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.race-view .section-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-color);
  flex-shrink: 0;
  text-align: center;
}

.race-view .section-header h2 {
  font-size: 1.5rem;
  color: #ffffff !important;
}

.race-view section > *:not(.section-header) {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  align-items: center;
  width: 100%;
}

/* Standings scroll boxes: don’t vertically center table inside the flex child */
.race-view section.race-pairs-column > .table-container.pairs-standings-scroll,
.race-view section.race-teams-column > .table-container.race-standings-scroll {
  justify-content: flex-start !important;
  align-items: stretch !important;
}

/* Race live layout: keep wheel scroll inside standings containers on desktop only */
@media (min-width: 1025px) {
  .race-view .sections-container.race-view-layout section.race-gender-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }

  .race-view .sections-container.race-view-layout section.race-gender-section > .section-header {
    flex: 0 0 auto;
  }

  .race-view .sections-container.race-view-layout section.race-pairs-column > .table-container.race-standings-scroll,
  .race-view .sections-container.race-view-layout section.race-teams-column > .table-container.race-standings-scroll {
    flex: 1 1 auto !important;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .race-view .sections-container.race-view-layout .race-right-column-stack > section.race-pairs-column > .table-container.race-standings-scroll {
    flex: 0 0 auto !important;
    min-height: 0;
    max-height: none;
    overflow-y: visible;
    overscroll-behavior: auto;
  }

  .race-view .sections-container.race-view-layout .race-right-column-stack > section.race-relay-column > .table-container {
    overflow: visible;
  }

  /* Widescreen: scroll the whole right stack (heats/finals/pairs). */
  .race-view .sections-container.race-view-layout .race-right-column-stack {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
  }

  .race-view .sections-container.race-view-layout .race-right-column-stack > section.race-pairs-column {
    flex: 0 0 auto;
  }
}

/* Race/Talent view text colors */
.race-view h1,
.race-view h2,
.race-view h3,
.race-view .results-table th,
.race-view .results-table td {
  color: #ffffff !important;
}

.race-view .results-table th {
  background-color: transparent !important;
  border-bottom: 1px solid var(--border-color);
}

.race-view .results-table tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.race-view .results-table .relay-spacer-row td {
  padding: 0 !important;
  height: 12px;
  border-bottom: 0 !important;
  background: transparent !important;
}

.race-view .results-table .time {
  color: #60a5fa !important;
}

.race-view .results-table .category {
  color: #94a3b8 !important;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

/* Header - Only for tournament list */
.header {
  background: var(--card-bg);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.header h1 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.header .subtitle {
  color: var(--secondary-color);
}

/* Settings Menu */
.settings-menu-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

/* Top-left home control (tournament / race / talent) — mobile / stacked only */
.view-landing-back {
  display: none;
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  z-index: 1001;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  transition: opacity 0.2s, background-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
  .view-landing-back {
    display: flex;
  }
}

.view-landing-back:hover {
  opacity: 0.92;
  background-color: rgba(255, 255, 255, 0.08);
}

.view-landing-back:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.view-landing-back__icon {
  display: block;
  flex-shrink: 0;
}

/* Group Selector */
.group-selector-container {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px 15px;
  border-radius: 6px;
  backdrop-filter: blur(10px);
}

.group-selector-container.hidden {
  display: none;
}

.group-selector {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--text-color);
  font-size: 1rem;
  cursor: pointer;
  min-width: 150px;
}

.group-selector:focus {
  outline: none;
  border-color: var(--primary-color);
}

.settings-btn {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.settings-btn:hover {
  background: var(--border-color);
}

.settings-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  min-width: 200px;
  overflow: hidden;
}

.settings-dropdown.hidden {
  display: none;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  text-align: left;
  color: var(--text-color);
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s;
}

.dropdown-item:hover {
  background: var(--border-color);
}

.dropdown-item.dropdown-item--active {
  background: rgba(96, 165, 250, 0.22);
  font-weight: 600;
}

.tournament-view .dropdown-item.dropdown-item--active {
  color: #ffffff;
}

/* Landing page: black background, white text and outlines */
.landing-container {
  max-width: 100%;
  padding: 0;
  min-height: 100vh;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: #ffffff;
  width: 100%;
  position: relative;
  z-index: 1;
  padding: 24px 20px 40px;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* PWA install prompt (landing only) */
.pwa-install-banner {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto 20px;
  padding: 16px 44px 16px 18px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 237, 0, 0.45);
  border-radius: 14px;
  text-align: center;
}

.pwa-install-banner-text {
  margin: 0 0 12px;
  font-size: 0.98rem;
  line-height: 1.45;
  font-weight: 600;
  color: #ffffff;
}

.pwa-install-banner-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.pwa-install-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: none;
  border-radius: 999px;
  background: #fcec4e;
  color: #0a1628;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.2s, transform 0.15s;
}

.pwa-install-btn:hover {
  filter: brightness(1.05);
}

.pwa-install-btn:active {
  transform: scale(0.98);
}

.pwa-install-subhint {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
  max-width: 36em;
}

.pwa-install-security-note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.65);
  max-width: 38em;
}

.pwa-install-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
}

.pwa-install-dismiss:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

/* iOS “Add to Home Screen” instructions (Safari-only; no web API) */
.pwa-ios-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.pwa-ios-modal.hidden {
  display: none !important;
}

body.pwa-ios-modal-open {
  overflow: hidden;
}

.pwa-ios-modal-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

.pwa-ios-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  max-height: min(88vh, 680px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #0f172a;
  border: 1px solid rgba(255, 237, 0, 0.4);
  border-radius: 16px;
  padding: 22px 20px 18px;
  color: #f8fafc;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.pwa-ios-modal-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pwa-ios-modal-dismiss:hover {
  background: rgba(255, 255, 255, 0.15);
}

.pwa-ios-modal-title {
  margin: 0 36px 14px 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fcec4e;
}

.pwa-ios-modal-steps {
  margin: 0 0 14px;
  padding-left: 1.25rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(248, 250, 252, 0.95);
}

.pwa-ios-modal-steps li {
  margin-bottom: 10px;
}

.pwa-ios-modal-note {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(248, 250, 252, 0.65);
}

.landing-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.landing-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px 8px;
}

.landing-logo {
  display: block;
  width: 500px;
  height: auto;
  object-fit: contain;
  margin-top: 0;
  margin-bottom: 30px;
}

/* Landing language toggle button */
.landing-lang-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  padding: 0 20px;
}
.landing-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.landing-lang-btn:hover {
  border-color: rgba(255, 255, 255, 0.8);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}
.landing-lang-option {
  padding: 4px 10px;
  border-radius: 20px;
  transition: background 0.2s, color 0.2s;
}
.landing-lang-option:hover {
  color: #ffffff;
}
.landing-lang-option.active {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-weight: 600;
}
.landing-lang-divider {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 300;
  user-select: none;
  padding: 0 12px;
}

/* When Go Live is on: hide countdown and lang button, reduce logo top margin */
.landing-page.go-live-active .countdown-zone {
  display: none !important;
}
.landing-page.go-live-active .landing-lang-wrap {
  display: none !important;
}

.landing-page.go-live-active .landing-logo {
  margin-top: 2%;
  margin-bottom: 2%;
}

.pause-app-section {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 28px;
  text-align: center;
}

.pause-app-section.hidden {
  display: none !important;
}

.pause-app-message {
  width: 100%;
  margin: 0;
  padding: 20px 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  text-align: center;
}

.pause-app-lang-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.pause-app-text {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
}

/* Paused: hide tournament/race/talent entry cards (overrides go-live cache rule for #hero-cards) */
#tournament-list-view.pause-app-active #hero-cards {
  display: none !important;
}

/* First paint fallback: if last known state is live, render live layout immediately. */
html[data-go-live-cache="1"] #tournament-list-view .countdown-zone,
html[data-go-live-cache="1"] #tournament-list-view .landing-lang-wrap {
  display: none !important;
}
html[data-go-live-cache="1"] #hero-cards.hidden {
  display: grid !important;
}

.landing-header h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff;
}

.landing-page .btn-outline {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}

.landing-page .btn-outline:hover {
  background: #ffffff;
  color: #000000;
}

/* Countdown title (single language) */
.countdown-title {
  text-align: center;
  margin: 0 0 12px 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff;
}

.countdown-icons-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 48px;
}
.countdown-icons-row .countdown-icon {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 0.95;
}

.countdown-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px 32px;
}

.countdown {
  text-align: center;
  width: 100%;
  max-width: 720px;
}

.countdown-label {
  margin: 0 0 20px 0;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.countdown-units {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 4px;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 76px;
}

.countdown-value-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 16px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.countdown-value {
  display: block;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.countdown-unit-label {
  display: block;
  margin-top: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.countdown-sep {
  align-self: center;
  margin-top: -14px;
  padding-bottom: 0;
  font-size: 1.75rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1;
}

.countdown-finished {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.05em;
}

.countdown-finished.hidden {
  display: none !important;
}

/* Hero cards: 3 in a row, responsive */
.hero-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  color: #ffffff;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.hero-card:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}

.hero-card.hero-card-disabled {
  opacity: 0.7;
}

.hero-card .hero-icon {
  display: block;
  margin-bottom: 20px;
  color: #ffffff;
}

.hero-card .hero-icon svg {
  display: block;
  margin: 0 auto;
}

.hero-card h2 {
  margin: 0 0 8px 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
}

.hero-card .hero-subtitle {
  margin: 0 0 16px 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  flex: 1;
}

.hero-card .hero-cta {
  font-size: 0.9rem;
  font-weight: 500;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 8px 20px;
  border-radius: 6px;
}

@media (max-width: 900px) {
  .hero-cards {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 600px) {
  .landing-page {
    padding: 16px 12px 32px;
  }
  .landing-header {
    margin-bottom: 24px;
    flex-direction: column;
    align-items: flex-start;
  }
  .landing-logo-wrap {
    padding: 0 12px 6px;
  }
  .landing-logo {
    width: min(300px, 85vw);
  }
  .landing-header h1 {
    font-size: 1.5rem;
  }
  .countdown-zone {
    padding: 20px 12px 24px;
  }
  .countdown-icons-row {
    gap: 20px;
    margin-bottom: 42px;
  }
  .countdown-icons-row .countdown-icon {
    width: 32px;
    height: 32px;
  }
  .countdown-unit {
    min-width: 60px;
  }
  .countdown-value-box {
    min-width: 60px;
    padding: 12px 8px;
  }
  .countdown-value {
    font-size: 1.75rem;
  }
  .countdown-sep {
    margin-top: -12px;
    font-size: 1.35rem;
  }
  .hero-card {
    padding: 24px 20px;
  }
  .hero-card h2 {
    font-size: 1.25rem;
  }
}

/* Tournament list (used elsewhere e.g. race/talents pages) */
.tournament-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.tournament-card {
  background: var(--card-bg);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.tournament-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.tournament-card h3 {
  margin-bottom: 10px;
  color: var(--primary-color);
}

.tournament-card .meta {
  color: var(--secondary-color);
  font-size: 0.9rem;
}

.tournament-view.active {
  display: flex !important;
  flex-direction: column !important;
}

.tournament-view .container {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 20px;
  position: relative;
  background-color: transparent;
  box-sizing: border-box;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  flex: 1;
}

/* Tournament view should have white text */
.tournament-view {
  color: #ffffff;
}

/* Override specific elements to ensure white text */
.tournament-view h1,
.tournament-view h2,
.tournament-view h3,
.tournament-view .section-header h2,
.tournament-view .result-item .score,
.tournament-view .tournament-details-inline .current-time {
  color: #ffffff !important;
}

.tournament-view .current-round,
.tournament-view .result-item .round,
.tournament-view .fixture-item .round {
  color: #94a3b8 !important;
}

/* Sections Container (football tournament): 25% welcome/info, 43% league table, 32% matches */
.sections-container {
  display: grid;
  grid-template-columns: minmax(0, 25%) minmax(0, 43%) minmax(0, 32%);
  gap: 20px;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  align-items: start;
  box-sizing: border-box;
  overflow-x: auto;
  min-width: 0;
  flex: 1;
  min-height: 0;
}

/* Widescreen only: narrower info + league columns, wider matches (bracket layout uses flex, not this grid) */
@media (min-width: 1200px) {
  .tournament-view .sections-container:not(.bracket-view-layout):not(.bracket-mode) {
    grid-template-columns: minmax(0, 20%) minmax(0, 38%) minmax(0, 42%);
  }
}

/* Tournament info section (welcome/logo/QR) - 25% width (football) */
#tournament-info-section {
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* League table section - 43% width (football); align with matches column */
#league-table-section {
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Matches section - 32% width (football) */
#matches-section {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
#matches-section .matches-list {
  flex: 1 1 0;
  min-height: 0;
}

/* Desktop: distribute rows in the column when the list has extra height */
.tournament-view #matches-list.matches-list {
  justify-content: space-evenly;
}

/* Bracket section spans full width when visible */
#bracket-section:not(.hidden) {
  grid-column: 1 / -1;
}

/* Bracket view: top 33% = logo | message | QR (horizontal), bottom 67% = bracket, 100% height */
.sections-container.bracket-view-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  min-height: 0;
  flex: 1;
  height: 100%;
  overflow: hidden;
}
.sections-container.bracket-view-layout #tournament-info-section {
  flex: 0 0 auto;
  height: auto;
  max-height: 30vh;
  min-height: 72px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 8px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: visible;
  visibility: visible !important;
}
.sections-container.bracket-view-layout #tournament-info-section .section-header {
  display: block !important;
  margin-bottom: 4px;
  text-align: center;
  flex-shrink: 0;
}
.sections-container.bracket-view-layout #tournament-info-section .section-header h2 {
  font-size: 1.1rem;
  color: #ffffff;
  margin: 0;
}
.sections-container.bracket-view-layout #tournament-info-section .tournament-info-combined {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(100px, 0.75fr);
  align-items: center;
  justify-items: center;
  gap: 12px;
  padding: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1;
  min-height: 0;
}
.sections-container.bracket-view-layout #tournament-info-section .tournament-details-inline,
.sections-container.bracket-view-layout #tournament-info-section .welcome-message-inline,
.sections-container.bracket-view-layout #tournament-info-section .qr-code-container-inline,
.sections-container.bracket-view-layout #tournament-info-section .colas-values-logo {
  visibility: visible !important;
  opacity: 1 !important;
}
.sections-container.bracket-view-layout #tournament-info-section .colas-values-logo {
  min-width: 0;
  justify-self: end;
}
.sections-container.bracket-view-layout #tournament-info-section .colas-values-logo .colas-values-logo-img {
  max-height: min(12vh, 64px);
  min-width: 110px;
  width: auto;
  object-fit: contain;
}
.sections-container.bracket-view-layout #tournament-info-section .tournament-details-inline {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}
.sections-container.bracket-view-layout #tournament-info-section .tournament-details-inline .current-time,
.sections-container.bracket-view-layout #tournament-info-section .tournament-details-inline .current-round {
  display: none !important;
}
.sections-container.bracket-view-layout #tournament-info-section .tournament-logo .logo-image {
  max-height: min(12vh, 56px);
  width: auto;
  object-fit: contain;
}
.sections-container.bracket-view-layout #tournament-info-section .welcome-message-inline {
  flex: 1 1 auto;
  padding: 0 16px;
  min-width: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.sections-container.bracket-view-layout #tournament-info-section .welcome-message-inline h2 {
  margin-bottom: 4px;
}
.sections-container.bracket-view-layout #tournament-info-section .welcome-message-inline .welcome-clock {
  margin: 0;
}
.sections-container.bracket-view-layout #tournament-info-section .qr-code-container-inline {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sections-container.bracket-view-layout #tournament-info-section .qr-code-container-inline .qr-code-label {
  margin-bottom: 8px;
}
.sections-container.bracket-view-layout #tournament-bracket-view {
  flex: 1 1 0;
  min-height: 0;
  /* Override .tournament-view section { height: 100% } so flex can assign a real height after toggling visible */
  height: auto !important;
  max-height: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 16px 50px;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  visibility: visible !important;
}
/* Bracket: horizontal row of rounds (QF | SF | Final | Champion/Winner) */
.sections-container.bracket-view-layout #tournament-bracket-view .tournament-bracket-panel:not(.hidden) {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  justify-content: center;
  width: 100%;
}
.sections-container.bracket-view-layout #tournament-bracket-view .tournament-bracket {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: stretch;
  gap: 16px;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  flex: 1 1 0;
  min-height: 0;
}
.sections-container.bracket-view-layout #tournament-bracket-view .tournament-bracket__round:not(.tournament-bracket__round--winner) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  min-height: 0;
}

/* Round title */
.sections-container.bracket-view-layout .tournament-bracket__round-title {
  color: #fcec4e;
  font-size: clamp(1rem, 1.1vw + 0.82rem, 1.35rem);
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 12px 0;
  flex-shrink: 0;
}

/*
 * Match lists: column stack only. Must override t-bracket.css which sets
 * flex-flow: row wrap + height:100% — that breaks the app bracket (matches pile/overlap).
 */
.sections-container.bracket-view-layout .tournament-bracket__list {
  display: flex !important;
  flex-flow: column nowrap !important;
  flex: 1 1 auto !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: clamp(10px, 1.5vh, 20px);
  height: auto !important;
  min-height: auto !important;
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}
.sections-container.bracket-view-layout .tournament-bracket__round--quarterfinals .tournament-bracket__list,
.sections-container.bracket-view-layout .tournament-bracket__round--semifinals .tournament-bracket__list,
.sections-container.bracket-view-layout .tournament-bracket__round--gold .tournament-bracket__list {
  min-height: auto !important;
}

.sections-container.bracket-view-layout .tournament-bracket__round--winner {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-width: 0;
  justify-content: center;
}
.sections-container.bracket-view-layout .tournament-bracket__champion {
  text-align: center;
  padding: 16px 12px;
  font-size: clamp(1.1rem, 1.8vh + 0.5rem, 1.45rem);
}
.sections-container.bracket-view-layout .tournament-bracket__champion-tbd {
  opacity: 0.55;
}

.sections-container.bracket-view-layout .tournament-bracket__item {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Match box: one per slot (TBD vs TBD or team names) – no outline */
.sections-container.bracket-view-layout .tournament-bracket__match {
  display: block;
  background-color: transparent;
  border: none;
  border-radius: 8px;
  box-shadow: none;
  min-width: 0;
  width: 100%;
  min-height: clamp(76px, 9vh, 108px);
  padding: clamp(10px, 1.2vh, 14px) clamp(12px, 1.5vw, 16px);
  box-sizing: border-box;
}
.sections-container.bracket-view-layout .tournament-bracket__meta {
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(0.8rem, 0.7vh + 0.45rem, 1rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 clamp(6px, 0.8vh, 10px) 0;
  text-align: center;
  width: 100%;
  display: block;
}
.sections-container.bracket-view-layout .tournament-bracket__match:focus {
  outline: none;
}

/* Table: team names and scores visible – clean fixture box */
.sections-container.bracket-view-layout .tournament-bracket__table {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
/* Screen-reader-only table caption; hide legacy visible date captions */
.sections-container.bracket-view-layout .tournament-bracket__caption.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
.sections-container.bracket-view-layout .tournament-bracket__caption:not(.sr-only) {
  display: none !important;
}
/* Remove stray colon from base t-bracket.css */
.sections-container.bracket-view-layout .tournament-bracket__content::after {
  display: none !important;
  content: none !important;
}
.sections-container.bracket-view-layout .tournament-bracket__content {
  display: table-row-group;
}
.sections-container.bracket-view-layout .tournament-bracket__content .tournament-bracket__team {
  display: table-row;
}
.sections-container.bracket-view-layout .tournament-bracket__content .tournament-bracket__team td {
  display: table-cell;
  padding: clamp(6px, 0.9vh, 10px) clamp(8px, 1vw, 12px);
  vertical-align: middle;
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(0.95rem, 0.85vh + 0.55rem, 1.22rem);
  line-height: 1.35;
}
/* Country cell (flag + name): 80% width; score: 20% */
.sections-container.bracket-view-layout .tournament-bracket__content .tournament-bracket__team .tournament-bracket__country {
  display: table-cell;
  width: 80%;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap; /* keep flag and name on same line */
}
.sections-container.bracket-view-layout .tournament-bracket__content .tournament-bracket__team .tournament-bracket__country .tournament-bracket__code {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  display: inline-block;
  max-width: 100%; /* use remaining space in cell after flag */
  min-width: 0;
  vertical-align: middle;
}
.sections-container.bracket-view-layout .tournament-bracket__content .tournament-bracket__team .tournament-bracket__score {
  display: table-cell;
  width: 20%;
  text-align: right;
  white-space: nowrap;
  padding-left: 12px;
  vertical-align: middle;
}
.sections-container.bracket-view-layout .tournament-bracket__country .flag {
  display: inline;
  margin-right: 0.35em;
  vertical-align: middle;
}
.sections-container.bracket-view-layout .tournament-bracket__code {
  color: rgba(255, 255, 255, 0.95);
}
.sections-container.bracket-view-layout .tournament-bracket__country .team-pill.tournament-bracket__code {
  color: #000000;
  padding: clamp(4px, 0.5vh, 6px) clamp(8px, 1vw, 12px);
  font-size: clamp(0.88rem, 0.75vh + 0.5rem, 1.08rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}
.sections-container.bracket-view-layout .tournament-bracket__country .team-pill.tournament-bracket__code.team-pill--group-a { background-color: #fcec4e; }
.sections-container.bracket-view-layout .tournament-bracket__country .team-pill.tournament-bracket__code.team-pill--group-b { background-color: #e7c041; }
.sections-container.bracket-view-layout .tournament-bracket__country .team-pill.tournament-bracket__code.team-pill--group-c { background-color: #cb8d34; }
.sections-container.bracket-view-layout .tournament-bracket__number {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  padding: clamp(3px, 0.4vh, 5px) clamp(6px, 0.8vw, 10px);
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(0.9rem, 0.8vh + 0.5rem, 1.12rem);
}
.sections-container.bracket-view-layout .tournament-bracket__team--winner .tournament-bracket__number {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.8);
}

/* Hide connector lines from base t-bracket.css */
.sections-container.bracket-view-layout .tournament-bracket__match::before,
.sections-container.bracket-view-layout .tournament-bracket__match::after {
  display: none !important;
}
.sections-container.bracket-view-layout .tournament-bracket__item::after {
  display: none !important;
}

/* When bracket mode is active, change grid to single column and ensure proper layout */
.sections-container.bracket-mode {
  grid-template-columns: 1fr !important;
  grid-auto-rows: auto !important;
}

/* Bracket section fills full width when active */
#bracket-section.bracket-full-width {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-height: 400px; /* Ensure it has substantial height */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure hidden sections don't take up space in grid when bracket mode is active */
.sections-container.bracket-mode section.hidden {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Tournament view section styles - scoped to tournament-view only */
.tournament-view section {
  padding: 20px;
  border-radius: 8px;
  box-shadow: none;
  min-height: 200px;
  border: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.tournament-view .section-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-color);
  min-height: 2.5rem;
  flex-shrink: 0;
}

/* Keep League Table and Matches column tops in line: same header height and no extra top spacing */
.tournament-view #league-table-section,
.tournament-view #matches-section {
  padding-top: 0;
  margin-top: 0;
  align-items: stretch;
  /* Match matches column: start content at top of cell — centering caused clipped/hidden table rows */
  justify-content: flex-start;
}

.tournament-view #league-table-section .section-header,
.tournament-view #matches-section .section-header {
  height: 2.5rem;
  min-height: 2.5rem;
  padding-top: 0;
  margin-top: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* League and Matches columns: content starts directly under header so both columns line up */
.tournament-view #league-table-section > *:not(.section-header),
.tournament-view #matches-section > *:not(.section-header) {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

/* Center content vertically in tournament sections - content divs should fit their content */
.tournament-view section > *:not(.section-header) {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  align-items: center;
  width: 100%;
}

.tournament-view #tournament-info-section .section-header {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.tournament-view .section-header h2 {
  font-size: 1.5rem;
  color: var(--text-color);
}

/* League Table */
.league-table {
  width: 100%;
  min-width: 600px; /* Minimum width to prevent squishing on mobile */
  border-collapse: collapse;
  font-size: 0.9rem;
  table-layout: auto;
  margin: auto 0;
}

/* Stat columns (Pos, P, W, D, L, GD, Pts): larger than team; `em` scales with table when JS fits viewport */
.league-table th.league-stat,
.league-table td.league-stat {
  font-size: 1.14em;
  text-align: right;
  /* Tight horizontal rhythm so team column can be wider */
  padding-left: 2px;
  padding-right: 4px;
}

.league-table thead th.league-team-heading,
.league-table .team-name-cell {
  font-size: 1em;
  text-align: left;
  padding-right: 8px;
}

/* Same column widths on every group table so stats line up vertically */
#league-table-container .league-table {
  table-layout: fixed;
}

/* Narrow stat bands + wide team: 5% + 56% + 6×6.5% ≈ 100% */
#league-table-container .league-table:not(.league-table--10) thead th.position {
  width: 5%;
}
#league-table-container .league-table:not(.league-table--10) thead th.league-team-heading {
  width: 56%;
}
#league-table-container .league-table:not(.league-table--10) thead th.league-stat:not(.position) {
  width: 6.5%;
}

/* Optional 10-column variant (e.g. new.html with GF/GA) */
#league-table-container .league-table.league-table--10 thead th.position {
  width: 4%;
}
#league-table-container .league-table.league-table--10 thead th.league-team-heading {
  width: 44%;
}
#league-table-container .league-table.league-table--10 thead th.league-stat:not(.position) {
  width: 6.5%;
}

#league-table-container {
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* flex-start: scroll area begins at top; centering hid rows when column had a max height */
  justify-content: flex-start;
  align-items: stretch;
  flex: 0 0 auto;
  min-width: 0;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.league-table th,
.league-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  line-height: 1.3;
}

.tournament-view .league-table th,
.tournament-view .league-table td {
  border: none !important;
  border-bottom: none !important;
}

.league-table th {
  background-color: var(--card-bg);
  font-weight: 600;
  color: var(--text-color);
}

.league-table tr:hover {
  background-color: var(--card-bg);
  opacity: 0.8;
}

.league-table .position {
  font-weight: 600;
  text-align: right;
}

.league-table .team-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Flag images: 4x3 aspect, same height as text, vertically centered */
.flag img {
  height: 1em;
  width: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

.league-table .flag,
.match-item .flag,
.tournament-bracket__country .flag,
.result-item .result-line .flag,
.team-name-cell .flag {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}
.league-table .flag img,
.match-item .flag img,
.tournament-bracket__country .flag img,
.result-item .result-line .flag img,
.team-name-cell .flag img {
  height: 1em;
  width: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}
.league-table .flag:not(img) {
  font-size: 1.5rem;
}

.league-table .team-name {
  display: inline-block;
}

/* Team pills by group (league table, matches, bracket) – text always black for readability */
.team-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  color: #000000 !important;
  font-weight: 600;
  white-space: nowrap;
}
.team-pill--group-a {
  background-color: #fcec4e;
}
.team-pill--group-b {
  background-color: #e7c041;
}
.team-pill--group-c {
  background-color: #cb8d34;
}
.tournament-view .team-pill:not([class*="group-"]) {
  background-color: rgba(255, 255, 255, 0.25);
  color: #000000 !important;
}
.tournament-view .team-pill {
  color: #000000 !important;
}

/* Results Display */
.results-list {
  list-style: none;
}

.result-item {
  padding: 15px;
  margin-bottom: 10px;
  background: var(--card-bg);
  border-radius: 6px;
  text-align: center;
}

.result-item .teams {
  font-weight: 600;
  margin-bottom: 5px;
}

.result-item .result-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.result-item .result-line .flag {
  font-size: 1.2rem;
  margin-right: 4px;
}

.result-item .result-line .team-name {
  font-weight: 600;
  margin-right: 8px;
}

.result-item .result-line .score {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
}

.result-item .result-line .score-separator {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 4px;
}

.result-item .penalty-info {
  color: var(--secondary-color);
  font-size: 0.9rem;
  margin-top: 8px;
  text-align: center;
}

.result-item .round {
  text-align: center;
  margin-top: 5px;
  color: var(--secondary-color);
  font-size: 0.85rem;
}

.result-item .score {
  font-size: 1.5rem;
  color: var(--text-color);
  margin: 10px 0;
}

/* Override for tournament view - all text should be white */
.tournament-view .result-item .score {
  color: #ffffff;
}

.tournament-view .section-header h2 {
  color: #ffffff !important;
}

.tournament-view .current-time {
  color: #ffffff !important;
}

.tournament-view .tournament-details-inline .current-time {
  color: #ffffff !important;
}

.tournament-view .current-round {
  color: #94a3b8;
}

.tournament-view .league-table th {
  color: #ffffff;
}

.tournament-view .league-table td {
  color: #ffffff;
}

/* Football layout: league column is ~43% width — drop fixed 600px min so table scales like matches */
.tournament-view .league-table {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  /* Line-height scales with breakpoints (below) — slightly roomier when type is smaller */
  --league-row-line-height: 1.36;
}

.tournament-view .league-table th,
.tournament-view .league-table td {
  line-height: var(--league-row-line-height);
}

.tournament-view .league-group-title {
  line-height: 1.3;
}

.tournament-view #league-table-container .league-group {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.tournament-view .league-table .team-name-cell {
  white-space: normal;
  min-width: 0;
  flex-wrap: wrap;
}

.tournament-view .league-table .team-name-cell .team-pill.team-name {
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
  line-height: var(--league-row-line-height);
}

.tournament-view .result-item .teams {
  color: #ffffff;
}

.tournament-view .result-item .round {
  color: #94a3b8;
}

.tournament-view .fixture-item .teams {
  color: #ffffff;
}

.tournament-view .fixture-item .round {
  color: #94a3b8;
}

.tournament-view .bracket-round h3 {
  color: #fcec4e;
  font-weight: bold;
  text-transform: uppercase;
}

.tournament-view .bracket-match .team {
  color: #ffffff;
}

.result-item .round {
  color: var(--secondary-color);
  font-size: 0.9rem;
}

/* Fixtures List */
/* Matches List */
.matches-list {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 100%;
  align-items: stretch;
  line-height: 1.12;
}

.matches-split-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.matches-split-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fcec4e;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 2px 0 4px;
}

/* Recent/upcoming split lists: allow team names to wrap to next line */
.matches-split-panel .match-item .match-line {
  white-space: normal;
  align-items: start;
}

.matches-split-panel .match-item .match-line-home,
.matches-split-panel .match-item .match-line-away {
  white-space: normal;
  overflow: visible;
  align-items: flex-start;
}

.matches-split-panel .match-item .match-line .team-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display: inline;
  line-height: 1.12;
}

.matches-round-heading {
  width: 100%;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-color);
  margin-top: 6px;
  margin-bottom: 2px;
  padding: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
}
.matches-round-heading:first-child {
  margin-top: 0;
}
.tournament-view .matches-round-heading {
  color: #fcec4e;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0;
  margin-top: 5px;
  margin-bottom: 1px;
  line-height: 1.12;
}
.tournament-view .matches-round-heading:first-child {
  margin-top: 0;
}

.match-item {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 1px 4px;
  background: transparent;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  margin: 0;
  line-height: 1.1;
}

.tournament-view .match-item {
  border: none !important;
}

.match-item.upcoming {
  opacity: 0.8;
  background: transparent;
  border: none !important;
  padding: 1px 4px;
  margin: 0;
}

.match-item.completed {
  opacity: 1;
  border: none !important;
  font-size: 0.85rem;
  margin: 0;
}

.match-item.most-recent {
  margin: 0;
}

.match-item.completed .match-line .score {
  font-size: 0.85rem;
}





/* Ensure no blue border appears on upcoming matches or any separator lines */
.match-item.upcoming::before,
.match-item.upcoming::after,
.match-item.completed::after {
  display: none !important;
  content: none !important;
}



/* One row: [flag][team1] | [v / score] | [team2][flag] — never wrap; long names ellipsis */
.match-item .match-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 6px;
  padding: 0 2px;
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: nowrap;
  line-height: 1.1;
}

/* Left container: flag + team name together, left-aligned */
.match-item .match-line-home {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  justify-self: start;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  gap: 3px;
}

/* Center container: score or "v", on the grid center line (lines up across rows) */
.match-item .match-line-center {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Right container: team name then flag, flush right */
.match-item .match-line-away {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  gap: 3px;
  text-align: right;
  flex-direction: row;
}

/* Pills share side column width and truncate so the row stays one line */
.match-item .match-line-home .team-pill.team-name,
.match-item .match-line-away .team-pill.team-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.match-item .match-line .flag {
  font-size: 0.8rem;
  margin-right: 2px;
  flex-shrink: 0;
}

.match-item .match-line .flag img {
  height: 0.85em;
}

.match-item .match-line .team-name {
  font-weight: 600;
  font-size: 18px;
  margin-right: 3px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  line-height: 1.1;
}


.match-item .match-line-home .team-name {
  text-align: left;
  margin-right: 4px;
  margin-left: 0;
}

.match-item .match-line-away .team-name {
  text-align: right;
  margin-right: 4px;
  margin-left: 0;
}

.match-item .match-line-away .flag {
  flex-shrink: 0;
}

.match-item .match-line .score {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
}

.match-item .match-line .score-separator {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 2px;
}

.match-item .match-line .vs-separator {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--secondary-color);
  margin: 0 4px;
  text-transform: lowercase;
}

.match-item .penalty-info {
  color: var(--secondary-color);
  font-size: 0.68rem;
  margin-top: 1px;
  text-align: center;
  line-height: 1.15;
}

.match-item .round {
  display: none !important;
}

.fixtures-list {
  max-height: 400px;
  overflow-y: auto;
}

.fixture-item {
  padding: 15px;
  margin-bottom: 10px;
  background: var(--card-bg);
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border-color);
}

.fixture-item.completed {
  opacity: 0.7;
}

.fixture-item .teams {
  flex: 1;
}

.fixture-item .round {
  color: var(--secondary-color);
  font-size: 0.9rem;
  margin-right: 15px;
}

/* Bracket Visualization */
.bracket-container {
  overflow-x: auto;
}

.bracket-round {
  display: inline-block;
  vertical-align: top;
  margin-right: 30px;
  min-width: 200px;
}

.bracket-match {
  background: var(--card-bg);
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 6px;
  border: 2px solid var(--border-color);
}

.bracket-match .team {
  padding: 8px;
  margin-bottom: 5px;
  background: var(--card-bg);
  border-radius: 4px;
}

.bracket-match .team.winner {
  background: var(--success-color);
  color: white;
  font-weight: 600;
}

/* QR Code */
.qr-code-container {
  text-align: center;
  padding: 20px;
  padding-top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.qr-code-container > div {
  background: white;
  padding: 10px;
  border-radius: 12px;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qr-code-container canvas {
  margin: 0 auto;
  display: block;
}

/* Controls */
.controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s;
  background: var(--primary-color);
  color: white;
}

.btn:hover {
  opacity: 0.9;
}

.btn-secondary {
  background: var(--secondary-color);
}

.btn-success {
  background: var(--success-color);
}

.btn-danger {
  background: var(--danger-color);
}

/* Fullscreen */
.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: var(--bg-color);
  overflow: auto;
}

.fullscreen .settings-menu-container {
  z-index: 10000;
}

.fullscreen .view-landing-back {
  z-index: 10001 !important;
}

/* Combined Tournament Info Section */
.tournament-info-combined {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.tournament-details-inline {
  text-align: center;
}

.tournament-logo {
  margin-top: 30px;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tournament-logo .logo-image {
  width: 80%;
  max-width: 80%;
  height: auto;
  object-fit: contain;
}

.tournament-details-inline .current-time {
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 10px 0;
}

.tournament-details-inline .current-round {
  font-size: 1.2rem;
  color: var(--secondary-color);
}

/* Welcome Message Inline */
.welcome-message-inline {
  text-align: center;
  padding: 20px 0;
}

.welcome-message-inline h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  color: var(--text-color);
}

.welcome-message-inline .welcome-clock {
  display: block;
  font-size: 1.3rem;
  color: var(--secondary-color);
  font-variant-numeric: tabular-nums;
}

/* QR Code Inline */
.qr-code-container-inline {
  text-align: center;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.qr-code-label {
  color: #ffffff;
  font-size: 0.9rem;
  margin-bottom: 5px;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.qr-code-container-inline > div:not(.qr-code-label) {
  background: white;
  padding: 15px;
  border-radius: 12px;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qr-code-container-inline canvas {
  margin: 0 auto;
  display: block;
  max-width: 150px;
  max-height: 150px;
  width: 100%;
  height: auto;
}

/* Colas Values logo (under QR, at end in top section) */
.colas-values-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 140px;
}
.colas-values-logo-img {
  max-height: 100px;
  min-width: 140px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
}

/* Responsive */
@media (max-width: 768px) {
  .sections-container {
    grid-template-columns: 1fr !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  #league-table-section,
  #matches-section,
  #tournament-info-section,
  #bracket-section {
    grid-column: 1 / -1 !important;
  }
  
  .tournament-list {
    grid-template-columns: 1fr;
  }
  
  .league-table {
    font-size: 0.8rem;
    min-width: 320px; /* Allow horizontal scroll on small screens */
  }
  
  .league-table th,
  .league-table td {
    padding: 6px 8px;
    white-space: nowrap;
    line-height: 1.42;
  }

  .league-table th.league-stat,
  .league-table td.league-stat {
    padding-left: 1px;
    padding-right: 3px;
  }

  .league-table thead th.league-team-heading,
  .league-table .team-name-cell {
    padding-right: 6px;
  }

  .tournament-view .league-table {
    --league-row-line-height: 1.42;
  }

  .tournament-view .league-group-title {
    line-height: 1.35;
  }
  
  #league-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }
  
  /* Tournament view: single scroll root; dvh + scroll background reduce iOS scroll jank */
  .tournament-view {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    background-attachment: scroll;
    overscroll-behavior-y: auto;
  }
  
  /* Tournament view: mobile — flex column so matches section can grow and list can space-evenly */
  .tournament-view .container {
    flex: 1 1 auto !important;
    min-height: 100dvh !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 28px)) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .tournament-view section {
    padding: 12px !important;
    min-height: 0 !important;
  }
  
  .tournament-view .sections-container {
    flex: 0 0 auto !important;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: visible;
    grid-auto-rows: minmax(0, auto);
    align-items: start;
  }
  
  .tournament-view .sections-container > section,
  .tournament-view .sections-container > #bracket-section {
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
  }
  
  .tournament-view #league-table-section,
  .tournament-view #matches-section,
  .tournament-view #tournament-info-section {
    overflow: visible !important;
  }

  /* Full-width top strip so logo + welcome stay visually centered (align-items:start was shrinking this column) */
  .tournament-view .sections-container > #tournament-info-section {
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .tournament-view #tournament-info-section .tournament-info-combined {
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }

  .tournament-view #tournament-info-section .tournament-details-inline,
  .tournament-view #tournament-info-section .welcome-message-inline {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .tournament-view #tournament-info-section .tournament-logo {
    justify-content: center !important;
    width: 100% !important;
  }

  /* No nested vertical scrollers: entire page scrolls in .tournament-view (fixes stuck scroll at bottom) */
  .tournament-view #league-table-container {
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    opacity: 1 !important;
  }

  .tournament-view #fixtures-list,
  .tournament-view #recent-results {
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    opacity: 1 !important;
  }

  /* Fill viewport below info + league — matches list spreads rows in remaining height */
  .tournament-view .sections-container:not(.bracket-view-layout):not(.bracket-mode) {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
  }

  .tournament-view #matches-section {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  .tournament-view #matches-list {
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    opacity: 1 !important;
  }

  .tournament-view #tournament-info-section,
  .tournament-view #league-table-section {
    flex: 0 0 auto !important;
  }

  .tournament-view #league-table-section > *:not(.section-header) {
    flex: 0 0 auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .tournament-view #matches-section > *:not(.section-header) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .tournament-view .section-header h2 {
    font-size: 1.25rem !important;
  }
  
  .tournament-view #tournament-name-header,
  .tournament-view .section-header h2 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Settings button: touch target and safe area */
  .tournament-view .settings-menu-container {
    top: max(12px, env(safe-area-inset-top)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
  }
  
  .tournament-view .settings-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
  }
  
  .tournament-view .settings-dropdown {
    min-width: 180px;
  }
  
  .tournament-view .dropdown-item {
    padding: 14px 16px !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  
  /* League groups: stack and scroll */
  .tournament-view .league-group {
    margin-bottom: 1.25rem !important;
    width: 100%;
    min-width: 0;
  }
  
 .league-group-title {
    font-size: 1rem !important;
    color: #fcec4e;
    text-transform: uppercase;
    font-weight: bold;
  }
  
  /* Matches: grid keeps center column aligned; home/away columns share remaining width */
  .tournament-view .match-item .match-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    column-gap: 5px !important;
    row-gap: 0;
    padding: 2px 2px !important;
    font-size: 0.8rem;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap !important;
    line-height: 1.08 !important;
  }

  .tournament-view .match-item .match-line-home {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    justify-self: start;
  }

  .tournament-view .match-item .match-line-away {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    justify-content: flex-end;
    justify-self: end;
  }

  .tournament-view .match-item .match-line-center {
    justify-self: center;
    align-self: center;
    white-space: nowrap !important;
    flex-shrink: 0;
  }

  .tournament-view .match-item .match-line .team-name {
    font-size: 0.72rem !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
    display: inline-block;
  }

  /* Mobile split lists: add extra vertical breathing room */
  .tournament-view #matches-list .matches-split-panel .match-item .match-line {
    line-height: 1.28 !important;
    row-gap: 4px !important;
  }

  .tournament-view #matches-list .matches-split-panel .match-item .match-line .team-name {
    line-height: 1.32 !important;
  }

  .tournament-view .match-item .match-line-home .team-pill.team-name,
  .tournament-view .match-item .match-line-away .team-pill.team-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .tournament-view .match-item .match-line-away .team-pill.team-name {
    text-align: right;
  }
  
  .tournament-view .match-item .match-line .score {
    font-size: 0.85rem !important;
  }
  
  .tournament-view .match-item .match-line .flag {
    font-size: 0.8rem !important;
  }
  
  .tournament-view .match-item .match-line .flag img {
    height: 0.85em !important;
  }
  
  /* Welcome message: readable on small screens */
  .tournament-view .welcome-message-inline h2 {
    font-size: 1.1rem !important;
  }
  
  .tournament-view .welcome-message-inline .welcome-clock {
    font-size: 0.95rem !important;
  }

  /* Logo adjustments for mobile */
  .tournament-view .tournament-logo .logo-image {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 120px !important;
    min-height: 40px !important;
    max-height: 80px !important;
    object-fit: contain !important;
  }

  .tournament-view .tournament-logo {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    min-height: 40px !important;
  }

  /* Hide QR code and Colas logo on mobile */
  .tournament-view #qr-code-container,
  .tournament-view .qr-code-container-inline,
  .tournament-view .colas-values-logo {
    display: none !important;
  }

  /* Bracket view: compact top bar and responsive bracket on mobile */
  .sections-container.bracket-view-layout #tournament-info-section {
    max-height: 14vh;
    min-height: 56px;
    padding: 6px 12px !important;
  }
  .sections-container.bracket-view-layout #tournament-info-section .section-header h2 {
    font-size: 0.95rem !important;
  }
  .sections-container.bracket-view-layout #tournament-info-section .tournament-info-combined {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .sections-container.bracket-view-layout #tournament-info-section .tournament-logo .logo-image {
    max-height: min(10vh, 44px);
  }
  .sections-container.bracket-view-layout #tournament-info-section .welcome-message-inline h2 {
    font-size: 0.9rem !important;
  }
  .sections-container.bracket-view-layout #tournament-info-section .welcome-message-inline .welcome-clock {
    font-size: 0.8rem !important;
  }
  .sections-container.bracket-view-layout #tournament-bracket-view {
    padding: 10px 12px;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Stack rounds vertically on mobile */
  .sections-container.bracket-view-layout #tournament-bracket-view .tournament-bracket {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 20px;
    flex: none;
    min-height: 0;
  }
  .sections-container.bracket-view-layout #tournament-bracket-view .tournament-bracket-panel:not(.hidden) {
    flex: none;
  }
  .sections-container.bracket-view-layout #tournament-bracket-view .tournament-bracket__round:not(.tournament-bracket__round--winner) {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
  }
  .sections-container.bracket-view-layout .tournament-bracket__round-title {
    font-size: clamp(0.9rem, 2.5vw, 1.15rem) !important;
  }
  .sections-container.bracket-view-layout .tournament-bracket__list {
    min-height: 0;
    flex: 0 0 auto;
    gap: 10px;
  }
  .sections-container.bracket-view-layout .tournament-bracket__round--quarterfinals .tournament-bracket__list,
  .sections-container.bracket-view-layout .tournament-bracket__round--semifinals .tournament-bracket__list,
  .sections-container.bracket-view-layout .tournament-bracket__round--gold .tournament-bracket__list {
    min-height: 0;
  }
  .sections-container.bracket-view-layout .tournament-bracket__match {
    min-height: clamp(60px, 12vw, 88px);
    padding: 8px 10px;
  }
  .sections-container.bracket-view-layout .tournament-bracket__content .tournament-bracket__team td {
    padding: 6px 8px;
    font-size: clamp(0.88rem, 2.8vw, 1.05rem);
  }
  /* Bracket container height/scroll: see EOF @media (max-width: 768px) “Mobile bracket view” */

  /* Race and Talent view: same mobile layout as tournament */
  .race-view {
    overflow-x: hidden;
    width: 100%;
  }
  .race-view .sections-container {
    grid-template-columns: 1fr !important;
  }
  .race-view .container {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto !important;
    padding: 12px !important;
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .race-view section,
  .race-view .results-section,
  .race-view .section-table {
    padding: 12px !important;
   /* min-height: 0 !important; */
  }
@media (min-width: 768px) {
  .race-view section,
  .race-view .results-section,
  .race-view .section-table {
    padding: 12px !important;
   min-height: 0 !important; 
  }
}

  .race-view .section-header h2,
  .race-view .section-header h3 {
    font-size: 1.25rem !important;
  }
  .race-view .settings-menu-container {
    top: max(12px, env(safe-area-inset-top)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
  }
  .race-view .settings-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
  }
  .race-view .settings-dropdown {
    min-width: 180px;
  }
  .race-view .dropdown-item {
    padding: 14px 16px !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .race-view .table-container {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100%;
  }
  .race-view .results-table {
    min-width: 280px;
    font-size: 0.9rem;
  }
  .race-view #qr-code-container,
  .race-view .qr-code-container-inline,
  .race-view .colas-values-logo {
    display: none !important;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .tournament-view .container {
    padding: 10px !important;
    padding-top: max(10px, env(safe-area-inset-top)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
  }
  
  .tournament-view section {
    padding: 10px !important;
  }
  
  .tournament-view .section-header h2 {
    font-size: 1.1rem !important;
  }
  
  .tournament-view .league-group-title {
    font-size: 0.95rem !important;
  }
  
  .league-table {
    font-size: 0.75rem;
    min-width: 280px;
  }
  
  .league-table th,
  .league-table td {
    padding: 4px 6px;
    line-height: 1.5;
  }

  .league-table th.league-stat,
  .league-table td.league-stat {
    padding-left: 1px;
    padding-right: 2px;
  }

  .league-table thead th.league-team-heading,
  .league-table .team-name-cell {
    padding-right: 5px;
  }

  .tournament-view .league-table {
    --league-row-line-height: 1.5;
  }

  .tournament-view .league-group-title {
    line-height: 1.4;
  }
  
  /* Inherit full-width match layout from 768px rules; slightly smaller type only */
  .tournament-view .match-item .match-line .team-name {
    font-size: 0.68rem !important;
    line-height: 1.08 !important;
  }
  
  .tournament-view .match-item .match-line .score {
    font-size: 0.8rem !important;
  }

  .tournament-view .tournament-logo .logo-image {
    min-width: 100px !important;
    min-height: 36px !important;
    max-height: 70px !important;
  }

  .tournament-view .tournament-logo {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }

  .race-view .container {
    padding: 10px !important;
    padding-top: max(10px, env(safe-area-inset-top)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
  }
  .race-view section,
  .race-view .results-section,
  .race-view .section-table {
    padding: 10px !important;
  }
  .race-view .section-header h2,
  .race-view .section-header h3 {
    font-size: 1.1rem !important;
  }
  .race-view .results-table {
    min-width: 260px;
    font-size: 0.8rem;
  }

  /* Bracket view: extra compact on very small screens */
  .sections-container.bracket-view-layout #tournament-info-section {
    max-height: 12vh;
    min-height: 48px;
    padding: 4px 10px !important;
  }
  .sections-container.bracket-view-layout #tournament-info-section .section-header h2 {
    font-size: 0.85rem !important;
  }
  .sections-container.bracket-view-layout #tournament-info-section .tournament-logo .logo-image {
    max-height: min(8vh, 36px);
  }
  .sections-container.bracket-view-layout #tournament-bracket-view {
    padding: 8px 10px;
  }
  .sections-container.bracket-view-layout .tournament-bracket__round-title {
    font-size: clamp(0.85rem, 3.5vw, 1.05rem) !important;
  }
  .sections-container.bracket-view-layout .tournament-bracket__list {
    min-height: 0;
  }
  .sections-container.bracket-view-layout .tournament-bracket__round--quarterfinals .tournament-bracket__list,
  .sections-container.bracket-view-layout .tournament-bracket__round--semifinals .tournament-bracket__list {
    min-height: 0;
  }
  .sections-container.bracket-view-layout .tournament-bracket__round--gold .tournament-bracket__list {
    min-height: 0;
  }
  .sections-container.bracket-view-layout .tournament-bracket__match {
    min-height: 52px;
    padding: 6px 8px;
  }
  .sections-container.bracket-view-layout .tournament-bracket__content .tournament-bracket__team td {
    font-size: clamp(0.82rem, 3.2vw, 0.98rem);
  }
}

/* Loading State */
.loading {
  text-align: center;
  padding: 40px;
  color: var(--secondary-color);
}

/* Hidden */
.hidden {
  display: none !important;
}

/* Tournament View - background image and white text */
.tournament-view {
  background-color: transparent !important;
  background-image: url('/img/background_image_ctc.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

.tournament-view .container {
  background-color: transparent !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100vh;
  height: 100vh;
  padding: 20px;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: auto;
}

/* Force all text elements in tournament view to be white - be specific to avoid hiding content */
.tournament-view h1,
.tournament-view h2,
.tournament-view h3,
.tournament-view h4,
.tournament-view p,
.tournament-view span:not([style*="background"]),
.tournament-view td,
.tournament-view th,
.tournament-view li {
  color: #ffffff !important;
}

/* Text content in specific divs */
.tournament-view div.teams,
.tournament-view div.score,
.tournament-view div.round,
.tournament-view div.current-time,
.tournament-view div.current-round,
.tournament-view div.tournament-details-inline,
.tournament-view div.welcome-message-inline,
.tournament-view .tournament-info-combined,
.tournament-view .tournament-info-combined > div {
  color: #ffffff !important;
}

.tournament-view .tournament-logo {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
}

.tournament-view .tournament-logo .logo-image {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 80% !important;
  max-width: 80% !important;
  max-height: 100px !important;
  height: auto !important;
  object-fit: contain !important;
}

.tournament-view .qr-code-container-inline .qr-code-label {
  color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  margin-bottom: 10px !important;
}

.tournament-view #qr-code-container .qr-code-label {
  color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure sections and containers are visible - but respect inline styles and hidden class */
.tournament-view section:not(.hidden):not([style*="display: none"]) {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure hidden sections stay hidden - higher specificity to override any other rules */
.tournament-view #league-table-section.hidden,
.tournament-view #matches-section.hidden,
.tournament-view #bracket-section.hidden,
.tournament-view section.hidden,
section.hidden,
#league-table-section.hidden,
#matches-section.hidden,
#bracket-section.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.tournament-view .sections-container {
  visibility: visible !important;
  display: grid !important; /* Keep grid layout */
  opacity: 1 !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

.tournament-view .sections-container.bracket-view-layout {
  display: flex !important;
  flex-direction: column !important;
  /* Override mobile .tournament-view .sections-container { flex: 0 0 auto } so bracket fills viewport */
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* When bracket layout is active: fill viewport so top bar + bracket fit; only bracket area scrolls */
.tournament-view.active .container.bracket-view-active {
  overflow: hidden;
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

/* Large screens: league + matches columns share row height; internal scroll when needed */
@media (min-width: 1024px) {
  .tournament-view .sections-container {
    align-items: stretch;
  }
}

/* Desktop football (≥769px): grid row fills viewport so league column has a real height cap — JS scales table text to fit */
@media (min-width: 769px) {
  .tournament-view.active {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
  }

  /* Inner scroll only on desktop — avoids iOS touch scroll getting stuck between nested scrollers */
  .tournament-view #league-table-container {
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    opacity: 1 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tournament-view #matches-list {
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    opacity: 1 !important;
  }

  .tournament-view #fixtures-list,
  .tournament-view #recent-results {
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    opacity: 1 !important;
  }

  .tournament-view .container:not(.bracket-view-active) {
    flex: 1 1 0;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  .tournament-view .sections-container:not(.bracket-view-layout) {
    align-items: stretch !important;
    align-content: stretch;
    grid-template-rows: minmax(0, 1fr);
    flex: 1 1 0;
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  .tournament-view .sections-container:not(.bracket-view-layout) > #tournament-info-section,
  .tournament-view .sections-container:not(.bracket-view-layout) > #league-table-section,
  .tournament-view .sections-container:not(.bracket-view-layout) > #matches-section {
    min-height: 0;
    align-self: stretch;
    height: 100%;
    max-height: 100%;
  }
}

/* Specific overrides for elements that might have blue color */
.tournament-view .result-item .score,
.tournament-view .fixture-item .score,
.tournament-view .section-header h2,
.tournament-view .current-time,
.tournament-view .tournament-details-inline .current-time,
.tournament-view .league-table th,
.tournament-view .league-table td,
.tournament-view .result-item .teams,
.tournament-view .fixture-item .teams,
.tournament-view .bracket-match .team {
  color: #ffffff !important;
}
.tournament-view .bracket-round h3,
.tournament-view .matches-round-heading,
.sections-container.bracket-view-layout .tournament-bracket__round-title {
  color: #fcec4e !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
}

.tournament-view .league-table .team-pill,
.tournament-view .tournament-bracket__country .team-pill {
  color: #000000 !important;
}

/* Matches list only: no pill background — plain white team labels */
.tournament-view .match-item .team-pill.team-name,
.tournament-view .match-item .team-pill.team-name.team-pill--group-a,
.tournament-view .match-item .team-pill.team-name.team-pill--group-b,
.tournament-view .match-item .team-pill.team-name.team-pill--group-c {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  text-transform: none;
  font-weight: 600;
}

/* Secondary color for metadata */
.tournament-view .current-round,
.tournament-view .result-item .round,
.tournament-view .fixture-item .round {
  color: #94a3b8 !important;
}

/* Ensure QR code container stays white (not affected by text color) */
.tournament-view .qr-code-container-inline > div:not(.qr-code-label),
.tournament-view .qr-code-container > div:not(.qr-code-label) {
  background: white !important;
}

/* Ensure QR code label has no background */
.tournament-view .qr-code-label {
  background: transparent !important;
}

/* Video Player */
.tournament-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 99;
  background: #000000;
  pointer-events: none; /* Prevent video clicks from interfering */
}

.tournament-video.hidden {
  display: none;
}

/* Hide all video controls */
.tournament-video::-webkit-media-controls {
  display: none !important;
}

.tournament-video::-webkit-media-controls-enclosure {
  display: none !important;
}

.tournament-video::-webkit-media-controls-panel {
  display: none !important;
}

.tournament-video::-webkit-media-controls-play-button {
  display: none !important;
}

.tournament-video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

/* Ensure settings stay above video (tournament, race, talent) */
.tournament-view .settings-menu-container,
.race-view .settings-menu-container,
.talent-view .settings-menu-container {
  z-index: 1000 !important;
}

.tournament-view .view-landing-back,
.race-view .view-landing-back,
.talent-view .view-landing-back {
  z-index: 1001 !important;
}

/*
 * Mobile bracket view: do not lock .container to 100dvh + overflow:hidden (clips bottom).
 * Let content grow; .tournament-view scrolls (overflow-y: auto, 100dvh) like league/matches.
 */
@media (max-width: 768px) {
  .tournament-view.active .container.bracket-view-active {
    height: auto !important;
    max-height: none !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    flex: 0 0 auto !important;
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 28px)) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
  }

  .tournament-view .sections-container.bracket-view-layout {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .sections-container.bracket-view-layout #tournament-bracket-view {
    flex: none !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Top info can grow past 14vh if needed (welcome text); don’t clip */
  .sections-container.bracket-view-layout #tournament-info-section {
    max-height: none !important;
  }
}

/* Widescreen scaling (1080p -> 4K): tournament + talent pages */
@media (min-width: 1025px) {
  .tournament-view .container,
  .race-view .container {
    padding: clamp(12px, 1.2vh, 24px);
  }

  .tournament-view .sections-container:not(.bracket-view-layout):not(.bracket-mode),
  .talent-view .sections-container.talent-view-layout,
  .talent-view .sections-container.talent-standalone-layout {
    gap: clamp(10px, 1.2vh, 24px);
  }

  .tournament-view section,
  .talent-view .results-section {
    padding: clamp(10px, 1.1vh, 20px);
    min-height: 0;
  }

  .tournament-view .section-header h2,
  .talent-view .section-header h2 {
    font-size: clamp(1.15rem, 1.8vh, 1.7rem);
  }

  .tournament-view .league-table,
  .tournament-view .result-item,
  .tournament-view .fixture-item,
  .talent-view .results-table {
    font-size: clamp(0.9rem, 1.25vh, 1.15rem);
  }

  /* Talent Day 1 running order + leaderboard (widescreen): tighter rows, slightly smaller name pills */
  .talent-view .talent-lists-column--day1-fit #running-order-wrap .results-table,
  .talent-view .talent-lists-column--day1-fit #leaderboard-wrap .results-table {
    border-spacing: 0 4px !important;
  }

  .talent-view .talent-lists-column--day1-fit #running-order-wrap .results-table th,
  .talent-view .talent-lists-column--day1-fit #running-order-wrap .results-table td,
  .talent-view .talent-lists-column--day1-fit #leaderboard-wrap .results-table th,
  .talent-view .talent-lists-column--day1-fit #leaderboard-wrap .results-table td {
    line-height: 1.12 !important;
    padding: 4px 10px !important;
  }

  .talent-view .talent-lists-column--day1-fit .talent-participant-row td {
    line-height: 1.12 !important;
    padding: 4px 10px !important;
  }

  .talent-view .talent-lists-column--day1-fit .talent-name-pill {
    font-size: 0.78em !important;
    padding: 2px 10px !important;
  }

  .tournament-view .league-table th,
  .tournament-view .league-table td {
    padding: clamp(6px, 0.8vh, 12px) clamp(6px, 0.7vw, 12px);
  }

  /* Keep group-stage column usable on shorter desktop windows */
  .tournament-view #league-table-container {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
  }

  .tournament-view #tournament-info-section {
    min-height: 0;
    justify-content: flex-start;
    overflow: hidden;
  }

  .tournament-view .tournament-info-combined {
    gap: clamp(10px, 1.2vh, 24px);
    min-height: 0;
  }

  .tournament-view .tournament-logo {
    margin-top: clamp(8px, 1vh, 20px);
    margin-bottom: clamp(8px, 1vh, 20px);
  }

  .tournament-view .tournament-details-inline .current-time {
    font-size: clamp(1rem, 1.8vh, 2rem);
    margin: clamp(6px, 0.8vh, 10px) 0;
  }
}

/* 1080p and below (desktop): tighten league-table density for full column fit */
@media (min-width: 1025px) and (max-height: 1080px) {
  .tournament-view #league-table-section .section-header,
  .tournament-view #matches-section .section-header {
    height: 2.2rem;
    min-height: 2.2rem;
  }

  .tournament-view #league-table-container .league-group {
    margin-bottom: 0.55rem !important;
  }

  .tournament-view .league-group-title {
    font-size: 0.9rem !important;
    margin-bottom: 0.25rem !important;
  }

  .tournament-view .league-table {
    font-size: 0.8rem !important;
  }

  .tournament-view .league-table th,
  .tournament-view .league-table td {
    padding: 4px 6px !important;
    line-height: 1.12;
  }

  .tournament-view .league-table th.league-stat,
  .tournament-view .league-table td.league-stat {
    font-size: 1.03em;
  }
}

/* Very short desktop windows: compact mode so all rows remain visible */
@media (min-width: 1025px) and (max-height: 900px) {
  .tournament-view #league-table-section .section-header,
  .tournament-view #matches-section .section-header {
    height: 2rem;
    min-height: 2rem;
  }

  .tournament-view #league-table-container .league-group {
    margin-bottom: 0.4rem !important;
  }

  .tournament-view .league-group-title {
    font-size: 0.82rem !important;
    margin-bottom: 0.2rem !important;
  }

  .tournament-view .league-table {
    font-size: 0.74rem !important;
  }

  .tournament-view .league-table th,
  .tournament-view .league-table td {
    padding: 3px 5px !important;
    line-height: 1.08;
  }
}

/* Football page URL layout switch: ?layout=1080p (default) | ?layout=4k */
.tournament-view.layout-1080p .match-item .match-line .team-name {
  font-size: 12px !important;
}

/* 1080p group-stage column: smaller flags and team names */
.tournament-view.layout-1080p .league-table .team-name-cell .flag img {
  height: 0.8em !important; /* 20% smaller than default 1em */
}

.tournament-view.layout-1080p .league-table .team-name-cell .team-pill.team-name {
  font-size: 0.9em !important;
}

.tournament-view.layout-4k .match-item .match-line .team-name {
  font-size: 16px !important;
}

/* Dedicated 4k profile with larger spacing/type controls */
@media (min-width: 1025px) {
  .tournament-view.layout-4k .container {
    padding: clamp(18px, 1.8vh, 34px);
  }

  .tournament-view.layout-4k #tournament-info-section {
    justify-content: center;
  }

  .tournament-view.layout-4k #tournament-info-section .tournament-info-combined {
    justify-content: center;
  }

  .tournament-view.layout-4k .sections-container:not(.bracket-view-layout):not(.bracket-mode) {
    gap: clamp(14px, 1.7vh, 30px);
  }

  .tournament-view.layout-4k section {
    padding: clamp(14px, 1.5vh, 24px);
  }

  .tournament-view.layout-4k .section-header h2 {
    font-size: clamp(1.35rem, 2.2vh, 2rem);
  }

  .tournament-view.layout-4k .league-group-title {
    font-size: clamp(1rem, 1.35vh, 1.28rem) !important;
  }

  .tournament-view.layout-4k .league-table {
    font-size: clamp(0.98rem, 1.4vh, 1.24rem) !important;
  }

  .tournament-view.layout-4k .league-table th,
  .tournament-view.layout-4k .league-table td {
    padding: clamp(7px, 1vh, 13px) clamp(8px, 0.9vw, 14px) !important;
    line-height: 1.08 !important;
  }

  .tournament-view.layout-4k .league-table .team-name-cell,
  .tournament-view.layout-4k .league-table .team-name-cell .team-pill.team-name {
    font-size: clamp(0.84rem, 1.1vh, 0.98rem) !important;
  }

  /* 4k football group-stage column: denser row rhythm for more fixtures. */
  .tournament-view.layout-4k #matches-list .matches-round-heading {
    line-height: 1.02 !important;
    margin-bottom: clamp(4px, 0.45vh, 8px) !important;
  }

  .tournament-view.layout-4k .match-item .match-line {
    line-height: 1.02 !important;
  }

  .tournament-view.layout-4k .match-item .match-line .team-name {
    line-height: 1.0 !important;
  }

  .tournament-view.layout-4k .match-item .match-line .score {
    font-size: clamp(0.95rem, 1.25vh, 1.2rem) !important;
  }
}

/* Talent page URL layout: ?layout=1080p (default) | ?layout=4k (same param as football) */
@media (min-width: 1025px) {
  .talent-view.layout-1080p .sections-container.talent-standalone-layout,
  .talent-view.layout-1080p .sections-container.talent-view-layout {
    gap: clamp(8px, 1vh, 18px);
  }

  .talent-view.layout-1080p .section-header h2 {
    font-size: clamp(1rem, 1.5vh, 1.35rem) !important;
  }

  .talent-view.layout-1080p .results-table {
    font-size: clamp(0.82rem, 1.05vh, 0.98rem) !important;
  }

  .talent-view.layout-1080p .talent-name-pill {
    font-size: 0.72em !important;
  }

  .talent-view.layout-1080p img.flag {
    width: 16px !important;
    height: 16px !important;
  }

  .talent-view.layout-4k .container {
    padding: clamp(18px, 1.8vh, 34px);
  }

  .talent-view.layout-4k .sections-container.talent-standalone-layout,
  .talent-view.layout-4k .sections-container.talent-view-layout {
    gap: clamp(14px, 1.7vh, 30px);
    padding-top: clamp(16px, 1.8vh, 32px);
  }

  .talent-view.layout-4k .results-section {
    padding: clamp(14px, 1.5vh, 22px);
  }

  .talent-view.layout-4k .section-header h2 {
    font-size: clamp(1.5rem, 2.5vh, 2.35rem);
  }

  /* Embedded talent CSS sets 0.95rem on #*-wrap tables — override for 4K */
  .talent-view.layout-4k .results-table {
    font-size: clamp(1.08rem, 1.65vh, 1.45rem) !important;
  }

  .talent-view.layout-4k #running-order-wrap .results-table,
  .talent-view.layout-4k #leaderboard-wrap .results-table,
  .talent-view.layout-4k #finalists-wrap .results-table {
    font-size: calc(1.22rem * var(--run-order-scale, 1)) !important;
  }

  .talent-view.layout-4k #running-order-wrap .results-table th,
  .talent-view.layout-4k #running-order-wrap .results-table td,
  .talent-view.layout-4k #leaderboard-wrap .results-table th,
  .talent-view.layout-4k #leaderboard-wrap .results-table td,
  .talent-view.layout-4k #finalists-wrap .results-table th,
  .talent-view.layout-4k #finalists-wrap .results-table td {
    line-height: 1.22 !important;
  }

  .talent-view.layout-4k .talent-name-pill {
    font-size: 1em !important;
    padding: 4px 14px !important;
  }

  .talent-view.layout-4k .talent-points-pill {
    font-size: 1.05em !important;
    padding: 5px 14px !important;
  }

  .talent-view.layout-4k .talent-region {
    font-size: 1.08em !important;
  }

  .talent-view.layout-4k td.position {
    font-size: 1.1em !important;
  }

  .talent-view.layout-4k #welcome-title {
    font-size: clamp(1.35rem, 2.2vh, 2rem) !important;
  }

  .talent-view.layout-4k .welcome-clock {
    font-size: clamp(1.15rem, 1.9vh, 1.65rem) !important;
  }

  .talent-view.layout-4k .qr-code-label {
    font-size: clamp(0.95rem, 1.3vh, 1.15rem) !important;
  }

  /* Day 1 density rules use !important — bump again in 4K */
  .talent-view.layout-4k .talent-lists-column--day1-fit #running-order-wrap .results-table th,
  .talent-view.layout-4k .talent-lists-column--day1-fit #running-order-wrap .results-table td,
  .talent-view.layout-4k .talent-lists-column--day1-fit #leaderboard-wrap .results-table th,
  .talent-view.layout-4k .talent-lists-column--day1-fit #leaderboard-wrap .results-table td {
    padding: 6px 12px !important;
    line-height: 1.22 !important;
  }

  .talent-view.layout-4k .talent-lists-column--day1-fit .talent-name-pill {
    font-size: 0.92em !important;
    padding: 3px 12px !important;
  }

  .talent-view.layout-4k img.flag {
    width: 22px !important;
    height: 22px !important;
  }
}