/* BACK2BACK17 website. Same palette, type and feel as the launcher (LauncherView.xaml) and the
   admin panel: black court, red for the one action, gold for labels, slanted condensed headlines,
   a scoreboard strip. One opening when the page loads (html.intro, set by site.js once per tab);
   after that nothing moves. No inline styles or scripts: the page runs under a strict CSP. */

:root {
  --pure: #000;
  --black: #0b0b0b;
  --surface: #131313;
  --raised: #1b1b1b;
  --hair: #232323;
  --border: #333;
  --muted: #8c8c8c;
  --secondary: #bdbdbd;
  --chalk: #f7f7f7;
  --red: #f2101a;
  --red-hover: #ff2a34;
  --red-pressed: #c90b14;
  --gold: #b4945c;
  --off-bg: #181818;
  --off-border: #2a2a2a;
  --display: "Bahnschrift", "DIN Alternate", "Barlow", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --headline: "Bahnschrift", "DIN Condensed", "Roboto Condensed", sans-serif-condensed, "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(.215, .61, .355, 1);
  --ease-in-out: cubic-bezier(.645, .045, .355, 1);
  --page: 1100px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* The canvas is pure black like the launcher's opening; the content below the hero paints its own
   #0b0b0b, so while that part is still fading in there is no second shade of black. */
html { background: var(--pure); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--chalk);
  font: 400 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stop { color: var(--red); }

/* ------------------------------------------------------------------ hero: logo, claim, the button */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(36px, 9vh, 104px) 16px clamp(48px, 9vh, 96px);
  background: var(--pure);        /* the crest's own black edge disappears in it */
  text-align: center;
}
.crest { position: relative; width: min(540px, 88vw); aspect-ratio: 1466 / 923; margin: 0; }
.crest picture, .crest img { position: absolute; inset: 0; width: 100%; height: 100%; }
.crest img { user-select: none; -webkit-user-drag: none; }
/* owl = the crest above the wordmark (627 of 923 px), wordmark = the band below it */
.crest-owl { clip-path: inset(0 0 32.07% 0); }
.crest-word { clip-path: inset(67.93% 0 0 0); }
.crest-eye {
  position: absolute;
  top: 22.86%;
  width: 10.23%;
  height: 16.25%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 16, 26, .8), rgba(242, 16, 26, .4) 45%, rgba(242, 16, 26, 0) 80%);
  opacity: 0;
  pointer-events: none;
}
.crest-eye.left { left: 36.70%; }
.crest-eye.right { left: 52.25%; }

.claim {
  margin: clamp(20px, 3.6vh, 34px) 0 0;
  font: 700 clamp(40px, 6.4vw, 68px)/.92 var(--headline);
  font-stretch: condensed;
  text-transform: uppercase;
  transform: skewX(-9deg);
}
.lede { max-width: 26em; margin: 16px auto 0; color: var(--secondary); font-size: clamp(15px, 1.5vw, 17px); }

