/* Spawner Sync — site styles.
 *
 * One dark world, on purpose: the brand, the art and Discord itself are dark, so the page
 * commits to it rather than offering a light theme that would be a different product.
 * Colour comes from the logo: the cage's gunmetal, the core's green, and bone white for
 * text, since the shop sells skeleton spawners. Premium is gold. No purple anywhere,
 * Discord's included. Type is Montserrat, served from this site like everything else.
 */

@font-face { font-family: 'Montserrat'; src: url('../assets/fonts/montserrat.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../assets/fonts/figtree.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  color-scheme: dark;

  /* Grounds, from the deepslate the hero island hangs from. */
  --ground: #0e1214;
  --ground-2: #111719;
  --panel: #151c1f;
  --panel-2: #1b2428;
  --panel-3: #222d32;
  --rule: rgba(214, 236, 226, 0.08);
  --rule-2: rgba(214, 236, 226, 0.14);

  /* The cage. */
  --steel: #5d6a72;
  --steel-hi: #9eabb3;

  /* The core. A colour picked in the Premium preview replaces these on the root (theme.js),
     so everything below reads the accent through them, washes through the channels. */
  --core: #3be081;
  --core-hi: #8dffc0;
  --core-deep: #178a4d;
  --core-ink: #03140b;
  --core-rgb: 59, 224, 129;
  --core-wash: rgba(var(--core-rgb), 0.1);

  /* Text: bone. */
  --bone: #ece7da;
  --bone-2: #b6bdb6;
  --bone-3: #838f8b;

  /* Signals. Kept apart from the accent: they mean something. */
  --ember: #f5b83d;
  --redstone: #ff5a4f;

  /* Discord, as drawn in the replicas. Blurple is not here: the house rule bans purple,
     so buttons Discord would draw blurple are drawn in its own grey. */
  --dc-chat: #313338;
  --dc-embed: #2b2d31;
  --dc-deep: #1e1f22;
  --dc-text: #dbdee1;
  --dc-head: #f2f3f5;
  --dc-muted: #949ba4;
  --dc-rule: #3f4147;
  --dc-grey: #4e5058;
  --dc-grey-hi: #6d6f78;
  --dc-green: #248046;
  --dc-green-hi: #1a6334;
  --dc-red: #da373c;
  --dc-link: #00a8fc;
  --dc-blurple: #5865f2;      /* Discord's own, where Discord uses it: primary buttons, the APP tag, mentions */
  --dc-blurple-hi: #4752c4;
  --dc-quote: #4e5058;

  --font-display: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Premium's gold, and its light and deep ends for the shine. */
  --gold: #f5b83d;
  --gold-hi: #ffe7a8;
  --gold-deep: #a67209;

  --step--2: 0.75rem;
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --step-3: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  --step-4: clamp(2.4rem, 1.3rem + 4.4vw, 4.9rem);

  --gutter: clamp(1rem, 0.4rem + 2.8vw, 3rem);
  --max: 1240px;
  --section: clamp(5rem, 3.5rem + 7vw, 10rem);
  --radius: 12px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }
a:not([class]) { color: var(--core); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:not([class]):hover { color: var(--core-hi); }

:focus-visible { outline: 2px solid var(--core); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); line-height: 1.05; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--core); color: var(--core-ink); padding: 0.6rem 1rem; border-radius: 8px;
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ------------------------------------------------------------------ type pieces */

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.75em;
  font: 700 0.75rem/1.2 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--core);
}
/* A spawner node: the square the sync line connects, lit. */
.eyebrow::before {
  content: ''; width: 9px; height: 9px; flex: none;
  background: var(--core); box-shadow: 0 0 0 3px rgba(var(--core-rgb), 0.14);
}

.h2 { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
.h3 { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.lede { font-size: var(--step-1); color: var(--bone-2); max-width: 36em; line-height: 1.6; }
.muted { color: var(--bone-3); }
.accent { color: var(--core); }

code, .cmd {
  font-family: var(--font-mono); font-size: 0.86em; font-weight: 500;
  background: rgba(214, 236, 226, 0.07); border: 1px solid var(--rule); color: var(--bone);
  padding: 0.12em 0.4em; border-radius: 5px; white-space: nowrap;
}

/* ------------------------------------------------------------------ buttons */

/* A block you press: a green face on a darker base that sinks when pushed. */
.btn {
  --face: var(--panel-3); --base: #0a0e10; --ink: var(--bone);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0.75rem 1.35rem; border: 0; border-radius: 10px;
  font: 700 1rem/1 var(--font-body); letter-spacing: -0.005em; color: var(--ink); text-decoration: none;
  background: var(--face); box-shadow: 0 4px 0 var(--base), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transform: translateY(0); transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out), background 0.2s;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--base), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--base), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.btn--primary { --face: var(--core); --base: var(--core-deep); --ink: var(--core-ink); }
.btn--primary:hover { --face: #52ea94; }
.btn--ghost { --face: rgba(214, 236, 226, 0.06); --base: rgba(0, 0, 0, 0.45); box-shadow: 0 4px 0 var(--base), inset 0 0 0 1px var(--rule-2); }
.btn--ghost:hover { box-shadow: 0 5px 0 var(--base), inset 0 0 0 1px rgba(214, 236, 226, 0.26); }
.btn svg { width: 20px; height: 20px; flex: none; }

/* ------------------------------------------------------------------ nav */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.is-solid {
  background: rgba(14, 18, 20, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--rule);
}
.nav__inner { display: flex; align-items: center; gap: 1.5rem; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--bone); flex: none; }
.brand img { width: 30px; height: 34px; }
.brand span { font: 800 1.125rem/1 var(--font-display); letter-spacing: -0.03em; }
.nav__links { display: flex; gap: 0.25rem; margin-left: auto; list-style: none; }
.nav__links a {
  display: block; padding: 0.55rem 0.8rem; border-radius: 8px;
  font-size: 0.9375rem; font-weight: 600; color: var(--bone-2); text-decoration: none;
  transition: color 0.2s, background 0.2s;
}
.nav__links a:hover { color: var(--bone); background: rgba(214, 236, 226, 0.06); }
.nav__links a[aria-current='page'] { color: var(--bone); background: rgba(214, 236, 226, 0.07); }
/* Premium's link is gold on every page, and catches the light when you point at it. */
.nav__links .nav__premium, .nav__links .nav__premium[aria-current='page'] {
  background: linear-gradient(100deg, var(--gold) 0 40%, var(--gold-hi) 50%, var(--gold) 60% 100%) 100% 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background-position 0.7s var(--ease-out);
}
.nav__links .nav__premium:hover, .nav__links .nav__premium:focus-visible { background-position: 0 0; color: transparent; }
.nav__links .nav__premium[aria-current='page'] { box-shadow: inset 0 -2px 0 rgba(245, 184, 61, 0.55); border-radius: 0; }
.nav__cta { min-height: 40px; padding: 0.55rem 1rem; font-size: 0.9375rem; white-space: nowrap; box-shadow: 0 3px 0 var(--base), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.nav__menu {
  display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--rule-2);
  background: rgba(214, 236, 226, 0.04); color: var(--bone); cursor: pointer; align-items: center; justify-content: center;
}
.nav__menu svg { width: 20px; height: 20px; }

@media (max-width: 1080px) {
  .nav__links {
    position: fixed; inset: calc(68px + env(safe-area-inset-top, 0px)) 0 auto 0; flex-direction: column; gap: 0;
    padding: 0.75rem var(--gutter) 1.25rem; margin: 0;
    background: rgba(14, 18, 20, 0.97); border-bottom: 1px solid var(--rule);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity 0.2s, transform 0.2s var(--ease-out), visibility 0.2s;
  }
  .nav.is-open .nav__links { opacity: 1; transform: none; visibility: visible; }
  .nav.is-open { background: rgba(14, 18, 20, 0.97); }
  .nav__links a { padding: 0.9rem 0.25rem; font-size: 1.0625rem; border-bottom: 1px solid var(--rule); border-radius: 0; }
  .nav__links a[aria-current='page'] { background: none; color: var(--core); }
  .nav__menu { display: inline-flex; margin-left: auto; }
  .nav__cta { margin-left: 0; }
}
@media (max-width: 480px) { .nav__inner { gap: 0.75rem; } .nav__cta { font-size: 0.875rem; padding-inline: 0.85rem; } .brand span { font-size: 1rem; } }

/* ------------------------------------------------------------------ hero */

.hero { position: relative; isolation: isolate; min-height: clamp(700px, 100svh, 960px); display: flex; flex-direction: column; }
.hero__stage { position: absolute; inset: 0; z-index: -1; }
.hero__canvas { width: 100%; height: 100%; }
/* The still, for when there is no WebGL: the logo art, where the island would stand. */
.hero__still {
  position: absolute; width: min(30vw, 420px); right: 6%; top: 50%; transform: translateY(-50%);
}
.hero.has-scene .hero__still { display: none; }

.hero__copy { position: relative; padding-top: calc(68px + env(safe-area-inset-top, 0px) + clamp(3rem, 9vh, 7rem)); padding-bottom: 3rem; pointer-events: none; }
.hero__copy > * { max-width: 36rem; pointer-events: auto; }
.hero h1 {
  margin-top: 1.3rem; font-size: var(--step-4); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02;
}
.hero h1 .accent { color: var(--core); }
.hero__canvas { touch-action: pan-y; }
.hero__canvas.is-over { cursor: pointer; }
/* A nudge to click the spawner, where it stands, gone after the first click. */
.hero__hint {
  position: absolute; left: var(--island-x, 72%); bottom: 7%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.8rem; border-radius: 999px; background: rgba(14, 18, 20, 0.7); border: 1px solid var(--rule-2);
  font-size: 0.8125rem; font-weight: 600; color: var(--bone-2); pointer-events: none; white-space: nowrap;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: hint-in 0.8s 2.2s var(--ease-out) both; transition: opacity 0.4s;
}
.hero.is-measured .hero__hint { top: var(--island-under); bottom: auto; }
.hero__hint span { width: 8px; height: 8px; background: var(--core); box-shadow: 0 0 0 3px rgba(var(--core-rgb), 0.2); animation: hint-dot 1.6s ease-in-out infinite; }
.hero__hint.is-gone { opacity: 0; }
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, 6px); } }
@keyframes hint-dot { 50% { box-shadow: 0 0 0 6px rgba(var(--core-rgb), 0.05); } }
.hero .lede { margin-top: 1.6rem; max-width: 31em; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 2rem; list-style: none; font-size: 0.9375rem; color: var(--bone-2); }
.hero__facts li { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__facts svg { width: 16px; height: 16px; flex: none; }


@media (max-width: 1023px) {
  .hero { min-height: 0; }
  .hero__stage { position: relative; inset: auto; order: 2; height: clamp(360px, 92vw, 560px); margin-top: -1rem; }
  .hero__copy { order: 1; padding-bottom: 0; }
  .hero__still { right: 50%; transform: translate(50%, -50%); width: min(60vw, 320px); }
  .hero__hint { left: 50%; bottom: 1rem; }
}

/* ------------------------------------------------------------------ sections */

.section { position: relative; padding-block: var(--section); }
.section__head { display: grid; gap: 1.25rem; }
.section__head--center { justify-items: center; text-align: center; }
.section__head--center .lede { margin-inline: auto; }
.nowrap { white-space: nowrap; }

/* The top of every page but the home page. */
.page-head { position: relative; padding: calc(68px + env(safe-area-inset-top, 0px) + clamp(3rem, 2rem + 5vw, 6rem)) 0 clamp(1rem, 0.5rem + 2vw, 2.5rem); overflow: hidden; }
.page-head::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 520px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 0%, rgba(var(--core-rgb), 0.1), transparent 70%);
}
.page-head__inner { display: grid; justify-items: center; text-align: center; gap: 1.1rem; }
.page-head__title { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; }
.page-head .lede { margin-inline: auto; max-width: 38em; }
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 0.9rem; }
.jump a {
  min-height: 36px; display: inline-flex; align-items: center; padding: 0 0.9rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--rule-2); background: rgba(214, 236, 226, 0.04); color: var(--bone-2); font-size: 0.875rem; font-weight: 600;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.jump a:hover { border-color: rgba(var(--core-rgb), 0.5); color: var(--core); background: var(--core-wash); }
.page-head--lost { min-height: 70svh; display: grid; align-items: center; }
.lost__art { width: 120px; height: auto; margin-bottom: 0.5rem; }
.lost__block { display: block; margin-top: 1.6rem; }
.lost__block .blocky--tiny { display: block; width: 46px; margin: 0 auto; }
.page .section:first-of-type { padding-top: clamp(3rem, 2rem + 4vw, 6rem); }
section[id], header[id] { scroll-margin-top: 80px; }

/* Two columns, copy and a picture, the picture on the right unless flipped. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.split--flip > :first-child { order: 2; }
.split__copy .lede { margin-top: 1.25rem; }
.split__copy .h2 { margin-top: 1.1rem; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split--flip > :first-child { order: 0; } }
.more-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.more {
  display: inline-flex; align-items: center; gap: 0.4em; color: var(--core); font-weight: 700; text-decoration: none;
}
.more::after { content: ''; width: 0.5em; height: 0.5em; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); transition: transform 0.2s var(--ease-out); }
.more:hover::after { transform: translateX(3px) rotate(45deg); }
.center-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.75rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.ticks { list-style: none; display: grid; gap: 0.7rem; margin-top: 1.6rem; }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 0.7rem; align-items: start; color: var(--bone-2); }
.ticks .px { width: 16px; height: 16px; margin-top: 0.3em; }

/* A Discord message on its own, as a picture on the page. */
.discord--card { width: 100%; max-width: 560px; justify-self: center; padding: 6px 0 14px; }
.discord--card .discord__log { height: auto; overflow: visible; padding: 0; }
.discord__caption { margin: 10px 16px 0; font-family: var(--font-body); font-size: 0.8125rem; color: var(--dc-muted); }

/* ------------------------------------------------------------------ home */

.home-board__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.home-board__copy .h2 { margin-top: 1.1rem; }
.home-board__copy .lede { margin-top: 1.25rem; }
@media (max-width: 900px) { .home-board__grid { grid-template-columns: 1fr; } }

.trade-steps { list-style: none; counter-reset: t; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(2.5rem, 2rem + 3vw, 4rem); }
.trade-steps__step {
  counter-increment: t; position: relative; display: grid; align-content: start; gap: 0.5rem;
  padding: 1.3rem 1.2rem 1.4rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--rule);
}
.trade-steps__step::before { content: counter(t); font: 800 2.2rem/1 var(--font-display); letter-spacing: -0.04em; color: var(--panel-3); position: absolute; right: 1rem; top: 0.9rem; }
.trade-steps__step:not(:last-child)::after {
  content: ''; position: absolute; right: -10px; top: 50%; width: 8px; height: 8px; border: solid var(--bone-3); border-width: 2px 2px 0 0;
  transform: translateY(-50%) rotate(45deg); opacity: 0.6;
}
.trade-steps__who { justify-self: start; padding: 0.2rem 0.55rem; border-radius: 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--core); background: var(--core-wash); }
.trade-steps__who--staff { color: var(--bone-2); background: rgba(214, 236, 226, 0.07); }
.trade-steps__step h3 { margin-top: 0.4rem; font-size: 1.0625rem; font-weight: 700; }
.trade-steps__step p { color: var(--bone-2); font-size: 0.9375rem; }
@media (max-width: 900px) {
  .trade-steps { grid-template-columns: 1fr 1fr; }
  .trade-steps__step:not(:last-child)::after { display: none; }
}
@media (max-width: 520px) { .trade-steps { grid-template-columns: 1fr; } }

