/* Fast Seven Netball site. Pro League (the game's menus): square bevelled blue buttons, red for the
   main actions, gold headings on banded navy, with the app icon's coral glow for the hero. The game's
   own pixel fonts for display text, Nunito for reading. Dark "Arena" and light "Day match" themes. */

@font-face { font-family: "Fast Seven Display"; src: url("/assets/fonts/fast-seven-display.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Fast Seven Pixel"; src: url("/assets/fonts/fast-seven-pixel.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/assets/fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  /* Day match (light) */
  --bg: #EEF2FA;
  --band-a: #E6ECF8;
  --band-b: #EEF2FA;
  --panel: #FFFFFF;
  --panel-2: #F5F8FF;
  --edge-hi: #FFFFFF;
  --edge-lo: #A8B6D8;
  --outline: #0B1A3D;
  --text: #0E1A36;
  --dim: #44557E;
  --heading: #0B1A3D;
  --heading-shadow: #F2B705;
  --link: #1E3F86;
  --rule: #C9D3EA;
  --chip: #E3E9F7;
  --code-bg: #E3E9F7;
  --focus: #C8202E;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #081530;
    --band-a: #0A1938;
    --band-b: #0C1D41;
    --panel: #0F2350;
    --panel-2: #13295C;
    --edge-hi: #2C4E95;
    --edge-lo: #060F2A;
    --outline: #02050F;
    --text: #F4F8FF;
    --dim: #B3C4EA;
    --heading: #F2B705;
    --heading-shadow: #6A0E16;
    --link: #8FBBFF;
    --rule: #1C3A78;
    --chip: #18336E;
    --code-bg: #0A1838;
    --focus: #F2B705;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #081530;
  --band-a: #0A1938;
  --band-b: #0C1D41;
  --panel: #0F2350;
  --panel-2: #13295C;
  --edge-hi: #2C4E95;
  --edge-lo: #060F2A;
  --outline: #02050F;
  --text: #F4F8FF;
  --dim: #B3C4EA;
  --heading: #F2B705;
  --heading-shadow: #6A0E16;
  --link: #8FBBFF;
  --rule: #1C3A78;
  --chip: #18336E;
  --code-bg: #0A1838;
  --focus: #F2B705;
  color-scheme: dark;
}

/* Brand colours shared by both themes (Pro League buttons, the coral icon). */
:root {
  --blue: #1E3F86; --blue-hi: #5C8CE8; --blue-lo: #0B1A3D;
  --blue-hover: #2B57B5;
  --red: #C8202E; --red-hi: #F26A72; --red-lo: #6A0E16;
  --gold: #F2B705; --teal: #3FA7A0; --green: #3DBE6A;
  --coral-in: #FF7A59; --coral-out: #E8224E;
  --ink: #04081A;
  --display: "Fast Seven Display", "Arial Black", Impact, sans-serif;
  --pixel: "Fast Seven Pixel", "Courier New", monospace;
  --body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--bg) repeating-linear-gradient(180deg, var(--band-a) 0 48px, var(--band-b) 48px 96px);
  color: var(--text);
  font: 17px/1.6 var(--body);
}
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: 16px; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--red); color: #fff; padding: 12px 16px; z-index: 50; font: 16px var(--pixel); }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type: the display font is crisp at multiples of 12 px, the pixel font at multiples of 8 px. */
h1, h2, h3, .display { font-family: var(--display); font-style: normal; font-weight: 400; line-height: 1.15; letter-spacing: .02em; text-wrap: balance; margin: 0; color: var(--heading); }
h1 { font-size: clamp(36px, 7vw, 60px); text-shadow: 3px 3px 0 var(--heading-shadow); }
h2 { font-size: 36px; text-shadow: 2px 2px 0 var(--heading-shadow); }
h3 { font-size: 24px; }
p { margin: 0; max-width: 68ch; }
.lead { font-size: 19px; color: var(--text); }
.dim { color: var(--dim); }
.label, .eyebrow { font: 16px/1.4 var(--pixel); text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }
.eyebrow { color: var(--red); }
:root[data-theme="dark"] .eyebrow { color: var(--red-hi); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eyebrow { color: var(--red-hi); } }
.stack { display: grid; gap: 16px; }
.stack-lg { display: grid; gap: 32px; }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: #081530; border-bottom: 3px solid var(--ink); box-shadow: 0 2px 0 #1E3F86; }
.top .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 48px; color: #fff; }
.logo .icon { width: 40px; height: 40px; border-radius: 9px; border: 2px solid var(--ink); }
.logo .mark { width: 297px; height: 39px; }
.logo .mark-sm { font: 24px var(--display); color: var(--gold); text-shadow: 2px 2px 0 var(--red-lo); display: none; }
.nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.nav a { font: 16px var(--pixel); text-transform: uppercase; color: #DCE7FF; text-decoration: none; padding: 14px 10px; min-height: 48px; display: inline-flex; align-items: center; border-bottom: 3px solid transparent; }
.nav a:hover { color: #fff; border-bottom-color: var(--blue-hi); }
.nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }
details.menu { margin-left: auto; display: none; position: relative; }
details.menu summary { list-style: none; cursor: pointer; width: 48px; height: 48px; display: grid; place-items: center; background: var(--blue); box-shadow: inset 2px 2px 0 var(--blue-hi), inset -2px -2px 0 var(--blue-lo), 0 0 0 2px var(--ink); }
details.menu summary::-webkit-details-marker { display: none; }
details.menu summary span, details.menu summary span::before, details.menu summary span::after { display: block; width: 22px; height: 3px; background: #fff; position: relative; content: ""; }
details.menu summary span::before { position: absolute; top: -7px; }
details.menu summary span::after { position: absolute; top: 7px; }
details.menu nav { position: absolute; right: 0; top: 56px; background: #0F2350; border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 #2C4E95, 0 8px 20px rgba(0,0,0,.4); display: grid; min-width: 220px; padding: 6px; }
details.menu nav a { font: 16px var(--pixel); text-transform: uppercase; color: #F4F8FF; text-decoration: none; padding: 14px 12px; min-height: 48px; }
details.menu nav a[aria-current="page"] { color: var(--gold); }
@media (max-width: 1080px) { .nav { display: none; } details.menu { display: block; } }
@media (max-width: 560px) { .logo .mark { display: none; } .logo .mark-sm { display: inline; } }

/* Pro League buttons: square, raised bevel, 2 px ink outline. Red for the main action. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px; font: 16px/1 var(--pixel); text-transform: uppercase; letter-spacing: .04em; color: #fff; text-decoration: none; background: var(--blue); border: 0; cursor: pointer; box-shadow: inset 3px 3px 0 var(--blue-hi), inset -3px -3px 0 var(--blue-lo), 0 0 0 2px var(--ink); }
.btn:hover { background: var(--blue-hover); }
.btn:active { box-shadow: inset 3px 3px 0 var(--blue-lo), inset -3px -3px 0 var(--blue-hi), 0 0 0 2px var(--ink); }
.btn.red { background: var(--red); box-shadow: inset 3px 3px 0 var(--red-hi), inset -3px -3px 0 var(--red-lo), 0 0 0 2px var(--ink); }
.btn.red:hover { background: #E0303E; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Store slots: "Coming soon" until config.js has the store URL, then the badge. */
.store { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 16px; text-decoration: none; color: #fff; background: #0B0D18; border: 2px solid #fff; border-radius: 10px; font: 16px/1.2 var(--pixel); text-transform: uppercase; }
.store[href] { cursor: pointer; }
.store .soon { display: block; }
.store img { display: block; height: 40px; width: auto; }

/* Panels: the game's bevelled tiles, with a red tab heading. */
.panel { background: var(--panel); padding: 20px; box-shadow: inset 2px 2px 0 var(--edge-hi), inset -2px -2px 0 var(--edge-lo), 0 0 0 2px var(--outline); min-width: 0; }
.tab { display: inline-block; align-self: start; justify-self: start; font: 24px/1.1 var(--display); color: #fff; background: var(--red); padding: 6px 12px 4px; box-shadow: inset 2px 2px 0 var(--red-hi), inset -2px -2px 0 var(--red-lo), 0 0 0 2px var(--ink); text-shadow: 2px 2px 0 var(--ink); }

/* Sections */
main section { padding-block: 56px; }
.sec-head { display: grid; gap: 10px; margin-bottom: 28px; }
.court-rule { height: 34px; background: center / auto 34px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 34'%3E%3Cg fill='none' stroke='%233FA7A0' stroke-width='3'%3E%3Cpath d='M0 17h600M200 2v30M400 2v30'/%3E%3Ccircle cx='300' cy='17' r='9'/%3E%3Cpath d='M0 2a32 32 0 0 1 0 30M600 2a32 32 0 0 0 0 30'/%3E%3C/g%3E%3C/svg%3E"); opacity: .7; }
.page-head { padding-block: 40px 8px; display: grid; gap: 14px; }
.page-head .lead { color: var(--dim); }

/* Hero: the app icon's coral glow, the animated shooter from the game's splash, the pixel wordmark. */
.hero { background: radial-gradient(ellipse 70% 90% at 30% 45%, var(--coral-in), var(--coral-out) 70%); color: #fff; border-bottom: 3px solid var(--ink); padding-block: 40px 48px !important; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; align-items: center; }
.hero h1 { color: #fff; text-shadow: 3px 3px 0 var(--red-lo); }
.hero .lead { color: #fff; }
.hero .meta { font: 16px/1.5 var(--pixel); text-transform: uppercase; color: #FFE7DF; }
.hero .wordmark { width: 594px; height: 78px; }
.hero .tagline { font: 24px var(--display); letter-spacing: .3em; color: #fff; display: flex; align-items: center; gap: 14px; }
.hero .tagline::before, .hero .tagline::after { content: ""; height: 3px; width: 48px; background: #fff; }
.hero .btn:not(.red) { background: #fff; color: var(--blue-lo); box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 #C9D3EA, 0 0 0 2px var(--ink); }
@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 16px; }
  .hero .shooter-box { width: min(130px, 38vw); justify-self: center; }
  .hero .wordmark { width: 297px; height: 39px; }
}
.shooter-box { position: relative; }
.shooter { position: relative; width: 100%; }
.shooter img, .shooter .flash { position: absolute; display: block; height: auto; max-width: none; }
.shooter .flash { aspect-ratio: 1; border-radius: 50%; border: 6px solid #fff; opacity: 0; }
.shooter .ball { animation: f7-ball 6s ease-in-out 1s infinite; }
.shooter .net { animation: f7-net 6s ease-in-out 1s infinite; }
.shooter .ponytail { animation: f7-ponytail 3s ease-in-out infinite; }
.shooter .flash { animation: f7-flash 6s ease-out 1s infinite; }

/* Screenshots in landscape phone frames */
.phone { background: #05070F; border-radius: 26px; padding: 10px 16px; box-shadow: 0 0 0 2px #2A2F45, 0 12px 28px rgba(0, 0, 0, .35); position: relative; min-width: 0; }
.phone::before { content: ""; position: absolute; left: 5px; top: 50%; width: 5px; height: 34px; margin-top: -17px; border-radius: 3px; background: #1A1E2E; }
.phone img { display: block; width: 100%; aspect-ratio: 1560 / 720; border-radius: 10px; image-rendering: pixelated; background: #000; }
figure { margin: 0; }
figure.shot { display: grid; gap: 10px; }
figure.shot figcaption { font-size: 15px; color: var(--dim); }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 520px); gap: 20px; overflow-x: auto; padding: 6px 4px 18px; scroll-snap-type: x mandatory; }
.strip > * { scroll-snap-align: start; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.split.flip > :first-child { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.flip > :first-child { order: 0; } }

/* Feature tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; }
.tile { display: grid; gap: 12px; text-decoration: none; color: var(--text); }
.tile:hover h3 { color: var(--red); }
.tile .phone { padding: 6px 10px; border-radius: 18px; }
.tile p { color: var(--dim); font-size: 16px; }

/* Facts and lists */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.facts li { display: grid; gap: 6px; }
.facts b { font: 24px var(--display); color: var(--heading); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { padding-left: 28px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 12px; height: 12px; background: var(--gold); box-shadow: 0 0 0 2px var(--ink); }

/* Ways to play */
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.mode { display: grid; gap: 10px; align-content: start; }
.mode .time { font: 16px var(--pixel); color: var(--teal); text-transform: uppercase; }

/* Touch icons as the game's round buttons */
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.controls li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.controls .btn-round { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 0 0 0 2px var(--ink); }
.controls .btn-round.teal { background: #5FB8B0; }
.controls .btn-round img { width: 38px; height: 38px; }
.controls b { display: block; font: 16px var(--pixel); text-transform: uppercase; }
.controls span { color: var(--dim); font-size: 15px; }

/* Position bibs */
.bibs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.bib { display: grid; place-items: center; min-width: 52px; height: 52px; padding: 0 8px; font: 24px var(--display); color: #fff; background: var(--red); box-shadow: inset 2px 2px 0 var(--red-hi), inset -2px -2px 0 var(--red-lo), 0 0 0 2px var(--ink); }
.bib.blue { background: var(--blue); box-shadow: inset 2px 2px 0 var(--blue-hi), inset -2px -2px 0 var(--blue-lo), 0 0 0 2px var(--ink); }
.bib-row { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.bib-list { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }

/* Nations */
.nations { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.nation { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; background: var(--panel); padding: 14px; box-shadow: inset 2px 2px 0 var(--edge-hi), inset -2px -2px 0 var(--edge-lo), 0 0 0 2px var(--outline); }
.nation img { width: 64px; height: 64px; image-rendering: pixelated; }
.nation div { display: grid; gap: 2px; min-width: 0; }
.nation b { font: 24px/1.1 var(--display); color: var(--heading); }
.nation .rank { font: 16px var(--pixel); color: var(--teal); }
.nation .style { font-size: 15px; }
.nation .ident { font-size: 14px; color: var(--dim); }
.nation .kit { display: flex; gap: 4px; margin-top: 4px; }
.nation .kit i { width: 18px; height: 18px; box-shadow: 0 0 0 2px var(--ink); }

/* Commentary booths */
.booths { display: grid; gap: 24px; }
.booth { display: grid; gap: 14px; }
.booth .covers { color: var(--dim); }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.strap { display: grid; gap: 2px; padding: 10px 14px; background: linear-gradient(90deg, var(--blue), #13295C); color: #fff; border-left: 8px solid var(--gold); box-shadow: 0 0 0 2px var(--ink); }
.strap .job { font: 16px var(--pixel); text-transform: uppercase; color: var(--gold); }
.strap b { font: 24px var(--display); }
.strap span:last-child { color: #DCE7FF; font-size: 15px; }
.reel { display: grid; gap: 10px; }
.reel figcaption { font: 16px var(--pixel); text-transform: uppercase; color: var(--teal); }
.reel audio { width: 100%; min-height: 48px; }
.reel summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font: 16px var(--pixel); text-transform: uppercase; }
.transcript { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; }
.transcript li { display: grid; grid-template-columns: 3em 9em 1fr; gap: 10px; }
.transcript time { font: 16px var(--pixel); color: var(--dim); }
.transcript b { color: var(--heading); font-weight: 800; }
@media (max-width: 560px) { .transcript li { grid-template-columns: 3em 1fr; } .transcript li span { grid-column: 2; } }

/* Daily and boards */
.daily-card { display: grid; gap: 14px; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; text-align: center; }
.vs .side { display: grid; justify-items: center; gap: 6px; }
.vs img { width: 64px; height: 64px; image-rendering: pixelated; }
.vs b { font: 24px var(--display); color: var(--heading); }
.vs .v { font: 36px var(--display); color: var(--red); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips li { font: 16px var(--pixel); text-transform: uppercase; padding: 8px 10px; background: var(--chip); }
.board { width: 100%; border-collapse: collapse; font-size: 16px; }
.board th { font: 16px var(--pixel); text-transform: uppercase; color: var(--dim); text-align: left; padding: 8px; border-bottom: 2px solid var(--rule); }
.board td { padding: 8px; border-bottom: 1px solid var(--rule); }
.board td.n { text-align: right; font-variant-numeric: tabular-nums; }
.board tr.you td { background: var(--chip); font-weight: 800; }
.board-wrap { overflow-x: auto; }
.note { font-size: 15px; color: var(--dim); }
.status-box { padding: 14px 16px; background: var(--panel-2); border-left: 6px solid var(--teal); }
.status-box.warn { border-left-color: var(--red); }
.code { font: 36px var(--display); letter-spacing: .08em; color: var(--heading); }

/* Legal and support pages */
.letter { background: var(--panel); padding: clamp(18px, 4vw, 40px); box-shadow: inset 2px 2px 0 var(--edge-hi), inset -2px -2px 0 var(--edge-lo), 0 0 0 2px var(--outline); display: grid; gap: 14px; }
.letter h2 { font-size: 24px; margin-top: 18px; text-shadow: none; }
.letter ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.letter table { border-collapse: collapse; font-size: 15px; width: 100%; }
.letter th, .letter td { text-align: left; padding: 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table-wrap { overflow-x: auto; }
.faq { display: grid; gap: 10px; }
.faq details { background: var(--panel); box-shadow: inset 2px 2px 0 var(--edge-hi), inset -2px -2px 0 var(--edge-lo), 0 0 0 2px var(--outline); }
.faq summary { cursor: pointer; padding: 14px 18px; min-height: 48px; font-weight: 800; }
.faq details > div { padding: 0 18px 16px; display: grid; gap: 10px; }
code { background: var(--code-bg); padding: 1px 6px; font-size: .92em; }

/* Footer */
.foot { margin-top: 40px; background: #081530; color: #DCE7FF; border-top: 3px solid var(--ink); box-shadow: 0 -2px 0 #1E3F86; padding-block: 36px; }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: start; }
.foot .msg { color: #DCE7FF; font-size: 16px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: flex-end; max-width: 520px; }
.foot nav a, .foot .cookie-settings { color: #fff; font: 16px var(--pixel); text-transform: uppercase; text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; }
.foot nav a:hover, .foot .cookie-settings:hover { color: var(--gold); }
.foot small { flex-basis: 100%; text-align: right; color: #9FB2DA; font-size: 13px; }
.foot .stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
@media (max-width: 760px) { .foot .wrap { grid-template-columns: 1fr; } .foot nav { justify-content: flex-start; } .foot small { text-align: left; } }

/* 404 */
.lost { text-align: center; display: grid; gap: 18px; justify-items: center; padding-block: 60px; }
.lost .shooter-box { width: 140px; }

/* Reveal on scroll, only when scripting is on (site.js adds .js-reveal). */
@media (scripting: enabled) {
  .js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
  .js-reveal .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
}