:root {
  --ink: #071b16;
  --forest: #0c2d24;
  --forest-2: #123e31;
  --lime: #d9ff43;
  --chalk: #f2f1e9;
  --paper: #e7e5da;
  --muted: #8d9a94;
  --line: rgba(242, 241, 233, .15);
  --red: #ff775f;
  --radius: 22px;
  font-family: "Noto Sans SC", sans-serif;
  color: var(--chalk);
  background: var(--ink);
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% -10%, #1f5643 0, transparent 32rem), var(--ink); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.court-lines { position: fixed; inset: 0; pointer-events: none; opacity: .055; z-index: 0; background: linear-gradient(90deg, transparent 8%, #fff 8% 8.1%, transparent 8.1% 91.9%, #fff 91.9% 92%, transparent 92%), linear-gradient(0deg, transparent 18%, #fff 18% 18.1%, transparent 18.1% 49.9%, #fff 49.9% 50.1%, transparent 50.1% 81.9%, #fff 81.9% 82%, transparent 82%); }
.site-header, main, footer { position: relative; z-index: 1; }
.site-header { height: 74px; max-width: 1180px; margin: auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { color: var(--chalk); text-decoration: none; display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: .05em; }
.brand small { color: var(--muted); font: 500 10px/1 "Oswald", sans-serif; letter-spacing: .16em; padding-left: 2px; }
.brand-ball { width: 22px; height: 22px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 22px rgba(217,255,67,.25); position: relative; overflow: hidden; }
.brand-ball::before { content: ""; position: absolute; width: 18px; height: 18px; border: 1px solid var(--ink); border-radius: 50%; left: -12px; top: 1px; box-shadow: 24px 0 0 -1px var(--lime), 24px 0 0 0 var(--ink); }
.header-actions { display: flex; align-items: center; gap: 18px; }
.timezone { color: var(--muted); font-size: 12px; letter-spacing: .05em; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; }
.icon-button:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.icon-button svg, .search-panel svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }

main { max-width: 1180px; margin: auto; padding: 58px 24px 100px; }
.hero { min-height: 290px; position: relative; }
.eyebrow { text-transform: uppercase; color: var(--lime); font: 500 12px/1 "Oswald", sans-serif; letter-spacing: .16em; display: flex; gap: 9px; align-items: center; }
.eyebrow span { width: 22px; height: 1px; background: currentColor; }
.hero h1 { font-size: clamp(52px, 8.4vw, 104px); line-height: .93; letter-spacing: -.07em; margin: 26px 0 22px; max-width: 820px; }
.hero h1 em { color: var(--lime); font-style: normal; }
.hero p { color: var(--muted); margin: 0; font-size: 15px; }
.hero-orbit { position: absolute; right: 2%; top: -22px; width: 250px; aspect-ratio: 1; border: 1px solid rgba(217,255,67,.16); border-radius: 50%; animation: rotate 15s linear infinite; }
.hero-orbit::before, .hero-orbit::after { content: ""; position: absolute; inset: 22%; border: 1px solid rgba(217,255,67,.11); border-radius: 50%; }
.hero-orbit::after { inset: 44%; background: var(--lime); border: 0; box-shadow: 0 0 70px rgba(217,255,67,.28); }
.hero-orbit i { position: absolute; width: 9px; height: 9px; background: var(--lime); border-radius: 50%; top: 15%; left: 12%; }
@keyframes rotate { to { transform: rotate(360deg); } }

.scoreboard { background: var(--chalk); color: var(--ink); border-radius: 34px; padding: 34px; box-shadow: 0 30px 80px rgba(0,0,0,.25); }
.date-heading { display: flex; align-items: end; justify-content: space-between; padding-bottom: 28px; }
.date-heading > div { display: grid; grid-template-columns: auto auto; align-items: end; column-gap: 10px; }
.date-heading span { color: #8b918c; font: 500 15px/1 "Oswald", sans-serif; grid-column: 1; }
.date-heading strong { font-size: clamp(30px, 4vw, 44px); line-height: 1; letter-spacing: -.04em; grid-column: 1; }
.date-heading small { color: #6f7772; font-size: 12px; grid-column: 2; padding-bottom: 4px; }
.today-button { border: 1px solid #c7c9c1; background: transparent; padding: 9px 15px; border-radius: 100px; color: #37453f; font-size: 12px; cursor: pointer; }
.today-button:hover { background: var(--ink); color: var(--chalk); border-color: var(--ink); }

.date-strip-wrap { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 8px; border-top: 1px solid #d1d1c8; border-bottom: 1px solid #d1d1c8; }
.date-strip { display: grid; grid-template-columns: repeat(7, minmax(52px, 1fr)); overflow: hidden; }
.date-tab { min-height: 82px; border: 0; border-left: 1px solid #d1d1c8; background: transparent; color: #737a76; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; position: relative; }
.date-tab:last-child { border-right: 1px solid #d1d1c8; }
.date-tab span { font-size: 11px; }
.date-tab strong { color: var(--ink); font: 600 20px/1 "Oswald", sans-serif; }
.date-tab.active { background: var(--ink); color: #aab6b0; }
.date-tab.active strong { color: var(--lime); }
.date-tab.today::after { content: ""; position: absolute; bottom: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--lime); }
.date-arrow { border: 0; background: transparent; color: #5c6862; font-size: 18px; cursor: pointer; }
.date-arrow:hover { color: var(--ink); }

.toolbar { display: flex; justify-content: space-between; align-items: center; padding: 28px 0 18px; }
.filters { display: flex; gap: 7px; flex-wrap: wrap; }
.filter { border: 1px solid #c9ccc4; color: #52605a; background: transparent; padding: 8px 14px; border-radius: 100px; font-size: 12px; cursor: pointer; }
.filter:hover, .filter.active { color: var(--chalk); background: var(--forest); border-color: var(--forest); }
.match-count { color: #7e8581; font: 500 12px/1 "Oswald", sans-serif; letter-spacing: .06em; }
.search-panel { height: 50px; border: 1px solid #c8cbc3; border-radius: 14px; display: flex; align-items: center; gap: 12px; padding: 0 14px; margin-bottom: 20px; color: #65706a; }
.search-panel[hidden] { display: none; }
.search-panel input { border: 0; background: transparent; flex: 1; outline: 0; color: var(--ink); }
.search-panel button { border: 0; background: transparent; font-size: 24px; color: #76807b; cursor: pointer; }

.timeline { position: relative; }
.timeline::before { content: ""; position: absolute; left: 62px; top: 20px; bottom: 0; width: 1px; background: #ced0c8; }
.tournament-group { margin: 12px 0 34px; animation: rise .48s both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.tournament-header { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; gap: 12px; align-items: center; margin: 0 0 11px 40px; position: relative; }
.tour-mark { width: 46px; height: 46px; border-radius: 50%; background: var(--forest); border: 10px solid var(--chalk); box-shadow: 0 0 0 1px #cfd1ca; position: relative; z-index: 2; }
.tour-mark::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--lime); }
.tour-level { color: #778079; font: 500 10px/1 "Oswald", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.tour-name { font-size: 16px; margin: 3px 0 0; letter-spacing: -.02em; }
.tour-meta { color: #778079; font-size: 11px; }
.match-list { margin-left: 80px; border-top: 1px solid #d5d6cf; }
.match-card { width: 100%; border: 0; border-bottom: 1px solid #d5d6cf; background: transparent; color: var(--ink); text-align: left; padding: 17px 8px; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto 24px; gap: 14px; align-items: center; cursor: pointer; transition: background .2s, padding .2s; }
.match-card:hover { background: #e9e9df; padding-left: 14px; padding-right: 14px; }
.match-time strong { display: block; font: 600 19px/1 "Oswald", sans-serif; }
.match-time small { color: #78827d; font-size: 10px; }
.player-row { display: grid; grid-template-columns: 30px minmax(0,1fr) 40px; gap: 8px; min-height: 28px; align-items: center; }
.flag { color: #78827d; font: 500 9px/1 "Oswald", sans-serif; letter-spacing: .04em; }
.player { min-width: 0; overflow: hidden; font-size: 14px; line-height: 1.1; }
.player-primary, .player-secondary { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-secondary { color: #818984; font: 400 9px/1.2 "Oswald", sans-serif; letter-spacing: .02em; margin-top: 3px; }
.player.winner { font-weight: 800; }
.rank { color: #858d88; font-size: 10px; }
.sets { display: flex; gap: 4px; align-items: stretch; }
.set { width: 29px; min-height: 48px; background: #dedfd7; display: grid; grid-template-rows: 1fr 1fr; place-items: center; font: 600 12px/1 "Oswald", sans-serif; border-radius: 4px; }
.set .won { color: var(--chalk); background: var(--forest); width: 100%; height: 100%; display: grid; place-items: center; border-radius: 3px; }
.scheduled-label { color: #65716b; font-size: 11px; border: 1px solid #c7cac2; border-radius: 100px; padding: 6px 9px; white-space: nowrap; }
.chevron { color: #87908b; font-size: 20px; }
.loading { padding: 80px 0; display: flex; justify-content: center; gap: 7px; }
.loading[hidden] { display: none; }
.loading span { width: 7px; height: 7px; background: var(--forest); border-radius: 50%; animation: pulse 1s infinite alternate; }
.loading span:nth-child(2) { animation-delay: .2s; }.loading span:nth-child(3) { animation-delay: .4s; }
@keyframes pulse { to { opacity: .2; transform: translateY(-6px); } }
.empty-state { text-align: center; padding: 70px 20px; }
.empty-ball { width: 54px; height: 54px; border-radius: 50%; background: var(--lime); margin: auto; box-shadow: inset 0 0 0 1px #bfd738; }
.empty-state h2 { margin: 18px 0 6px; font-size: 20px; }.empty-state p { margin: 0; color: #75807a; font-size: 13px; }

footer { max-width: 1180px; margin: auto; padding: 0 24px 44px; display: flex; justify-content: space-between; color: #87958e; font-size: 11px; }
footer div { display: flex; gap: 8px; align-items: center; }.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }

.match-dialog { width: min(560px, calc(100% - 28px)); border: 0; border-radius: 28px; padding: 0; color: var(--ink); background: var(--chalk); box-shadow: 0 30px 100px rgba(0,0,0,.5); }
.match-dialog::backdrop { background: rgba(2, 14, 11, .78); backdrop-filter: blur(8px); }
.dialog-close { position: absolute; right: 18px; top: 14px; z-index: 2; border: 0; background: rgba(255,255,255,.12); color: inherit; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 23px; }
.dialog-hero { background: var(--forest); color: var(--chalk); padding: 32px 28px 25px; }
.dialog-kicker { color: var(--lime); font: 500 10px/1 "Oswald", sans-serif; letter-spacing: .12em; }
.dialog-hero h2 { font-size: 20px; margin: 8px 44px 22px 0; }
.dialog-players { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.dialog-player:last-child { text-align: right; }.dialog-player strong { display: block; font-size: 16px; }.dialog-player small { display: block; color: #d4ddd8; font: 400 10px/1.2 "Oswald", sans-serif; margin: 3px 0; }.dialog-player span { color: #9fb1a9; font-size: 11px; }
.dialog-score { color: var(--lime); font: 600 26px/1 "Oswald", sans-serif; }
.dialog-body { padding: 26px 28px 30px; }
.match-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 24px; }
.fact { background: var(--paper); border-radius: 12px; padding: 11px; }.fact span { display: block; color: #7c847f; font-size: 9px; }.fact strong { display: block; margin-top: 4px; font-size: 12px; }
.stats-title { display: flex; justify-content: space-between; align-items: end; border-bottom: 1px solid #cfd1c9; padding-bottom: 10px; }.stats-title h3 { margin: 0; font-size: 14px; }.stats-title span { color: #7d8580; font-size: 10px; }
.stat-row { display: grid; grid-template-columns: 46px 1fr 46px; gap: 12px; text-align: center; align-items: center; padding: 11px 0; border-bottom: 1px solid #d9dad3; font: 600 13px/1 "Oswald", sans-serif; }.stat-row label { color: #707a74; font: 400 11px/1.2 "Noto Sans SC", sans-serif; }
.no-stats { color: #758079; font-size: 13px; text-align: center; padding: 30px 0 10px; }
.demo-note { background: #f0e8c8; color: #695d2f; font-size: 11px; line-height: 1.6; padding: 10px 14px; border-radius: 10px; margin-top: 18px; }
.demo-note a { color: inherit; font-weight: 700; text-underline-offset: 2px; }

@media (max-width: 720px) {
  .site-header { height: 62px; padding: 0 17px; }.brand small, .timezone { display: none; }
  main { padding: 35px 0 80px; }.hero { min-height: 250px; padding: 0 20px; overflow: hidden; }.hero h1 { font-size: 56px; margin-top: 24px; }.hero-orbit { width: 180px; right: -60px; top: 8px; }
  .scoreboard { border-radius: 28px 28px 0 0; padding: 25px 16px 32px; }.date-heading { padding: 0 4px 22px; }.date-heading strong { font-size: 32px; }
  .date-strip-wrap { grid-template-columns: 22px minmax(0,1fr) 22px; }.date-strip { grid-template-columns: repeat(5, minmax(54px, 1fr)); }.date-tab:nth-child(n+6) { display: none; }.date-tab { min-height: 74px; }.date-tab:nth-child(5) { border-right: 1px solid #d1d1c8; }
  .toolbar { padding-top: 22px; align-items: start; }.filters { gap: 5px; }.filter { padding: 7px 11px; }.match-count { padding-top: 8px; }
  .timeline::before { left: 22px; }.tournament-header { margin-left: 0; grid-template-columns: 46px minmax(0,1fr); }.tour-meta { grid-column: 2; margin-top: -10px; }.match-list { margin-left: 41px; }
  .match-card { grid-template-columns: 60px minmax(0,1fr) auto 14px; gap: 8px; padding: 15px 2px; }.match-time strong { font-size: 17px; }.rank { display: none; }.player-row { grid-template-columns: 27px minmax(0,1fr); }.sets { gap: 2px; }.set { width: 23px; }.chevron { font-size: 15px; }
  footer { padding: 27px 18px 35px; display: block; } footer p { margin-top: 10px; }
  .dialog-hero, .dialog-body { padding-left: 20px; padding-right: 20px; }.match-facts { grid-template-columns: 1fr 1fr; }.match-facts .fact:last-child { grid-column: 1 / -1; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 49px; }
  .scoreboard { padding-left: 12px; padding-right: 12px; }
  .today-button { padding: 8px 10px; }
  .match-list { margin-left: 35px; }
  .timeline::before { left: 18px; }
  .match-card { grid-template-columns: 54px minmax(0,1fr) auto 10px; gap: 5px; }
  .match-time strong { font-size: 16px; }
  .flag { display: none; }
  .player-row { grid-template-columns: minmax(0,1fr); }
  .set { width: 21px; }
  .scheduled-label { padding: 5px 7px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; } }