/* Flying Disc League website (fdleague.com + playstallzero.com). Shared by / and /privacy.
   Tokens mirror src/scenes/ui_theme.gd exactly (tests/unit/test_website_pages.py checks each token line's trailing CONST comment).
   Red #D7263D is a FILL / border / >= 24 px colour; small red text is --red-bright. Hover only darkens:
   white on a lighter red (#E5394F) fails AA for small text. */
@font-face {
  font-family: "Oxanium";
  src: url(fonts/oxanium.woff2) format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url(fonts/inter.woff2) format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
:root {
  --navy-0: #0A1630;       /* MENU_BG_TOP */
  --navy-1: #0F2A5F;       /* MENU_BG_BOTTOM, the slab */
  --inset: #07102A;        /* BG_INSET */
  --red: #D7263D;          /* ACCENT */
  --red-press: #A81C2E;    /* ACCENT_PRESSED */
  --red-hover: #C0213A;    /* between ACCENT and ACCENT_PRESSED: hover only darkens */
  --red-bright: #E77483;   /* ACCENT_BRIGHT */
  --ink: #FFFFFF;
  --dim: #8E9CBA;          /* TEXT_DIM */
  --info: #A9BEDD;         /* INFO_TEXT */
  --line: rgba(255, 255, 255, 0.14);
  --keyline: rgba(255, 255, 255, 0.25);  /* the logo's white keyline */
  --head: "Oxanium", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 16px;
  --maxw: 72rem;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--navy-0);
  color: var(--ink);
  font: 400 16px/1.6 var(--body);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
b, strong { font-weight: 600; }
[hidden] { display: none !important; }
a { color: var(--info); }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 48rem) { :root { --gutter: 32px; } }
h1, h2, h3 { font-family: var(--head); font-weight: 700; line-height: 1.15; margin: 0; }
h2 { font-size: 1.35rem; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 40rem) { h2 { font-size: 1.15rem; } }
.skip { position: absolute; left: var(--gutter); top: -4rem; z-index: 20; padding: 0.6rem 1rem;
  background: var(--navy-1); color: var(--ink); font: 600 0.9rem/1 var(--head); }
.skip:focus { top: 0.75rem; }

/* ---- Buttons: the title screen's slab language (square corners, white edge bar, Oxanium caps) */
.slab {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3rem; padding: 0.7rem 1.4rem 0.7rem 1.2rem;
  font: 700 1rem/1 var(--head); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; border: 0; cursor: pointer;
  background: rgba(15, 42, 95, 0.92); border-left: 4px solid var(--ink);
  transition: background-color 120ms ease;
}
.slab:hover { background: #163570; color: var(--ink); }
.slab:active { background: var(--inset); }
.slab.go { background: var(--red); }
.slab.go:hover { background: var(--red-hover); }
.slab.go:active { background: var(--red-press); }
.slab.big { min-height: 3.5rem; font-size: 1.15rem; padding: 0.9rem 1.8rem 0.9rem 1.5rem; }
.slab svg { width: 1.15em; height: 1.15em; flex: none; }

/* ---- Hero (direction "Slab"): clean key art full-bleed, logo top-left, h1 + CTA bottom-left on a navy fade.
   The art's subjects span ~20-85 % of its width: keep the text block below ~55 % of the hero height. */
.hero { position: relative; min-height: min(100svh, 58rem); display: flex; flex-direction: column;
  justify-content: flex-end; overflow: hidden; background: var(--navy-0); }
.hero picture { position: absolute; inset: 0; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-fade { position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 70% at 0% 100%, rgba(10,22,48,0.94) 0%, rgba(10,22,48,0.72) 42%, rgba(10,22,48,0) 78%),
    linear-gradient(0deg, var(--navy-0) 0%, rgba(10,22,48,0.55) 14%, rgba(10,22,48,0) 34%); }
.corner { position: absolute; inset: 0 auto auto 0; width: min(34rem, 70vw); height: 15rem;
  background: radial-gradient(ellipse 100% 100% at 0% 0%, rgba(10,22,48,0.85) 0%, rgba(10,22,48,0.45) 45%, rgba(10,22,48,0) 75%); }
.top { position: absolute; top: 0; left: 0; right: 0; padding-top: clamp(1.25rem, 3.5vh, 2.25rem); }
.logo { width: clamp(8.5rem, 13vw, 13rem); height: auto; }
.hero-in { position: relative; padding-top: 10rem; padding-bottom: clamp(2.25rem, 6vh, 4rem); }
.hero h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); max-width: 14ch; letter-spacing: 0.01em;
  text-shadow: 0 2px 18px rgba(10,22,48,0.6); }
