/* Holding page. Split out of maintenance.html so the site's Content-Security-
   Policy can forbid inline styles outright rather than allowing them. */
/* --- fonts: self-hosted, same files the main site uses (GDPR: no third-party
       request carries a visitor IP) ---------------------------------------- */
@font-face { font-family:"Bricolage Grotesque"; src:url("/assets/fonts/BricolageGrotesque-Bold.woff2") format("woff2"); font-weight:700 800; font-display:swap; }
@font-face { font-family:"Instrument Sans"; src:url("/assets/fonts/InstrumentSans-Regular.woff2") format("woff2"); font-weight:400 500; font-display:swap; }
@font-face { font-family:"Instrument Sans"; src:url("/assets/fonts/InstrumentSans-Bold.woff2") format("woff2"); font-weight:600 700; font-display:swap; }
@font-face { font-family:"DM Mono"; src:url("/assets/fonts/DMMono-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }

/* --- tokens: the subset of the site's design system this page needs ------- */
:root {
  --navy-950:#071b3d; --navy-900:#0a2450; --blue-700:#12409b; --blue-600:#1a4fb4;
  --sky-300:#a9cce3; --sky-200:#c5dcea; --sky-100:#e4eff7; --sky-50:#f2f8fc;
  --cyan-500:#22ace3; --cyan-100:#d2ecf8; --cyan-50:#eaf7fc;
  --coral-500:#d2694a;
  --white:#fff; --grey-400:#8ea0b5; --grey-600:#56687e;
  --text:#12233d; --text-soft:var(--grey-600); --rule:#dbe6f0;
  --font-display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --font-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --step-0:clamp(1.0625rem,1.03rem + 0.18vw,1.1875rem);
  --step-1:clamp(1.25rem,1.18rem + 0.35vw,1.5rem);
  --step-4:clamp(2rem,1.55rem + 2.4vw,4rem);
  --radius:14px; --radius-lg:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--text);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--sky-100) 0%, var(--sky-50) 42%, var(--white) 78%),
    var(--white);
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

.wrap { width:min(100% - 2.5rem, 60rem); margin-inline:auto; }

/* --- masthead ------------------------------------------------------------ */
.mast { padding:clamp(1.5rem,1rem + 2vw,2.75rem) 0 0; }
.mast img { display:block; height:clamp(38px,3vw + 26px,52px); width:auto; }

/* --- the notice ---------------------------------------------------------- */
.notice { padding:clamp(2rem,1.2rem + 3.5vw,3.75rem) 0 clamp(1.5rem,1rem + 2vw,2.5rem); }

.chip {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-mono); font-weight:500;
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cyan-500); background:var(--navy-950);
  padding:.42rem .8rem; border-radius:999px;
}
/* The dot pulses so the chip reads as a live status, not a printed label. */
.chip::before {
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--coral-500); flex:none;
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.45;transform:scale(.78);} }

.lede {
  margin:clamp(1.25rem,1rem + 1vw,1.9rem) 0 .35rem;
  font-family:var(--font-body); font-size:var(--step-1);
  color:var(--text-soft);
}
.title {
  margin:0;
  font-family:var(--font-display); font-weight:800;
  font-size:var(--step-4); line-height:1.04;
  letter-spacing:-.02em; color:var(--navy-900);
  max-width:18ch;
}
/* The rally arc from the main site, reused as an underline swash. Drawn as a
   background rather than an ::after so it survives the phrase wrapping. */
