@charset "UTF-8";

/* =========================================================
   WASSUP BEIJING — propaganda poster x looksmaxxing brainrot
   ========================================================= */

:root {
  --red: #de2910;
  --red-hot: #ff3b1f;
  --red-deep: #a8140a;
  --lacquer: #4a0707;
  --ink: #1a0303;
  --gold: #ffde00;
  --gold-deep: #e0a100;
  --gold-pale: #fff2a8;
  --paper: #f7e9c8;
  --paper-2: #ead6a6;

  --f-display: "Anton", "ZCOOL QingKe HuangYou", "Impact", "Haettenschweiler", sans-serif;
  --f-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-zh: "ZCOOL QingKe HuangYou", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-brush: "Ma Shan Zheng", "STKaiti", "KaiTi", serif;

  --hud-h: 56px;
  --pop: cubic-bezier(0.3, 1.5, 0.5, 1);

  /* live values written by JS */
  --sx: 0px;
  --sy: 0px;
  --push: 0;
  --charge: 0;

  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.02  0 0 0 0 0.02  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --dots: radial-gradient(rgba(26, 3, 3, 0.2) 1.1px, transparent 1.6px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  background: var(--ink);
}
html.is-gated {
  overflow: hidden;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  display: none !important;
}
[lang="zh"] {
  font-family: var(--f-zh);
  font-weight: 400;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.dept--paper :focus-visible,
.plan :focus-visible {
  outline-color: var(--red);
}
.defs {
  position: absolute;
}
.wrap {
  width: min(1200px, 100% - 2.5rem);
  margin-inline: auto;
}
.shakeable {
  translate: var(--sx) var(--sy);
}
.pushable {
  translate: calc(var(--push) * var(--dir, 1) * 7vw) 0;
  rotate: calc(var(--push) * var(--dir, 1) * 5deg);
}
kbd {
  font: inherit;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  padding: 0.05em 0.4em;
}

/* ---------- shared pieces ---------- */

.foil {
  background: linear-gradient(180deg, #fff6b8 0%, var(--gold) 38%, var(--gold-deep) 58%, #fff0a0 72%, #c98600 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.04em 0 var(--red-deep)) drop-shadow(0 0.075em 0 var(--ink));
}
.ink-red {
  color: var(--red);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.8em 1.3em;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  font-family: var(--f-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  transition: transform 0.12s, box-shadow 0.12s;
}
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink);
}
.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 1px 1px 0 var(--ink);
}
.btn--red {
  background: var(--red);
  color: var(--gold);
}
.btn--gold {
  background: var(--gold);
  color: var(--ink);
}
.btn--ghost {
  background: rgba(26, 3, 3, 0.35);
  color: var(--gold);
  border-color: var(--gold);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.45);
}
.btn--onpaper {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}
.btn--enter {
  background: var(--gold);
  font-size: clamp(1.7rem, 4.4vw, 2.8rem);
  padding: 0.4em 1.5em;
  animation: throb 1.1s ease-in-out infinite;
}
.link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--gold);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.chip {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  padding: 0.45em 0.75em;
  background: transparent;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
}
.chip[aria-pressed="true"] {
  background: var(--gold);
  color: var(--ink);
}

.seal {
  display: inline-grid;
  place-items: center;
  padding: 0.22em 0.36em;
  background: var(--paper);
  color: var(--red);
  border: 4px solid var(--red);
  outline: 3px solid var(--paper);
  font-family: var(--f-brush);
  font-size: 1.7rem;
  line-height: 1.05;
  rotate: -6deg;
  filter: url(#rough);
}
.seal--big {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
}

.eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.35em 0.8em;
  border: 1.5px solid currentColor;
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.fine {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  opacity: 0.7;
}

/* =========================================================
   GATE
   ========================================================= */

.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.gate__ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(190vmin, 1900px);
  max-width: none;
  height: auto;
  translate: -50% -34%;
  filter: brightness(0);
  opacity: 0.2;
  pointer-events: none;
}
.gate__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background: var(--dots) 0 0 / 7px 7px, radial-gradient(120% 90% at 50% 40%, var(--red) 0%, var(--red-deep) 100%);
}
.gate__panel--l {
  left: 0;
  border-right: 6px solid var(--gold);
}
.gate__panel--r {
  right: 0;
  border-left: 6px solid var(--gold);
}
.gate__content {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-width: 640px;
  max-height: 100%;
  overflow-y: auto;
  padding: 1.5rem;
  text-align: center;
}
.gate__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 11vw, 7.5rem);
  line-height: 0.92;
  text-transform: uppercase;
}
.gate__lede {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}
.gate__scan {
  display: grid;
  gap: 0.45rem;
  width: min(440px, 100%);
  padding: 0.9rem 1rem;
  background: rgba(26, 3, 3, 0.6);
  border: 2px solid var(--gold);
  color: var(--gold-pale);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-align: left;
}
.gate__row,
.gate__line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.gate__line {
  opacity: 0;
}
.gate__line b {
  color: var(--gold);
  font-weight: 500;
  text-align: right;
}
.gate__bar {
  height: 10px;
  background: rgba(255, 222, 0, 0.18);
  overflow: hidden;
}
.gate__bar i {
  display: block;
  height: 100%;
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(0);
}
.gate__fine {
  margin: 0;
  font-size: 0.84rem;
}

/* =========================================================
   HUD
   ========================================================= */

.hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: var(--hud-h);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  background: rgba(26, 3, 3, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 3px solid var(--gold);
  font-family: var(--f-mono);
}
.is-gated .hud {
  visibility: hidden;
}
.hud__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gold);
  font-family: var(--f-display);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  white-space: nowrap;
}
.hud__star {
  width: 22px;
  height: 22px;
  animation: spin 6s linear infinite;
}
.hud__stats {
  display: flex;
  gap: 1.4rem;
  margin-left: auto;
}
.hud__stat {
  display: grid;
  line-height: 1.1;
  text-align: right;
}
.hud__label {
  color: var(--gold-pale);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  opacity: 0.85;
  white-space: nowrap;
}
.hud__value {
  color: var(--gold);
  font-size: 1.15rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
#hud-credit .hud__value {
  color: var(--paper);
}
.hud__stat.is-up .hud__value {
  animation: stat-up 0.35s var(--pop);
}
.hud__stat.is-down .hud__value {
  animation: stat-down 0.35s linear;
}
.hud__tools {
  display: flex;
  gap: 0.4rem;
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;
  z-index: 3;
  height: 100svh;
  min-height: 560px;
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
  color: var(--gold);
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><text x='4' y='34' font-size='32'>🤫</text></svg>") 22 22, auto;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--red);
}
.sunburst {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 240vmax;
  height: 240vmax;
  margin: -120vmax 0 0 -120vmax;
  background: repeating-conic-gradient(from 0deg, var(--red) 0 6deg, #c21f0b 6deg 12deg);
  animation: spin 90s linear infinite;
}
.is-mogged .hero .sunburst {
  background: repeating-conic-gradient(from 0deg, var(--red) 0 6deg, #f2560f 6deg 12deg);
  animation-duration: 22s;
}
.sun {
  position: absolute;
  left: 50%;
  top: 60%;
  width: min(88vh, 104vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6b8 0%, var(--gold) 36%, #ffb300 60%, rgba(255, 179, 0, 0) 70%);
}
.halftone {
  position: absolute;
  inset: 0;
  background: var(--dots) 0 0 / 7px 7px;
  -webkit-mask-image: radial-gradient(circle at 50% 60%, transparent 22%, #000 78%);
  mask-image: radial-gradient(circle at 50% 60%, transparent 22%, #000 78%);
}
.cloud {
  position: absolute;
  width: clamp(110px, 16vw, 260px);
  aspect-ratio: 200 / 90;
  color: var(--gold);
  animation: drift 9s ease-in-out infinite alternate;
}
.cloud--1 {
  left: 4%;
  top: 60%;
}
.cloud--2 {
  right: 6%;
  top: 30%;
  animation-delay: -4s;
}
.cloud--3 {
  left: 19%;
  top: 36%;
  width: clamp(70px, 9vw, 150px);
  color: var(--paper);
  animation-delay: -7s;
}

.hero__title {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--hud-h) + 1.2vh);
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.22em;
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: min(15.2vw, 33vh);
  line-height: 0.95;
  text-transform: uppercase;
  pointer-events: none;
}
.hero__word {
  display: inline-block;
  color: var(--gold);
  text-shadow: 0.03em 0.03em 0 var(--red-deep), 0.06em 0.06em 0 var(--ink);
  white-space: nowrap;
}
.hero__word .ch {
  display: inline-block;
  will-change: transform;
}
.hero__zh {
  position: absolute;
  right: 2.4vw;
  /* sits just above the MOG button so the last character is never covered */
  bottom: calc(clamp(104px, 13vw, 168px) + 5.2rem);
  z-index: 1;
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--f-brush);
  font-size: clamp(2.4rem, 5vw, 5rem);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--paper);
  text-shadow: 3px 3px 0 var(--ink);
}
.hero__bureau {
  position: absolute;
  left: 1.4vw;
  bottom: 8.5rem;
  z-index: 1;
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--paper);
  white-space: nowrap;
}
.hero__bureau [lang] {
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.hero__stage {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: min(76svh, 106vw);
  aspect-ratio: 872 / 941;
  margin-inline: auto;
  pointer-events: none;
}
.face-rise,
.face-tilt,
.face-tilt > .face {
  position: absolute;
  inset: 0;
}
.face-rise {
  transition: filter 0.4s;
}
.is-mogged .hero .face-rise {
  filter: drop-shadow(0 0 26px rgba(255, 222, 0, 0.9));
}
.face-tilt {
  transform-origin: 56% 86%;
  will-change: transform;
}
.face__canvas {
  position: absolute;
  left: -45%;
  top: -12%;
  width: 190%;
  height: 162%;
  pointer-events: none;
}
.face__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 60% 48%;
}
.face.has-gl .face__fallback {
  visibility: hidden;
}
.face:not(.has-gl) .face__canvas {
  display: none;
}

