/* thousandfold.gg. Bright Guild (docs/art/antneeverse/bright-guild.md): storybook sky, warm ink line,
   chunky toy panels, leaning MMO frames, neon only for Fever. Colours are named after data/palette.yaml. */
@font-face {
  font-family: "Pixelify Sans";
  src: url("fonts/PixelifySans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #301C25;          /* ink */
  --plum: #45283C;         /* plum */
  --white: #FFFFFF;
  --cream: #FFF6E0;
  --cobalt: #5B6EE1;       /* cobalt */
  --sky: #639BFF;          /* blue */
  --sky-pale: #CBDBFC;     /* blue_pale */
  --gold: #FBF236;         /* yellow */
  --gold-deep: #E6BD07;    /* gold_deep */
  --pink: #FFA4A4;         /* pink */
  --leaf: #6ABE30;         /* grass_green */
  --forest: #37946E;       /* forest */
  --periwinkle: #8791FC;   /* periwinkle */
  --bronze: #8A6F30;       /* bronze */
  --red: #AC3232;          /* red */
  --night: #222034;        /* night */
  --indigo: #3F3F74;       /* indigo */
  --fire: #DF7126;         /* orange */
  --water: #5FCDE4;        /* cyan */
  --wind: #99E550;         /* lime */
  --light: #FBF236;        /* yellow */
  --dark: #CB5EFC;         /* violet */
  --neon-pink: #FF4FB8;    /* Fever only */
  --neon-lime: #C6FF3A;    /* Fever only */
  --display: "Pixelify Sans", "Courier New", monospace;
  /* One font everywhere (Anthony, 2026-10-22: "make sure that small typography has our font"). */
  --body: "Pixelify Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --line: 3px solid var(--ink);
  --edge: 0 6px 0 var(--ink);
  --outline: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink),
             2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { overflow-x: clip; }
body { margin: 0; background: var(--night); color: var(--ink); font: 18px/1.55 var(--body); font-synthesis: none; overflow-x: clip; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; line-height: 1; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
.wrap {
  max-width: 1120px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: 22px;
}
.big {
  font-size: clamp(44px, 9vw, 112px);
  color: var(--white);
  text-shadow: var(--outline), 0 8px 0 var(--ink);
  letter-spacing: .01em;
}
.sub { font-size: 19px; font-weight: 600; max-width: 640px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--display); font-size: 20px; text-decoration: none;
  color: var(--ink); background: var(--white);
  border: var(--line); padding: 12px 22px;
  box-shadow: var(--edge);
  transform: skewX(-8deg);
  transition: transform .08s, box-shadow .08s;
}
.btn-gold { background: var(--gold); }
.btn:hover { transform: skewX(-8deg) translateY(2px); box-shadow: 0 4px 0 var(--ink); }
.btn:active { transform: skewX(-8deg) translateY(6px); box-shadow: none; }
.btn-huge { font-size: clamp(24px, 4vw, 40px); padding: 18px 34px; align-self: flex-start; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  height: max(680px, 100svh);
  overflow: hidden;
  background: var(--sky);
}
.hero::after { content: ""; position: absolute; z-index: 1; inset: 36% 0 0; background: linear-gradient(to bottom, transparent, var(--sky-pale) 72%); pointer-events: none; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; touch-action: pan-y; }
.nav {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px;
  padding: max(14px, env(safe-area-inset-top, 0px)) 16px 0;
  font-family: var(--display); font-size: 19px;
}
.nav a { text-decoration: none; color: var(--white); text-shadow: var(--outline); padding: 4px 2px; }
.nav a:hover { color: var(--gold); }
.hero-copy {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(140px, 17vh, 180px);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 0 16px; text-align: center; pointer-events: none;
}
.hero-copy > * { pointer-events: auto; }
/* The pixel wordmark (assets/game/ui/logo-v1) at whole-number scales only. */
.logo img { display: block; width: 316px; height: auto; image-rendering: pixelated; }
@media (min-width: 680px) { .logo img { width: 632px; } }
@media (min-width: 1040px) { .logo img { width: 948px; } }
.logo.live { position: relative; }
.logo.live img { visibility: hidden; }
.title-live { position: absolute; height: auto; image-rendering: pixelated; pointer-events: none; }
.tagline { font-family: var(--display); font-size: clamp(26px, 5vw, 44px); color: var(--white); text-shadow: var(--outline), 0 5px 0 var(--ink); }
.hero-description { max-width: 48ch; font-family: var(--display); font-size: clamp(18px, 2vw, 23px); line-height: 1.4; color: var(--ink); text-shadow: 1px 0 var(--sky-pale), -1px 0 var(--sky-pale), 0 1px var(--sky-pale), 0 -1px var(--sky-pale); text-wrap: pretty; }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 4px; }
.hint {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 92px; margin: 0; padding: 0 16px; text-align: center;
  font-family: var(--display); font-size: 17px; color: var(--white); text-shadow: var(--outline);
  animation: blink 1.4s steps(2) infinite;
}
@keyframes blink { 50% { opacity: .35; } }
.no-webgl .hero { background: linear-gradient(var(--cobalt), var(--sky) 55%, var(--sky-pale)); }

/* ---------- banners ---------- */
/* Every section header: a tilted cloth banner with stitched hems, centred on the line between two
   sections so its tilted edges always sit over the section above. Anthony's slimes sit on top. */
