@font-face {
  font-family: 'Press Start 2P';
  src: url('assets/fonts/press-start-2p-latin-400.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'VT323';
  src: url('assets/fonts/vt323-latin-400.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('assets/fonts/karla-latin-400.woff2') format('woff2');
  font-display: swap;
}

/* The app's default palette. Picking a lair swaps ember, gold, panel and
   border for that theme's own, the same four the app repaints. */
:root {
  --bg: #0a0a0f;
  --panel: #12111a;
  --inset: #0c0b12;
  --border: #2a2438;
  --border-hi: #3d3550;
  --text: #e8e0c8;
  --muted: #9a8e78;
  --ember: #f5820a;
  --gold: #ddc274;
  --rose: #c0392b;
  --leaf: #7fb069;
  --ink: #140f0c;
  --pixel: 'Press Start 2P', monospace;
  --voice: 'VT323', monospace;
  --plain: 'Karla', system-ui, sans-serif;
  --gutter: 16px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--plain);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
  transition: background-color .4s steps(4);
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--gold); }
a:hover { color: var(--ember); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Top bar ── */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px var(--gutter);
  background: linear-gradient(to bottom, rgba(10,10,15,.85), rgba(10,10,15,0));
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pixel);
  font-size: 12px;
  color: var(--gold);
  text-decoration: none;
}
.wordmark img { image-rendering: pixelated; }
.tunes {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pixel);
  font-size: 10px;
  color: var(--text);
  background: var(--panel);
  border: 3px solid var(--border-hi);
  box-shadow: 3px 3px 0 #000;
  padding: 8px 10px;
  cursor: pointer;
}
.tunes:hover { border-color: var(--gold); }
.tunes[aria-pressed="true"] { color: var(--ink); background: var(--gold); border-color: var(--ink); }
.tunes.nudge { animation: nudge 1s steps(2) infinite; }
@keyframes nudge { 50% { color: var(--ember); border-color: var(--ember); } }
.tunes .waves { display: none; }
.tunes[aria-pressed="true"] .waves { display: inline; }
.tunes[aria-pressed="true"] .mute { display: none; }

/* ── Hero ── */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 88px var(--gutter) 72px;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(10,10,15,.35), rgba(10,10,15,.8) 70%),
    linear-gradient(to bottom, rgba(10,10,15,.2), rgba(10,10,15,.2) 60%, var(--bg)),
    url('assets/art/vault.webp') center / cover no-repeat;
  overflow: hidden;
  text-align: center;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
}
.kicker {
  margin: 0 0 8px;
  font-family: var(--voice);
  font-size: 28px;
  color: var(--ember);
  text-shadow: 2px 2px 0 #000;
}
.chest {
  width: 144px;
  image-rendering: pixelated;
  filter: drop-shadow(6px 6px 0 rgba(0,0,0,.7));
  animation: bob 1.6s steps(2) infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.title {
  margin: 12px 0 0;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: clamp(48px, 13vw, 112px);
  line-height: 1;
  letter-spacing: .04em;
  color: var(--gold);
  text-shadow: 4px 4px 0 #7a3d06, 8px 8px 0 #000;
}
/* Valve's terms for the logo: their artwork only, pure white on a dark
   ground, never recoloured or redrawn, at least 50px tall, and a clear margin
   the width of the locomotive crank (about 19px at that height) with nothing
   inside it. The padding on .steam-mark is that margin, so hover repaints the
   frame and the date and leaves the logo alone. */
.steam-box {
  display: flex;
  align-items: stretch;
  margin: 0 0 26px;
  color: var(--gold);
  background: rgba(10,10,15,.85);
  border: 2px solid var(--gold);
  box-shadow: 3px 3px 0 #000;
  text-decoration: none;
}
.steam-mark { flex: none; padding: 20px; }
.steam-mark img { width: 165px; height: 50px; }
.steam-when {
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-left: 2px solid var(--border-hi);
  font-family: var(--pixel);
  font-size: 10px;
  line-height: 1.8;
  text-align: left;
  text-shadow: 1px 1px 0 #000;
}
.steam-box:hover { color: var(--ember); border-color: var(--ember); }
.tagline {
  margin: 20px 0 18px;
  font-family: var(--voice);
  font-size: clamp(26px, 5vw, 34px);
  line-height: 1.1;
  text-shadow: 2px 2px 0 #000;
}

.btn-dl {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  font-family: var(--pixel);
  font-size: clamp(12px, 3.4vw, 16px);
  line-height: 1.3;
  color: var(--ink);
  background: var(--ember);
  border: 4px solid var(--ink);
  box-shadow:
    inset -4px -4px 0 rgba(0,0,0,.3),
    inset 4px 4px 0 rgba(255,255,255,.3),
    6px 6px 0 #000;
  text-decoration: none;
  transition: transform .08s steps(1), box-shadow .08s steps(1);
}
.btn-dl:hover { color: var(--ink); background: var(--gold); }
.btn-dl:active {
  transform: translate(4px, 4px);
  box-shadow:
    inset -4px -4px 0 rgba(0,0,0,.3),
    inset 4px 4px 0 rgba(255,255,255,.3),
    2px 2px 0 #000;
}
/* Phones get a greyed button and a way to send the link on, in place of an
   installer they cannot run. */
.mobile-dl { display: none; }
.is-mobile .mobile-dl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.is-mobile .mobile-dl.start { align-items: flex-start; }
.is-mobile [data-dl],
.is-mobile .smartscreen { display: none; }
.is-mobile [data-dl-link] { color: inherit; text-decoration: none; }
.btn-dl.is-off {
  color: var(--muted);
  background: var(--panel);
  border-color: var(--border-hi);
  box-shadow: 6px 6px 0 #000;
  cursor: not-allowed;
}
.mobile-note {
  max-width: 420px;
  margin: 0;
  font-family: var(--voice);
  font-size: 24px;
  line-height: 1.15;
  text-shadow: 2px 2px 0 #000;
}
.btn-send {
  font-family: var(--pixel);
  font-size: 11px;
  line-height: 1.4;
  padding: 12px 14px;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 #000;
  cursor: pointer;
}
.btn-send:hover { background: var(--ember); }
.btn-send:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #000; }
.dl-meta {
  margin: 16px 0 0;
  font-family: var(--pixel);
  font-size: 10px;
  color: var(--muted);
  text-shadow: 1px 1px 0 #000;
}
/* The live version, struck in gold: a light sweeps across the letters and
   the badge breathes, so the newest build reads as treasure. */
.ver-tag {
  position: relative;
  display: inline-block;
  padding: 3px 7px 2px;
  margin-right: 2px;
  font-size: 12px;
  border: 2px solid #8a5a12;
  background: #1a1206;
  box-shadow: 2px 2px 0 #000, 0 0 10px rgba(240, 184, 48, 0.35);
  color: transparent;
  background-image: linear-gradient(100deg, #8a5a12 0%, #f0b830 30%, #fff6c8 45%, #f0b830 60%, #b07a12 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  animation: ver-sweep 2.6s linear infinite, ver-glow 1.8s ease-in-out infinite;
}
.ver-tag::before {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid #f0b830;
  opacity: 0;
  animation: ver-ring 1.8s ease-in-out infinite;
  pointer-events: none;
}
.ver-tag::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  width: 4px;
  height: 4px;
  background: #fff6c8;
  box-shadow: 0 -3px 0 #fff6c8, 0 3px 0 #fff6c8, -3px 0 0 #fff6c8, 3px 0 0 #fff6c8;
  transform: scale(0);
  animation: ver-glint 2.6s steps(1) infinite;
}
@keyframes ver-sweep { from { background-position: 125% 0; } to { background-position: -125% 0; } }
@keyframes ver-glow {
  0%, 100% { box-shadow: 2px 2px 0 #000, 0 0 8px rgba(240, 184, 48, 0.3); }
  50% { box-shadow: 2px 2px 0 #000, 0 0 18px rgba(240, 184, 48, 0.75); }
}
@keyframes ver-ring { 0%, 100% { opacity: 0; } 50% { opacity: 0.9; } }
@keyframes ver-glint { 0%, 70% { transform: scale(0); } 76% { transform: scale(0.6); } 82% { transform: scale(1); } 90%, 100% { transform: scale(0); } }
@media (prefers-reduced-motion: reduce) {
  .ver-tag, .ver-tag::before, .ver-tag::after { animation: none; }
  .ver-tag { background-position: 50% 0; }
}
.smartscreen {
  max-width: 460px;
  margin: 18px 0 0;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--text);
  background: rgba(10,10,15,.75);
  border: 2px solid var(--border-hi);
}
.smartscreen b { color: var(--gold); font-weight: 400; }

.scroll-cue {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  color: var(--gold);
  text-decoration: none;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Embers rising off the gold. Positions come from site.js so no two loads
   look the same. */
.embers { position: absolute; inset: 0; pointer-events: none; }
.embers i {
  position: absolute;
  bottom: -8px;
  width: 4px;
  height: 4px;
  background: var(--ember);
  box-shadow: 0 0 0 1px rgba(245,130,10,.25);
  animation: rise var(--d, 7s) steps(28) var(--delay, 0s) infinite;
}
@keyframes rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(var(--drift, 20px), -90vh); opacity: 0; }
}

/* ── Dialogue and panels ── */
main > section { margin: 72px 0; }
main > section.wrap { margin: 72px auto; }
main > section.wrap:first-child { margin-top: 24px; }

.dialog, .panel {
  position: relative;
  background: rgba(18,17,26,.94);
  border: 4px solid var(--border-hi);
  box-shadow: 0 0 0 4px #000, 10px 10px 0 4px #000;
}
.dialog {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  padding: 28px;
}
.portrait {
  margin: 0;
  align-self: start;
  background: var(--inset);
  border: 3px solid var(--border);
  padding: 16px 14px 0;
}
.ascii {
  margin: 0;
  font-family: var(--voice);
  font-size: 24px;
  line-height: 1;
  color: var(--gold);
  text-shadow: 2px 2px 0 #000;
}
.nameplate {
  margin: 14px -14px 0;
  padding: 8px;
  text-align: center;
  font-family: var(--pixel);
  font-size: 11px;
  color: var(--ink);
  background: var(--ember);
}
.speech p, .speech-text {
  margin: 0 0 16px;
  font-family: var(--voice);
  font-size: 27px;
  line-height: 1.2;
}
.speech p:first-child { color: var(--gold); }
.caret {
  position: absolute;
  right: 20px;
  bottom: 14px;
  color: var(--ember);
  animation: blink 1s steps(2) infinite;
}

.panel { padding: 28px; }
.panel h2, .lairs h2 {
  margin: 0 0 18px;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: clamp(15px, 3.2vw, 20px);
  line-height: 1.5;
  color: var(--gold);
}
.panel .speech-text:last-child { margin-bottom: 0; }

.leaves {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
.ledger {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border-top: 2px dashed var(--border-hi);
}
.ledger li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 2px dashed var(--border-hi);
  font-family: var(--voice);
  font-size: 26px;
  line-height: 1.15;
}
.ledger .num {
  flex: none;
  width: 32px;
  font-family: var(--pixel);
  font-size: 14px;
  color: var(--ember);
}
.sprite {
  width: 220px;
  image-rendering: pixelated;
  border: 3px solid var(--border);
}
.sprite.wide { width: 100%; max-width: 360px; }

.crime {
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  gap: 28px;
  align-items: center;
}

/* The same clear margin as the hero box: the panel padding covers the top
   and left, and the gap covers the heading whether it sits beside the logo
   or wraps under it. */
.steam-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin: 0 0 18px;
}
.steam-head img { flex: none; width: 165px; height: 50px; }
.panel .steam-head h2 { margin: 0; }