.jawtrace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.jawtrace path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 13;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 20px var(--gold));
}
.gesture {
  position: absolute;
  translate: -50% -50%;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: drop-shadow(0 6px 0 rgba(26, 3, 3, 0.45));
}
.gesture--shh {
  left: 61.5%;
  top: 55.5%;
  font-size: clamp(5rem, 17vw, 13rem);
}
.gesture--finger {
  left: 32%;
  top: 50%;
  translate: -50% -6%;
}
.face__grab {
  position: absolute;
  left: 61%;
  top: 72%;
  width: 36%;
  height: 22%;
  translate: -50% -50%;
  border-radius: 50%;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}
.face__grab:active {
  cursor: grabbing;
}
.face__hint {
  position: absolute;
  left: 96%;
  top: 34%;
  padding: 0.3em 0.7em;
  background: var(--ink);
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
  animation: nudge 1.2s ease-in-out infinite;
  pointer-events: none;
}
.face__hint::before {
  content: "← ";
}
.is-mogged .face__hint {
  opacity: 1;
}
.has-dragged .face__hint,
.is-charging .face__hint {
  opacity: 0;
}

.stamp {
  position: absolute;
  left: max(3vw, calc(50% - 45vw));
  top: 47%;
  z-index: 4;
  display: grid;
  justify-items: center;
  padding: 0.5rem 1.1rem 0.7rem;
  background: var(--paper);
  color: var(--red);
  border: 5px solid var(--red);
  outline: 3px solid var(--paper);
  box-shadow: 8px 8px 0 var(--ink);
  rotate: -8deg;
  opacity: 0;
  visibility: hidden;
  text-transform: uppercase;
  pointer-events: none;
}
.stamp__small {
  font-family: var(--f-mono);
  font-size: clamp(0.66rem, 1.2vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.22em;
}
.stamp__big {
  font-family: var(--f-display);
  font-size: clamp(3rem, 8.5vw, 8rem);
  line-height: 0.92;
}
.stamp__zh {
  font-family: var(--f-brush);
  font-size: clamp(1.4rem, 3.2vw, 3rem);
  line-height: 1.1;
}

.hero__ui {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.hero__ui > * {
  position: absolute;
  pointer-events: auto;
}
#btn-replay {
  left: 3vw;
  bottom: 3.9rem;
  padding: 0.6em 1em;
  font-size: 0.95rem;
}
.hero__scroll {
  left: 3vw;
  bottom: 1.1rem;
  margin: 0;
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-shadow: 1px 1px 0 var(--ink);
}
.mogbtn {
  right: 3.5vw;
  bottom: 3.2rem;
  width: clamp(104px, 13vw, 168px);
  aspect-ratio: 1;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.mogbtn__ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--charge) * 360deg), rgba(26, 3, 3, 0.6) 0);
}
.mogbtn__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  border-radius: 50%;
  border: 4px solid var(--ink);
  background: radial-gradient(circle at 35% 28%, #ff7a5c, var(--red) 46%, var(--red-deep) 100%);
  box-shadow: 0 8px 0 var(--ink), inset 0 -8px 16px rgba(0, 0, 0, 0.35), inset 0 6px 10px rgba(255, 255, 255, 0.35);
  color: var(--gold);
  line-height: 1;
  transition: transform 0.08s, box-shadow 0.08s;
}
.mogbtn:active .mogbtn__face,
.mogbtn.is-held .mogbtn__face {
  transform: translateY(6px);
  box-shadow: 0 2px 0 var(--ink), inset 0 -4px 12px rgba(0, 0, 0, 0.45), inset 0 3px 8px rgba(255, 255, 255, 0.25);
}
.mogbtn__small {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
}
.mogbtn__big {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4.2vw, 3.6rem);
}
.mogbtn__zh {
  font-size: 0.95rem;
}
.hero__key {
  right: 3.5vw;
  bottom: 0.8rem;
  width: clamp(104px, 13vw, 168px);
  margin: 0;
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-align: center;
  text-shadow: 1px 1px 0 var(--ink);
}
@media (hover: none) {
  .hero__key {
    display: none;
  }
}
@media (max-height: 760px), (max-width: 1000px) {
  .hero__bureau {
    display: none;
  }
}

/* =========================================================
   TICKERS
   ========================================================= */

.tickers {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.7rem;
  padding: 2.4rem 0 2.8rem;
  background: var(--ink);
  overflow: clip;
  translate: calc(var(--sx) + var(--push) * 3vw) var(--sy);
}
.ticker {
  width: 106%;
  margin-left: -3%;
  padding: 0.16em 0;
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 4.2vw, 3.6rem);
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
.ticker--a {
  background: var(--gold);
  color: var(--ink);
  rotate: -1.6deg;
}
.ticker--b {
  background: var(--red);
  color: var(--gold);
  rotate: 1.2deg;
}
.ticker__track {
  display: inline-flex;
  animation: marquee 30s linear infinite;
  will-change: transform;
}
.ticker--b .ticker__track {
  animation-direction: reverse;
  animation-duration: 38s;
}
.ticker i {
  margin: 0 0.3em;
  color: var(--red);
  font-style: normal;
}

/* =========================================================
   DEPARTMENTS (shared section frame)
   ========================================================= */

.dept {
  position: relative;
  padding: clamp(4rem, 9vw, 8rem) 0;
}
.dept--paper {
  background: var(--noise), repeating-linear-gradient(0deg, transparent 0 39px, rgba(26, 3, 3, 0.06) 39px 40px), var(--paper);
  color: var(--ink);
}
.dept--lacquer {
  background: linear-gradient(rgba(255, 222, 0, 0.06) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255, 222, 0, 0.06) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(120% 80% at 50% 0%, #6e0c0c 0%, var(--lacquer) 45%, var(--ink) 100%);
  color: var(--paper);
}
.dept--red {
  background: var(--dots) 0 0 / 7px 7px, linear-gradient(180deg, var(--red) 0%, var(--red-deep) 100%);
  color: var(--paper);
}
.dept__title {
  margin: 0 0 1rem;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 8.5vw, 7.5rem);
  line-height: 0.92;
  text-transform: uppercase;
}
.dept__lede {
  max-width: 46ch;
  margin: 0 0 2.5rem;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 600;
}

/* censor mode: negative social credit blacks out the copy */
.is-censored [data-censor] {
  position: relative;
  background: #000 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  user-select: none;
}
.is-censored [data-censor] * {
  visibility: hidden;
}
.is-censored [data-censor]::after {
  content: "已屏蔽";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--red-hot);
  -webkit-text-fill-color: var(--red-hot);
  font-family: var(--f-zh);
  font-size: min(0.7em, 1.6rem);
  letter-spacing: 0.3em;
  line-height: 1;
  white-space: nowrap;
}

/* =========================================================
   FRAME SCANNER
   ========================================================= */

.scan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.4rem, 3vw, 2.5rem);
  align-items: stretch;
}
.paper-card {
  position: relative;
  padding: clamp(1.3rem, 2.5vw, 2rem);
  background: #fff8e4;
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
}
.paper-card__no {
  position: absolute;
  top: -0.9em;
  right: 1rem;
  padding: 0.25em 0.7em;
  background: var(--red);
  color: var(--gold);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  rotate: 2deg;
}
.field {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1rem;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
}
.field input {
  width: 100%;
  padding: 0.25em 0.45em;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  text-transform: uppercase;
}
.field input::placeholder {
  color: rgba(26, 3, 3, 0.3);
}
.readout {
  display: grid;
  gap: 0.35rem;
  margin: 1.4rem 0 0;
  font-family: var(--f-mono);
  font-size: 0.82rem;
}
.readout:empty {
  display: none;
}
.readout div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.3rem;
  border-bottom: 1.5px dashed rgba(26, 3, 3, 0.35);
}
.readout dt {
  letter-spacing: 0.1em;
}
.readout dd {
  margin: 0;
  color: var(--red);
  font-weight: 500;
  text-align: right;
}
.resist {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
}
.resist__bar {
  height: 14px;
  background: var(--paper);
  border: 2px solid var(--ink);
}
.resist__bar i {
  display: block;
  width: 3px;
  height: 100%;
  background: var(--red);
}