.download { width: min(380px, 100%); margin-top: clamp(26px, 4.4vh, 40px); }
.js .download[data-state="pending"] { visibility: hidden; }
.dl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 64px;
  padding: 8px 26px;
  border: 1px solid var(--off-border);
  border-radius: 2px;
  background: var(--off-bg);
  color: var(--muted);
  font: 700 26px/1 var(--display);
  font-stretch: condensed;
  text-transform: uppercase;
  text-decoration: none;
  cursor: default;
  user-select: none;
}
.dl > span { min-width: 0; overflow-wrap: anywhere; line-height: 1.1; }   /* a long label wraps inside the button */
.dl.live { justify-content: space-between; border-color: var(--red); background: var(--red); color: #fff; cursor: pointer; }
.dl.live:hover { border-color: var(--red-hover); background: var(--red-hover); }
.dl.live:active { border-color: var(--red-pressed); background: var(--red-pressed); }
.dl-arrow { display: none; width: 32px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 3; stroke-linejoin: miter; }
.dl.live .dl-arrow { display: block; }
.dl-meta { margin: 12px 0 0; color: var(--muted); font: 600 12px/1.4 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.free { margin: 14px 0 0; color: var(--secondary); font: 600 12.5px/1.4 var(--display); letter-spacing: .08em; text-transform: uppercase; }

.rest { background: var(--black); }

/* ------------------------------------------------------------------ scoreboard: the short version */
.facts-wrap { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: var(--surface); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--page); margin: 0 auto; }
.fact { padding: 24px 24px 26px; border-right: 1px solid var(--hair); }
.fact:last-child { border-right: 0; }
.fact-value {
  margin: 0;
  font: 700 30px/.95 var(--headline);
  font-stretch: condensed;
  text-transform: uppercase;
  transform: skewX(-9deg);
  transform-origin: 0 100%;
}
.fact-text { margin: 12px 0 0; color: var(--secondary); font-size: 14px; line-height: 1.5; }

/* ------------------------------------------------------------------ questions, terms, privacy, disclaimer */
.blocks { max-width: var(--page); margin: 0 auto; padding: clamp(44px, 7vw, 88px) 24px clamp(20px, 3vw, 36px); }
.block { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0 48px; padding: 36px 0 40px; border-top: 1px solid var(--hair); }
.block:first-child { padding-top: 0; border-top: 0; }
.block-title {
  align-self: start;              /* as tall as its text: the slant must not grow with the section */
  margin: 0;
  font: 700 clamp(32px, 3.6vw, 42px)/.95 var(--headline);
  font-stretch: condensed;
  text-transform: uppercase;
  transform: skewX(-9deg);
  transform-origin: 0 100%;
}
.block p { max-width: 42em; margin: 0; color: var(--secondary); }
.qa { max-width: 42em; margin: 0; }
.qa dt { margin: 0; font: 600 17px/1.3 var(--display); }
.qa dd { margin: 6px 0 22px; color: var(--secondary); }
.qa dd:last-child { margin-bottom: 0; }
.rules { max-width: 42em; margin: 0; padding-left: 1.25em; color: var(--secondary); }
.rules li { margin: 0 0 10px; padding-left: 4px; }
.rules li:last-child { margin-bottom: 0; }
.rules li::marker { color: var(--gold); font-family: var(--display); font-weight: 600; }
.blocks a { color: var(--chalk); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.blocks a:hover { color: var(--gold); }

/* ------------------------------------------------------------------ /legal: the crest, small, back to the page */
.top { display: flex; justify-content: center; padding: 30px 16px 28px; border-bottom: 1px solid var(--hair); background: var(--pure); }
.top-home { display: block; width: min(220px, 60vw); }
.top-home img { width: 100%; height: auto; }

/* ------------------------------------------------------------------ footer */
.foot { background: var(--black); }
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  max-width: var(--page);
  margin: 0 auto;
  padding: 28px 24px 44px;
  border-top: 1px solid var(--hair);
  color: var(--muted);
  font-size: 13px;
}
.foot-mark { width: 30px; height: 30px; }
.foot p { flex: 1; min-width: 220px; margin: 0; }
.foot b { color: var(--chalk); font-family: var(--display); font-weight: 700; letter-spacing: .04em; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot nav a { color: var(--secondary); font: 600 12px/1.4 var(--display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.foot nav a:hover { color: var(--gold); }
.foot .foot-legal { flex: 1 0 100%; min-width: 0; font-size: 12px; }

/* ------------------------------------------------------------------ the opening (once, like the launcher)
   On black the owl rises, its eyes flash red, the wordmark wipes in from the left, then the claim
   and the button. Only opacity, transforms and mask positions move; about 1.7 s. */
.intro .crest-owl { animation: owlIn 1.1s var(--ease-out) 80ms both; }
.intro .crest-eye { animation: eyesFlash .88s linear 600ms both; }
.intro .crest-word {
  -webkit-mask-image: linear-gradient(90deg, #000 0 40%, transparent 60% 100%);
  mask-image: linear-gradient(90deg, #000 0 40%, transparent 60% 100%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: wordWipe .75s var(--ease-in-out) 560ms both, wordSlide .85s var(--ease-out) 560ms both;
}
.intro .claim { animation: claimIn .6s var(--ease-out) 950ms both; }
.intro .lede, .intro .download, .intro .free, .intro .rest, .intro .foot { animation: fadeIn .5s var(--ease-out) 1150ms both; }
@keyframes owlIn { 0% { opacity: 0; transform: scale(.92); } 64% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes eyesFlash { 0% { opacity: 0; animation-timing-function: var(--ease-out); } 20% { opacity: .8; animation-timing-function: var(--ease-in-out); } 100% { opacity: 0; } }
@keyframes wordWipe { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes wordSlide { from { transform: translateX(-2.5%); } to { transform: translateX(0); } }
@keyframes claimIn { 0% { opacity: 0; transform: skewX(-9deg) translateY(14px); } 83% { opacity: 1; } 100% { opacity: 1; transform: skewX(-9deg) translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ smaller screens */
@media (max-width: 960px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(2) { border-right: 0; }
  .fact:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
  .block { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 560px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact { padding: 20px 16px 22px; border-right: 0; border-bottom: 1px solid var(--hair); }
  .fact:last-child { border-bottom: 0; }
  .blocks { padding-right: 16px; padding-left: 16px; }
  .block { padding: 30px 0 32px; }
  .foot-inner { padding-right: 16px; padding-left: 16px; }
  .dl { min-height: 60px; padding: 8px 22px; font-size: 23px; }
}

/* ------------------------------------------------------------------ calm mode */
@media (prefers-reduced-motion: reduce) {
  .intro .crest-owl, .intro .crest-eye, .intro .crest-word, .intro .claim,
  .intro .lede, .intro .download, .intro .free, .intro .rest, .intro .foot { animation: none !important; }
  .intro .crest-word { -webkit-mask-image: none; mask-image: none; }
}