.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 6px 0 20px;
}
.countdown div {
  padding: 18px 6px 12px;
  text-align: center;
  background: var(--inset);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 #000;
}
.countdown b {
  display: block;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: clamp(20px, 6vw, 44px);
  line-height: 1;
  color: var(--gold);
  text-shadow: 3px 3px 0 #000;
}
.countdown span {
  display: block;
  margin-top: 10px;
  font-family: var(--voice);
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
}
.spite {
  margin: 0 0 16px;
  font-family: var(--pixel);
  font-size: 10px;
  line-height: 1.5;
  color: var(--rose);
}
.nag {
  display: flex;
  gap: 20px;
  align-items: center;
}
.nag-btn {
  flex: none;
  font-family: var(--pixel);
  font-size: 11px;
  padding: 14px 16px;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 #000;
  cursor: pointer;
}
.nag-btn:hover { background: var(--ember); }
.nag-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #000; }
.panel .nag-reply { margin: 0; }

/* The road to launch: three plates in the countdown's own frame, the one the
   calendar is on lit in ember by site.js. */
.roadmap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.roadmap li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 12px;
  background: var(--inset);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 #000;
}
.roadmap .rm-num {
  font-family: var(--pixel);
  font-size: 10px;
  color: var(--muted);
}
.roadmap b {
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
}
.roadmap li > span:last-child {
  font-family: var(--voice);
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
}
.roadmap li.is-now { border-color: var(--ember); }
.roadmap li.is-now .rm-num { color: var(--ember); }
.roadmap li.is-now .rm-num::after { content: ' You are here'; }
.roadmap li.is-now > span:last-child { color: var(--text); }
.panel .roadmap-gib { margin: 0 0 20px; }
.dl-steam {
  max-width: 460px;
  margin: 12px 0 0;
  font-family: var(--pixel);
  font-size: 10px;
  line-height: 1.7;
  color: var(--gold);
  text-shadow: 1px 1px 0 #000;
}
.dl-steam a { color: var(--ember); }
.finale em { font-style: normal; color: var(--ember); }

