/* Chaotic Phoenix: the studio's site. The studio's pages are the void, near-black with a violet glow; a game's own
   page (body.game-baarrage) takes the game's colours: BAArrage's night sky, its wool and its mint. Fonts are served
   from this site (fonts/, SIL Open Font License): no request leaves it. The same look as squarespace.css. */

@font-face {
  font-family: "Chakra Petch";
  src: url("fonts/ChakraPetch-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Chakra Petch";
  src: url("fonts/ChakraPetch-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* The studio. */
  --void: #07050d;
  --void-deep: #030206;
  --violet: #8b5cf6;
  --violet-light: #c4b2ff;
  --text: #eeeaf7;
  --muted: #9d93b8;
  --line: #261c3d;
  --panel-top: #160d2c;
  --panel-bottom: #0b0716;

  /* BAArrage: core/art/palette.gd. */
  --night-top: #05040f;
  --night-bottom: #111c40;
  --mint: #6dffb0;
  --wool: #fff2dc;
  --ui-text: #e8e2d0;

  /* Gravity Panic: Gravity-game's game/palette.gd. */
  --gp-bg: #0b231d;
  --gp-core: #123a30;
  --gp-grid: rgba(153, 255, 217, 0.07);
  --gp-mint: #9dffd2;
  --gp-gem: #8fd8ff;
  --gp-text: #e8fff4;

  /* Snake X 2048: Snake X 2048's game/palette.gd. */
  --sx-bg: #12151f;
  --sx-board: #1a1f2d;
  --sx-cell: #21273a;
  --sx-text: #e9edf7;
  --sx-dim: #8b94ad;
  --sx-two: #4ade80;
  --sx-four: #38bdf8;
  --sx-skin: #efe3c6;

  /* TD Survivor: TD Survivor's core/art/palette.gd, night-blue panels and the steppe. */
  --td-night: #10121a;
  --td-board: #161a26;
  --td-dot: #222839;
  --td-panel: #1c2131;
  --td-edge: #2c3349;
  --td-text: #e9ecf5;
  --td-muted: #8f97ad;
  --td-gold: #ffd166;
  --td-steppe: #9cc75a;
  --td-track: #e8c983;

  /* Paper Rally: Rally on Paper's game/palette.gd, a notebook page. */
  --pr-paper: #f3eee0;
  --pr-road: #fdfbf4;
  --pr-grid: rgba(92, 143, 214, 0.32);
  --pr-margin: rgba(219, 77, 77, 0.75);
  --pr-ink: #2a2a33;
  --pr-dim: #6f6c66;
  --pr-red: #d43d36;
  --pr-blue: #2b5fc8;
  --pr-green: #2c9550;
  --pr-purple: #8648c2;
  --pr-note: #fff1a8;
  --pr-primary: #ffd84d;
  --pr-card: #fffdf6;
  --pr-card-edge: #bfb399;

  /* SWARMCORE: Swarmcore's game/palette.gd and its icon's glow. */
  --sc-bg: #05060a;
  --sc-text: #e8f1ff;
  --sc-muted: #8fa3bf;
  --sc-accent: #ff4d6d;
  --sc-dna: #5eead4;
  --sc-glow: #22d3ee;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--void-deep);
}

/* The void: a violet glow from the top, another from the far corner, and a faint dust of stars. */
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Chakra Petch", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1px 1px at 78% 9%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 31%, rgba(196, 178, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 30% 46%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(1px 1px at 90% 58%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(1100px 700px at 50% -8%, rgba(124, 58, 237, 0.32), transparent 62%),
    radial-gradient(900px 640px at 105% 100%, rgba(91, 33, 182, 0.22), transparent 60%),
    var(--void);
}

a {
  color: var(--violet-light);
  text-underline-offset: 3px;
}

a:hover {
  color: #ffffff;
}

.wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 16px;
}

/* The header: the studio's name left, the menu right. */

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 24px;
}

.brand {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.nav {
  display: flex;
  gap: 20px;
  font-size: 16px;
  letter-spacing: 0.08em;
}

.nav a {
  color: var(--text);
  text-decoration: none;
}

.nav a[aria-current="page"] {
  color: var(--violet-light);
  border-bottom: 1px solid var(--violet);
}

/* The Games dropdown: every game, then All games. Opens on hover or focus; a tap on Games opens the games page. */

.drop {
  position: relative;
}

.drop > a::after {
  content: "▾";
  margin-left: 0.35em;
  font-size: 0.8em;
}

.drop-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  flex-direction: column;
  gap: 6px;
  padding: 10px 18px;
  white-space: nowrap;
  background: var(--void);
  border: 1px solid rgba(139, 92, 246, 0.38);
  border-radius: 12px;
  box-shadow: 0 0 32px rgba(124, 58, 237, 0.2);
}

.drop:hover .drop-menu,
.drop:focus-within .drop-menu {
  display: flex;
}

.drop-menu a:hover {
  color: var(--violet-light);
}

/* Headings. H1: a page's name, spaced capitals. H2: a section's name, small. H3: a game's name. */

h1 {
  margin: 20px 0 8px;
  font-weight: 600;
  font-size: clamp(30px, 6vw, 52px);
  line-height: 1.15;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h2 {
  margin: 0 0 16px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--violet-light);
}

h3 {
  margin: 0;
  font-weight: 600;
  font-size: clamp(26px, 4.5vw, 38px);
  letter-spacing: 0.06em;
}

.hero {
  padding: 64px 0 40px;
  text-align: center;
}

.hero .logo {
  width: min(240px, 60vw);
  height: auto;
}

.lede {
  margin: 8px 0 0;
}

.small {
  font-size: 15px;
}

/* A card: a violet panel on the studio's pages. */

.card {
  margin: 24px 0 48px;
  padding: 40px 24px;
  text-align: center;
  border: 1px solid rgba(139, 92, 246, 0.38);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  box-shadow: 0 0 48px rgba(124, 58, 237, 0.16);
}

.card p {
  max-width: 520px;
  margin: 12px auto;
  color: #dcd6ee;
}

.icon {
  width: 180px;
  height: 180px;
  border-radius: 22%;
  margin-bottom: 16px;
}

/* A button: a pill, outlined. */

.button {
  display: inline-block;
  margin-top: 12px;
  padding: 0.6em 1.4em;
  border: 1px solid var(--violet);
  border-radius: 999px;
  color: var(--violet-light);
  text-decoration: none;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 15px;
}

.button:hover {
  background: rgba(139, 92, 246, 0.14);
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.35);
}

span.button:hover {
  background: none;
  box-shadow: none;
}

.page {
  padding-bottom: 48px;
  text-align: center;
}

