@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

/*
  Scorio standalone page normalization.
  Used for legacy full-document templates that cannot safely be moved to a
  shared Jinja shell without route-by-route behavior review.
*/

:root {
  --sc26-bg: #f4f1ea;
  --sc26-bg-grid: rgba(17, 24, 39, 0.045);
  --sc26-surface: rgba(255, 255, 255, 0.92);
  --sc26-surface-solid: #ffffff;
  --sc26-surface-soft: #fbfaf7;
  --sc26-elevated: #f7f5ef;
  --sc26-ink: #111827;
  --sc26-ink-2: #344054;
  --sc26-muted: #667085;
  --sc26-line: #d8dee8;
  --sc26-line-strong: #c5ccd8;
  --sc26-navy: #16213e;
  --sc26-teal: #0ea5a4;
  --sc26-teal-soft: rgba(14, 165, 164, 0.12);
  --sc26-gold: #c9972b;
  --sc26-green: #168253;
  --sc26-red: #b42318;
  --sc26-amber: #b7791f;
  --sc26-radius: 7px;
  --sc26-radius-lg: 8px;
  --sc26-shadow: 0 18px 50px rgba(17, 24, 39, 0.08);
  --sc26-shadow-sm: 0 10px 28px rgba(17, 24, 39, 0.06);
  --sc26-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --sc26-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --bg-page: var(--sc26-bg);
  --bg-primary: var(--sc26-bg);
  --bg-secondary: var(--sc26-surface-soft);
  --bg-elevated: var(--sc26-elevated);
  --bg-card: var(--sc26-surface-solid);
  --surface: var(--sc26-surface-solid);
  --surface-2: var(--sc26-surface-soft);
  --surface-3: var(--sc26-elevated);
  --text: var(--sc26-ink);
  --text-primary: var(--sc26-ink);
  --text-secondary: var(--sc26-ink-2);
  --text-muted: var(--sc26-muted);
  --accent: var(--sc26-teal);
  --accent-hover: #0b8382;
  --accent-soft: var(--sc26-teal-soft);
  --border: var(--sc26-line);
  --success: var(--sc26-green);
  --warning: var(--sc26-amber);
  --danger: var(--sc26-red);
  --gold: var(--sc26-gold);
  --silver: #8a94a6;
  --bronze: #b66a32;
  --panel: var(--sc26-surface-solid);
  --panel-soft: var(--sc26-surface-soft);
  --ink: var(--sc26-ink);
  --muted: var(--sc26-muted);
  --navy: var(--sc26-navy);
  --good: var(--sc26-green);
  --rails-red: var(--sc26-red);
}

html,
body {
  background:
    linear-gradient(90deg, var(--sc26-bg-grid) 1px, transparent 1px),
    linear-gradient(180deg, rgba(17, 24, 39, 0.035) 1px, transparent 1px),
    var(--sc26-bg) !important;
  background-size: 48px 48px !important;
  color: var(--sc26-ink) !important;
  font-family: var(--sc26-font) !important;
  letter-spacing: 0 !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

header,
.brand-header,
.tv-header,
.page-header,
.header,
.topbar,
.navbar {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid var(--sc26-line) !important;
  color: var(--sc26-ink) !important;
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03) !important;
  backdrop-filter: blur(18px);
}

.container,
.tv-container,
.main-container,
.page-container,
.content,
main {
  color: var(--sc26-ink) !important;
}