.tiles { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.tile a {
  display: grid; align-content: start; gap: 0.5rem; height: 100%; padding: 1.4rem 1.3rem 1.5rem; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--rule); color: inherit; text-decoration: none;
  transition: border-color 0.25s, transform 0.25s var(--ease-out), background 0.25s;
}
.tile a:hover { border-color: rgba(var(--core-rgb), 0.4); transform: translateY(-2px); background: linear-gradient(var(--core-wash), var(--core-wash)), var(--panel); }
.tile h3 { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 1.0625rem; font-weight: 700; }
.tile h3::after { content: ''; width: 0.5em; height: 0.5em; border: solid var(--bone-3); border-width: 2px 2px 0 0; transform: rotate(45deg); transition: transform 0.25s var(--ease-out), border-color 0.25s; flex: none; }
.tile a:hover h3::after { transform: translateX(3px) rotate(45deg); border-color: var(--core); }
.tile__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 0.6rem; border-radius: 12px; background: var(--panel-3); border: 1px solid var(--rule-2); }
.tile__icon .px { width: 24px; height: 24px; }
.tile p { color: var(--bone-2); font-size: 0.9375rem; }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ features */

.stages { list-style: none; counter-reset: st; display: grid; gap: 0; }
.stages li {
  counter-increment: st; position: relative; display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.2rem 1rem;
  padding-bottom: 1.5rem;
}
.stages li::before {
  content: counter(st); grid-row: span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--rule-2); font: 800 1rem var(--font-display); color: var(--core);
}
.stages li::after { content: ''; position: absolute; left: calc(1.2rem - 1px); top: 2.6rem; bottom: 0.2rem; width: 2px; background: var(--rule-2); }
.stages li:last-child::after { display: none; }
.stages b { font-size: 1.0625rem; align-self: end; }
.stages span { color: var(--bone-2); font-size: 0.9375rem; }
.feat-tickets .board__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .feat-tickets .board__facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feat-tickets .board__facts { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ the price board */

.board { padding-top: clamp(3rem, 2rem + 4vw, 6rem); }
.board__stage { display: flex; justify-content: center; margin-top: clamp(2.5rem, 2rem + 3vw, 4rem); }
.board__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
}
.board__facts > div { padding-top: 1.25rem; border-top: 1px solid var(--rule-2); }
.board__facts h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.board__facts p { margin-top: 0.6rem; color: var(--bone-2); font-size: 1rem; }
@media (max-width: 820px) { .board__facts { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ the trading desk */

.desk__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; }
.desk__head .lede { max-width: 34em; }
@media (max-width: 900px) { .desk__head { grid-template-columns: 1fr; } }
.desk__stage {
  display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: clamp(1rem, 0.5rem + 2vw, 2rem);
  align-items: start; margin-top: clamp(2.5rem, 2rem + 3vw, 4rem);
}
.desk__stage .discord { width: 100%; max-width: none; }
.desk__panel { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); display: grid; gap: 1.4rem; }
.desk__group { display: grid; gap: 0.5rem; }
.desk__label { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.09em; font-size: 0.75rem; text-transform: uppercase; color: var(--bone-3); }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--rule); }
.seg button {
  min-height: 42px; padding: 0.4rem 0.6rem; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--bone-2); font: 600 0.9375rem/1.1 var(--font-body);
  display: grid; justify-items: center; gap: 1px; transition: background 0.2s, color 0.2s;
}
.seg button small { font-size: 0.6875rem; font-weight: 500; color: var(--bone-3); }
.seg button:hover { color: var(--bone); background: rgba(214, 236, 226, 0.05); }
.seg button[aria-pressed='true'] { background: var(--panel-3); color: var(--bone); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 0 rgba(0, 0, 0, 0.4); }
.seg button[aria-pressed='true'] small { color: var(--core); }
.desk__next { padding: 1rem 1.1rem; border-radius: 12px; background: linear-gradient(var(--core-wash), var(--core-wash)), var(--panel); border: 1px solid rgba(var(--core-rgb), 0.25); }
.desk__next-who { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.09em; font-size: 0.75rem; text-transform: uppercase; color: var(--core); }
.desk__next-what { margin-top: 0.35rem; font-size: 0.9375rem; line-height: 1.45; color: var(--bone); }
.desk__switch {
  margin-top: 0.8rem; min-height: 36px; padding: 0.4rem 0.8rem; border-radius: 8px; border: 1px solid rgba(var(--core-rgb), 0.45);
  background: transparent; color: var(--core); font: 600 0.875rem var(--font-body); cursor: pointer;
}
.desk__switch:hover { background: var(--core-wash); }
.desk__stages { list-style: none; display: grid; gap: 0; position: relative; }
.desk__stages li { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 0.7rem; padding: 0.45rem 0; color: var(--bone-3); font-size: 0.9375rem; }
.desk__stages li::before { content: ''; position: absolute; left: 10px; top: 1.45rem; bottom: -0.45rem; width: 2px; background: var(--rule-2); }
.desk__stages li:last-child::before { display: none; }
.desk__stages li.is-done::before { background: var(--core-deep); }
.desk__dot { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--rule-2); background: var(--ground); position: relative; z-index: 1; }
.desk__stages li.is-done .desk__dot { background: var(--core-deep); border-color: var(--core-deep); }
.desk__stages li.is-done .desk__dot::after { content: ''; position: absolute; inset: 4px 5px 6px; border: solid var(--ground); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
.desk__stages li.is-now { color: var(--bone); }
.desk__stages li.is-now .desk__dot { border-color: var(--core); box-shadow: 0 0 0 4px rgba(var(--core-rgb), 0.15); }
.desk__stages b { display: block; font-weight: 700; }
.desk__stages small { display: block; font-size: 0.8125rem; color: var(--bone-2); }
@media (max-width: 900px) {
  .desk__stage { grid-template-columns: 1fr; }
  .desk__panel { position: static; grid-template-columns: 1fr 1fr; }
  .desk__next, .desk__stages { grid-column: 1 / -1; }
  .desk__stages { display: flex; gap: 0.4rem; overflow-x: auto; }
  .desk__stages li { grid-template-columns: 18px auto; padding: 0; font-size: 0.8125rem; }
  .desk__stages li::before, .desk__stages small { display: none; }
  .desk__dot { width: 18px; height: 18px; }
}
@media (max-width: 520px) { .desk__panel { grid-template-columns: 1fr; } }

.discord__log--tall { height: clamp(560px, 86vh, 860px); }
.desk__jump {
  position: absolute; left: 50%; top: 60px; z-index: 2; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--dc-blurple); color: #fff; font: 600 0.8125rem var(--dc-font); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.desk__jump::before { content: '↑'; }
.desk__jump[data-dir='down'] { top: auto; bottom: 86px; }
.desk__jump[data-dir='down']::before { content: '↓'; }
.discord__hash { font-size: 1.5rem; line-height: 1; color: #80848e; font-weight: 500; }
.discord__topic {
  min-width: 0; padding-left: 12px; margin-left: 4px; border-left: 1px solid #3f4147;
  font-size: 0.875rem; color: var(--dc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.discord--channel .discord__tools { flex: none; }
.discord__compose--quiet { padding-bottom: 16px; }
.discord__compose--quiet .discord__input { pointer-events: none; }
@media (max-width: 640px) { .discord__topic { display: none; } }
.dc-msg--pinned { background: rgba(240, 178, 50, 0.04); }
.dc-msg--pinned:hover { background: rgba(240, 178, 50, 0.07); }

/* ------------------------------------------------------------------ Discord replica
 * Measured against Discord's own dark theme: the same greys, the same type sizes and line
 * heights, the same embed box. Discord's typeface, gg sans, is its own and not licensed for
 * other sites, so it is asked for first and Figtree, the nearest open face, stands in. */

.discord, .dc {
  --dc-font: 'gg sans', 'Figtree', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-family: var(--dc-font); font-size: 1rem; line-height: 1.375; color: var(--dc-text);
  font-feature-settings: normal; text-align: left;
}
.discord {
  width: min(100%, 620px); margin: 0; overflow: hidden;
  background: var(--dc-chat); border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 24px 48px -16px rgba(0, 0, 0, 0.65);
}
.discord__bar {
  display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px 0 16px;
  box-shadow: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05);
  position: relative; z-index: 1;
}
.discord__at { font-size: 1.5rem; font-weight: 500; color: #80848e; line-height: 1; margin-right: -2px; }
.discord__who { width: 24px; height: 24px; border-radius: 50%; background: #111618; padding: 2px; object-fit: contain; }
.discord__title { font-weight: 600; color: var(--dc-head); }
/* Says plainly that the window is a demo that talks to nothing, in a badge the way Discord draws one. */
.discord__demo {
  flex: none; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: var(--dc-grey);
  font: 600 0.75rem/1.25rem var(--dc-font); color: #fff; white-space: nowrap;
}
.discord__tools { display: flex; align-items: center; gap: 16px; margin-left: auto; color: #b5bac1; }
.discord__tools svg { width: 22px; height: 22px; fill: currentColor; }
.discord__search {
  width: 144px; height: 24px; padding: 0 8px; border-radius: 4px; background: var(--dc-deep);
  font-size: 0.875rem; line-height: 24px; color: var(--dc-muted);
}
@media (max-width: 560px) { .discord__tools svg:nth-child(n+3), .discord__search { display: none; } }

.discord__log { padding: 8px 0 20px; }
.discord__day {
  display: flex; align-items: center; gap: 8px; margin: 12px 16px 0; font-size: 0.75rem; font-weight: 600; line-height: 13px; color: var(--dc-muted);
}
.discord__day::before, .discord__day::after { content: ''; flex: 1; height: 1px; background: var(--dc-rule); }

.discord__input {
  display: flex; align-items: center; gap: 16px; margin: 0 16px; min-height: 44px; padding: 0 16px;
  background: #383a40; border-radius: 8px; color: #b5bac1;
}
.discord__plus { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #b5bac1; color: #383a40; flex: none; }
.discord__plus svg { width: 16px; height: 16px; fill: currentColor; }
.discord__placeholder { flex: 1; min-width: 0; color: #6d6f78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.discord__input-tools { display: flex; gap: 16px; }
.discord__input-tools svg { width: 24px; height: 24px; fill: currentColor; }
@media (max-width: 420px) { .discord__input-tools svg:not(:last-child) { display: none; } }

/* The working DM: a scrolling log, a composer, and the bits Discord draws around them. */
.discord { position: relative; }
.discord__log {
  height: clamp(440px, 64vh, 640px); overflow-y: auto; overscroll-behavior: contain; scroll-behavior: auto;
  scrollbar-width: thin; scrollbar-color: #1a1b1e transparent;
}
.discord__log::-webkit-scrollbar { width: 8px; }
.discord__log::-webkit-scrollbar-thumb { background: #1a1b1e; border-radius: 4px; }
.discord__log:focus-visible { outline-offset: -2px; }
.discord__note {
  margin: 14px 16px 4px 72px; padding: 8px 12px; border-radius: 6px;
  font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.45; color: var(--bone-2);
  background: rgba(var(--core-rgb), 0.07); border: 1px dashed rgba(var(--core-rgb), 0.28);
}
.discord__compose { position: relative; padding-bottom: 24px; }
.discord__field {
  flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; background: transparent; outline: none;
  font: 400 1rem/1.375 var(--dc-font); color: var(--dc-text);
}
.discord__field::placeholder { color: #6d6f78; }
.discord__input:focus-within { box-shadow: 0 0 0 2px rgba(var(--core-rgb), 0.35); }
@media (max-width: 480px) { .discord__note { margin-left: 16px; } }

.dc-typing {
  position: absolute; left: 16px; bottom: 2px; display: flex; align-items: center; gap: 6px;
  font-size: 0.75rem; line-height: 20px; color: var(--dc-text);
}
.dc-typing strong { font-weight: 700; }
.dc-typing__dots { display: inline-flex; gap: 3px; }
.dc-typing__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--dc-text); animation: dc-dot 1.2s infinite ease-in-out; }
.dc-typing__dots i:nth-child(2) { animation-delay: 0.15s; }
.dc-typing__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dc-dot { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

.dc-suggest {
  position: absolute; left: 16px; right: 16px; bottom: calc(100% - 12px); z-index: 3; max-height: 320px; overflow-y: auto;
  padding: 8px 0; border-radius: 8px; background: #2b2d31;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.35);
}
.dc-suggest__head { padding: 4px 12px 8px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--dc-muted); }
.dc-suggest__head strong { color: var(--dc-head); text-transform: none; }
.dc-suggest__item {
  display: grid; grid-template-columns: 20px auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  margin: 0 8px; padding: 8px; border-radius: 4px; cursor: pointer;
}
.dc-suggest__item img { width: 20px; height: 20px; border-radius: 50%; background: #111618; }
.dc-suggest__item.is-on, .dc-suggest__item:hover { background: #404249; }
.dc-suggest__name { font-weight: 600; color: var(--dc-head); white-space: nowrap; }
.dc-suggest__name em { font-style: normal; font-weight: 500; font-size: 0.8125rem; color: var(--dc-muted); margin-left: 4px; }
.dc-suggest__opt { grid-column: 1 / 3; padding: 2px 8px; border-radius: 4px; background: #1e1f22; font-size: 0.875rem; font-weight: 600; color: var(--dc-head); }
.dc-suggest__desc { min-width: 0; font-size: 0.875rem; color: var(--dc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-suggest__app { font-size: 0.75rem; color: var(--dc-muted); }
.dc-suggest__foot { margin: 6px 12px 0; padding-top: 8px; border-top: 1px solid var(--dc-rule); font-size: 0.75rem; color: var(--dc-muted); }
@media (max-width: 560px) { .dc-suggest__app { display: none; } .dc-suggest__item { grid-template-columns: 20px auto minmax(0, 1fr); } }

.dc-layer { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.7); }
.dc-modal { width: min(100%, 440px); border-radius: 8px; overflow: hidden; background: var(--dc-chat); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
.dc-modal__body { display: grid; gap: 20px; padding: 16px; }
.dc-modal__title { font-family: var(--dc-font); font-size: 1.25rem; font-weight: 600; color: var(--dc-head); line-height: 1.2; }
.dc-modal__field { display: grid; gap: 8px; }
.dc-modal__field span { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #b5bac1; }
.dc-modal__field b { color: var(--dc-red); margin-left: 4px; }
.dc-modal__field input {
  height: 40px; padding: 0 10px; border: 0; border-radius: 3px; background: var(--dc-deep);
  font: 400 1rem var(--dc-font); color: var(--dc-text); outline: none;
}
.dc-modal__field input:focus { box-shadow: 0 0 0 2px rgba(var(--core-rgb), 0.45); }
.dc-modal__foot { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 16px; background: var(--dc-embed); }
.dc-modal__foot .dc-btn { min-height: 38px; padding-inline: 24px; }

.dc-link-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--dc-link); cursor: pointer; }
.dc-link-btn:hover { text-decoration: underline; }
.dc-modal__foot .dc-link-btn { color: var(--dc-text); font-size: 0.875rem; font-weight: 500; }

.board__try { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 1.25rem; }
.board__try-label { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.09em; font-size: 0.75rem; text-transform: uppercase; color: var(--bone-3); margin-right: 4px; }
.board__try-note { flex-basis: 100%; text-align: center; font-size: 0.8125rem; color: var(--bone-3); margin-top: 0.4rem; }
.chip {
  min-height: 36px; padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid var(--rule-2); cursor: pointer;
  background: rgba(214, 236, 226, 0.04); color: var(--bone); font: 500 0.875rem/1 var(--font-mono);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.chip:hover { border-color: rgba(var(--core-rgb), 0.5); color: var(--core); background: var(--core-wash); }

/* A message: avatar in a 72px gutter, name line, content. */
.dc-msg { position: relative; margin-top: 17px; padding: 2px 16px 2px 72px; min-height: 44px; }
.dc-msg--grouped { margin-top: 0; min-height: 0; }
.dc-hovertime { position: absolute; left: 0; width: 64px; top: 5px; text-align: right; font-size: 0.6875rem; color: var(--dc-muted); opacity: 0; }
.dc-msg--grouped:hover .dc-hovertime { opacity: 1; }
.dc-avatar.dc-avatar--letter { display: grid; place-items: center; padding: 0; background: var(--tint, #f0b232); color: #1e1f22; font-weight: 700; font-size: 1rem; }
.dc-edited { margin-left: 4px; font-size: 0.625rem; color: var(--dc-muted); }
.dc-system { display: flex; align-items: center; gap: 12px; margin: 14px 16px 0; padding-left: 26px; font-size: 0.9375rem; color: var(--dc-muted); }
.dc-system strong { color: var(--dc-head); font-weight: 500; }
.dc-system__icon { width: 16px; height: 16px; flex: none; margin-right: 14px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.dc-system__icon--pin { color: #b5bac1; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m14.5 2.8 6.7 6.7-1.4 1.4-1.4-.4-3.3 3.3.3 3.6-1.4 1.4-3.4-3.4-5.1 5.1-1.4-1.4 5.1-5.1L5.8 10.6l1.4-1.4 3.6.3 3.3-3.3-.4-1.4Z'/%3E%3C/svg%3E"); }
.dc-system__icon--join { color: var(--dc-green); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11h13.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H3Z'/%3E%3C/svg%3E"); }
.dc-system__icon--leave { color: var(--dc-red); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 11H7.8l4.6-4.6L11 5l-7 7 7 7 1.4-1.4L7.8 13H21Z'/%3E%3C/svg%3E"); }
.dc-file { display: flex; align-items: center; gap: 10px; max-width: 400px; margin-top: 6px; padding: 10px 12px; border-radius: 8px; background: var(--dc-embed); border: 1px solid #26272b; }
.dc-file .dc-e { width: 28px; height: 28px; }
.dc-file div { display: grid; }
.dc-file small { font-size: 0.75rem; color: var(--dc-muted); }
.dc-embed.is-edited { animation: dc-edited 1.2s var(--ease-out); }
@keyframes dc-edited { from { box-shadow: 0 0 0 2px rgba(var(--core-rgb), 0.55); } to { box-shadow: 0 0 0 2px rgba(var(--core-rgb), 0); } }
.dc-btn.is-hinted { box-shadow: 0 0 0 2px #00a8fc, 0 0 0 5px rgba(0, 168, 252, 0.22); animation: dc-hint 1.8s ease-in-out infinite; }
@keyframes dc-hint { 50% { box-shadow: 0 0 0 2px var(--core), 0 0 0 7px rgba(var(--core-rgb), 0.08); } }
.dc-text { color: var(--dc-text); }
.dc-text .dc-h1, .dc-text .dc-h2, .dc-text .dc-h3 { margin-top: 8px; }
.dc-line { min-height: 1.375em; overflow-wrap: anywhere; }
.dc-gap { height: 1.375em; }
.dc-embed .dc-gap { height: 0.625rem; }
.dc-ul { margin: 2px 0; padding-left: 1.4em; list-style: disc; }
.dc-ul li { margin: 2px 0; }
.dc-code { font-family: var(--font-mono); font-size: 0.85em; padding: 0.1em 0.3em; border-radius: 4px; background: var(--dc-deep); color: var(--dc-text); white-space: pre-wrap; }
.dc-mention { padding: 0 2px; border-radius: 3px; background: rgba(88, 101, 242, 0.3); color: #c9cdfb; font-weight: 500; }
.dc-stamp { padding: 0 2px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); }
.dc-ephemeral { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 4px; font-size: 0.75rem; color: var(--dc-muted); }
.dc-ephemeral .dc-e { width: 16px; height: 16px; }
.dc-embed .dc-line { min-height: 1.125rem; }
.dc-msg:hover { background: rgba(2, 2, 2, 0.06); }
.dc-avatar { position: absolute; left: 16px; top: 4px; width: 40px; height: 40px; border-radius: 50%; background: #111618; object-fit: contain; padding: 4px; }
.dc-msg--cmd .dc-avatar { top: 26px; }
.dc-meta { display: flex; align-items: center; flex-wrap: wrap; line-height: 1.375rem; min-height: 1.375rem; }
.dc-name { font-weight: 500; color: var(--dc-head); }
.dc-app {
  display: inline-flex; align-items: center; height: 0.9375rem; padding: 0 0.275rem; margin-left: 0.25rem;
  border-radius: 0.1875rem; background: var(--dc-blurple); color: #fff;
  font-size: 0.625rem; font-weight: 600; line-height: 0.9375rem; text-transform: uppercase; letter-spacing: 0.01em;
}
.discord__bar .dc-app { margin-left: 0; }
.dc-time { margin-left: 0.25rem; font-size: 0.75rem; font-weight: 500; line-height: 1.375rem; color: var(--dc-muted); }

/* "Alex used /price": the line Discord puts over an answer to a slash command. */
.dc-used {
  position: relative; display: flex; align-items: center; gap: 4px; height: 22px; margin-bottom: 4px;
  font-size: 0.875rem; line-height: 1.125rem; color: #b5bac1; white-space: nowrap;
}
.dc-used__spine {
  position: absolute; left: -36px; top: 11px; width: 29px; height: 12px;
  border-left: 2px solid #4e5058; border-top: 2px solid #4e5058; border-top-left-radius: 6px;
}
.dc-used__avatar {
  display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: var(--tint, #f0b232); color: #1e1f22; font-size: 0.625rem; font-weight: 700;
}
.dc-used__name { font-weight: 500; color: var(--dc-head); }
.dc-used__cmd { color: var(--dc-link); font-weight: 500; }

/* The embed. */
.dc-embed {
  --embed: #0f1012;
  position: relative; max-width: 432px; margin-top: 2px; padding: 8px 16px 16px 12px;
  background: var(--dc-embed); border-left: 4px solid var(--embed); border-radius: 4px;
  font-size: 0.875rem; line-height: 1.125rem; transition: border-color 0.4s;
}
.dc-embed__thumb { position: absolute; top: 12px; right: 16px; width: 80px; height: 80px; border-radius: 4px; object-fit: contain; image-rendering: pixelated; }
.dc-embed--thumb .dc-embed__body { padding-right: 88px; }
/* Whatever is typed into an embed wraps inside it, one long word included, as Discord's own
   embeds do, instead of pushing the page sideways. */
.dc-embed__body, .dc-embed__foot { min-width: 0; overflow-wrap: anywhere; }
.premium__preview, .kit__board { min-width: 0; }
.dc-embed__foot { margin-top: 8px; font-size: 0.75rem; font-weight: 500; line-height: 1rem; color: var(--dc-text); }

.dc-h1, .dc-h2, .dc-h3 { display: flex; align-items: center; gap: 0.2em; font-weight: 700; color: var(--dc-head); line-height: 1.375em; }
.dc-h1 { font-size: 1.5rem; margin: 4px 0 4px; }
.dc-h2 { font-size: 1.25rem; margin: 4px 0 8px; }
.dc-h3 { font-size: 1rem; margin: 4px 0 0; }
.dc-embed__body > :first-child { margin-top: 0; }
.dc-sub { font-size: 0.8125rem; line-height: 1.11rem; color: var(--dc-muted); }
.dc-sub s { text-decoration-thickness: 1px; }
.dc-e { width: 1.375em; height: 1.375em; display: inline-block; vertical-align: bottom; object-fit: contain; image-rendering: pixelated; flex: none; }
.dc-quote { margin: 8px 0 0; padding: 0 8px 0 12px; border-left: 4px solid var(--dc-quote); border-radius: 4px; }
.dc-quote strong { color: var(--dc-head); font-weight: 700; }
.dc-quote .dc-e { vertical-align: -0.35em; }
/* Underlined, as Discord draws links with its own Always underline links setting, so a link never
   rests on colour alone. */
.dc-link { color: var(--dc-link); text-decoration: underline; text-underline-offset: 2px; }
.dc-badge { margin-top: 8px; }
.dc-badge .dc-e { vertical-align: -0.3em; }

.dc-rows { display: grid; gap: 8px; margin-top: 8px; }
.dc-row { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 2px 16px; border: 0; border-radius: 8px; text-decoration: none;
  font: 500 0.875rem/1.125rem var(--dc-font, sans-serif); color: #fff; background: var(--dc-grey); cursor: pointer;
  transition: background 0.17s, transform 0.1s;
}
.dc-btn:hover { background: var(--dc-grey-hi); }
.dc-btn:active { transform: translateY(1px); }
.dc-btn--green { background: var(--dc-green); }
.dc-btn--green:hover { background: var(--dc-green-hi); }
.dc-btn--blurple { background: var(--dc-blurple); }
.dc-btn--blurple:hover { background: var(--dc-blurple-hi); }
.dc-btn--red { background: var(--dc-red); }
.dc-btn--red:hover { background: #a12828; }
.dc-btn[disabled], .dc-btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
.dc-btn .dc-e { width: 18px; height: 18px; }

@media (max-width: 480px) {
  .dc-msg { padding-left: 64px; padding-right: 12px; }
  .dc-avatar { left: 12px; }
  .dc-embed__body .dc-h1 { font-size: 1.375rem; }
}

.dc-select { position: relative; width: min(100%, 400px); }
.dc-select__box {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px; padding: 8px 8px 8px 12px;
  border: 1px solid #1e1f22; border-radius: 4px; background: #1e1f22; color: var(--dc-text); cursor: pointer; font: 500 0.875rem var(--dc-font); text-align: left;
}
.dc-select__box svg { width: 20px; height: 20px; flex: none; color: #b5bac1; }
.dc-select__menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 4; max-height: 280px; overflow-y: auto; margin: 0; padding: 4px 0;
  list-style: none; border-radius: 4px; background: #2b2d31; border: 1px solid #1e1f22; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}
.dc-select__menu li { display: grid; gap: 1px; padding: 8px 12px; cursor: pointer; outline: none; }
.dc-select__menu li strong { font-size: 0.875rem; font-weight: 500; color: var(--dc-head); }
.dc-select__menu li span { font-size: 0.75rem; color: var(--dc-muted); }
.dc-select__menu li:hover, .dc-select__menu li:focus { background: #36373d; }
.dc-select__menu li[aria-selected='true'] { background: #404249; }

.px { width: 1.2em; height: 1.2em; display: inline-block; vertical-align: -0.22em; flex: none; }


/* ------------------------------------------------------------------ safety */

.safety__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.safety__copy .lede { margin-top: 1.25rem; }
.points { list-style: none; display: grid; gap: 1.4rem; margin-top: 2rem; }
.points li { padding-left: 1.25rem; border-left: 2px solid var(--rule-2); }
.points h3 { font-size: 1.125rem; font-weight: 700; }
.points p { margin-top: 0.35rem; color: var(--bone-2); font-size: 1rem; }
.safety__map { margin: 0; }
.safety__canvas { width: 100%; aspect-ratio: 1; border-radius: 16px; background: var(--ground-2); border: 1px solid var(--rule); }
.safety__steps { list-style: none; counter-reset: s; display: grid; gap: 0.35rem; margin-top: 1rem; }
.safety__steps li {
  counter-increment: s; display: grid; grid-template-columns: 1.8rem 1fr; align-items: baseline;
  font-size: 0.9375rem; color: var(--bone-3); transition: color 0.3s;
}
.safety__steps li::before { content: counter(s); font: 700 0.8125rem var(--font-mono); color: var(--bone-3); }
.safety__steps li.is-now { color: var(--bone); }
.safety__steps li.is-now::before { color: var(--core); }
@media (max-width: 900px) { .safety__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ tools */

.dc-embed__title { font-weight: 600; font-size: 1rem; line-height: 1.375; color: var(--dc-head); margin-bottom: 2px; }
.dc-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; margin-top: 8px; }
.dc-field { font-size: 0.875rem; line-height: 1.125rem; }
.dc-field--wide { grid-column: 1 / -1; }
.dc-field__name { font-weight: 600; color: var(--dc-head); margin-bottom: 2px; }
.tools__list h3 { font-size: 1.125rem; font-weight: 700; }
.tools__list p { margin-top: 0.4rem; color: var(--bone-2); font-size: 1rem; }
.discord__log--auto { height: auto; max-height: none; overflow: visible; }
.tools__more { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.tools__craft { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 4vw, 4rem); align-items: center; padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: 16px; background: var(--panel); border: 1px solid var(--rule); }
.tools__craft-copy p { margin-top: 0.6rem; color: var(--bone-2); }
.tools__craft-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1rem; }
.chip[aria-pressed='true'] { border-color: var(--core); color: var(--core); background: var(--core-wash); }
.tools__craft-img { margin: 0; display: grid; gap: 0.5rem; justify-items: center; }
.tools__craft-img img { width: min(100%, 456px); image-rendering: pixelated; border-radius: 4px; box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.7); }
.tools__craft-img figcaption { font-size: 0.875rem; }
.tools__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem clamp(1.5rem, 3vw, 3rem); align-content: start; }
@media (max-width: 820px) { .tools__list { grid-template-columns: 1fr; } }
.linkish { padding: 0; border: 0; background: none; font: inherit; color: var(--core); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 640px) {
  .tools__craft { grid-template-columns: 1fr; }
  .dc-fields { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------ builds
 * The cottage builds itself as you scroll: a tall track with a sticky stage, the canvas
 * full bleed, the copy over its left side. */

.build { position: relative; }
.build__track { height: 320vh; }
.build__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.build__canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.build__canvas.is-grab { cursor: grab; }
.build__canvas.is-grabbing { cursor: grabbing; }
.build__still { position: absolute; right: 2%; top: 50%; width: min(62%, 980px); transform: translateY(-50%); }
.build.has-scene .build__still { display: none; }
.build__copy { position: relative; z-index: 1; padding-top: calc(68px + env(safe-area-inset-top, 0px) + clamp(2rem, 8vh, 5rem)); pointer-events: none; }
.build__copy > * { max-width: 27rem; pointer-events: auto; }
.build__copy .h2 { margin-top: 1.1rem; }
.build__copy .lede { margin-top: 1.25rem; }
/* The builds to pick from, under the intro. */
.build__pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.25rem; }
/* Solid, so a chip stays readable with blocks flying behind it. */
.build__pick .chip { background: var(--panel); }
.build__pick .chip:hover, .build__pick .chip[aria-pressed='true'] { background: linear-gradient(var(--core-wash), var(--core-wash)), var(--panel); }
.try__opt b { font-weight: 400; }
.build__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 1.5rem; }
.build__count { font-size: 0.9375rem; color: var(--bone-3); font-variant-numeric: tabular-nums; }
.build__count strong { color: var(--core); font-weight: 700; }
/* While a build of someone's own is read, and if it can't be, this says so in the count's
   place. */
.build__status { display: none; font-size: 0.9375rem; color: var(--bone-2); max-width: 26rem; }
.build.is-reading .build__status, .build.is-failed .build__status { display: block; }
.build.is-reading .build__count, .build.is-failed .build__count { display: none; }
/* While a file is read, a little grass block hops beside the words (loader.js). */
.build__reading { display: none; }
.build.is-reading .build__reading { display: inline-flex; align-items: center; font-size: 0.9375rem; margin-right: -14px; }
.build.is-failed .build__status { color: var(--redstone); }
/* A nudge under a loader that has taken a while (hints.js): faint, and faded in, so it reads
   as something to do while waiting rather than part of the news. */
.wait-hint { font-size: 0.875rem; line-height: 1.45; color: var(--bone-3); opacity: 0; transition: opacity 0.4s ease; }
.wait-hint.is-shown { opacity: 1; }
.build__wait { display: none; flex-basis: 100%; margin-top: -4px; max-width: 26rem; }
.build.is-reading .build__wait { display: block; }
.build__state .wait-hint { margin-top: 1.4rem; }
/* The chip for a build of your own, with its way in drawn on it. */
.build__pick .chip--yours { display: inline-flex; align-items: center; gap: 6px; border-style: dashed; }
.chip--yours svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Out of sight but still there: some browsers won't open a picker for a hidden input. */
.build__file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* A file dragged over the page: the whole window says where it goes. */
.build__drop {
  position: fixed; z-index: 60; inset: 12px; display: grid; place-items: center; padding: 24px;
  border: 2px dashed rgba(var(--core-rgb), 0.6); border-radius: 18px; background: rgba(14, 18, 20, 0.78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: scale(0.985); transition: opacity 0.18s, transform 0.25s var(--ease-out); pointer-events: none;
}
.build:is(.has-scene, .build--page).is-dropping .build__drop { opacity: 1; transform: none; }
.build__drop p { display: grid; justify-items: center; gap: 10px; text-align: center; }
.build__drop svg { width: 44px; height: 44px; fill: none; stroke: var(--core); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.build__drop strong { font: 700 var(--step-2)/1.1 var(--font-display); color: var(--bone); }
.build__drop span { font-size: 0.9375rem; color: var(--bone-2); }
.build__reply {
  position: absolute; z-index: 2; left: var(--gutter); bottom: clamp(1.5rem, 6vh, 3rem);
  opacity: 0; transform: translateY(10px); transition: opacity 0.5s, transform 0.5s var(--ease-out); pointer-events: none;
}
.build.is-built .build__reply { opacity: 1; transform: none; pointer-events: auto; }
/* The way into looking around, beside the count. */
.build__look {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 11px; border-radius: 999px;
  border: 1px solid var(--rule-2); background: var(--panel); color: var(--bone); cursor: pointer;
  font: 600 0.8125rem/1 var(--font-body); transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.build__look svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.45s var(--ease-out); }
.build__look:hover { border-color: rgba(var(--core-rgb), 0.5); color: var(--core); background: linear-gradient(var(--core-wash), var(--core-wash)), var(--panel); }
.build__look:hover svg { transform: rotate(-35deg); }
.build__look:focus-visible, .build__done:focus-visible { outline: 2px solid var(--core); outline-offset: 2px; }
/* The shader switch, in the corner of the card that stands for /render's reply, as the
   bot's own Shaders button sits under a render: lit green while the shader is on. */
.build__card-shade {
  display: inline-flex; align-items: center; gap: 5px; margin-left: auto; min-height: 26px; padding: 0 10px 0 7px; border-radius: 999px;
  border: 1px solid var(--rule-2); background: transparent; color: var(--dc-muted); cursor: pointer;
  font: 600 0.75rem/1 var(--font-body); transition: border-color 0.2s, color 0.2s;
}
.build__card-shade svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.build__card-shade:hover { border-color: rgba(var(--core-rgb), 0.5); color: var(--core); }
.build__card-shade:focus-visible { outline: 2px solid var(--core); outline-offset: 2px; }
.build__snap--shade svg, .build__tool[data-build-shade] svg, .build__card-shade svg { transition: transform 0.45s var(--ease-out), fill 0.2s; }
:is(.build__card-shade, .build__snap--shade, .build__tool[data-build-shade])[aria-pressed="true"] { color: var(--core); border-color: rgba(var(--core-rgb), 0.45); }
:is(.build__card-shade, .build__snap--shade, .build__tool[data-build-shade])[aria-pressed="true"] svg { transform: rotate(45deg); }
:is(.build__card-shade, .build__snap--shade, .build__tool[data-build-shade])[aria-pressed="true"] circle { fill: currentColor; }

/* Looking around: the build alone in a window of its own under the nav, a margin of page
   round it, nothing over it but a way out and, for a moment, how to move it. */
.build__done, .build__hint { display: none; }
html.is-looking { overflow: hidden; }
.build.is-looking .build__sticky {
  --look-edge: clamp(12px, 2vw, 28px);
  position: fixed; z-index: 40; height: auto;
  inset: calc(68px + env(safe-area-inset-top, 0px) + 12px) max(var(--look-edge), env(safe-area-inset-right, 0px))
    max(var(--look-edge), env(safe-area-inset-bottom, 0px)) max(var(--look-edge), env(safe-area-inset-left, 0px));
  border: 1px solid var(--rule-2); border-radius: 18px; background: var(--ground-2);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55); animation: look-in 0.4s var(--ease-out);
}
.build.is-leaving .build__sticky { opacity: 0; transform: scale(0.985); transition: opacity 0.2s, transform 0.2s; }
@keyframes look-in { from { opacity: 0; transform: scale(0.97); } }
.build.is-looking .build__copy, .build.is-looking .build__reply, .build.is-looking .build__panel, .build.is-looking .build__still { display: none; }
.build.is-looking .build__canvas { touch-action: none; }
.build.is-looking .build__done {
  display: grid; place-items: center; position: absolute; z-index: 3;
  top: 12px; right: 12px;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule-2); background: rgba(21, 28, 31, 0.82);
  color: var(--bone); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color 0.2s, color 0.2s;
}
.build__done svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.build__done:hover { border-color: rgba(var(--core-rgb), 0.5); color: var(--core); }
.build:is(.is-looking, .build--page) .build__hint {
  display: block; position: absolute; z-index: 3; left: 50%; bottom: 16px;
  width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 8px 14px; border-radius: 999px; text-align: center;
  border: 1px solid var(--rule-2); background: rgba(21, 28, 31, 0.82); color: var(--bone-2); font-size: 0.8125rem;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none;
  opacity: 0; transform: translate(-50%, 8px); transition: opacity 0.5s, transform 0.5s var(--ease-out);
}
.build:is(.is-looking, .build--page).is-hinting .build__hint { opacity: 1; transform: translate(-50%, 0); }
.build__card { padding: 12px 14px; border-radius: 8px; background: var(--dc-chat); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 18px 36px -12px rgba(0, 0, 0, 0.6); }
.build__card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.9375rem; color: var(--dc-head); }
.build__card-head img { border-radius: 50%; background: #111618; padding: 2px; }
.build__card-head span { color: var(--dc-muted); font-size: 0.8125rem; }
.build__panel {
  position: absolute; z-index: 3; right: var(--gutter); top: calc(68px + env(safe-area-inset-top, 0px) + 1rem);
  max-height: calc(100% - 68px - env(safe-area-inset-top, 0px) - 1rem - clamp(1.5rem, 6vh, 3rem));
  width: min(460px, calc(100% - 2 * var(--gutter))); display: flex; flex-direction: column;
  border-radius: 8px; background: var(--dc-chat); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 24px 48px -16px rgba(0, 0, 0, 0.7);
}
.build__panel-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 16px; }
.build__panel .dc-msg { margin-top: 10px; }
.build__close {
  position: absolute; right: 8px; top: 8px; z-index: 1; width: 32px; height: 32px; border: 0; border-radius: 6px;
  background: rgba(0, 0, 0, 0.35); color: var(--dc-text); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.build__close:hover { background: rgba(0, 0, 0, 0.55); }
@media (max-width: 900px) {
  .build__track { height: 280vh; }
  .build__copy > * { max-width: none; }
  .build__copy .lede { font-size: 1rem; }
  .build__still { width: 92%; right: 4%; top: auto; bottom: 12%; transform: none; }
  /* Once the build is under way the heading and its paragraph step aside, and the picker
     and the count rise to where the heading was, so the build has the screen. */
  .build__copy { transition: transform 0.6s var(--ease-out); }
  .build__copy > :not(.build__pick):not(.build__meta) { transition: opacity 0.35s; }
  .build.is-running .build__copy { transform: translateY(var(--build-lift, 0px)); }
  .build.is-running .build__copy > :not(.build__pick):not(.build__meta) { opacity: 0; pointer-events: none; }
  .build__meta { justify-content: space-between; }
  /* The /render card spans the screen, so its buttons sit in one row and take less room. */
  .build__reply { right: var(--gutter); }
  .build__card .dc-btn { padding-inline: 11px; }
  .build__panel { top: auto; bottom: clamp(1.5rem, 6vh, 3rem); max-height: 62%; left: var(--gutter); right: var(--gutter); width: auto; }
}
@media (prefers-reduced-motion: reduce) { .build__track { height: auto; } .build__sticky { position: relative; } }
/* Less motion on a phone: nothing pins and the words never step aside, so the section
   stacks instead: the words, the finished build in a space of its own, then its card. */
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .build:not(.build--page) .build__sticky { height: auto; display: flex; flex-direction: column; }
  .build:not(.build--page) .build__canvas { position: relative; order: 1; height: 72svh; }
  .build:not(.build--page) .build__reply { position: relative; order: 2; left: auto; right: auto; bottom: auto; margin: 0 var(--gutter) 2rem; transform: none; }
  .build:not(.build--page).is-built .build__reply { transform: none; }
}

/* Looking around on the Features page: a picture of the view, beside the way out. */
.build__snap { display: none; }
.build.is-looking .build__snap {
  display: grid; place-items: center; position: absolute; z-index: 3; top: 12px; right: 64px;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule-2); background: rgba(21, 28, 31, 0.82);
  color: var(--bone); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color 0.2s, color 0.2s;
}
.build__snap svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.build__snap:hover { border-color: rgba(var(--core-rgb), 0.5); color: var(--core); }
.build__snap:focus-visible { outline: 2px solid var(--core); outline-offset: 2px; }

.build.is-looking .build__snap--fly { right: 116px; }
.build.is-looking .build__snap--shade { right: 168px; }
.build.is-looking:has(.build__snap--fly[hidden]) .build__snap--shade { right: 116px; }
.build.is-looking .build__snap[hidden] { display: none; }

/* Flying round a build: nothing on screen but the build, a mark in the middle and, for a
   moment, how to fly and how fast. */
.build__flyhud { display: none; }
html.is-flying .nav { visibility: hidden; }
.build.is-flying .build__flyhud { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.build.is-flying :is(.build__bar, .build__reply, .build__panel, .build__hint, .build__toast, .build__snap, .build__done, .build__copy) { visibility: hidden; }
.build.is-flying .build__canvas { cursor: none; }
.build__cross { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); opacity: 0.75; }
.build__cross::before, .build__cross::after { content: ''; position: absolute; background: var(--bone); box-shadow: 0 0 0 1px rgba(14, 18, 20, 0.5); }
.build__cross::before { left: 8px; top: 0; width: 2px; height: 18px; }
.build__cross::after { left: 0; top: 8px; width: 18px; height: 2px; }
.build__keys, .build__speed {
  position: absolute; left: 50%; margin: 0; padding: 8px 14px; border-radius: 999px; width: max-content; max-width: calc(100% - 32px);
  border: 1px solid var(--rule-2); background: rgba(21, 28, 31, 0.82); color: var(--bone-2); font-size: 0.8125rem; text-align: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateX(-50%);
}
.build__keys { bottom: 20px; animation: fly-hint 6s 0.2s both; }
.build__keys kbd {
  display: inline-block; min-width: 1.6em; margin: 0 1px; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--rule-2);
  border-bottom-width: 2px; background: var(--panel-2); color: var(--bone); font: 600 0.75rem/1.4 var(--font-mono); text-align: center;
}
.build__speed { top: calc(68px + env(safe-area-inset-top, 0px) + 16px); color: var(--core); font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 0.3s; }
.build--page .build__speed { top: 28px; }
.build.is-looking .build__speed { top: 16px; }
.build.is-speeding .build__speed { opacity: 1; }
@keyframes fly-hint { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* ------------------------------------------------------------------ the render page */

/* The buttons under a /render picture, each drawn as Discord draws it. They're pictures of
   buttons here, so they don't press. */
.render-buttons__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.render-buttons__list > div { display: grid; align-content: start; gap: 0.85rem; padding: 1.3rem 1.2rem 1.4rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--rule); }
.render-buttons__list dt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 32px; }
.render-buttons__list .dc-btn { pointer-events: none; }
.render-buttons__list dd { margin: 0; color: var(--bone-2); font-size: 0.9375rem; }
.render-buttons__list dd strong { color: var(--bone); font-weight: 700; }
@media (max-width: 900px) { .render-buttons__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .render-buttons__list { grid-template-columns: 1fr; } }

/* The stack calculator (stacks-ui.js): the words, then the pack drawn the game's way, full
   boxes in a row and the last one open in a shulker's grey 9 x 3 inventory. */
.stacks__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.stacks__copy { display: grid; gap: 1.1rem; align-content: start; }
.stacks__try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--bone-3); font-size: 0.875rem; }
.stacks__tool { display: grid; gap: 0.9rem; padding: clamp(1.2rem, 1rem + 1vw, 1.75rem); border-radius: 18px; background: var(--panel); border: 1px solid var(--rule); }
.stacks__label { font-weight: 700; letter-spacing: 0.09em; font-size: 0.75rem; text-transform: uppercase; color: var(--bone-3); }
.stacks__input {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--ground);
  color: var(--bone); font: 600 1.125rem var(--font-mono);
}
.stacks__input:focus { outline: none; border-color: var(--core); box-shadow: 0 0 0 3px rgba(var(--core-rgb), 0.18); }
.stacks__tool.is-wrong .stacks__input { border-color: var(--redstone); }
.stacks__hint { margin-top: -0.4rem; font-size: 0.8125rem; color: var(--bone-3); }
.stacks__size { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stacks__size .stacks__label { margin-right: 4px; }
.chip[aria-checked='true'] { border-color: var(--core); color: var(--core); background: var(--core-wash); }
.stacks__out { display: grid; gap: 0.25rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); }
.stacks__out strong { font: 800 clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem)/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--core); }
.stacks__tool.is-wrong .stacks__out strong { color: var(--bone-2); }
.stacks__out span { font-size: 0.875rem; color: var(--bone-3); }
.stacks__pack { display: grid; gap: 10px; }
.stacks__boxes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.stacks__boxes:empty { display: none; }
.stacks__box svg { display: block; width: 32px; height: 32px; }
.stacks__more { margin-left: 4px; font: 700 0.875rem var(--font-mono); color: var(--bone-2); }
.stacks__slots { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 2px; max-width: 360px; padding: 6px; border-radius: 4px; background: #c6c6c6; }
.stacks__slot { position: relative; aspect-ratio: 1; background: #8b8b8b; box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff; }
.stacks__slot.is-full::before { content: ''; position: absolute; inset: 18%; background: url(../assets/baked/tex/cobblestone.png) 0 0 / 100% 100%; image-rendering: pixelated; }
.stacks__slot b { position: absolute; right: 3px; bottom: 1px; font: 700 clamp(0.625rem, 0.5rem + 0.4vw, 0.8125rem)/1 var(--font-mono); color: #fff; text-shadow: 1px 1px 0 #3f3f3f; }
.stacks__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stacks__facts div { padding: 10px 12px; border-radius: 10px; background: var(--panel-2); }
.stacks__facts dt { font-size: 0.75rem; color: var(--bone-3); }
.stacks__facts dd { margin: 4px 0 0; font: 700 1.0625rem/1.2 var(--font-mono); color: var(--bone); }
@media (max-width: 900px) { .stacks__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .stacks__facts { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------------ the tools page */

/* The converter (tools.js): a place to drop a file, then the file and the three it can become. */
.convert { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.convert__drop {
  display: grid; justify-items: center; gap: 0.9rem; padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) 1.5rem; border-radius: 20px; cursor: pointer;
  border: 2px dashed rgba(var(--core-rgb), 0.35); background: linear-gradient(var(--core-wash), var(--core-wash)), var(--panel); text-align: center;
  transition: border-color 0.2s, background 0.2s;
}
.convert__drop > svg { width: 40px; height: 40px; fill: none; stroke: var(--core); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.convert__drop strong { font: 700 var(--step-1)/1.3 var(--font-display); color: var(--bone); }
.convert__drop small { font-size: 0.8125rem; color: var(--bone-3); }
.convert__drop:hover, .convert.is-dropping .convert__drop { border-color: var(--core); }
.convert__drop:focus-within { outline: 2px solid var(--core); outline-offset: 3px; }
.convert.is-dropping .convert__drop { background: linear-gradient(rgba(var(--core-rgb), 0.16), rgba(var(--core-rgb), 0.16)), var(--panel); }
.convert__reading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 3rem 1rem; border-radius: 20px; background: var(--panel); border: 1px solid var(--rule); color: var(--bone-2); }
.convert__reading .blocky--tiny { width: 30px; height: 33px; }
.convert__reading { flex-wrap: wrap; }
.convert__reading .wait-hint { flex-basis: 100%; text-align: center; }
.convert__status { min-height: 1.5em; margin-top: 0.9rem; text-align: center; font-size: 0.9375rem; color: var(--bone-2); }
.convert__status.is-failed { color: var(--redstone); }
.convert__file { display: grid; gap: 1rem; padding: clamp(1.2rem, 1rem + 1vw, 1.75rem); border-radius: 20px; background: var(--panel); border: 1px solid var(--rule); }
.convert__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.convert__name { font: 700 var(--step-1)/1.25 var(--font-display); color: var(--bone); overflow-wrap: anywhere; }
.convert__facts { margin-top: 0.3rem; font-size: 0.9375rem; color: var(--bone-2); }
.convert__again { display: flex; flex-wrap: wrap; gap: 8px; }
.convert__label { font-weight: 700; letter-spacing: 0.09em; font-size: 0.75rem; text-transform: uppercase; color: var(--bone-3); }
.convert__formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.convert__to {
  position: relative; display: grid; align-content: start; gap: 0.35rem; padding: 1.1rem 1.1rem 1.2rem; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1px solid var(--rule-2); background: var(--panel-2); color: var(--bone); font: inherit;
  transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease-out);
}
.convert__to b { font: 700 1.125rem var(--font-mono); color: var(--core); }
.convert__to strong { font-weight: 700; }
.convert__to span { font-size: 0.875rem; color: var(--bone-2); padding-right: 1.5rem; }
.convert__to > svg { position: absolute; right: 1rem; top: 1.1rem; width: 20px; height: 20px; fill: none; stroke: var(--bone-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.convert__to:hover, .convert__to:focus-visible { border-color: var(--core); background: linear-gradient(var(--core-wash), var(--core-wash)), var(--panel-2); transform: translateY(-2px); outline: none; }
.convert__to:hover > svg, .convert__to:focus-visible > svg { stroke: var(--core); }
.convert__to[aria-busy='true'] { opacity: 0.7; cursor: progress; }
.convert__now { display: none; justify-self: start; margin-top: 0.3rem; padding: 0.15rem 0.5rem; border-radius: 6px; font: 700 0.6875rem/1.4 var(--font-body); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-3); background: rgba(214, 236, 226, 0.07); }
.convert__to.is-now .convert__now { display: inline-block; }
.convert__note { font-size: 0.875rem; color: var(--bone-2); padding: 0.7rem 0.9rem; border-radius: 10px; background: var(--panel-2); }
@media (max-width: 760px) { .convert__formats { grid-template-columns: 1fr; } }

/* Every block in the build, as a table, with the stacks it packs into. */
.mats { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.mats__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.mats__sum { color: var(--bone-2); }
.mats__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mats__scroll { max-height: 34rem; overflow: auto; border-radius: 14px; border: 1px solid var(--rule); background: var(--panel); }
.mats__table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.mats__table th { position: sticky; top: 0; z-index: 1; padding: 0.75rem 1rem; text-align: left; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-3); background: var(--panel-2); }
.mats__table td { padding: 0.55rem 1rem; border-top: 1px solid var(--rule); color: var(--bone); }
.mats__n { width: 1%; text-align: right; font: 600 0.9375rem var(--font-mono); white-space: nowrap; }
.mats__table th:first-child { text-align: right; }
.mats__packed { color: var(--bone-2); }

/* ------------------------------------------------------------------ a build's own page */

/* /build/<id>: the whole screen is the build. The canvas runs under the nav; a bar under
   the nav names it and holds what you can do with it, and its card sits at the foot, as on
   the Features page. Nothing scrolls: dragging is for turning it. */
.page--build .foot { display: none; }
.build--page .build__sticky { position: relative; height: 100vh; height: 100svh; }
.build--page .build__canvas { touch-action: none; }
.build__bar {
  position: absolute; z-index: 2; left: 0; right: 0; top: calc(68px + env(safe-area-inset-top, 0px) + clamp(0.75rem, 3vh, 1.75rem));
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; pointer-events: none;
}
.build__bar > * { pointer-events: auto; }
.build__head { min-width: 0; max-width: 34rem; }
.build__name {
  margin-top: 0.55rem; font: 800 clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem)/1.05 var(--font-display); letter-spacing: -0.02em;
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.build__facts { display: flex; flex-wrap: wrap; gap: 0 0.5rem; margin-top: 0.55rem; font-size: 0.9375rem; color: var(--bone-3); font-variant-numeric: tabular-nums; }
.build__facts strong { color: var(--core); font-weight: 700; }
/* The loader's grass block keeps the build company at the end of its facts (loader.js). */
.build__buddy { pointer-events: auto; margin-left: 0.3rem; }
.build__recent { position: relative; margin-top: 0.6rem; font-size: 0.875rem; }
.build__recent summary { width: max-content; color: var(--bone-2); cursor: pointer; list-style: none; text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.build__recent summary::-webkit-details-marker { display: none; }
.build__recent summary::after { content: ' ▾'; color: var(--bone-3); }
.build__recent[open] summary::after { content: ' ▴'; }
.build__recent ul {
  position: absolute; z-index: 6; top: calc(100% + 8px); left: 0; width: min(20rem, calc(100vw - 2 * var(--gutter)));
  padding: 6px; list-style: none; border-radius: 12px; border: 1px solid var(--rule-2); background: var(--panel);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.6);
}
.build__recent li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.build__recent a { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; color: var(--bone); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.build__recent a:hover, .build__recent a:focus-visible { background: var(--core-wash); color: var(--core); }
.build__recent li span { padding-right: 10px; font-size: 0.75rem; color: var(--bone-3); white-space: nowrap; }
.build__tools { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.build__entrances { display: flex; flex-wrap: wrap; gap: 6px; }
.build__entrances .chip { min-height: 32px; padding: 0.3rem 0.7rem; background: var(--panel); font-size: 0.8125rem; }
.build__entrances .chip:hover, .build__entrances .chip[aria-pressed='true'] { background: linear-gradient(var(--core-wash), var(--core-wash)), var(--panel); }
.build__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.build__tool {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 15px 0 12px; border-radius: 999px;
  border: 1px solid var(--rule-2); background: var(--panel); color: var(--bone); cursor: pointer;
  font: 600 0.875rem/1 var(--font-body); transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.build__tool svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.build__tool:hover { border-color: rgba(var(--core-rgb), 0.5); color: var(--core); background: linear-gradient(var(--core-wash), var(--core-wash)), var(--panel); }
.build__tool:focus-visible, .build__entrances .chip:focus-visible, .build__recent summary:focus-visible { outline: 2px solid var(--core); outline-offset: 2px; }
.build__tool:disabled { opacity: 0.6; cursor: progress; }
/* Download: the build as a file again, in whichever format the tool that takes it wants. */
.build__download { position: relative; }
.build__formats {
  position: absolute; z-index: 6; top: calc(100% + 8px); right: 0; display: grid; gap: 2px; min-width: 15rem; padding: 6px;
  border-radius: 14px; border: 1px solid var(--rule-2); background: rgba(21, 28, 31, 0.97); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.build__formats [role='menuitem'] {
  display: grid; grid-template-columns: 5.5rem 1fr; align-items: baseline; gap: 8px; padding: 9px 10px; border: 0; border-radius: 9px;
  background: none; color: var(--bone); text-align: left; cursor: pointer; font: 500 0.875rem var(--font-body);
}
.build__formats b { font: 700 0.875rem var(--font-mono); color: var(--core); }
.build__formats span { font-size: 0.8125rem; color: var(--bone-2); }
.build__formats [role='menuitem']:hover, .build__formats [role='menuitem']:focus-visible { outline: none; background: var(--core-wash); }
@media (max-width: 900px) {
  /* On a phone the row of tools wraps, so a menu hangs from the row, not its button, and fits the screen. */
  .build__actions { position: relative; }
  .build__download { position: static; }
  .build__formats { right: auto; left: 0; }
  .build__send { width: auto; right: 0; }
}
/* Send to Discord: what it does first, then the command to paste. */
.build__send { width: min(21rem, calc(100vw - 32px)); gap: 10px; padding: 14px; }
.build__send-text { font-size: 0.875rem; line-height: 1.5; color: var(--bone-2); }
.build__send-text.is-failed { color: var(--redstone); }
.build__send-go { justify-self: start; min-height: 40px; }
.build__send-done { display: grid; gap: 6px; font-size: 0.875rem; color: var(--bone-2); }
.build__send-done[hidden] { display: none; }
.build__send-cmd { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border-radius: 10px; background: var(--ground); }
.build__send-cmd code { flex: 1; min-width: 0; white-space: normal; word-break: break-all; font-size: 0.8125rem; color: var(--bone); background: none; padding: 0; }
.build__send-copy { flex: none; padding: 6px 12px; border: 0; border-radius: 8px; background: var(--core-wash); color: var(--core); font: 700 0.8125rem var(--font-body); cursor: pointer; }
.build__send-copy:hover, .build__send-copy:focus-visible { outline: none; background: rgba(var(--core-rgb), 0.22); }
.build__send-until { font-size: 0.75rem; color: var(--bone-3); }
/* How to move it, and what just happened, above the card. */
.build.build--page .build__hint, .build__toast { bottom: calc(clamp(1.5rem, 6vh, 3rem) + 112px); }
.build__toast {
  position: absolute; z-index: 4; left: 50%; width: max-content; max-width: min(34rem, calc(100% - 32px)); margin: 0;
  padding: 10px 16px; border-radius: 14px; text-align: center; border: 1px solid rgba(var(--core-rgb), 0.35);
  background: rgba(21, 28, 31, 0.92); color: var(--bone); font-size: 0.875rem; line-height: 1.45;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none;
  opacity: 0; transform: translate(-50%, 8px); transition: opacity 0.35s, transform 0.35s var(--ease-out);
}
.build__toast.is-failed { border-color: rgba(255, 90, 79, 0.5); }
.build.is-toasting .build__toast { opacity: 1; transform: translate(-50%, 0); }
/* Loading, not on this device, or can't be drawn: said in the middle of the stage. */
.build__state { position: absolute; z-index: 3; inset: calc(68px + env(safe-area-inset-top, 0px)) 0 0; display: grid; place-items: center; padding: 24px var(--gutter); }
.build__state[hidden] { display: none; }
.build__state-box { max-width: 30rem; text-align: center; }
.build__state-title { font: 700 var(--step-2)/1.2 var(--font-display); color: var(--bone); }
/* While it is read, the little block tower builds itself above the words (loader.js). */
.build__loader { display: none; }
.build.is-loading .build__loader { display: block; }
.build__state-text { margin-top: 0.8rem; color: var(--bone-2); }
.build__state-text:empty { display: none; }
.build__state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 1.6rem; }
.build__state-actions[hidden] { display: none; }
.build--page:has(.build__state:not([hidden])) :is(.build__tools, .build__facts, .build__reply) { visibility: hidden; }
@media (max-width: 900px) {
  .build__bar { align-items: flex-start; gap: 12px; }
  .build--page .eyebrow { display: none; }
  .build__name { margin-top: 0; -webkit-line-clamp: 1; }
  .build__facts { gap: 0 0.9rem; font-size: 0.875rem; }
  .build__dot { display: none; }
  .build__tools { align-items: flex-start; }
  .build__actions { gap: 6px; }
  .build__tool { min-height: 38px; gap: 6px; padding: 0 11px 0 9px; font-size: 0.8125rem; }
  .build__tool svg { width: 16px; height: 16px; }
}

/* A picture of a build, before anything is saved. */
.shot { width: min(760px, calc(100vw - 24px)); max-width: none; max-height: calc(100svh - 24px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--bone); overflow: visible; }
.shot::backdrop { background: rgba(8, 11, 12, 0.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.shot[open] { animation: look-in 0.3s var(--ease-out); }
.shot__box { padding: clamp(14px, 3vw, 20px); border-radius: 18px; border: 1px solid var(--rule-2); background: var(--panel); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6); }
.shot__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.shot__title { font: 700 1.125rem/1.25 var(--font-display); overflow-wrap: anywhere; }
.shot__close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule-2); background: transparent; color: var(--bone); cursor: pointer; }
.shot__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.shot__close:hover { border-color: rgba(var(--core-rgb), 0.5); color: var(--core); }
/* A checkerboard in the page's own greens-and-greys, the usual way of saying "nothing behind it". */
.shot__frame {
  display: grid; place-items: center; margin-top: 14px; padding: 12px; border-radius: 12px;
  background: repeating-conic-gradient(#172024 0 25%, #121a1d 0 50%) 0 0 / 22px 22px;
}
.shot__img { display: block; max-width: 100%; max-height: min(58svh, 520px); object-fit: contain; }
.shot__meta { margin-top: 10px; font-size: 0.8125rem; color: var(--bone-3); }
.shot__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.shot__save { text-decoration: none; }
.shot__note { min-height: 1.3em; margin-top: 12px; font-size: 0.875rem; color: var(--core); }

/* Under the build: the cottage itself, as files to hand to /render. */
.try { padding-block: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--rule); }
.try__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.try__copy .h3 { margin-top: 0.9rem; }
.try__copy .h3 ~ p { margin-top: 1rem; max-width: 34rem; color: var(--bone-2); }
.try__own-btn {
  padding: 0; border: 0; background: none; font: inherit; color: var(--core); cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(var(--core-rgb), 0.45); text-underline-offset: 3px;
}
.try__own-btn:hover { text-decoration-color: currentColor; }
.try__own-btn:focus-visible { outline: 2px solid var(--core); outline-offset: 2px; border-radius: 2px; }
.try__files { display: grid; gap: 10px; }
.try__file { max-width: none; margin: 0; color: inherit; text-decoration: none; transition: border-color 0.2s, transform 0.2s var(--ease-out); }
.try__file div { flex: 1; min-width: 0; }
.try__file small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.try__file:hover { border-color: rgba(var(--core-rgb), 0.5); transform: translateY(-1px); }
.try__file:focus-visible { outline: 2px solid var(--core); outline-offset: 2px; }
.try__get { width: 20px; height: 20px; flex: none; color: var(--dc-muted); fill: currentColor; }
.try__file:hover .try__get { color: var(--core); }
.try__how { margin: 1.25rem 0 0.6rem; font-family: var(--font-body); font-size: 0.875rem; color: var(--bone-3); }
.try__bar { margin: 0; }
.try__cmd { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--dc-text); white-space: nowrap; overflow: hidden; }
.try__slash { font-weight: 500; }
/* An option as Discord shows it once filled in: its name, then the value. */
.try__opt { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding-right: 6px; border-radius: 4px; background: #232428; overflow: hidden; font-size: 0.9375rem; }
.try__opt span { padding: 1px 6px; background: #2e3035; color: #b5bac1; }
@media (max-width: 760px) { .try__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ setup */

.setup__steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 0.5rem + 2vw, 2rem); margin-top: clamp(2.5rem, 2rem + 3vw, 4rem); }
.setup__step { counter-increment: step; position: relative; display: grid; align-content: start; gap: 0.75rem; padding: 1.5rem 1.4rem 1.6rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--rule); }
.setup__step::before {
  content: counter(step); position: absolute; top: -14px; left: 1.4rem; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 8px; background: var(--core); color: var(--core-ink); font: 800 0.9375rem var(--font-display);
}
.setup__step h3 { font-size: 1.1875rem; font-weight: 750; letter-spacing: -0.01em; margin-top: 0.4rem; }
.setup__step p:not(.slash) { color: var(--bone-2); font-size: 1rem; }
.slash {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 6px 10px; margin-top: 0.5rem;
  border-radius: 8px; background: #383a40; font-family: 'gg sans', 'Figtree', sans-serif; font-size: 0.9375rem; color: var(--dc-text);
}
.slash__cmd { padding: 2px 6px; border-radius: 4px; background: rgba(0, 168, 252, 0.15); color: #c9eaff; font-weight: 600; }
.slash__opt { padding: 2px 8px; border-radius: 4px; background: #1e1f22; color: var(--dc-muted); font-size: 0.875rem; }
.slash__opt b { color: var(--dc-text); font-weight: 500; }
.setup__after { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 3rem; margin-top: 2rem; color: var(--bone-2); font-size: 1rem; }
.setup__after strong { color: var(--bone); }
@media (max-width: 900px) { .setup__steps { grid-template-columns: 1fr; gap: 2rem; } .setup__after { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ premium */

/* The Premium page is gold, until a colour is picked in its preview; then it follows the
   pick. The wash is declared again so it resolves against the gold channels, not the root's. */
:root:not([data-accent]) .page--premium {
  --core: #f5b83d;
  --core-hi: #ffd786;
  --core-deep: #a67209;
  --core-ink: #161003;
  --core-rgb: 245, 184, 61;
  --core-wash: rgba(var(--core-rgb), 0.1);
}

.premium__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.perks { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; }
.perks li { padding-top: 1rem; border-top: 1px solid rgba(var(--core-rgb), 0.28); }
.perks h3 { font-size: 1.0625rem; font-weight: 700; }
.perks p { margin-top: 0.3rem; color: var(--bone-2); font-size: 0.9375rem; }
/* An odd one out at the end runs the full width rather than leaving half a row empty. */
.perks li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 2.25rem; }
.plan { padding: 1rem 1.1rem; border-radius: 14px; background: var(--panel); border: 1px solid var(--rule); transition: border-color 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s; }
.plan:hover { border-color: rgba(var(--core-rgb), 0.55); transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(var(--core-rgb), 0.45); }
.premium__plans-title { margin-top: 2.5rem; }
.premium__plans-title + .plans { margin-top: 1rem; }

/* A band of light that sweeps across on hover, the way gold catches it. */
.shine { position: relative; overflow: hidden; isolation: isolate; }
.shine::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 238, 190, 0.34) 45%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 238, 190, 0.34) 55%, transparent);
  transform: translateX(-130%) skewX(-18deg);
}
.shine:hover::after, .shine:focus-visible::after { animation: shine 0.95s var(--ease-out); }
@keyframes shine { to { transform: translateX(330%) skewX(-18deg); } }
.plan--best { border-color: rgba(var(--core-rgb), 0.45); background: linear-gradient(160deg, rgba(var(--core-rgb), 0.16), rgba(var(--core-rgb), 0.04) 60%), var(--panel); }
.plan__name { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.09em; font-size: 0.75rem; text-transform: uppercase; color: var(--bone-3); }
.plan--best .plan__name { color: var(--core); }
.plan__price { margin-top: 0.4rem; font: 800 2.1rem/1 var(--font-display); letter-spacing: -0.03em; }
.plan__per { margin-top: 0.25rem; font-size: 0.875rem; color: var(--bone-3); }
.premium__how { margin-top: 1.5rem; color: var(--bone-2); font-size: 1rem; }
.premium__ctas { margin-top: 1.5rem; }
.premium__refer { margin-top: 1rem; font-size: 0.9375rem; color: var(--bone-3); }
.premium__preview { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); display: grid; gap: 1rem; }
.kit { display: grid; gap: 0.9rem; padding: 1.1rem 1.2rem; border-radius: 16px; background: var(--panel); border: 1px solid var(--rule); }
.kit__row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: 0.75rem; }
.kit__label { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.09em; font-size: 0.75rem; text-transform: uppercase; color: var(--bone-3); }
.kit__swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.kit__swatches button, .kit__custom {
  width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--rule-2); background: var(--s, #333); cursor: pointer; padding: 0;
}
.kit__swatches button[aria-checked='true'] { border-color: var(--bone); box-shadow: 0 0 0 3px rgba(236, 231, 218, 0.18); }
.kit__custom { position: relative; overflow: hidden; background: conic-gradient(#ff5a4f, #f5b83d, #3be081, #3aa8ff, #ff5a4f); }
.kit__custom input { position: absolute; inset: -8px; width: 46px; height: 46px; opacity: 0; cursor: pointer; }
.kit__custom.is-on { border-color: var(--bone); }
/* The picked colour, shown inside the rainbow so the swatch still says "any colour". */
.kit__custom.is-on::after { content: ''; position: absolute; inset: 5px; border-radius: 4px; background: var(--s); box-shadow: 0 0 0 2px rgba(14, 18, 20, 0.55); pointer-events: none; }
.kit__input {
  width: 100%; min-height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--rule-2); background: var(--ground);
  color: var(--bone); font: 500 0.9375rem var(--font-body);
}
.kit__input:focus { outline: none; border-color: var(--core); }
.kit__row--toggles { align-items: start; }
.kit__row--toggles > .kit__label { padding-top: 0.45rem; }
.kit__row--toggles { grid-template-columns: 5.5rem 1fr; }
.kit__row--toggles .toggle:first-of-type { grid-column: 2; }
.kit__row--toggles .toggle { grid-column: 2; }
.toggle { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.9375rem; color: var(--bone-2); cursor: pointer; }
.toggle input { appearance: none; width: 38px; height: 22px; border-radius: 999px; background: var(--panel-3); border: 1px solid var(--rule-2); position: relative; cursor: pointer; flex: none; transition: background 0.2s; }
.toggle input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bone-2); transition: transform 0.2s var(--ease-out), background 0.2s; }
.toggle input:checked { background: var(--core-deep); border-color: var(--core); }
.toggle input:checked::after { transform: translateX(16px); background: #fff; }
.toggle input:focus-visible { outline: 2px solid var(--core); outline-offset: 2px; }
.kit__board { padding-bottom: 12px; }
.dc-msg--flat { margin-top: 0; padding-top: 12px; }
.dc-msg--flat:hover { background: none; }
.premium__note { font-size: 0.875rem; color: var(--bone-3); text-align: center; }
@media (max-width: 1000px) { .premium__grid { grid-template-columns: 1fr; } .premium__preview { position: static; } }
@media (max-width: 560px) { .perks { grid-template-columns: 1fr; } .plans { grid-template-columns: 1fr 1fr 1fr; } .plan__price { font-size: 1.6rem; } .kit__row { grid-template-columns: 1fr; gap: 0.4rem; } .kit__row--toggles .toggle { grid-column: 1; } }

/* ------------------------------------------------------------------ updates */

.updates__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.updates__head { position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); }
.updates__list { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--rule-2); }
.updates__list > li { border-bottom: 1px solid var(--rule-2); }
.release summary {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: baseline; gap: 1rem; padding: 1.2rem 0.25rem;
  cursor: pointer; list-style: none;
}
.release summary::-webkit-details-marker { display: none; }
.release__v { font: 800 1.35rem/1 var(--font-display); letter-spacing: -0.02em; color: var(--bone-3); font-variant-numeric: tabular-nums; }
.release[open] .release__v, .release summary:hover .release__v { color: var(--core); }
.release__name { font-weight: 700; font-size: 1.0625rem; }
.release__headline { display: block; margin-top: 0.2rem; font-size: 0.9375rem; color: var(--bone-2); font-weight: 400; }
.release__chev { width: 12px; height: 12px; border-right: 2px solid var(--bone-3); border-bottom: 2px solid var(--bone-3); transform: rotate(45deg); transition: transform 0.2s; margin-right: 6px; }
.release[open] .release__chev { transform: rotate(225deg); }
.release__changes { list-style: none; display: grid; gap: 0.9rem; padding: 0 0.25rem 1.5rem 5.5rem; }
.release__changes h3 { font-size: 0.9875rem; font-weight: 700; font-family: var(--font-body); }
.release__changes p { margin-top: 0.2rem; font-size: 0.9375rem; color: var(--bone-2); }
@media (max-width: 900px) { .updates__grid { grid-template-columns: 1fr; } .updates__head { position: static; } }
@media (max-width: 560px) { .release summary { grid-template-columns: 3.4rem minmax(0, 1fr) auto; } .release__changes { padding-left: 0.25rem; } }

/* ------------------------------------------------------------------ commands */

.commands__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 2rem; }
.search { display: flex; align-items: center; gap: 10px; flex: 1 1 280px; max-width: 420px; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--rule-2); background: var(--panel); color: var(--bone-3); }
.search:focus-within { border-color: var(--core); outline: 2px solid var(--core); outline-offset: 3px; }
.search svg { width: 18px; height: 18px; flex: none; }
.search input { flex: 1; min-width: 0; height: 44px; border: 0; background: none; color: var(--bone); font: 500 1rem var(--font-body); outline: none; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.commands__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; margin-top: 1.5rem; }
.commands__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.commands__list code { justify-self: start; font-size: 0.9375rem; white-space: normal; }
.commands__list p { grid-column: 1; font-size: 0.9375rem; color: var(--bone-2); }
.commands__list .who { grid-column: 2; grid-row: 1; align-self: center; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.09em; font-size: 0.6875rem; text-transform: uppercase; color: var(--bone-3); }
.commands__list li[data-who='staff'] .who { color: #7cc7ff; }
.commands__list li[data-who='admin'] .who { color: var(--ember); }
.commands__list li[data-who='premium'] .who { color: var(--core); }
.commands__empty { margin-top: 1.5rem; color: var(--bone-3); }
@media (max-width: 820px) { .commands__list { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ faq */

.faq__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.faq__list { display: grid; border-top: 1px solid var(--rule-2); }
.faq__list details { border-bottom: 1px solid var(--rule-2); }
.faq__list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 0.25rem;
  font-weight: 700; font-size: 1.0625rem; cursor: pointer; list-style: none;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: '+'; font: 500 1.4rem/1 var(--font-mono); color: var(--bone-3); transition: transform 0.2s; }
.faq__list details[open] summary::after { content: '−'; color: var(--core); }
.faq__list details p { padding: 0 0.25rem 1.25rem; color: var(--bone-2); max-width: 40em; }
@media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ call to action and footer */

.cta { padding-block: clamp(4rem, 3rem + 6vw, 8rem); border-top: 1px solid var(--rule); }
.cta__inner { display: grid; justify-items: center; text-align: center; gap: 1.1rem; }
.cta__art { width: clamp(120px, 14vw, 180px); height: auto; margin-bottom: 0.5rem; }
.cta .lede { margin-inline: auto; }
.cta__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-top: 0.8rem; }
.foot { border-top: 1px solid var(--rule); padding-block: 2rem calc(2rem + env(safe-area-inset-bottom, 0px)); }
.foot__inner { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1rem 2rem; align-items: center; }
/* The loader's grass block, hopping about on top of the footer on every page, standing on
   its top edge. It minds being poked (loader.js). */
.foot__block { position: absolute; right: 0; bottom: calc(100% + 2rem - 1px); line-height: 0; }
.foot__block .blocky--tiny { width: 30px; margin: 0; vertical-align: bottom; }
.foot__brand { display: inline-flex; align-items: center; gap: 0.5rem; font: 800 1rem var(--font-display); letter-spacing: -0.02em; }
.foot__brand img { width: 22px; height: 25px; }
.foot__by { margin-left: 0.4rem; font: 500 0.8125rem var(--font-body); color: var(--bone-3); letter-spacing: 0; }
/* On a phone the credit goes under the name, so the name stays on one line. */
@media (max-width: 560px) {
  .foot__brand { flex-wrap: wrap; }
  .foot__by { flex-basis: 100%; margin: 0.2rem 0 0; }
}
.foot__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem 1.2rem; }
.foot__links a { color: var(--bone-2); text-decoration: none; font-size: 0.9375rem; }
.foot__links a:hover { color: var(--core); }
.foot__small { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--bone-3); }
.foot__theme { grid-column: 1 / -1; font-size: 0.875rem; color: var(--bone-2); }
/* The brand and its credit take about 480px; narrower than the site's wide layout the links would wrap ragged beside them, so they go under. */
@media (max-width: 1023px) { .foot__inner { grid-template-columns: 1fr; } .foot__links { justify-content: flex-start; } }

/* ------------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Scroll motion (js/motion.js): only under `motion`, which the head sets unless reduced
   motion is asked for, so without it everything simply sits in place. */
.motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease-out) var(--delay, 0ms), transform 0.9s var(--ease-out) var(--delay, 0ms); }
.motion .reveal.is-in { opacity: 1; transform: none; }
.motion .hero__copy, .motion .hero__stage, .motion .page-head > .wrap, .motion .cta__art { will-change: transform; }

/* A hidden game found, said once its game is closed (secrets.js): how many of them there
   are, a square for each lit once found, and a nudge towards the rest. */
.found { width: min(440px, calc(100vw - 32px)); max-width: none; margin: auto; padding: 0; border: 0; background: transparent; color: var(--bone); overflow: visible; }
.found::backdrop { background: rgba(8, 11, 12, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.found[open] { animation: look-in 0.35s var(--ease-out); }
.found__box { padding: 28px 26px 24px; border-radius: 20px; border: 1px solid rgba(var(--core-rgb), 0.35); background: var(--panel); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6), 0 0 0 6px rgba(var(--core-rgb), 0.06); text-align: center; }
.found__squares { display: inline-flex; gap: 8px; margin-bottom: 14px; }
.found__squares i { width: 16px; height: 16px; background: rgba(var(--core-rgb), 0.14); box-shadow: inset 0 0 0 1.5px rgba(var(--core-rgb), 0.45); }
.found__squares i.is-found { background: var(--core); box-shadow: 0 0 0 4px rgba(var(--core-rgb), 0.16); }
.found__squares i.is-new { animation: found-pop 0.7s 0.2s var(--ease-out) both; }
@keyframes found-pop { 0% { transform: scale(0.2); } 60% { transform: scale(1.5); } 100% { transform: none; } }
.found__eyebrow { font: 700 0.75rem/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--core); }
.found__title { margin-top: 0.5rem; font: 800 1.75rem/1.15 var(--font-display); letter-spacing: -0.02em; }
.found__text { margin-top: 0.8rem; color: var(--bone-2); }
.found__box .btn { margin-top: 1.4rem; min-width: 10rem; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .found[open], .found__squares i.is-new { animation: none; } }

/* ------------------------------------------------------------------ the playground
 * A Discord server with the bot in it (playground.js): a rail of servers, the channels, and
 * each channel a working demo. The chat inside is the Discord replica above; around it,
 * Discord's own greys. */

.page-head--play { padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.play-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 1rem + 4vw, 5rem); align-items: end; }
.play-head .page-head__title { font-size: var(--step-4); margin-top: 1rem; }
.play-head .lede { margin-top: 1.1rem; max-width: 36em; }
.play-head__go { display: grid; gap: 10px; }
.play-head__go a {
  position: relative; display: grid; gap: 2px; padding: 14px 44px 14px 18px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--rule-2); color: var(--bone); text-decoration: none;
  transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease-out);
}
.play-head__go a::after { content: '→'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--bone-3); transition: transform 0.2s var(--ease-out), color 0.2s; }
.play-head__go a:hover { border-color: rgba(var(--core-rgb), 0.45); transform: translateX(2px); }
.play-head__go a:hover::after { color: var(--core); transform: translate(3px, -50%); }
.play-head__go a.is-on { border-color: rgba(var(--core-rgb), 0.55); background: linear-gradient(var(--core-wash), var(--core-wash)), var(--panel); }
.play-head__go a.is-on::after { color: var(--core); }
.play-head__go b { font: 700 1rem/1.3 var(--font-display); }
.play-head__go span { font-size: 0.875rem; color: var(--bone-2); }
@media (max-width: 900px) {
  .play-head { grid-template-columns: 1fr; }
  .play-head__go { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .play-head__go a { padding: 12px 14px; }
  .play-head__go a::after { display: none; }
}
@media (max-width: 600px) {
  .play-head__go { grid-template-columns: 1fr; gap: 8px; }
  .play-head__go a { grid-template-columns: auto 1fr; align-items: baseline; gap: 10px; }
}

.play { padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.play__note { margin-top: 14px; text-align: center; font-size: 0.8125rem; color: var(--bone-3); }
.app {
  --rail: 72px; --side: 240px; --members: 232px;
  scroll-margin-top: calc(80px + env(safe-area-inset-top, 0px));
  --dc-font: 'gg sans', 'Figtree', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative; display: grid; grid-template-columns: var(--rail) var(--side) minmax(0, 1fr) var(--members);
  height: clamp(600px, 82svh, 860px); border-radius: 14px; overflow: hidden;
  background: var(--dc-chat); color: var(--dc-text); font-family: var(--dc-font);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 40px 90px -36px rgba(0, 0, 0, 0.75), 0 0 0 7px rgba(var(--core-rgb), 0.05);
}
/* Servers down the side: home for the DMs, then the shop's server. */
.app__rail { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; background: #1e1f22; }
.app__rail-rule { width: 32px; height: 2px; border-radius: 1px; background: #35363c; }
.app__server {
  position: relative; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: #313338; color: #dbdee1; font: 600 0.875rem var(--dc-font); cursor: pointer;
  transition: border-radius 0.2s, background 0.2s, color 0.2s;
}
.app__server::before {
  content: ''; position: absolute; left: -12px; top: 50%; width: 4px; height: 0; border-radius: 0 4px 4px 0; background: #f2f3f5;
  transform: translateY(-50%); transition: height 0.2s;
}
.app__server:hover::before { height: 20px; }
.app__server.is-on::before { height: 40px; }
.app__server:hover, .app__server.is-on { border-radius: 16px; }
.app__server img { width: 30px; height: auto; }
.app__server[data-server] { background: #111618; }
.app__server--icon { overflow: hidden; }
.app__server--icon img { width: 100%; height: 100%; object-fit: cover; }
.app__server--home svg { width: 26px; height: 26px; fill: currentColor; }
.app__server--home:hover, .app__server--home.is-on { background: var(--dc-blurple); color: #fff; }
.app__server--ghost { cursor: default; color: #949ba4; }
.app__server--ghost:hover { border-radius: 50%; }
.app__server--ghost::before, .app__server--add::before { display: none; }
.app__server--add { cursor: default; color: var(--core); font-size: 1.5rem; font-weight: 400; }
/* The channels. */
.app__side { display: flex; flex-direction: column; min-height: 0; background: #2b2d31; }
.app__list { position: relative; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #1a1b1e transparent; }
.app__list[hidden] { display: none; }
.app__server-name {
  display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 16px;
  font-weight: 600; color: #f2f3f5; box-shadow: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05);
}
.app__server-name svg { width: 18px; height: 18px; fill: currentColor; }
.app__chans { display: grid; gap: 2px; padding: 4px 8px 16px; }
.app__cat { margin: 14px 8px 4px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: #949ba4; }
.app__chan {
  display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 8px; border: 0; border-radius: 4px;
  background: transparent; color: #949ba4; font: 500 1rem var(--dc-font); text-align: left; cursor: pointer;
}
.app__chan > span { font-size: 1.25rem; line-height: 1; color: #80848e; }
.app__chan > svg { width: 20px; height: 20px; flex: none; fill: #80848e; }
.discord__hash svg { width: 22px; height: 22px; fill: currentColor; vertical-align: -4px; }
.dc-welcome__icon svg { width: 42px; height: 42px; fill: currentColor; }
/* A channel that is only in the real server: where to find it. */
.app__away-join { justify-self: start; margin-top: 16px; }
.app__chan i { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app__chan:hover { background: #35373c; color: #dbdee1; }
.app__chan.is-on { background: #404249; color: #fff; }
.app__chan--dm { min-height: 42px; gap: 12px; margin-top: 6px; }
.app__chan--dm img { width: 32px; height: 32px; border-radius: 50%; background: #111618; padding: 3px; }
.app__chan--dm { white-space: nowrap; }
.app__chan .dc-app, .app__member .dc-app { font-size: 0.625rem; color: #fff; }
.app .discord__title { white-space: nowrap; }
/* A channel with few messages: Discord's welcome at the top, the messages from the bottom. */
.app :is([data-view='ad'], [data-view='prices'], [data-view='trading'], [data-view='away']) .discord__log { display: flex; flex-direction: column; }
.app :is([data-view='ad'], [data-view='prices'], [data-view='trading'], [data-view='away']) .dc-welcome { margin-top: auto; }
/* The owners as the server shows them: the crown, and Joystiick's own name style and tag. */
.app__member-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app__member-name--joystiick {
  background: linear-gradient(90deg, #c87112, #f4a318 35%, #ffc400 65%, #ffee47); -webkit-background-clip: text; background-clip: text;
  color: transparent; font-weight: 600;
}
.app__tag, .app__member img.app__tag { width: 14px; height: 14px; margin-left: 2px; padding: 0; border-radius: 0; background: none; image-rendering: pixelated; flex: none; }
.app__tag-text { margin-left: -8px; padding: 0 4px 0 2px; font-size: 0.6875rem; font-weight: 700; color: #dbdee1; flex: none; }
.dc-meta .app__tag { margin-left: 6px; }
.dc-meta .app__tag-text { margin-left: 0; }
.app__crown { width: 14px; height: 14px; flex: none; margin-left: -6px; fill: #f0b232; }
.dc-avatar--user { padding: 0; object-fit: cover; }
.dc-welcome { padding: 16px 16px 8px; }
.dc-welcome__icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: #41434a; color: #fff; font-size: 2.6rem; font-weight: 300; line-height: 1; }
.dc-welcome__title { margin-top: 8px; font-size: 2rem; font-weight: 700; line-height: 1.25; color: #f2f3f5; }
.dc-welcome__text { margin-top: 4px; color: #b5bac1; }
@media (max-width: 1360px) { .app .discord__topic { display: none; } }
@media (max-width: 899px) { .dc-welcome__icon { width: 52px; height: 52px; font-size: 2rem; } .dc-welcome__title { font-size: 1.5rem; } }
.app__me { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 8px; background: #232428; }
.app__me-face, .app__member-face {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--face, var(--core)); color: #111418; font-weight: 700; font-size: 0.875rem;
}
.app__me-face { background: var(--dc-blurple); color: #fff; }
.app__me-name b { display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.2; color: #f2f3f5; }
.app__me-name small { font-size: 0.75rem; color: #b5bac1; }
/* The channel itself: the replica, filling the window. */
.app__views { position: relative; min-width: 0; min-height: 0; }
.app__view { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.app__view[hidden] { display: none; }
.app .discord { display: flex; flex-direction: column; flex: 1; width: 100%; max-width: none; min-height: 0; border-radius: 0; box-shadow: none; background: transparent; }
.app .discord__log, .app .discord__log--tall { flex: 1; height: auto; min-height: 0; }
.app__menu { display: none; place-items: center; width: 32px; height: 32px; margin-left: -6px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #b5bac1; cursor: pointer; }
.app__menu svg { width: 24px; height: 24px; fill: currentColor; }
.app__menu:hover { color: #fff; }
/* What to try, as Discord would offer it: its grey buttons. */
.app__try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 16px 16px; }
.app__try-label { margin-right: 4px; font: 600 0.75rem var(--dc-font); letter-spacing: 0.02em; text-transform: uppercase; color: var(--dc-muted); }
.app__try .chip {
  min-height: 32px; padding: 2px 12px; border: 0; border-radius: 8px; background: var(--dc-grey); color: #fff;
  font: 500 0.875rem/1.125rem var(--dc-font);
}
.app__try .chip:hover { background: var(--dc-grey-hi); color: #fff; border: 0; }
/* A note under a channel, the way Discord puts one above the message box. */
.app__demo-bar {
  display: flex; align-items: center; gap: 14px; margin: 0 16px 16px; padding: 10px 12px 10px 16px; border-radius: 8px;
  background: var(--dc-embed); border: 1px solid var(--dc-rule); border-left: 4px solid var(--dc-blurple);
}
.app__demo-text { flex: 1; font: 400 0.875rem/1.375 var(--dc-font); color: var(--dc-text); }
.app__demo-bar .dc-btn { flex: none; }
[data-board-embed].is-edited .dc-embed { animation: board-edit 1.4s var(--ease-out); }
/* An edited message lights up the way Discord highlights one it jumps to. */
@keyframes board-edit { 0% { box-shadow: 0 0 0 2px var(--dc-blurple), 0 0 24px rgba(88, 101, 242, 0.35); } 100% { box-shadow: 0 0 0 0 transparent; } }
/* A message lights up under the pointer, as in Discord. */
.app .dc-msg:hover { background: rgba(2, 2, 2, 0.06); }
/* The deal's controls in the member list's place, drawn with Discord's own parts: its section
   headers, its segmented control, an info box in blurple and its green for done. */
.app__view--desk .desk__label, .app__view--desk .desk__next-who { font: 600 0.75rem var(--dc-font); letter-spacing: 0.02em; text-transform: uppercase; color: var(--dc-muted); }
.app__view--desk .seg { padding: 2px; gap: 2px; border-radius: 8px; border: 0; background: var(--dc-deep); }
.app__view--desk .seg button { border-radius: 6px; color: #b5bac1; font-family: var(--dc-font); }
.app__view--desk .seg button:hover { background: #35373c; color: #dbdee1; }
.app__view--desk .seg button[aria-pressed='true'] { background: #404249; color: #fff; box-shadow: none; }
.app__view--desk .seg button small { color: var(--dc-muted); }
.app__view--desk .seg button[aria-pressed='true'] small { color: #dbdee1; }
.app__view--desk .desk__next { border-radius: 8px; background: rgba(88, 101, 242, 0.1); border: 1px solid var(--dc-blurple); }
.app__view--desk .desk__next-who { color: #c9cdfb; }
.app__view--desk .desk__next-what { font-family: var(--dc-font); color: var(--dc-text); }
.app__view--desk .desk__switch { border: 0; border-radius: 8px; background: var(--dc-blurple); color: #fff; font: 500 0.875rem var(--dc-font); }
.app__view--desk .desk__switch:hover { background: var(--dc-blurple-hi); }
.app__view--desk .desk__stages li { font-family: var(--dc-font); color: var(--dc-muted); }
.app__view--desk .desk__stages li::before { background: var(--dc-rule); }
.app__view--desk .desk__stages li.is-done::before { background: #23a55a; }
.app__view--desk .desk__dot { border-color: #4e5058; background: var(--dc-deep); border-radius: 50%; }
.app__view--desk .desk__stages li.is-done .desk__dot { background: #23a55a; border-color: #23a55a; }
.app__view--desk .desk__stages li.is-done .desk__dot::after { border-color: #fff; }
.app__view--desk .desk__stages li.is-now { color: var(--dc-head); }
.app__view--desk .desk__stages li.is-now .desk__dot { border-color: var(--dc-blurple); box-shadow: 0 0 0 4px rgba(88, 101, 242, 0.25); }
.app__view--desk .desk__stages small { color: #b5bac1; }
/* The practice deal: its controls where the member list would be. */
.app__view--desk { flex-direction: row; }
.app__view--desk .desk__panel {
  position: static; flex: none; width: 288px; overflow-y: auto; padding: 18px 16px; gap: 1.2rem; background: #2b2d31;
  scrollbar-width: thin; scrollbar-color: #1a1b1e transparent;
}
.app[data-view-now='ticket'] .app__members { display: none; }
.app[data-view-now='ticket'] .app__views { grid-column: 3 / 5; }
.app__members { overflow-y: auto; padding: 4px 8px 16px; background: #2b2d31; }
.app__member { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 8px; border-radius: 4px; color: #949ba4; font-weight: 500; }
.app__member img { width: 32px; height: 32px; border-radius: 50%; background: #111618; padding: 3px; }
.app__member .dc-app { margin-left: -6px; }
.app__scrim { display: none; }
@media (max-width: 1199px) {
  .app { grid-template-columns: var(--rail) var(--side) minmax(0, 1fr); }
  .app__members { display: none; }
  .app[data-view-now='ticket'] .app__views { grid-column: auto; }
  .app__view--desk .desk__panel { width: 256px; }
}
/* A phone: the channel, full width, and the channels a drawer pulled out from its bar. */
@media (max-width: 899px) {
  .play .wrap { padding-inline: 0; }
  .play__note { padding-inline: var(--gutter); }
  .app { grid-template-columns: minmax(0, 1fr); height: min(86svh, 760px); border-radius: 0; }
  .app__rail, .app__side { position: absolute; top: 0; bottom: 0; z-index: 5; transform: translateX(-120%); transition: transform 0.28s var(--ease-out); }
  .app__rail { left: 0; width: var(--rail); }
  /* Put away past the rail too, not just its own width, or its edge would show. */
  .app__side { left: var(--rail); width: min(260px, calc(100% - var(--rail) - 48px)); transform: translateX(calc(-100% - var(--rail) - 16px)); }
  .app.is-side .app__rail, .app.is-side .app__side { transform: none; }
  .app__scrim { display: block; position: absolute; inset: 0; z-index: 4; padding: 0; border: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.28s; }
  .app.is-side .app__scrim { opacity: 1; pointer-events: auto; }
  .app__menu { display: grid; }
  .app .discord__demo { display: none; }
  .app__view--desk { flex-direction: column; }
  /* Under the chat, where a thumb is, and never wider than the phone. */
  .app__view--desk .desk__panel { width: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; padding: 10px 12px 12px; overflow: visible; border-top: 1px solid #1f2023; }
  .app__view--desk .desk__group { min-width: 0; gap: 4px; }
  .app__view--desk .seg button { padding: 6px 4px; font-size: 0.8125rem; min-width: 0; }
  .app__view--desk .desk__label { font-size: 0.6875rem; }
  .app__view--desk .desk__next { grid-column: 1 / -1; padding: 0.6rem 0.8rem; }
  .app__view--desk .desk__next-what { font-size: 0.875rem; }
  .app__view--desk .desk__stages { display: none; }
  .app__demo-bar { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .app__rail, .app__side, .app__scrim { transition: none; } [data-board-embed].is-edited .dc-embed { animation: none; } }

/* After the server: add it. */
.play-cta { padding-top: 0; }
.play-cta__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem); border-radius: 22px; border: 1px solid rgba(var(--core-rgb), 0.25);
  background: linear-gradient(var(--core-wash), var(--core-wash)), var(--panel);
}
.play-cta__inner .lede { margin-top: 0.6rem; }
.play-cta__go { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------------ the spawner game */

/* Tapped hard enough, the hero spawner charges: a meter under it fills while the taps keep
   coming and drains when they stop. Full, the spawner overloads into the game. */
.hero__charge {
  position: absolute; z-index: 2; left: var(--island-x, 72%); bottom: 7%; transform: translate(-50%, 6px);
  display: inline-flex; align-items: center; gap: 10px; padding: 0.45rem 0.9rem; border-radius: 999px;
  border: 1px solid rgba(var(--core-rgb), 0.45); background: rgba(14, 18, 20, 0.78); color: var(--core);
  font: 700 0.8125rem/1 var(--font-body); white-space: nowrap; pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.25s, transform 0.25s var(--ease-out);
}
.hero__charge.is-on { opacity: 1; transform: translate(-50%, 0); }
.hero__charge i { display: block; width: 92px; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(var(--core-rgb), 0.18); }
.hero__charge b { display: block; height: 100%; background: linear-gradient(90deg, var(--core), var(--ember)); transform: scaleX(0); transform-origin: left; }
.hero__charge.is-on ~ .hero__hint { opacity: 0; }
@media (max-width: 1023px) { .hero__charge { left: 50%; bottom: 1rem; } }

html.is-gaming { overflow: hidden; }
.game {
  position: fixed; inset: 0; z-index: 200; background: var(--ground); color: var(--bone);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  /* It opens out of the spawner, a circle growing from where it stood on the page. */
  clip-path: circle(0 at var(--gx, 50%) var(--gy, 50%)); animation: game-open 0.8s cubic-bezier(.6, 0, .2, 1) forwards;
}
@keyframes game-open { to { clip-path: circle(150vmax at var(--gx, 50%) var(--gy, 50%)); } }
.game__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.game__hud {
  position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px; pointer-events: none;
}
.game__score { justify-self: start; }
.game__money { font: 800 clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem)/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.game__combo { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 700 0.9375rem/1 var(--font-mono); color: var(--core); opacity: 0.35; transition: opacity 0.2s; transform-origin: left center; }
.game__combo.is-on { opacity: 1; }
.game__streak { display: block; width: 64px; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(236, 231, 218, 0.14); }
.game__streak b { display: block; height: 100%; background: var(--core); transform-origin: left; }
.game__clock { justify-self: center; text-align: center; }
.game__time { font: 800 1.5rem/1 var(--font-mono); font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.game__timebar { width: 120px; height: 4px; margin-top: 8px; border-radius: 2px; overflow: hidden; background: rgba(236, 231, 218, 0.14); }
.game__timebar b { display: block; height: 100%; background: var(--bone-2); transform-origin: left; }
.game.is-frenzy .game__time { color: var(--ember); }
.game.is-frenzy .game__timebar b { background: var(--ember); }
.game__pause { justify-self: end; pointer-events: auto; }
.game__btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule-2);
  background: rgba(21, 28, 31, 0.82); color: var(--bone); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.game__btn svg { width: 18px; height: 18px; fill: currentColor; }
.game__btn:hover { border-color: rgba(var(--core-rgb), 0.5); color: var(--core); }
.game__btn:focus-visible, .game .btn:focus-visible { outline: 2px solid var(--core); outline-offset: 3px; }
.game__heat {
  position: absolute; top: calc(max(14px, env(safe-area-inset-top, 0px)) + 52px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; font: 600 0.75rem/1 var(--font-body); color: var(--bone-3); pointer-events: none;
}
.game__heatbar { width: 84px; height: 5px; border-radius: 3px; overflow: hidden; background: rgba(236, 231, 218, 0.12); }
.game__heatbar b { display: block; height: 100%; background: linear-gradient(90deg, var(--core), var(--ember)); transform-origin: left; transform: scaleX(0); }
.game__heat.is-warm { color: var(--ember); }
.game.is-hot .game__heatbar b { background: var(--redstone); animation: heat-blink 0.4s steps(2) infinite; }
@keyframes heat-blink { 50% { opacity: 0.45; } }
.game__loot {
  position: absolute; bottom: max(16px, env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: max-content; max-width: calc(100% - 32px); pointer-events: none;
}
.game__count {
  display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 7px; border-radius: 999px; border: 1px solid var(--rule-2);
  background: rgba(21, 28, 31, 0.82); font: 700 0.9375rem/1 var(--font-mono); font-variant-numeric: tabular-nums;
  animation: count-in 0.3s var(--ease-out);
}
@keyframes count-in { from { opacity: 0; transform: translateY(8px); } }
.game__icon { width: 22px; height: 22px; flex: none; image-rendering: pixelated; }
.game__fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.game__float { position: absolute; font: 800 1.125rem/1 var(--font-display); color: var(--bone); white-space: nowrap; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55); }
.game__float.is-combo { color: var(--core); font-size: 1.3rem; }
.game__float.is-bad { color: var(--redstone); font-size: 1rem; }
.game__flyer { position: absolute; width: 26px; height: 26px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45)); }
.game__ripple { position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(236, 231, 218, 0.55); }
.game__call {
  position: absolute; left: 50%; top: 36%; margin: 0; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  font: 800 clamp(2.2rem, 1.4rem + 3.4vw, 4rem)/1 var(--font-display); letter-spacing: -0.02em; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
  opacity: 0; transition: opacity 0.35s;
}
.game__call.is-on { opacity: 1; }
.game__call.is-combo { color: var(--core); }
.game__call.is-frenzy, .game__call.is-hot { color: var(--ember); }
.game__call.is-bad { color: var(--redstone); }
.game__screen { position: absolute; inset: 0; display: none; place-items: center; padding: 20px; background: rgba(10, 13, 14, 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.game.has-screen .game__screen { display: grid; }
.game.has-screen :is(.game__hud > :not(.game__pause), .game__heat) { opacity: 0.35; }
.game__card {
  width: min(31rem, 100%); max-height: 100%; overflow-y: auto; padding: clamp(20px, 5vw, 32px); border-radius: 20px; text-align: center;
  border: 1px solid var(--rule-2); background: var(--panel); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6); animation: card-in 0.45s var(--ease-out);
}
@keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.game__eyebrow { font: 700 0.75rem/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--core); }
.game__title { margin-top: 10px; font: 800 clamp(1.8rem, 1.3rem + 2vw, 2.5rem)/1.05 var(--font-display); letter-spacing: -0.02em; }
.game__rules { display: grid; gap: 12px; margin: 22px 0 26px; padding: 0; list-style: none; text-align: left; color: var(--bone-2); }
.game__rules li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.45; }
.game__rules .game__icon { width: 24px; height: 24px; margin-top: 1px; }
.game__go { min-width: 12rem; justify-content: center; }
.game__go:disabled { opacity: 0.45; cursor: default; transform: none; }
.game__small { margin-top: 14px; font-size: 0.875rem; color: var(--bone-3); }
.game__countdown span { display: block; font: 800 clamp(5rem, 3rem + 9vw, 9rem)/1 var(--font-display); color: var(--bone); text-shadow: 0 6px 0 rgba(0, 0, 0, 0.35); }
.game__final { margin-top: 10px; font: 800 clamp(3rem, 2rem + 5vw, 4.6rem)/1 var(--font-display); letter-spacing: -0.03em; color: var(--core); font-variant-numeric: tabular-nums; }
.game__best { margin-top: 10px; color: var(--bone-2); }
.game__best.is-new { color: var(--gold); font-weight: 700; }
.game__tally { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--bone-2); }
.game__tally li { display: flex; align-items: center; gap: 7px; }
.game__tally b { color: var(--bone); font-family: var(--font-mono); }
.game__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 22px 0 0; }
.game__stats div { padding: 10px 6px; border-radius: 12px; background: var(--panel-2); }
.game__stats dt { font-size: 0.75rem; color: var(--bone-3); }
.game__stats dd { margin: 4px 0 0; font: 800 1.25rem/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.game__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
@media (max-width: 420px) { .game__stats { grid-template-columns: repeat(2, 1fr); } .game__timebar { width: 90px; } }

/* ------------------------------------------------------------------ the block loader
   A little tower that builds itself while a build is read (loader.js): dirt, then stone,
   then a grass block with a face, each dropping in and landing with a squash and a puff of
   dust. The grass block looks about and blinks, then the tower hops and is gone, and it
   starts again. Three seconds round. The tiny one hops on the spot beside a line of text. */
.blocky { display: block; width: 72px; height: auto; margin: 0 auto 14px; overflow: visible; }
.blocky--tiny { display: inline-block; width: 1.35em; margin: 0 0.45em 0 0; vertical-align: -0.35em; }
.blocky :is(.blocky__drop, .blocky__squash, .blocky__hop, .blocky__eyes, .blocky__speck, .blocky__shadow, .blocky__tower) { transform-box: fill-box; }
.blocky :is(.blocky__squash, .blocky__hop, .blocky__tower) { transform-origin: 50% 100%; }
.blocky :is(.blocky__eyes, .blocky__shadow) { transform-origin: 50% 50%; }
.blocky__drop, .blocky__squash, .blocky__tower, .blocky__shadow, .blocky__eyes, .blocky__speck { animation: 3s linear infinite both; }
.blocky__drop--1 { animation-name: blocky-drop-1; }
.blocky__drop--2 { animation-name: blocky-drop-2; }
.blocky__drop--3 { animation-name: blocky-drop-3; }
.blocky__squash--1 { animation-name: blocky-squash-1; }
.blocky__squash--2 { animation-name: blocky-squash-2; }
.blocky__squash--3 { animation-name: blocky-squash-3; }
.blocky__tower { animation-name: blocky-tower; }
.blocky__shadow { animation-name: blocky-shadow; }
.blocky:not(.blocky--tiny) .blocky__eyes { animation-name: blocky-look; }
.blocky__speck { opacity: 0; animation-duration: 3s; animation-fill-mode: none; }   /* unseen until its block lands */
.blocky__speck--l { animation-name: blocky-dust-l; }
.blocky__speck--r { animation-name: blocky-dust-r; }
.blocky__dust--1 .blocky__speck { animation-delay: 0.3s; }
.blocky__dust--2 .blocky__speck { animation-delay: 0.9s; }
.blocky__dust--3 .blocky__speck { animation-delay: 1.5s; }
/* Falling, they speed up the way things fall; hidden until their turn. */
@keyframes blocky-drop-1 {
  0% { transform: translateY(-58px); opacity: 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  1% { opacity: 1; }
  10%, 100% { transform: none; opacity: 1; }
}
@keyframes blocky-drop-2 {
  0%, 19.9% { transform: translateY(-58px); opacity: 0; }
  20% { transform: translateY(-58px); opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  30%, 100% { transform: none; opacity: 1; }
}
@keyframes blocky-drop-3 {
  0%, 39.9% { transform: translateY(-58px); opacity: 0; }
  40% { transform: translateY(-58px); opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  50%, 100% { transform: none; opacity: 1; }
}
/* Landing: flattened, then a little too tall, then itself. */
@keyframes blocky-squash-1 { 0%, 10% { transform: none; } 12% { transform: scale(1.16, 0.8); } 15.5% { transform: scale(0.95, 1.07); } 19%, 100% { transform: none; } }
@keyframes blocky-squash-2 { 0%, 30% { transform: none; } 32% { transform: scale(1.16, 0.8); } 35.5% { transform: scale(0.95, 1.07); } 39%, 100% { transform: none; } }
@keyframes blocky-squash-3 { 0%, 50% { transform: none; } 52% { transform: scale(1.2, 0.76); } 56% { transform: scale(0.93, 1.1); } 60%, 100% { transform: none; } }
/* The grass block looks one way, then the other, then back, and blinks. */
@keyframes blocky-look {
  0%, 60% { transform: none; }
  63%, 69% { transform: translateX(-2px); }
  72%, 78% { transform: translateX(2px); }
  81% { transform: none; }
  83% { transform: scaleY(0.12); }
  85%, 100% { transform: none; }
}
/* Done: a happy hop, and the tower puffs away to start again. */
@keyframes blocky-tower {
  0%, 88% { transform: none; opacity: 1; }
  91% { transform: translateY(-6px) scale(1.02, 0.98); }
  94% { transform: none; opacity: 1; }
  100% { transform: scale(0.55); opacity: 0; }
}
@keyframes blocky-shadow {
  0% { transform: scale(0.45); opacity: 0.2; }
  10%, 88% { transform: scale(1); opacity: 1; }
  91% { transform: scale(0.8); }
  94% { transform: scale(1); }
  100% { transform: scale(0.45); opacity: 0.2; }
}
@keyframes blocky-dust-l { 0% { opacity: 0.9; transform: none; } 7% { opacity: 0; transform: translate(-6px, -5px); } 100% { opacity: 0; } }
@keyframes blocky-dust-r { 0% { opacity: 0.9; transform: none; } 7% { opacity: 0; transform: translate(6px, -5px); } 100% { opacity: 0; } }
/* The tiny one: hops on the spot, squashing as it lands, and blinks now and then. */
.blocky--tiny .blocky__hop { animation: blocky-hop 0.9s cubic-bezier(0.33, 0, 0.67, 1) infinite; }
.blocky--tiny .blocky__squash { animation: blocky-land 0.9s linear infinite; }
.blocky--tiny .blocky__eyes { animation: blocky-blink 2.7s linear infinite; }
.blocky--tiny .blocky__shadow { animation: blocky-hop-shadow 0.9s cubic-bezier(0.33, 0, 0.67, 1) infinite; }
@keyframes blocky-hop { 0%, 12% { transform: none; } 50% { transform: translateY(-9px); } 88%, 100% { transform: none; } }
@keyframes blocky-land { 0% { transform: scale(1.14, 0.84); } 12% { transform: scale(0.94, 1.08); } 30%, 86% { transform: none; } 100% { transform: scale(1.14, 0.84); } }
@keyframes blocky-blink { 0%, 90% { transform: none; } 93% { transform: scaleY(0.12); } 96%, 100% { transform: none; } }
@keyframes blocky-hop-shadow { 0%, 12% { transform: none; opacity: 1; } 50% { transform: scale(0.6); opacity: 0.5; } 88%, 100% { transform: none; opacity: 1; } }
/* Poked, the grass block flinches; poked three times it dashes off (loader.js). Its own
   group, so this never fights the tower's animations for the same transform. */
.blocky [data-poke] { cursor: pointer; pointer-events: bounding-box; transform-box: fill-box; transform-origin: 50% 100%; }
.blocky.is-poked .blocky__me { animation: blocky-poked 0.42s ease-out; }
.blocky.is-poked .blocky__me .blocky__eyes { animation: blocky-wide 0.42s ease-out; }
.blocky.is-off .blocky__me { animation: blocky-dash 0.5s cubic-bezier(0.5, 0, 0.9, 0.4) forwards; }
@keyframes blocky-poked { 0% { transform: scale(1.18, 0.8); } 35% { transform: scale(0.9, 1.12) rotate(-6deg); } 70% { transform: rotate(4deg); } 100% { transform: none; } }
@keyframes blocky-wide { 0%, 60% { transform: scale(1.25, 1.35); } 100% { transform: none; } }
@keyframes blocky-dash { 0% { transform: none; } 25% { transform: translate(-3px, 1px) scale(1.1, 0.88); } 100% { transform: translate(60px, -10px) rotate(12deg); opacity: 0; } }
/* With less motion asked for, the tower simply stands there, finished, eyes open. */
@media (prefers-reduced-motion: reduce) {
  .blocky, .blocky * { animation: none !important; }
  .blocky__speck { opacity: 0; }
}

/* ------------------------------------------------------------------ a ticket's transcript */

/* /t/<code>: the transcript the bot DMs, drawn as the channel was, with its files to keep. */
.page-head--transcript .page-head__title { overflow-wrap: anywhere; }
.page-head--transcript .lede { color: var(--bone-2); font-size: var(--step-0); }
.transcript__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 1.25rem; }
.transcript__bar[hidden] { display: none; }
.transcript__keep { margin: 0; font-size: 0.9rem; color: var(--bone-2); max-width: 34em; }
.transcript__downloads { display: flex; flex-wrap: wrap; gap: 10px; }
.transcript__body { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.transcript__loader { display: block; margin: 3rem auto; }
.transcript__log { padding: 8px 0 20px; background: var(--dc-chat); border-radius: 8px; overflow: hidden; }
.transcript__log[hidden] { display: none; }
.transcript__log .dc-msg { overflow-wrap: anywhere; }
.transcript__log .dc-avatar--photo { padding: 0; object-fit: cover; }
.transcript__log .dc-avatar--letter { background: var(--dc-grey); color: var(--dc-head); }
.transcript__log .dc-embed { max-width: 520px; }
.transcript__log .dc-file__icon { font-size: 1.4rem; line-height: 1; }
.transcript__log .dc-file small { display: block; }
.transcript__empty { margin: 0; padding: 24px 16px; color: var(--dc-muted); }
@media (max-width: 560px) {
  .transcript__log .dc-msg { padding-left: 60px; padding-right: 10px; }
  .transcript__log .dc-avatar { left: 10px; }
  .transcript__downloads .btn { flex: 1 1 auto; }
}