:root {
  --navy:#10263f;
  --orange:#ff4f1f;
  --cream:#f7f4ef;
  --muted:#6c7a89;
  --green:#178b6c;
}
* { box-sizing:border-box; }
html,body { min-height:100%; }
body {
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--navy);
  background: var(--cream) url('../assets/genesys-wave-background.png') center/cover fixed no-repeat;
}
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(247,244,239,.96),rgba(247,244,239,.86) 58%,rgba(247,244,239,.72)); }
.board-shell { position:relative; z-index:1; width:min(1500px, calc(100% - 48px)); margin:22px auto; }
.board-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:15px 20px; border-radius:18px; background:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.8); box-shadow:0 18px 45px rgba(16,38,63,.10); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; }
.genesys-full-logo { display:block; width:155px; height:auto; }
.event { font-size:12px; font-weight:900; letter-spacing:.1em; }
.event span { color:var(--orange); margin:0 7px; }
.live-pill { justify-self:end; display:flex; align-items:center; gap:7px; padding:8px 11px; border-radius:999px; background:rgba(23,139,108,.08); color:var(--green); font-size:10px; font-weight:950; letter-spacing:.08em; }
.live-pill i { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(23,139,108,.4); animation:pulse 1.7s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 9px rgba(23,139,108,0); } 100% { box-shadow:0 0 0 0 rgba(23,139,108,0); } }
.hero { display:flex; align-items:end; justify-content:space-between; gap:30px; padding:34px 8px 22px; }
.hero p { margin:0 0 5px; color:var(--orange); font-size:12px; font-weight:950; letter-spacing:.14em; }
.hero h1 { margin:0; font-size:clamp(48px,7vw,92px); line-height:.86; letter-spacing:-.065em; }
.hero h1 span { color:var(--orange); }
.hero small { display:block; margin-top:13px; color:var(--muted); font-size:15px; }
.scope-tabs { display:flex; padding:5px; border-radius:999px; background:rgba(255,255,255,.82); border:1px solid rgba(16,38,63,.08); box-shadow:0 10px 25px rgba(16,38,63,.07); }
.scope-tabs button { border:0; padding:10px 17px; border-radius:999px; background:transparent; color:var(--muted); font-weight:900; font-size:10px; letter-spacing:.08em; cursor:pointer; }
.scope-tabs button.active { background:var(--navy); color:#fff; }
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.stats-row > div { padding:15px 18px; border-radius:15px; background:rgba(255,255,255,.86); border:1px solid rgba(255,255,255,.8); box-shadow:0 12px 28px rgba(16,38,63,.07); }
.stats-row span,.stats-row b { display:block; }
.stats-row span { font-size:8px; font-weight:950; letter-spacing:.11em; color:var(--muted); }
.stats-row b { margin-top:5px; font-size:26px; letter-spacing:-.04em; }
.podium { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
.podium-card { position:relative; min-height:160px; padding:20px; overflow:hidden; border-radius:20px; background:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.8); box-shadow:0 18px 40px rgba(16,38,63,.09); }
.podium-card.first { color:#fff; background:linear-gradient(140deg,var(--navy),#203d5b); }
.podium-card::after { content:attr(data-rank); position:absolute; right:16px; bottom:-28px; font-size:115px; font-weight:950; letter-spacing:-.09em; color:rgba(16,38,63,.05); }
.podium-card.first::after { color:rgba(255,255,255,.06); }
.podium-rank { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:999px; background:rgba(255,79,31,.09); color:var(--orange); font-size:9px; font-weight:950; letter-spacing:.08em; }
.podium-card.first .podium-rank { background:rgba(255,79,31,.18); color:#ff916b; }
.podium-card h2 { position:relative; z-index:1; margin:12px 0 3px; font-size:25px; }
.podium-card p { position:relative; z-index:1; margin:0; color:var(--muted); font-size:11px; }
.podium-card.first p { color:rgba(255,255,255,.66); }
.podium-score { position:relative; z-index:1; margin-top:15px; color:var(--orange); font-size:38px; font-weight:950; letter-spacing:-.055em; }
.ranking-card { margin-top:14px; padding:6px 14px 10px; border-radius:20px; background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.8); box-shadow:0 18px 40px rgba(16,38,63,.08); }
.ranking-head,.ranking-row { display:grid; grid-template-columns:70px minmax(230px,1.3fr) minmax(230px,1fr) 150px; align-items:center; gap:12px; }
.ranking-head { padding:12px 10px 7px; color:var(--muted); font-size:8px; font-weight:950; letter-spacing:.09em; }
.ranking-row { min-height:58px; padding:9px 10px; border-top:1px solid rgba(16,38,63,.065); }
.ranking-row .rank { font-size:19px; font-weight:950; }
.person b,.person small { display:block; }
.person b { font-size:14px; }
.person small { margin-top:2px; color:var(--muted); font-size:9px; }
.outcome { display:flex; gap:10px; }
.outcome span { padding:5px 8px; border-radius:8px; background:rgba(16,38,63,.04); color:var(--muted); font-size:8px; font-weight:800; }
.score { justify-self:end; font-size:21px; font-weight:950; color:var(--orange); }
.empty { padding:34px; text-align:center; color:var(--muted); }
footer { display:flex; justify-content:space-between; gap:20px; padding:15px 6px 0; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.new-leader { position:fixed; z-index:20; left:50%; top:24px; transform:translate(-50%,-170%); min-width:350px; padding:13px 18px; border-radius:16px; text-align:center; color:#fff; background:linear-gradient(120deg,var(--orange),#ff742f); box-shadow:0 20px 55px rgba(255,79,31,.32); transition:transform .5s cubic-bezier(.2,.9,.25,1.2); }
.new-leader.show { transform:translate(-50%,0); }
.new-leader span,.new-leader b,.new-leader small { display:block; }
.new-leader span { font-size:8px; font-weight:950; letter-spacing:.12em; }
.new-leader b { margin-top:2px; font-size:22px; }
.new-leader small { margin-top:2px; opacity:.82; }
@media(max-width:900px){ .board-shell{width:min(100% - 18px,760px)} .board-header{grid-template-columns:1fr auto}.event{display:none}.hero{align-items:flex-start;flex-direction:column}.stats-row{grid-template-columns:repeat(2,1fr)}.podium{grid-template-columns:1fr}.ranking-head{display:none}.ranking-row{grid-template-columns:50px 1fr 110px}.outcome{display:none}.score{grid-column:3}.new-leader{min-width:min(350px,calc(100% - 30px))} }