/* Witch Survival, variant C: "a window into the witch's night".
   Every pixel-art image is drawn at 1x in img/night and scaled here by whole numbers:
   --s  the world (frame, sky, hedges, fog)     4 px, 3 px from 700 to 1099 px, 2 px on phones
   --k  the character stage (hero, altar, beam) 3 px, 2 px on phones
   --E  the logo's skull                         8 px, 6 px, less on narrow phones
   Fonts sit on whole pixels too, so their strokes stay even at 1x, 2x and 3x screens:
   --j  one font pixel of Jersey 10 (1400 units per em, 75 per pixel); titles use 2, 3, 4 or 6 of it.
   Tiny5 has 8 font pixels per em, so reading text is 16 px (2 px per font pixel) or 24 px (3 px). */

@font-face {
  font-family: "Jersey 10";
  src: url("fonts/Jersey10-Regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Tiny5";
  src: url("fonts/Tiny5-Regular.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --void: #07000d;
  --night: #12001f;
  --sky0: #0a0014;
  --deep: #0c0418;
  --panel: #1b0830;
  --panel-2: #150428;
  --s1: #22103a;
  --s2: #341a55;
  --s3: #4a2873;
  --s4: #6a3f9a;
  --bone: #d9caef;
  --lav: #ba9cdb;
  --muted: #a898c2;
  --lav2: #9066b5;
  --lav3: #663090;
  --g1: #6b9129;
  --g2: #b5dd76;
  --g3: #ecfcd0;

  --display: "Jersey 10", "Tiny5", ui-monospace, monospace;
  --body: "Tiny5", ui-monospace, "Cascadia Mono", monospace;

  --j: 18.6667px;
  --s: 2px;
  --k: 2px;
  --E: 6px;
  --c: 3px;
  --m: 0px;
  --gut: 16px;
  --ft: calc(6 * var(--s));
  --pad: calc(var(--ft) + var(--gut));
  /* the small stone frame (frame9.png) at 2x: panels, the stat card, the board, the menu */
  --stone: url("img/night/frame9.png") 6 / 12px / 0 stretch;

  --arrow-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23b5dd76' d='M0 0h1v7H0zM1 1h1v5H1zM2 2h1v3H2zM3 3h1v1H3z'/%3E%3C/svg%3E");
  --arrow-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23b5dd76' d='M3 0h1v7H3zM2 1h1v5H2zM1 2h1v3H1zM0 3h1v1H0z'/%3E%3C/svg%3E");
  --arrow-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath fill='%23b5dd76' d='M0 0h7v1H0zM1 1h5v1H1zM2 2h3v1H2zM3 3h1v1H3z'/%3E%3C/svg%3E");
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Crect width='2' height='2' fill='%2326113f'/%3E%3C/svg%3E");
}

@media (max-width: 359px) { :root { --E: 5px; --c: 2px; } }
@media (max-width: 339px) { :root { --E: 4px; --gut: 12px; } }
@media (min-width: 700px) {
  :root { --s: 3px; --k: 3px; --m: 12px; --gut: 28px; }
}
@media (min-width: 1100px) {
  :root { --s: 4px; --E: 8px; --c: 4px; --m: 16px; --gut: 40px; }
}
@media (min-width: 1100px) and (max-height: 820px) { :root { --E: 6px; --c: 3px; } }

*, *::before, *::after { box-sizing: border-box; }
* { image-rendering: pixelated; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  padding: var(--m);
  min-width: 320px;
  background: var(--void) url("img/night/wall.png") 0 0 / 64px 32px;
  color: var(--bone);
  font: 400 16px/1.5 var(--body);
  font-synthesis: none;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: var(--g2); text-underline-offset: 4px; }
a:hover { color: var(--g3); }
:focus-visible { outline: 4px solid var(--g2); outline-offset: 4px; }
h2, h3 { font-weight: 400; text-wrap: balance; }
strong { font-weight: 400; color: var(--bone); }

[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 10px 16px; background: var(--g2); color: var(--deep); text-decoration: none; }
.skip:focus { top: 16px; }
.nw { white-space: nowrap; }

/* ---------- The window ---------- */
.portal {
  position: relative;
  max-width: 1760px;
  margin: 0 auto;
  background: var(--night);
  overflow: hidden;
}
/* the recess: the night sits a little way behind the stone */
.portal::after { content: ""; position: absolute; inset: var(--ft); z-index: 29; pointer-events: none; box-shadow: inset 0 0 0 var(--s) rgba(7, 0, 13, 0.9), inset 0 0 calc(10 * var(--s)) rgba(7, 0, 13, 0.75); }
.frame { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.frame span { position: absolute; display: block; }
.f-edge { background-repeat: repeat; }
.f-t, .f-b { left: 0; right: 0; height: var(--ft); background-image: url("img/night/edge-h.png"); background-size: calc(32 * var(--s)) var(--ft); }
.f-t { top: 0; }
.f-b { bottom: 0; }
.f-l, .f-r { top: 0; bottom: 0; width: var(--ft); background-image: url("img/night/edge-v.png"); background-size: var(--ft) calc(32 * var(--s)); }
.f-l { left: 0; }
.f-r { right: 0; }
.f-corner, .f-glow { width: calc(15 * var(--s)); height: calc(15 * var(--s)); background-repeat: no-repeat; background-size: calc(60 * var(--s)) calc(15 * var(--s)); }
.f-corner { background-image: url("img/night/corners.png"); }
.f-glow { background-image: url("img/night/corners-glow.png"); animation: rune 4s steps(4) infinite; }
.f-glow.f-tr { animation-delay: -1s; }
.f-glow.f-br { animation-delay: -2s; }
.f-glow.f-bl { animation-delay: -3s; }
.f-tl { top: 0; left: 0; background-position: 0 0; }
.f-tr { top: 0; right: 0; background-position: calc(-15 * var(--s)) 0; }
.f-br { bottom: 0; right: 0; background-position: calc(-30 * var(--s)) 0; }
.f-bl { bottom: 0; left: 0; background-position: calc(-45 * var(--s)) 0; }
.f-key { top: 0; left: 0; right: 0; margin: 0 auto; width: calc(25 * var(--s)); height: calc(13 * var(--s)); background: url("img/night/keystone.png") 0 0 / 100% 100%; }
@keyframes rune { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
/* rune studs set into the stone: a quarter of the way along the top and bottom, and beside the hero */
.f-stud { width: var(--ft); height: var(--ft); background: url("img/night/frame9.png") 0 0 / calc(18 * var(--s)) calc(18 * var(--s)); }
.f-s1, .f-s2 { top: 0; }
.f-s3, .f-s4 { bottom: 0; }
.f-s1, .f-s3 { left: calc(25% - 3 * var(--s)); }
.f-s2, .f-s4 { left: calc(75% - 3 * var(--s)); }
.f-s5, .f-s6 { top: calc(50vh - 3 * var(--s)); }
.f-s5 { left: 0; }
.f-s6 { right: 0; }

/* ---------- Hero: the night sky over the far woods and the arena's hedges ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - 2 * var(--m));
  min-height: calc(100svh - 2 * var(--m));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: calc(18 * var(--s)) var(--pad) calc(34 * var(--s) + 56px);
  overflow: hidden;
  background: var(--sky0) url("img/night/sky.png") repeat-x left bottom / calc(4 * var(--s)) calc(200 * var(--s));
}
/* Room under the site's bar, which lies over the sky, so the centred lockup never meets it on a short window:
   the bar (two rows below 1100 px: 91 px under the stone; one row from there: 55 px), then the ring's reach
   above the lockup's box (.ring: top 19.5 E - 5 c, margin -48.5 c), then 16 px. */
.hero {
  --ring-over: max(0px, calc(53.5 * var(--c) - 19.5 * var(--E)));
  padding-top: calc(var(--ft) + 91px + var(--ring-over) + 16px);
}
@media (min-width: 1100px) { .hero { padding-top: calc(var(--ft) + 55px + var(--ring-over) + 16px); } }
.sky, .sky span { position: absolute; pointer-events: none; }
.sky { inset: 0; }
.stars { inset: 0 0 25% 0; background-size: calc(128 * var(--s)) calc(96 * var(--s)); -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.stars-a { background-image: url("img/night/stars-a.png"); animation: twinkle-a 9s steps(3) infinite; }
.stars-b { background-image: url("img/night/stars-b.png"); background-position: calc(37 * var(--s)) calc(21 * var(--s)); animation: twinkle-b 3.2s steps(2) infinite; }
@keyframes twinkle-a { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes twinkle-b { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.moon { top: calc(8 * var(--s)); right: max(4%, calc(50% - 560px)); width: calc(48 * var(--s)); height: calc(48 * var(--s)); background: url("img/night/moon.png") 0 0 / 100% 100%; }
/* the site's bar takes a row under the corner on narrow windows: on a phone the moon at 1x stays above it,
   a little wider it keeps its size and sits below it, clear of the ring */
@media (max-width: 559px) { .moon { width: 48px; height: 48px; } }
@media (min-width: 560px) and (max-width: 699px) { .moon { top: 112px; } }
@media (min-width: 1100px) and (max-width: 1199px) { .moon { top: 112px; } }
/* a small flock crosses the sky now and then, over the moon */
.flock { left: 0; top: calc(27 * var(--s)); width: 100%; height: 0; animation: flock 30s linear 4s infinite; transform: translateX(-100vw); }
@keyframes flock { 0% { transform: translateX(0); } 45%, 100% { transform: translateX(calc(100% + 260px)); } }
.bat { left: calc(var(--bx) * 1px); top: calc(var(--by) * var(--s)); width: calc(16 * var(--s)); height: calc(7 * var(--s)); background: url("img/night/bats.png") 0 0 / calc(48 * var(--s)) 100%; animation: flap 0.45s steps(3) var(--fd) infinite; }
@keyframes flap { to { background-position: calc(-48 * var(--s)) 0; } }
/* the far woods and the witch's tower, one window lit */
.treeline { left: 0; right: 0; bottom: calc(22 * var(--s)); height: calc(44 * var(--s)); background: url("img/night/treeline.png") repeat-x calc(-52 * var(--s)) 0 / calc(192 * var(--s)) 100%; }
.tower { left: max(5%, calc(50% - 600px)); bottom: calc(28 * var(--s)); width: calc(26 * var(--s)); height: calc(45 * var(--s)); background: url("img/night/tower.png") 0 0 / 100% 100%; }
.tower-light { left: calc(7 * var(--s)); top: calc(17 * var(--s)); width: calc(12 * var(--s)); height: calc(12 * var(--s)); border-radius: 50%; background: radial-gradient(closest-side, rgba(181, 221, 118, 0.55), rgba(181, 221, 118, 0.15) 60%, transparent); animation: lamp 3.4s steps(3) infinite; }
@keyframes lamp { 0%, 100% { opacity: 0.55; } 40% { opacity: 1; } 70% { opacity: 0.8; } }
.fog { left: 0; right: 0; height: calc(28 * var(--s)); background: url("img/night/fog.png") repeat-x 0 0 / calc(192 * var(--s)) 100%; animation: drift 120s linear infinite; }
.fog-back { bottom: calc(26 * var(--s)); animation-duration: 160s; }
.fog-mid { bottom: calc(10 * var(--s)); animation-duration: 110s; animation-direction: reverse; }
.fog-front { bottom: calc(-10 * var(--s)); opacity: 0.8; animation-duration: 80s; }
@keyframes drift { to { background-position: calc(192 * var(--s)) 0; } }
.hedge { position: absolute; left: 0; right: 0; bottom: 0; background-repeat: repeat-x; }
.hedge-far { bottom: calc(14 * var(--s)); height: calc(34 * var(--s)); background-image: url("img/night/hedge-far.png"); background-size: calc(128 * var(--s)) 100%; background-position: calc(-40 * var(--s)) 0; }
.hedge-near { height: calc(40 * var(--s)); background-image: url("img/night/hedge-near.png"); background-size: calc(128 * var(--s)) 100%; }
.fly { left: var(--x); bottom: calc((var(--y) + 12) * var(--s)); width: var(--s); height: var(--s); background: var(--g2); box-shadow: 0 0 calc(3 * var(--s)) var(--s) rgba(181, 221, 118, 0.45); opacity: 0; animation: fly 5s steps(5) var(--d) infinite; }
@keyframes fly { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 70% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(calc(-10 * var(--s))); } }

.hero-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; }
.lockup { position: relative; z-index: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: calc(0.14 * 39 * var(--E)); width: 100%; }
.emblem { position: relative; display: block; width: calc(34 * var(--E)); height: calc(39 * var(--E)); animation: float 6s steps(4) infinite; }
/* the summoning ring behind the skull: scene light, never drawn on the mark itself. Centred a little
   above the skull's middle, so its foot clears the wordmark (the gap below the skull is the logo's own) */
.ring { position: absolute; z-index: -1; left: 50%; top: calc(19.5 * var(--E) - 5 * var(--c)); width: calc(97 * var(--c)); height: calc(97 * var(--c)); margin: calc(-48.5 * var(--c)) 0 0 calc(-48.5 * var(--c)); background: url("img/night/circle.png") 0 0 / 100% 100%; animation: breathe 5s steps(3) infinite; pointer-events: none; }
@keyframes breathe { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.mark { display: block; width: 100%; height: 100%; max-width: none; }
.eye { position: absolute; top: calc(17 * var(--E)); width: calc(12 * var(--E)); height: calc(12 * var(--E)); border-radius: 50%; background: radial-gradient(closest-side, rgba(236, 252, 208, 0.5), rgba(181, 221, 118, 0.2) 50%, transparent); mix-blend-mode: screen; animation: eyes 3.6s steps(3) infinite; }
.eye-l { left: calc(3 * var(--E)); }
.eye-r { left: calc(19 * var(--E)); }
/* the float moves by whole skull pixels */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-1 * var(--E))); } }
@keyframes eyes { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
/* the wordmark is a vector (the brand's Nosifer outlines), so it stays sharp at any size */
.word { display: block; width: min(calc(93.84 * var(--E)), 100%); height: auto; image-rendering: auto; }
.loop { margin: calc(8 * var(--s)) 0 0; font: 400 calc(2 * var(--j)) / 1.1 var(--display); color: var(--bone); text-align: center; text-shadow: 0 var(--s) 0 var(--deep), 0 0 calc(6 * var(--s)) var(--night); }

/* ---------- The Play rune, always at the foot of the view ---------- */
.play {
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 14px;
  width: fit-content;
  margin: 0 auto;
  text-decoration: none;
}
.play::before { content: ""; position: absolute; inset: -12px -18px; background: radial-gradient(closest-side, rgba(181, 221, 118, 0.55), transparent); filter: blur(8px); animation: pulse 2.4s steps(3) infinite; }
.play-in {
  --b: 4px;
  position: relative;
  display: block;
  padding: 2px 56px 6px;
  background: var(--g2);
  color: var(--deep);
  font: 400 calc(3 * var(--j)) / 1 var(--display);
  box-shadow:
    0 calc(-1 * var(--b)) 0 0 var(--deep),
    0 var(--b) 0 0 var(--deep),
    calc(-1 * var(--b)) 0 0 0 var(--deep),
    var(--b) 0 0 0 var(--deep),
    inset 0 var(--b) 0 0 var(--g3),
    inset 0 calc(-1 * var(--b)) 0 0 var(--g1);
}
.play-in::before, .play-in::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  background: var(--g1);
  box-shadow: 4px 0 0 var(--g1), -4px 0 0 var(--g1), 0 4px 0 var(--g1), 0 -4px 0 var(--g1);
}
.play-in::before { left: 24px; }
.play-in::after { right: 24px; }
.play:hover .play-in { background: var(--g3); }
.play:focus-visible { outline: none; }
.play:focus-visible .play-in { outline: 4px solid var(--g3); outline-offset: 8px; }
@keyframes pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* ---------- The site's bar: every page has it; on the landing it lies over the sky ---------- */
.bar {
  position: relative;
  z-index: 31;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding: calc(var(--ft) + 16px) var(--pad) 0;
}
.bar.over { position: absolute; top: 0; left: 0; right: 0; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--bone); text-decoration: none; font: 400 calc(2 * var(--j)) / 1 var(--display); }
.brand img { width: 34px; height: 39px; }
.nav { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-right: auto; }
.nav a { color: var(--muted); text-decoration: none; font-size: 24px; line-height: 1; }
.nav a:hover { color: var(--g3); }
.nav a[aria-current="page"] { color: var(--g2); box-shadow: 0 4px 0 0 var(--g1); }
.over .nav a { text-shadow: 0 2px 0 var(--deep); }
@media (max-width: 559px) {
  /* the skull alone: the name and the wallet button do not fit one row (the name stays for screen readers) */
  .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav { order: 3; width: 100%; }
}
@media (max-width: 419px) {
  .nav { gap: 10px 14px; }
  .nav a { font-size: 16px; }
  /* Home, always the first link, goes: the skull leads home */
  .nav a:first-child { display: none; }
}

/* ---------- Elsewhere: X, DexScreener, OpenSea (16 px masks from site/tools/paint-social.cjs, at 2x) ---------- */
.socials { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin: 0; padding: 0; list-style: none; }
.soc { display: flex; align-items: center; gap: 8px; color: var(--bone); text-decoration: none; }
.soc::before { content: ""; flex: none; width: 32px; height: 32px; background: currentColor; -webkit-mask: center / 32px 32px no-repeat; mask: center / 32px 32px no-repeat; }
.soc-x::before { -webkit-mask-image: url("img/social/x.svg"); mask-image: url("img/social/x.svg"); }
.soc-dex::before { -webkit-mask-image: url("img/social/dexscreener.svg"); mask-image: url("img/social/dexscreener.svg"); }
.soc-os::before { -webkit-mask-image: url("img/social/opensea.svg"); mask-image: url("img/social/opensea.svg"); }
a.soc:hover { color: var(--g3); }
/* not out yet: dim, no link, and in the foot a "Soon" tag */
.soc.soon { color: var(--s4); cursor: default; }
.soc .tag { padding: 0 6px 2px; background: var(--s2); color: var(--muted); font-size: 16px; line-height: 1.25; }
.foot .socials { margin: 0 0 22px; }
/* In the bar at every width, icons alone (the tags stay in the foot). From 1200 px they follow the links;
   narrower, they take the first row's right end, beside the brand. On the landing they never go to the far
   right, where the moon hangs: they follow the links, or the brand with the links on a row of their own. */
.bar .socials { flex-wrap: nowrap; gap: 12px; }
.bar .soc .tag { display: none; }
.bar.over .nav { margin-right: 0; }
@media (max-width: 1199px) {
  .bar .socials { order: 1; margin-left: auto; }
  .bar .nav { order: 2; }
  .bar .wallet { order: 3; }
  .bar.over .socials { margin-left: 0; }
  .bar.over .nav { flex-basis: 100%; }
}
/* the landing from 1100 px: its lockup is taller, so the bar keeps to one row (the moon goes below it) */
@media (min-width: 1100px) and (max-width: 1199px) {
  .bar.over .socials, .bar.over .nav { order: 0; }
  .bar.over .nav { flex-basis: auto; }
}
@media (max-width: 559px) {
  /* one row for the skull, the marks and the wallet; the links below */
  .bar { column-gap: 12px; }
  .bar .socials { gap: 8px; }
  .bar .wallet { order: 2; margin-left: 0; padding: 8px; }
  .bar .nav { order: 3; }
}

.still {
  --b: 4px;
  position: fixed;
  z-index: 40;
  /* inside the window's right edge, also when the window stops growing at 1760 px */
  right: max(calc(var(--m) + var(--ft) + 8px), calc((100vw - 1760px) / 2 + var(--ft) + 8px));
  bottom: 20px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: var(--panel) url("img/night/n-energy.png") center / 26px 26px no-repeat;
  box-shadow: 0 calc(-1 * var(--b)) 0 0 var(--s3), 0 var(--b) 0 0 var(--s3), calc(-1 * var(--b)) 0 0 0 var(--s3), var(--b) 0 0 0 var(--s3);
}
.still[aria-pressed="true"] { background-color: var(--deep); box-shadow: 0 calc(-1 * var(--b)) 0 0 var(--g1), 0 var(--b) 0 0 var(--g1), calc(-1 * var(--b)) 0 0 0 var(--g1), var(--b) 0 0 0 var(--g1); }

/* ---------- Sections ---------- */
/* the night goes on below the hero: a sparse, faint star field behind every section */
main { position: relative; }
main::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.4; background: url("img/night/stars-a.png") calc(20 * var(--s)) 0 / calc(128 * var(--s)) calc(96 * var(--s)); }
.sec { position: relative; padding: 72px 0; }
.sec > .wrap { position: relative; z-index: 1; }
/* thin banks of the hero's fog drift across the night between some sections, in the gap only */
.heroes::before, .fight::before, .seasons::before, .faq::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-14 * var(--s));
  height: calc(28 * var(--s));
  background: url("img/night/fog.png") repeat-x 0 0 / calc(192 * var(--s)) 100%;
  opacity: 0.16;
  pointer-events: none;
  animation: drift 150s linear infinite;
}
.fight::before, .faq::before { background-position: calc(-90 * var(--s)) 0; animation-duration: 190s; animation-direction: reverse; }
.peek { padding-bottom: 40px; }
.fight { padding-top: 40px; }
.title::before { content: ""; display: block; width: calc(41 * var(--k)); height: calc(7 * var(--k)); margin: 0 auto calc(8 * var(--k)); background: url("img/night/divider.png") 0 0 / 100% 100%; }
.wrap { max-width: calc(1120px + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.title {
  margin: 0;
  text-align: center;
  font: 400 calc(3 * var(--j)) / 1 var(--display);
  color: var(--bone);
  text-shadow: 0 4px 0 var(--deep), 0 0 26px rgba(186, 156, 219, 0.35);
}
.lead { margin: 16px auto 0; max-width: 40ch; color: var(--lav); font-size: 24px; line-height: 1.4; text-align: center; }
.note { margin: 20px auto 0; max-width: 60ch; color: var(--muted); text-align: center; }
.subtitle { margin: 80px 0 0; text-align: center; font: 400 calc(2 * var(--j)) / 1 var(--display); color: var(--bone); text-shadow: 0 4px 0 var(--deep); }

/* status squares: filled means live, hollow means planned */
.st { display: inline-block; width: 10px; height: 10px; flex: none; box-shadow: inset 0 0 0 2px var(--lav2); }
.st.st-live, .is-live > .st { background: var(--g2); box-shadow: 0 0 10px rgba(181, 221, 118, 0.7); }

/* ---------- 2. What is ---------- */
.what { padding-top: 96px; }
/* set like every other section: the rune divider, then the question, then the answer as a title */
.kicker { margin: 0 0 14px; color: var(--lav); text-align: center; font-size: 24px; line-height: 1.3; }
.rune-div { display: block; width: calc(41 * var(--k)); height: calc(7 * var(--k)); margin: 0 auto calc(8 * var(--k)); background: url("img/night/divider.png") 0 0 / 100% 100%; }
.glow-title { margin: 0; text-align: center; font: 400 calc(2 * var(--j)) / 1.05 var(--display); }
.gt-1, .gt-2 { display: block; }
.gt-1 { color: var(--g2); text-shadow: 0 4px 0 var(--deep), 0 0 26px rgba(181, 221, 118, 0.45); }
.gt-2 { color: var(--bone); text-shadow: 0 4px 0 var(--deep), 0 0 26px rgba(186, 156, 219, 0.35); }

.loopmap { margin: 44px 0 0; }
.map {
  --nh: 122px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) 26px minmax(0, 1fr);
  grid-template-rows: auto 44px auto 44px auto 60px auto 44px auto auto;
  grid-template-areas:
    "energy . ."
    "l1 . ."
    "run . ."
    "l2 . ."
    "score . pass"
    "l3 . l4"
    "board l5 boost"
    "l6 . ."
    "prize . ."
    "legend legend legend";
  padding: 28px 14px 24px;
  border: var(--ft) solid transparent;
  border-image: url("img/night/frame9.png") 6 / var(--ft) / 0 stretch;
  background: var(--panel-2) var(--dots) 12px 12px / 24px 24px;
}
.node {
  --b: 4px;
  --edge: var(--s3);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding: 12px 12px 14px;
  background: var(--panel);
  box-shadow:
    0 calc(-1 * var(--b)) 0 0 var(--edge),
    0 var(--b) 0 0 var(--edge),
    calc(-1 * var(--b)) 0 0 0 var(--edge),
    var(--b) 0 0 0 var(--edge),
    inset 0 var(--b) 0 0 rgba(186, 156, 219, 0.1);
}
.node.is-live { background: #1d0d33; box-shadow: 0 -4px 0 0 var(--g2), 0 4px 0 0 var(--g2), -4px 0 0 0 var(--g2), 4px 0 0 0 var(--g2), 0 0 28px rgba(181, 221, 118, 0.28); }
.node .ic { width: calc(13 * var(--k)); height: calc(13 * var(--k)); margin-bottom: 2px; }
/* node names are game-UI labels: Tiny5 at 3 px per font pixel */
.node h3 { margin: 0; font: 400 24px / 1.1 var(--body); color: var(--bone); }
.node p { margin: 0; line-height: 1.4; color: var(--muted); }
.node p.sub { color: var(--g2); }
.node > .st { position: absolute; top: 10px; right: 10px; }
.n-energy { grid-area: energy; }
.n-run { grid-area: run; }
.n-score { grid-area: score; }
.n-pass { grid-area: pass; }
.n-boost { grid-area: boost; align-self: end; min-height: var(--nh); margin-bottom: 10px; }
.n-board { grid-area: board; padding: 12px 10px 10px; gap: 8px; align-items: stretch; }
.n-prize { grid-area: prize; }
.board-head { display: flex; align-items: center; gap: 8px; padding-right: 16px; }
.board-head .ic { margin: 0; flex: none; }
.board-head h3 { min-width: 0; }
.board-head .st { position: absolute; top: 10px; right: 10px; }
.tbl { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 10px; background: var(--deep); box-shadow: inset 0 0 0 2px var(--s2); }
.tbl b { font: 400 24px / 1.1 var(--body); color: var(--g2); }
.tbl span { line-height: 1.4; color: var(--muted); }
.tbl-boost { min-height: var(--nh); }
.legend { grid-area: legend; display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 10px; }

.link { position: relative; min-width: 0; min-height: 0; }
.link::before, .link::after { content: ""; position: absolute; background-repeat: no-repeat; }
.l-1 { grid-area: l1; }
.l-2 { grid-area: l2; }
.l-3 { grid-area: l3; }
.l-4 { grid-area: l4; }
.l-5 { grid-area: l5; align-self: end; height: var(--nh); margin-bottom: 10px; }
.l-6 { grid-area: l6; }
/* down */
.l-1::before, .l-2::before, .l-3::before, .l-4::before, .l-6::before {
  top: 4px; bottom: 12px; left: 50%; width: 6px; margin-left: -3px;
  background: linear-gradient(var(--g1), var(--g1)) 0 0 / 6px 6px no-repeat, repeating-linear-gradient(180deg, var(--lav2) 0 6px, transparent 6px 12px) 2px 0 / 2px 100% no-repeat;
}
.l-1::after, .l-2::after, .l-3::after, .l-4::after, .l-6::after { bottom: 4px; left: 50%; width: 14px; height: 8px; margin-left: -7px; background-image: var(--arrow-d); background-size: 100% 100%; }
/* left, into the Boosted table */
.l-5::before {
  left: 12px; right: 4px; top: 50%; height: 6px; margin-top: -3px;
  background: linear-gradient(var(--g1), var(--g1)) 100% 0 / 6px 6px no-repeat, repeating-linear-gradient(90deg, var(--lav2) 0 6px, transparent 6px 12px) 0 2px / 100% 2px no-repeat;
}
.l-5::after { left: 4px; top: 50%; width: 8px; height: 14px; margin-top: -7px; background-image: var(--arrow-l); background-size: 100% 100%; }
/* phones: Boost lines up with the Boosted table, well below Game Pass, so the Game Pass link runs
   through the Best 5 row and on down to Boost's top edge instead of stopping in empty space */
@media (max-width: 899px) {
  .l-4 { grid-area: auto; grid-column: 3; grid-row: 6 / 8; }
  .l-4::before { bottom: calc(var(--nh) + 10px + 12px); }
  .l-4::after { bottom: calc(var(--nh) + 10px + 4px); }
  .n-boost { height: var(--nh); }
}
.pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; white-space: nowrap; padding: 2px 10px 4px; background: var(--deep); color: var(--lav); box-shadow: 0 -2px 0 0 var(--s3), 0 2px 0 0 var(--s3), -2px 0 0 0 var(--s3), 2px 0 0 0 var(--s3); }

@media (min-width: 900px) {
  .map {
    --nh: 104px;
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) 72px minmax(0, 1fr);
    grid-template-rows: auto 72px auto 60px auto;
    grid-template-areas:
      "energy l1 run l2 score"
      ". . . . l3"
      "pass l4 boost l5 board"
      ". . . . l6"
      "legend legend legend . prize";
    padding: 48px 44px 40px;
  }
  .node { flex-direction: row; flex-wrap: wrap; align-items: center; align-content: flex-start; column-gap: 12px; row-gap: 6px; padding: 16px 18px; }
  .node .ic { margin: 0; }
  .node h3 { flex: 1 1 auto; }
  .node p { flex: 1 0 100%; }
  .n-pass { align-self: end; min-height: var(--nh); margin-bottom: 10px; }
  .n-board { padding: 14px 12px 10px; flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .board-head h3 { flex: none; }
  .legend { align-self: end; margin: 0; }
  /* right */
  .l-1::before, .l-2::before, .l-4::before {
    left: 4px; right: 12px; top: 50%; bottom: auto; width: auto; height: 6px; margin: -3px 0 0;
    background: linear-gradient(var(--g1), var(--g1)) 0 0 / 6px 6px no-repeat, repeating-linear-gradient(90deg, var(--lav2) 0 6px, transparent 6px 12px) 0 2px / 100% 2px no-repeat;
  }
  .l-1::after, .l-2::after, .l-4::after { left: auto; right: 4px; bottom: auto; top: 50%; width: 8px; height: 14px; margin: -7px 0 0; background-image: var(--arrow-r); }
  .l-4 { align-self: end; height: var(--nh); margin-bottom: 10px; }
  .l-5::before { left: 4px; right: 12px; background: linear-gradient(var(--g1), var(--g1)) 0 0 / 6px 6px no-repeat, repeating-linear-gradient(90deg, var(--lav2) 0 6px, transparent 6px 12px) 0 2px / 100% 2px no-repeat; }
  .l-5::after { left: auto; right: 4px; background-image: var(--arrow-r); }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .map { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr); padding: 40px 24px 32px; }
  .node { padding: 14px 14px; }
}
/* wide screens: two lanes, play on top and the season below, read left to right */
@media (min-width: 1280px) {
  .map {
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr);
    grid-template-rows: auto 64px auto;
    grid-template-areas:
      "energy l1 run l2 score . legend"
      ". . . . l3 . ."
      "pass l4 boost l5 board l6 prize";
    padding: 44px 24px 40px;
  }
  .legend { align-self: center; flex-direction: column; gap: 12px; margin: 0; padding-left: 12px; }
  .n-prize { align-self: center; }
  .l-6::before {
    left: 4px; right: 12px; top: 50%; bottom: auto; width: auto; height: 6px; margin: -3px 0 0;
    background: linear-gradient(var(--g1), var(--g1)) 0 0 / 6px 6px no-repeat, repeating-linear-gradient(90deg, var(--lav2) 0 6px, transparent 6px 12px) 0 2px / 100% 2px no-repeat;
  }
  .l-6::after { left: auto; right: 4px; bottom: auto; top: 50%; width: 8px; height: 14px; margin: -7px 0 0; background-image: var(--arrow-r); }
}