.scan__view {
  position: relative;
  display: flex;
  min-height: 380px;
  overflow: hidden;
  background: linear-gradient(rgba(255, 222, 0, 0.08) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255, 222, 0, 0.08) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(circle at 70% 60%, #7d0e0e, var(--lacquer) 60%, var(--ink));
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  color: var(--gold);
}
.scan__side {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  display: grid;
  place-items: end center;
  padding: 2.4rem 0.8rem 0;
  transition: flex 0.9s cubic-bezier(0.7, 0, 0.2, 1);
}
.scan__side--you {
  border-right: 2px dashed rgba(255, 222, 0, 0.4);
}
.scan__side--you svg {
  width: min(72%, 190px);
  transition: opacity 0.6s;
}
.scan__side--you path {
  fill: rgba(247, 233, 200, 0.24);
}
.scan__side--you text {
  fill: var(--gold);
  font-family: var(--f-display);
  font-size: 64px;
}
.scan__side--him img {
  width: auto;
  max-width: none;
  height: clamp(280px, 30vw, 390px);
  filter: contrast(1.2) brightness(1.3) drop-shadow(0 0 18px rgba(255, 222, 0, 0.55));
  transform-origin: 50% 100%;
  transition: transform 0.9s var(--pop);
}
.scan__tag {
  position: absolute;
  top: 0.7rem;
  left: 0.8rem;
  padding: 0.15em 0.6em;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
}
.scan__view.is-mogged .scan__side--you {
  flex: 0 1 15%;
}
.scan__view.is-mogged .scan__side--you svg {
  width: 96%;
  opacity: 0.55;
}
.scan__view.is-mogged .scan__side--him {
  flex: 1 1 85%;
}
.scan__view.is-mogged .scan__side--him img {
  transform: scale(1.08);
}
/* the ruler beside him, and what it says */
.scan__side--him::before {
  content: "";
  position: absolute;
  right: 9%;
  top: 3.4rem;
  bottom: 0;
  width: 20px;
  background: repeating-linear-gradient(to top, var(--gold) 0 2px, transparent 2px 22px);
  border-right: 2px solid var(--gold);
  opacity: 0.75;
}
.scan__height {
  position: absolute;
  right: 0.8rem;
  top: 0.7rem;
  padding: 0.15em 0.6em;
  border: 1.5px solid var(--gold);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.scan__beam {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--gold);
  box-shadow: 0 0 18px 6px rgba(255, 222, 0, 0.6);
  opacity: 0;
}
.scan__view.is-scanning .scan__beam {
  opacity: 1;
  animation: beam 1.1s ease-in-out infinite alternate;
}
.scan__corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 3px solid var(--gold);
}
.scan__corner--tl {
  top: 10px;
  left: 10px;
  border-right: 0;
  border-bottom: 0;
}
.scan__corner--tr {
  top: 10px;
  right: 10px;
  border-left: 0;
  border-bottom: 0;
}
.scan__corner--bl {
  bottom: 10px;
  left: 10px;
  border-right: 0;
  border-top: 0;
}
.scan__corner--br {
  bottom: 10px;
  right: 10px;
  border-left: 0;
  border-top: 0;
}
.scan__status {
  position: absolute;
  left: 50%;
  bottom: 0.8rem;
  translate: -50% 0;
  padding: 0.3em 0.8em;
  background: rgba(26, 3, 3, 0.85);
  border: 1.5px solid var(--gold);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

.verdict {
  margin-top: 2.4rem;
}
.verdict__bar {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--red);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  color: #fff;
}
.verdict__tag {
  flex: none;
  display: grid;
  place-content: center;
  padding: 0.4em 0.7em;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2.4vw, 2rem);
  line-height: 1;
  text-align: center;
}
.verdict__text {
  margin: 0;
  padding: 0.3em 0.6em;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 4.6vw, 4rem);
  line-height: 1.02;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.verdict__sub {
  margin: 1.1rem 0 1.2rem;
  font-weight: 600;
}
.verdict__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* =========================================================
   LOOKSMAX LAB
   ========================================================= */

.lab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  rotate: var(--tilt, 0deg);
  transition: rotate 0.6s var(--pop);
}
.lab__dish {
  --aura: 0.4;
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 5 / 6;
  margin-inline: auto;
  border: 6px solid var(--gold);
  border-bottom-width: 20px;
  border-radius: 999px 999px 0 0;
  background: var(--dots) 0 0 / 7px 7px, radial-gradient(circle at 50% 45%, #ff5a36, var(--red) 52%, var(--red-deep));
  box-shadow: 0 0 calc(var(--aura) * 110px) calc(var(--aura) * 26px) rgba(255, 222, 0, calc(0.25 + var(--aura) * 0.35)),
    12px 14px 0 rgba(0, 0, 0, 0.5);
}
.lab__dish::after {
  content: "";
  position: absolute;
  inset: 5% 8% auto;
  aspect-ratio: 1;
  border: 3px dashed rgba(255, 222, 0, 0.55);
  border-radius: 50%;
  animation: spin 40s linear infinite;
  pointer-events: none;
}
.face--lab {
  position: absolute;
  left: 5%;
  bottom: 0;
  width: 90%;
  aspect-ratio: 872 / 941;
  z-index: 1;
}
.lab__index {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--gold);
  font-family: var(--f-mono);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
}
.lab__index output {
  color: var(--gold);
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3.6vw, 2.8rem);
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: right;
}
.sliders {
  display: grid;
  gap: 1.5rem;
  margin: 1.6rem 0 2rem;
}
.slider {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.75rem 0.8rem;
}
.slider__label {
  font-family: var(--f-display);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}