.card,
.glass-card,
.session-card,
.match-card,
.player-card,
.venue-card,
.leaderboard-card,
.queue-card,
.court-card,
.now-playing-card,
.upcoming-card,
.profile-card,
.share-card,
.stat-card,
.metric-card,
.panel,
.modal-content,
.empty-state,
.qr-card,
.error-card,
.setup-card,
.playlist-card,
.profile-header,
.profile-body,
.profile-footer,
.share-container,
.share-content,
.entity-card,
.access-denied-container,
.reason-box,
.access-tiers,
.upgrade-section,
.up-next-section,
.up-next-col,
.queue-section,
.queue-item,
.round-header,
.summary-card,
.form-section,
.format-card,
.partner-mode,
.player-item,
.seeking-section,
.notes-section,
.compatibility-section,
.share-section,
.venue-header,
.leaderboard-header,
.leaderboard-row,
.court-body,
.score-entry-modal,
.score-entry-card,
.score-input-container,
.quick-score-grid,
.status-tile,
.quick-link,
.tier-card,
.tournament-row {
  border: 1px solid var(--sc26-line) !important;
  border-radius: var(--sc26-radius-lg) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--sc26-ink) !important;
  box-shadow: var(--sc26-shadow-sm) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.logo,
.brand-name,
.tv-title,
.page-title,
.section-title,
.card-title,
.stat-value,
.team-name,
.player-name,
.venue-name,
.profile-name,
.share-title,
.entity-name,
.tournament-name,
.court-name,
.queue-title,
.podium-name,
.podium-points,
.summary-value,
.venue-stat-value,
.points-cell,
.team-name-large,
.team-points-large,
.team-games-large,
.score-value,
.pin-code,
.elo-value,
.brand-title,
.hero h1,
.hero-title,
.panel-title {
  color: var(--sc26-ink) !important;
  letter-spacing: 0 !important;
}

.logo,
.brand-name,
.accent,
.tv-clock,
.live-label,
.section-title,
a:not(.btn) {
  color: var(--sc26-teal) !important;
}

p,
small,
.subtitle,
.muted,
.text-muted,
.tv-subtitle,
.brand-tagline,
.description,
.meta,
.empty-copy,
.entity-description,
.tournament-name,
.profile-location,
.stat-label,
.elo-label,
.info-label,
.compatibility-hint,
.venue-stat-label,
.podium-stats,
.player-sessions,
.summary-label,
.match-meta,
.queue-position,
.idle-message,
.vs,
.vs-text,
.footer,
.footer-section,
.redirect-notice,
.instructions,
.brand-sub,
.hero-copy,
.status-label,
.tier-count,
.tier-top {
  color: var(--sc26-muted) !important;
}