/* ---------- 3. Character stage: a moonlit shrine ---------- */
/* layout in stage pixels (--k), from the top of .stage: the hero's feet stand at 131, the altar 110 to 140 */
.stage { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 16px; padding-top: calc(10 * var(--k)); }
.shrine { position: absolute; top: 0; left: 50%; width: 0; height: calc(150 * var(--k)); pointer-events: none; }
.shrine span { position: absolute; display: block; }
.halo { top: calc(18 * var(--k)); left: calc(-64 * var(--k)); width: calc(128 * var(--k)); height: calc(128 * var(--k)); background: url("img/night/halo.png") 0 0 / 100% 100%; opacity: 0.6; }
.beam { top: 0; left: calc(-48 * var(--k)); width: calc(96 * var(--k)); height: calc(124 * var(--k)); background: url("img/night/beam.png") 0 0 / calc(96 * var(--k)) calc(150 * var(--k)) no-repeat; animation: beam 5s steps(3) infinite; }
@keyframes beam { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
.mote { left: calc(48 * var(--k) + var(--x) * var(--k)); top: calc(var(--y) * var(--k)); width: var(--k); height: var(--k); background: var(--bone); opacity: 0; animation: mote 6s steps(6) var(--d) infinite; }
.mote:nth-child(odd) { background: var(--g2); }
@keyframes mote { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(calc(-18 * var(--k))); } }
.floor { top: calc(124 * var(--k)); left: calc(-80 * var(--k)); width: calc(160 * var(--k)); height: calc(24 * var(--k)); background: url("img/night/floor.png") 0 0 / 100% 100%; }
/* two rune stones stand behind the altar; the right one is the left one mirrored, lit side inward */
.stone { top: calc(80 * var(--k)); width: calc(16 * var(--k)); height: calc(46 * var(--k)); background: url("img/night/stone.png") 0 0 / 100% 100%; }
.stone-l { left: calc(-60 * var(--k)); }
.stone-r { left: calc(44 * var(--k)); transform: scaleX(-1); }
.stone .rune { inset: 0; background: url("img/night/stone-rune.png") 0 0 / 100% 100%; filter: drop-shadow(0 0 calc(2 * var(--k)) rgba(181, 221, 118, 0.7)); opacity: 0.6; }
.stage.is-locked .rune { opacity: 0; }
.stage.is-locked .halo { opacity: 0.4; }