footer {
  margin-top: 40px;
  padding: 24px 0 40px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}

footer .name {
  color: var(--violet-light);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---- BAArrage's own pages: the night sky the game climbs, wool and mint. ---------------------------------------- */

body.game-baarrage {
  background:
    radial-gradient(1.5px 1.5px at 14% 12%, #c8d4ff, transparent 60%),
    radial-gradient(1px 1px at 33% 5%, rgba(200, 212, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 71% 15%, rgba(200, 212, 255, 0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 7%, #c8d4ff, transparent 60%),
    radial-gradient(1px 1px at 56% 24%, rgba(200, 212, 255, 0.5), transparent 60%),
    linear-gradient(180deg, var(--night-top) 0%, var(--night-bottom) 100%);
  color: var(--ui-text);
}

.game-baarrage a,
.game-baarrage h2,
.game-baarrage .nav a[aria-current="page"] {
  color: var(--mint);
}

.game-baarrage .brand,
.game-baarrage .nav a,
.game-baarrage h1,
.game-baarrage h3 {
  color: var(--wool);
}

/* The game's own name keeps its capitals: BAArrage, not BAARRAGE. */
.game-baarrage h1 {
  text-transform: none;
  letter-spacing: 0.06em;
}

.game-baarrage .button {
  border-color: var(--mint);
  color: var(--mint);
}

.game-baarrage .drop-menu {
  background: #080a1c;
  border-color: rgba(109, 255, 176, 0.35);
  box-shadow: none;
}

.game-baarrage .drop-menu a:hover {
  color: var(--mint);
}

.game-baarrage footer {
  border-top-color: rgba(109, 255, 176, 0.18);
}

.game-baarrage footer .name {
  color: var(--mint);
}

/* A BAArrage card: the game's panel ringed in mint. */
.game-baarrage .card {
  text-align: left;
  border-color: rgba(109, 255, 176, 0.35);
  background: linear-gradient(180deg, rgba(8, 10, 28, 0.92), rgba(17, 28, 64, 0.85));
  box-shadow: none;
}

.game-baarrage .card p,
.game-baarrage .card li {
  max-width: none;
  margin-left: 0;
  color: var(--ui-text);
}

.game-baarrage .card h2 {
  margin-top: 32px;
}

.game-baarrage .card h2:first-child {
  margin-top: 0;
}

/* The privacy policy. */

.doc {
  padding: 32px 0 16px;
}

.doc .summary {
  padding: 16px 20px;
  border-left: 3px solid var(--mint);
  background: rgba(8, 10, 28, 0.6);
}

.doc h2 {
  margin: 36px 0 8px;
}

/* The press kit: its factsheet, and its images in a grid, each a link to the full size. */

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 20px;
  max-width: 560px;
  margin: 16px auto 0;
  text-align: left;
}

.facts dt {
  color: var(--mint);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.facts dd {
  margin: 0;
  color: #dcd6ee;
}

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  margin: 20px 0 32px;
}

.shots.wide {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-items: center;
}

.shots img {
  display: block;
  width: 100%;
  border: 1px solid rgba(109, 255, 176, 0.35);
  border-radius: 12px;
}

@media (max-width: 520px) {
  .facts {
    grid-template-columns: 1fr;
  }
}

/* BAArrage's update notes (2026-10-18): an update a card, its changes in groups, each tagged NEW, CHANGED or FIXED. */

.notes .when {
  margin: 0 0 4px;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mint);
}

.notes h2 {
  margin: 0;
  font-size: clamp(22px, 4vw, 28px);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--wool);
}

.notes .intro {
  margin: 8px 0 0;
}

.notes h3 {
  margin: 28px 0 4px;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wool);
}

.notes ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notes li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(200, 218, 245, 0.08);
  font-size: 16px;
}

.notes li:first-child {
  border-top: 0;
}

.notes li p {
  margin: 0;
}

.notes b {
  color: var(--wool);
  font-weight: 600;
}