.tape {
  --tape-size: clamp(30px, 5.2vw, 64px);
  position: relative; z-index: 3; white-space: nowrap;
  /* Clip the scrolling words at the sides only, so the critters on top still show and take the pointer. */
  clip-path: inset(-400px 0 -20px 0);
  margin: calc((var(--tape-size) + 50px) / -2) -3vw clamp(36px, 6vw, 64px);
  background: linear-gradient(rgb(255 255 255 / .28), transparent 38%, transparent 70%, rgb(0 0 0 / .12)), var(--tape, var(--gold));
  color: var(--tape-ink, var(--ink));
  border-block: 4px solid var(--ink); box-shadow: 0 8px 0 rgb(0 0 0 / .25);
  font-family: var(--display); font-weight: 700; line-height: 1; font-size: var(--tape-size); padding: 22px 0 20px;
}
/* The hems: a darker band with a running stitch, top and bottom. */
.tape::before, .tape::after {
  content: ""; position: absolute; left: 0; right: 0; height: 9px;
  background: color-mix(in srgb, var(--tape, var(--gold)) 70%, var(--ink));
}
.tape::before { top: 0; border-bottom: 2px dashed color-mix(in srgb, var(--cream) 80%, transparent); }
.tape::after { bottom: 0; border-top: 2px dashed color-mix(in srgb, var(--cream) 80%, transparent); }
.tape-l { transform: rotate(-1.6deg); }
.tape-r { transform: rotate(1.6deg); }
.tape-gold { --tape: var(--gold); }
.tape-pink { --tape: var(--pink); }
.tape-water { --tape: var(--water); }
.tape-ink { --tape: var(--ink); --tape-ink: var(--gold); }
.tape-ink::before, .tape-ink::after { background: var(--plum); }
.tape-track { display: inline-flex; animation: tape 40s linear infinite; }
.tape-r .tape-track { animation-direction: reverse; animation-duration: 46s; }
.tape-track span { padding-right: .4em; }
@keyframes tape { to { transform: translateX(-50%); } }
/* Slimes from Anthony's hand-made sprites (assets/source/sprites), sitting on a banner's top edge. */
.crit {
  --s: 3; position: absolute; z-index: 1; bottom: calc(100% - 3px); left: var(--x);
  width: calc(var(--w) * 1px * var(--s)); height: calc(var(--h) * 1px * var(--s));
  background: var(--img) no-repeat 0 0 / calc(var(--sw) * 1px * var(--s)) auto; image-rendering: pixelated;
  filter: drop-shadow(0 3px 0 rgb(0 0 0 / .25));
  animation: crit-hop var(--hop, 4.3s) ease-in-out infinite; animation-delay: var(--d, 0s);
}
.crit.pink { --img: url(img/critters/pinkslime.png); --w: 32; --h: 26; --sw: 96; animation: crit-hop 5.1s ease-in-out infinite var(--d, 0s), crit-2 .7s steps(2) infinite; }
/* Pointed at, the evil slime flares up (its aura frames) and talks, in the game's own text box. */
.crit.evil { pointer-events: auto; cursor: help; }
.crit.evil.talk { background-position-y: calc(-32px * var(--s)); animation: crit-aura .3s steps(2) infinite; }
@keyframes crit-aura { from { background-position-x: calc(-32px * var(--s)); } to { background-position-x: calc(-96px * var(--s)); } }
.bubble {
  position: absolute; right: 30%; bottom: calc(100% + 30px); display: none; width: max-content; max-width: min(320px, 70vw);
  padding: 10px 16px 12px; background: var(--white); color: var(--ink); border: 3px solid var(--ink);
  font: 700 20px/1.3 var(--display); white-space: pre-line; text-align: left;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% + 30px), 0 calc(100% + 30px), 0 3px);
}
.talk .bubble { display: block; animation: bubble-in .18s ease-out; }
/* The tail: a pixel wedge 7 game pixels wide that narrows to one, ink each side, white between. */
.bubble::before, .bubble::after { content: ""; position: absolute; top: 100%; right: 24px; clip-path: polygon(0 0, 100% 0, 85% 100%); }
.bubble::before { width: 27px; height: 27px; margin-top: 0; background: var(--ink); }
.bubble::after { width: 15px; height: 18px; right: 30px; margin-top: -3px; background: var(--white); }
@keyframes bubble-in { from { translate: 0 9px; } }
/* The hero's run, captured from the game (27 frames at 60 fps), crossing a banner's top edge. */
.runner {
  --s: 2; position: absolute; z-index: 1; bottom: calc(100% - 4px); left: 0; width: calc(36px * var(--s)); height: calc(43px * var(--s));
  background: url(img/critters/hero_run.png) no-repeat 0 0 / calc(972px * var(--s)) auto; image-rendering: pixelated;
  animation: run-cycle .45s steps(27) infinite, run-across 9s linear infinite;
}
@keyframes run-cycle { to { background-position-x: calc(-972px * var(--s)); } }
@keyframes run-across { from { translate: -120px 0; } 70%, to { translate: calc(106vw + 20px) 0; } }
@keyframes crit-hop { 0%, 84%, 100% { translate: 0 0; } 90% { translate: 0 -22px; } 95% { translate: 0 3px; } }
@keyframes crit-4 { to { background-position-x: calc(-128px * var(--s)); } }
@keyframes crit-2 { to { background-position-x: calc(-64px * var(--s)); } }
@media (max-width: 700px) { .crit { --s: 2; } .bubble { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .crit, .runner { animation: none !important; } .runner { display: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- sections ---------- */
:root {
  --stars:
    radial-gradient(var(--white) 1px, transparent 1.6px) 0 0 / 97px 89px,
    radial-gradient(var(--sky-pale) 1px, transparent 1.6px) 41px 23px / 151px 131px,
    radial-gradient(var(--gold) 1.2px, transparent 1.8px) 73px 61px / 233px 197px;
  --checker: repeating-conic-gradient(rgb(255 255 255 / .07) 0 25%, transparent 0 50%) 0 0 / 56px 56px;
  --dots: radial-gradient(rgb(255 255 255 / .14) 1.5px, transparent 2px) 0 0 / 22px 22px;
  --stripes: repeating-linear-gradient(-45deg, rgb(255 255 255 / .05) 0 18px, transparent 18px 36px);
}
main > section { position: relative; display: flow-root; padding-block: 0 clamp(72px, 12vw, 140px); }
.weapons { display: flex; }
.watch { background: var(--stars), radial-gradient(ellipse 70% 50% at 50% 60%, color-mix(in srgb, var(--cobalt) 45%, transparent), transparent 70%), linear-gradient(var(--night), var(--indigo)); color: var(--white); }
.screen {
  margin: 0; position: relative;
  border: 4px solid var(--ink); background: var(--ink);
  box-shadow: 10px 10px 0 var(--gold-deep), 10px 10px 0 4px var(--ink);
  transform: rotate(-1deg);
}
.screen video { display: block; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; }
.screen figcaption {
  position: absolute; left: -10px; bottom: -22px;
  background: var(--white); color: var(--ink); border: var(--line);
  font-weight: 700; font-size: 17px; padding: 6px 12px; transform: skewX(-8deg);
  max-width: calc(100% - 20px);
}

.slots { background: var(--checker), radial-gradient(circle at 12% 18%, rgb(255 255 255 / .35), transparent 22%), radial-gradient(circle at 88% 70%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 28%), linear-gradient(var(--cobalt), var(--sky) 40%, var(--sky-pale)); }
.slot-row { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 34px 28px; }
.slot {
  position: relative; background: var(--cream); border: var(--line); box-shadow: var(--edge);
  padding: 34px 22px 22px; transform: skewX(-5deg);
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.slot > * { transform: skewX(5deg); }
.slot h3 { font-size: 30px; }
.slot-tag {
  position: absolute; top: -18px; left: 16px;
  font-family: var(--display); font-size: 20px; text-transform: uppercase;
  border: var(--line); padding: 2px 14px; background: var(--white);
}
.intro .slot-tag { background: var(--water); }
.middle .slot-tag { background: var(--gold); }
.finisher .slot-tag { background: var(--pink); }
.warn {
  align-self: flex-start; margin-top: 10px;
  font-family: var(--display); font-size: clamp(20px, 3vw, 28px);
  background: var(--ink); color: var(--gold); padding: 10px 18px; transform: skewX(-8deg);
}

.weapons { background: var(--stars), var(--stripes), linear-gradient(var(--night), var(--plum) 140%); color: var(--white); display: flex; flex-direction: column; gap: clamp(40px, 7vw, 80px); }
.weapons .sub, .armory .sub { color: var(--sky-pale); }
.armory .sub { text-align: center; margin-inline: auto; }
.w-row {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center;
  background: linear-gradient(115deg, var(--a), var(--b));
  border-block: 4px solid var(--ink);
}
.w-row video {
  display: block; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}
.w-row.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.w-row.flip video { order: 2; clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); }
.w-copy {
  padding: 28px clamp(16px, 4vw, 48px);
  display: flex; flex-direction: column; gap: 10px; color: var(--ink); min-width: 0;
}
.w-copy img { width: 72px; height: 72px; image-rendering: pixelated; background: var(--night); border: var(--line); padding: 6px; }
.w-copy h3 { font-size: clamp(44px, 6.5vw, 84px); color: var(--white); text-shadow: var(--outline), 0 6px 0 var(--ink); }
.w-copy p:last-child { font-weight: 600; font-size: 18px; max-width: 420px; }
.kind { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 16px; }

.armory { --accent: var(--light); background: var(--stars), radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%), radial-gradient(ellipse at 50% 30%, var(--indigo), var(--night) 70%); transition: background .4s; color: var(--white); }
.arrow {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 54px; height: 54px; font-family: var(--display); font-size: 28px; cursor: pointer;
  color: var(--ink); background: var(--gold); border: var(--line); box-shadow: var(--edge);
}
.arrow:active { translate: 0 calc(-50% + 4px); box-shadow: 0 2px 0 var(--ink); }
.prev { left: 14px; }
.next { right: 14px; }

.foot { background: var(--ink); color: var(--cream); text-align: center; padding: 26px 16px 34px; font-size: 17px; }

/* ---------- the Grid ---------- */
.footnote { color: var(--sky-pale); opacity: .85; font-size: 16px; margin-top: 10px; }

/* ---------- dev log ---------- */
.devlog { background: radial-gradient(color-mix(in srgb, var(--sky) 35%, transparent) 1.5px, transparent 2px) 0 0 / 22px 22px, linear-gradient(var(--sky-pale), var(--cream)); }
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 22px; }
.post { background: var(--cream); border: var(--line); box-shadow: var(--edge); padding: 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.post time { font-family: var(--display); font-size: 16px; color: var(--plum); font-variant-numeric: tabular-nums; }
.post h3 { font-size: 28px; }

/* ---------- platforms and sign-up ---------- */
.get { background: var(--gold) repeating-linear-gradient(-45deg, transparent 0 28px, rgb(255 255 255 / .25) 28px 56px); }
.platforms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.platforms li { background: var(--ink); color: var(--white); padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; transform: skewX(-6deg); box-shadow: 0 6px 0 var(--plum); }
.platforms b { font-family: var(--display); font-size: 26px; color: var(--gold); }
.platforms span { font-size: 16px; font-weight: 600; }
.signup { display: flex; flex-direction: column; justify-content: center; gap: 12px; background: var(--cream); border: var(--line); box-shadow: 8px 8px 0 var(--ink); padding: clamp(20px, 3vw, 32px); transform: rotate(-1deg); }
.signup label { font-family: var(--display); font-size: clamp(26px, 3vw, 34px); line-height: 1.1; }
.signup-row { display: flex; flex-wrap: wrap; gap: 12px; }
.signup input[type=email] { flex: 1 1 240px; min-width: 0; font: 600 18px var(--body); padding: 12px 14px; border: var(--line); background: var(--white); color: var(--ink); }
.signup input[type=email]:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; }
.signup .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup-note { font-size: 16px; font-weight: 600; color: var(--plum); }
.signup-note.ok { color: var(--forest); }
.signup-note.err { color: var(--red); }
.foot-links { display: flex; justify-content: center; gap: 22px; margin-bottom: 8px; font-family: var(--display); }

/* ---------- combo HUD and hits ---------- */
.combo-hud {
  position: fixed; z-index: 20;
  top: max(14px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; grid-template-columns: auto auto; align-items: end; column-gap: 8px;
  font-family: var(--display); color: var(--gold); text-shadow: var(--outline), 0 4px 0 var(--ink);
  opacity: 0; translate: 0 -12px; transition: opacity .2s, translate .2s; pointer-events: none;
}
.combo-hud.live { opacity: 1; translate: 0 0; }
.combo-count { font-size: 64px; line-height: .9; font-variant-numeric: tabular-nums; }
.combo-label { font-size: 22px; color: var(--white); }
.combo-bar { grid-column: 1 / -1; height: 8px; margin-top: 6px; background: var(--ink); border: 2px solid var(--ink); }
.combo-bar i { display: block; height: 100%; background: var(--gold); transform-origin: left; }
.combo-hud.bump .combo-count { animation: bump .18s steps(3); }
@keyframes bump { 50% { transform: scale(1.35) rotate(-6deg); } }
.combo-hud.fever .combo-count { animation: fever .4s steps(2) infinite; }
.combo-hud.fever .combo-label { color: var(--neon-lime); }
.combo-hud.fever .combo-bar i { background: var(--neon-pink); }
@keyframes fever { 0% { color: var(--neon-pink); } 50% { color: var(--neon-lime); } }

.dmg {
  position: absolute; z-index: 30; pointer-events: none;
  font-family: var(--display); font-size: 34px; color: var(--white);
  text-shadow: var(--outline), 0 4px 0 var(--ink);
  translate: -50% -50%;
  animation: dmg .9s cubic-bezier(.2, .9, .3, 1) forwards;
}
.dmg.crit { font-size: 50px; color: var(--gold); }
.dmg.fever { color: var(--neon-lime); }
.dmg.crit.fever { color: var(--neon-pink); }
@keyframes dmg {
  0% { transform: scale(.4); }
  18% { transform: scale(1.25); }
  30% { transform: scale(1) translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--drift), -90px); opacity: 0; }
}
.spark {
  position: absolute; z-index: 29; pointer-events: none; width: 20px; height: 20px; translate: -50% -50%;
  border: 4px solid var(--white); outline: 3px solid var(--ink); transform: rotate(45deg);
  animation: spark .35s steps(4) forwards;
}
@keyframes spark { to { width: 110px; height: 110px; opacity: 0; } }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .w-row, .w-row.flip { grid-template-columns: minmax(0, 1fr); }
  .w-row video, .w-row.flip video { order: 0; clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); }
  .combo-count { font-size: 46px; }
  .combo-hud { top: max(84px, calc(env(safe-area-inset-top, 0px) + 70px)); }
  .arrow { width: 44px; height: 44px; top: 38%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tape-track, .hint, .combo-hud.fever .combo-count { animation: none; }
}

