:root { --forest:#0b3428; --forest2:#154b3b; --lime:#c8f36a; --paper:#f4f3ec; --card:#fffef9; --ink:#10231d; --muted:#6f7f79; --line:#d9ddd5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.hidden { display:none !important; }
.viewer-topbar { min-height:70px; padding:10px max(4vw,20px); display:flex; justify-content:space-between; align-items:center; gap:20px; color:white; background:var(--forest); border-bottom:1px solid rgba(255,255,255,.12); }
.viewer-brand { display:flex; align-items:center; gap:11px; }
.viewer-brand > span { width:39px; height:39px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:50%; background:rgba(255,255,255,.07); font-size:21px; }
.viewer-brand strong,.viewer-brand small { display:block; letter-spacing:.12em; }
.viewer-brand strong { font-size:12px; }
.viewer-brand small { margin-top:3px; color:var(--lime); font-size:8px; }
.live-indicator { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.68); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.live-indicator i { width:8px; height:8px; border-radius:50%; background:#f1c76a; box-shadow:0 0 0 4px rgba(241,199,106,.13); }
.live-indicator.online i { background:var(--lime); box-shadow:0 0 0 4px rgba(200,243,106,.13); }
.live-indicator.error i { background:#e87b71; box-shadow:0 0 0 4px rgba(232,123,113,.13); }
.viewer-hero { min-height:245px; padding:52px max(6vw,24px); display:flex; justify-content:space-between; align-items:flex-end; gap:30px; color:white; background-color:var(--forest); background-image:radial-gradient(circle at 75% 25%,rgba(200,243,106,.16),transparent 25%),repeating-linear-gradient(105deg,transparent 0 95px,rgba(255,255,255,.018) 96px 97px); }
.eyebrow,.section-title span,.viewer-podium > span { color:var(--lime); font-size:9px; font-weight:900; letter-spacing:.18em; }
.viewer-hero h1 { margin:9px 0 6px; font-family:Georgia,serif; font-size:clamp(37px,6vw,61px); font-weight:400; letter-spacing:-.035em; }
.viewer-hero p { margin:0; color:rgba(255,255,255,.59); font-size:11px; }
.remaining-box { min-width:174px; padding:15px 17px; display:grid; grid-template-columns:1fr auto; border:1px solid rgba(200,243,106,.3); background:rgba(200,243,106,.065); }
.remaining-box span { grid-column:1/-1; color:rgba(255,255,255,.53); font-size:7px; font-weight:850; letter-spacing:.13em; }
.remaining-box strong { margin-top:5px; color:var(--lime); font-family:Georgia,serif; font-size:36px; font-weight:400; line-height:1; }
.remaining-box small { align-self:end; padding-bottom:4px; color:rgba(255,255,255,.62); font-size:9px; }
.empty-view { min-height:420px; padding:90px 20px; text-align:center; }
.loader-ball { font-size:52px; animation:float 2s ease-in-out infinite; }
@keyframes float { 50% { transform:translateY(-9px) rotate(7deg); } }
.empty-view h2 { margin:20px 0 8px; font-family:Georgia,serif; font-size:28px; font-weight:400; }
.empty-view p { max-width:510px; margin:auto; color:var(--muted); font-size:11px; line-height:1.7; }
.viewer-section { width:min(1220px,calc(100% - 40px)); margin:0 auto; padding:48px 0 10px; }
.section-title { margin-bottom:17px; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.section-title span { color:#71847c; }
.section-title h2 { margin:5px 0 0; font-family:Georgia,serif; font-size:28px; font-weight:400; }
.section-title > small { color:#7b8984; font-size:8px; }
.viewer-groups { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.group-view { overflow:hidden; border:1px solid var(--line); background:var(--card); box-shadow:0 10px 30px rgba(23,42,35,.06); }
.group-view header { height:56px; padding:0 19px; display:flex; justify-content:space-between; align-items:center; color:white; background:var(--forest2); }
.group-view header h3 { margin:0; font-family:Georgia,serif; font-size:21px; font-weight:400; }
.group-view header small { color:rgba(255,255,255,.55); font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.table-scroll { overflow-x:auto; }
.standings-view { width:100%; min-width:500px; border-collapse:collapse; table-layout:fixed; font-size:10px; }
.standings-view th { height:32px; color:#7b8984; background:#f5f5ef; font-size:8px; text-transform:uppercase; }
.standings-view td { height:42px; padding:0 4px; border-top:1px solid #e4e6e0; text-align:center; }
.standings-view .pos { width:30px; color:#82908b; }
.standings-view .club { width:auto; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:750; }
.standings-view .pts { color:var(--forest); font-size:12px; font-weight:900; }
.standings-view tr.qualifying .pos::before { content:""; width:3px; height:16px; margin-right:5px; display:inline-block; vertical-align:middle; background:#a7d449; }
.schedule-title { margin-top:40px; }
.viewer-schedule { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.match-view { min-height:57px; padding:8px 12px; display:grid; grid-template-columns:50px minmax(0,1fr) 66px minmax(0,1fr); align-items:center; gap:7px; border:1px solid var(--line); background:var(--card); }
.match-view .meta { color:#87938f; font-size:7px; text-transform:uppercase; }
.match-view .home { text-align:right; }
.match-view .home,.match-view .away { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; font-weight:750; }
.match-view .score { padding:7px 5px; color:var(--forest); background:#ecf3d9; text-align:center; font-size:13px; font-weight:900; }
.match-view.pending .score { color:#81908b; background:#eff1ec; }
.viewer-bracket { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; }
.round-view h3 { margin:0 0 10px; color:#74827d; font-size:8px; letter-spacing:.15em; text-transform:uppercase; }
.round-matches { display:grid; gap:9px; }
.ko-view { border:1px solid #d7dbd4; border-left:3px solid #9eaaa6; background:var(--card); box-shadow:0 7px 20px rgba(23,42,35,.05); }
.ko-view.complete { border-left-color:#a7d449; }
.ko-view header { height:23px; padding:0 9px; display:flex; justify-content:space-between; align-items:center; color:#82908b; background:#f4f5ef; font-size:7px; text-transform:uppercase; }
.ko-view .team { min-height:38px; padding:0 10px; display:flex; justify-content:space-between; align-items:center; gap:8px; border-top:1px solid #e3e5df; font-size:9px; font-weight:750; }
.ko-view .team.winner { background:#f1f8df; }
.ko-view .team span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ko-view .team b { font-size:12px; }
.ko-view .pens { padding:6px 9px; color:#687970; background:#edf3df; text-align:center; font-size:8px; }
.viewer-podium { margin-top:55px; padding:54px 20px 68px; color:white; text-align:center; background:var(--forest); }
.viewer-podium h2 { margin:8px 0 0; color:var(--lime); font-family:Georgia,serif; font-size:clamp(32px,5vw,50px); font-weight:400; }
.viewer-places { max-width:650px; margin:38px auto 0; display:flex; align-items:flex-end; justify-content:center; gap:7px; }
.viewer-place { width:31%; min-height:88px; padding:13px 7px; display:flex; flex-direction:column; justify-content:center; gap:5px; border-top:3px solid rgba(255,255,255,.23); background:rgba(255,255,255,.07); }
.viewer-place.first { min-height:128px; border-color:var(--lime); background:rgba(200,243,106,.13); }
.viewer-place b { color:var(--lime); font-family:Georgia,serif; font-size:24px; font-weight:400; }
.viewer-place strong { overflow-wrap:anywhere; font-size:10px; }
.viewer-place small { font-size:18px; }
footer { min-height:62px; padding:14px max(4vw,20px) calc(14px + env(safe-area-inset-bottom)); display:flex; justify-content:space-between; align-items:center; gap:20px; color:#72817b; background:#e8e9e2; border-top:1px solid #d7dad3; font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
@media (max-width:780px) { .viewer-groups,.viewer-schedule,.viewer-bracket { grid-template-columns:1fr; } .viewer-hero { align-items:flex-start; flex-direction:column; } .remaining-box { width:100%; } .section-title { align-items:flex-start; flex-direction:column; } .viewer-section { width:calc(100% - 24px); padding-top:34px; } }
@media (max-width:480px) { .viewer-topbar { align-items:flex-start; flex-direction:column; } .viewer-hero { padding-top:38px; } .match-view { grid-template-columns:32px minmax(0,1fr) 54px minmax(0,1fr); padding:7px; } footer { align-items:flex-start; flex-direction:column; } }