.plinth { position: relative; width: calc(80 * var(--k)); height: calc(30 * var(--k)); margin-top: calc(100 * var(--k)); }
.altar { position: absolute; inset: 0; background: url("img/night/altar.png") 0 0 / 100% 100%; }
/* Every character stands still on the altar (the owner, 2026-09-25). The hero is the first frame of hero-loop.png
   (52 x 74, standing). The 8-direction characters are each their 80 x 80 south still (tools/paint-chars.cjs, which
   also has the measures), placed so its feet (the lowest opaque row) land where the hero's do, and its feet sit centred */
.sprite { position: absolute; z-index: 2; left: 50%; bottom: calc(21 * var(--k)); width: calc(52 * var(--k)); height: calc(74 * var(--k)); margin-left: calc(-27 * var(--k)); background: url("img/night/hero-loop.png") 0 0 / calc(520 * var(--k)) 100%; }
.stage[data-who="cashcat"] .sprite, .stage[data-who="pons"] .sprite, .stage[data-who="wren"] .sprite, .stage[data-who="brakka"] .sprite { width: calc(80 * var(--k)); height: calc(80 * var(--k)); background-size: 100% 100%; }
.stage[data-who="cashcat"] .sprite { margin-left: calc(-39 * var(--k)); bottom: calc(18 * var(--k)); background-image: url("img/night/cashcat.png"); }
.stage[data-who="pons"] .sprite { margin-left: calc(-33 * var(--k)); bottom: calc(19 * var(--k)); background-image: url("img/night/pons.png"); }
.stage[data-who="wren"] .sprite { margin-left: calc(-40 * var(--k)); bottom: calc(19 * var(--k)); background-image: url("img/night/wren.png"); }
.stage[data-who="brakka"] .sprite { margin-left: calc(-39 * var(--k)); bottom: calc(20 * var(--k)); background-image: url("img/night/brakka.png"); }
.unknown { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(26 * var(--k)); display: none; text-align: center; font: 400 calc(6 * var(--j)) / 1 var(--display); color: var(--lav3); text-shadow: 0 0 30px rgba(144, 102, 181, 0.5); }
.stage.is-locked .sprite { display: none; }
.stage.is-locked .unknown { display: block; }

