:root { color-scheme: dark; --red:#ed1c24; --paper:#f3efe7; --muted:#a6a6ad; --line:#2a2a2f; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:#070709; color:var(--paper); font-family:Arial,Helvetica,sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 82% 12%,rgba(237,28,36,.18),transparent 32%),linear-gradient(120deg,transparent 45%,rgba(255,255,255,.025)); }
.hub-shell { position:relative; width:min(1180px,calc(100% - 36px)); min-height:100vh; margin:auto; display:flex; flex-direction:column; }
.hub-header { height:108px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand-home { display:inline-flex; align-items:center; }
.brand-home img { display:block; width:174px; height:auto; }
.brand-home:focus-visible { outline:3px solid var(--paper); outline-offset:8px; }
.hub-header nav { display:flex; padding:4px; border:1px solid #33343a; border-radius:999px; background:#111115; }
.hub-header nav a { min-width:45px; padding:9px 11px; color:#87878f; text-align:center; text-decoration:none; font-size:12px; font-weight:900; border-radius:999px; }
.hub-header nav a.active { color:#08080a; background:var(--paper); }
main { flex:1; padding:72px 0 64px; }
.hub-hero { max-width:820px; margin-bottom:48px; }
.hub-hero span,.poll-card small { color:var(--red); font-size:12px; font-weight:900; letter-spacing:.18em; }
.hub-hero h1 { margin:12px 0 14px; max-width:780px; font-size:clamp(48px,8vw,94px); line-height:.88; letter-spacing:-.065em; text-transform:uppercase; }
.hub-hero p { margin:0; max-width:620px; color:var(--muted); font-size:clamp(17px,2vw,22px); line-height:1.45; }
.poll-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:16px; }
.poll-card { position:relative; isolation:isolate; min-height:330px; padding:25px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--line); border-radius:4px; background:#111114; color:inherit; text-decoration:none; overflow:hidden; transition:transform .2s ease,border-color .2s ease; }
.poll-card > * { position:relative; z-index:2; }
a.poll-card:hover { transform:translateY(-4px); border-color:#666; }
.poll-card.featured { background:linear-gradient(145deg,#e71920,#a90910); border-color:#f04a50; }
.card-top { display:flex; justify-content:space-between; align-items:flex-start; }
.status { padding:7px 9px; border:1px solid #3b3b42; color:#9a9aa2; font-size:10px; font-weight:900; letter-spacing:.12em; }
.status.live { color:#fff; border-color:rgba(255,255,255,.45); background:rgba(0,0,0,.18); }
.arrow,.star,.shirt { font-size:34px; font-weight:900; line-height:1; opacity:.8; }
.shirt { width:48px; height:48px; display:grid; place-items:center; font-size:18px; border:3px solid #d7d3ca; border-radius:12px 12px 6px 6px; }
.poll-card small { display:block; margin-bottom:10px; color:#9d9da4; }
.featured small { color:#ffd5d6; }
.poll-card h2 { margin:0 0 12px; font-size:clamp(28px,3vw,42px); line-height:.95; letter-spacing:-.04em; text-transform:uppercase; }
.poll-card p { margin:0; color:#aaaab1; line-height:1.45; }
.fixture { position:relative; min-height:76px; display:flex; align-items:center; margin:14px 0 8px; }
.fixture > strong { position:relative; z-index:2; max-width:24ch; font-size:clamp(17px,1.8vw,23px); font-weight:900; line-height:1.04; text-wrap:balance; }
.fixture-badges { position:absolute; z-index:0; right:-32px; bottom:-66px; width:440px; height:275px; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:.09; }
.fixture-badges img { display:block!important; flex:0 0 260px!important; width:260px!important; height:260px!important; max-width:260px!important; max-height:260px!important; object-fit:contain!important; }
.fixture-badges .badge-home { transform:rotate(-14deg) translateX(38px); }
.fixture-badges .badge-away { transform:rotate(14deg) translateX(-38px); }
.poll-card:not(.featured) .fixture-badges { opacity:.075; }
.featured p { color:#ffe6e6; }
.featured > strong { font-size:13px; letter-spacing:.15em; }
.sports-card { background:linear-gradient(150deg,#151519,#0d0d10); }
.sports-card > strong { font-size:13px; letter-spacing:.15em; color:#fff; }
footer { padding:24px 0 30px; border-top:1px solid var(--line); color:#6f6f76; font-size:10px; font-weight:900; letter-spacing:.18em; }
@media (max-width:850px) { .poll-grid { grid-template-columns:1fr; } .poll-card { min-height:250px; } .hub-header { height:86px; } main { padding-top:48px; } }
@media (max-width:520px) { .hub-shell { width:min(100% - 24px,1180px); } .brand-home img { width:140px; } .hub-hero h1 { font-size:48px; } .poll-card { padding:20px; } .fixture > strong { font-size:20px; }.fixture-badges { right:-54px; bottom:-54px; width:360px; height:220px; }.fixture-badges img { flex-basis:205px!important; width:205px!important; height:205px!important; max-width:205px!important; max-height:205px!important; }.fixture-badges .badge-home { transform:rotate(-14deg) translateX(29px); }.fixture-badges .badge-away { transform:rotate(14deg) translateX(-29px); } }