:root {
  /* Compliance tokens from DESIGN.md: Sans` summaries Grotesk` tags */
  --chrome: #C9D1D9;
  --mirror: #F2F7FF;
  --cabinet: #171A22;
  --gunmetal: #6F7685;
  --pink: #FF2E88;
  --cyan: #00E5FF;
  --lime: #B6FF3B;
  --uv: #5A2BFF;
  --display: 'Bebas Neue', Impact, sans-serif;
  --body: 'IBM Plex Sans', Arial, sans-serif;
  --meta: 'Space Grotesk', Verdana, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; }

body {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 46, 136, .22), transparent 28%),
    radial-gradient(circle at 84% 10%, rgba(0, 229, 255, .22), transparent 30%),
    linear-gradient(135deg, #0b0d12 0%, var(--cabinet) 48%, #090a0f 100%);
  color: var(--mirror);
  font-family: var(--body);
}

button { font: inherit; }

.scanlines,
.machine-glare {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.scanlines {
  background: repeating-linear-gradient(to bottom, rgba(242, 247, 255, .055) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}

.machine-glare {
  background: linear-gradient(115deg, transparent 0 33%, rgba(242, 247, 255, .11) 39%, transparent 45% 100%);
  animation: cabinetGlare 7s linear infinite;
}

.wiki-machine {
  position: relative;
  width: 100vw;
  height: 100vh;
  border: 14px solid var(--gunmetal);
  box-shadow: inset 0 0 0 5px #05060a, inset 0 0 70px rgba(0, 229, 255, .12), 0 0 0 3px var(--chrome);
  overflow: hidden;
}

.wiki-machine::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 2px solid rgba(201, 209, 217, .28);
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
  pointer-events: none;
  z-index: 3;
}

.cabinet-rail {
  position: fixed;
  left: 28px;
  right: 28px;
  top: 26px;
  z-index: 12;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  font-family: var(--meta);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.rail-brand,
.rail-status,
.stepper {
  padding: 10px 14px;
  color: var(--lime);
  background: rgba(23, 26, 34, .82);
  border: 1px solid rgba(0, 229, 255, .42);
  box-shadow: 5px 5px 0 rgba(90, 43, 255, .55);
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

.rail-status { justify-self: end; color: var(--pink); }

.chapter-dots { display: flex; gap: 8px; }

.dot,
.stepper button {
  border: 1px solid var(--chrome);
  background: linear-gradient(180deg, #202633, #0d0f15);
  color: var(--chrome);
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.dot {
  width: 42px;
  height: 28px;
  font-family: var(--meta);
  font-size: 11px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.dot:hover,
.dot.is-active,
.stepper button:hover {
  color: var(--cabinet);
  border-color: var(--cyan);
  background: var(--cyan);
  transform: translateY(-2px) rotate(-2deg);
  box-shadow: 0 0 18px rgba(0, 229, 255, .72);
}

.chapter {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 100%;
  gap: 22px;
  padding: 96px 64px 78px;
  opacity: 0;
  transform: translateX(100%) scale(.96);
  transition: opacity .32s ease, transform .5s cubic-bezier(.16, .92, .24, 1.2);
  pointer-events: none;
}

.chapter.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.chapter.is-exiting { transform: translateX(-14%) scale(.98); opacity: 0; }

.side-decal {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  font-family: var(--meta);
  color: var(--cyan);
  letter-spacing: .24em;
  font-size: 12px;
  text-shadow: 0 0 12px var(--cyan);
}

.hero-copy {
  grid-column: 1 / span 5;
  align-self: center;
  z-index: 4;
}

.kicker {
  margin: 0 0 12px;
  font-family: var(--meta);
  color: var(--lime);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 13px;
}

.chrome-title,
.chapter-header h2,
.article-card h2,
.article-card h3 {
  font-family: var(--display);
  text-transform: uppercase;
  line-height: .88;
  margin: 0;
}

.chrome-title {
  font-size: clamp(84px, 14vw, 190px);
  letter-spacing: -.025em;
  background: linear-gradient(105deg, var(--mirror) 0%, var(--chrome) 22%, var(--gunmetal) 38%, var(--mirror) 48%, var(--cyan) 58%, var(--pink) 72%, var(--chrome) 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(8px 10px 0 rgba(90, 43, 255, .7)) drop-shadow(0 0 18px rgba(0, 229, 255, .38));
}

.bootline {
  max-width: 520px;
  font-size: 18px;
  color: var(--chrome);
  line-height: 1.5;
}

.chapter-header {
  grid-column: 1 / span 4;
  align-self: center;
  z-index: 4;
}

.chapter-header h2 {
  font-size: clamp(70px, 9vw, 132px);
  color: var(--mirror);
  text-shadow: 5px 5px 0 var(--uv), -2px -2px 0 var(--pink);
}

.card-grid {
  grid-column: 6 / span 7;
  position: relative;
  align-self: stretch;
  min-height: 560px;
}

.hero-deck { grid-column: 6 / span 7; }
.glossary-grid, .damage-grid { grid-column: 5 / span 8; }
.mechanics-grid, .history-grid { grid-column: 5 / span 8; }

.article-card {
  position: absolute;
  padding: 22px;
  background:
    linear-gradient(120deg, rgba(242, 247, 255, .85), rgba(201, 209, 217, .94) 28%, rgba(111, 118, 133, .78) 54%, rgba(242, 247, 255, .9) 68%, rgba(201, 209, 217, .92)),
    var(--chrome);
  color: var(--cabinet);
  border: 2px solid var(--mirror);
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  box-shadow: 12px 14px 0 rgba(90, 43, 255, .74), 0 0 0 4px rgba(0, 229, 255, .22), 0 0 38px rgba(0, 229, 255, .22);
  overflow: hidden;
  transform: translateY(70px) rotate(var(--r, 0deg)) scale(.88);
  opacity: 0;
}

.chapter.is-active .article-card { animation: bounceEnter .78s cubic-bezier(.17, .95, .25, 1.35) forwards; animation-delay: var(--d, .08s); }

.article-card::before {
  content: "";
  position: absolute;
  inset: -50% -10%;
  background: linear-gradient(105deg, transparent 0 38%, rgba(255, 255, 255, .7) 43%, rgba(0, 229, 255, .32) 47%, transparent 54% 100%);
  transform: translateX(-48%);
  transition: transform .5s ease;
  pointer-events: none;
}

.article-card::after {
  content: "[[ ]]";
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-family: var(--meta);
  color: var(--cyan);
  font-weight: 700;
  opacity: .75;
}

.article-card:hover {
  transform: translateY(-8px) rotate(calc(var(--r, 0deg) + 2deg)) scale(1.025) !important;
  box-shadow: 16px 18px 0 rgba(255, 46, 136, .6), 0 0 0 4px rgba(0, 229, 255, .7), 0 0 44px rgba(0, 229, 255, .38);
  z-index: 8;
}

.article-card:hover::before { transform: translateX(55%); }
.article-card:hover .revision-note { transform: translateY(0); opacity: 1; }

.boss-card { width: min(610px, 74vw); min-height: 455px; left: 2%; top: 11%; --d: .16s; }
.large-card { width: min(560px, 70vw); min-height: 410px; left: 10%; top: 16%; --d: .13s; }
.mini-card { width: 250px; min-height: 190px; --d: .28s; }
.shard-card { width: 230px; min-height: 160px; right: 5%; bottom: 9%; --r: -10deg; --d: .42s; background: linear-gradient(135deg, var(--cabinet), var(--gunmetal)); color: var(--mirror); }

.tilt-left { --r: -8deg; left: -2%; bottom: 9%; }
.tilt-right { --r: 9deg; right: 2%; top: 12%; }
.diagram-card { width: 290px; min-height: 210px; right: 0; bottom: 24%; --r: 5deg; --d: .36s; }

.card-meta,
.pronounce,
.wiki-markup,
.revision-note,
.combo-strip,
.stamp-list span,
.split-row {
  font-family: var(--meta);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.card-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; font-size: 11px; color: var(--uv); }
.article-card h2 { font-size: clamp(62px, 8vw, 112px); color: var(--cabinet); text-shadow: 2px 2px 0 var(--cyan), -2px -2px 0 rgba(255, 46, 136, .85); }
.article-card h3 { font-size: 38px; margin-bottom: 10px; }
.article-card p { position: relative; z-index: 1; font-size: 16px; line-height: 1.42; }
.pronounce { color: var(--pink); font-size: 12px !important; }
.definition-text { min-height: 54px; font-weight: 700; }
.definition-text.term-flash { color: var(--pink); text-shadow: 2px 2px 0 var(--cyan); }
.split-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; font-size: 11px; }
.split-row span, .combo-strip b { padding: 8px; background: var(--cabinet); color: var(--lime); text-align: center; clip-path: polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); }
.revision-note { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 10px; background: var(--pink); color: var(--mirror); font-size: 11px; opacity: 0; transform: translateY(18px); transition: .22s ease; }
.wiki-markup { margin-top: 18px; padding: 12px; border: 1px dashed var(--cyan); color: var(--uv); font-size: 12px; }
.combo-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.stamp-list { padding-left: 18px; line-height: 1.7; }
.stamp-list span { color: var(--pink); font-weight: 700; }

.sticker { width: 82px; height: 72px; margin-bottom: 12px; filter: drop-shadow(5px 5px 0 rgba(90, 43, 255, .7)); }
.broken-heart { background: radial-gradient(circle at 35% 32%, var(--pink) 0 23%, transparent 24%), radial-gradient(circle at 65% 32%, var(--pink) 0 23%, transparent 24%), linear-gradient(135deg, var(--pink) 0 45%, transparent 46%), linear-gradient(225deg, var(--pink) 0 45%, transparent 46%); clip-path: polygon(50% 100%, 0 46%, 6% 14%, 38% 0, 50% 18%, 63% 0, 94% 14%, 100% 46%); }
.bubble-shuriken { background: conic-gradient(from 20deg, var(--cyan), var(--mirror), var(--pink), var(--cyan)); clip-path: polygon(50% 0, 60% 34%, 100% 22%, 68% 51%, 94% 88%, 55% 68%, 36% 100%, 34% 61%, 0 58%, 31% 40%); }
.signal-arrow { height: 54px; margin: 12px 0 18px; background: linear-gradient(90deg, transparent 0 10%, var(--uv) 10% 14%, transparent 14% 24%, var(--pink) 24% 32%, transparent 32% 42%, var(--cyan) 42% 100%); clip-path: polygon(0 52%, 15% 52%, 22% 10%, 32% 88%, 44% 24%, 55% 52%, 86% 52%, 86% 30%, 100% 58%, 86% 86%, 86% 64%, 0 64%); }
.fracture-lines { position: absolute; inset: 0; pointer-events: none; }
.fracture-lines i { position: absolute; width: 3px; height: 120%; background: rgba(255, 46, 136, .55); transform: rotate(24deg); }
.fracture-lines i:nth-child(1){ left: 24%; top: -10%; }
.fracture-lines i:nth-child(2){ left: 57%; top: -20%; background: rgba(0, 229, 255, .45); }
.fracture-lines i:nth-child(3){ left: 74%; top: -12%; }

.stepper {
  position: fixed;
  z-index: 21;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  align-items: center;
  color: var(--mirror);
  min-width: 430px;
  justify-content: space-between;
}

.stepper button { padding: 8px 14px; font-family: var(--meta); font-size: 12px; }
#chapterReadout { font-family: var(--display); font-size: 24px; letter-spacing: .06em; color: var(--chrome); }

.is-splitting .active-card { animation: splitPulse .5s ease both; }
.is-splitting .active-card::after { content: "[[definition]] [[rumor]] [[counterexample]]"; color: var(--pink); }

@keyframes bounceEnter {
  0% { opacity: 0; transform: translateY(90px) rotate(calc(var(--r, 0deg) - 10deg)) scale(.78); }
  62% { opacity: 1; transform: translateY(-22px) rotate(calc(var(--r, 0deg) + 5deg)) scale(1.08); }
  82% { transform: translateY(9px) rotate(calc(var(--r, 0deg) - 2deg)) scale(.98); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)) scale(1); }
}

@keyframes splitPulse {
  0%, 100% { filter: none; }
  45% { filter: saturate(1.6) hue-rotate(18deg); clip-path: polygon(18px 0, 62% 0, 58% 40%, 100% 42%, calc(100% - 18px) 100%, 36% 100%, 42% 58%, 0 55%); }
}

@keyframes cabinetGlare { from { transform: translateX(-30%); } to { transform: translateX(45%); } }

@media (max-width: 900px) {
  html, body { overflow: auto; }
  .wiki-machine { height: auto; min-height: 100vh; overflow: visible; }
  .chapter { position: relative; min-height: 100vh; display: block; padding: 92px 28px 120px; transform: none; opacity: 1; pointer-events: auto; }
  .chapter:not(.is-active) { display: none; }
  .hero-copy, .chapter-header { margin-bottom: 24px; }
  .card-grid { min-height: 760px; }
  .boss-card, .large-card { width: calc(100vw - 72px); left: 0; }
  .mini-card { width: 220px; }
  .cabinet-rail { left: 18px; right: 18px; grid-template-columns: 1fr; }
  .chapter-dots { order: 3; }
  .rail-status { justify-self: start; }
  .stepper { min-width: 0; width: calc(100vw - 38px); }
}