.slider__label [lang] {
  margin-left: 0.4em;
  color: var(--gold);
  font-size: 1rem;
}
.slider__val {
  color: var(--gold);
  font-family: var(--f-mono);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.slider__rail {
  --v: 0.2;
  position: relative;
  grid-column: 1 / -1;
  height: 34px;
}
.slider__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 12px;
  translate: 0 -50%;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--gold);
  transition: rotate 0.3s var(--pop);
}
.slider__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--gold) 0 50%, var(--red-hot) 50% 85%, #fff 100%);
  clip-path: inset(0 calc(100% - var(--v) * 100%) 0 0);
}
.slider__mark {
  position: absolute;
  left: 50%;
  top: 2px;
  bottom: 2px;
  width: 2px;
  background: var(--paper);
  opacity: 0.75;
}
.slider__mark::after {
  content: "LEGAL LIMIT";
  position: absolute;
  left: 50%;
  top: -2.1em;
  translate: -50% 0;
  font-family: var(--f-mono);
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.slider input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.slider__knob {
  position: absolute;
  top: 50%;
  left: calc(var(--v) * 100%);
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6b8, var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 3px 0 var(--ink);
  pointer-events: none;
}
.slider input:focus-visible ~ .slider__knob {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.slider.is-over .slider__knob {
  background: radial-gradient(circle at 35% 30%, #fff, var(--red-hot) 55%, var(--red-deep));
  animation: jitter 0.12s linear infinite;
}
.slider.is-over .slider__val {
  color: var(--red-hot);
}
.slider.is-armed .slider__knob {
  background: radial-gradient(circle at 35% 30%, #fff, var(--gold) 55%, var(--red-hot));
  box-shadow: 0 0 0 3px var(--ink), 0 0 18px 6px rgba(255, 222, 0, 0.8);
  animation: none;
}
.slider.is-armed .slider__track {
  border-color: #fff;
  box-shadow: 0 0 12px rgba(255, 222, 0, 0.7);
}
.slider.is-armed .slider__val {
  color: var(--gold);
}
.slider.is-armed input {
  pointer-events: none;
}
.lab__protocol {
  margin: 0.9rem 0 0;
  color: var(--gold-pale);
  font-family: var(--f-mono);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
}
.lab__protocol b {
  color: var(--gold);
  font-weight: 500;
}
.lab__protocol.is-hot {
  color: var(--red-hot);
}
.lab__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* =========================================================
   SOCIAL CREDIT TERMINAL
   ========================================================= */

.term {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3vw, 2.5rem);
  align-items: start;
}
.term__screen {
  position: relative;
  min-height: 380px;
  padding: clamp(1.1rem, 2.5vw, 2rem);
  overflow: hidden;
  background: #120202;
  border: 4px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 0 0 4px var(--gold), 10px 12px 0 4px var(--ink);
  color: var(--gold);
  font-family: var(--f-mono);
}
.term__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 2px, transparent 2px 4px);
  pointer-events: none;
}
.term__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
}
.term__badge {
  padding: 0.1em 0.6em;
  background: var(--gold);
  color: var(--ink);
  animation: throb 0.8s ease-in-out infinite;
}
.term__score {
  display: block;
  margin: 0.15em 0 0.05em;
  font-family: var(--f-display);
  font-size: clamp(4rem, 12vw, 9rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 0 22px rgba(255, 222, 0, 0.55);
  overflow-wrap: anywhere;
}
.term__screen.is-bad .term__score {
  color: var(--red-hot);
  text-shadow: 0 0 22px rgba(255, 59, 31, 0.6);
}
.term__status {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
}
.term__status b {
  color: var(--paper);
  font-weight: 500;
}
.term__log {
  display: grid;
  gap: 0.3rem;
  max-height: 9.6rem;
  margin: 1.1rem 0 0;
  padding: 0.8rem 0 0;
  overflow: hidden;
  border-top: 1.5px dashed rgba(255, 222, 0, 0.4);
  font-size: 0.76rem;
  list-style: none;
}
.term__log li::before {
  content: "> ";
  opacity: 0.6;
}
.term__log li.bad {
  color: var(--red-hot);
}
.term__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}
.act {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8em 1em;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  transition: transform 0.1s, box-shadow 0.1s;
}
.act:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink);
}
.act:active {
  transform: translate(4px, 4px);
  box-shadow: 1px 1px 0 var(--ink);
}
.act b {
  color: var(--red);
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 400;
  white-space: nowrap;
}
.act--bad {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--gold);
}
.act--bad b {
  color: var(--red-hot);
}
.act--wheel {
  grid-column: 1 / -1;
  justify-content: center;
  background: var(--gold);
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* =========================================================
   FIVE-YEAR MOG PLAN
   ========================================================= */

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: calc(var(--hud-h) + 2rem) 0 2.5rem;
  overflow: hidden;
  background: var(--noise), var(--paper-2);
  color: var(--ink);
}
.plan__head {
  margin-bottom: clamp(1.2rem, 2.5vw, 2rem);
}
.plan__head .dept__title {
  margin: 0;
  font-size: clamp(2.4rem, 6.5vw, 5.5rem);
}
.plan__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 1.2rem 0 2rem;
}
.plan.is-pinned .plan__viewport {
  overflow: visible;
  scroll-snap-type: none;
}
.plan__track {
  display: flex;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  width: max-content;
  padding-inline: max(1.25rem, calc((100vw - 1200px) / 2));
}
.poster {
  position: relative;
  flex: none;
  display: grid;
  align-content: end;
  width: clamp(250px, min(30vw, 40vh), 400px);
  aspect-ratio: 3 / 4.2;
  padding: 1.4rem 1.2rem 1.3rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--red);
  border: 10px solid var(--ink);
  outline: 4px solid var(--gold);
  outline-offset: -14px;
  box-shadow: 12px 14px 0 rgba(26, 3, 3, 0.85);
  color: var(--gold);
  cursor: pointer;
  scroll-snap-align: center;
  container-type: inline-size;
  transition: scale 0.25s var(--pop);
}
.poster:hover,
.poster:focus-visible {
  scale: 1.035;
}
.poster::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: -1;
  background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 8deg, rgba(255, 222, 0, 0.16) 8deg 16deg);
  animation: spin 80s linear infinite;
}
.poster:nth-child(odd) {
  rotate: -1.5deg;
}
.poster:nth-child(even) {
  rotate: 1.2deg;
  translate: 0 14px;
}
.poster__year {
  position: absolute;
  top: 1.3rem;
  left: 1.3rem;
  z-index: 3;
  padding: 0 0.4em;
  background: var(--paper);
  color: var(--red);
  font-family: var(--f-brush);
  font-size: 1.8rem;
  line-height: 1.25;
  rotate: -4deg;
}
.poster__title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 30cqw;
  line-height: 0.88;
  text-shadow: 4px 4px 0 var(--ink);
  text-transform: uppercase;
}
.poster__title--mid {
  font-size: 19cqw;
}
.poster__title--small {
  font-size: 11.6cqw;
  line-height: 0.98;
}
.poster__slogan {
  position: relative;
  z-index: 2;
  margin: 0.55rem 0 0;
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-shadow: 1px 1px 0 var(--ink);
}
.poster__img {
  position: absolute;
  z-index: 1;
  max-width: none;
}
.poster__img--head {
  left: 9%;
  top: 12%;
  width: 82%;
  transition: transform 0.35s var(--pop);
}
.poster--mew:hover .poster__img--head,
.poster--mew:focus-visible .poster__img--head {
  transform: scale(1.07) rotate(-4deg);
}
.poster__img--wings {
  left: 50%;
  top: 12%;
  width: 134%;
  height: auto;
  translate: -50% 0;
  filter: contrast(1.2) brightness(1.12) drop-shadow(0 0 14px rgba(255, 222, 0, 0.6));
  -webkit-mask-image: linear-gradient(#000 50%, transparent 66%);
  mask-image: linear-gradient(#000 50%, transparent 66%);
}
.poster__img--back {
  left: 50%;
  top: 17%;
  height: 58%;
  width: auto;
  translate: -50% 0;
}
.bars {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  bottom: 38%;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 6%;
}
.bars i {
  flex: 1;
  height: var(--h);
  background: linear-gradient(var(--gold), var(--gold-deep));
  border: 3px solid var(--ink);
  transform-origin: bottom;
  animation: grow 2.2s ease-in-out infinite alternate;
}
.bars i:nth-child(1) {
  --h: 14%;
}
.bars i:nth-child(2) {
  --h: 24%;
  animation-delay: -0.3s;
}
.bars i:nth-child(3) {
  --h: 38%;
  animation-delay: -0.6s;
}
.bars i:nth-child(4) {
  --h: 58%;
  animation-delay: -0.9s;
}
.bars i:nth-child(5) {
  --h: 120%;
  background: linear-gradient(#fff, var(--gold) 30%, var(--red-hot));
  animation-delay: -1.2s;
}
.ascender {
  position: absolute;
  left: 50%;
  top: 14%;
  z-index: 1;
  width: 40%;
  translate: -50% 0;
  animation: float 3s ease-in-out infinite alternate;
}
.ascender img {
  width: 100%;
  height: auto;
  filter: url(#gold-map) drop-shadow(0 0 14px #fff6b8);
}
.ascender__halo {
  position: absolute;
  left: 50%;
  top: -3%;
  width: 52%;
  aspect-ratio: 3 / 1;
  translate: -50% 0;
  border: 7px solid var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 18px var(--gold), inset 0 0 10px var(--gold);
}
.poster__cloud {
  position: absolute;
  z-index: 1;
  width: 60%;
  aspect-ratio: 200 / 90;
  color: var(--paper);
  animation: drift 7s ease-in-out infinite alternate;
}
.poster__cloud--1 {
  left: -12%;
  top: 52%;
}
.poster__cloud--2 {
  right: -16%;
  top: 38%;
  animation-delay: -3s;
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4rem, 10vw, 9rem) 0 3rem;
  background: var(--red);
  color: var(--paper);
  text-align: center;
}
.footer__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.sunburst--slow {
  top: 38%;
  animation-duration: 160s;
}
.footer__bye {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(4.5rem, 19vw, 18rem);
  line-height: 0.9;
  text-transform: uppercase;
}
.footer__emoji {
  display: inline-block;
  animation: wobble 2s ease-in-out infinite;
}
.footer__zh {
  margin: 0.1em 0 0.6em;
  color: var(--gold);
  font-family: var(--f-brush);
  font-size: clamp(2rem, 6vw, 5rem);
  line-height: 1.1;
  text-shadow: 3px 3px 0 var(--ink);
}
.footer__scores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.5rem;
  margin: 0 0 2rem;
  font-family: var(--f-mono);
}
.footer__scores dt {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
}
.footer__scores dd {
  margin: 0;
  color: var(--gold);
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3.6vw, 2.8rem);
  text-shadow: 2px 2px 0 var(--ink);
}
.footer__fine {
  max-width: 60ch;
  margin: 2.5rem auto 0;
  font-size: 0.8rem;
}

/* =========================================================
   OVERLAYS
   ========================================================= */

#fx {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#rain,
#popups {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
#rain {
  z-index: 61;
}
#rain img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  will-change: transform;
}
#popups {
  z-index: 62;
}
.pop {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -50%;
  padding: 0.15em 0.55em;
  background: var(--gold);
  border: 2.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: clamp(1rem, 2vw, 1.5rem);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pop--bad {
  background: var(--ink);
  border-color: var(--red-hot);
  color: var(--red-hot);
}
.pop--aura {
  background: var(--red);
  border-color: var(--gold);
  color: var(--gold);
}
#flash {
  position: fixed;
  inset: 0;
  z-index: 63;
  background: #fff6b8;
  opacity: 0;
  pointer-events: none;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.4rem;
  z-index: 64;
  max-width: calc(100vw - 2rem);
  padding: 0.5em 1em;
  translate: -50% 220%;
  background: var(--ink);
  border: 3px solid var(--gold);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5);
  color: var(--gold);
  font-family: var(--f-display);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  transition: translate 0.35s var(--pop);
}
.toast.is-on {
  translate: -50% 0;
}
.void {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-content: center;
  gap: 0.3rem;
  background: #fff;
  color: #111;
  font-family: var(--f-mono);
  text-align: center;
}
.void p {
  margin: 0;
}
.void__code {
  font-size: clamp(5rem, 22vw, 14rem);
  font-weight: 500;
  line-height: 1;
}
.void__zh {
  font-size: clamp(1.6rem, 5vw, 3rem);
}
.void__title {
  margin-top: 0.6rem !important;
  letter-spacing: 0.2em;
}
.void__count {
  margin-top: 0.4rem !important;
  opacity: 0.6;
}