/* ---------- press kit ---------- */
.press-page { background: var(--sky-pale); }
.press-head { background: var(--sky); padding-block: 28px 56px; border-bottom: var(--line); }
.press-head .back { font-family: var(--display); color: var(--white); text-decoration: none; text-shadow: var(--outline); align-self: flex-start; }
.press-logo { width: 316px; height: auto; image-rendering: pixelated; }
@media (min-width: 680px) { .press-logo { width: 632px; } }
.press-page main > section { padding-block: clamp(48px, 8vw, 96px); }
.press-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 32px; align-items: start; }
.facts { margin: 0; background: var(--cream); border: var(--line); box-shadow: var(--edge); padding: 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; }
.facts dt { font-family: var(--display); color: var(--plum); }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.press-copy { display: flex; flex-direction: column; gap: 14px; }
.press-copy h2 { font-size: 32px; margin-top: 8px; }
.features { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.press-media { background: var(--cobalt); }
.shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.shots img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: var(--line); box-shadow: var(--edge); image-rendering: pixelated; }
.downloads { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.press-note { color: var(--white); font-weight: 600; }
@media (max-width: 760px) { .press-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- elements ---------- */
.elements { background: var(--dots), radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--fire) 30%, transparent), transparent 30%), radial-gradient(circle at 92% 15%, color-mix(in srgb, var(--water) 28%, transparent), transparent 30%), radial-gradient(circle at 15% 90%, color-mix(in srgb, var(--wind) 22%, transparent), transparent 30%), radial-gradient(circle at 85% 88%, color-mix(in srgb, var(--dark) 30%, transparent), transparent 32%), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--light) 14%, transparent), transparent 40%), var(--indigo); color: var(--cream); }
.elements .sub { color: var(--cream); }
.el-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.el-tile { position: relative; border: 4px solid var(--ink); background: var(--night); box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px var(--c); overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: transform .15s; }
.el-tile:hover { transform: translateY(-4px) rotate(-1deg); }
.el-tile video { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; image-rendering: pixelated; }
.el-tile h3 { position: absolute; left: 10px; top: 8px; font-size: 30px; color: var(--c); text-shadow: var(--outline), 0 4px 0 var(--ink); }
.el-set { flex: 1; margin: 0; background: var(--ink); color: var(--cream); font-size: 15px; font-weight: 700; padding: 8px 10px; border-top: 3px solid var(--c); }
@media (max-width: 900px) { .el-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); } }