.btn,
button,
input[type="submit"],
.filter-btn,
.action-btn,
.primary-action,
.share-btn,
.app-download-btn,
.upgrade-btn,
.quick-score-btn,
.round-btn,
.back-link,
.text-link {
  min-height: 40px;
  border: 1px solid var(--sc26-line) !important;
  border-radius: var(--sc26-radius) !important;
  background: var(--sc26-surface-solid) !important;
  color: var(--sc26-ink) !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.btn-primary,
.primary,
.share-btn.primary,
.app-download-btn,
.upgrade-btn,
.filter-btn.active,
.round-btn.active,
button.primary,
.action-btn.primary {
  border-color: var(--sc26-navy) !important;
  background: var(--sc26-navy) !important;
  color: #ffffff !important;
}

.btn:hover,
button:hover,
.filter-btn:hover,
.action-btn:hover,
.share-btn:hover,
.app-download-btn:hover,
.upgrade-btn:hover,
.quick-score-btn:hover,
.round-btn:hover,
.back-link:hover,
.text-link:hover {
  border-color: rgba(14, 165, 164, 0.35) !important;
  background: var(--sc26-teal-soft) !important;
  color: var(--sc26-teal) !important;
}

input,
select,
textarea {
  border: 1px solid var(--sc26-line) !important;
  border-radius: var(--sc26-radius) !important;
  background: var(--sc26-surface-soft) !important;
  color: var(--sc26-ink) !important;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(14, 165, 164, 0.18) !important;
  outline-offset: 2px;
}

table,
.table,
.leaderboard-table {
  background: var(--sc26-surface-solid) !important;
  color: var(--sc26-ink) !important;
}

th,
thead {
  background: var(--sc26-surface-soft) !important;
  color: var(--sc26-muted) !important;
}

td,
tr {
  border-color: var(--sc26-line) !important;
  color: var(--sc26-ink) !important;
}

.badge,
.tag,
.status,
.chip,
.pill,
.live-dot,
.status-badge,
.court-status,
.match-status,
.match-status-badge,
.round-status,
.bracket-badge,
.tier-badge,
.elo-badge,
.seeking-badge,
.rank,
.rank-cell,
.court-badge,
.score-box,
.team-avatar,
.player-avatar,
.podium-avatar,
.brand-mark,
.share-logo,
.icon-container {
  border: 1px solid rgba(14, 165, 164, 0.22) !important;
  background: var(--sc26-teal-soft) !important;
  color: var(--sc26-teal) !important;
}

.success,
.completed,
.playing {
  border-color: rgba(22, 130, 83, 0.24) !important;
  color: var(--sc26-green) !important;
}

.warning,
.pending {
  border-color: rgba(183, 121, 31, 0.24) !important;
  color: var(--sc26-amber) !important;
}

.danger,
.error,
.failed {
  border-color: rgba(180, 35, 24, 0.24) !important;
  color: var(--sc26-red) !important;
}

.tv-header,
.header,
header {
  position: relative;
}

.main,
.shell,
.hero,
.tv-container,
.main-container,
.page-container,
.container {
  position: relative;
}

.team-score,
.score,
.score-value,
.match-score,
.timer-display,
.match-timer,
.clock,
.tv-clock,
.pin-code,
.access-code,
.round-number,
.summary-value,
.stat-value,
.venue-stat-value,
.points-cell,
.team-points-large,
.team-games-large {
  color: var(--sc26-teal) !important;
  font-family: var(--sc26-mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0 !important;
}

.profile-header,
.pin-section,
.hero-main,
.court-card.playing,
.now-playing-card.playing,
.compatibility-fill,
.progress-fill {
  background:
    radial-gradient(circle at 100% 0%, rgba(14, 165, 164, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(251, 250, 247, 0.96)) !important;
  color: var(--sc26-ink) !important;
}

.pin-section .pin-label,
.pin-section .pin-code,
.profile-header .profile-name,
.profile-header .profile-location {
  color: var(--sc26-ink) !important;
}

.profile-avatar,
.qr-container,
.modal-qr,
.score-input,
.round-number,
.access-code,
.invite-code {
  border: 1px solid var(--sc26-line) !important;
  background: var(--sc26-surface-soft) !important;
  color: var(--sc26-ink) !important;
}

.share-btn.facebook,
.share-facebook {
  border-color: rgba(24, 119, 242, 0.25) !important;
  background: #1877f2 !important;
  color: #ffffff !important;
}

.share-btn.twitter,
.share-twitter {
  border-color: var(--sc26-ink) !important;
  background: var(--sc26-ink) !important;
  color: #ffffff !important;
}

.share-btn.whatsapp,
.share-whatsapp {
  border-color: rgba(37, 211, 102, 0.3) !important;
  background: #168253 !important;
  color: #ffffff !important;
}

.share-copy,
.share-btn.copy {
  border-color: var(--sc26-line) !important;
  background: var(--sc26-surface-soft) !important;
  color: var(--sc26-ink) !important;
}

.btn-danger,
.danger,
.btn-remove,
.match-timer.overtime,
.cross {
  border-color: rgba(180, 35, 24, 0.28) !important;
  background: rgba(180, 35, 24, 0.1) !important;
  color: var(--sc26-red) !important;
}

.btn-success,
.success,
.completed,
.playing,
.check,
.score-box.winner,
.round-status.completed,
.match-status.completed,
.match-status-badge.completed {
  border-color: rgba(22, 130, 83, 0.28) !important;
  background: rgba(22, 130, 83, 0.1) !important;
  color: var(--sc26-green) !important;
}

.pending,
.warning,
.round-status.current,
.match-status.in_progress,
.match-status-badge.in_progress {
  border-color: rgba(14, 165, 164, 0.26) !important;
  background: var(--sc26-teal-soft) !important;
  color: var(--sc26-teal) !important;
}

.place-1 .podium-avatar,
.place-1 .podium-bar,
.rank-1 {
  background: var(--sc26-gold) !important;
  color: #111827 !important;
}

.place-2 .podium-avatar,
.place-2 .podium-bar,
.rank-2 {
  background: #d8dee8 !important;
  color: #111827 !important;
}

.place-3 .podium-avatar,
.place-3 .podium-bar,
.rank-3 {
  background: #d7a56a !important;
  color: #111827 !important;
}

.connection-status,
.live-badge,
.expired-banner {
  border: 1px solid rgba(14, 165, 164, 0.24) !important;
  background: rgba(14, 165, 164, 0.12) !important;
  color: var(--sc26-teal) !important;
  box-shadow: none !important;
}

.modal-overlay,
.score-entry-overlay {
  background: rgba(17, 24, 39, 0.72) !important;
  backdrop-filter: blur(8px);
}

.qr-image,
.profile-avatar,
.footer-logo,
.brand-logo img {
  background: #ffffff !important;
}

svg {
  flex-shrink: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Defensive responsive hardening for standalone/public templates. */
html {
  overflow-x: hidden;
}

body {
  overflow-x: clip;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

.container,
.tv-container,
.main-container,
.page-container,
.content,
main,
.share-container,
.share-preview-container,
.join-card {
  max-width: 100% !important;
}

.tv-container {
  padding-bottom: 4.5rem !important;
}

.card,
.glass-card,
.session-card,
.match-card,
.player-card,
.venue-card,
.leaderboard-card,
.queue-card,
.court-card,
.now-playing-card,
.upcoming-card,
.profile-card,
.share-card,
.stat-card,
.metric-card,
.panel,
.empty-state,
.qr-card,
.setup-card,
.playlist-card,
.profile-header,
.profile-body,
.profile-footer,
.share-container,
.share-content,
.entity-card,
.up-next-section,
.up-next-col,
.queue-section,
.queue-item,
.round-header,
.summary-card,
.form-section,
.format-card,
.partner-mode,
.player-item,
.seeking-section,
.notes-section,
.compatibility-section,
.share-section,
.venue-header,
.leaderboard-header,
.leaderboard-row,
.match-item,
.action-card,
.preview-card,
.preview-body,
.preview-url,
.tips-section,
.qr-section,
.access-code-box {
  min-width: 0 !important;
  max-width: 100% !important;
}

.now-playing-grid,
.up-next-grid,
.sessions-grid,
.dashboard-grid,
.actions-grid,
.stats-grid,
.summary-grid,
.form-grid,
.format-cards,
.input-row,
.share-grid,
.stats-section {
  min-width: 0 !important;
  max-width: 100% !important;
}

.now-playing-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
}

.up-next-grid,
.sessions-grid,
.actions-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
}

.dashboard-grid,
.form-grid {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) !important;
}

.stats-grid,
.stats-section,
.summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr)) !important;
}