.wip {
  display: flex;
  gap: 20px;
  align-items: center;
  border-color: var(--gold);
  border-image: repeating-linear-gradient(45deg, var(--gold) 0 10px, #0a0a0f 10px 20px) 6;
}
.wip .hazard { flex: none; color: var(--gold); }
.wip .speech-text { margin: 0; }

/* ── Lairs ── */
.lairs {
  padding: 72px 0 80px;
  background: var(--inset);
  border-block: 4px solid #000;
  transition: background-color .4s steps(4);
}
.lairs-lede { max-width: 640px; }
.stage {
  position: relative;
  margin-top: 24px;
  border: 4px solid var(--border-hi);
  box-shadow: 0 0 0 4px #000, 10px 10px 0 4px #000;
  background: #000;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.stage-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .25s steps(3);
}
.stage-art.swap { opacity: 0; }
.stage-bar {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 40px 20px 18px;
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
}
.stage-name {
  margin: 0;
  font-family: var(--pixel);
  font-size: clamp(13px, 3vw, 20px);
  color: var(--gold);
  text-shadow: 3px 3px 0 #000;
}
.stage-level {
  margin: 6px 0 0;
  font-family: var(--voice);
  font-size: 22px;
  color: var(--text);
  text-shadow: 2px 2px 0 #000;
}
.stage-play {
  flex: none;
  font-family: var(--pixel);
  font-size: 10px;
  padding: 12px 14px;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 #000;
  cursor: pointer;
}
.stage-play:hover { background: var(--ember); }
.stage-play[aria-pressed="true"] { background: var(--ember); }

.thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.thumb {
  position: relative;
  padding: 0;
  text-align: left;
  color: var(--text);
  background: var(--panel);
  border: 3px solid var(--border);
  box-shadow: 4px 4px 0 #000;
  cursor: pointer;
}
.thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.thumb span {
  display: block;
  padding: 8px 8px 10px;
  font-family: var(--voice);
  font-size: 20px;
  line-height: 1;
}
.thumb em {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 4px 5px;
  font-style: normal;
  font-family: var(--pixel);
  font-size: 8px;
  color: var(--ink);
  background: var(--gold);
}
.thumb:hover { border-color: var(--gold); }
.thumb[aria-pressed="true"] {
  border-color: var(--ember);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000;
}

/* ── Finale and footer ── */
.finale {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 36px;
  align-items: center;
}
.clerk {
  width: 240px;
  image-rendering: pixelated;
  border: 4px solid var(--border-hi);
  box-shadow: 0 0 0 4px #000, 8px 8px 0 4px #000;
}
.finale .speech-text { margin-bottom: 24px; }

.footer {
  margin-top: 96px;
  padding: 32px var(--gutter) 40px;
  border-top: 4px solid var(--border);
  text-align: center;
}
.footer p {
  max-width: 680px;
  margin: 0 auto;
  font-family: var(--voice);
  font-size: 22px;
  line-height: 1.25;
  color: var(--muted);
}
.footer .legal {
  margin-top: 18px;
  font-family: var(--plain);
  font-size: 13px;
  line-height: 1.5;
}

/* ── Reveal on scroll. Hidden only when script is running, so a page
   without it still shows everything. ── */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .4s steps(4), transform .4s steps(4);
}