/* the stat card: two framed panels side by side, pulled up against the foot of the altar */
.card { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 12px; width: 100%; margin-top: calc(2 * var(--k)); }
.card-main, .card-weapon { border: 12px solid transparent; border-image: var(--stone); background: var(--panel) padding-box; }
.card-main { padding: 6px 12px 8px; min-width: min(100%, 300px); }
.card-name { margin: 0 0 10px; font: 400 calc(2 * var(--j)) / 1 var(--display); color: var(--g2); text-shadow: 0 2px 0 var(--deep); }
/* a character that is drawn but not playable yet carries a quiet "Coming" tag after its name */
.card-name .tag { display: inline-block; vertical-align: 4px; margin-left: 12px; padding: 3px 6px 4px; font: 400 16px / 1 var(--body); color: var(--muted); text-shadow: none; background: var(--deep); box-shadow: 0 0 0 2px var(--s3); }
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto auto; gap: 10px 24px; }
.stats li { display: flex; align-items: center; gap: 8px; line-height: 1.2; }
.stats img { flex: none; width: 22px; height: auto; }
.stats .k { color: var(--muted); }
.stats b { font-weight: 400; color: var(--bone); }
.stats .soon img { opacity: 0.45; }
.stats .soon b { color: var(--muted); }
.card-locked { margin: 0; max-width: 24ch; color: var(--muted); }
.card-weapon { display: flex; align-items: center; gap: 14px; padding: 6px 14px 6px 6px; }
.wslot { position: relative; display: grid; place-items: center; width: 76px; height: 76px; flex: none; background: var(--deep); box-shadow: inset 0 0 0 2px var(--s2); }
.wslot img { width: 64px; height: 64px; }
.wq { display: none; font: 400 calc(3 * var(--j)) / 1 var(--display); color: var(--lav3); }
.card-weapon p { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.card-weapon b { font: 400 calc(2 * var(--j)) / 1 var(--display); color: var(--bone); }
.card-weapon span { color: var(--muted); }
.stage.is-locked .wslot img { display: none; }
.stage.is-locked .wq { display: block; }

/* the roster: a lime cursor bobs over the chosen slot; the locked slots fade into the dark, so the
   row shows that more are coming without counting them */
.roster { display: grid; grid-template-columns: repeat(4, 72px); gap: 12px; justify-content: center; margin: 56px auto 0; }
.slot {
  --b: 4px;
  --edge: var(--s2);
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: var(--panel);
  color: var(--lav2);
  box-shadow: 0 calc(-1 * var(--b)) 0 0 var(--edge), 0 var(--b) 0 0 var(--edge), calc(-1 * var(--b)) 0 0 0 var(--edge), var(--b) 0 0 0 var(--edge), inset 0 var(--b) 0 0 rgba(186, 156, 219, 0.08);
}
/* today's hero: the 34 px portrait at 2x, cropped by the slot on the smallest phones */
.slot[data-slot="hero"] { background: var(--panel) url("img/night/hero-face.png") center / 68px 68px no-repeat; }
.slot[data-slot="cashcat"] { background: var(--panel) url("img/night/cashcat-face.png") center / 68px 68px no-repeat; }
.slot[data-slot="pons"] { background: var(--panel) url("img/night/pons-face.png") center / 68px 68px no-repeat; }
.slot[data-slot="wren"] { background: var(--panel) url("img/night/wren-face.png") center / 68px 68px no-repeat; }
.slot[data-slot="brakka"] { background: var(--panel) url("img/night/brakka-face.png") center / 68px 68px no-repeat; }
/* the same tag on a coming character's slot, as a strip along its foot */
.slot .tag { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0 4px; font: 400 16px / 1 var(--body); color: var(--muted); background: rgba(12, 4, 24, 0.86); }
.slot.locked { background: #140626; }
.slot.locked span { font: 400 calc(2 * var(--j)) / 1 var(--display); }
.slot:hover { --edge: var(--s4); }
.slot[aria-checked="true"] { background-color: #241040; box-shadow: 0 -4px 0 0 var(--g2), 0 4px 0 0 var(--g2), -4px 0 0 0 var(--g2), 4px 0 0 0 var(--g2), 0 0 22px rgba(181, 221, 118, 0.35); }
.slot.locked[aria-checked="true"] { color: var(--lav); }
.slot[aria-checked="true"]::after { content: ""; position: absolute; left: 50%; top: -26px; width: 14px; height: 8px; margin-left: -7px; background: var(--arrow-d) 0 0 / 100% 100%; animation: bob 1s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(-4px); } }
.slot:nth-child(6) { opacity: 0.7; }
.slot:nth-child(7) { opacity: 0.45; }
.slot:nth-child(8) { opacity: 0.25; }
.slot[aria-checked="true"], .slot:focus-visible, .slot:hover { opacity: 1; }

/* ---------- 4. One small peek ---------- */
.peek { padding-top: 24px; }
.scry { margin: 0 auto; width: fit-content; max-width: 100%; }
.glass {
  position: relative;
  line-height: 0;
  border: var(--ft) solid transparent;
  border-image: url("img/night/frame9.png") 6 / var(--ft) / 0 stretch;
  background: var(--sky0);
  box-shadow: 0 0 60px rgba(144, 102, 181, 0.22);
}
.glass::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 34px 6px rgba(18, 0, 31, 0.75); pointer-events: none; }
.glass img { display: block; max-width: none; }
.scry figcaption { margin-top: 16px; text-align: center; color: var(--muted); }

/* ---------- 5. The fight ---------- */
.tagline { margin: 0 auto; max-width: 30ch; text-align: center; font: 400 24px / 1.5 var(--body); color: var(--bone); }
/* rows of five (seven from 1000 px), a short last row centred */
.skills { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: calc(5 * 52px + 4 * 12px); margin: 40px auto 0; padding: 0; }
.skills li { flex: none; display: grid; place-items: center; width: 52px; height: 52px; background: var(--deep); box-shadow: 0 -4px 0 0 var(--s2), 0 4px 0 0 var(--s2), -4px 0 0 0 var(--s2), 4px 0 0 0 var(--s2); }
.skills img { width: 32px; height: 32px; }
.foes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 8px; align-items: end; margin: 28px auto 0; padding: 0; max-width: 420px; }
.foes li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.foes img { width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); max-width: none; margin-bottom: 10px; filter: drop-shadow(0 4px 0 rgba(7, 0, 13, 0.6)); }
.foes b { font: 400 calc(2 * var(--j)) / 0.9 var(--display); color: var(--bone); }
.foes span { margin-top: 4px; color: var(--g2); line-height: 1.3; }
.foes span.lv { margin-top: 2px; color: var(--muted); }
.foes .boss b { color: var(--lav); }
/* the reaper alone (the owner, 2026-09-25: the other foes and their times stay off the page): 2x, 3x from 1100 px */
.foes.solo { grid-template-columns: auto; justify-content: center; max-width: none; }
.foes.solo img { width: calc(var(--w) * 2px); height: calc(var(--h) * 2px); }
@media (min-width: 1100px) { .foes.solo img { width: calc(var(--w) * 3px); height: calc(var(--h) * 3px); } }

