/* Moonlit Arcade
   Layout: a night masthead and star-field hero over one 75rem column; content is left-aligned.
   Pixel-notched corners are reserved for things you can play (covers and Play buttons).
   One deliberate look: the whole site is the arcade at night, so there is no light theme. */

@font-face { font-family: "Jersey 10"; src: url("fonts/jersey-10.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/atkinson-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/atkinson-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* color */
  --sky: #0f0d2b;          /* top of the night: masthead, footer */
  --night: #17153a;        /* page ground */
  --night-raised: #221f4f; /* panels, fact boxes, chips */
  --night-line: #37326e;   /* rules and outlines */
  --void: #07061a;         /* behind the game */
  --moon: #f7e8b5;         /* moonlight: display type */
  --moon-shadow: #3b3576;  /* hard pixel shadow under display type, unlit moon */
  --moon-crater: #dcc68a;
  --star-dim: #514b8f;
  --ink: #e7e4f7;          /* body text */
  --haze: #aba6d2;         /* secondary text */
  --lantern: #ffb23f;      /* the one action color: Play */
  --lantern-hi: #ffc463;
  --lantern-deep: #c47710;
  --lantern-ink: #2b1900;
  --petal: #ff8aab;        /* "New" and "Featured" flags */
  /* type */
  --font-display: "Jersey 10", "Pixelify Sans", "Courier New", monospace;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --step--1: .875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.875rem;
  --step-3: 2.5rem;
  --step-4: 3.25rem;
  --step-5: clamp(3.25rem, 2rem + 5vw, 6rem);
  /* shape */
  --wrap: 75rem;
  --notch: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
  --notch-sm: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lantern); text-underline-offset: .18em; }
a:hover { color: var(--lantern-hi); }
:focus-visible { outline: 3px solid var(--lantern); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 2000; background: var(--lantern); color: var(--lantern-ink); padding: .6rem 1rem; font-weight: 700; }
.skip:focus { top: 1rem; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 4rem);
  margin-inline: auto;
  padding-left: max(clamp(16px, 4vw, 2rem), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 4vw, 2rem), env(safe-area-inset-right, 0px));
}

/* ------------------------------------------------------------ masthead */
.masthead { background: var(--sky); border-bottom: 1px solid var(--night-line); }
.masthead-in { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; padding-block: .75rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--moon); text-decoration: none; font: 400 2rem/1 var(--font-display); }
.brand:hover { color: var(--moon); }
.moon { width: 32px; height: 32px; image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 50%; background: var(--moon-shadow); }
.nav { display: flex; gap: 1.5rem; margin-left: auto; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 700; padding-block: .35rem; border-bottom: 3px solid transparent; }
.nav a:hover { color: var(--moon); border-color: var(--night-line); }
.nav a[aria-current="page"] { border-color: var(--lantern); }
.search input {
  width: 15rem; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--night); border: 2px solid var(--night-line); padding: .5rem .75rem; border-radius: 0;
}
.search input::placeholder { color: var(--haze); }
.search input:focus-visible { outline-offset: 0; border-color: var(--lantern); }
@media (max-width: 680px) {
  .brand { font-size: 1.75rem; }
  .search { flex-basis: 100%; }
  .search input { width: 100%; }
}