/* debug overlay for tuning face landmarks (?debug) */
.lm-dot {
  position: absolute;
  z-index: 9;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid #000;
  border-radius: 50%;
  background: #0ff;
  cursor: move;
  pointer-events: auto;
  touch-action: none;
}
.lm-dot::after {
  content: attr(data-k);
  position: absolute;
  left: 14px;
  top: -4px;
  padding: 0 3px;
  background: #000;
  color: #0ff;
  font: 10px/1.3 monospace;
}

/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes throb {
  50% {
    transform: scale(1.06);
  }
}
@keyframes drift {
  from {
    transform: translate(-14px, 4px);
  }
  to {
    transform: translate(18px, -6px);
  }
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
@keyframes beam {
  from {
    top: 4%;
  }
  to {
    top: 94%;
  }
}
@keyframes jitter {
  0% {
    transform: translate(1px, -1px);
  }
  33% {
    transform: translate(-1px, 1px);
  }
  66% {
    transform: translate(1px, 1px);
  }
  100% {
    transform: translate(-1px, -1px);
  }
}
@keyframes bobble {
  0%,
  100% {
    rotate: -7deg;
  }
  50% {
    rotate: 8deg;
  }
}
@keyframes float {
  from {
    translate: -50% 8px;
    rotate: -3deg;
  }
  to {
    translate: -50% -14px;
    rotate: 3deg;
  }
}
@keyframes grow {
  from {
    transform: scaleY(0.82);
  }
  to {
    transform: scaleY(1.06);
  }
}
@keyframes wobble {
  0%,
  100% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(12deg) scale(1.08);
  }
}
@keyframes nudge {
  50% {
    transform: translateX(6px);
  }
}
@keyframes stat-up {
  40% {
    transform: scale(1.35);
    color: #fff;
  }
}
@keyframes stat-down {
  20% {
    transform: translateX(-5px);
    color: var(--red-hot);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-4px);
    color: var(--red-hot);
  }
  80% {
    transform: translateX(3px);
  }
}

/* =========================================================
   CALM MODE (also the reduced-motion default, set by JS)
   ========================================================= */

.calm .sunburst,
.calm .poster::before,
.calm .hud__star,
.calm .lab__dish::after,
.calm .cloud,
.calm .poster__cloud,
.calm .bobble__head,
.calm .ascender,
.calm .bars i,
.calm .btn--enter,
.calm .footer__emoji,
.calm .face__hint,
.calm .term__badge,
.calm .slider.is-over .slider__knob {
  animation: none;
}
.calm .ticker__track {
  animation-duration: 160s;
}
.calm .ticker--b .ticker__track {
  animation-duration: 190s;
}

/* =========================================================
   SMALLER SCREENS
   ========================================================= */

@media (max-width: 860px) {
  .scan,
  .lab,
  .term {
    grid-template-columns: 1fr;
  }
  .plan {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .hud {
    gap: 0.6rem;
    padding: 0 0.6rem;
  }
  .hud__brand span,
  .hud__label [lang],
  .hide-sm {
    display: none;
  }
  .hud__stats {
    flex: 1;
    gap: 0.6rem;
    justify-content: space-around;
    margin-left: 0;
  }
  .hud__label {
    font-size: 0.5rem;
    letter-spacing: 0.04em;
  }
  .hud__value {
    font-size: 0.98rem;
  }
  .chip {
    padding: 0.4em 0.55em;
    font-size: 0.62rem;
  }
}

/* portrait screens: stack the masthead above the head */
@media (max-aspect-ratio: 1/1) {
  .hero__title {
    flex-direction: column;
    align-items: center;
    top: calc(var(--hud-h) + 1.5vh);
    font-size: min(27vw, 15svh);
    line-height: 0.9;
  }
  .hero__zh {
    right: 2.5vw;
    bottom: calc(min(76svh, 106vw) - 1rem);
    font-size: clamp(1.8rem, 9vw, 3.4rem);
  }
  .hero__bureau {
    display: none;
  }
  .stamp {
    left: 4vw;
    top: auto;
    bottom: calc(min(76svh, 106vw) - 1.2rem);
  }
  /* no room beside the chin on a phone: the hint goes on the left instead */
  .face__hint {
    left: auto;
    right: 90%;
  }
  .face__hint::before {
    content: "";
  }
  .face__hint::after {
    content: " →";
  }
  #btn-replay {
    left: 4vw;
    bottom: 3.2rem;
    font-size: 0.78rem;
  }
  .hero__scroll {
    left: 4vw;
    font-size: 0.56rem;
    letter-spacing: 0.1em;
  }
  .mogbtn {
    right: 5vw;
    bottom: 2.2rem;
  }
}

@media (max-width: 480px) {
  .term__actions {
    grid-template-columns: 1fr;
  }
  .verdict__bar {
    flex-direction: column;
  }
  .footer__scores {
    gap: 1rem;
  }
}

/* =========================================================
   GIGACHAD: the drawn body, the relics, the form meter
   ========================================================= */