.title em {
  font-style:normal; color:var(--blue-700);
  padding-bottom:.06em;
  background-image:radial-gradient(100% 190% at 50% 0%, transparent 58%, var(--cyan-100) 60%);
  background-repeat:no-repeat;
  background-size:100% .28em;
  background-position:0 100%;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
/* Held on one line only where there is room. Below this the phrase is nearly
   as wide as the screen, and refusing to wrap strands "is" on a line alone. */
@media (min-width:601px) { .title em { white-space:nowrap; } }
.sub {
  margin:clamp(1.1rem,.9rem + .8vw,1.6rem) 0 0;
  font-size:var(--step-1); line-height:1.5;
  color:var(--text-soft); max-width:42ch;
}
.sub strong { color:var(--navy-900); font-weight:700; }

/* --- the game panel ------------------------------------------------------ */
.play { padding-bottom:clamp(2rem,1.4rem + 2vw,3rem); }
.panel {
  position:relative;
  background:linear-gradient(175deg, var(--sky-50) 0%, var(--white) 55%);
  border-radius:var(--radius-lg);
  box-shadow:
    0 0 0 1px var(--rule),
    0 8px 22px rgba(23,145,195,.07),
    0 26px 56px rgba(12,64,155,.09);
  overflow:hidden;
}
.panel__head {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding:1rem clamp(1rem,.7rem + 1.2vw,1.6rem) .5rem;
}
.panel__hint {
  margin:0; font-size:.9rem; color:var(--text-soft);
}
.panel__hint b { color:var(--navy-900); font-weight:600; }

.hud { display:flex; gap:1.35rem; font-family:var(--font-mono); font-weight:500; }
.hud div { text-align:right; }
.hud span {
  display:block; font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--grey-400);
}
.hud b {
  display:block; font-size:1.5rem; line-height:1.1;
  color:var(--navy-900); font-weight:500;
  font-variant-numeric:tabular-nums;
}
.hud .is-best b { color:var(--cyan-500); }

/* The stage keeps its shape before the canvas exists, so nothing jumps. */
.stage {
  position:relative;
  aspect-ratio:16/10;
  touch-action:none;          /* we handle the drag ourselves */
  cursor:crosshair;
}
@media (max-width:600px) { .stage { aspect-ratio:4/3; } }
.stage canvas { display:block; width:100%; height:100%; }

/* Fallback shown when WebGL is unavailable — the page must still make sense. */
.stage__fallback {
  position:absolute; inset:0;
  display:grid; place-content:center; gap:.6rem; text-align:center;
  padding:2rem; color:var(--text-soft);
}
.stage.is-3d .stage__fallback { display:none; }

.stage__overlay {
  position:absolute; inset:0;
  display:grid; place-content:center;
  background:rgba(242,248,252,.72);
  backdrop-filter:blur(2px);
  transition:opacity .3s var(--ease);
}
.stage__overlay[hidden] { display:none; }
.btn {
  font:inherit; font-weight:600;
  color:var(--white); background:var(--blue-700);
  border:0; border-radius:999px;
  padding:.7rem 1.5rem; cursor:pointer;
  box-shadow:0 6px 16px rgba(12,64,155,.24);
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background:var(--blue-600); transform:translateY(-1px); }
.btn:focus-visible { outline:3px solid var(--cyan-500); outline-offset:3px; }

/* --- footer -------------------------------------------------------------- */
.foot {
  margin-top:auto;
  border-top:1px solid var(--rule);
  padding:clamp(1.25rem,1rem + 1vw,1.75rem) 0 clamp(1.5rem,1.2rem + 1.5vw,2.25rem);
}
.foot__in {
  display:flex; align-items:center;
  gap:clamp(1rem, .7rem + 1.4vw, 2.25rem);
}
.foot__swan { height:36px; width:auto; flex:none; }
.foot__eu { height:34px; width:auto; flex:none; }
/* The disclaimer takes the middle and pushes the EU badge to the far edge. */
.foot p { margin:0; flex:1; font-size:.82rem; line-height:1.5; color:var(--text-soft); }

/* Narrow: the two marks flank a row of their own, disclaimer beneath, rather
   than each logo stranded on a line of its own by wrapping. */
@media (max-width:720px) {
  .foot__in {
    display:grid; row-gap:1.1rem;
    grid-template-columns:auto auto;
    grid-template-areas:"swan eu" "text text";
    justify-content:space-between; align-items:center;
  }
  .foot__swan { grid-area:swan; }
  .foot__eu { grid-area:eu; }
  .foot p { grid-area:text; }
}

@media (max-width:600px) {
  .panel__head { gap:.5rem; }
  .hud div { text-align:left; }
  .hud b { font-size:1.2rem; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* Visually hidden, still read aloud. */
.sr-only {
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}