/* ------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; background: linear-gradient(var(--sky), var(--night) 85%); }
.hero::before {
  content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 2px;
  box-shadow: 806px 47px 0 0 var(--star-dim),729px 554px 0 0 var(--star-dim),30px 124px 0 0 var(--star-dim),523px 138px 0 0 var(--star-dim),783px 151px 0 0 var(--moon),544px 589px 0 0 var(--star-dim),676px 287px 0 0 var(--star-dim),108px 466px 0 1px var(--moon),1584px 243px 0 0 var(--moon),1014px 515px 0 0 var(--moon),755px 593px 0 0 var(--star-dim),1187px 312px 0 0 var(--star-dim),1423px 149px 0 0 var(--star-dim),740px 471px 0 0 var(--moon),947px 358px 0 0 var(--star-dim),653px 99px 0 0 var(--star-dim),222px 394px 0 0 var(--star-dim),1015px 523px 0 0 var(--star-dim),1388px 222px 0 0 var(--star-dim),1712px 26px 0 1px var(--moon),267px 441px 0 0 var(--star-dim),884px 566px 0 0 var(--star-dim),1040px 50px 0 0 var(--star-dim),1406px 150px 0 0 var(--star-dim),353px 291px 0 0 var(--star-dim),1379px 119px 0 0 var(--moon),267px 322px 0 0 var(--star-dim),575px 230px 0 0 var(--star-dim),1602px 150px 0 0 var(--moon),1493px 411px 0 0 var(--moon),1631px 209px 0 0 var(--star-dim),125px 545px 0 0 var(--star-dim),410px 419px 0 0 var(--star-dim),1232px 151px 0 0 var(--moon),775px 585px 0 0 var(--star-dim),112px 139px 0 0 var(--star-dim),229px 100px 0 0 var(--star-dim),627px 65px 0 0 var(--star-dim),1140px 543px 0 0 var(--star-dim),596px 205px 0 0 var(--moon),504px 562px 0 0 var(--moon),156px 483px 0 0 var(--star-dim),249px 285px 0 0 var(--star-dim),85px 63px 0 0 var(--star-dim),790px 31px 0 0 var(--star-dim),1324px 548px 0 0 var(--moon),224px 531px 0 0 var(--star-dim),410px 595px 0 0 var(--star-dim),879px 300px 0 0 var(--star-dim),1186px 368px 0 0 var(--star-dim),163px 450px 0 1px var(--moon),367px 398px 0 0 var(--moon),1641px 209px 0 0 var(--star-dim),247px 127px 0 0 var(--star-dim),539px 69px 0 0 var(--star-dim),453px 469px 0 0 var(--star-dim),922px 161px 0 0 var(--star-dim),414px 257px 0 0 var(--moon),1565px 187px 0 0 var(--star-dim),136px 500px 0 0 var(--star-dim),900px 583px 0 0 var(--star-dim),749px 100px 0 0 var(--star-dim),1358px 461px 0 0 var(--moon),102px 425px 0 0 var(--moon);
  pointer-events: none;
}
.hero-in {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
.hero-title {
  margin: 0; color: var(--moon);
  font: 400 var(--step-5)/.9 var(--font-display);
  text-shadow: 0 .06em 0 var(--moon-shadow);
  text-wrap: balance;
}
.hero-lede { margin: 1.5rem 0 0; font-size: var(--step-1); max-width: 30ch; }
.hero-points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; color: var(--haze); }
.hero-points li { display: inline-flex; align-items: center; gap: .55rem; }
.hero-points li::before { content: ""; width: 8px; height: 8px; background: var(--lantern); flex: none; }

.spotlight { display: grid; gap: 1.25rem; min-width: 0; }
.spotlight-art { position: relative; display: block; aspect-ratio: 16 / 9; max-width: 100%; clip-path: var(--notch); background: var(--night-raised); }
.spotlight-art img { width: 100%; height: 100%; object-fit: cover; }
.spotlight-body { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; }
.spotlight-text { min-width: 0; flex: 1 1 18rem; }
.spotlight-title { margin: 0; font: 400 var(--step-4)/.95 var(--font-display); color: var(--moon); text-wrap: balance; }
.spotlight-title a { color: inherit; text-decoration: none; }
.spotlight-title a:hover { color: var(--lantern); }
.spotlight-tagline { margin: .5rem 0 0; color: var(--haze); max-width: 46ch; }
@media (max-width: 880px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); }
  .hero-lede { max-width: 40ch; }
}

.flag {
  position: absolute; top: 12px; left: 12px;
  background: var(--petal); color: var(--sky);
  font: 700 var(--step--1)/1 var(--font-body); padding: .35rem .6rem .4rem;
  clip-path: var(--notch-sm);
}

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; gap: .65rem;
  font: 700 var(--step-0)/1 var(--font-body); text-decoration: none; white-space: nowrap;
  border: 0; cursor: pointer; padding: .95rem 1.35rem 1.1rem;
  clip-path: var(--notch);
}
.btn-play { background: var(--lantern); color: var(--lantern-ink); box-shadow: inset 0 -5px 0 var(--lantern-deep); }
.btn-play::before { content: ""; width: 11px; height: 14px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); flex: none; }
.btn-play:hover { background: var(--lantern-hi); color: var(--lantern-ink); }
.btn-play:active { box-shadow: inset 0 5px 0 var(--lantern-deep); padding-top: 1.1rem; padding-bottom: .95rem; }
.btn:focus-visible { outline: 3px solid currentColor; outline-offset: -8px; }
.btn:disabled { cursor: progress; filter: saturate(.6); }

.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--lantern); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }

/* ------------------------------------------------------------ sections */
.band { padding-block: 1.5rem 0; }
.games { padding-block: clamp(2rem, 5vw, 3.5rem); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.75rem; }
.section-title { margin: 0; color: var(--moon); font: 400 var(--step-3)/1 var(--font-display); text-wrap: balance; }
.count { font: 700 var(--step-0)/1 var(--font-body); color: var(--haze); font-variant-numeric: tabular-nums; margin-left: .35rem; vertical-align: .35em; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font: 700 .9375rem/1 var(--font-body); color: var(--ink);
  background: transparent; border: 2px solid var(--night-line); border-radius: 0;
  padding: .55rem .85rem; cursor: pointer;
}
.chip:hover { border-color: var(--haze); }
.chip[aria-pressed="true"] { background: var(--moon); border-color: var(--moon); color: var(--sky); }
.empty { margin: 2rem 0 0; color: var(--haze); }