.tag {
  align-self: start;
  justify-self: start;
  margin-top: 3px;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.tag.new {
  color: var(--mint);
}

.tag.changed {
  color: #c8daf5;
}

.tag.fixed {
  color: #dfa454;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  margin-top: 16px;
}

@media (max-width: 520px) {
  .notes li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* The game's name in a heading that's otherwise capitals keeps its own: BAArrage, not BAARRAGE. */
.keep {
  text-transform: none;
  letter-spacing: 0.06em;
}

/* BAArrage's page shows the game (2026-10-21): the video beside the title, the screenshots, the pack. ------------- */

[hidden] {
  display: none !important;
}

.game-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
}

.game-hero video.play {
  width: min(300px, 78vw);
  aspect-ratio: 9 / 16;
  border: 1px solid rgba(109, 255, 176, 0.45);
  border-radius: 22px;
  background: var(--night-top);
  box-shadow: 0 0 48px rgba(109, 255, 176, 0.12);
}

@media (max-width: 760px) {
  .game-hero {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
  margin-top: 16px;
}

.gallery figure {
  margin: 0;
}

@media (max-width: 520px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.gallery img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(109, 255, 176, 0.35);
  border-radius: 14px;
}

.gallery figcaption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
}

.pack {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 24px 20px;
  margin: 16px 0 8px;
}

.wolf {
  margin: 0;
  text-align: center;
}

.wolf img {
  width: 120px;
  height: 120px;
}

.game-baarrage .wolf h3,
.game-baarrage .tile h3 {
  margin: 4px 0;
  font-size: 19px;
  letter-spacing: 0.04em;
}

.game-baarrage .wolf p {
  margin: 4px 0;
  font-size: 14px;
  line-height: 1.45;
}

.game-baarrage .wolf .tip {
  color: rgba(232, 226, 208, 0.7);
  font-style: italic;
}

/* The cards page (tools/make_site_pages.gd): a tile a card, the game's icon beside its words. */

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.chip {
  padding: 0.45em 1.1em;
  border: 1px solid rgba(109, 255, 176, 0.55);
  border-radius: 999px;
  background: transparent;
  color: var(--mint);
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.chip[aria-pressed="true"] {
  background: var(--mint);
  color: var(--night-top);
}

.search {
  width: min(360px, 100%);
  margin-top: 16px;
  padding: 0.6em 1em;
  border: 1px solid rgba(109, 255, 176, 0.35);
  border-radius: 999px;
  background: rgba(5, 4, 15, 0.7);
  color: var(--ui-text);
  font: inherit;
}

.cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.tile {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(109, 255, 176, 0.2);
  border-radius: 14px;
  background: rgba(5, 4, 15, 0.55);
}

.tile img {
  width: 64px;
  height: 64px;
}

.game-baarrage .tile p {
  margin: 4px 0;
  font-size: 15px;
  line-height: 1.45;
}

.game-baarrage .tile .kind {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.14em;
}

.game-baarrage .tile .details {
  font-size: 13px;
  color: rgba(232, 226, 208, 0.72);
}

.game-baarrage .tile .needs {
  font-style: italic;
}

/* Each tier's word in a colour of the game's own: steel, mint, a CHILL's blue, a MARK's violet. Gold is premium's. */
.game-baarrage .kind.cores { color: var(--wool); }
.game-baarrage .kind.common { color: #c8daf5; }
.game-baarrage .kind.uncommon { color: var(--mint); }
.game-baarrage .kind.rare { color: #56d8ff; }
.game-baarrage .kind.anomalies { color: #b98cff; }

/* ---- Gravity Panic's own pages (2026-10-24): its green neon grid, its mint orb and its diamonds' blue. ----------- */

body.game-gravitypanic {
  background:
    linear-gradient(var(--gp-grid) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--gp-grid) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--gp-bg);
  color: var(--gp-text);
}

/* Headings in the orb's mint, links in the diamonds' blue: what's worth chasing. */
.game-gravitypanic h2,
.game-gravitypanic .nav a[aria-current="page"] {
  color: var(--gp-mint);
}

.game-gravitypanic a {
  color: var(--gp-gem);
}

.game-gravitypanic .brand,
.game-gravitypanic .nav a,
.game-gravitypanic h1,
.game-gravitypanic h3 {
  color: var(--gp-text);
}

.game-gravitypanic .button {
  border-color: var(--gp-mint);
  color: var(--gp-mint);
}

.game-gravitypanic .drop-menu {
  background: var(--gp-bg);
  border-color: rgba(157, 255, 210, 0.35);
  box-shadow: none;
}

.game-gravitypanic .drop-menu a:hover {
  color: var(--gp-mint);
}

.game-gravitypanic footer {
  border-top-color: rgba(157, 255, 210, 0.18);
}

.game-gravitypanic footer .name {
  color: var(--gp-mint);
}

/* A Gravity Panic card: the game's panel, ringed in mint like its menu's world cards. */
.game-gravitypanic .card {
  text-align: left;
  border-color: rgba(157, 255, 210, 0.35);
  background: linear-gradient(180deg, rgba(18, 58, 48, 0.88), rgba(11, 35, 29, 0.92));
  box-shadow: none;
}

.game-gravitypanic .card p,
.game-gravitypanic .card li {
  max-width: none;
  margin-left: 0;
  color: var(--gp-text);
}

.game-gravitypanic .card h2 {
  margin-top: 32px;
}

.game-gravitypanic .card h2:first-child {
  margin-top: 0;
}

.game-gravitypanic .doc .summary {
  border-left-color: var(--gp-mint);
  background: rgba(18, 58, 48, 0.6);
}

.game-gravitypanic .gallery img {
  border-color: rgba(157, 255, 210, 0.35);
}

/* Its screenshots are landscape: two a row, one on a phone. */
.gallery.wide {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

@media (max-width: 520px) {
  .gallery.wide {
    grid-template-columns: 1fr;
  }
}

/* Its video is landscape, as the game is: under the title at the page's width, rather than beside it. */
.game-gravitypanic .game-hero {
  grid-template-columns: 1fr;
  justify-items: center;
}

.game-gravitypanic .game-hero video.play {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-color: rgba(157, 255, 210, 0.45);
  background: var(--gp-bg);
  box-shadow: 0 0 48px rgba(157, 255, 210, 0.12);
}

/* Meet the modes: BAArrage's pack (div.pack, figure.wolf), in the game's colours. */
.game-gravitypanic .wolf h3 {
  margin: 4px 0;
  font-size: 19px;
  letter-spacing: 0.04em;
}

.game-gravitypanic .wolf p,
.game-gravitypanic .skin p,
.game-gravitypanic .award p {
  margin: 4px 0;
  font-size: 14px;
  line-height: 1.45;
}

.game-gravitypanic .wolf .tip,
.game-gravitypanic .skin .tip {
  color: rgba(232, 255, 244, 0.7);
  font-style: italic;
}

/* The modes' and achievements' badges are round, each on its mode's ground: show the round. */
.game-gravitypanic .wolf img,
.award img {
  border-radius: 50%;
}

/* The skins: each orb and its trail as the shop draws it, its price in the diamonds' blue. Four a row, as the shop
   has them; two on a phone. */
.skins {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 16px;
  margin: 16px 0 8px;
}

@media (max-width: 520px) {
  .skins {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.skin {
  margin: 0;
  text-align: center;
}

.skin img {
  max-width: 100%;
  height: auto;
}

.game-gravitypanic .skin h3,
.game-gravitypanic .award h3 {
  margin: 0;
  font-size: 17px;
  letter-spacing: 0.04em;
}

.game-gravitypanic .skin .price {
  color: var(--gp-gem);
}

/* The achievements: each one's badge beside its name and goal. */
.awards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px 20px;
  margin: 16px 0 8px;
}

.award {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0;
}

.award img {
  width: 64px;
  height: 64px;
}

.game-gravitypanic .award p {
  margin: 2px 0 0;
}

/* ---- Tap Wars' own pages: the flesh and the artery, from Tap-game's core/art/palette.gd, in the game's own fonts
   (Baloo 2 for the titles, Nunito for the words, as the game has them; fonts/tapwars/, with their licences), and its
   cards as the game draws them: white, ink-outlined, on a solid ink drop. -------------------------------------------- */

@font-face {
  font-family: "Baloo 2";
  src: url("fonts/tapwars/Baloo2.ttf") format("truetype");
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("fonts/tapwars/Nunito.ttf") format("truetype");
  font-weight: 200 1000;
  font-display: swap;
}

body.game-tapwars {
  --tw-flesh: #f6c9d2;
  --tw-cell: #eeb3bf;
  --tw-wall: #9c2340;
  --tw-artery: #e0526c;
  --tw-ink: #3a1d33;
  --tw-card: #fffafb;
  --tw-accent: #b0315a;
  --tw-gold: #ffd166;
  --tw-muted: #7a4a66;
  color: var(--tw-ink);
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 600;
  background:
    radial-gradient(circle 46px at 9% 14%, var(--tw-cell) 98%, transparent),
    radial-gradient(circle 30px at 88% 9%, var(--tw-cell) 98%, transparent),
    radial-gradient(circle 54px at 94% 46%, var(--tw-cell) 98%, transparent),
    radial-gradient(circle 24px at 4% 62%, var(--tw-cell) 98%, transparent),
    radial-gradient(circle 38px at 70% 88%, var(--tw-cell) 98%, transparent),
    var(--tw-flesh);
  background-attachment: fixed;
}

.game-tapwars h1,
.game-tapwars h2,
.game-tapwars h3,
.game-tapwars .brand,
.game-tapwars .button {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.game-tapwars h1,
.game-tapwars h3,
.game-tapwars .brand,
.game-tapwars .nav a {
  color: var(--tw-ink);
}

.game-tapwars h2,
.game-tapwars .nav a[aria-current="page"] {
  color: var(--tw-accent);
}

.game-tapwars a {
  color: var(--tw-wall);
}

.game-tapwars .lede {
  font-size: 20px;
}

.game-tapwars .small {
  color: var(--tw-muted);
}

/* Its button is the game's big gold one. */
.game-tapwars .button {
  border: 4px solid var(--tw-ink);
  border-radius: 26px;
  background: var(--tw-gold);
  color: var(--tw-ink);
  box-shadow: 0 6px 0 var(--tw-ink);
  font-size: 17px;
  letter-spacing: 0.04em;
}

.game-tapwars span.button:hover {
  background: var(--tw-gold);
  box-shadow: 0 6px 0 var(--tw-ink);
}

.game-tapwars .icon {
  border: 4px solid var(--tw-ink);
  box-shadow: 0 6px 0 var(--tw-ink);
}

.game-tapwars .drop-menu {
  background: var(--tw-card);
  border: 3px solid var(--tw-ink);
  box-shadow: 0 5px 0 var(--tw-ink);
}

.game-tapwars .drop-menu a:hover {
  color: var(--tw-accent);
}

.game-tapwars footer {
  border-top-color: rgba(58, 29, 51, 0.18);
}

.game-tapwars footer .name {
  color: var(--tw-accent);
}

/* A Tap Wars card: the game's card. */
.game-tapwars .card {
  text-align: left;
  border: 4px solid var(--tw-ink);
  border-radius: 28px;
  background: var(--tw-card);
  box-shadow: 0 7px 0 var(--tw-ink);
}

.game-tapwars .card p,
.game-tapwars .card li {
  max-width: none;
  margin-left: 0;
  color: var(--tw-ink);
}

.game-tapwars .card h2 {
  margin-top: 32px;
}

.game-tapwars .card h2:first-child {
  margin-top: 0;
}

.game-tapwars .card h3.group {
  margin: 24px 0 0;
  color: var(--tw-accent);
  font-size: 22px;
}

.game-tapwars .doc .summary {
  border-left: 4px solid var(--tw-accent);
  border-radius: 0 16px 16px 0;
  background: var(--tw-card);
}

/* Its video and screenshots are portrait, as the game is: beside the title, two a row on a phone. */
.game-tapwars .game-hero video.play {
  border: 4px solid var(--tw-ink);
  background: var(--tw-flesh);
  box-shadow: 0 7px 0 var(--tw-ink);
}

.game-tapwars .gallery img {
  border: 3px solid var(--tw-ink);
  border-radius: 18px;
}

/* Meet the germs: BAArrage's pack (div.pack, figure.wolf), each germ in its art, the boss in its dark style. */
.game-tapwars .wolf img {
  width: 110px;
  height: 110px;
  object-fit: contain;
}

.game-tapwars .wolf h3 {
  margin: 4px 0 0;
  font-size: 21px;
}

.game-tapwars .wolf p,
.game-tapwars .skin p,
.game-tapwars .award p {
  margin: 4px 0;
  font-size: 15px;
  line-height: 1.45;
}

.game-tapwars .wolf .kind {
  color: var(--tw-muted);
  font-size: 14px;
}

.game-tapwars .wolf.boss {
  padding: 12px;
  border-radius: 20px;
  background: var(--tw-ink);
}

.game-tapwars .wolf.boss h3,
.game-tapwars .wolf.boss p {
  color: var(--tw-card);
}

.game-tapwars .wolf.boss .kind {
  color: #f2c7d5;
}

/* The looks: each as the game's LOOKS screen shows it; Gravity Panic's skins grid (div.skins, figure.skin). */
.game-tapwars .skin img {
  border-radius: 12px;
}

.game-tapwars .skin h3,
.game-tapwars .award h3 {
  margin: 0;
  font-size: 18px;
}

.game-tapwars .skin .price {
  color: var(--tw-accent);
}

.game-tapwars .skin .price.pack {
  color: #a8740a;
}

.game-tapwars .award p {
  margin: 2px 0 0;
}

/* Its words in the game's own case, as its title screen and buttons have them ("Tap Wars", "Play again"), not the
   studio's capitals: the title big and ink with the pink drop under it, as on the game's title screen. */
.game-tapwars h1,
.game-tapwars h2,
.game-tapwars .button,
.game-tapwars footer .name {
  text-transform: none;
}

.game-tapwars h1 {
  font-size: clamp(44px, 8vw, 72px);
  letter-spacing: 0.01em;
  text-shadow: 0 6px 0 #f38aa0;
}

.game-tapwars h2 {
  font-size: 26px;
  letter-spacing: 0.01em;
}

.game-tapwars .game-hero h2 {
  font-size: 18px;
}

.game-tapwars.doc h1,
.game-tapwars .doc h1 {
  font-size: clamp(34px, 6vw, 52px);
}

/* ---- The home page (the owner, 2026-10-24: a mix of the games, funny and attention drawing; the details on their
   own pages): the studio's hero with a jump to each game, then a band a game, each in its game's own colours (as its
   page has them), its video beside a headline and three funny true things, its characters bobbing. --------------- */

.home-hero {
  padding-bottom: 32px;
}

.home-hero .tagline {
  max-width: 600px;
  margin: 18px auto 0;
  color: #dcd6ee;
  font-size: 19px;
}

.picks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 14px;
  margin-top: 32px;
}

.picks a {
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.picks img {
  width: 76px;
  height: 76px;
  border-radius: 22%;
  box-shadow: 0 0 28px rgba(139, 92, 246, 0.4);
  transition: transform 0.2s ease;
}

.picks a:hover img,
.picks a:focus-visible img {
  transform: translateY(-5px) rotate(-4deg);
}

.band {
  position: relative;
  padding: 72px 0;
  overflow: hidden;
}

.band-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 16px;
}

/* The bands zigzag down the page: every second one (band-right) has its video right of its words. */
.band-right .band-inner {
  grid-template-columns: minmax(0, 1fr) auto;
}

.band-right .band-video {
  order: 2;
}

.band-video {
  display: block;
  border-radius: 22px;
  background: #000;
}

.band-video.tall {
  width: min(300px, 78vw);
  aspect-ratio: 9 / 16;
}

.band-video.wide {
  width: min(500px, 92vw);
  aspect-ratio: 16 / 9;
}

.band .kicker {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.band h2 {
  margin: 10px 0 14px;
  font-size: clamp(30px, 4.8vw, 46px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: none;
}

.band .pitch {
  margin: 0 0 24px;
  font-size: 19px;
}

.fun {
  display: grid;
  gap: 16px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.fun li {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  font-size: 17px;
  line-height: 1.45;
}

.fun img {
  justify-self: center;
  width: 76px;
  height: 76px;
  object-fit: contain;
}

.fun img.wide-pic {
  width: 76px;
  height: 38px;
}

/* The characters bob, each to its own beat. */
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(-5deg); }
}

.bob {
  animation: bob 2.6s ease-in-out infinite;
}

.bob.slow {
  animation-duration: 3.4s;
}

.bob.late {
  animation-delay: -1.3s;
}

@media (prefers-reduced-motion: reduce) {
  .bob {
    animation: none;
  }

  .picks a:hover img,
  .picks a:focus-visible img {
    transform: none;
  }
}

@media (max-width: 760px) {
  .band {
    padding: 56px 0;
  }

  .band-inner,
  .band-right .band-inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 32px;
  }

  .band-right .band-video {
    order: 0;
  }
}

/* Tap Wars' band: the flesh, the artery's ink and gold, the game's fonts (its page's). */
.band-tapwars {
  color: #3a1d33;
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 600;
  background:
    radial-gradient(circle 64px at 5% 16%, #eeb3bf 98%, transparent),
    radial-gradient(circle 40px at 93% 10%, #eeb3bf 98%, transparent),
    radial-gradient(circle 76px at 90% 88%, #eeb3bf 98%, transparent),
    radial-gradient(circle 28px at 46% 94%, #eeb3bf 98%, transparent),
    #f6c9d2;
}

.band-tapwars h2 {
  color: #3a1d33;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  text-shadow: 0 4px 0 #f38aa0;
}

.band-tapwars .kicker {
  color: #b0315a;
  font-weight: 800;
}

.band-tapwars b {
  color: #b0315a;
  font-weight: 800;
}

.band-tapwars .band-video {
  border: 4px solid #3a1d33;
  background: #f6c9d2;
  box-shadow: 0 7px 0 #3a1d33;
}

.band-tapwars .button {
  border: 4px solid #3a1d33;
  border-radius: 26px;
  background: #ffd166;
  color: #3a1d33;
  box-shadow: 0 6px 0 #3a1d33;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
}

.band-tapwars .button:hover {
  background: #ffdc85;
  box-shadow: 0 6px 0 #3a1d33;
}

/* Gravity Panic's band: its green neon grid, mint and the diamonds' blue (its page's). */
.band-gravitypanic {
  color: var(--gp-text);
  background:
    linear-gradient(var(--gp-grid) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--gp-grid) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--gp-bg);
}

.band-gravitypanic h2 {
  color: var(--gp-text);
}

.band-gravitypanic .kicker,
.band-gravitypanic b {
  color: var(--gp-mint);
}

.band-gravitypanic .band-video {
  border: 1px solid rgba(157, 255, 210, 0.45);
  background: var(--gp-bg);
  box-shadow: 0 0 48px rgba(157, 255, 210, 0.14);
}

.band-gravitypanic .fun img {
  border-radius: 50%;
}

.band-gravitypanic .fun img.wide-pic {
  border-radius: 0;
}

.band-gravitypanic .button {
  border-color: var(--gp-mint);
  color: var(--gp-mint);
}

/* BAArrage's band: the night sky the sheep climbs, wool and mint (its page's). */
.band-baarrage {
  color: var(--ui-text);
  background:
    radial-gradient(1.5px 1.5px at 14% 12%, #c8d4ff, transparent 60%),
    radial-gradient(1px 1px at 33% 25%, rgba(200, 212, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 71% 15%, rgba(200, 212, 255, 0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 37%, #c8d4ff, transparent 60%),
    radial-gradient(1px 1px at 56% 64%, rgba(200, 212, 255, 0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 8% 78%, #c8d4ff, transparent 60%),
    radial-gradient(1px 1px at 92% 86%, rgba(200, 212, 255, 0.6), transparent 60%),
    linear-gradient(180deg, var(--night-top), var(--night-bottom));
}

.band-baarrage h2 {
  color: var(--wool);
}

.band-baarrage .kicker,
.band-baarrage b {
  color: var(--mint);
}

.band-baarrage .band-video {
  border: 1px solid rgba(109, 255, 176, 0.45);
  background: var(--night-top);
  box-shadow: 0 0 48px rgba(109, 255, 176, 0.14);
}

.band-baarrage .button {
  border-color: var(--mint);
  color: var(--mint);
}

.home-more {
  padding: 56px 16px 8px;
  text-align: center;
}

.home-more p {
  margin: 0;
  color: #dcd6ee;
}

/* ---- Snake X 2048's and SWARMCORE's own pages (2026-10-25; their outboxes and full pages 2026-10-27). ----------- */

/* Snake X 2048: its board, cells and numbers (game/palette.gd), in its fonts, Baloo 2 for the numbers and titles and
   Nunito for the words, the same files as Tap Wars' (fonts/tapwars/). */
body.game-snake2048 {
  background:
    linear-gradient(var(--sx-cell) 2px, transparent 2px) 0 0 / 56px 56px,
    linear-gradient(90deg, var(--sx-cell) 2px, transparent 2px) 0 0 / 56px 56px,
    var(--sx-bg);
  color: var(--sx-text);
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 600;
}

.game-snake2048 h1,
.game-snake2048 h2,
.game-snake2048 h3,
.game-snake2048 .brand,
.game-snake2048 .button {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
}

.game-snake2048 h1,
.game-snake2048 h3,
.game-snake2048 .brand,
.game-snake2048 .nav a {
  color: var(--sx-text);
}

/* Headings in the 2's green, links in the 4's blue. */
.game-snake2048 h2,
.game-snake2048 .nav a[aria-current="page"],
.game-snake2048 footer .name {
  color: var(--sx-two);
}

.game-snake2048 a {
  color: var(--sx-four);
}

/* The line in the snake's own cream; the small print dim, as the game's is. */
.game-snake2048 .lede {
  color: var(--sx-skin);
}

.game-snake2048 .small {
  color: var(--sx-dim);
}

.game-snake2048 .button {
  border-color: var(--sx-two);
  color: var(--sx-two);
}

.game-snake2048 .drop-menu {
  background: var(--sx-board);
  border-color: var(--sx-cell);
  box-shadow: none;
}

.game-snake2048 .drop-menu a:hover {
  color: var(--sx-two);
}

.game-snake2048 footer {
  border-top-color: var(--sx-cell);
}

.game-snake2048 .card {
  text-align: left;
  border-color: var(--sx-cell);
  border-radius: 18px;
  background: var(--sx-board);
  box-shadow: none;
}

.game-snake2048 .card p,
.game-snake2048 .card li {
  max-width: none;
  margin-left: 0;
  color: var(--sx-text);
}

.game-snake2048 .doc .summary {
  border-left-color: var(--sx-two);
  background: var(--sx-board);
}

/* SWARMCORE: the dark of its arena, its icon's cyan glow, its accent's red and its DNA's teal (game/palette.gd), in
   Chakra Petch, the game's font and the studio's. */
body.game-swarmcore {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(34, 211, 238, 0.14), transparent 70%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(255, 77, 109, 0.1), transparent 70%),
    var(--sc-bg);
  color: var(--sc-text);
}

.game-swarmcore h1,
.game-swarmcore h3,
.game-swarmcore .brand,
.game-swarmcore .nav a {
  color: var(--sc-text);
}

.game-swarmcore h2,
.game-swarmcore .nav a[aria-current="page"],
.game-swarmcore footer .name {
  color: var(--sc-accent);
}

.game-swarmcore a {
  color: var(--sc-dna);
}

.game-swarmcore .small {
  color: var(--sc-muted);
}

.game-swarmcore .button {
  border-color: var(--sc-accent);
  color: var(--sc-accent);
}

.game-swarmcore .icon {
  box-shadow: 0 0 48px rgba(34, 211, 238, 0.25);
}

.game-swarmcore .drop-menu {
  background: var(--sc-bg);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.game-swarmcore .drop-menu a:hover {
  color: var(--sc-dna);
}

.game-swarmcore footer {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.game-swarmcore .card {
  text-align: left;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(9, 12, 22, 0.9);
  box-shadow: none;
}

.game-swarmcore .card p,
.game-swarmcore .card li {
  max-width: none;
  margin-left: 0;
  color: var(--sc-text);
}

.game-swarmcore .doc .summary {
  border-left-color: var(--sc-accent);
  background: rgba(9, 12, 22, 0.9);
}

/* Snake X 2048's page, in the other games' shape: its portrait video beside the title, the gallery, its ways to play,
   skins and achievements, each on the board's own panel. */
.game-snake2048 .game-hero video.play {
  border-color: var(--sx-cell);
  background: var(--sx-board);
  box-shadow: 0 0 48px rgba(74, 222, 128, 0.12);
}

.game-snake2048 .gallery img {
  border-color: var(--sx-cell);
}

.game-snake2048 .card h2 {
  margin-top: 32px;
}

.game-snake2048 .card h2:first-child {
  margin-top: 0;
}

/* Ways to play: each board part way in (300 × 383), its name, line and tip. */
.ways {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px 20px;
  margin: 16px 0 8px;
}

.way {
  margin: 0;
}

.way img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--sx-cell);
  border-radius: 14px;
}

.game-snake2048 .way h3,
.game-snake2048 .skin h3,
.game-snake2048 .award h3 {
  margin: 8px 0 2px;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.game-snake2048 .way p,
.game-snake2048 .skin p,
.game-snake2048 .award p {
  margin: 4px 0;
  font-size: 14px;
  line-height: 1.45;
}

.game-snake2048 .tip {
  color: var(--sx-dim);
  font-style: italic;
}

.game-snake2048 .skin .price {
  color: var(--sx-dim);
}

/* Its achievements' badges are square tiles, as Play Games shows them. */
.game-snake2048 .award img {
  border-radius: 14px;
}

/* SWARMCORE's page: its video is landscape, as the game is, under the title at the page's width (as Gravity Panic's);
   then the gallery, its eight stages, bosses, strains, organs, fusions and achievements. Its bodies are drawn on a
   clear background, lit as in play, for the page's dark. */
.game-swarmcore .game-hero {
  grid-template-columns: 1fr;
  justify-items: center;
}

.game-swarmcore .game-hero video.play {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-color: rgba(34, 211, 238, 0.35);
  background: var(--sc-bg);
  box-shadow: 0 0 48px rgba(34, 211, 238, 0.14);
}

.game-swarmcore .gallery img {
  border-color: rgba(255, 255, 255, 0.12);
}

.game-swarmcore .card h2 {
  margin-top: 32px;
}

.game-swarmcore .card h2:first-child {
  margin-top: 0;
}

.game-swarmcore .tip,
.game-swarmcore .small {
  color: var(--sc-muted);
}

.game-swarmcore .tip {
  font-style: italic;
}

/* The eight stages: each world (480 × 270), then its form beside its name, its line, its creatures and its boss. */
.stages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px 20px;
  margin: 16px 0 8px;
}

.stage {
  margin: 0;
}

.stage > img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
}

.stage figcaption {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 12px;
  margin-top: 10px;
}

.stage .form {
  grid-row: span 2;
  width: 64px;
  height: 64px;
}

.stage figcaption p:not(.where) {
  grid-column: 1 / -1;
}

.game-swarmcore .stage h3 {
  margin: 4px 0 0;
  font-size: 18px;
  letter-spacing: 0.04em;
}

.game-swarmcore .stage .where {
  margin: 0;
  color: var(--sc-dna);
  font-size: 14px;
}

.game-swarmcore .stage p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Bosses and strains: the pack's figures (div.pack, figure.wolf), the bodies on the page's dark. */
.game-swarmcore .wolf h3 {
  margin: 6px 0 2px;
  font-size: 17px;
  letter-spacing: 0.03em;
}

.game-swarmcore .wolf p {
  margin: 4px 0;
  font-size: 14px;
  line-height: 1.45;
}

/* Organs and fusions: each icon (as the codex draws it) beside its name, what it does, and at rank V or its parents. */
.game-swarmcore .organs .award {
  align-items: start;
}

.game-swarmcore .organs .award img {
  border-radius: 0;
}

.game-swarmcore .award h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.03em;
}

.game-swarmcore .award p {
  margin: 3px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

.game-swarmcore .kind {
  margin-left: 6px;
  color: var(--sc-dna);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The achievements: words only until their badges come with Google Play Games. Two columns, one on a phone. */
.achievements {
  columns: 2;
  column-gap: 28px;
  margin: 16px 0 8px;
  padding-left: 18px;
}

.achievements li {
  break-inside: avoid;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.45;
}

.achievements b {
  display: block;
  letter-spacing: 0.04em;
}

.game-swarmcore .achievements b {
  color: var(--sc-text);
}

.game-swarmcore .achievements i {
  color: var(--sc-dna);
}

@media (max-width: 560px) {
  .achievements {
    columns: 1;
  }
}

/* Snake X 2048's band: its board's grid and its numbers' green and blue, in its fonts (its page's). */
.band-snake2048 {
  color: var(--sx-text);
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 600;
  background:
    linear-gradient(var(--sx-cell) 2px, transparent 2px) 0 0 / 56px 56px,
    linear-gradient(90deg, var(--sx-cell) 2px, transparent 2px) 0 0 / 56px 56px,
    var(--sx-bg);
}

.band-snake2048 h2,
.band-snake2048 .button {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
}

.band-snake2048 h2 {
  color: var(--sx-skin);
}

.band-snake2048 .kicker,
.band-snake2048 b {
  color: var(--sx-two);
}

.band-snake2048 .band-video {
  border: 1px solid var(--sx-cell);
  background: var(--sx-board);
  box-shadow: 0 0 48px rgba(74, 222, 128, 0.12);
}

.band-snake2048 .button {
  border-color: var(--sx-two);
  color: var(--sx-two);
}

/* SWARMCORE's band: its arena's dark, its icon's cyan glow and its accent's red (its page's). */
.band-swarmcore {
  color: var(--sc-text);
  background:
    radial-gradient(ellipse 60% 70% at 85% 50%, rgba(34, 211, 238, 0.14), transparent 70%),
    radial-gradient(ellipse 40% 50% at 0% 100%, rgba(255, 77, 109, 0.1), transparent 70%),
    var(--sc-bg);
}

.band-swarmcore h2 {
  color: var(--sc-text);
}

.band-swarmcore .kicker,
.band-swarmcore b {
  color: var(--sc-accent);
}

.band-swarmcore .band-video {
  border: 1px solid rgba(34, 211, 238, 0.35);
  background: var(--sc-bg);
  box-shadow: 0 0 48px rgba(34, 211, 238, 0.14);
}

.band-swarmcore .button {
  border-color: var(--sc-accent);
  color: var(--sc-accent);
}

/* ---- Paper Rally's own pages (2026-10-27): a notebook page, from Rally on Paper's game/palette.gd. Cream squared
   paper, its squares light blue, a red margin line down the left; words in dark ink in handwriting (Patrick Hand,
   fonts/paperrally/, Nunito behind it for any letter it lacks), titles in Baloo 2; cards on the road's lighter cream,
   buttons as sticky notes; the four players red, blue, green and purple. --------------------------------------------- */

@font-face {
  font-family: "Patrick Hand";
  src: url("fonts/paperrally/PatrickHand.ttf") format("truetype");
  font-display: swap;
}

body.game-paperrally {
  color: var(--pr-ink);
  font-family: "Patrick Hand", "Nunito", system-ui, sans-serif;
  font-size: 19px;
  background:
    linear-gradient(90deg, transparent 39px, var(--pr-margin) 39px, var(--pr-margin) 41px, transparent 41px),
    linear-gradient(var(--pr-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--pr-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--pr-paper);
}

.game-paperrally h1,
.game-paperrally h2,
.game-paperrally h3,
.game-paperrally .brand,
.game-paperrally .button {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
}

.game-paperrally h1,
.game-paperrally h3,
.game-paperrally .brand,
.game-paperrally .nav a {
  color: var(--pr-ink);
}

/* PAPER in blue over RALLY in red, as the game's title: the page's name in blue, its sections in red. */
.game-paperrally h1 {
  color: var(--pr-blue);
}

.game-paperrally h2,
.game-paperrally .nav a[aria-current="page"],
.game-paperrally footer .name {
  color: var(--pr-red);
}

.game-paperrally a {
  color: var(--pr-blue);
}

.game-paperrally .lede,
.game-paperrally .small,
.game-paperrally .tip {
  color: var(--pr-dim);
}

.game-paperrally .lede {
  color: var(--pr-ink);
}

/* A button is a sticky note: the main one's yellow. */
.game-paperrally .button {
  border: 0;
  border-radius: 4px;
  background: var(--pr-primary);
  color: var(--pr-ink);
  box-shadow: 0 4px 0 rgba(51, 38, 13, 0.22);
}

.game-paperrally .drop-menu {
  background: var(--pr-card);
  border-color: var(--pr-card-edge);
  box-shadow: 0 4px 0 rgba(51, 38, 13, 0.18);
}

.game-paperrally .drop-menu a:hover {
  color: var(--pr-red);
}

.game-paperrally footer {
  border-top-color: var(--pr-card-edge);
}

.game-paperrally .card {
  text-align: left;
  border: 1px solid var(--pr-card-edge);
  border-radius: 6px;
  background: var(--pr-card);
  box-shadow: 0 4px 0 rgba(51, 38, 13, 0.14);
}

.game-paperrally .card p,
.game-paperrally .card li {
  max-width: none;
  margin-left: 0;
  color: var(--pr-ink);
}

.game-paperrally .card h2 {
  margin-top: 32px;
}

.game-paperrally .card h2:first-child {
  margin-top: 0;
}

.game-paperrally .doc .summary {
  border-left-color: var(--pr-red);
  background: var(--pr-note);
}

.game-paperrally .game-hero video.play {
  border: 1px solid var(--pr-card-edge);
  background: var(--pr-road);
  box-shadow: 0 4px 0 rgba(51, 38, 13, 0.18);
}

.game-paperrally .gallery img {
  border-color: var(--pr-card-edge);
}

.game-paperrally .card h3 {
  margin: 8px 0 2px;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.game-paperrally .card figcaption p {
  margin: 4px 0;
  font-size: 17px;
  line-height: 1.35;
}

/* How to play: the game's five steps, numbered. */
.game-paperrally ol.steps {
  padding-left: 22px;
}

.game-paperrally ol.steps li {
  margin-bottom: 8px;
}

/* Ways to play: a sticky note each, in the notes' colours, round the board. */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin: 16px 0 8px;
}

.sticky {
  margin: 0;
  padding: 14px 16px;
  border-radius: 4px;
  background: var(--pr-note);
  box-shadow: 0 4px 0 rgba(51, 38, 13, 0.18);
}

.sticky:nth-child(2) { background: #ffd6de; }
.sticky:nth-child(3) { background: #d3e8ff; }
.sticky:nth-child(4) { background: #d5f2c8; }
.sticky:nth-child(5) { background: #ece8dd; }

.game-paperrally .sticky h3 {
  margin-top: 0;
}

.sticky .soon {
  color: var(--pr-red);
  font-size: 15px;
}

/* The tracks: each whole page (200 × 350), its name and its line. */
.tracks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 22px 18px;
  margin: 16px 0 8px;
}

.track {
  margin: 0;
}

.track img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--pr-card-edge);
  border-radius: 4px;
}

/* What's on the page (128 px) and the pencils (375 × 212): a picture beside its words, as the achievements. */
.game-paperrally .award img {
  border-radius: 4px;
}

.pencils {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px 18px;
  margin: 16px 0 8px;
}

.pencil {
  margin: 0;
}

.pencil img {
  display: block;
  width: 100%;
  height: auto;
}

.pencil .stats {
  color: var(--pr-dim);
}

/* Paper Rally's band: its notebook page, its title's blue and red, its fonts (its page's). */
.band-paperrally {
  color: var(--pr-ink);
  font-family: "Patrick Hand", "Nunito", system-ui, sans-serif;
  background:
    linear-gradient(90deg, transparent 39px, var(--pr-margin) 39px, var(--pr-margin) 41px, transparent 41px),
    linear-gradient(var(--pr-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--pr-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--pr-paper);
}

.band-paperrally h2,
.band-paperrally .button {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
}

.band-paperrally h2 {
  color: var(--pr-blue);
}

.band-paperrally .kicker,
.band-paperrally b {
  color: var(--pr-red);
}

.band-paperrally .pitch,
.band-paperrally .fun li {
  font-size: 20px;
}

.band-paperrally .band-video {
  border: 1px solid var(--pr-card-edge);
  background: var(--pr-road);
  box-shadow: 0 4px 0 rgba(51, 38, 13, 0.18);
}

.band-paperrally .button {
  border: 0;
  border-radius: 4px;
  background: var(--pr-primary);
  color: var(--pr-ink);
  box-shadow: 0 4px 0 rgba(51, 38, 13, 0.22);
}

/* ---- TD Survivor's own pages (2026-10-29): its night-blue panels and board, the steppe's green, gold, and each
   element in its own colour (TD Survivor's core/art/palette.gd). The game's text is Godot's built-in Open Sans, which
   the site doesn't carry: the system's sans stands in. ----------------------------------------------------------- */

body.game-tdsurvivor {
  color: var(--td-text);
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 600;
  background:
    radial-gradient(circle 1.5px, var(--td-dot) 98%, transparent) 0 0 / 28px 28px,
    linear-gradient(180deg, var(--td-night), var(--td-board));
}

.game-tdsurvivor h1,
.game-tdsurvivor h3,
.game-tdsurvivor .brand,
.game-tdsurvivor .nav a {
  color: var(--td-text);
}

.game-tdsurvivor h2,
.game-tdsurvivor .nav a[aria-current="page"],
.game-tdsurvivor footer .name {
  color: var(--td-steppe);
}

.game-tdsurvivor a {
  color: var(--td-gold);
}

.game-tdsurvivor .small,
.game-tdsurvivor .tip {
  color: var(--td-muted);
}

.game-tdsurvivor .button {
  border-color: var(--td-gold);
  color: var(--td-gold);
}

.game-tdsurvivor .drop-menu {
  background: var(--td-panel);
  border-color: var(--td-edge);
  box-shadow: none;
}

.game-tdsurvivor .drop-menu a:hover {
  color: var(--td-gold);
}

.game-tdsurvivor footer {
  border-top-color: var(--td-edge);
}

.game-tdsurvivor .card {
  text-align: left;
  border-color: var(--td-edge);
  border-radius: 10px;
  background: var(--td-panel);
  box-shadow: none;
}

.game-tdsurvivor .card p,
.game-tdsurvivor .card li {
  max-width: none;
  margin-left: 0;
  color: var(--td-text);
}

.game-tdsurvivor .card h2 {
  margin-top: 32px;
}

.game-tdsurvivor .card h2:first-child {
  margin-top: 0;
}

.game-tdsurvivor .doc .summary {
  border-left-color: var(--td-steppe);
  background: var(--td-panel);
}

/* Its video is landscape, as the game is: under the title at the page's width. */
.game-tdsurvivor .game-hero {
  grid-template-columns: 1fr;
  justify-items: center;
}

.game-tdsurvivor .game-hero video.play {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-color: var(--td-edge);
  background: var(--td-steppe);
  box-shadow: 0 0 48px rgba(156, 199, 90, 0.14);
}

.game-tdsurvivor .gallery img {
  border-color: var(--td-edge);
}

/* The horde: the pack's figures (div.pack, figure.wolf), each rider going right. */
.game-tdsurvivor .wolf h3 {
  margin: 6px 0 2px;
  font-size: 17px;
}

.game-tdsurvivor .wolf p {
  margin: 4px 0;
  font-size: 14px;
  line-height: 1.45;
}

/* The fortress, growing: its three sizes side by side on the same ground. */
.fortress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0 8px;
  text-align: center;
}

.fortress figure {
  margin: 0;
}

.fortress img {
  width: 100%;
  height: auto;
}

.fortress figcaption {
  font-size: 14px;
  color: var(--td-muted);
}

/* The elements: each one's sign, its name in its colour, what it beats and what beats it. */
.game-tdsurvivor .award h3 {
  margin: 0;
  font-size: 17px;
}

.game-tdsurvivor .award p {
  margin: 3px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

.el-normal { color: #bdbdbd; }
.el-fire { color: #ff5533; }
.el-earth { color: #d9a441; }
.el-metal { color: #dfe6f0; }
.el-water { color: #3d8bff; }
.el-wood { color: #4cc35a; }
.el-divine { color: #ffe680; }

/* TD Survivor's band: the night-blue board, the steppe's green and gold (its page's). */
.band-tdsurvivor {
  color: var(--td-text);
  font-family: "Open Sans", system-ui, sans-serif;
  background:
    radial-gradient(circle 1.5px, var(--td-dot) 98%, transparent) 0 0 / 28px 28px,
    linear-gradient(180deg, var(--td-night), var(--td-board));
}

.band-tdsurvivor h2 {
  color: var(--td-text);
}

.band-tdsurvivor .kicker,
.band-tdsurvivor b {
  color: var(--td-steppe);
}

.band-tdsurvivor .band-video {
  border: 1px solid var(--td-edge);
  background: var(--td-steppe);
  box-shadow: 0 0 48px rgba(156, 199, 90, 0.14);
}

.band-tdsurvivor .button {
  border-color: var(--td-gold);
  color: var(--td-gold);
}