/* ---------- the Grid: board beside the fight ---------- */
.grid-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px; align-items: start; }
.grid-duo figure { margin: 0; border: 4px solid var(--ink); box-shadow: 10px 10px 0 var(--gold-deep), 10px 10px 0 4px var(--ink); background: var(--night); display: flex; flex-direction: column; min-width: 0; }
.grid-duo figcaption { order: -1; font-family: var(--display); font-size: 18px; color: var(--gold); background: var(--ink); padding: 6px 12px; display: flex; justify-content: space-between; gap: 12px; }
.grid-now { color: var(--white); }
.grid-board-art { position: relative; }
.grid-board-art img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.grid-ring { position: absolute; width: 13%; aspect-ratio: 1; translate: -50% -50%; border: 4px solid var(--gold); border-radius: 50%; box-shadow: 0 0 0 3px var(--ink), 0 0 24px 6px rgb(251 242 54 / .55); opacity: 0; scale: .6; transition: left .12s, top .12s, opacity .12s, scale .12s; pointer-events: none; }
.grid-ring.on { opacity: 1; scale: 1; }
.grid-play video { display: block; width: 100%; aspect-ratio: 16 / 9; image-rendering: pixelated; }
.grid-chain { list-style: none; margin: 0; padding: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; background: var(--cream); counter-reset: none; }
.grid-chain li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 5px 8px; border: 2px solid transparent; font-size: 14px; transition: background .12s; }
.grid-chain .hitno { grid-row: span 2; font-family: var(--display); font-size: 22px; color: var(--plum); }
.grid-chain b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-chain .role { font-family: var(--display); font-size: 13px; text-transform: uppercase; color: var(--plum); }
.grid-chain li.main { box-shadow: inset 5px 0 0 var(--plum); }
.grid-chain li.flow { box-shadow: inset 5px 0 0 var(--periwinkle); }
.grid-chain li.strike { box-shadow: inset 5px 0 0 var(--bronze); }
.grid-chain li.on { background: var(--ink); color: var(--gold); transform: skewX(-6deg); }
.grid-chain li.on .hitno, .grid-chain li.on .role { color: var(--white); }
@media (max-width: 480px) { .grid-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .grid-duo { grid-template-columns: minmax(0, 1fr); } }