/* ------------------------------------------------------------ cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 2.25rem 1.5rem; }
.card { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.card-link { display: flex; flex-direction: column; gap: .85rem; color: inherit; text-decoration: none; }
.card-link:focus-visible { outline-offset: 5px; }
.card-art { position: relative; display: block; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; clip-path: var(--notch); background: var(--night-raised); }
.card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.card-link:hover .card-art img { transform: scale(1.04); }
.card-title { margin: 0; color: var(--moon); font: 400 var(--step-2)/1 var(--font-display); }
.card-link:hover .card-title { color: var(--lantern); }
.card-tagline { margin: 0; color: var(--haze); font-size: .9375rem; line-height: 1.5; }
.card-facts { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.card-facts li { font: 700 .8125rem/1 var(--font-body); color: var(--ink); background: var(--night-raised); padding: .35rem .5rem; }

.soon { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.soon-art { display: grid; place-items: center; aspect-ratio: 16 / 9; max-width: 100%; border: 2px dashed var(--night-line); margin-bottom: .4rem; }
.soon-art img { width: 48px; height: 48px; image-rendering: pixelated; }
.soon .card-title { color: var(--haze); }

/* ------------------------------------------------------------ ads */
.ad { display: grid; justify-items: center; align-content: start; gap: .35rem; min-width: 0; }
.ad-label { margin: 0; font-size: .75rem; line-height: 1; color: var(--haze); letter-spacing: .03em; }
.ad-fill {
  width: 100%; display: grid; place-content: center; gap: .3rem; text-align: center; padding: 1rem;
  color: var(--haze); font-size: .875rem; line-height: 1.35;
  border: 2px dashed var(--night-line);
  background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(55, 50, 110, .35) 12px 24px);
}
.ad-fill strong { color: var(--ink); }
.ad--banner .ad-fill { max-width: 728px; min-height: 90px; }
.ad--banner.is-live { min-height: 110px; width: 100%; }
.ad--sidebar .ad-fill { width: 300px; height: 600px; }
.ad--infeed { align-self: stretch; }
.ad--infeed .ad-fill { height: 100%; min-height: 14rem; }
@media (max-width: 600px) {
  .ad--banner .ad-fill { max-width: 320px; min-height: 100px; }
  .game-main > .ad--banner .ad-fill { max-width: 300px; min-height: 250px; }
  .game-main > .ad--banner.is-live { min-height: 270px; }
}

