:root{
  --navy:#142f55;
  --navy-2:#0c2340;
  --crimson:#b5123b;
  --crimson-2:#8f0f31;
  --ink:#172033;
  --muted:#687385;
  --bg:#f4f6f9;
  --card:#ffffff;
  --line:#e1e6ed;
  --green:#256d3c;
  --green-bg:#eaf5ed;
  --gold:#8a6d1d;
  --gold-bright:#d7b269;
  --gold-bg:#fff6d6;
  --shadow:0 14px 34px rgba(15,35,64,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top right,rgba(181,18,59,.05),transparent 26rem),
    var(--bg);
}
button,input,select{font:inherit}
.hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(135deg,var(--navy-2),var(--navy) 58%,#1a416f);
}
.hero::after{
  content:"";
  position:absolute;inset:auto -8% -56% auto;
  width:36rem;height:36rem;border:1px solid rgba(255,255,255,.08);border-radius:50%;
  box-shadow:0 0 0 70px rgba(255,255,255,.02),0 0 0 140px rgba(255,255,255,.015);
}
.hero-court{
  position:absolute;inset:0;opacity:.18;
  background:
    linear-gradient(90deg,transparent 49.7%,rgba(255,255,255,.35) 49.8%,rgba(255,255,255,.35) 50.2%,transparent 50.3%),
    linear-gradient(transparent 63%,rgba(255,255,255,.25) 63.1%,rgba(255,255,255,.25) 63.5%,transparent 63.6%);
  pointer-events:none;
}
.hero-inner{
  position:relative;z-index:1;
  max-width:1180px;margin:auto;padding:52px 24px 48px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
}
.hero-copy{max-width:820px}
.hero-kicker,.section-label{
  font-size:.72rem;letter-spacing:.18em;font-weight:850;text-transform:uppercase;
}
.hero-kicker{color:#c7d7ea}
.hero-title-row{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-top:9px}
h1{margin:0;line-height:.94;letter-spacing:-.035em}
h1 span,h1 strong{display:block}
h1 span{font-size:clamp(2rem,5vw,4.2rem);font-weight:650}
h1 strong{font-size:clamp(2.35rem,6vw,5.2rem);font-weight:900}
.season-chip{
  display:inline-flex;align-items:center;min-height:32px;padding:6px 10px;
  border:1px solid rgba(255,255,255,.3);border-radius:999px;
  font-size:.72rem;font-weight:850;letter-spacing:.12em;
  background:rgba(255,255,255,.08);backdrop-filter:blur(6px);
  margin-bottom:7px;
}
.tagline{margin:15px 0 0;color:#dce6f2;font-size:1rem}
.hero-mark{position:relative;width:124px;height:124px;flex:0 0 124px}
.paddle{
  position:absolute;width:66px;height:66px;border-radius:50%;
  background:var(--crimson);right:18px;top:11px;
  box-shadow:0 12px 26px rgba(0,0,0,.2);
}
.paddle::after{
  content:"";position:absolute;width:18px;height:54px;background:#f2d2b4;
  border-radius:10px;left:24px;top:52px;transform:rotate(24deg);transform-origin:top center;
}
.ball{
  position:absolute;width:20px;height:20px;border-radius:50%;
  background:#fff;left:8px;bottom:23px;
  box-shadow:0 0 0 7px rgba(255,255,255,.07);
}
.tabs{
  position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  display:flex;gap:4px;padding:9px max(12px,calc((100% - 1180px)/2));overflow-x:auto;
}
.tab{
  border:0;background:transparent;padding:10px 15px;border-radius:999px;
  font-weight:750;color:#586477;white-space:nowrap;cursor:pointer;transition:.18s ease;
}
.tab:hover{background:#eef2f7;color:var(--navy)}
.tab.active{background:var(--navy);color:#fff;box-shadow:0 5px 14px rgba(20,47,85,.16)}
.nav-divider{width:1px;height:24px;background:var(--line);margin:0 4px;flex:0 0 auto}
.nav-action{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:9px 14px;border-radius:999px;
  border:1px solid #cfd7e2;background:#fff;color:var(--navy);
  text-decoration:none;font-weight:800;font-size:.88rem;white-space:nowrap;
}
.nav-action:hover{background:#f4f7fb;border-color:#bcc8d6}
.nav-action-primary{background:var(--crimson);border-color:var(--crimson);color:#fff}
.nav-action-primary:hover{background:var(--crimson-2);border-color:var(--crimson-2)}
main{max-width:1180px;margin:auto;padding:24px}
.view{display:none}.view.active{display:block}
.status-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:16px;
}
.live-cluster{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.live-error{width:100%;font-size:.8rem;color:#a11f36;margin-top:4px;display:none}
.status-pill{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.8rem;font-weight:800;border-radius:999px;padding:7px 11px;
  background:#edf2f7;color:#4b5563;
}
.status-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:#9aa5b1}
.status-pill.live{background:var(--green-bg);color:var(--green)}
.status-pill.live::before{background:#33a15d;box-shadow:0 0 0 4px rgba(51,161,93,.11)}
.status-pill.fallback{background:var(--gold-bg);color:var(--gold)}
.status-pill.fallback::before{background:#c49b2f}
.secondary-btn{
  border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 13px;
  cursor:pointer;color:#4f5d70;font-weight:700;
}
.panel{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:22px;margin-bottom:20px;box-shadow:0 1px 0 rgba(15,35,64,.02);
}
.panel h2{margin:0 0 8px;font-size:1.28rem;letter-spacing:-.01em}
.panel h3{margin:24px 0 8px}
.panel p{color:var(--muted);line-height:1.55}
.player-finder{
  position:relative;overflow:hidden;padding:28px;
  background:linear-gradient(135deg,#fff,#f8fbff);
  border-color:#d8e2ee;box-shadow:var(--shadow);
}
.player-finder::after{
  content:"";position:absolute;right:-42px;top:-54px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(181,18,59,.11),rgba(181,18,59,0) 67%);
  pointer-events:none;
}
.finder-copy{position:relative;z-index:1}
.section-label{color:var(--crimson)}
.finder-copy h2{font-size:1.8rem;margin:5px 0 4px}
.finder-copy p{margin:0 0 18px}
.search-shell{position:relative;z-index:1;max-width:720px}
.search-icon{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:1.4rem;
  color:#7f8a9b;pointer-events:none;
}
.search,select{
  border:1px solid #cbd4df;border-radius:10px;padding:10px 12px;background:#fff;
  font-size:1rem;min-height:42px;color:var(--ink);
}
.search{min-width:220px;flex:1}
.search-hero{
  width:100%;min-height:54px;border-radius:14px;padding:13px 16px 13px 48px;
  font-size:1.05rem;box-shadow:0 7px 22px rgba(15,35,64,.06);
}
.search:focus,select:focus{outline:3px solid rgba(181,18,59,.11);border-color:#cf7f98}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0 20px}
.compact-stats .stat-card{padding:14px 16px}
.stat-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.stat-card span{color:var(--muted);font-size:.82rem;font-weight:700}
.stat-card strong{font-size:1.7rem;color:var(--navy);letter-spacing:-.03em}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.home-columns .panel{min-height:100%}
.section-heading,.filters{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.stack{display:grid;gap:10px}
.match-card,.result-card{
  position:relative;border:1px solid var(--line);border-radius:14px;padding:15px 16px;
  background:#fff;transition:.16s ease;
}
.match-card:hover,.result-card:hover{border-color:#c8d3df;box-shadow:0 7px 18px rgba(15,35,64,.05)}
.match-card::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--crimson);
}
.match-meta{
  font-size:.74rem;color:var(--muted);margin:0 0 8px 7px;
  text-transform:uppercase;letter-spacing:.04em;font-weight:750;
}
.match-main{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  font-weight:800;font-size:.98rem;margin-left:7px;
}
.match-main b{
  color:var(--crimson);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;
  background:#fff0f4;border-radius:999px;padding:4px 7px;
}
.match-main span:last-child{text-align:right}
.result-card strong{color:var(--navy)}
.match-list{margin-top:16px;display:grid;gap:10px}
.qualification-strip{
  display:grid;grid-template-columns:minmax(220px,.75fr) 1.25fr;align-items:center;gap:24px;
  border-left:5px solid var(--crimson);background:linear-gradient(90deg,#fff,#fbf7f8);
}
.qualification-strip h2{margin-top:5px}
.qualification-strip p{margin:0}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left}
th{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.055em;color:#667286;
  background:#f8fafc;position:sticky;top:0;
}
tbody tr:last-child td{border-bottom:0}
.table-wrap{overflow-x:auto;border-radius:10px}
.standings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.group-standing{
  border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#fff;
}
.group-title{
  padding:11px 13px;background:linear-gradient(90deg,var(--navy),#1d4a7c);color:#fff;
  font-weight:850;letter-spacing:.03em;
}
.rank-auto{background:#eef8f0}.rank-wild{background:#fff9e8}
.badge{
  display:inline-flex;padding:3px 7px;border-radius:999px;font-size:.68rem;font-weight:850;
  vertical-align:middle;margin-left:5px;
}
.badge.qual{background:var(--green-bg);color:var(--green)}
.badge.ineligible{background:#fdecec;color:#a33}
.groups-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.group-card{
  border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#fff;
  box-shadow:0 5px 16px rgba(15,35,64,.03);
}
.group-card h3{
  margin:0;background:linear-gradient(90deg,var(--navy),#214f83);color:#fff;
  padding:12px 14px;font-size:1.05rem;
}
.player-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 13px;border-top:1px solid var(--line);
}
.player-row>span:first-child{font-weight:700}
.role{
  display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;
  color:#5d6879;background:#f1f4f8;font-size:.72rem;font-weight:750;text-align:right;white-space:nowrap;
}
.qual-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.qual-item{
  border:1px solid var(--line);border-radius:10px;padding:10px 11px;background:#fff;
}
.small-note{font-size:.85rem}.muted-empty{color:var(--muted)}
.rules{max-width:880px}
.rules h3{color:var(--navy)}
.rules li{margin:8px 0;line-height:1.5}
footer{max-width:1180px;margin:0 auto 30px;padding:0 24px;color:var(--muted);font-size:.85rem}
@media(max-width:850px){
  .hero-mark{display:none}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .two-col,.standings-grid{grid-template-columns:1fr}
  .groups-grid{grid-template-columns:repeat(2,1fr)}
  .qualification-strip{grid-template-columns:1fr}
}
@media(max-width:700px){
  .nav-divider{display:none}
  .nav-action{padding:9px 12px}
}
@media(max-width:560px){
  .hero-inner{padding:36px 18px 34px}
  .hero-title-row{gap:10px}
  .season-chip{margin-bottom:2px}
  main{padding:16px 12px}
  .panel{padding:16px;border-radius:14px}
  .player-finder{padding:20px}
  .groups-grid{grid-template-columns:1fr}
  .filters>*{width:100%}.search{min-width:0}
  .stat-card{padding:12px}
  .stat-card strong{font-size:1.45rem}
  th,td{padding:8px 6px;font-size:.8rem}
  .match-main{grid-template-columns:1fr;gap:5px}
  .match-main b{justify-self:start}
  .match-main span:last-child{text-align:left}
}

.history-panel{
  background:linear-gradient(135deg,#fff,#fbfcfe);
  border-color:#d9e2ec;
}
.history-panel .section-heading{margin-bottom:14px}
.history-panel .section-heading p{margin:4px 0 0}
.challenge-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.challenge-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  padding:16px;
  background:#fff;
  min-height:178px;
}
.challenge-card::after{
  content:"";
  position:absolute;
  right:-38px;bottom:-48px;
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(20,47,85,.07),transparent 68%);
  pointer-events:none;
}
.challenge-featured{border-top:3px solid var(--crimson)}
.challenge-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px;
}
.challenge-tag{
  font-size:.66rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;
  color:var(--crimson);
}
.challenge-stat{
  font-size:.82rem;color:var(--navy);background:#f1f5f9;border-radius:999px;padding:5px 8px;
  white-space:nowrap;
}
.challenge-card h3{
  margin:0 0 8px;
  font-size:1.08rem;
  color:var(--navy);
}
.challenge-card p{
  margin:0;
  font-size:.9rem;
  line-height:1.5;
}
@media(max-width:900px){
  .challenge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .challenge-grid{grid-template-columns:1fr}
  .challenge-card{min-height:0}
}

/* Final visual polish */
.hero{border-top:3px solid var(--gold-bright)}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 78% 22%,rgba(215,178,105,.10),transparent 18rem),
    linear-gradient(115deg,transparent 0 63%,rgba(255,255,255,.02) 63% 64%,transparent 64%);
  pointer-events:none;
}
.hero-side{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:18px;
  flex:0 0 auto;
}
.hero-values{
  margin-top:18px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.hero-values span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.055);
  color:#dce6f2;
  font-size:.74rem;
  font-weight:750;
}
.hall-of-fame{
  width:245px;
  border:1px solid rgba(215,178,105,.44);
  background:linear-gradient(180deg,rgba(9,30,55,.78),rgba(12,35,64,.62));
  border-radius:16px;
  padding:13px 14px;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
  backdrop-filter:blur(7px);
}
.hof-title{
  color:var(--gold-bright);
  font-size:.69rem;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
  margin-bottom:7px;
}
.hof-row{
  display:grid;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:8px;
  padding:7px 0;
  border-top:1px solid rgba(255,255,255,.09);
}
.hof-year{
  color:#c8d5e4;
  font-size:.74rem;
  font-weight:800;
}
.hof-row strong{
  color:#fff;
  font-size:.84rem;
  line-height:1.15;
}
.hof-crown{
  color:var(--gold-bright);
  font-size:.65rem;
  font-weight:850;
  white-space:nowrap;
}
.hof-pending strong{color:#dbe5f1;font-weight:700}
.hof-pending .hof-crown{color:#b9c4d1}
.stat-card{
  position:relative;
  overflow:hidden;
  box-shadow:0 7px 20px rgba(15,35,64,.035);
}
.stat-card::after{
  content:"";
  position:absolute;
  right:-18px;top:-28px;
  width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle,rgba(181,18,59,.07),transparent 70%);
}
.compact-stats .stat-card:nth-child(2n)::after{
  background:radial-gradient(circle,rgba(215,178,105,.10),transparent 70%);
}
.section-heading h2,
.panel>h2{
  position:relative;
}
.section-heading h2::after,
.panel>h2::after{
  content:"";
  display:block;
  width:34px;
  height:2px;
  border-radius:2px;
  margin-top:8px;
  background:linear-gradient(90deg,var(--crimson),var(--gold-bright));
}
.history-panel{
  background:
    radial-gradient(circle at 95% 10%,rgba(215,178,105,.08),transparent 18rem),
    linear-gradient(135deg,#fff,#fbfcfe);
}
.challenge-featured{
  border-top-color:var(--gold-bright);
  box-shadow:inset 0 3px 0 rgba(181,18,59,.08);
}
.challenge-tag{color:var(--crimson-2)}
.challenge-stat{
  border:1px solid #e8dfcf;
  background:#fbf8f1;
}
.group-title{
  border-bottom:2px solid var(--gold-bright);
}
.qualification-strip{
  box-shadow:0 8px 22px rgba(15,35,64,.035);
}
footer{
  position:relative;
  padding-top:18px;
}
footer::before{
  content:"";
  position:absolute;
  top:0;left:24px;right:24px;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
@media(max-width:1000px){
  .hero-side{gap:10px}
  .hall-of-fame{width:220px}
  .hero-mark{width:96px;height:96px;flex-basis:96px}
}
@media(max-width:850px){
  .hero-inner{align-items:flex-start}
  .hero-side{width:100%;justify-content:flex-start}
  .hall-of-fame{width:min(100%,360px)}
}
@media(max-width:620px){
  .hero-side{display:block;margin-top:8px}
  .hall-of-fame{width:100%}
  .hof-row{grid-template-columns:42px 1fr}
  .hof-crown{grid-column:2}
}

.room-priority-note{
  margin:4px 0 16px;
  padding:12px 14px;
  border:1px solid #ead9b7;
  border-left:4px solid var(--gold-bright);
  border-radius:12px;
  background:#fffaf0;
  color:#5b4a24;
  line-height:1.45;
  font-size:.9rem;
}
.mobile-actions{
  display:none;
}
.table-wrap{
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
.tab,.nav-action,.secondary-btn,.mobile-actions a{
  min-height:44px;
}
@media(max-width:850px){
  .hero-inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .hero-copy{
    max-width:100%;
    width:100%;
  }
  .hero-side{
    width:100%;
    justify-content:space-between;
  }
  .tabs .nav-action,
  .tabs .nav-divider{
    display:none;
  }
  body{
    padding-bottom:76px;
  }
  .mobile-actions{
    position:fixed;
    z-index:50;
    left:12px;right:12px;bottom:10px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:8px;
    border:1px solid rgba(20,47,85,.12);
    border-radius:16px;
    background:rgba(255,255,255,.96);
    box-shadow:0 12px 30px rgba(15,35,64,.18);
    backdrop-filter:blur(12px);
  }
  .mobile-actions a{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 12px;
    border-radius:11px;
    text-decoration:none;
    font-size:.86rem;
    font-weight:850;
    color:var(--navy);
    background:#f2f5f9;
    text-align:center;
  }
  .mobile-actions .mobile-action-primary{
    background:var(--crimson);
    color:#fff;
  }
}
@media(max-width:560px){
  .hero-side{
    display:block;
  }
  .hall-of-fame{
    margin-top:6px;
  }
  .tabs{
    padding-left:10px;
    padding-right:10px;
  }
  .tab{
    padding:10px 12px;
  }
  .status-row{
    align-items:flex-start;
  }
  .room-priority-note{
    font-size:.86rem;
  }
  .table-wrap{
    margin-left:-4px;
    margin-right:-4px;
  }
}