:root {
  color-scheme: dark;
  --ink:#f8f5e9; --muted:#afbacf; --navy:#10131f; --panel:#171c2b; --line:#343b50;
  --blue:#a2b7ff; --lime:#dfff6b; --cream:#f5efdd; --lilac:#d9c6ff; --peach:#ffc998;
  --display:"Arial Black","Segoe UI",system-ui,sans-serif;
  --mono:"Cascadia Mono","SFMono-Regular",Consolas,monospace;
  font: 16px/1.5 "Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--navy); color:var(--ink); accent-color:#4154c8;
}
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; min-width:280px; }
main { min-height:65vh; }
[hidden] { display:none !important; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button { color:inherit; }
button:not(:disabled),summary { cursor:pointer; }
:focus-visible { outline:3px solid #9db7ff; outline-offset:4px; }
h1,h2,h3,p,figure { margin:0; }
small { font-size:14px; }
.wrap { width:min(1232px,calc(100% - 80px)); margin-inline:auto; }
.icon { display:inline-block; flex:none; vertical-align:middle; }
.skip-link { position:absolute; z-index:20; top:10px; left:12px; transform:translateY(-150%); padding:9px 14px; background:var(--lime); color:#11170d; border-radius:5px; }
.skip-link:focus { transform:none; }
.site-head { border-bottom:1px solid var(--line); background:#10131f; }
.head-inner { min-height:76px; display:flex; align-items:center; gap:24px; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; gap:11px; font-weight:900; font-size:16px; letter-spacing:.035em; white-space:nowrap; }
.brand-icon { background:var(--lime); color:#151c15; border-radius:8px; height:37px; width:37px; display:grid; place-items:center; }
.brand-icon .icon { width:25px; height:25px; }
.brand-seven { color:var(--lime); }
.desktop-nav { display:flex; align-items:center; gap:6px; }
.desktop-nav a,.mobile-nav nav a { color:#c3c9d8; padding:8px 12px; border:1px solid transparent; border-radius:7px; font-size:15px; font-weight:650; white-space:nowrap; }
.desktop-nav a:hover,.mobile-nav a:hover { color:var(--ink); background:var(--panel); }
.desktop-nav [aria-current],.mobile-nav [aria-current] { color:var(--ink); border-color:var(--line); background:var(--panel); }
.head-actions { display:flex; align-items:center; gap:8px; }
.small-btn,.icon-btn,.mobile-nav summary { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:7px 12px; border:1px solid var(--line); border-radius:8px; background:transparent; font-size:15px; font-weight:700; white-space:nowrap; }
.small-btn:hover,.mobile-nav summary:hover,.icon-btn:hover { background:#242c40; }
.small-btn .icon { width:19px; height:19px; }
.mobile-nav { display:none; position:relative; }
.mobile-nav summary { list-style:none; padding:7px 9px; }
.mobile-nav summary::-webkit-details-marker { display:none; }
.mobile-nav nav { position:absolute; z-index:8; right:0; top:calc(100% + 10px); display:grid; padding:8px; min-width:180px; border-radius:10px; background:#151a2b; border:1px solid var(--line); box-shadow:0 12px 28px #0008; }
.hero { padding-block:52px 28px; display:grid; grid-template-columns: .88fr 1.12fr; gap:clamp(24px,4vw,66px); align-items:center; }
.hero-copy { padding-block:18px; }
.eyebrow { font:700 14px/1.35 var(--mono); letter-spacing:.09em; color:var(--blue); display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.eyebrow b,.eyebrow i { display:inline-block; width:9px; height:9px; flex:none; border-radius:50%; background:currentColor; }
.eyebrow .icon { width:20px; height:20px; }
.eyebrow.live { color:var(--lime); }
.eyebrow.live i { box-shadow:0 0 0 4px #dfff6b24; animation:beacon 3s ease-out infinite; }
.eyebrow.live span { color:#77829a; }
.hero h1,.subhero h1 { font-family:var(--display); font-weight:950; line-height:.98; letter-spacing:-.068em; font-size:clamp(46px,6.25vw,100px); margin:22px 0 24px; text-wrap:balance; }
.hero h1 em { font-style:normal; color:var(--lime); }
.hero-copy > p { max-width:405px; color:#c5cddd; font-size:clamp(17px,1.55vw,21px); line-height:1.58; text-wrap:pretty; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin-top:27px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 17px; border:1px solid transparent; min-height:51px; border-radius:7px; background:#283148; color:var(--ink); font-weight:800; font-size:15px; line-height:1.24; transition:transform .18s,background-color .18s,border-color .18s,box-shadow .18s; }
.btn:active { transform:translateY(2px); }
.btn:hover:not(:disabled) { transform:translateY(-2px); background:#343e57; }
.btn:disabled { opacity:.64; cursor:wait; }
.btn .icon { width:19px; height:19px; }
.btn.primary { background:var(--lime); color:#151c13; border-color:#e8ffa8; box-shadow:0 3px 0 #9ab63f; }
.btn.primary:hover:not(:disabled) { background:#ebff9f; box-shadow:0 5px 0 #9ab63f; }
.btn.ghost { background:transparent; border-color:#434b62; color:var(--ink); }
.btn.ghost:hover:not(:disabled) { border-color:#7d8dbd; }
.hero-meta { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:23px; color:var(--muted); font-size:14px; }
.hero-meta span { display:flex; align-items:center; gap:7px; }
.hero-meta .icon { width:17px; height:17px; color:var(--blue); }
.hero-art { position:relative; min-width:0; background:#162454; isolation:isolate; overflow:hidden; border:1px solid #5571c6; border-radius:13px; aspect-ratio:1.36; box-shadow:0 16px 45px #080a163d; }
.hero-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:57% 58%; animation:art-in .7s ease-out both; }
.hero-art::after { content:""; position:absolute; z-index:0; inset:0; background:linear-gradient(180deg,#080e2c92,transparent 27%,transparent 62%,#080e2ce8); pointer-events:none; }
.corner { position:absolute; z-index:2; width:13px; height:13px; border:1px solid #b5c7ff; }
.corner.tl { top:10px; left:10px; border-width:1px 0 0 1px; }
.corner.tr { top:10px; right:10px; border-width:1px 1px 0 0; }
.corner.bl { bottom:10px; left:10px; border-width:0 0 1px 1px; }
.corner.br { bottom:10px; right:10px; border-width:0 1px 1px 0; }
.art-top { position:absolute; z-index:1; top:20px; left:23px; right:23px; display:flex; justify-content:space-between; gap:8px; color:#e7eeff; font:700 14px/1.4 var(--mono); letter-spacing:.04em; }
.art-top .icon { width:17px; height:17px; margin-right:5px; }
.art-no { white-space:nowrap; }
.hero-art figcaption { position:absolute; z-index:1; bottom:22px; left:23px; right:23px; display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
.hero-art figcaption b { display:block; font-size:clamp(22px,3vw,34px); line-height:1.1; letter-spacing:-.055em; }
.hero-art figcaption small { color:#e1e8ff; margin-top:5px; display:block; }
.edition-slots { display:flex; gap:4px; font:700 14px/1 var(--mono); }
.edition-slots span { display:grid; place-items:center; width:29px; height:29px; border-radius:3px; border:1px solid #b1c2ff; background:#131d4ad9; color:#e2e8ff; }
.edition-slots span:first-child { background:var(--lime); border-color:var(--lime); color:#171d0e; }
.factbar { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:9px; background:#151a29; }
.factbar > div { display:flex; min-height:78px; align-items:center; padding:12px clamp(10px,2.5vw,30px); gap:14px; }
.factbar > div + div { border-left:1px solid var(--line); }
.factbar .icon { width:24px; height:24px; color:var(--blue); }
.factbar strong,.factbar small { display:block; }
.factbar strong { font-size:16px; }
.factbar small,.muted { color:var(--muted); }
.countdown { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.section-gap { margin-top:68px; }
.section-head { margin-bottom:19px; }
.section-head h2,.copy-block h2 { font-size:clamp(26px,3.45vw,45px); line-height:1.04; letter-spacing:-.052em; font-weight:850; margin-top:10px; text-wrap:balance; }
.section-head p { margin-top:15px; color:var(--muted); line-height:1.64; }
.mode-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.mode-card { position:relative; border:1px solid var(--line); background:#171c2c; min-height:105px; padding:19px; border-radius:9px; display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; transition:background .2s,border-color .2s; }
.mode-card:hover { background:#20283e; border-color:#6575a3; }
.mode-icon { width:50px; height:50px; display:grid; place-items:center; border-radius:8px; color:#161f4b; }
.mode-icon.blue { background:#b4c5ff; }.mode-icon.lilac { background:#d9c6ff; }
.mode-card h3 { font-size:19px; line-height:1.2; letter-spacing:-.02em; }
.mode-card p { font-size:15px; margin-top:5px; color:var(--muted); }
.round-arrow,.topic-arrow { display:grid; place-items:center; width:34px; height:34px; border:1px solid currentColor; border-radius:50%; transition:transform .22s; }
.round-arrow { color:#aebdef; }
.round-arrow .icon,.topic-arrow .icon { width:18px; height:18px; }
.mode-card:hover .round-arrow,.topic-card:hover .topic-arrow { transform:translateX(3px); }
.topic-world { --topic:#a9c2ff; }.topic-premier { --topic:#dfff82; }.topic-champions { --topic:#d4c3fb; }.topic-women { --topic:#ffc79d; }.topic-euro { --topic:#a8e4d6; }
.topic-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.topic-card { position:relative; overflow:hidden; min-height:173px; padding:15px; color:#17203b; background:var(--topic); border-radius:8px; display:flex; flex-direction:column; gap:19px; border:1px solid #fff2; }
.topic-card::before { content:""; position:absolute; inset:0; opacity:.18; pointer-events:none; background:repeating-linear-gradient(133deg,transparent 0 16px,#26345c64 17px,transparent 18px 25px); mask-image:linear-gradient(110deg,transparent 26%,black); }
.topic-top { display:flex; justify-content:space-between; align-items:center; font:700 14px/1 var(--mono); }
.topic-card h3 { position:relative; font-size:clamp(17px,1.6vw,22px); font-weight:850; letter-spacing:-.03em; line-height:1.14; padding-right:2px; }
.topic-card p { position:relative; font-size:14px; max-width:16ch; margin-top:5px; line-height:1.38; padding-bottom:21px; }
.topic-arrow { position:absolute; bottom:11px; right:13px; width:30px; height:30px; }
.how-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,5vw,68px); padding:30px clamp(22px,4vw,45px); background:#181e30; border:1px solid var(--line); border-radius:12px; align-items:center; }
.how-grid .section-head { margin:0; }
.how-grid .section-head .btn { margin-top:19px; }
.how-grid .muted { font-size:14px; margin-top:12px; }
.tier-strip { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.tier-chip { min-width:0; display:flex; gap:10px; align-items:center; padding:11px 12px; border-radius:6px; color:#1a2137; font-weight:850; font-size:15px; line-height:1.3; }
.tier-chip strong { font-size:clamp(25px,3vw,33px); letter-spacing:-.07em; }
.tier-chip small { display:block; font-weight:550; margin-top:1px; }
.tier-chip.lime { background:var(--lime); }.tier-chip.blue { background:var(--blue); }.tier-chip.lilac { background:var(--lilac); }.tier-chip.peach { background:var(--peach); }
.faq-area { display:grid; grid-template-columns:1fr 1.5fr; gap:22px; }
.faqs { border-top:1px solid var(--line); }
.faqs details { border-bottom:1px solid var(--line); }
.faqs summary { display:flex; align-items:center; justify-content:space-between; list-style:none; gap:15px; padding:15px 0; font-size:17px; font-weight:750; }
.faqs summary::-webkit-details-marker { display:none; }
.faqs summary span { font-size:24px; color:var(--blue); line-height:1; }
.faqs details[open] summary span { transform:rotate(45deg); }
.faqs p { padding:0 28px 15px 0; color:var(--muted); }
.site-foot { margin-top:78px; border-top:1px solid var(--line); }
.foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:20px; padding-block:30px; }
.foot-grid nav { display:grid; align-content:start; gap:6px; }
.foot-grid strong { color:var(--ink); margin-bottom:4px; font-size:15px; }
.foot-grid nav a,.foot-grid p,.foot-base { font-size:14px; color:var(--muted); }
.foot-grid nav a:hover { color:var(--lime); text-decoration:underline; }
.foot-grid p { margin-top:11px; max-width:27ch; }
.foot-base { display:flex; gap:13px 26px; justify-content:space-between; flex-wrap:wrap; border-top:1px solid var(--line); padding-block:15px 22px; }
.crumb { display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:14px; margin-bottom:36px; }
.crumb a,.copy-block a { color:#c3cfff; text-decoration:underline; text-underline-offset:3px; }
.subhero { padding-top:29px; padding-bottom:29px; }
.subhero h1 { font-size:clamp(46px,7vw,94px); margin:16px 0 18px; }
.subhero h1 span,.topic-intro .eyebrow { color:var(--topic,var(--lime)); }
.subhero > p { max-width:680px; font-size:clamp(17px,2vw,22px); line-height:1.55; color:#c5cddd; }
.subhero .sub-meta { margin-top:18px; font:700 14px/1.5 var(--mono); color:var(--muted); }
.topic-section { margin-top:10px; }
.copy-block { max-width:min(1232px,calc(100% - 80px)); margin-top:30px; border-top:1px solid var(--line); padding-top:26px; }
.copy-block section,.copy-block > p,.copy-block .faqs,.copy-block .tier-strip { max-width:760px; margin-bottom:28px; }
.copy-block h2 { margin:0 0 11px; font-size:clamp(24px,3vw,33px); }
.copy-block p { color:#c5cddd; font-size:17px; line-height:1.67; }
.copy-block p + p { margin-top:10px; }
.source-list { margin:0; padding-left:22px; line-height:1.65; }
.source-list li { margin-block:7px; }
.archive-list { max-width:min(1232px,calc(100% - 80px)); margin-top:24px; }
.archive-list > a { display:grid; grid-template-columns:5ch 1fr auto; align-items:center; gap:12px; max-width:700px; padding:13px 12px; border:1px solid var(--line); border-radius:7px; margin:7px 0; }
.archive-list > a:hover { background:#242c40; }
.archive-id { font:700 14px/1 var(--mono); color:var(--lime); }
.archive-list p { color:var(--muted); }
.stats-dialog { width:min(520px,calc(100% - 28px)); padding:22px; background:#1a2031; color:var(--ink); border:1px solid #51618b; border-radius:12px; }
.stats-dialog::backdrop { background:#090b16d9; }
.dialog-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.dialog-head h2 { font-size:30px; letter-spacing:-.045em; }
.dialog-head .icon-btn { padding:7px; }
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-block:15px; }
.stats-grid > div { background:#14192a; border:1px solid var(--line); border-radius:7px; padding:10px; display:grid; gap:3px; }
.stats-grid strong { color:var(--lime); font-size:26px; }
.stats-grid small,.stats-dialog p { color:var(--muted); }
.stats-dialog .btn { margin-top:13px; }
@keyframes beacon { 0%,100% { box-shadow:0 0 0 4px #dfff6b24; } 54% { box-shadow:0 0 0 7px #dfff6b08; } }
@keyframes art-in { from { transform:scale(1.035); opacity:.65; } to { transform:scale(1); opacity:1; } }
@media(max-width:1030px) {
  .wrap,.copy-block,.archive-list { width:calc(100% - 54px); max-width:none; }
  .head-inner { gap:13px; }
  .desktop-nav { gap:2px; }
  .desktop-nav a { padding-inline:7px; }
  .hero-art { aspect-ratio:1.2; }
  .edition-slots { gap:3px; }
  .edition-slots span { width:22px; height:23px; }
  .topic-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .wrap,.copy-block,.archive-list { width:calc(100% - 34px); }
  .head-inner { min-height:62px; }
  .brand { font-size:14px; gap:7px; }
  .brand-icon { width:33px; height:33px; }
  .brand-icon .icon { width:21px; height:21px; }
  .desktop-nav { display:none; }
  .mobile-nav { display:block; }
  .hero { grid-template-columns:1fr; padding-top:28px; gap:22px; padding-bottom:18px; }
  .hero-copy { padding:0; }
  .hero h1 { font-size:clamp(48px,10vw,77px); margin-block:14px 14px; }
  .hero-actions { margin-top:19px; }
  .hero-meta { margin-top:14px; }
  .hero-art { aspect-ratio:1.49; }
  .hero-art figcaption { bottom:17px; left:16px; right:16px; }
  .art-top { top:14px; left:16px; right:16px; }
  .factbar > div { min-height:78px; padding-inline:9px; gap:6px; }
  .factbar .icon { display:none; }
  .factbar strong { font-size:15px; }
  .section-gap { margin-top:42px; }
  .how-grid,.faq-area { grid-template-columns:1fr; gap:17px; }
  .how-grid { padding:21px 16px; }
  .faq-area .section-head { margin:0; }
  .foot-grid { grid-template-columns:1fr 1fr; }
  .site-foot { margin-top:46px; }
}
@media(max-width:480px) {
  .small-btn { gap:4px; padding-inline:7px; min-height:38px; font-size:14px; }
  .mobile-nav summary { min-height:38px; padding-inline:6px; }
  .topic-grid,.mode-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .mode-grid { grid-template-columns:1fr; }
  .mode-card { padding:13px; min-height:78px; gap:11px; }
  .mode-icon { width:43px; height:43px; }
  .topic-card { min-height:160px; padding:12px; gap:12px; }
  .topic-card h3 { font-size:19px; }
  .edition-slots span { width:19px; height:20px; }
  .hero-art figcaption small { max-width:12ch; }
  .factbar > div { flex-direction:column; align-items:start; justify-content:center; }
  .tier-chip { align-items:start; flex-direction:column; gap:2px; }
}
@media(max-width:350px) {
  .edition-slots { display:none; }
  .hero h1 { font-size:46px; }
  .factbar strong { font-size:14px; }
  .small-btn .icon { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}