/* ------------------------------------------------------------ about band */
.about-band { background: var(--night-raised); }
.about-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.5rem 3rem; padding-block: clamp(2.5rem, 5vw, 3.5rem); }
@media (max-width: 760px) { .about-in { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ game page */
.game-top, .page-top { padding-block: 1.25rem 3rem; }
.crumbs ol { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; font-size: .9375rem; color: var(--haze); }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--night-line); }
.crumbs a { color: var(--ink); }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem; align-items: start; }
.game-main { display: grid; gap: 2rem; min-width: 0; }
.game-main > * { min-width: 0; }
.game-side { position: sticky; top: 1rem; }
@media (max-width: 1100px) {
  .game-layout { grid-template-columns: minmax(0, 1fr); }
  .game-side { display: none; }
}

.player {
  width: min(100%, calc((100svh - 11rem) * var(--arn, 1.7778)));
  min-width: min(100%, 18rem);
  margin-inline: auto;
  display: flex; flex-direction: column;
  background: var(--void);
}
.player-stage { position: relative; width: 100%; aspect-ratio: var(--ar, 16 / 9); max-width: 100%; overflow: hidden; background: var(--void); }
.player-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(.85); }
.player-start { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; max-width: calc(100% - 2rem); font-size: var(--step-1); padding: 1.15rem 1.6rem 1.35rem; }
.player-start:active { padding-top: 1.35rem; padding-bottom: 1.15rem; }
.player-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--void); }
.player.is-playing .player-cover, .player.is-playing .player-start { display: none; }
.player-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem; background: var(--night-raised); }
.player-name { margin-right: auto; padding-inline: .5rem; color: var(--moon); font: 400 1.6rem/1 var(--font-display); }
.tool {
  display: inline-flex; align-items: center; min-height: 2.5rem;
  font: 700 .875rem/1 var(--font-body); color: var(--ink); text-decoration: none;
  background: transparent; border: 2px solid var(--night-line); border-radius: 0; padding: .5rem .8rem; cursor: pointer;
}
.tool:hover { border-color: var(--haze); color: var(--moon); }
.tool:disabled { opacity: .45; cursor: default; border-color: var(--night-line); color: var(--ink); }
@media (max-width: 520px) {
  .player-bar [data-act="newtab"] { display: none; }
  .player-name { font-size: 1.35rem; }
}