/* ---------- how elements work ---------- */

/* ---------- armory wheel ---------- */
/* Ten icons on a ring (js/armory.js). The top one shows as its 3D model in the medallion; the middle holds its clip. */
.aw {
  --r: min(36vw, 330px); --icon: 76px; --medal: min(30vw, 240px);
  position: relative; max-width: 1120px; margin: 28px auto 0;
  height: calc(var(--r) * 2 + var(--icon) + var(--medal) / 2 + 24px);
  touch-action: pan-y; user-select: none; outline: none;
}
.aw:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.aw::before {
  content: ""; position: absolute; left: 50%; top: calc(var(--medal) / 2 + 12px + var(--icon) / 2);
  width: calc(var(--r) * 2); height: calc(var(--r) * 2); translate: -50% 0; border-radius: 50%;
  border: 4px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  transition: border-color .3s;
}
.aw-ring { position: absolute; left: 50%; top: calc(var(--medal) / 2 + 12px + var(--icon) / 2 + var(--r)); width: 0; height: 0; margin: 0; padding: 0; list-style: none; cursor: grab; }
.aw-ring li {
  position: absolute; width: var(--icon); height: var(--icon); left: calc(var(--icon) / -2); top: calc(var(--icon) / -2);
  transform: rotate(calc(var(--a) + var(--spin, 0deg))) translateY(calc(var(--r) * -1)) rotate(calc((var(--a) + var(--spin, 0deg)) * -1));
  transition: opacity .2s;
}
.aw-ring li.on { opacity: 0; }
.aw-ring button {
  display: block; width: 100%; height: 100%; padding: 0; cursor: pointer;
  border: 4px solid var(--ink); border-radius: 50%; box-shadow: 0 5px 0 var(--ink), inset 0 0 0 3px var(--c);
  background: var(--night) url(img/weapon-icons.png) no-repeat;
  background-size: auto calc(var(--icon) - 20px);
  background-position: calc(var(--k, 0) * (var(--icon) - 20px) * -1 + 6px) 6px;
  image-rendering: pixelated; transition: transform .12s;
}
.aw-ring button:hover { transform: scale(1.12); }
.aw-medal {
  position: absolute; z-index: 2; left: 50%; top: 12px; width: var(--medal); height: var(--medal); translate: -50% 0;
  border-radius: 50%; overflow: hidden; border: 5px solid var(--ink);
  box-shadow: 0 0 0 5px var(--accent), 0 0 0 9px var(--ink), 0 12px 0 9px var(--ink), 0 0 60px 12px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: box-shadow .3s; pointer-events: none;
}
.aw-medal.pop { animation: pop .35s ease-out; }
@keyframes pop { 0% { scale: .85; } 60% { scale: 1.06; } 100% { scale: 1; } }
.aw-medal canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.aw-pointer { position: absolute; z-index: 3; left: 50%; top: -8px; translate: -50% 0; border: 16px solid transparent; border-top: 22px solid var(--gold); filter: drop-shadow(0 3px 0 var(--ink)); }
.aw-core {
  position: absolute; z-index: 1; left: 50%; top: calc(var(--medal) + 34px); translate: -50% 0;
  width: min(calc(var(--r) * 1.45), 440px); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  pointer-events: none;
}
.armory-kind { margin: 0; color: var(--sky-pale); font-weight: 700; }
.armory-name { font-size: clamp(30px, 4vw, 48px); color: var(--white); text-shadow: var(--outline), 0 5px 0 var(--ink); }
.armory-clip { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--night); border: 4px solid var(--ink); box-shadow: 0 0 0 3px var(--accent), 0 8px 0 3px var(--ink); image-rendering: pixelated; margin-top: 6px; }
.aw .arrow { z-index: 3; top: calc(var(--medal) / 2 + 12px + var(--icon) / 2 + var(--r)); }
.aw .prev { left: max(16px, calc(50% - var(--r) - var(--icon) - 70px)); }
.aw .next { right: max(16px, calc(50% - var(--r) - var(--icon) - 70px)); }
.armory-bio { max-width: 62ch; margin-top: 10px; text-align: center; color: var(--cream); font-weight: 600; min-height: 3em; }
@media (max-width: 700px) {
  /* The ring is too small to hold the clip on a phone, so the clip and name sit under it. */
  .aw { --r: 36vw; --icon: 48px; --medal: 40vw; height: auto; padding: calc(var(--medal) / 2 + 24px + var(--icon) + var(--r) * 2) 16px 0; }
  .aw-core { position: relative; left: auto; top: auto; translate: none; width: 100%; gap: 6px; }
  .armory-name { font-size: 30px; }
  .aw .arrow { width: 42px; height: 42px; font-size: 20px; top: calc(var(--medal) / 2 + 12px); }
  .aw .prev { left: 16px; }
  .aw .next { right: 16px; }
}