.defs {
  position: absolute;
}
/* the photo bodies: placed by js/body.js in % of the portrait box */
.body {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.body__photo {
  position: absolute;
  max-width: none;
  height: auto;
  opacity: 0;
  transition: opacity 0.18s;
  user-select: none;
  -webkit-user-drag: none;
}
.body__photo.is-on {
  opacity: 1;
}
/* lift the photos' flat greys to the punch of the graded head */
.body__photo {
  filter: contrast(1.22) brightness(1.12);
}
.body.is-gold .body__photo {
  filter: url(#gold-map) drop-shadow(0 0 40px rgba(255, 246, 184, 0.9));
}
/* the drawn props share the WebGL canvas's padded box */
.ears,
.relics {
  position: absolute;
  left: -45%;
  top: -12%;
  width: 190%;
  height: 112%;
  overflow: visible;
  pointer-events: none;
}
.ears {
  opacity: 0;
  transition: opacity 0.3s;
}
.ears.is-on {
  opacity: 1;
}
.ears .ear {
  fill: #f2b41c;
  stroke: #1a0303;
  stroke-width: 9;
}
.ears .ear-in {
  fill: #fff0c2;
}
@keyframes rep-squash {
  0% {
    scale: 1.07 0.94;
  }
  35% {
    scale: 0.97 1.04;
  }
  65% {
    scale: 1.02 0.99;
  }
  100% {
    scale: 1 1;
  }
}
.face.is-squash {
  animation: rep-squash 0.5s ease-out;
}

/* GIGACHAD: one beat of the photographer's grey studio */
.studio {
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 80% at 50% 40%, #b9b9b9, #6f6f6f 60%, #2b2b2b);
  opacity: 0;
  pointer-events: none;
}

/* TERACHAD: the wingspan readout */
.wingspan {
  position: absolute;
  left: 2vw;
  right: 2vw;
  z-index: 3;
  height: 0;
  border-top: 3px solid var(--gold);
  box-shadow: 0 0 12px var(--gold);
  opacity: 0;
  translate: 0 -1.2rem;
  transition: opacity 0.4s 0.5s;
  pointer-events: none;
}
.wingspan::before,
.wingspan::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 3px;
  height: 21px;
  background: var(--gold);
}
.wingspan::before {
  left: 0;
}
.wingspan::after {
  right: 0;
}
.wingspan > span {
  position: absolute;
  left: 12%;
  bottom: 8px;
  padding: 0.2em 0.8em;
  background: rgba(26, 3, 3, 0.9);
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-family: var(--f-mono);
  font-size: clamp(0.6rem, 1.2vw, 0.85rem);
  letter-spacing: 0.18em;
  white-space: nowrap;
}
.is-wings .wingspan {
  opacity: 1;
}

/* OMEGA: the wall of him */
.omega {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.omega__clone {
  position: absolute;
  width: auto;
  max-width: none;
  translate: -50% 110%;
  opacity: 0;
  filter: url(#gold-map) brightness(var(--dim, 1));
  transition: translate 0.5s cubic-bezier(0.2, 1.4, 0.4, 1), opacity 0.2s;
  user-select: none;
}
.omega__clone.is-on {
  translate: -50% 0;
  opacity: 1;
  animation: clone-bob var(--bob, 2.4s) var(--lag, 0s) ease-in-out infinite alternate;
}
@keyframes clone-bob {
  from {
    margin-bottom: 0;
  }
  to {
    margin-bottom: 1.6vh;
  }
}
.calm .omega__clone.is-on {
  animation: none;
}

.relics {
  opacity: 0;
  transition: opacity 0.3s;
}
.relics.is-on {
  opacity: 1;
}
.relics__halo ellipse {
  fill: none;
  stroke: var(--gold);
  stroke-width: 28;
  filter: drop-shadow(0 0 16px #fff) drop-shadow(0 0 30px var(--gold));
}
.relics__halo .relics__halo-shine {
  stroke: #fff9d6;
  stroke-width: 8;
  filter: none;
}
.relics__pot {
  /* he is small when he floats, so his pot is not */
  transform-box: fill-box;
  transform-origin: 0% 60%;
  scale: 2.3;
  animation: pot-bob 2.6s ease-in-out infinite alternate;
}
.pot-body {
  fill: var(--red);
  stroke: var(--ink);
  stroke-width: 9;
  stroke-linejoin: round;
}
.pot-band {
  fill: var(--gold);
  stroke: var(--ink);
  stroke-width: 7;
}
.pot-lid,
.pot-knob {
  fill: var(--gold-deep);
  stroke: var(--ink);
  stroke-width: 8;
  stroke-linejoin: round;
}
.pot-drip {
  fill: #ffd21f;
  stroke: var(--ink);
  stroke-width: 6;
}
.pot-label {
  fill: var(--ink);
  font-family: var(--f-display);
  font-size: 54px;
}
.pot-zh {
  fill: var(--gold);
  font-family: var(--f-zh);
  font-size: 44px;
}
@keyframes pot-bob {
  from {
    translate: 0 -10px;
  }
  to {
    translate: 0 16px;
  }
}

.face__hit {
  position: absolute;
  left: 14%;
  top: 2%;
  width: 74%;
  height: 98%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 42% 42% 0 0;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><text x='4' y='34' font-size='32'>💪</text></svg>") 22 22, pointer;
}
/* without WebGL the still image is graded here instead of in the shader */
.face:not(.has-gl) .face__fallback {
  filter: grayscale(var(--chad, 0)) contrast(calc(1 + var(--chad, 0) * 0.3)) sepia(var(--gold, 0))
    saturate(calc(1 + var(--gold, 0) * 2.2)) hue-rotate(calc(var(--gold, 0) * -8deg));
}
/* and it cannot fade its own suit either, so mask it */
.face.has-body:not(.has-gl) .face__fallback {
  -webkit-mask-image: linear-gradient(#000 58%, transparent 66%);
  mask-image: linear-gradient(#000 58%, transparent 66%);
}

.form {
  left: 3vw;
  bottom: 7.3rem;
  display: grid;
  gap: 0.28rem;
  min-width: 13.5rem;
  padding: 0.55rem 0.7rem 0.6rem;
  background: rgba(26, 3, 3, 0.84);
  border: 2px solid var(--gold);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.45);
  color: var(--gold);
  font-family: var(--f-mono);
}
.form__label {
  color: var(--gold-pale);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
}
.form__name {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1;
}
.form__bar {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  gap: 2px;
  height: 10px;
}
.form__bar i {
  background: rgba(255, 222, 0, 0.18);
}
.form__bar i:nth-child(3n):not(:last-child) {
  margin-right: 3px;
}
.form__bar i.is-on {
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold);
}
.form__hint {
  color: var(--paper);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  transform-origin: left;
  animation: throb 1.1s ease-in-out infinite;
}
.has-repped .form__hint,
.calm .form__hint {
  animation: none;
}

/* the ascension turns the whole hero to gold and white */
.is-ascending .hero .sunburst,
.is-ascended .hero .sunburst {
  background: repeating-conic-gradient(from 0deg, #ffe680 0 6deg, #ffc21a 6deg 12deg);
  animation-duration: 14s;
}
.is-ascended .hero__bg {
  background: #ffd23a;
}
.is-ascending .hero .sun,
.is-ascended .hero .sun {
  background: radial-gradient(circle, #fff 0%, #fff6b8 42%, rgba(255, 246, 184, 0) 70%);
}
.is-ascended .hero .cloud {
  color: #fff;
}
.is-ascended .hero__word {
  color: #fff;
  text-shadow: 0.03em 0.03em 0 var(--gold-deep), 0.06em 0.06em 0 var(--red-deep);
}
.is-ascended .hero .face-rise {
  filter: drop-shadow(0 0 34px #fff) drop-shadow(0 0 60px var(--gold));
}

/* =========================================================
   THE FILM
   ========================================================= */

html.is-watching {
  overflow: hidden;
}
.movie {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  background: #000;
  color: var(--paper);
}
.movie__screen {
  grid-row: 2;
  position: relative;
  width: 100%;
  max-height: 78vh;
  aspect-ratio: 2.39 / 1;
  overflow: hidden;
  isolation: isolate;
  background: #0d0101;
}
.movie__sub {
  grid-row: 3;
  align-self: start;
  min-height: 2em;
  margin: 1rem 1rem 0;
  font-size: clamp(1rem, 2.4vw, 1.6rem);
  font-style: italic;
  font-weight: 600;
  text-align: center;
}
.movie__skip {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
}
.movie__grain {
  position: absolute;
  inset: 0;
  background: var(--noise);
  opacity: 0.5;
  pointer-events: none;
}
.mv-world,
.mv-back,
.mv-you,
.mv-shadow,
.mv-foot,
.mv-climb,
.mv-height,
.mv-torso,
.mv-grid,
.mv-measure,
.mv-stats,
.mv-card {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
.mv-world {
  inset: 0;
  background: linear-gradient(180deg, #2a0606 0%, #6e1010 86%, #1a0303 86.2%, #0d0101 100%);
}
.movie.is-drop .mv-world {
  background: linear-gradient(180deg, var(--red) 0%, #f2560f 86%, #1a0303 86.2%, #0d0101 100%);
}
.mv-rays {
  position: absolute;
  left: 62%;
  top: 52%;
  width: 300vmax;
  height: 300vmax;
  margin: -150vmax;
  background: repeating-conic-gradient(from 0deg, transparent 0 6deg, rgba(255, 222, 0, 0.2) 6deg 12deg);
  opacity: 0;
  animation: spin 40s linear infinite;
}
.mv-sun {
  position: absolute;
  left: 62%;
  top: 52%;
  width: 46%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6b8, var(--gold) 40%, rgba(255, 179, 0, 0) 70%);
  opacity: 0;
}
.movie.is-drop .mv-rays,
.movie.is-drop .mv-sun {
  opacity: 1;
}
.mv-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14%;
  border-top: 4px solid var(--gold-deep);
}
.mv-you {
  z-index: 2;
  left: 16%;
  bottom: 5%;
  height: 36%;
  aspect-ratio: 200 / 240;
  transform-origin: 50% 100%;
}
.mv-you svg {
  width: 100%;
  height: 100%;
}
.mv-you path {
  fill: #b9a98f;
}
.mv-you text {
  fill: var(--ink);
  font-family: var(--f-display);
  font-size: 64px;
}
.mv-you__tag {
  position: absolute;
  left: 50%;
  bottom: 102%;
  translate: -50% 0;
  padding: 0.1em 0.6em;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
}
.mv-shadow {
  inset: 0;
  background: radial-gradient(60% 90% at 70% 100%, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.4) 70%, transparent);
}
/* every photo in the film gets the same punch */
.mv-foot img,
.mv-climb img,
.mv-torso img,
.mv-grid img {
  max-width: none;
  filter: contrast(1.22) brightness(1.12);
}
/* one enormous foot: the tiptoe picture, so big only a foot fits */
.mv-foot {
  inset: 0;
  overflow: hidden;
}
.mv-foot img {
  position: absolute;
  left: 3%;
  bottom: -4%;
  width: auto;
  height: 820%;
}
/* the climb: head and torso, then legs stretched seven times, then feet */
.mv-climb {
  inset: 0;
  overflow: hidden;
}
.mv-climb__col {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  margin-left: -25%;
  will-change: transform;
}
.seg {
  position: relative;
  overflow: hidden;
}
.seg img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  transform-origin: 0 0;
}
.seg--top {
  aspect-ratio: 822 / 850;
}
.seg--legs {
  aspect-ratio: 822 / 2800;
}
.seg--legs img {
  transform: scaleY(7) translateY(-55.56%);
}
.seg--feet {
  aspect-ratio: 822 / 280;
}
.seg--feet img {
  transform: translateY(-81.7%);
}
.mv-eye {
  position: absolute;
  width: 5.5%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #fff6b8 28%, rgba(255, 222, 0, 0) 70%);
  opacity: 0;
}
.mv-eye--l {
  left: 49.27%;
  top: 22.94%;
}
.mv-eye--r {
  left: 56.08%;
  top: 23.65%;
}
.mv-height {
  left: 5%;
  bottom: 10%;
  margin: 0;
  padding: 0.25em 0.7em;
  background: rgba(26, 3, 3, 0.88);
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-family: var(--f-mono);
  font-size: clamp(0.7rem, 1.6vw, 1.1rem);
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.mv-torso {
  inset: 0;
  overflow: hidden;
}
.mv-torso img {
  position: absolute;
  left: 50%;
  bottom: -4%;
  width: auto;
  height: 150%;
  translate: -50% 0;
}
/* cols x rows of him */
.mv-grid {
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), 1fr);
  grid-auto-rows: calc(100% / var(--rows, 1));
  overflow: hidden;
}
.mv-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 2%;
}
.mv-grid img[hidden] {
  display: none;
}
.mv-measure {
  inset: 0;
  color: var(--gold);
  font-family: var(--f-mono);
}
.mv-measure i {
  position: absolute;
  left: 26%;
  top: 58%;
  width: 48%;
  height: 3px;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
  rotate: 22deg;
  transform-origin: left;
}
.mv-measure__tag {
  position: absolute;
  padding: 0.25em 0.7em;
  background: rgba(26, 3, 3, 0.88);
  border: 1.5px solid var(--gold);
  font-size: clamp(0.6rem, 1.3vw, 0.9rem);
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.mv-measure__tag--a {
  left: 5%;
  top: 26%;
}
.mv-measure__tag--b {
  right: 5%;
  bottom: 12%;
}
.mv-stats {
  left: 5%;
  top: 9%;
  display: grid;
  gap: 0.5rem;
  font-family: var(--f-mono);
}
.mv-stats div {
  display: grid;
  padding: 0.3rem 0.8rem;
  background: rgba(26, 3, 3, 0.88);
  border: 2px solid var(--gold);
}
.mv-stats span {
  color: var(--gold-pale);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
}
.mv-stats b {
  color: var(--gold);
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3.6vw, 2.8rem);
  font-weight: 400;
  line-height: 1;
}
#mv-your-aura {
  color: var(--red-hot);
}
.mv-back {
  left: 62%;
  bottom: 0;
  height: 80%;
  aspect-ratio: 314 / 897;
  translate: -50% 0;
  transform-origin: 50% 100%;
}
.mv-back img {
  width: 100%;
  height: 100%;
}
.mv-card {
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.4rem;
  padding: 0 1.2rem;
  background: #0d0101;
  text-align: center;
}
.mv-studio p {
  margin: 0.8rem 0 0;
  color: var(--gold);
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 5vw, 3.4rem);
  letter-spacing: 0.3em;
  line-height: 1;
}
.mv-studio small {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
}
.mv-title h2 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(3rem, 13vw, 10rem);
  font-weight: 400;
  line-height: 0.92;
}
.mv-title p {
  margin: 0;
  color: var(--red-hot);
  font-family: var(--f-brush);
  font-size: clamp(2rem, 7vw, 5.5rem);
  line-height: 1;
}
.mv-end {
  background: rgba(13, 1, 1, 0.84);
}
.mv-end h2 {
  margin: 0.5rem 0 0;
  color: var(--gold);
  font-family: var(--f-display);
  font-size: clamp(2rem, 7vw, 5rem);
  font-weight: 400;
  line-height: 1;
}
.mv-end p {
  max-width: 30ch;
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-wrap: balance;
}
.mv-end__stamp {
  padding: 0.05em 0.4em;
  background: var(--paper);
  color: var(--red);
  border: 6px solid var(--red);
  box-shadow: 8px 8px 0 #000;
  font-family: var(--f-display);
  font-size: clamp(3rem, 12vw, 9rem);
  line-height: 1;
}
.mv-flash {
  position: absolute;
  inset: 0;
  background: #fff6b8;
  opacity: 0;
  pointer-events: none;
}
.calm .mv-rays {
  animation: none;
}

@media (max-aspect-ratio: 1/1) {
  .form {
    left: 4vw;
    bottom: 7.8rem;
    min-width: 0;
    padding: 0.4rem 0.5rem;
  }
  .form__name {
    font-size: 1.1rem;
  }
  .form__hint {
    font-size: 0.5rem;
  }
  .movie__screen {
    aspect-ratio: 4 / 5;
  }
  .mv-climb__col {
    width: 86%;
    margin-left: -43%;
  }
  .mv-foot img {
    height: 520%;
    left: -150%;
  }
  .mv-you {
    left: 6%;
    height: 22%;
  }
}

@media (max-aspect-ratio: 1/1) {
  .face__hint {
    left: 30%;
    right: auto;
    top: -14%;
    translate: -50% 0;
    font-size: 0.5rem;
  }
  .face__hint::before {
    content: "↓ ";
  }
  .face__hint::after {
    content: none;
  }
}

/* =========================================================
   MEGA MOG: the takeover
   ========================================================= */

.megamog {
  position: fixed;
  inset: 0;
  z-index: 39; /* over the page, under the top bar and the effects */
  overflow: hidden;
  background: radial-gradient(90% 70% at 50% 34%, #7a1010, #1a0303 70%);
  pointer-events: none;
}
.megamog__rays {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 300vmax;
  height: 300vmax;
  margin: -150vmax;
  background: repeating-conic-gradient(from 0deg, transparent 0 6deg, rgba(255, 222, 0, 0.22) 6deg 12deg);
  animation: spin 30s linear infinite;
}
.megamog__him {
  position: absolute;
  left: 50%;
  top: 3vh;
  width: max(116vw, 96vh);
  height: auto;
  max-width: none;
  margin-left: calc(max(116vw, 96vh) / -2);
  transform-origin: 50% 20%;
  filter: contrast(1.25) brightness(1.15) drop-shadow(0 0 46px rgba(255, 222, 0, 0.7));
}
.megamog__stamps {
  position: absolute;
  inset: 0;
}
.megamog__stamp {
  position: absolute;
  display: grid;
  justify-items: center;
  max-width: 88vw;
  padding: 0.1em 0.4em 0.16em;
  translate: -50% -50%;
  background: var(--paper);
  color: var(--red);
  border: 6px solid var(--red);
  outline: 3px solid var(--paper);
  box-shadow: 9px 9px 0 #000;
  font-family: var(--f-display);
  font-size: calc(clamp(1.9rem, 6.2vw, 5.6rem) * var(--size, 1));
  line-height: 0.95;
  text-align: center;
  text-wrap: balance;
}
.megamog__stamp span {
  font-family: var(--f-brush);
  font-size: 0.42em;
  line-height: 1.1;
}
.calm .megamog__rays {
  animation: none;
}
/* afterwards your cursor is his head for a while (assets/giga/cursor.png, 48 x 63) */
.is-headcursor,
.is-headcursor * {
  cursor: url("../assets/giga/cursor.png") 24 30, auto !important;
}

/* =========================================================
   COMMUNITY: the shared mog count
   ========================================================= */

/* the number in the top bar (desktop only; phones get the strip below) */
.hud__stat--mogs {
  text-decoration: none;
}
.hud__stat--mogs .hud__value {
  color: var(--red-hot);
}
.mogs-offline .hud__stat--mogs .hud__value {
  color: var(--paper-2);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}
@media (max-width: 1000px) {
  .hud__stat--mogs {
    display: none;
  }
}

/* the strip under the hero's tickers */
.mogbar {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 2rem;
  padding: 0.7rem 1rem;
  background: var(--ink);
  border-block: 3px solid var(--gold);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-decoration: none;
}
.mogbar b {
  margin-left: 0.4em;
  color: var(--gold);
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  vertical-align: -0.12em;
}
.mogbar__go {
  padding: 0.3em 0.8em;
  border: 1.5px solid var(--gold);
  color: var(--gold);
}
.mogbar:hover .mogbar__go,
.mogbar:focus-visible .mogbar__go {
  background: var(--gold);
  color: var(--ink);
}

/* ---------- Department 06: the People's Quota ---------- */

.quota,
.quota-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.5rem);
  align-items: stretch;
}
.quota-grid,
.rush {
  margin-top: clamp(1.4rem, 3vw, 2.5rem);
}
.quota__count,
.quota__day,
.panel,
.rush {
  padding: clamp(1.2rem, 2.5vw, 2rem);
  background: rgba(26, 3, 3, 0.55);
  border: 3px solid var(--gold);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.45);
}
.quota__count {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.5rem;
  text-align: center;
}
.quota__label {
  color: var(--gold-pale);
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.2em;
}
.quota__total {
  color: var(--gold);
  font-family: var(--f-display);
  font-size: clamp(3.2rem, 9vw, 7.5rem);
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
  text-shadow: 0.04em 0.04em 0 var(--red-deep), 0.08em 0.08em 0 var(--ink);
  overflow-wrap: anywhere;
}
.quota__status {
  padding: 0.25em 0.8em;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
}
.mogs-offline .quota__status {
  border-color: var(--red-hot);
  color: var(--red-hot);
}
.quota__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem 1rem;
}
.quota__numbers {
  color: var(--paper);
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-variant-numeric: tabular-nums;
}
.quota__numbers b {
  color: var(--gold);
  font-weight: 400;
}
.quota__bar,
.goal__bar,
.treasury__bar {
  height: 18px;
  margin: 0.8rem 0;
  background: rgba(255, 222, 0, 0.12);
  border: 2px solid var(--gold);
}
.quota__bar i,
.goal__bar i,
.treasury__bar i {
  display: block;
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(-45deg, var(--gold) 0 10px, var(--gold-deep) 10px 20px);
  transition: width 0.6s var(--pop);
}
.quota__verdict {
  min-height: 1.3em;
  margin: 0;
  color: var(--red-hot);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}