.lede { font-size: 1.05rem; color: #DCE5F3; max-width: 25rem; margin: 0.7rem 0 1.4rem;
  text-shadow: 0 1px 10px rgba(10,22,48,0.8); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.1rem; }
.live { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.4rem; padding: 0.4rem 0.9rem;
  background: rgba(10,22,48,0.82); box-shadow: inset 0 0 0 1px var(--keyline);
  font: 600 0.82rem/1 var(--head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--info);
  text-decoration: none; }
.live b { color: var(--ink); font-size: 0.95rem; }
.live i { width: 0.55rem; height: 0.55rem; background: var(--red); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(215,38,61,0.55); } 70% { box-shadow: 0 0 0 0.5rem rgba(215,38,61,0); } 100% { box-shadow: 0 0 0 0 rgba(215,38,61,0); } }
.hero .dl-meta { text-shadow: 0 1px 8px rgba(10,22,48,0.9); }

main { background: linear-gradient(180deg, var(--navy-0) 0%, var(--navy-1) 100%); }
.sec { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.sec + .sec { padding-top: 0; }
.sec-title { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.sec-title::before { content: ""; width: 4px; height: 1.4rem; background: var(--red); }

/* ---- Download notes */
.dl-meta { color: var(--info); font-size: 0.9rem; margin: 0.75rem 0 0; }
.dl-meta a { color: var(--ink); }
.dl-meta a:hover { color: var(--info); }
.dl-note { color: var(--dim); font-size: 0.8rem; line-height: 1.5; margin: 0.6rem 0 0; max-width: 36rem; }
.dl-note strong { color: var(--info); }
.dl-interim { color: var(--dim); font-size: 0.8rem; margin: 0.4rem 0 0; }

/* ---- Live-games cards (built by the inline server browser in index.html) */
.servers-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem;
  border-bottom: 1px solid var(--line); padding-bottom: 0.5rem; margin-bottom: 1.1rem; }
.servers-head .sec-title { margin-bottom: 0; }
.online { color: var(--info); font-size: 0.9rem; }
.online b { color: var(--ink); }
.empty { color: var(--dim); text-align: center; padding: 2.2rem 1rem; margin: 0; border: 1px dashed var(--line); }
#cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1rem; }
.card { position: relative; overflow: hidden; min-height: 15rem; background: var(--inset); display: flex;
  border: 1px solid var(--line); }
.card .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,22,48,0.88) 0%, rgba(10,22,48,0.50) 34%,
                                      rgba(10,22,48,0.74) 72%, rgba(10,22,48,0.94) 100%); }
.card .body, .card .body * { text-shadow: 0 1px 3px rgba(0,0,0,0.85); }
.card .box, .card .btn { text-shadow: none; }
.card .body { position: relative; width: 100%; padding: 0.75rem 0.9rem 0.9rem; display: flex;
  flex-direction: column; gap: 0.6rem; }