.player.is-full {
  position: fixed; inset: 0; z-index: 1000; width: auto; min-width: 0; margin: 0;
}
.player.is-full .player-bar {
  order: -1; flex-wrap: nowrap;
  padding-top: max(.4rem, env(safe-area-inset-top, 0px));
  padding-left: max(.5rem, env(safe-area-inset-left, 0px));
  padding-right: max(.5rem, env(safe-area-inset-right, 0px));
}
.player.is-full .player-stage { flex: 1; aspect-ratio: auto; margin-bottom: env(safe-area-inset-bottom, 0px); }
.player.is-full [data-act="fullscreen"], .player.is-full [data-act="newtab"] { display: none; }
.player.is-full .player-name { font-size: 1.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
html.player-open, html.player-open body { overflow: hidden; }

.break {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-content: center; justify-items: center; gap: .8rem; text-align: center; padding: 1.5rem;
  background: repeating-linear-gradient(135deg, var(--night) 0 14px, var(--night-raised) 14px 28px);
}
.break-label { margin: 0; font-size: .75rem; color: var(--haze); letter-spacing: .03em; }
.break-title { margin: 0; color: var(--moon); font: 400 var(--step-3)/1 var(--font-display); }
.break-text { margin: 0; max-width: 42ch; color: var(--ink); font-size: .9375rem; }
.break-count { margin: 0; color: var(--haze); font-variant-numeric: tabular-nums; }

.game-head h1, .page-title {
  margin: 0; color: var(--moon);
  font: 400 clamp(2.75rem, 2rem + 3vw, 4.5rem)/.95 var(--font-display);
  text-shadow: 0 .06em 0 var(--moon-shadow);
  text-wrap: balance;
}
.lede { margin: .85rem 0 0; font-size: var(--step-1); max-width: 52ch; }
.tags { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.tags a, .tags span { display: inline-block; font: 700 .875rem/1 var(--font-body); padding: .45rem .65rem; border: 2px solid var(--night-line); color: var(--ink); text-decoration: none; }
.tags a:hover { border-color: var(--lantern); color: var(--moon); }
.facts {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .55rem 1.75rem;
  margin: 1.75rem 0 0; padding: 1.25rem 1.5rem; background: var(--night-raised); max-width: 44rem;
}
.facts dt { color: var(--haze); }
.facts dd { margin: 0; font-weight: 700; }
@media (max-width: 480px) {
  .facts { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .facts dd { margin-bottom: .6rem; }
}

.prose { max-width: 68ch; min-width: 0; }
.prose > :first-child, .prose > section:first-child > h2 { margin-top: 0; }
.prose h2 { margin: 2.75rem 0 .75rem; color: var(--moon); font: 400 var(--step-3)/1 var(--font-display); text-wrap: balance; }
.prose h3 { margin: 1.75rem 0 .5rem; font-size: var(--step-1); color: var(--moon); }
.prose p { margin: 0 0 1rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.4rem; display: grid; gap: .45rem; }
.prose ul { list-style: square; }
.prose li::marker { color: var(--lantern); }
.prose ol li::marker { font-weight: 700; }
.prose a { color: var(--lantern); }
.table-scroll { overflow-x: auto; max-width: 100%; margin: 0 0 .75rem; }
table { border-collapse: collapse; font-size: .9375rem; min-width: 30rem; }
th, td { text-align: left; padding: .65rem 1rem .65rem 0; border-bottom: 1px solid var(--night-line); vertical-align: top; }
thead th { color: var(--haze); font-weight: 700; }
tbody th { color: var(--moon); }
.note { color: var(--haze); font-size: .9375rem; }
details { border-top: 1px solid var(--night-line); padding-block: .95rem; }
details:last-of-type { border-bottom: 1px solid var(--night-line); }
summary { display: flex; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; font-weight: 700; color: var(--moon); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 1.75rem/.8 var(--font-display); color: var(--lantern); }
details[open] summary::after { content: "–"; }
details p { margin: .65rem 0 0; }

.more { border-top: 1px solid var(--night-line); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.more .section-title { margin-bottom: 1.75rem; }

.page-head { margin-bottom: 2.5rem; }
.page-article .page-title { margin-bottom: 2rem; }

/* ------------------------------------------------------------ footer */
.footer { background: var(--sky); border-top: 1px solid var(--night-line); color: var(--haze); font-size: .9375rem; }
.footer-in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; padding-block: 2.75rem 1.75rem; }
.footer-in p { margin: 0 0 .5rem; }
.footer-name { color: var(--moon); font: 400 1.875rem/1 var(--font-display); margin-bottom: .75rem !important; }
.moon-note { font-size: .875rem; }
.footer h2 { margin: 0 0 .75rem; font: 700 .9375rem/1.2 var(--font-body); color: var(--ink); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer a, .footer .linkish { color: var(--ink); overflow-wrap: anywhere; }
.footer a:hover, .footer .linkish:hover { color: var(--lantern); }
.footer-legal { margin: 0; padding-block: 1.1rem 2rem; border-top: 1px solid var(--night-line); font-size: .875rem; }
@media (max-width: 720px) {
  .footer-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-in { grid-template-columns: minmax(0, 1fr); }
  .footer ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
}

/* ------------------------------------------------------------ records, achievements, My arcade */
.records { margin-top: 1rem; padding: 1rem 1.25rem 1.1rem; background: var(--night-raised); }
.records-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.records-title { margin: 0; color: var(--moon); font: 400 var(--step-2)/1 var(--font-display); }
.records-link { font-weight: 700; font-size: .9375rem; }
.records-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .75rem 1.25rem; margin: .85rem 0 0; }
.records-list div { min-width: 0; }
.records-list dt { color: var(--haze); font-size: .875rem; line-height: 1.3; }
.records-list dd { margin: .15rem 0 0; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.records-list dd.is-fresh { color: var(--lantern); animation: fresh 1.6s ease-out; }
@keyframes fresh { 0% { transform: scale(1.25); } 30% { transform: scale(1); } }
.records-note { margin: .8rem 0 0; color: var(--haze); font-size: .875rem; }

.prose .ach-list { list-style: none; padding: 0; display: grid; gap: .5rem; }
.ach-list li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: .65rem .8rem; background: var(--night-raised); }
.ach-icon { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 2px solid var(--night-line); color: var(--star-dim); clip-path: var(--notch-sm); }
.ach-icon::before { content: "★"; font-size: 1.05rem; line-height: 1; }
.ach-text strong { display: block; color: var(--moon); line-height: 1.3; }
.ach-text span { display: block; color: var(--haze); font-size: .9375rem; line-height: 1.4; }
.ach-state { font-size: .8125rem; color: var(--haze); white-space: nowrap; }
.ach-list li.is-unlocked .ach-icon { background: var(--lantern); border-color: var(--lantern); color: var(--lantern-ink); }
.ach-list li.is-unlocked .ach-state { color: var(--lantern); font-weight: 700; }
@media (max-width: 480px) {
  .ach-list li { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .ach-state { grid-column: 2; }
}

.arcade-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: .85rem; }
.tile { background: var(--night-raised); padding: 1rem 1.1rem; clip-path: var(--notch-sm); min-width: 0; }
.tile-value { margin: 0; color: var(--moon); font: 400 var(--step-4)/1 var(--font-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tile-label { margin: .3rem 0 0; color: var(--haze); font-size: .9375rem; line-height: 1.35; }
.arcade-block { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.arcade-sub { color: var(--haze); margin: .5rem 0 1.25rem; max-width: 62ch; }
.badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .75rem; }
.badge { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: .9rem; row-gap: .2rem; align-items: center; padding: .85rem; background: var(--night-raised); }
.badge-icon { grid-row: span 2; width: 3rem; height: 3rem; display: grid; place-items: center; font: 700 1.35rem/1 var(--font-body); color: var(--star-dim); border: 2px solid var(--night-line); border-radius: 50%; }
.badge-text strong { display: block; color: var(--haze); line-height: 1.3; }
.badge-text span { display: block; color: var(--haze); font-size: .875rem; line-height: 1.4; }
.badge-state { grid-column: 2; font-size: .8125rem; color: var(--star-dim); }
.badge.is-earned { box-shadow: inset 0 0 0 2px var(--lantern); }
.badge.is-earned .badge-icon { background: var(--lantern); color: var(--lantern-ink); border-color: var(--lantern); }
.badge.is-earned .badge-text strong { color: var(--moon); }
.badge.is-earned .badge-state { color: var(--lantern); font-weight: 700; }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 23rem), 1fr)); gap: 1rem; }
.rec-card { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: .85rem; background: var(--night-raised); min-width: 0; }
.rec-art { align-self: start; }
.rec-title { margin: 0; font: 400 var(--step-2)/1 var(--font-display); }
.rec-title a { color: var(--moon); text-decoration: none; }
.rec-title a:hover { color: var(--lantern); }
.rec-card .records-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .9rem; margin-top: .65rem; }
.rec-card .records-list dt { font-size: .8125rem; }
.rec-card .records-list dd { font-size: .9375rem; }
.rec-play { display: inline-block; margin-top: .7rem; font-weight: 700; }
.rec-card.is-unplayed .rec-art { filter: saturate(.5) brightness(.75); }
@media (max-width: 460px) { .rec-card { grid-template-columns: minmax(0, 1fr); } }
.arcade-data code { color: var(--moon); font-size: .9375rem; }
.arcade-data .tool { margin: .25rem .25rem .25rem 0; }
.arcade-toast {
  position: fixed; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 5000; max-width: calc(100vw - 2rem); padding: .7rem 1.1rem;
  background: var(--sky); color: var(--moon); border: 2px solid var(--lantern); font-weight: 700;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5); pointer-events: none; animation: toast-in .25s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }

.soon-next .card-art { margin-bottom: .4rem; }
.soon-next .card-art img { filter: saturate(.8) brightness(.8); }
.soon-next .card-title { color: var(--moon); }
.flag-soon { background: var(--moon); color: var(--sky); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}