.quota__verdict.is-met {
  color: var(--gold);
}
.quota__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.2rem 0 0;
}
.quota__facts dt {
  color: var(--gold-pale);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
}
.quota__facts dd {
  margin: 0;
  color: var(--gold);
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-variant-numeric: tabular-nums;
}
.panel__title {
  margin: 0 0 1rem;
  color: var(--gold);
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 400;
  line-height: 1;
}
.provinces,
.goals,
.ladder {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.provinces {
  gap: 0.2rem;
  font-family: var(--f-mono);
  font-size: 0.86rem;
}
.province {
  display: grid;
  grid-template-columns: 2em 1.8em minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 1.5px dashed rgba(255, 222, 0, 0.3);
}
.province:first-child:not(.province--empty) {
  background: rgba(255, 222, 0, 0.14);
  color: var(--gold);
}
.province__rank {
  color: var(--gold-pale);
  opacity: 0.7;
}
.province__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.province b {
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.province--empty {
  display: block;
  border: 0;
  letter-spacing: 0.14em;
  opacity: 0.7;
  text-align: center;
}
.goals {
  gap: 0.9rem;
}
.goal {
  position: relative;
  padding: 0.7rem 0.8rem;
  border: 1.5px solid rgba(255, 222, 0, 0.4);
}
.goal.is-done {
  background: rgba(255, 222, 0, 0.1);
  border-color: var(--gold);
}
.goal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
  padding-right: 6.5rem;
  font-family: var(--f-display);
}
.goal__head b {
  color: var(--gold);
  font-size: 1.6rem;
  font-weight: 400;
}
.goal__title {
  font-size: 1.1rem;
  letter-spacing: 0.03em;
}
.goal__reward {
  margin: 0.2rem 0 0;
  font-size: 0.86rem;
  opacity: 0.85;
}
.goal__bar {
  height: 8px;
  margin: 0.6rem 0 0;
  border-width: 1.5px;
}
.goal__stamp,
.rung__stamp {
  padding: 0.1em 0.5em;
  background: var(--paper);
  color: var(--red);
  border: 3px solid var(--red);
  font-family: var(--f-display);
  font-size: 0.92rem;
  white-space: nowrap;
}
.goal__stamp {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  rotate: 6deg;
}

/* ---------- the challenge: the ten-second mog ---------- */

.rush {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
}
.rush__title {
  margin: 0 0 0.6rem;
  color: var(--gold);
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 400;
  line-height: 0.95;
}
.rush__lede {
  max-width: 40ch;
  margin: 0 0 1.2rem;
  font-weight: 600;
}
.rush__dare {
  margin: 0 0 1rem;
  padding: 0.5em 0.8em;
  background: var(--red);
  border: 2px solid var(--gold);
  color: var(--gold);
  font-family: var(--f-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}
.rush__best {
  margin: 1rem 0 0;
  color: var(--gold-pale);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}
.rush__result {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1.5px dashed rgba(255, 222, 0, 0.4);
}
.rush__rank {
  margin: 0;
  color: var(--gold);
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1;
}
.rush__line {
  margin: 0.4rem 0 1rem;
  font-weight: 600;
}
.rush__actions,
.treasury__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.rush__arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  gap: 1rem;
}
.rush__readout {
  display: grid;
  justify-items: center;
  color: var(--gold-pale);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
}
.rush__readout output {
  color: var(--gold);
  font-family: var(--f-display);
  font-size: clamp(2rem, 6vw, 4.4rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.rush[data-phase="countdown"] #rush-timer {
  color: var(--red-hot);
}
.rush__head {
  width: clamp(140px, 22vw, 260px);
  padding: 0;
  background: radial-gradient(circle, rgba(255, 222, 0, 0.4), transparent 66%);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.2s;
}
.rush__head img {
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(255, 222, 0, 0.6));
}
.rush__head:disabled {
  cursor: default;
  filter: grayscale(0.8) brightness(0.7);
}
@keyframes rush-hit {
  from {
    scale: 0.88;
  }
  to {
    scale: 1;
  }
}
.rush__head.is-hit {
  animation: rush-hit 0.12s ease-out;
}

/* ---------- Department 07: the People's Treasury ---------- */

.treasury {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.5rem);
  align-items: start;
}
.treasury__ticker {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1rem;
}
.treasury__ticker b {
  color: var(--red);
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 400;
  line-height: 1;
}
.treasury__chain {
  padding: 0.25em 0.7em;
  background: var(--ink);
  color: var(--gold);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
}
.treasury__label {
  margin: 0 0 0.4rem;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
}
.treasury__address {
  display: block;
  padding: 0.8rem 0.9rem;
  background: var(--paper);
  border: 2px dashed var(--ink);
  font-family: var(--f-mono);
  font-size: clamp(0.78rem, 1.5vw, 1rem);
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}
.is-pending .treasury__address {
  color: var(--red);
  letter-spacing: 0.08em;
  user-select: none;
  -webkit-user-select: none;
}
.treasury__actions {
  margin-top: 1rem;
}
.treasury__actions .btn {
  font-size: 1rem;
  text-decoration: none;
}
/* buttons and links that are not ready yet */
.btn:disabled,
.btn[aria-disabled="true"] {
  box-shadow: 2px 2px 0 var(--ink);
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
}
.risk {
  margin-top: 1.2rem;
  padding: 0.9rem 1rem;
  background: var(--ink);
  border-left: 8px solid var(--red);
  color: var(--paper);
}
.risk b {
  color: var(--gold);
  font-family: var(--f-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.16em;
}
.risk p {
  margin: 0.4rem 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
}
.treasury__goal {
  padding: clamp(1.3rem, 2.5vw, 2rem);
  background: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--red);
  color: var(--paper);
}
.treasury__goal .treasury__label {
  color: var(--gold-pale);
}
.treasury__cap {
  display: block;
  color: var(--gold);
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  overflow-wrap: anywhere;
}
.treasury__source {
  margin: 0.4rem 0 0;
  color: var(--gold-pale);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}