/* ---------- 6. Seasons: the board itself ---------- */
.board { margin: 40px auto 0; max-width: 900px; padding: 20px 16px 20px; border: var(--ft) solid transparent; border-image: url("img/night/frame9.png") 6 / var(--ft) / 0 stretch; background: var(--panel-2) var(--dots) 12px 12px / 24px 24px; }
.board-top { text-align: center; }
.plate { display: inline-block; margin: 0; padding: 4px 18px 6px; background: var(--g2); color: var(--deep); font: 400 calc(2 * var(--j)) / 1 var(--display); box-shadow: 0 -4px 0 0 var(--deep), 0 4px 0 0 var(--deep), -4px 0 0 0 var(--deep), 4px 0 0 0 var(--deep), inset 0 4px 0 0 var(--g3), inset 0 -4px 0 0 var(--g1); }
.board-sub { margin: 14px 0 0; color: var(--lav); }
.tables { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 22px; }
.table { padding: 14px 14px 12px; background: var(--deep); box-shadow: inset 0 0 0 2px var(--s2); }
.table h3 { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 calc(2 * var(--j)) / 1 var(--display); color: var(--g2); }
.table h3 img { width: 26px; height: 26px; }
.table p { margin: 8px 0 0; color: var(--muted); }
.rows { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.rows li { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.rows li::after { content: ""; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--s2) 0 6px, transparent 6px 12px); }
.both { margin: 12px 0 0; text-align: center; color: var(--muted); }
.best5 { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; padding-top: 20px; box-shadow: 0 -2px 0 0 var(--s2); text-align: center; }
.runs { display: flex; align-items: center; gap: 8px; }
.runs i { width: 34px; height: 34px; background: var(--deep) url("img/night/n-run.png") center / 26px 26px no-repeat; box-shadow: inset 0 0 0 2px var(--s3); }
.runs b { margin: 0 4px; font: 400 calc(2 * var(--j)) / 1 var(--display); color: var(--muted); }
.runs .sum { width: 42px; height: 42px; background: var(--deep) url("img/night/n-score.png") center / 26px 26px no-repeat; box-shadow: inset 0 0 0 2px var(--g1), 0 0 14px rgba(181, 221, 118, 0.3); }
.best5 p { margin: 0; color: var(--muted); }
.replay { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0 0; padding-top: 20px; box-shadow: 0 -2px 0 0 var(--s2); color: var(--muted); }
.replay img { flex: none; width: 26px; height: 26px; margin-top: 2px; }
.score-rules { max-width: 900px; margin: 28px auto 0; padding: 8px 12px 10px; border: 12px solid transparent; border-image: var(--stone); background: #170a2a padding-box; }
.score-rules h3 { margin: 0 0 8px; font: 400 calc(2 * var(--j)) / 1 var(--display); color: var(--g2); }
.score-rules p { margin: 0; color: var(--bone); max-width: 64ch; }
.score-rules p + p { margin-top: 10px; }
/* the worked example, laid out like the game's end screen: Time, Kills, Reaper, then the score */
.score-eg { width: 100%; max-width: 560px; margin: 18px 0 0; border-collapse: collapse; background: var(--deep); box-shadow: inset 0 0 0 2px var(--s2); }
.score-eg caption { caption-side: top; padding: 0 0 10px; text-align: left; color: var(--lav); }
.score-eg th, .score-eg td { padding: 8px 12px; text-align: left; font-weight: 400; vertical-align: baseline; }
.score-eg th { color: var(--muted); }
.score-eg td { color: var(--bone); }
.score-eg .pts { text-align: right; white-space: nowrap; }
.score-eg tbody tr + tr > * { box-shadow: 0 -2px 0 0 var(--s1); }
.score-eg tfoot > tr > * { padding-top: 12px; padding-bottom: 12px; box-shadow: 0 -2px 0 0 var(--s3); font: 400 calc(2 * var(--j)) / 1 var(--display); color: var(--g2); }
.score-rules .score-note { margin-top: 12px; color: var(--muted); }

/* ---------- 7. The Game Pass: an item card, as the game would show it ---------- */
.items { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 900px; margin: 40px auto 0; }
.items.items-one { grid-template-columns: 1fr; max-width: 600px; }
.item { padding: 8px 10px 12px; border: 12px solid transparent; border-image: var(--stone); background: var(--panel) padding-box; }
.item-head { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; box-shadow: 0 2px 0 0 var(--s2); }
.islot { display: grid; place-items: center; width: 64px; height: 64px; flex: none; background: var(--deep); box-shadow: inset 0 0 0 2px var(--s2); }
.islot img { width: 52px; height: 52px; }
.item h3 { margin: 0; font: 400 calc(2 * var(--j)) / 1 var(--display); color: var(--bone); }
.item .kind { margin: 4px 0 0; color: var(--g2); }
.item > p { margin: 12px 0 0; color: var(--muted); }
.item .status { display: flex; align-items: center; gap: 10px; color: var(--lav); }

/* ---------- 8. Questions: one menu, a lime cursor on the row you are on ---------- */
.menu { max-width: 900px; margin: 40px auto 0; padding: 4px 0; border: 12px solid transparent; border-image: var(--stone); background: var(--panel) padding-box; }
.menu details + details { box-shadow: 0 -2px 0 0 var(--s2); }
.menu summary { position: relative; display: block; padding: 14px 16px 14px 44px; cursor: pointer; list-style: none; font: 400 calc(2 * var(--j)) / 1 var(--display); color: var(--bone); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::before { content: ""; position: absolute; left: 18px; top: 50%; width: 8px; height: 14px; margin-top: -7px; background: var(--arrow-r) 0 0 / 100% 100% no-repeat; opacity: 0.35; }
.menu summary:hover, .menu summary:focus-visible { color: var(--g3); background: #241040; }
.menu summary:hover::before, .menu summary:focus-visible::before, .menu details[open] summary::before { opacity: 1; }
.menu details[open] summary { color: var(--g2); }
.menu details[open] summary::before { width: 14px; height: 8px; margin-top: -4px; left: 15px; background-image: var(--arrow-d); }
.menu summary:focus-visible { outline-offset: -4px; }
.menu details p { margin: 0; padding: 0 16px 16px 44px; color: var(--muted); }

/* ---------- Dawn and the foot of the page ---------- */
.dawn { position: relative; padding: 112px 0 calc(58 * var(--s) + 40px); overflow: hidden; background: var(--night) url("img/night/dawn.png") repeat-x left bottom calc(16 * var(--s)) / calc(4 * var(--s)) calc(120 * var(--s)); }
.dawn .wrap { position: relative; z-index: 2; }
.dawn .treeline, .dawn .hedge { position: absolute; }
.dawn .treeline { bottom: calc(20 * var(--s)); filter: brightness(1.35); }
.dawn .hedge-far { bottom: calc(10 * var(--s)); }
.foot { position: relative; padding: 8px 0 128px; text-align: center; color: var(--muted); }
.foot-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 18px; font: 400 calc(2 * var(--j)) / 1 var(--display); color: var(--bone); }
.foot-brand img { width: 34px; height: 39px; }
.disclaimer { margin: 0 auto; max-width: 56ch; color: var(--lav); }
.credits { margin: 12px auto 0; max-width: 64ch; }

/* ---------- Phones ---------- */
@media (max-width: 699px) {
  /* the hedges, woods and tower stand taller so the Play rune does not hide them */
  .hero .hedge, .hero .fog, .hero .fly, .hero .treeline, .hero .tower { --s: 3px; }
  .hero { padding-bottom: calc(34 * 3px + 40px); }
  .play-in { padding: 4px 44px 8px; font-size: calc(2 * var(--j)); }
  .play-in::before { left: 18px; }
  .play-in::after { right: 18px; }
  .card-main, .card-weapon { width: 100%; }
}
/* short phones: the tower sinks behind the hedge so its roof stays clear of the hero line */
@media (max-width: 699px) and (max-height: 720px) { .tower { bottom: calc(20 * var(--s)); } }
@media (max-width: 379px) {
  .stats { column-gap: 12px; }
  .score-eg th, .score-eg td { padding-left: 6px; padding-right: 6px; }
  .roster { grid-template-columns: repeat(4, 64px); gap: 8px; }
  .slot { width: 64px; height: 64px; }
  .map { padding-left: 8px; padding-right: 8px; grid-template-columns: minmax(0, 1.1fr) 22px minmax(0, 1fr); }
  .node { padding-left: 8px; padding-right: 8px; }
  .board-head .ic { display: none; }
  .runs { gap: 6px; }
  .runs i { width: 30px; height: 30px; }
}
/* the smallest phones: the foes two a row, the reaper alone under them, so no name is wider than its column */
@media (max-width: 359px) {
  .foes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foes .boss { grid-column: 1 / -1; }
}
@media (max-width: 339px) {
  .roster { grid-template-columns: repeat(4, 60px); }
  .slot { width: 60px; height: 60px; }
  .node h3, .tbl b { font-size: 16px; }
  .runs i { width: 28px; height: 28px; background-size: 13px 13px; }
}

/* ---------- Wider screens ---------- */
@media (min-width: 560px) {
  .skills { max-width: calc(5 * 76px + 4 * 12px); }
  .skills li { width: 76px; height: 76px; }
  .skills img { width: 64px; height: 64px; }
  .foes { grid-template-columns: repeat(5, auto); max-width: none; gap: 0 28px; justify-content: center; }
  .tables { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 700px) {
  .sec { padding: 104px 0; }
  .peek { padding-top: 32px; padding-bottom: 56px; }
  .fight { padding-top: 56px; }
  .tagline { max-width: 40ch; }
  .loop { font-size: calc(3 * var(--j)); }
  .glow-title { font-size: calc(3 * var(--j)); }
  .roster { grid-template-columns: repeat(8, 84px); gap: 14px; }
  .slot { width: 84px; height: 84px; }
  .card { flex-wrap: nowrap; }
  .items { grid-template-columns: 1fr 1fr; }
  .item > p, .menu details p, .score-rules p, .score-eg { font-size: 24px; line-height: 1.4; }
  .board { padding: 28px 28px 24px; }
  .foes img { width: calc(var(--w) * 2px); height: calc(var(--h) * 2px); }
  .foes { gap: 0 40px; }
}
@media (min-width: 700px) and (max-width: 979px) {
  .roster { grid-template-columns: repeat(4, 84px); }
}
@media (min-width: 1000px) {
  /* two rows of seven: the weapons, then the passives and the heal */
  .skills { max-width: calc(7 * 76px + 6 * 12px); }
}
@media (min-width: 1100px) {
  .title, .glow-title { font-size: calc(4 * var(--j)); }
  .gt-br { display: block; }
  .foes { gap: 0 56px; }
}

/* ---------- Motion: off when asked for, or when the moon button is pressed ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .fly, .flock { display: none; }
}
.still-night *, .still-night *::before, .still-night *::after { animation-play-state: paused !important; }