.format-cards,
.input-row,
.share-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
}

.share-container .share-buttons {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
}

.leaderboard-header,
.leaderboard-row {
  grid-template-columns: minmax(42px, 60px) minmax(0, 1fr) repeat(4, minmax(52px, 80px)) !important;
}

.share-buttons,
.filters,
.session-header,
.court-header,
.info-row,
.compatibility-header,
.action-section,
.partner-modes,
.venue-stats,
.form-actions,
.join-form,
.add-player-form,
.player-list,
.player-item,
.player-info,
.player-cell,
.leaderboard-item,
.match-item,
.match-card,
.team-row,
.team-players,
.share-option,
.share-btn,
.preview-url,
.tv-footer {
  min-width: 0 !important;
  flex-wrap: wrap;
}

.session-header > *,
.court-header > *,
.info-row > *,
.compatibility-header > *,
.player-info > *,
.player-cell > *,
.leaderboard-item > *,
.match-item > *,
.match-card > *,
.team-row > *,
.team-players > *,
.share-option > *,
.preview-url > *,
.join-form > *,
.add-player-form > *,
.form-actions > * {
  min-width: 0 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
small,
a,
button,
label,
input,
select,
textarea,
td,
th,
.tv-title,
.tv-subtitle,
.page-title,
.section-title,
.card-title,
.session-name,
.session-venue,
.team-name,
.team-name-large,
.team-players,
.player-name,
.venue-name,
.profile-name,
.share-title,
.share-subtitle,
.entity-name,
.entity-description,
.tournament-name,
.court-name,
.queue-title,
.podium-name,
.podium-points,
.summary-label,
.summary-value,
.preview-title,
.preview-description,
.preview-url input,
.share-label,
.share-hint,
.stat-label,
.stat-value,
.venue-stat-label,
.venue-stat-value,
.access-code,
.pin-code,
.elo-value,
.brand-title,
.hero-title,
.panel-title {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.access-code,
.pin-code,
.invite-code {
  white-space: normal !important;
}

.queue-num,
.rank,
.rank-cell {
  min-width: max-content;
  white-space: nowrap !important;
  overflow-wrap: normal;
  word-break: normal;
}

.queue-num {
  width: auto !important;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

.tv-title,
.page-title,
.share-title,
.profile-name,
.entity-name,
.session-name,
.venue-name,
.tournament-name,
.podium-name,
.team-name,
.team-name-large,
.player-name {
  line-height: 1.12;
  text-wrap: balance;
}

.match-teams,
.queue-teams,
.player-record,
.player-stats,
.player-sessions,
.match-meta,
.queue-type,
.action-desc,
.subtitle,
.brand-tagline,
.redirect-notice,
.notes-section,
.tips-list,
.footer-section {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
}

.queue-info,
.match-teams,
.player-info,
.share-info {
  min-width: 0 !important;
  flex: 1 1 180px;
}

.queue-called,
.status-badge,
.court-status,
.match-status,
.match-status-badge,
.round-status,
.seeking-badge,
.tier-badge,
.elo-badge,
.badge,
.tag,
.chip,
.pill {
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.btn,
button,
input[type="submit"],
.filter-btn,
.action-btn,
.primary-action,
.share-btn,
.share-option,
.app-download-btn,
.upgrade-btn,
.quick-score-btn,
.round-btn,
.back-link,
.text-link {
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-align: center;
}

.share-btn,
.app-download-btn,
.filter-btn,
.round-btn,
.back-link,
.text-link {
  align-items: center;
  justify-content: center;
}

table,
.table,
.leaderboard-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}

th,
td {
  min-width: 0;
  overflow-wrap: anywhere;
}

.leaderboard-card {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.tv-footer {
  gap: 0.5rem 1rem;
  line-height: 1.35;
}

::selection {
  background: rgba(14, 165, 164, 0.2);
  color: var(--sc26-ink);
}

@media (max-width: 900px) {
  .dashboard-grid,
  .form-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .container,
  .tv-container,
  .main-container,
  .page-container {
    width: min(100% - 22px, 1120px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  header,
  .brand-header,
  .tv-header,
  .page-header {
    flex-wrap: wrap;
    gap: 10px;
  }

  h1,
  .tv-title,
  .page-title,
  .hero-title {
    font-size: clamp(1.45rem, 1.1rem + 1.8vw, 1.9rem) !important;
  }

  h2,
  .section-title,
  .card-title,
  .panel-title {
    font-size: clamp(1rem, 0.92rem + 0.8vw, 1.25rem) !important;
  }

  .match-teams {
    font-size: clamp(1rem, 0.86rem + 1.2vw, 1.35rem) !important;
  }

  .tv-clock,
  .access-code,
  .pin-code {
    font-size: clamp(1.2rem, 0.94rem + 2vw, 1.65rem) !important;
  }

  .join-form,
  .add-player-form,
  .form-actions,
  .partner-modes {
    flex-direction: column;
    align-items: stretch !important;
  }

  .join-form > *,
  .add-player-form > *,
  .form-actions > *,
  .partner-modes > * {
    width: 100%;
  }

  .share-container .share-buttons,
  .share-preview-container .share-grid {
    grid-template-columns: 1fr !important;
  }

  .share-container .share-buttons > * {
    width: 100%;
  }

  .leaderboard-header,
  .leaderboard-row {
    grid-template-columns: 44px minmax(0, 1fr) minmax(56px, 68px) !important;
    gap: 0.65rem !important;
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  .leaderboard-header > :nth-child(n + 4),
  .leaderboard-row > :nth-child(n + 4) {
    display: none !important;
  }

  .match-item,
  .match-card,
  .round-header {
    align-items: flex-start !important;
  }

  .match-status,
  .match-status-badge,
  .round-status {
    margin-left: 0 !important;
  }

  .tv-footer {
    position: static !important;
    justify-content: center !important;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .container,
  .tv-container,
  .main-container,
  .page-container,
  .share-preview-container {
    width: min(100% - 18px, 1120px) !important;
  }

  .join-card,
  .share-content,
  .entity-card,
  .profile-header,
  .profile-body,
  .form-section,
  .card,
  .session-card,
  .match-card,
  .summary-card,
  .share-section,
  .tips-section,
  .qr-section {
    padding: 1rem !important;
  }

  .stats-grid,
  .stats-section,
  .summary-grid,
  .format-cards,
  .input-row,
  .share-grid,
  .sessions-grid,
  .actions-grid,
  .up-next-grid,
  .now-playing-grid {
    grid-template-columns: 1fr !important;
  }

  .share-btn.primary {
    grid-column: auto !important;
  }

  .access-code,
  .pin-code,
  .invite-code {
    font-size: clamp(1rem, 0.85rem + 1.5vw, 1.25rem) !important;
    letter-spacing: 0.035em !important;
    line-height: 1.2;
    word-break: break-all;
  }

  .player-cell,
  .leaderboard-item,
  .match-item,
  .match-card,
  .queue-item,
  .player-item,
  .share-option {
    gap: 0.55rem !important;
  }
}

/* Visual QA overflow hardening for standalone public views. */
.container,
.tv-container,
.main-container,
.page-container,
.content,
main,
header,
.brand-header,
.tv-header,
.page-header,
.card,
.glass-card,
.session-card,
.match-card,
.player-card,
.venue-card,
.leaderboard-card,
.queue-card,
.court-card,
.now-playing-card,
.upcoming-card,
.profile-card,
.share-card,
.stat-card,
.metric-card,
.panel,
.modal-content,
.empty-state,
.qr-card,
.error-card,
.setup-card,
.playlist-card {
  min-width: 0 !important;
}

:is(h1, h2, h3, h4, h5, h6, p, a, button, label, small, span, td, th),
.logo,
.brand-name,
.tv-title,
.page-title,
.section-title,
.card-title,
.stat-value,
.team-name,
.player-name,
.venue-name,
.match-teams,
.queue-item,
.leaderboard-row,
.share-option {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.btn,
button,
input[type="submit"],
.filter-btn,
.action-btn,
.primary-action,
.badge,
.tag,
.status,
.chip,
.pill {
  white-space: normal !important;
  line-height: 1.2 !important;
}

@media (max-width: 640px) {
  .tv-title,
  .page-title,
  h1 {
    line-height: 1.06 !important;
  }

  .card,
  .glass-card,
  .session-card,
  .match-card,
  .player-card,
  .venue-card,
  .leaderboard-card,
  .queue-card,
  .court-card,
  .profile-card,
  .share-card {
    overflow: hidden;
  }
}