.treasury__source a {
  color: var(--gold);
}
.treasury__next {
  min-height: 1.2em;
  margin: 0 0 1rem;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
}
.ladder {
  gap: 0.4rem;
}
.rung {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.45rem 0.7rem;
  border: 1.5px solid rgba(255, 222, 0, 0.35);
  font-family: var(--f-mono);
}
.rung b {
  color: var(--paper);
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 400;
}
.rung.is-done {
  background: rgba(255, 222, 0, 0.12);
  border-color: var(--gold);
}
.rung.is-done b {
  color: var(--gold);
}
.rung__stamp {
  rotate: -3deg;
}
.rung__todo {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  opacity: 0.55;
}

/* ---------- what the community goals unlock ---------- */

/* 100,000 mogs: the top bar turns gold */
.goal-gold .hud {
  background: linear-gradient(180deg, #fff6b8, var(--gold) 45%, var(--gold-deep));
  border-bottom-color: var(--ink);
}
.goal-gold .hud__brand,
.goal-gold .hud__label,
.goal-gold .hud__value {
  color: var(--ink);
}
.goal-gold .hud__stat--mogs .hud__value,
.goal-gold #hud-credit .hud__value {
  color: var(--red-deep);
}
.goal-gold .hud .chip {
  border-color: var(--ink);
  color: var(--ink);
}
.goal-gold .hud .chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--gold);
}

/* 1,000,000 mogs: the sixth poster */
.poster__img--torso {
  left: 50%;
  top: -46%;
  width: 112%;
  height: auto;
  translate: -50% 0;
  filter: contrast(1.2) brightness(1.12) drop-shadow(0 0 14px rgba(255, 222, 0, 0.6));
  -webkit-mask-image: linear-gradient(#000 60%, transparent 73%);
  mask-image: linear-gradient(#000 60%, transparent 73%);
}

/* 10,000,000 mogs: the wall of him at the entry gate */
.gate__wall {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 46%;
  opacity: 0.6;
  pointer-events: none;
}
.gate__wall img {
  width: auto;
  max-width: none;
  height: 100%;
  filter: url(#gold-map);
}

@media (max-width: 860px) {
  .quota,
  .quota-grid,
  .rush,
  .treasury {
    grid-template-columns: minmax(0, 1fr);
  }
  .rush__arena {
    order: -1;
  }
  .goal__head {
    padding-right: 0;
  }
  .goal__stamp {
    position: static;
    display: inline-block;
    margin-top: 0.5rem;
  }
}

/* small fixes after the first look */
.rush__title [lang],
.panel__title [lang] {
  white-space: nowrap;
}
.rush__title [lang] {
  display: block;
  font-size: 0.6em;
  color: var(--paper);
}
/* the top-bar number grows towards the left when it ticks, not into its neighbour */
.hud__stat--mogs .hud__value {
  transform-origin: 100% 50%;
}