/* ---------- element mixes ---------- */
/* The game's element coins (img/element-coins.png: 13 px coins 16 px apart) at a whole-number scale. */
.coin { --s: 6; display: inline-flex; flex-direction: column; align-items: center; gap: 6px; animation: bob 2.4s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -0.4s); }
.coin i { width: calc(13px * var(--s)); height: calc(13px * var(--s)); background: url(img/element-coins.png) no-repeat; background-size: calc(512px * var(--s)) auto; background-position: calc(var(--i) * -16px * var(--s)) 0; image-rendering: pixelated; filter: drop-shadow(0 5px 0 var(--ink)); }
.coin b { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--white); text-shadow: var(--outline); }
.coin.big { --s: 9; }
.coin.big b { font-size: 24px; color: var(--gold); }
@keyframes bob { 50% { translate: 0 -8px; } }
.op { font-family: var(--display); font-size: clamp(40px, 5vw, 64px); color: var(--white); text-shadow: var(--outline), 0 5px 0 var(--ink); align-self: center; margin-bottom: 28px; }
.mix { margin-top: clamp(56px, 8vw, 96px); display: flex; flex-direction: column; gap: clamp(36px, 6vw, 64px); }
.mix-shout { margin: 0; text-align: center; font-family: var(--display); font-size: clamp(44px, 8vw, 96px); line-height: 1; color: var(--gold); text-shadow: var(--outline), 0 8px 0 var(--ink); transform: rotate(-2deg); }
.mix-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: clamp(24px, 4vw, 48px); }
.mix-row.flip { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.mix-row.flip .mix-eq { order: 2; flex-wrap: nowrap; }
.mix-row.flip .coin { --s: 5; } .mix-row.flip .coin.big { --s: 7; }
.mix-eq { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 6px clamp(8px, 1.4vw, 18px); }
.mix-eq .coin:nth-child(3) { --n: 1; } .mix-eq .coin:nth-child(5) { --n: 2; } .mix-eq .coin:nth-child(7) { --n: 3; }
.mix-show { margin: 0; position: relative; border: 4px solid var(--ink); background: var(--ink); box-shadow: 10px 10px 0 var(--gold-deep), 10px 10px 0 4px var(--ink); transform: rotate(1deg); }
.mix-row.flip .mix-show { transform: rotate(-1deg); box-shadow: -10px 10px 0 var(--dark), -10px 10px 0 4px var(--ink); }
.mix-show video { display: block; width: 100%; aspect-ratio: 16 / 9; }
.mix-show figcaption { position: absolute; left: 14px; bottom: -24px; display: flex; align-items: center; gap: 10px; background: var(--white); color: var(--ink); border: var(--line); padding: 4px 14px 4px 6px; transform: skewX(-8deg); }
.mix-show figcaption b { font-family: var(--display); font-size: 26px; font-weight: 400; }
.mix-show figcaption span:last-child { font-size: 16px; font-weight: 700; color: var(--plum); }
.mix-icon { width: 40px; height: 40px; background: url(img/weapon-icons.png) no-repeat; background-size: auto 40px; background-position: calc(var(--k) * -40px) 0; image-rendering: pixelated; }
@media (max-width: 800px) {
  .mix-row { grid-template-columns: minmax(0, 1fr); }
  .mix-row.flip .mix-eq { order: 0; }
  .mix-row.flip { grid-template-columns: minmax(0, 1fr); }
  .coin, .mix-row.flip .coin { --s: 4; } .coin.big, .mix-row.flip .coin.big { --s: 6; }
  .mix-row.flip .mix-eq { flex-wrap: wrap; } .coin b { font-size: 15px; } .coin.big b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .coin { animation: none; } }

/* Every element coin on three turning rings round Aether: bases, pairs, then triples and quads. */
.combos { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(16px, 4vw, 40px); }
.combos-shout { font-size: clamp(36px, 6.4vw, 80px); transform: rotate(2deg); }
.galaxy { --R: min(44vw, 300px); position: relative; width: 100%; height: calc(var(--R) * 2 + 80px); }
.galaxy::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--R) * 2.2); height: calc(var(--R) * 2.2); translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--light) 30%, transparent), color-mix(in srgb, var(--dark) 18%, transparent) 45%, transparent 70%); }
.orbit { --t: 60s; position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: spin var(--t) linear infinite; }
.orbit::before { content: ""; position: absolute; width: calc(var(--r) * 2); height: calc(var(--r) * 2); translate: -50% -50%; border-radius: 50%; border: 3px dashed rgb(255 255 255 / .22); }
.o1 { --r: calc(var(--R) * .36); --t: 26s; --s: 5; }
.o2 { --r: calc(var(--R) * .66); --t: 40s; --s: 4; animation-direction: reverse; }
.o3 { --r: calc(var(--R) * .96); --t: 70s; --s: 4; }
.gcoin { --s: 4; position: absolute; width: calc(13px * var(--s)); height: calc(13px * var(--s)); left: calc(13px * var(--s) / -2); top: calc(13px * var(--s) / -2);
  transform: rotate(var(--a, 0deg)) translateY(calc(var(--r, 0px) * -1)) rotate(calc(var(--a, 0deg) * -1)); }
.orbit .gcoin { --s: inherit; }
.gcoin i { display: block; width: 100%; height: 100%; background: url(img/element-coins.png) no-repeat; background-size: calc(512px * var(--s)) auto; background-position: calc(var(--i) * -16px * var(--s)) 0; image-rendering: pixelated; filter: drop-shadow(0 4px 0 var(--ink)); animation: spin var(--t, 60s) linear infinite reverse; }
.o2 .gcoin i { animation-direction: normal; }
.gcoin:hover i { scale: 1.3; }
.gcoin.core { --s: 9; left: calc(50% - 58.5px); top: calc(50% - 58.5px); transform: none; }
.gcoin.core i { animation: glow 2.4s ease-in-out infinite; }
@keyframes spin { to { rotate: 360deg; } }
@keyframes glow { 50% { scale: 1.1; filter: drop-shadow(0 4px 0 var(--ink)) drop-shadow(0 0 18px var(--gold)); } }
@media (max-width: 700px) {
  .galaxy { height: calc(var(--R) * 2 + 50px); }
  .o1 { --s: 3; } .o2 { --s: 3; } .o3 { --s: 2; }
  .gcoin.core { --s: 5; left: calc(50% - 32.5px); top: calc(50% - 32.5px); }
}
@media (prefers-reduced-motion: reduce) { .orbit, .gcoin i { animation: none; } }

/* ---------- climb the tower ---------- */
/* A window onto the sky with the middle of the game's run-map tower running down it (captured from
   MapStage3D). The tower drifts as the page scrolls, so scrolling reads as climbing. */