.chead { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sname { font: 700 1.05rem/1.2 var(--head); letter-spacing: 0.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmeta { color: var(--info); font-size: 0.78rem; }
.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; flex: 1; }
.teams > .team { min-width: 0; }
.thead { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.3rem; }
.thead .tname { font: 600 0.72rem/1 var(--head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--info); }
/* White or black behind the score is what says which team it is. */
.box { min-width: 1.8rem; padding: 0.1rem 0.35rem; font: 700 1.05rem/1.3 var(--head); text-align: center;
  font-variant-numeric: tabular-nums; }
.box.light { background: #fff; color: #000; }
.box.dark { background: #000; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); }
.roster { list-style: none; margin: 0; padding: 0; font-size: 0.84rem; }
.roster li { display: flex; gap: 0.45rem; align-items: baseline; }
.roster .pts { color: var(--info); font-variant-numeric: tabular-nums; min-width: 2.6rem; flex: none;
  text-align: right; font-size: 0.78rem; }
.roster .pname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster li.bot { opacity: 0.5; }
.actions { display: flex; gap: 0.5rem; }
.btn { flex: 1; min-height: 2.5rem; font: 700 0.85rem/1 var(--head); letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: var(--red); border: 0; cursor: pointer; }
.btn:hover { background: var(--red-hover); }
.btn:active { background: var(--red-press); }
.btn.ghost { background: rgba(15, 42, 95, 0.9); box-shadow: inset 0 0 0 1px var(--keyline); }
.btn.ghost:hover { background: #163570; }

/* ---- "The game" tiles */
.tiles { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.tile { background: var(--navy-1); display: flex; flex-direction: column; margin: 0; }
.tile img { aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; }
.tile .tx { padding: 1rem 1.1rem 1.25rem; border-top: 3px solid var(--red); }
.tile h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.tile p { margin: 0; color: var(--info); font-size: 0.93rem; }

/* Trailer: a link-out (poster + <a> to YouTube), never an embed (an iframe is a third-party request). */
.trailer { position: relative; display: block; margin-top: 1.25rem; color: var(--ink); text-decoration: none; }
.trailer img { aspect-ratio: 21 / 9; width: 100%; height: auto; object-fit: cover; filter: brightness(0.7); }
.trailer span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* ---- "Get the game" */
.get { display: grid; gap: 1.5rem 3rem; grid-template-columns: 1fr; align-items: start;
  background: rgba(10,22,48,0.55); box-shadow: inset 4px 0 0 var(--ink); padding: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 56rem) { .get { grid-template-columns: 1.3fr 1fr; } }
.get h2 { margin-bottom: 0.6rem; }
.get .side h3 { font: 600 0.8rem/1 var(--head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--info); margin-bottom: 0.8rem; }
.get .side p { color: var(--dim); font-size: 0.85rem; margin: 0.8rem 0 0; }
.socials { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ---- How-to-join panel */
.panel { position: fixed; inset: 0; background: rgba(5, 11, 24, 0.85); display: flex; align-items: center;
  justify-content: center; padding: var(--gutter); z-index: 10; }
.panelbox { background: var(--navy-1); border-left: 4px solid var(--ink); padding: 1.5rem; max-width: 28rem; width: 100%; }
.panelbox h3 { font-size: 1.2rem; margin: 0 0 0.6rem; overflow-wrap: anywhere; }
.panelbox p { margin: 0 0 1.2rem; color: var(--info); overflow-wrap: anywhere; }
.panelbox p b { color: var(--ink); }
.panelbox .row { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ---- Footer */
footer { border-top: 1px solid var(--line); color: var(--dim); font-size: 0.85rem; padding: 1.75rem 0 2.5rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; justify-content: space-between; }
footer .links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

/* ---- Privacy policy (/privacy is served straight from disk by Caddy: every asset path is absolute /static/...) */
.doc-head { border-bottom: 1px solid var(--line); background: var(--navy-0); }
.doc-head .wrap { max-width: 48rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.doc-head img { width: 9rem; height: auto; }
.doc { max-width: 48rem; padding-top: 2.25rem; padding-bottom: 3.5rem; }
.doc h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); }
.doc h2 { font-size: 1.05rem; margin: 2.2rem 0 0.6rem; display: flex; align-items: center; gap: 0.6rem; }
.doc h2::before { content: ""; width: 4px; height: 1.1rem; background: var(--red); flex: none; }
.doc p, .doc li { color: #DCE5F3; }
.doc li { margin: 0.35rem 0; }
.doc strong { color: var(--ink); }
.doc .updated { color: var(--dim); font-size: 0.9rem; margin: 0.4rem 0 1.6rem; }
.doc-page main { background: linear-gradient(180deg, var(--navy-0) 0%, #0C1F47 100%); }

@media (max-width: 40rem) {
  .hero { min-height: 100svh; }
  .hero-art { object-position: 50% 50%; }   /* hero_phone.* is already the portrait crop */
  .hero-fade { background:
    linear-gradient(0deg, var(--navy-0) 0%, rgba(10,22,48,0.9) 26%, rgba(10,22,48,0.5) 40%, rgba(10,22,48,0) 54%); }
  .logo { width: 7.5rem; }
  .lede { margin: 0.6rem 0 1.1rem; font-size: 1rem; }
  .cta-row .slab { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}