/* ── Narrow screens ── */
@media (max-width: 760px) {
  .dialog { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .portrait { justify-self: center; }
  .ascii { font-size: 20px; }
  .panel { padding: 20px; }
  .speech p, .speech-text { font-size: 24px; }
  .ledger li { font-size: 23px; }
  .leaves, .crime, .finale { grid-template-columns: 1fr; }
  .countdown { gap: 8px; }
  .countdown span { font-size: 17px; }
  .nag { flex-direction: column; align-items: flex-start; }
  .roadmap { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sprite { justify-self: center; width: 180px; }
  .sprite.wide { width: 100%; }
  .clerk { width: 180px; justify-self: center; }
  .thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage { aspect-ratio: 4 / 3; }
  .stage-bar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .steam-box { flex-direction: column; align-items: center; }
  .steam-when { padding: 12px 20px; border-left: 0; border-top: 2px solid var(--border-hi); align-self: stretch; justify-content: center; text-align: center; }
  .thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tunes span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .embers { display: none; }
  html { scroll-behavior: auto; }
}

/* The two promises the product is built on, as tags under the tagline. */
.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid var(--gold);
  box-shadow: 3px 3px 0 #000;
  cursor: default;
}
.tag svg { width: 14px; height: 14px; flex: none; }

/* Crystal Watch tease: pixel art shown at whole multiples, one cryptic line each. */
/* The Crystal Watch line hangs off the Steam box as its footer, one piece. */
.launch { display: inline-flex; flex-direction: column; margin: 0 0 26px; box-shadow: 3px 3px 0 #000; }
.launch .steam-box { margin: 0; box-shadow: none; }
.watch-chip { display: block; padding: 7px 12px; font-family: var(--pixel); font-size: 8px; letter-spacing: .3em; text-transform: uppercase; text-align: center; color: #6f4fb0; text-decoration: none; background: rgba(10,10,15,.85); border: 2px solid var(--gold); border-top: 2px solid var(--border-hi); margin-top: -2px; }
.watch-chip:hover { color: #c9a8ff; text-shadow: 0 0 6px #8a5cf6; }

/* Crystal Watch tease */
.watch { padding: 56px 0; overflow: hidden; }
.cw-intro { text-align: center; padding: 40px 0 24px; }
.cw-teaser { margin: 24px auto 0; max-width: 960px; border: 4px solid #000; box-shadow: 0 0 0 2px #6f4fb0, 0 0 28px rgba(138, 92, 246, 0.35); background: #000; }
.cw-teaser video { display: block; width: 100%; height: auto; cursor: pointer; }
.cw-crystal { width: 64px; height: 96px; margin: 0 auto 24px; filter: drop-shadow(0 0 18px #8a5cf6); animation: cwPulse 3s ease-in-out infinite; }
.cw-crystal i { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #e9dcff 0 20%, #b48cff 20% 50%, #6f4fb0 50% 80%, #3b2470 80%); clip-path: polygon(50% 0, 100% 35%, 50% 100%, 0 35%); }
@keyframes cwPulse { 50% { filter: drop-shadow(0 0 36px #b48cff); transform: translateY(-6px); } }
.watch h2 { font-family: var(--pixel); color: var(--gold); font-size: clamp(1.4rem, 7vw, 2.6rem); line-height: 1.3; margin: 0 0 16px; overflow-wrap: anywhere; }
.cw-lede { font-family: var(--voice); color: var(--muted); font-size: clamp(1.1rem, 4.6vw, 1.6rem); line-height: 1.35; max-width: 26ch; margin: 0 auto; overflow-wrap: anywhere; }
.cw-roster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 48px; padding-top: 8px; }
@media (max-width: 760px) { .cw-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.hs-card { all: unset; box-sizing: border-box; cursor: pointer; min-width: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; border: 3px solid color-mix(in srgb, var(--hs-accent) 55%, var(--bg)); background: var(--bg); transform: translateY(0); transition: transform 120ms steps(3), border-color 120ms steps(2); text-align: center; }
.hs-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--hs-accent) 25%, transparent), inset 0 2px 0 2px color-mix(in srgb, var(--hs-accent) 60%, white); }
.hs-card:hover, .hs-card[aria-pressed='true'] { transform: translateY(-8px); border-color: var(--hs-accent); }
.hs-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hs-field { position: relative; display: flex; height: clamp(200px, 56vw, 280px); align-items: flex-end; justify-content: center; padding-bottom: 6px; background: linear-gradient(to bottom, color-mix(in srgb, var(--hs-accent) 22%, var(--bg)), var(--bg) 85%); }
.hs-art { position: relative; z-index: 2; display: block; max-width: 100%; filter: saturate(.55) brightness(.75); transform: translateY(6px); transition: filter 150ms steps(3), transform 150ms steps(3); }
.hs-art img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.hs-card:hover .hs-art, .hs-card[aria-pressed='true'] .hs-art { filter: none; transform: translateY(0); }
.hs-card[data-shadow='true'] { --hs-rim: color-mix(in srgb, var(--hs-accent) 45%, var(--bg)); }
.hs-card[data-shadow='true']:is(:hover, [aria-pressed='true']) { --hs-rim: var(--hs-accent); }
.hs-card[data-shadow='true'] .hs-art, .hs-card[data-shadow='true']:is(:hover, [aria-pressed='true']) .hs-art { filter: brightness(0) drop-shadow(2px 0 0 var(--hs-rim)) drop-shadow(-2px 0 0 var(--hs-rim)) drop-shadow(0 2px 0 var(--hs-rim)) drop-shadow(0 -2px 0 var(--hs-rim)); }
.hs-card[data-shadow='true'] .hs-glow { display: none; }
.hs-soon { position: absolute; left: 0; right: 0; top: 8px; z-index: 4; font-family: var(--pixel); font-size: 8px; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--hs-accent) 60%, var(--muted)); }
.hs-num { position: absolute; left: 8px; top: 8px; z-index: 4; font-family: var(--pixel); font-size: 10px; color: var(--muted); }
.hs-card[data-shadow='true'] .hs-num { top: 24px; }
.hs-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 150ms steps(3); }
.hs-fx.hs-front { z-index: 3; }
.hs-card:hover .hs-fx, .hs-card[aria-pressed='true'] .hs-fx { opacity: 1; }
.hs-plate { position: relative; z-index: 4; display: flex; justify-content: center; padding: 10px 6px 12px; border-top: 3px solid color-mix(in srgb, var(--hs-accent) 55%, var(--bg)); background: var(--panel); }
.hs-plate-crystal { overflow: hidden; border-top-color: var(--hs-accent); background: linear-gradient(180deg, color-mix(in srgb, var(--hs-accent) 55%, black) 0 48%, color-mix(in srgb, var(--hs-accent) 32%, black) 48% 100%); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hs-accent) 70%, white), inset 0 -2px 0 color-mix(in srgb, var(--hs-accent) 20%, black); }
.hs-name { font-family: var(--pixel); font-size: clamp(8px, 2.6vw, 12px); letter-spacing: .12em; text-transform: uppercase; overflow-wrap: anywhere; line-height: 1.5; color: color-mix(in srgb, var(--hs-accent) 25%, white); text-shadow: 0 0 6px var(--hs-accent), 0 0 2px var(--hs-accent); }
.hs-plate-crystal::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 22%; background: color-mix(in srgb, var(--hs-accent) 40%, white); opacity: .4; transform: skewX(-20deg); pointer-events: none; }
.hs-card:is(:hover, [aria-pressed='true']) .hs-plate-crystal::after { animation: hs-crystal-glint 3s steps(16) infinite; }
@keyframes hs-crystal-glint { 0% { left: -40%; } 55%, 100% { left: 130%; } }
.hs-rage-rise { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--hs-accent) 70%, transparent), transparent 70%); transform-origin: bottom; opacity: .35; }
.hs-card.hs-rage:is(:hover, [aria-pressed='true']) .hs-rage-rise { animation: hs-rise .9s steps(4) infinite alternate, hs-swell 3s steps(6) forwards; }
@keyframes hs-swell { from { opacity: .35; } to { opacity: 1; } }
.hs-ssj { position: absolute; left: 50%; bottom: 4%; width: 156px; height: 236px; margin-left: -78px; transform-origin: 50% 100%; transform: scale(.45, .35); opacity: 0; }
.hs-card.hs-rage:is(:hover, [aria-pressed='true']) .hs-ssj { animation: hs-power 3s steps(6) forwards; filter: drop-shadow(0 0 8px var(--hs-accent)) drop-shadow(0 0 18px var(--hs-accent)); }
.hs-ssj-outer, .hs-ssj-inner { position: absolute; clip-path: polygon(50% 0, 57% 13%, 65% 3%, 69% 19%, 81% 9%, 81% 29%, 94% 24%, 89% 46%, 100% 58%, 87% 70%, 92% 100%, 8% 100%, 13% 70%, 0 58%, 11% 46%, 6% 24%, 19% 29%, 19% 9%, 31% 19%, 35% 3%, 43% 13%); transform-origin: 50% 100%; }
.hs-ssj-outer { inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--hs-accent) 70%, white), var(--hs-accent) 45%, color-mix(in srgb, var(--hs-accent) 55%, transparent)); }
.hs-ssj-inner { inset: 22% 24% 0; background: linear-gradient(to top, white, color-mix(in srgb, var(--hs-accent) 25%, white) 55%, transparent); }
.hs-card.hs-rage:is(:hover, [aria-pressed='true']) .hs-ssj-outer { animation: hs-flick .16s steps(1) infinite alternate; }
.hs-card.hs-rage:is(:hover, [aria-pressed='true']) .hs-ssj-inner { animation: hs-flick .12s steps(1) infinite alternate-reverse; }
@keyframes hs-power { 0% { transform: scale(.45, .35); opacity: .4; } 35% { transform: scale(.8, .75); opacity: .85; } 65% { transform: scale(.95, .95); opacity: 1; } 100% { transform: scale(1.12, 1.18); opacity: 1; } }
@keyframes hs-flick { from { transform: scale(1, 1); } to { transform: scale(.93, 1.07); } }
.hs-streak { position: absolute; bottom: 8%; width: 3px; height: 44px; background: linear-gradient(to top, transparent, color-mix(in srgb, var(--hs-accent) 40%, white)); opacity: 0; }
.hs-card.hs-rage:is(:hover, [aria-pressed='true']) .hs-streak { animation: hs-streak .8s steps(8) infinite; }
@keyframes hs-streak { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-190px); opacity: 0; } }
.hs-bolt { position: absolute; width: 24px; height: 58px; background: color-mix(in srgb, var(--hs-accent) 20%, white); clip-path: polygon(42% 0, 72% 0, 54% 38%, 82% 38%, 28% 100%, 44% 54%, 16% 54%); opacity: 0; filter: drop-shadow(0 0 4px var(--hs-accent)); }
.hs-card.hs-rage:is(:hover, [aria-pressed='true']) .hs-bolt { animation: hs-zap 1.4s steps(1) infinite; }
@keyframes hs-zap { 0%, 100% { opacity: 0; } 6% { opacity: 1; } 12% { opacity: 0; } 18% { opacity: 1; } 22%, 99% { opacity: 0; } }
.hs-glow { opacity: 0; }
.hs-card:hover .hs-glow, .hs-card[aria-pressed='true'] .hs-glow { animation: hs-flare .6s steps(2) infinite; filter: drop-shadow(0 0 3px var(--hs-accent)) drop-shadow(0 0 8px var(--hs-accent)); }
@keyframes hs-rise { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
@keyframes hs-flare { 0% { opacity: 1; } 50% { opacity: .45; } }
.hs-beam { position: absolute; top: -20%; bottom: -20%; width: 34%; left: -50%; transform: skewX(-18deg); background: linear-gradient(to right, transparent, color-mix(in srgb, var(--hs-accent) 45%, transparent), transparent); animation: hs-sweep 1.6s steps(16) infinite; }
.hs-aura { position: absolute; left: 50%; top: 52%; width: 230px; height: 230px; margin: -115px 0 0 -115px; background: radial-gradient(closest-side, color-mix(in srgb, var(--hs-accent) 75%, white), color-mix(in srgb, var(--hs-accent) 35%, transparent) 50%, transparent); animation: hs-breathe 1.8s steps(6) infinite alternate; }
.hs-rays { position: absolute; top: 0; left: 12%; right: 12%; bottom: 35%; background: repeating-linear-gradient(to right, transparent 0 16px, color-mix(in srgb, var(--hs-accent) 45%, transparent) 16px 22px); -webkit-mask-image: linear-gradient(to bottom, black, transparent); mask-image: linear-gradient(to bottom, black, transparent); animation: hs-flare 1.4s steps(3) infinite; }
.hs-mote { position: absolute; bottom: 12px; width: 4px; height: 4px; background: color-mix(in srgb, var(--hs-accent) 40%, white); box-shadow: 0 0 6px var(--hs-accent); animation: hs-ascend 2.6s steps(18) infinite; }
@keyframes hs-breathe { from { transform: scale(.85); opacity: .55; } to { transform: scale(1.05); opacity: 1; } }
@keyframes hs-ascend { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-250px); opacity: 0; } }
@keyframes hs-sweep { from { left: -50%; } to { left: 120%; } }
.hs-coin { position: absolute; top: -12px; width: 8px; height: 8px; background: #f0c040; box-shadow: inset -2px -2px 0 #8a6a10, inset 2px 2px 0 #f8e0a0; animation: hs-fall 1.6s steps(14) infinite; }
@keyframes hs-fall { from { transform: translateY(0); } to { transform: translateY(300px); } }
.hs-orbit { position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; margin: -95px 0 0 -80px; border: 2px dotted color-mix(in srgb, var(--hs-accent) 60%, transparent); border-radius: 50%; animation: hs-turn 12s steps(96) infinite; }
.hs-element { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; box-shadow: 0 0 10px var(--hs-el), 0 0 22px var(--hs-el); background: var(--hs-el); border: 3px solid color-mix(in srgb, var(--hs-el) 55%, white); box-sizing: border-box; animation: hs-flare 1.6s steps(3) infinite; }
.hs-fire { --hs-el: #f5820a; } .hs-ice { --hs-el: #a5c3d8; } .hs-earth { --hs-el: #7ab35e; } .hs-air { --hs-el: #e3eaf5; }
.hs-orbit .hs-fire { left: 50%; top: 0; } .hs-orbit .hs-ice { left: 100%; top: 50%; animation-delay: .4s; } .hs-orbit .hs-earth { left: 50%; top: 100%; animation-delay: .8s; } .hs-orbit .hs-air { left: 0; top: 50%; animation-delay: 1.2s; }
.hs-blast { position: absolute; left: 50%; top: 45%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; border: 6px solid var(--hs-el); box-shadow: 0 0 16px var(--hs-el), inset 0 0 16px var(--hs-el); opacity: 0; box-sizing: border-box; }
.hs-card.hs-storm:is(:hover, [aria-pressed='true']) .hs-blast { animation: hs-blast 8s steps(40) infinite; }
.hs-blast.hs-fire { border-style: dashed; animation-delay: .6s !important; } .hs-blast.hs-ice { border-style: dotted; animation-delay: 2.6s !important; } .hs-blast.hs-earth { border-width: 9px; animation-delay: 4.6s !important; } .hs-blast.hs-air { border-style: double; animation-delay: 6.6s !important; }
@keyframes hs-blast { 0% { transform: scale(.2) rotate(0deg); opacity: 0; } 2% { opacity: 1; } 16% { transform: scale(2.2) rotate(45deg); opacity: 0; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes hs-turn { to { transform: rotate(360deg); } }

/* detail */
.cw-detail { margin-top: 20px; border: 2px solid var(--border-hi); background: var(--panel); padding: 20px; }
.hd-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 760px) { .hd-grid { grid-template-columns: minmax(0, 1fr); } .cw-detail { padding: 14px; } }
.hd-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cw-detail h2 { font-family: var(--pixel); font-size: 14px; letter-spacing: .15em; text-transform: uppercase; color: var(--text); margin: 0; }
.cw-detail h3 { font-family: var(--pixel); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin: 0; font-weight: normal; }
.hd-pitch { font-family: var(--plain); font-size: 15px; line-height: 1.6; color: var(--text); margin: 0; }
.hd-soon { font-family: var(--plain); font-size: 13px; color: var(--muted); margin: 0; }
.hd-skills, .hd-towers, .hd-lines { list-style: none; margin: 0; padding: 0; }
.hd-skills { display: flex; flex-direction: column; gap: 12px; }
.hd-skill { display: flex; gap: 12px; }
.hd-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--border-hi); }
.hd-skill.passive .hd-icon { border-style: dashed; }
.hd-icon img { width: 32px; height: 32px; image-rendering: pixelated; }
.hd-sk { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hd-skh { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hd-key { font-family: var(--pixel); font-size: 10px; color: var(--muted); }
.hd-skh b, .hd-ln b, .hd-th b { font-family: var(--plain); font-size: 14px; font-weight: 700; color: var(--text); }
.hd-skill.ult b { color: var(--gold); }
.hd-kind { display: block; font-family: var(--pixel); font-size: 8px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.hd-skh .hd-kind { display: inline; }
.hd-txt { font-family: var(--plain); font-size: 12px; line-height: 1.6; color: var(--text); opacity: .85; }
.hd-towers { display: grid; gap: 8px; }
.hd-tower { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border-hi); background: var(--bg); padding: 8px; }
.hd-coming { border-style: dashed; background: transparent; }
.hd-th { display: flex; align-items: center; gap: 8px; }
.hd-th > span:not(.hd-q):not(.hd-pill) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hd-th b { font-size: 12px; }
.hd-port { width: 40px; height: 40px; image-rendering: pixelated; flex: none; }
.hd-q { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px dashed var(--border-hi); font-family: var(--pixel); font-size: 14px; color: var(--muted); }
.hd-pill { font-family: var(--pixel); font-size: 7px; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); padding: 4px 6px; flex: none; }
.kp-climb { display: flex; align-items: flex-end; gap: 4px; }
.kp-step { --kp-accent: #9161d6; position: relative; display: block; flex: 1 1 0; min-width: 0; max-width: 64px; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--kp-accent) calc(25% + var(--kp-rank) * 15%), var(--bg)); background: linear-gradient(to top, color-mix(in srgb, var(--kp-accent) calc(10% + var(--kp-rank) * 10%), var(--bg)), var(--bg)); margin-bottom: calc(var(--kp-rank) * 5px); }
.kp-step[data-top] { box-shadow: 0 0 6px var(--kp-accent); }
.kp-step img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.hd-lines { display: flex; flex-direction: column; gap: 2px; }
.hd-line { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px; outline: none; cursor: default; }
.hd-line:hover, .hd-line:focus { background: var(--panel); }
.hd-ln { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hd-ln b { font-size: 12px; }
.hd-line:not([data-drawn]) .hd-ln b { font-weight: 400; }
.hd-tfs { display: flex; gap: 4px; flex: none; }
.hd-tfs img { width: 32px; height: 32px; image-rendering: pixelated; border: 1px solid var(--border-hi); background: var(--bg); }
.hd-line:not([data-drawn]) .hd-tfs { opacity: .7; filter: grayscale(1); }
.hd-tip { visibility: hidden; position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin-top: 4px; display: flex; flex-direction: column; gap: 6px; border: 2px solid var(--border-hi); background: #1a1828; padding: 8px; font-family: var(--plain); font-size: 12px; color: var(--text); pointer-events: none; }
.hd-line:hover .hd-tip, .hd-line:focus .hd-tip { visibility: visible; }
.hd-tiph { font-family: var(--pixel); font-size: 8px; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); }
.hd-tree { margin-top: 24px; border-top: 2px solid var(--border); padding-top: 16px; }
.hd-tree svg { display: block; width: 100%; height: auto; margin-top: 10px; background: radial-gradient(ellipse at 50% 50%, #1d1230, var(--bg) 70%); border: 1px solid var(--border-hi); }
.hd-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-family: var(--pixel); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hd-legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border: 2px solid var(--c, #9161d6); border-radius: 50%; vertical-align: -1px; }
.hd-legend .hd-tf::before { border-radius: 0; }
@media (prefers-reduced-motion: reduce) { .hs-card, .hs-card *, .hs-card::after { animation: none !important; transition: none !important; } .hs-plate-crystal::after { display: none; } }
.cw-elites { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 56px; }
.cw-elites figure { margin: 0; text-align: center; min-width: 0; }
.cw-elites img { width: 100%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; }
.cw-elites figcaption { font-family: var(--voice); font-size: 1.15rem; color: var(--muted); margin-top: 6px; overflow-wrap: anywhere; line-height: 1.1; }
@media (max-width: 640px) { .cw-elites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cw-boss { margin: 64px 0 0; text-align: center; }
.cw-boss img { width: min(420px, 90vw); aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; filter: brightness(0) drop-shadow(0 0 20px #8a5cf6); background: radial-gradient(circle at 50% 45%, #2a1748, transparent 65%); }
.cw-boss figcaption { font-family: var(--voice); font-size: clamp(1.1rem, 4.6vw, 1.5rem); color: var(--muted); margin-top: 12px; }
.cw-boss figcaption b { display: block; font-family: var(--pixel); font-weight: normal; font-size: .75rem; color: #b48cff; text-transform: uppercase; margin-bottom: 8px; }
.cw-tag { font-family: var(--pixel); font-size: .8rem; color: var(--rose); text-align: center; margin-top: 40px; }
@media (prefers-reduced-motion: reduce) { .cw-crystal { animation: none; } .cw-boss img { transition: none; } }


/* Two doors under the download: the game alone, or the game and the money.
   Until one is picked (and only with scripts on) the page stops at the doors,
   so it reads in one screen. */
.doors { padding-top: 40px; padding-bottom: 8px; text-align: center; }
.doors-h { font-family: var(--pixel); font-size: clamp(1rem, 4vw, 1.4rem); color: var(--gold); margin: 0 0 20px; }
.door-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.door { display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; min-height: 140px; padding: 22px 16px;
  background: var(--panel); border: 3px solid var(--border-hi); box-shadow: 4px 4px 0 #000; color: var(--text); cursor: pointer; font: inherit;
  transition: transform .12s, border-color .2s, box-shadow .2s; }
.door b { font-family: var(--pixel); font-weight: normal; font-size: clamp(.75rem, 2.6vw, 1rem); line-height: 1.5; }
.door span { font-family: var(--voice); font-size: 1.35rem; color: var(--muted); }
.door-game b { color: #b48cff; }
.door-both b { color: var(--gold); }
.door:hover, .door:focus-visible { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; }
.door-game:hover, .door-game[aria-pressed="true"] { border-color: #8a5cf6; box-shadow: 4px 4px 0 #000, 0 0 22px rgba(138, 92, 246, .35); }
.door-both:hover, .door-both[aria-pressed="true"] { border-color: var(--gold); box-shadow: 4px 4px 0 #000, 0 0 22px rgba(221, 194, 116, .3); }
.door[aria-pressed="false"] { opacity: 1; }
body[data-path] .door[aria-pressed="false"] { opacity: .6; }
.js body:not([data-path]) main > section:not(.doors) { display: none; }
body[data-path="game"] .fin { display: none; }
.quest { margin-top: 24px; }
@media (max-width: 560px) { .door-row { grid-template-columns: minmax(0, 1fr); } .door { min-height: 110px; } }
@media (prefers-reduced-motion: reduce) { .door { transition: none; } .door:hover, .door:focus-visible { transform: none; } }

/* Gibbles as a support chat in the corner, and the Slay sticker stamped on the
   game door when it is picked. */
.door { position: relative; }

/* Gibbles the support goblin: a chat widget that does not want to help. It is
   all canned replies in the page; nothing typed leaves the browser. */
.gchat { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.gchat-launch { position: relative; display: flex; align-items: center; gap: 10px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; color: var(--text); }
.gchat-launch img { width: 64px; height: 64px; image-rendering: pixelated; border: 3px solid var(--ember); background: var(--inset); box-shadow: 4px 4px 0 #000; }
.gchat-tease { padding: 8px 12px; font-family: var(--voice); font-size: 1.25rem; background: var(--panel); border: 3px solid var(--border-hi); box-shadow: 4px 4px 0 #000; }
.gchat-badge { position: absolute; right: -6px; top: -6px; min-width: 22px; height: 22px; padding: 0 5px; font: normal .6rem/22px var(--pixel); text-align: center; color: #fff; background: var(--rose); border: 2px solid #000; }
.gchat-badge[hidden], .gchat-tease[hidden] { display: none; }
/* The panel is the app's chat, laid out the same way (components/progression/
   gibbles-chat.tsx): a header, the role line, the log, Ask and the bug pill,
   then a composer with the box across the whole width and a slim bar under it.
   On a phone every control is 44px and the panel keeps a 16px gutter. */
.gchat-panel { position: relative; display: flex; flex-direction: column; width: min(400px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px)); height: min(560px, calc(100dvh - 120px)); background: var(--panel); border: 3px solid var(--ember); box-shadow: 6px 6px 0 #000; }
.gchat-panel[hidden] { display: none; }
.gchat-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 2px solid var(--border-hi); }
.gchat-head img { flex-shrink: 0; width: 40px; height: 40px; image-rendering: pixelated; border: 2px solid var(--ember); }
.gchat-head div { flex: 1; min-width: 0; }
.gchat-head b { display: block; font-family: var(--pixel); font-weight: normal; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--ember); }
.gchat-head span { display: block; margin-top: 4px; font-family: var(--voice); font-size: 15px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.gchat-x { flex-shrink: 0; width: 36px; height: 36px; font: normal 9px var(--pixel); color: var(--text); background: var(--panel); border: 2px solid var(--border-hi); cursor: pointer; }
.gchat-x:hover { border-color: var(--ember); }
.gchat-role { display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--inset); border-bottom: 2px solid var(--border-hi); font-family: var(--voice); font-size: 16px; line-height: 1.1; color: var(--muted); }
.gchat-role span { flex: 1; min-width: 0; padding: 4px 0; }
.gchat-role button { flex-shrink: 0; min-height: 30px; padding: 0; font: inherit; color: var(--muted); background: none; border: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.gchat-role button:hover { color: var(--rose); }
.gchat-log { flex: 1; min-height: 0; margin: 0; padding: 12px; list-style: none; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; }
.gchat-log li { max-width: 85%; padding: 6px 10px; font-family: var(--voice); font-size: 19px; line-height: 1.15; color: var(--text); background: var(--inset); border: 2px solid var(--border-hi); white-space: pre-wrap; overflow-wrap: anywhere; }
.gchat-log li.bot { align-self: flex-start; }
.gchat-log li.me { align-self: flex-end; border-color: #6f4fb0; }
.gchat-log li.typing { color: var(--muted); font-style: italic; background: var(--panel); border-style: dashed; }
.gchat-log a { color: var(--ember); white-space: nowrap; text-underline-offset: 2px; }
.gchat-log a:hover { color: var(--gold); }
.gchat-pills { position: relative; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.gchat-pills[hidden] { display: none; }
.gchat-menu { position: absolute; left: 12px; bottom: 100%; z-index: 2; max-width: calc(100% - 24px); margin: 0; padding: 4px; list-style: none; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain; background: var(--panel); border: 2px solid var(--ember); box-shadow: 4px 4px 0 #000; }
.gchat-menu[hidden] { display: none; }
.gchat-menu button { display: block; width: 100%; min-height: 34px; padding: 4px 10px; text-align: left; font-family: var(--voice); font-size: 19px; line-height: 1.1; color: var(--gold); background: none; border: 0; cursor: pointer; }
.gchat-menu button:hover, .gchat-menu button:focus-visible { background: var(--inset); }

/* The app's .pixel-btn: one fixed height whether or not it carries a glyph,
   ghost for secondary, gold for the one you mean. */
.gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; font-family: var(--pixel); font-size: 9px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--muted); background: var(--inset); border: 2px solid var(--border-hi); cursor: pointer; }
.gbtn svg { display: block; flex-shrink: 0; image-rendering: pixelated; }
.gbtn span { display: block; }
.gbtn span[hidden] { display: none; }
.gbtn:hover { color: var(--gold); border-color: var(--gold); }
.gbtn-ask { color: var(--gold); }
.gbtn-bug, .gbtn-bug:hover { color: var(--rose); border-color: var(--rose); padding: 0 12px; }
.gbtn-gold, .gchat-kinds .gbtn[aria-checked="true"] { color: var(--gold); background: #251f11; border-color: var(--gold); }
.gbtn-gold:hover { background: #382e18; }
.gbtn-sq { width: 36px; padding: 0; }
.gbtn-trash:hover { color: var(--rose); border-color: var(--rose); }
.gbtn[hidden] { display: none; }
.gchat-send { box-shadow: 2px 2px 0 #000; }
.gchat-send.is-bug { color: var(--rose); border-color: var(--rose); }
.gchat-send.is-praise { color: var(--leaf); border-color: var(--leaf); }
.gchat-form { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; border-top: 2px solid var(--border-hi); }
.gchat-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gchat-kinds .gbtn { padding: 0 6px; font-size: 8px; letter-spacing: .06em; }
.gchat-kinds[hidden] { display: none; }
.gchat-form textarea { display: block; width: 100%; max-height: 9.5em; padding: 6px 8px; resize: none; font-family: var(--voice); font-size: 19px; line-height: 1.15; color: var(--text); background: var(--inset); border: 2px solid var(--border-hi); border-radius: 0; }
.gchat-form textarea::placeholder { color: var(--muted); opacity: .85; }
.gchat-form textarea:focus { outline: none; border-color: var(--ember); }
.gchat-form textarea.is-reporting { border-color: var(--rose); }
.gchat-bar { position: relative; display: flex; align-items: center; gap: 8px; }
.gchat-gap { flex: 1; }
.gchat-heckle { position: absolute; left: 0; bottom: 100%; z-index: 2; max-width: 16rem; margin-bottom: 8px; padding: 4px 8px; text-align: left; font-family: var(--voice); font-size: 17px; line-height: 1.15; color: var(--text); background: var(--panel); border: 2px solid var(--ember); box-shadow: 4px 4px 0 #000; cursor: pointer; }
.gchat-heckle[hidden] { display: none; }
.gchat-fine { margin: 0; padding: 0 12px 8px; font-family: var(--plain); font-size: .65rem; color: var(--muted); }
.gchat-fine-short { display: none; }
@media (max-width: 560px) { .gchat-tease { display: none; } }
@media (max-width: 560px), (pointer: coarse) {
  .gbtn, .gchat-x { height: 44px; min-width: 44px; }
  .gbtn-sq, .gchat-x { width: 44px; }
  .gchat-role button, .gchat-menu button { min-height: 44px; }
}
/* Three kinds in a row do not fit 343px with their glyph beside the label,
   so on a phone the glyph sits over it, as on a tab bar. */
@media (max-width: 420px) {
  .gchat-kinds .gbtn { flex-direction: column; gap: 4px; padding: 0 4px; font-size: 8px; }
  .gchat-kinds svg { width: 15px; height: 15px; }
}
/* A phone gets the chat as a full-screen sheet over everything, top bar
   included. Its height follows the visual viewport (site.js sets --gchat-h
   from visualViewport), so an open keyboard shrinks the sheet rather than
   hiding the box and Send under it. The log takes whatever height is left
   and the controls stay pinned at the bottom. */
@media (max-width: 560px) {
  .gchat.is-open .gchat-launch { display: none; }
  .gchat-panel { position: fixed; top: var(--gchat-top, 0); left: 0; right: 0; bottom: auto; z-index: 100; width: auto; height: 100vh; height: var(--gchat-h, 100dvh); overflow: hidden; border: 0; box-shadow: none;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
  .gchat-head { gap: 10px; padding: 4px 16px; }
  .gchat-head img { width: 32px; height: 32px; }
  .gchat-head span { margin-top: 2px; font-size: 14px; }
  .gchat-role { padding: 0 16px; font-size: 15px; }
  .gchat-role span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .gchat-log { padding: 12px 16px; }
  .gchat-pills { padding: 6px 16px; }
  .gchat-menu { left: 16px; max-width: calc(100% - 32px); }
  .gchat-form { padding: 8px 16px; }
  .gchat-form textarea { height: 3.4em; max-height: 6em; }
  .gchat-fine { padding: 0 16px 6px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gchat-fine-long { display: none; }
  .gchat-fine-short { display: inline; }
  .gchat-panel.is-short .gchat-role, .gchat-panel.is-short .gchat-fine { display: none; }
}
/* The Slay sticker bursts up in the middle of the screen when the game door
   is picked, wobbles, and is gone: a reaction, not a decoration. */
.slay-pop { position: fixed; left: 50%; top: 45%; z-index: 80; width: min(260px, 60vw); height: auto; margin: 0; pointer-events: none;
  transform: translate(-50%, -50%); filter: drop-shadow(5px 5px 0 #000); animation: slayBurst 1.9s ease-out both; }
.slay-pop[hidden] { display: none; }
@keyframes slayBurst {
  0% { transform: translate(-50%, 10%) scale(0) rotate(-220deg); opacity: 0; }
  22% { transform: translate(-50%, -50%) scale(1.25) rotate(12deg); opacity: 1; }
  32% { transform: translate(-50%, -50%) scale(.95) rotate(-10deg); }
  42% { transform: translate(-50%, -50%) scale(1.12) rotate(8deg); }
  52% { transform: translate(-50%, -50%) scale(1) rotate(-5deg); }
  72% { transform: translate(-50%, -50%) scale(1) rotate(3deg); opacity: 1; }
  100% { transform: translate(-50%, -160%) scale(.4) rotate(40deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .slay-pop { animation: slayFade 1.6s linear both; } @keyframes slayFade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } } }
/* He asks, on a hover. No motion. */
.portrait[data-ask] { position: relative; }
.portrait[data-ask]:hover::after { content: attr(data-ask); position: absolute; left: 50%; top: -14px; transform: translate(-50%, -100%); white-space: nowrap;
  padding: 6px 10px; font-family: var(--voice); font-size: 1.3rem; color: var(--text); background: var(--panel); border: 3px solid var(--gold); box-shadow: 4px 4px 0 #000; z-index: 5; }

/* Choose your hero, condensed from the game's own select: the Mage lit under
   a shaft of light, the Warrior and the Priest as shadows, and one plate of
   fixed size beneath that reads the hero under the cursor. The plate never
   changes size, so nothing moves on a hover. */
.cw-heroes { margin: 48px auto 0; max-width: 680px; text-align: center; }
.cw-heroes-h { margin: 0 0 18px; font-family: var(--pixel); font-weight: normal; font-size: clamp(.85rem, 2.8vw, 1.1rem); color: var(--gold); }
.cw-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; }
.cw-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 210px; padding: 0 0 8px;
  background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; }
.cw-slot b { font-family: var(--pixel); font-weight: normal; font-size: .7rem; color: var(--text); letter-spacing: .08em; text-transform: uppercase; }
.cw-kicker { font-family: var(--pixel); font-size: .5rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.cw-slot[aria-pressed="true"] .cw-kicker { color: #8eaad0; }
.cw-slot img { width: auto; height: 120px; image-rendering: pixelated; margin-bottom: 14px; }
.cw-slot.soon img { filter: drop-shadow(0 0 1px #3d3550); }
.cw-slot.soon[aria-pressed="true"] img { filter: drop-shadow(0 0 6px rgba(142, 170, 208, .45)); }
.cw-shaft { position: absolute; left: 50%; bottom: 36px; width: 70%; height: 180px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(to top, rgba(142, 170, 208, .32), rgba(142, 170, 208, 0)); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.cw-mage { position: relative; width: 180px; height: 150px; margin-bottom: 0; }
.cw-mage, .cw-mage i { background: url("assets/art/maul/heroes/mage.png") 0 0 / 1080px 600px no-repeat; image-rendering: pixelated; animation: cwIdle 1s steps(6) infinite; }
.cw-mage i { position: absolute; inset: 0; background-image: url("assets/art/maul/heroes/mage-glow.png"); mix-blend-mode: screen; }
@keyframes cwIdle { to { background-position: -1080px 0; } }
.cw-plate { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; height: 176px; margin-top: 8px; padding: 14px 18px; text-align: left; overflow: hidden;
  background: var(--panel); border-top: 2px solid #8eaad0; box-shadow: 4px 4px 0 #000; }
.cw-plate b { font-family: var(--pixel); font-weight: normal; font-size: .75rem; color: var(--text); text-transform: uppercase; }
.cw-plate p { margin: 0; font-family: var(--voice); font-style: italic; font-size: 1.2rem; line-height: 1.1; color: var(--text); white-space: pre-line; }
.cw-state { font-family: var(--pixel); font-size: .5rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 560px) { .cw-slot { height: 170px; } .cw-slot img { height: 90px; } .cw-mage { width: 120px; height: 100px; } .cw-mage, .cw-mage i { background-size: 720px 400px; } @keyframes cwIdle { to { background-position: -720px 0; } } .cw-plate { height: 210px; } }
@media (prefers-reduced-motion: reduce) { .cw-mage, .cw-mage i { animation: none; } }

/* ── Patch notes page, and the links that lead to it ── */
.topbar-end { display: flex; align-items: center; gap: 10px; }
.topnav, .topbar-end .tunes { min-height: 44px; }
.topnav {
  display: inline-flex;
  align-items: center;
  font-family: var(--pixel);
  font-size: 10px;
  color: var(--text);
  text-decoration: none;
  background: var(--panel);
  border: 3px solid var(--border-hi);
  box-shadow: 3px 3px 0 #000;
  padding: 8px 12px;
}
.topnav:hover { color: var(--text); border-color: var(--gold); }
.footer .footer-links { margin-top: 18px; font-family: var(--pixel); font-size: 10px; line-height: 1.5; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }

/* The home page lets its hero sit under a see-through top bar. A list of
   notes scrolled under the same bar and the wordmark landed on top of the
   text, so here the bar is solid and takes its own space. */
.notes-page .topbar {
  position: sticky;
  top: 0;
  background: var(--bg);
  border-bottom: 2px solid var(--border);
  padding-top: 8px;
  padding-bottom: 8px;
}
.notes { padding-top: 32px; }
.notes .panel { padding: 24px; }
.notes-h {
  margin: 0 0 14px;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: clamp(16px, 4vw, 26px);
  line-height: 1.4;
  color: var(--gold);
}
.notes-lede, .notes-status, .note-body { overflow-wrap: anywhere; }
.notes-lede { margin: 0; font-family: var(--plain); font-size: 18px; line-height: 1.5; }
.notes-status { margin: 28px 0 0; font-family: var(--plain); font-size: 16px; line-height: 1.5; color: var(--muted); }
.notes-status.is-error { color: var(--text); }
.notes-status a { display: inline-block; min-height: 44px; line-height: 44px; }
.notes-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 28px; }
.note { scroll-margin-top: 80px; min-width: 0; }
.note-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 2px dashed var(--border-hi);
  font-family: var(--pixel);
  font-size: 10px;
  line-height: 1.6;
  color: var(--muted);
}
.note-head .ver-tag { font-size: 14px; }
.note-ver {
  display: inline-block;
  padding: 3px 7px 2px;
  font-size: 14px;
  color: var(--gold);
  border: 2px solid var(--border-hi);
  background: var(--inset);
  box-shadow: 2px 2px 0 #000;
}
.note-pre { color: var(--ember); }
.note-link { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; }
.note-body { font-family: var(--plain); font-size: 17px; line-height: 1.55; }
.note-body p { margin: 0 0 12px; }
.note-body > :last-child, .note-group > :last-child { margin-bottom: 0; }
.note-body ul { margin: 0 0 12px; padding-left: 20px; list-style: square; }
.note-body li { margin: 0 0 6px; }
.note-body li::marker { color: var(--ember); }
.note-body b { color: var(--gold); }
.note-body code { font-family: var(--voice); font-size: 1.15em; color: var(--gold); background: var(--inset); padding: 0 4px; }
.note-body a { overflow-wrap: anywhere; }
.note-empty { color: var(--muted); }
.note-group { margin: 0 0 16px; }
.note-group h3 {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 8px;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 10px;
  color: var(--text);
  border: 2px solid var(--border-hi);
}
.note-group.is-features h3 { color: var(--ink); background: var(--gold); border-color: var(--ink); }
.note-group.is-fixes h3 { color: var(--ink); background: var(--ember); border-color: var(--ink); }

/* Phones first in practice: version over date over link, one per line,
   with the panel's padding and shadow trimmed so a 16px gutter still holds. */
@media (max-width: 560px) {
  .notes { padding-top: 24px; }
  .notes .panel { padding: 16px; box-shadow: 0 0 0 4px #000, 6px 6px 0 4px #000; }
  .notes-lede { font-size: 16px; }
  .note-head { flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 6px; }
  .note-link { margin-left: 0; }
  .note-body { font-size: 16px; }
  .note-body ul { padding-left: 18px; }
}

/* Gibbles over the patch notes: a portrait and one line, still. A poke on the
   portrait swaps the line. */
.pn-gib { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.pn-gib-face { flex-shrink: 0; padding: 0; background: var(--inset); border: 3px solid var(--ember); box-shadow: 4px 4px 0 #000; cursor: pointer; }
.pn-gib-face img { width: 56px; height: 56px; image-rendering: pixelated; }
.pn-gib-line { flex: 1; min-width: 0; margin: 0; padding: 8px 12px; font-family: var(--voice); font-size: 20px; line-height: 1.15; color: var(--text); background: var(--panel); border: 3px solid var(--border-hi); box-shadow: 4px 4px 0 #000; overflow-wrap: anywhere; }