.climb { color: var(--ink); background: linear-gradient(var(--cobalt), var(--sky) 45%, var(--sky-pale)); }
.climb-sky { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
.climb-tower {
  --s: 2; --frames: 10; position: absolute; left: 50%; top: 50%; width: calc(321px * var(--s)); height: calc(1280px * var(--s));
  background: url(img/tower-turn.png) no-repeat 0 0 / calc(321px * var(--frames) * var(--s)) 100%; image-rendering: pixelated;
  background-position-x: calc(var(--f, 4) * -321px * var(--s));
  translate: -50% calc(-50% + var(--p, 0) * var(--travel, 0px));
}
.cloud {
  --s: 4; position: absolute; width: calc(64px * var(--s)); height: calc(26px * var(--s));
  background: url(img/clouds.png) no-repeat 0 0 / calc(192px * var(--s)) auto; image-rendering: pixelated;
  translate: 0 calc(var(--p, 0) * var(--v, 200px)); animation: drift var(--t, 70s) linear infinite alternate;
}
.cloud.c1 { left: 4%; top: 12%; --v: 160px; --t: 80s; }
.cloud.c2 { right: 6%; top: 34%; --v: 260px; background-position-x: calc(-64px * var(--s)); --t: 60s; }
.cloud.c3 { left: 12%; top: 66%; --v: 120px; --s: 3; background-position-x: calc(-128px * 3); --t: 90s; }
.cloud.c4 { right: 14%; top: 82%; --v: 300px; --s: 5; --t: 75s; z-index: 1; }
.cloud.c5 { left: 38%; top: 2%; --v: 340px; --s: 3; background-position-x: calc(-64px * 3); --t: 66s; }
@keyframes drift { to { transform: translateX(60px); } }
.climb-grid {
  position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 30vw, 440px) minmax(0, 1fr);
  align-items: start; gap: 0 24px;
}
.climb-forge { grid-column: 1; padding-top: 20px; }
.climb-rooms { grid-column: 3; }
.forge-shot { transform: rotate(-2deg); }
.forge-shot img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
/* The caption hangs under the shot, not over it. */
.forge-shot figcaption { left: -10px; bottom: auto; top: calc(100% + 10px); }
.stamp {
  display: inline-block; margin: 78px 0 0 -6px; padding: 12px 20px 14px; transform: rotate(-4deg);
  font: 700 clamp(26px, 3.4vw, 42px)/1.05 var(--display); text-transform: uppercase;
  background: var(--ink); color: var(--gold); border: 4px solid var(--gold); outline: 4px solid var(--ink);
  box-shadow: 0 10px 0 4px rgb(0 0 0 / .25);
}
.climb-note, .climb-lead {
  font: 700 20px/1.35 var(--display); background: var(--cream); border: var(--line); box-shadow: var(--edge);
  padding: 12px 16px; margin-top: 26px; max-width: 34ch;
}
.climb-lead { margin: 0 0 18px; font-size: clamp(22px, 2.4vw, 28px); background: var(--gold); }
.rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rooms li {
  position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 12px; align-items: center;
  background: var(--cream); border: var(--line); box-shadow: 0 5px 0 var(--ink); padding: 8px 14px 8px 8px;
  font-size: 17px; line-height: 1.25; transform: rotate(var(--r, .6deg));
}
.rooms li:nth-child(even) { --r: -.6deg; }
.rooms li::before {
  content: ""; grid-row: span 2; width: 48px; height: 48px;
  background: url(img/rooms.png) no-repeat calc(var(--k) * -48px) 0 / 432px 48px; image-rendering: pixelated;
}
.rooms b { font: 700 21px/1.1 var(--display); }
@media (max-width: 900px) {
  .climb-tower { --s: 1.5; opacity: .9; }
  .climb-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(160px, 40vw, 260px); }
  .climb-forge, .climb-rooms { grid-column: 1; }
  .climb-rooms { max-width: 520px; margin-inline: auto; }
  .climb-forge { text-align: center; }
  .climb-note { margin-inline: auto; text-align: left; }
  .forge-shot { max-width: 560px; margin-inline: auto; }
  /* Two signs to a row, so the tower still shows between them. */
  .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
  .rooms li { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; padding: 8px 6px 10px; font-size: 15px; }
  .rooms li::before { grid-row: auto; }
  .rooms b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .cloud { animation: none; } }

/* ---------- share tab ---------- */
/* Always at the bottom right; opens the social links in a stack above it. */
.share {
  position: fixed; z-index: 21; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.share-btn, .share-list a {
  display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; cursor: pointer;
  background: var(--gold); color: var(--ink); border: var(--line); box-shadow: 0 5px 0 var(--ink);
  font: 700 19px/1 var(--display); text-decoration: none; transform: skewX(-8deg);
}
.share-btn:hover, .share-list a:hover, .share.open .share-btn { background: var(--white); }
.share-btn svg, .share-list svg { width: 22px; height: 22px; fill: currentColor; }
.share-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.share-list[hidden] { display: none; }
.share-list a { width: 46px; justify-content: center; padding: 0; }
.share-list li { animation: share-in .16s ease-out backwards; }
.share-list li:nth-child(2) { animation-delay: .04s; }
.share-list li:nth-child(1) { animation-delay: .08s; }
@keyframes share-in { from { opacity: 0; translate: 0 10px; } }

/* ---------- element coins: armory sums and name tips ---------- */
/* A weapon's elements as a tiny coin sum ("Fire + Dark = Infernal"), in the space the chips took. */
.el-mix { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 40px; }
.armory-mix { justify-content: center; }
.armory-mix [data-el] { pointer-events: auto; }
.el-mix .coin { --s: 3; animation: none; }
.el-mix .coin i { filter: drop-shadow(0 3px 0 var(--ink)); }
/* The signs are drawn as pixel bars, not font glyphs, so they sit on the coins' middle in every browser.
   The coin's middle is above its box's middle by half its drop shadow. */
.el-mix .op {
  --t: 4px; position: relative; width: 16px; height: 16px; margin: 0 3px; font-size: 0; translate: 0 -1px;
  filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink));
}
.el-mix .op::before, .el-mix .op::after { content: ""; position: absolute; background: var(--white); }
.op-plus::before { left: 0; right: 0; top: calc(50% - var(--t) / 2); height: var(--t); }
.op-plus::after { top: 0; bottom: 0; left: calc(50% - var(--t) / 2); width: var(--t); }
.op-eq::before { left: 0; right: 0; top: 2px; height: var(--t); }
.op-eq::after { left: 0; right: 0; bottom: 2px; height: var(--t); }
/* The result is the weapon's element: bigger, glowing gold, and named. */
.el-mix .coin.big { --s: 4; margin-left: 2px; }
.el-mix .coin.big i { filter: drop-shadow(0 0 0 var(--gold)) drop-shadow(0 3px 0 var(--ink)); animation: el-glow 1.8s ease-in-out infinite; }
@keyframes el-glow { 50% { filter: drop-shadow(0 0 5px var(--gold)) drop-shadow(0 3px 0 var(--ink)); } }
.el-name { margin-left: 4px; font: 400 22px/1 var(--display); color: var(--gold); text-shadow: var(--outline), 0 3px 0 var(--ink); translate: 0 2px; }
@media (prefers-reduced-motion: reduce) { .el-mix .coin.big i { animation: none; } }
.el-tile h3 { display: flex; align-items: center; gap: 8px; }
.el-tile h3 .coin { --s: 2.5; animation: none; }
.el-tile h3 .coin i { filter: drop-shadow(0 3px 0 var(--ink)); }
[data-el] { cursor: help; }
.eltip {
  position: fixed; z-index: 30; left: 0; top: 0; pointer-events: none; opacity: 0;
  translate: -50% calc(-100% - 12px); padding: 4px 10px 5px; white-space: nowrap;
  background: var(--white); color: var(--ink); border: 3px solid var(--ink); border-radius: 10px;
  font: 700 17px/1 var(--display); box-shadow: 0 4px 0 rgb(0 0 0 / .25);
}
/* A little tail pointing down at the coin. */
.eltip::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; margin: -6px 0 0 -6px;
  background: var(--white); border: solid var(--ink); border-width: 0 3px 3px 0; rotate: 45deg;
}
.eltip.show { opacity: 1; animation: eltip-pop .22s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes eltip-pop { from { scale: .4; } }
/* The orbit rings must not catch the pointer, or the outer ring hides the inner coins' tips. */
.galaxy::before, .orbit, .orbit::before { pointer-events: none; }
.gcoin { pointer-events: auto; }
@media (max-width: 700px) { .el-mix .coin { --s: 2; } .el-mix .coin.big { --s: 3; } .el-mix .op { width: 12px; height: 12px; --t: 3px; } .el-name { font-size: 19px; } }


/* ---------- sign up and follow ---------- */
/* The email form beside four big buttons for the socials. */
.join { margin-top: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 44px); align-items: stretch; }
.follow { background: var(--ink); border: var(--line); box-shadow: 8px 8px 0 var(--plum); padding: clamp(18px, 2.6vw, 28px); transform: rotate(1deg); display: flex; flex-direction: column; gap: 14px; }
.follow h3 { margin: 0; font-size: clamp(26px, 3vw, 34px); color: var(--gold); text-shadow: 0 3px 0 var(--plum); }
.follow-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.follow-list a {
  --c: var(--gold); display: flex; align-items: center; gap: 14px; padding: 10px 16px; text-decoration: none;
  background: var(--c); color: var(--ink); border: 3px solid var(--cream); box-shadow: 0 5px 0 var(--plum);
  transform: skewX(-6deg); transition: translate .12s, box-shadow .12s;
}
.follow-list a > * { transform: skewX(6deg); }
.follow-list a:hover { translate: 0 -3px; box-shadow: 0 8px 0 var(--plum); }
.follow-list svg { flex: none; width: 34px; height: 34px; fill: currentColor; }
.follow-list span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.follow-list b { font: 400 21px/1.05 var(--display); }
.follow-list small { font-size: 15px; font-weight: 700; opacity: .8; }
.follow-tiktok { --c: var(--pink) !important; }
.follow-instagram { --c: var(--gold) !important; }
.follow-discord { --c: var(--periwinkle) !important; }
.follow-x { --c: var(--water) !important; }
@media (max-width: 860px) { .join { grid-template-columns: minmax(0, 1fr); } }

/* 2026-11 update: trailer sound, 1000-weapon wall, Combo of the Day strip, relic tiles, bigger stamp. */
.trailer .sound-btn {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; cursor: pointer;
  font: 700 18px/1 var(--display); color: var(--ink); background: var(--gold);
  border: var(--line); box-shadow: 0 5px 0 var(--ink); padding: 10px 16px; transform: skewX(-8deg);
}
.trailer .sound-btn:hover { transform: skewX(-8deg) translateY(2px); box-shadow: 0 3px 0 var(--ink); }
.trailer .sound-btn:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.sound-btn .sound-on, .sound-btn[aria-pressed="true"] .sound-off { display: none; }
.sound-btn[aria-pressed="true"] .sound-on { display: inline; }
.weapons > .wrap { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
.screen.thousand { transform: rotate(1deg); box-shadow: -10px 10px 0 var(--dark), -10px 10px 0 4px var(--ink); }
.cotd { display: flex; flex-direction: column; gap: 14px; }
.cotd-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.cotd-head b { font: 400 clamp(30px, 4vw, 44px)/1 var(--display); color: var(--gold); text-shadow: var(--outline), 0 5px 0 var(--ink); }
.cotd-head a { color: var(--sky-pale); font-weight: 700; font-size: 17px; }
.cotd-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cotd-list li { position: relative; border: 4px solid var(--ink); background: var(--ink); box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px var(--gold-deep); min-width: 0; }
.cotd-list li:nth-child(2) { transform: rotate(-1deg); }
.cotd-list video { display: block; width: 100%; aspect-ratio: 16 / 9; }
.cotd-list span { position: absolute; left: 8px; top: 6px; font: 400 24px/1 var(--display); color: var(--gold); text-shadow: var(--outline); }
@media (max-width: 760px) { .cotd-list { grid-template-columns: minmax(0, 1fr); } }
.grid-play figcaption span { color: var(--white); }
.el-set b { color: var(--c); }
.mix-row.solo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.forge-shot video { display: block; width: 100%; aspect-ratio: 16 / 9; }
.stamp { font-size: clamp(30px, 4.2vw, 54px); background: var(--red); color: var(--white); border-color: var(--gold); }